Picture this, you own a Vietnamese restaurant on the North Shore. One night, I feel myself coming down with a cold and all I want is some chicken pho with hot sauce to blast that virus out of there. But I’ve been out all day doing errands and I just don’t have time to go home and grab the menu stack in my desk drawer. So, I pull out my phone in the mall parking lot and look up “Vietnamese restaurant North Shore MA” on Google. I find your restaurant’s web site in the first page of results and pull it up, visions of basil and bean sprouts dancing in my head…

Wait, what’s this? All I can see is your establishment’s name at the top of the page and then a big gray space with a little red and white rectangle telling me to “get flash”. I don’t want flash, I want pho. I hit the back button to the google results page and click the link for the restaurant that opened last month. Booya! There’s the menu on the first page, and there’s a phone number at the top that I can tap to call and place my order. I can click on the address and it will go to a google map so I can find it no problem. Bonus!

Guess who has a new customer now? The restaurant with the web site that I can use on my phone, that’s who. Sure, your web site is beautiful, with its flash-driven slideshow of glimmering soup bowls and artfully plated noodles, but if it doesn’t show up on a mobile device you stand to lose a significant percentage of potential customers using the web via their phone or tablet.

This is a “worst-case” scenario of not taking mobile-friendly design into account when designing a web site. I’ve come across sites that may have looked good when they were viewed on a desktop, but were a trainwreck on a phone or tablet. With a little awareness and planning, it’s fairly easy to develop a site that will work across multiple platforms. And, when a user finds your site, and it works well on the device they are using, you are on your way to a new customer my friend.

BASIC MOBILE DEVICE USABILITY ISSUES

Here’s a checklist of items that you want to test your site for to see if it’s mobile friendly:

1: Does it load quickly? Because, if I have to wait, and wait, I will just hit the back arrow and go on to your competitor’s site.

2: Is there a way to place a call to your company from the home page? What’s worse than a company’s site that hides its phone number deep within the bowels of a “contact us” page? A company’s site that only displays its phone number as an image so I can’t tap on it to place a call, that’s who.

3: Is the navigation easy to work with? Tiny fonts, text that doesn’t have a high contrast ratio between the copy and the background, flash-driven navigation and hard to tap dropdown menus will all frustrate a user and send them screaming to the exit.

4: Is your content easy to read? Does someone have to pinch and scroll and expand and scroll and pinch ad nauseum? That’s not good.

RESPONSIVE DESIGN TO THE RESCUE!

As I said before, a little planning goes a long way towards getting your site ready for mobile devices. Mainly, this comes in taking responsive design into account when designing your site. It helps to keep in mind that while a desktop browser might show a site at almost 1,950 pixels wide, the most important content on your homepage should also be visible when someone views the same site at 320 pixels across.

So your site’s users don’t end up squinting and pinching and scrolling, it’s good practice to consider using media queries in your site’s stylesheet. This is basically a way for your stylesheet to act like a short order cook and serve up the right thing to the right user. “You looking at the site on a 24″ desktop monitor? Ok, here’s all 4 columns of content laid out next to each other.” “You on an iphone? Ok, here’s those columns stacked on top of each other, just like you like it!”

With some newer WordPress themes, responsive design comes built right in. Menus can be set to switch to a “select box” display for when the viewer is 480px across or less. Containers can be set to “fluid” width so they will expand and contract according to the width of the browser window. A sidebar can be set to display below the main content on a narrow browser, or to not display at all.

The main reason to pay attention to how your site looks on different devices is to show your site’s users (and your company’s potential customers) that you want them to be able to use your site and by virtue of this, want their business. After all, when it snows in front of your store, you shovel off the snow so they can come in the door right?