Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

Going Mobile

Share

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v5 i7
Originally Published: April 2, 2009

Am I venturing out of my comfort zone of designing for web browsers when I contemplate designing for the tiny screen? Design that's on the go.

I don't think so.

Actually, I haven't spent much time thinking about the special needs for the small screens of mobile devices or, in other words, trying to develop web site design to work reasonably well in unreasonable circumstances.

But from what I've learned, maybe I don't need to spend much time thinking about it. My own experiences bear this out.

When I re-designed my Joy Of Code web site, I followed the rules. I stuck to the W3C recommendations for using XHTML and CSS. I tested the current browsers and a few legacy browsers and when I was satisfied, I re-launched. But a few months before my re-launching, iPhone debuted and I found it irresistible to try my site in its environment. Whadda ya know? It worked!! My heart - and my design - were not broken.

What I learned was that the iPhone was using the Safari engine to display web pages. Since it - and I - do a good job of adhering to web design standards, my design survived the rigors of the tiny world.

So, do you need to do anything special for design on the run? Can you just follow web design standards and all will be well with all kinds of smaller screens?

Probably not. The answer depends on who you ask.

Where To Start When Designing For The Mobile Device

The Principles listed in "Mobile Website Design" are excellent starting points when thinking about how to create designs that will work for the tiny screen. Here they are:

  • Websites using tables for layout will not render well on mobile handsets. The site must use CSS for layout.
  • The site must be coded using either XHTML or XML.
  • Character encoding should be UTF-8.
  • Bear in mind the different screen sizes of mobile users. The largest screen size available is probably 640 x 480, whereas the average is closer to 120 pixels.
  • The most important information of your site must be right at the top of the page as it can be very time-consuming for browsers to read through.
  • Text entry can be quite difficult. Users prefer to select values from a list of choices, such as radio buttons or lists.
  • Images should be jpeg or gif format.
  • Always provide a 'back' button or link, since many phones don't include a back button.
  • The maximum total page size recommended is 20 kilobytes.
  • Remember that your users are paying a lot of money to access your site, so make sure it is definitely worth their money!

Wait, wait! There's more to it.

Just follow web design standards and your site will work dandy for all the mobiles?

Not exactly, according to usability expert Jakob Nielsen. In "Mobile Web 2009 = Desktop Web 1998," Neilsen states that there should be a separate version of a web site designed just for mobile devices.

Go ahead, Mr. Neilsen. Ruin my day!!