logo

Category: Web Design

24
Sep

6 Ways to Make Your Restaurant Website More Appetizing

There are certain mysteries of the universe you and I will never understand: What is dark matter? How does gravity work? Why do humans need sleep? Where did that other sock disappear to?

But near that the top of that deeply perplexing list is one question that nags me almost incessantly: Why are all restaurant websites terrible?

It’s a sad reality, but it doesn’t have to be this way. By following a few basic principles, you can take your restaurant website from flavorless to five stars.

1. Make it responsive

I’ve said this before, and I’ll say it again: It’s critical that your website be beautiful and functional on each and every device. If it’s not adhering to the principles of responsive web design, it’s going to be a navigational nightmare for anyone looking to find your hours, menu, contact info, etc.

Think about the ways in which most folks come across your website. Facebook, Yelp, Urbanspoon and Google Maps are all huge traffic sources, and the majority of their users are browsing on mobile devices. If I’m on the go and looking for a place to grab a bite, I’m going to reach for my phone. But if I open your website and see a desktop view (or even worse, nothing at all because you’re still using Flash), chances are I’m dining elsewhere.

2. Lose the PDF

If I’m coming to your website from a mobile device, the last thing I want to do is download a huge PDF file on my slow connection (and small data plan). Even if I’m able to get it open, I’m still going to have to zoom and pan around on this multi-page behemoth to find what I’m looking for.

Not only does a PDF offer a poor user experience, it isn’t optimal for SEO or analytics tracking either.

A far better alternative is to add your menu items in good ol’ HTML markup. This will allow them to adapt to screen size, be easily parsed by Google, and change quickly when needed. No more contacting your graphic designer for a single text tweak every time you want to make a menu change, and better yet, no more frustrated potential diners.

3. Hold the cheese

oatmeal

The great web comic The Oatmeal has a clever post about restaurant websites. In it, he offers a quick list of things people look for when browsing:

  • Menu
  • Specials and happy hour info
  • Address with a link to Google Maps
  • Online reservation system that actually works
  • Hours of operation, parking and contact info

The above should be a simple wish list to fulfill, but unfortunately these things are either a) not present, or b) impossible to find amid all the clutter.

Restaurants websites are so often full of cheesy components that do more to distract than inform potential diners. Instead of over-designing and overwhelming, try to follow these rules:

  • Don’t make critical pieces of information difficult to locate
  • Save the ambient music for the restaurant itself
  • Keep design flare to a minimum
  • Put any extra content (i.e. videos, photo galleries, letters from the chef / owner) on separate inside pages and keep the homepage clean and practical

 

4. Express yourself

If your aim is to provide customers with an elegant, white tablecloth-style dining experience, that aesthetic should be reflected in your site’s design. The same is true if you’re a sports bar hoping to provide elevated bar food and a fun atmosphere.

Your website often serves as the first point of contact with potential diners. You want them to come away with an accurate sense of the experience you’re trying to provide. If you don’t, you risk failing to meet expectations.

5. Keep it current

I’m sure you change your specials on a weekly or monthly basis. You probably rotate out several menu items seasonally, too. Why not give the same thought and care to your website?

Relevant information about drink specials, happy hours, and updated menu items entice potential diners to pay you a visit. However, outdated versions of the same information can scare customers away. If you’re not updating your information online, how can I trust that you’re putting the maximum effort into your food or your service?

6. Connect with the customer

One of the easiest ways to endear yourself to potential diners is to connect with them on social media. Even if you’re not able to update your website weekly, surely you’re posting to Facebook, Twitter, and Instagram regularly, right?

By displaying links to these profiles prominently on your homepage, you provide customers with a simple way to see that recipe you’re testing or the new patio you just opened.

Overwhelmed?

Unsure of how to implement all of these changes? We can help. The Kestrel Co. builds each and every website according to the best practices of responsive web design and search engine optimization. We create beautiful sites free from clutter, and ensure that your identity and vision are expressed in every detail. And, we provide simple and practical solutions for you to keep your site’s content fresh.

Eager to get started? Let’s chat!

09
Sep

Website Personality – Yours or Your customers’?

For thousands of years, design agencies have been offering conflicting advice to innocent clients.

“The look and feel of your site should match the quirkiness of your company’s brand voice.” – Agency 1

“Your website is not for you. It’s for your customers. Your site should make your customers feel like home.” – Agency 2

I’m sure I read somewhere of the famous philosopher Plato (or was it Descartes?) sitting in a cave agonizing over this most ancient of questions: whose personality should be reflected in one’s website?

