Mobile Website Design Best Practices: The Ugly, The Bad, and The Good

If your answer to the question, "Is your website ready for mobile?" is "No," you've joined us at the perfect time. Over the next several weeks we'll be digging deeper to expose some mobile website design best practices that will serve as a guide for your venture into the world of mobile website and Graphical User Interface (GUI) design. We'll get to the Good soon enough, but first we need to start with the Ugly.

The Ugly side of GUI

First a bit of background. With our long history of web design it is difficult to not look back to those pioneering days when designing a website had few technical hurdles to overcome. It was possible to learn HTML from scratch in a week and call yourself a bonafide web designer.

The first rain on that parade was the number of desktop browsers that hit the market in the first 10 years. It grew to be a problem due to the non-standardization of how different browsers rendered the HTML code. Time was needed to test, modify, and test again to ensure that your site’s design was compatible across all web browsers.

Fast forward - Mobile GUI

We’ve all learned a lot since then. Now a good interactive design and development company will take this into consideration right from the start — directing the design so that it will not only accomplish the client’s business and user goals, but also easily adapt to the programming under the hood that displays it in web browsers.

The desktop browser has been around awhile, so today there are many standard “fixes” available for the various browsers and operating systems, and the various code languages used for development. HTML and CSS, the underlying framework of almost all sites, has versions too! Combine this with the numerous types of browsers and their versions, operating systems, and... well, you get the picture.

Faster than a speeding bullet

Far faster than the development of desktop browsers has been the staggering rise of web-enabled mobile devices. The amount of traffic from mobile browsers has increased from 0.6% at the start of 2009, to 3.5% today, and in the UK and US that number is nearly 5%. This rise is accompanied by new technical hurdles, so today we (designers) are looking back to just a couple of years ago longing for those now seemingly simple browser compatibility issues. If only Superman were here to spin the world in reverse!

Just as fast, website designers have had to quickly come to terms with the GUI paradigm shift from desktop to mobile GUI, and are confronted with an even wider spectrum of technical issues. Designing a typical website consists of testing on IE, Firefox, Chrome, and Safari — and now, designing for mobile they must understand the mobile GUI idiosyncrasies of iPhones, Androids, BlackBerrys, Palm Pres, Motorola devices, Nokia devices, and the list goes on and on. Consider this — The Ugly.

How do you make ugly, pretty?

If you already have a website and you need it to display on a mobile device nicely, there are two basic methods for accomplishing it:

• Your website’s code can be modified to scale “gracefully” to the small screen, usually resulting in hard to read text; or
• You can create a mobile website that truly honors your brand and content of your website, utilizing mobile website design best practices.

Almost any design/development firm, and mobile user, will tell you that the latter is the optimal method. So what’s the next step?

Find out next week with "Mobile GUI — The Bad."

Image: Tuco - The Good, The Bad and the Ugly - Sergio Leone