What not to do in mobile web design (#2)

This is a second article of a series of articles about what one developer, or for that matter, a designer, shouldn't do in mobile web design. This second article also treats some serious usability issues, so the problems described in this article shouldn't be used on any site, not just on website's versions targeted to mobile devices.

Similar articles

• What not to do in mobile web design (1st post of the series)
• What not to do in form design (related article)

The issue

I ended up on Havris's website by chance. A client to whom my company has provided an SSL certificate had some issues, and after fixing that issue I wanted to check their site to see if the company that develops their website installed the SSL certificate correctly. If you see, they have three boxes, labeled as "Services", "Portfolio" and "Contact & Support". Judging by their design, you would say those labels are in fact buttons that get you to detailed pages about their services, their work and providing easier, multiple ways for you to contact them. But they don't! Out of all three labels, only the "Portfolio" is a link, the rest are just plain text.

In terms of usability this is really bad as it confuses the user. I sure was confused until I started looking around an hovering with my mouse some elements. This happened while I was on my macbook pro. However, the first time I went to the site was using my iPhone. While on iPhone, you do not have the ability to hover. It would be great if you could put your finger close to the touchscreen and produce a hover effect, but for now, iPhones don't do that. So, while browsing the site with my iPhone, I simply couldn't click anywhere. What intrigues me is that I wasn't even able to click the "profile" link, which really is a link.

See the screenshot? See the difference between the "portfolio" link and the other 2 labels? Neither do I. So make sure that in your designs users can differentiate between the two. Havris also has that bullet/star on top of the three boxes, which unfortunately doesn't go anywhere either. Ok, so I get a flat fee for simple website, but which is the flat fee, and what do you mean by simple website?

And there's even more bad stuff

The above issues were found only on the homepage, but wait till you get to the other page that exists: the portfolio. The portfolio page contains three small buttons in the upper right corner of the page. The bad thing is that those buttons have no functionality. You cannot go back to the homepage, you cannot click the "Services" link nor can you click the mandatory "Contact" link. Support is not really necessary as you cannot order a site in the first place. Moreover, the slider used to showcase their project has no decent effects. Finally, their logo in the portfolio page is not a link to the site's homepage. That is really bad. A detailed explanation and examples of better, enhanced home link buttons can be found in our series of articles: Better home link buttons, and Better home link buttons (#2).

Overall, the site has an awful turnout. It looks like it was made by amateurs. If you liked this article, which is part of a series of articles on mobile web design and usability, you can subscribe to the full content rss feed and stay updated as we post new information.

Published on Monday, June 15th, 2009 at 10:12 am in design, layout, usability.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.