A mediocre answer

Unfortunately, like so many things in life, the answer is not one or the other. The design of your site should take into consideration both your brand voice and the habits, likes, and tastes of your target demographic.

But that’s too easy and not worth your click. Kestrel can do better.

A better answer

Perhaps a better way to answer this question for you and your company is to first define what you’re selling / marketing on your website.

Let’s imagine you are the marketing director for Hal’s Handmade Hutches. You custom build solid wood dining room hutches. Wonderful. Your website should have the look and ethos of a formal dining room. That’s what you’re selling after all! The people visiting halshutches.com will be looking for and expecting to see hutches. Make them feel like they’ve landed in the right place when they get to your site. Don’t make it quirky and silly. They’re expecting quality, handmade furniture. Your site should feel just like your mother’s dining room.

But let’s switch it up. You quit Hal’s because you couldn’t stand going home smelling like a pine tree everyday. Clara’s Cleaning Crew hired you on to replace their old marketing director who suddenly passed away from exposure to excessive ammonia.

The game has changed my friend! You are no longer selling a specific product, therefore your visitors’ expectations have changed. Now you’re selling the services of Clara’s Crew. The visitors who land on your site are now expecting to meet with the service they’re considering purchasing. Therefore, the general impression of your new site ought to reflect the personality of the company. In this case, the company (more precisely, the service provided by the company) is the product.

If your company’s service is fun and playful, let some of that seep through in your copy, images, colors, and structure. On the other hand, if you’re serious, professional, clean, and prompt, don’t use coy heading tags and navigation.

tldr; (a.k.a. Summary)

Of course, you should always be cognizant of who is viewing your site, what device they’re on, how they’re interacting with your content, etc.

But at the end of the day, let the general personality of your website be a reflection of the product or service you’re providing. Web users are smart. They came to your site for a reason. They came with expectations. Make sure you don’t violate those expectations, and consider that the overall personality of your site is one more component in promoting your product or service.

17
Aug

Your Laptop Is Not A Book or: why you should care about web typography

Let’s face it: most reading these days is done on a screen. Sure, you might crack open a book while you’re lying in bed at night, but the rest of your reading time is monopolized by digital displays.

The unfortunate truth, however, is that most type on the web is a pain to read. There are a number of reasons for this, but the primary one is that the text is simply too small.

In the early days of the Internet, designers didn’t give much thought to the difference between reading on a computer and reading on a printed page. So, they applied the basic principles of print typography to web typography. The result? The default font size of those early websites was set at 12pt.

The inherent problem with this approach is that reading on a computer is an entirely different exercise than reading a book.

Answer me this: When you read a book, where do you hold it? If you’re like most people, it’s probably about 12 inches from your face. But how often are your eyes that close to your computer screen? Hopefully, not very often. So, why should the text on your screen be the same size as that of a book?

The farther away you hold the text, the smaller it becomes visually. You need to make the text size bigger the farther away the text is read, to compensate for a larger reading distance. Source: Information Architects.

The farther away you hold the text, the smaller it becomes visually. You need to make the text size bigger the farther away the text is read, to compensate for a larger reading distance. Source: Information Architects.

When we think about web typography, we should consider not just what the user will be reading, but how they will be reading it. How far away is the user’s screen? How long is the piece of copy we’re asking them to read? How wide is the container that holds the copy?

All of these factors impact how we should design our web typography. An easy fix is to bump up all paragraph text from 12pt to 16pt, like so:

16-pixel text displayed on a 24-inch screen, next to 12-point text printed on paper. Source: Smashing Magazine.

16-pixel text displayed on a 24-inch screen, next to 12-point text printed on paper. Source: Smashing Magazine.

If we want to get more technical (and we do, because it’s our job), we’ll look specifically at the length of each line and aim to follow this rule:

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal.”

The result of implementing this best practice is a good reading experience across all devices (desktop, laptop, tablet, and mobile).

Will your users notice? Probably not. But, that’s exactly what we want. As usability expert Jared Spool said:

“Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”

At the Kestrel Co, we strive to make every website feel effortless and unobtrusive. Designing web typography that ensures users won’t have to zoom in or strain their eyes is one small part of that experience, but it’s a crucial one.

P.S. If you find yourself annoyed by small web typography after reading this post, try using a tool like Pocket to save articles and read them later in a cleaner format, or a browser extension like Evernote Clearly to improve font sizing in one click without leaving the page.

07
Aug

