restaurant menu.sizedThere’s a restaurant within walking distance of my home that I want to try but I haven’t seen a menu yet, so the other day I pulled it up on my iPhone. I’m reproducing the screen (and the other screens in this article) in the correct resolution so you can see what I saw.

This is a popular restaurant and considering the crowds they are pulling in, I assume they’re doing everything right with the food. Their mobile site is another story. Well, that’s not really true because they don’t actually have a true mobile site.

As you can see from the screen shot, the type is infinitesimally small and the colors are not friendly to human eyesight. Frankly, even if the type were larger, the colors sabotage the page. The nail in this coffin is that the file type doesn’t enlarge with the “reverse pinch.”

From this tragic page we learn two basic rules: Make type sufficiently large to read and use colors that make viewing easy. Remember, when people are on their mobile devices, they often aren’t in rooms where lighting is controlled, like they are when they’re on their desktop computers. They may be outside at noon on a cloudless day when cellphone screens are hard to read anyway.

This experience prompted me to go on a quest looking for other local businesses with bad mobile sites. I limited myself to the kind of businesses where it’s very likely that a high percentage of prospects will be using their mobile devices. For example, I doubt that companies that install built-in swimming pools need to worry very much about prospects choosing them to dig their new pools when they are out in their cars and on their cellphones.

In anticipation of the increased importance of mobile computing, some experts went as far as saying that businesses should design their mobile sites first. There is a lot of validity in that approach. However, many business owners have been assured that the software powering their website will “automatically” create a mobile-friendly site; they are too trusting.

With that background, let’s tour a rogue’s gallery of bad mobile design.


 When the bloom fades

florist.sizedI don’t think I’m going out on a limb when I say that a florist should have a great mobile site. Being a guy, I know there have been many times when I’ve been away from home and suddenly realized I desperately needed to order or pick up some flowers.

Check out this mobile page from a local florist. It looks like it was auto-generated, but something has gone desperately wrong: HTML code is leaking out all over the place. If this happened on the florist’s regular website, I’m sure someone would have noticed, but people don’t pay attention to mobile sites that closely.

Also notice that the featured product doesn’t really “feature” very well when its size is reduced to this degree. This is a difficult problem for mobile sites, but one that needs to be seriously considered during design.

These flaws point out the Chicken Little problem. If you recall the story, Chicken Little constantly warned friends of imminent disaster and they paid no attention to her. Every article on mobile site implementation emphasizes the importance of checking and testing everything, but there are many who fail to take that advice.

Those plugins that translate sites work every time, right?


Wake up and smell the coffee

coffee shop.sized

The page for this coffee shop has a nice graphic and slightly better colors than the restaurant page profiled at the top of this article. However, the type in columns at the bottom of the page is totally unreadable. It turns out that this page is identical to the coffee shop’s regular webpage except for some font substitutions.

If you have very keen vision, you may notice that telephone numbers are posted in the upper right corner of the page. The type is gnat-sized and the brown used is about one hue away from the brown used for the page’s background. And can you find the coffee shop’s location anywhere on the page? People rolling through the general area just might want to be able to easily access the address, or better yet: a map.


I’m feeling sick

walk in clinic.sized

When we move on to the mobile site for this walk-in clinic we immediately see that colors and type size aren’t the problem, so let’s give them kudos for that. There are, however, other flaws.

I used a walk-in clinic for the first time in my life about six years ago. I had fallen off my bicycle and broken my arm. I was being helped by others and I wasn’t physically capable of doing much scrolling or poking around web pages on my iPhone. Most people who need an urgent care clinic are probably feeling poorly enough that they aren’t in the mood to contend with a lousy mobile site, so can we give them a break?

Neither the location, nor the phone number, nor the hours are immediately evident from the home screen. Yet we have this lovely couple snuggling right before our eyes. Is this coziness what they’re talking about when they say “See an ER doctor, without the ER wait”?


A wrenching conclusion

auto shop.sizedHonestly, the guys who fix cars seem to have a better idea of what makes a decent mobile page than the guys who fix people. Although the AUTOTECH mobile page won’t win any beauty contest awards, the phone number, address and the big fat link to “Directions” are all abundantly clear. Also, the type is big enough to easily read under less than optimum conditions and the colors used don’t sabotage communicating the important information.

If you’re going to bother with a mobile page, make a list of the reasons people would be accessing your mobile site. Rank them in order of importance and then create your design to address those points. If contacting your business and navigating there are at the top of your list, be sure your phone number, address and directions are prominent enough for any knucklehead to find them. Don’t bury them under a link or beneath the “fold.”

If someone might be looking for more in-depth information – like a restaurant menu – make it big enough and/or use a file type that can be enlarged for easier viewing.

Remember that your mobile website is a practical tool to promote your business. Don’t get fancy or let your artistic bent take over.

We’ve just gone through a watershed day when Google drew a line in the sand and said, “If you don’t have a decent mobile site, we’re going to penalize you!” None of us like it when Google slaps us on the hand, but even worse than ticking off Google, is failing to provide prospects and customers with the mobile online information they need.

This article originally appeared on RayManley.com and has been republished with permission.