Your website needs a photography and videography partner

Once upon a time, designing a website involved stealing animated gifs and cheesy stock photography from other websites. Those were the days of spinning icons and granulated scanned images. Hopefully, no one reading this post needs to hear this but, just in case, let me be clear: those days are long since dead. The Kestrel Co. was originally birthed as Switzer Creative because we decided prospective client partners would benefit the most if a creative web agency was married to a creative photo / video agency.

This isn’t a knock on stock photography. Perhaps there is a time, a place, or a budget where a few stock photos make sense. But on the whole, one of the best investments you can make in your online presence is in quality photo and video content.

Switzerfilm mascotWe are beyond privileged to partner with the leading photography and cinematography group in the Midwest, Switzerfilm. Trust me, you’ve never worked with a better company. They are some cool cats who love to have a good time. (This is their mascot. ‘nough said.)

We contend that the most creative, engaging, and true-to-the-client websites come from a symbiotic relationship between the people building a website and the folks capturing, editing, and producing the graphic content for that site.

Think about it. Which should come first, photography and videography or website design? Yeah, we don’t know either. There’s not a good answer for that question. The site’s design will take its layout, color, style, and feel from the graphic content. But then again, the graphic content should feel custom shaped for the medium that it’s filling (the website). So again, which comes first?

For Kestrel, the answer is neither should come first. They should happen together. They are two horses pulling the wagon together. You need your website team to be embedded in your photo video team. And, you need your photo video team embedded in your website team.

Henderson Trucking

Switzerfilm traveled out west to get this stunning Henderson Trucking photo for their website.

Switzerfilm and Switzer Creative pose their fun team photo to look great with their typography.

Switzerfilm and the Kestrel Co. pose their fun team photo to look great with their typography.

Your website visitors now have powerful devices with blazing internet connections and large bandwidth capacities. Don’t use generic pictures of random people you paid $5 for. This generation values authenticity and creativity. Show them who you are! Be real; be creative; be beautiful. (Yeah, I said that.)

15
Jul

Your Website Has Lost That Loving Feeling

Remember that time you bought a new car? It smelled so good (in a shampoo-chemical, artificial-fiber kind of way). It was clean. The floor mats were pristine. The speakers were jamming. You were rollin’! My personal favorite memory from that time period: there were no warning or negative indicator lights appearing on the dashboard. Ah, those were the days.

Fast forward five years. My how things have changed. Now you set your drink on the roof of the care without regard. Scratches? You’ve got ’em. Perfect floor mats? Well three of the four are at least still in the car. There is a mysterious goo in the back cupholder. The trunk is littered with junk. And woe of all woes, the check-engine light and tire pressure indicator lights are perpetually on. You have lost your first love.

That, my friend, is almost identical to your website. Right? When you first launched your site, you were oh so proud! Flashy buttons. Beautiful pictures. Fresh content. Yeah, and then life happened. You got busy. You focused on your clients. And now your website is, at best, blah. It’s out of date. It’s stale. It’s boring. It’s, well, it’s embarrassing. Your website has lost that lovin’ feelin’.

Embarrassing old clothes

The love-cycle of your car is a near mirror image of the love-cycle of your company’s website. The main difference is that your love (and your visitors’ love) for your website fades two to three times faster than your car’s.

Here’s how most companies approach their web project: (1) pick a website design and development vendor, (2) spend a few months wireframing and designing, (3) go through the difficult process of innovating and bringing that design to life, (4) train, launch, and acclimate employees to the new site, (5) promote that new website through social media channels, (6) and finally move on to other tasks.

One year later, they call their website guys with a few changes. Another year goes by. A few more copy changes come in. A team member has left. Hours have changed. Another year passes.

The company board meets and people start saying, “We really need to do something with our website. It’s pretty out of date. Let’s budget for a new website next year.” They start the process all over again. They spend a giant sum of money on a brand new website, content overhaul, and site restructure. And guess who they don’t call for a quote? The original web agency. After all, they designed and developed the piece of junk that everybody now hates.

Your website is like your kids: you can’t just make them and then expect them to be fine on their own. They need babysitting. They need TLC. They need feeding with fresh content, fixing, innovating, they need LOVE every single month.

If you don’t have an on-going relationship with your web design company, it’s probably already too late. That’s why our mission at Kestrel (put loosely) is to keep that ‘new car smell’ in your website. You need a partner. You’re not up on the latest web trends. You’re not investing in page-speed techniques and image compression best practices. That’s why we partner with our clients to continue to love on, innovate on, and just pump energy into every website that we design and develop.

Do you remember that time you woke up and Google had radically changed the layout of their search engine? No! Of course you don’t because it never happened. Google has been around forever and it has changed drastically. But it has changed in tiny, micro-iterations over a long period of time. Google isn’t out-of-date. Google isn’t stale and embarrassing. And it’s because they are continually investing in keeping the site fresh, up-to-date, and innovative.

That’s what we want to do for and with you as well. Give us a shout. We’ll put that new car smell back in your old beater. And, if your car (website) is just falling apart and beyond repair, well, we’d be happy to put you in a brand new one today. (Financing available… Not really actually.)

Cheesy used car salesman

08
Jul

What Would Jeff Do?

Jeffrey Haddock is our favorite web designer. Sure, there are a lot of pretenders (haters gotta hate right?). You probably know a guy who used Squarespace to build a page. Well, we know a guy who dipped a Twinkie in coffee and called it tiramisu. Anyway, there’s pretenders, and then there’s Jeff. He’s the cat’s meow, the funky cheese, the top-shelf-gotta-see-it-to-believe-it dawg. Well, at least he is when it comes to web design.

We asked him to talk about design patterns that everyone uses but tend to get wrong. In other words, when it comes to web design, what would Jeff do?


Here are six web design elements you might be using improperly but, with a little Jeffrey-love, could turn right around.

1. Animated Icons

Simple use of animation on a website, whether it be icons, infographics, navigation, can be effective at quickly gaining attention or directing your visitors. Below is an example of how Google creates clean, subtle, sexy icon animations.

Source: Delightful Details

 

2. Repeating Backgrounds

Again, subtlety is what we’re going for. If you need to use a repeating background (which, quite possibly, you don’t), we recommend checking out subtlepatterns.com – a library of free, repeating patterns.

Screen Shot 2015-07-06 at 10.28.37 AM

3. Fixed Nav

Simple, and always there for your convenience.* By fixed nav, we mean as you scroll down the webpage, your navigation doesn’t move, allowing you to always quickly access other pages. If your nav lacks a little spice of life, try fixing it up! (Get it??)
*Keep responsive design in mind.

4. Borders

The keyword in this blog post is going to be “subtlety.” Small doses of these 6 design elements can go a long way in a website design. Today, you’ll see a lot of “Ghost Buttons” on websites. These buttons rather than being a literal button, are created with nothing but a border outline around the text. You can see one here 🙂  thekestrel.co

5. Drop Shadows

No, not orange, teal, blue, yellow, and green drop shadows like your grandma used to use. We’re talking about subtle shadows that create a realistic sense of appropriate depth (when necessary.) Examples below include a clip from Google’s Material Design guide (highly recommend reading the whole guide if you’re into that kind of thing) and of course, Apple.

Google’s Material Design: www.google.com/design/spec/material-design/introduction.html

Screen Shot 2015-07-06 at 2.01.55 AM

Screen Shot 2015-07-06 at 2.17.53 AM
Screen Shot 2015-07-06 at 2.19.09 AMScreen Shot 2015-07-06 at 2.20.42 AM

 

6. Gradients

Saved the best for last. We all know the DOUBLE RAINBOW gradients that our friends used on their logo when they created their own business. But gradients with complimenting colors can set the tone of a website when done right. They can be used to capture particular emotions from your visitors.

Apple frequently uses them well (another beautiful example is a digital agency out of Morocco called Agadir). They use full screen gradually changing gradients as you progress through the site. They won a couple web design awards, so if that’s not a free pass to go (subtle) gradient crazy on your website then what are we even talking about?

Screen Shot 2015-07-06 at 2.27.20 AM
www.symodd.com

 

Most of these improvements can be summed up in the maxim Jeff lives by – “Less is always more.” If you insist on having a go at designing your website, for the love of all things beautiful, please follow Jeff’s basic rules. Even better, give us a holler and let’s talk about getting your new website professionally designed and built by the team at the Kestrel Co. Unless you’re specifically wanting a Looney layout, you’ll be happy you did.

30
Jun

Solve your mobile woes with responsive web design

Picture this: a friend shares a link on your favorite social media platform. Intrigued (or just bored and otherwise doomed to scroll until your thumb falls off), you click. You wait a brief moment for the page to load…and your heart sinks.

Everything is tiny, zoomed out, illegible.

Determined to read whatever it was your friend felt compelled to share, you pinch to zoom in, pan around, then pinch to zoom back out a little. After 10 seconds or so, you’ve got the text centered on screen and big enough to read. Feeling victorious, you plow on.

A couple paragraphs in, you see the author has linked to something relevant you’d like to read, so you tap that link…or at least you try. But your fat finger misses, and all of the sudden you’re somewhere else entirely.

You hit the back arrow in your mobile browser, but when the page reloads, you’re right back where you started: tiny, zoomed out, illegible. Frustrated, you give up and head back to the aforementioned social media platform, never to return.

 

Static sites makes for unhappy customers

If you think you’re alone in this experience, you’re certainly not. A recent Google study found that “96% of consumers have encountered sites that weren’t designed with mobile in mind” and “48% reported feeling frustrated and annoyed” when this happens.

headdesk

That frustrating and annoying experience is the result of something called “static web design.” It’s the way most websites were designed for years and years, until the mobile phone came along and tore up the web design handbook.

To be more specific, “A static page layout […] uses a preset page size and does not change based on the browser width.”

Static websites are perfectly fine when viewed on most desktop computers, but the problem arises when you try to view those same pages on a tablet, mobile phone, etc.

In an effort to solve this problem, a few enterprising companies began building mobile-specific versions of their sites (think mobile.nytimes.com, for example). Many of these are still around today, and they do a fine job. However, in most cases, this requires two completely separate code bases and content management systems. With this setup, mistakes are easily made and headaches abound.

So, how do we solve this problem?

 

Responsive web design to the rescue!

Enter responsive web design, or RWD for short. It’s the magic pill you didn’t know you needed until now.

What exactly is this miracle cure? Smashing Magazine defines RWD thusly:

“Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.”

In layman’s terms, it means that no matter the size of your device (be it a desktop computer, a tablet, a mobile phone or even a smartwatch), the website will look great. Text is big and legible, photos take up the appropriate amount of space, and there’s no pinching to zoom or panning required. This, folks, is web utopia.

responsive web design yes and no

Not only are responsive web design sites easier to use, they’re good for business.

According to that same Google study referenced above, 74% of users visiting a mobile-friendly site said they were “more likely to return to that site in the future” and 67% of users said “when they visit a mobile-friendly site, they’re more likely to buy a site’s product or service.”

Additionally, if you have a site that isn’t mobile-friendly, you could be sending traffic away from your business and into the waiting arms of your competitors.

dr-evil-crying

To quote Google again:

  • 61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site
  • 79% of people who don’t like what they find on one site will go back and search for another site
  • 50% of people said that even if they like a business, they will use them less often if the website isn’t mobile-friendly

 

Google lays down the law

Knowing how deeply frustrating these static sites can be for mobile users, Google has begun penalizing websites that don’t meet its mobile-friendly standards. The search giant announced this change last year, and as of April 21, 2015 is offering priority to mobile-friendly websites when users search on a mobile device.

“A lot of small businesses are going to be really surprised that the number of visitors to their websites has dropped significantly. This is going to affect millions of sites on the web,” Itai Sadan, CEO of website building company Duda, told Business Insider.

Is your current site mobile-friendly? If it wasn’t built (or redesigned) in the past five years or so, I’m guessing not. You can use this tool to find out for certain.

In this new reality, here’s how a mobile-friendly site will appear in Google’s search results:

mobile-friendly

That Mobile-friendly label lets mobile searchers know they will receive a good experience when they load the page, and it also means the page will appear higher in search results.

If you’re a business owner trying to drive traffic to your product, this matters quite a bit.

According to an Advanced Web Ranking study, 71.33% of searchers click a link from the first page of Google’s search results, whereas only 5.59% click links on pages two and three.

Additionally, “the first 5 results account for 67.60% of all the clicks and the results from 6 to 10 account for only 3.73%.” That’s a HUGE gap. You want, nay, you need to be among the top results.

ranking-position-CTR-2

 

How we can help

When you choose the Kestrel Co, you’re guaranteed not only a beautiful, hand-crafted website, but also one that is built from the ground up using responsive web design priciples. No tiny text, no pinching or panning. Everything just works. Desktop, tablet, mobile and beyond.

For your customers, this means a better experience across all devices. For your business, this means happier customers, better search position, more clicks and more revenue.

Coupled with the SEM strategies Warren mentioned last week and the fresh content on the blog Ryan goaded you into starting, you’ll be at the top of Google’s search results in no time. Your customers will thank you, and you can feel better knowing that there’s one less frustrating static site floating around the internet.

thumbs up