Mobile Web Design

Mobile Web Expert Luca Passani just recently wrote in a post to the wmlprogramming newsgroup: “… Varying screen sizes represent at least 50% of the problem. …”
The discussion was initially about content adaption and css support in mobile web browsers.

I would like to discuss exactly that: Designing for varying screen sizes on devices.

Devices sold today
Investigating the german market it appears that the vast majority of new phones sold today come with a 240×320 QVGA Screen, a few come with a resolution of 176 x 220. Almost no phone is shipped with a resolution below that, while the iPhone and some other devices come with a screen resolution of 320×480 or higher.
Most devices sold today (talking about germany) seem to feature the 240×320 QVGA screen. Also, I assume that customers subscribing to some data plan will propably buy a phone with enough capabilities to use the internet effectively.

Dealing with different screen sizes
Now, for webdesigners the most important factor is the available screen width, which, substract approximately 20px for the scrollbar, would be 220px for QVGA. Or, to be on the safer side, consider 150px to be your minimal available screen width if you want to avoid horizontal scrollbars.
Yet we have the “problem” that screens can be wider, users may even rotate their device to horizontal view, thus displaying a website much wider - e.g. 300px with a rotated QVGA screen. Or even larger.

This said, I think mobile web designers - wether or not they use content adaption - might want to concentrate more on the creation of “Elastic layouts” - as opposed to creating a number of fixed width layouts.

One could for example:

1. Produce a well structured page that will also be accessible without css-support (uh, we heard that before…)
2. Use css to make the thing look better on devices meeting the requirements of whatever you decided your “baseline” is - remember also that css support is not very consistent as of this writing
3. Design with a minimal available screen width in mind while also considering wider renderings.
4. Let go of the need to control the exact look of your mobile website on “every device” - you won’t be able to and it is not even neccessary.

If you can do some content adaption, great! Repeat the above for each group of devices you plan to support, e.g. provide larger graphics for a higher minimal available screen width.

Find creative ways to work around the many deficiencies you’ll encounter while developing for the mobile space. For example you could place “wanna-be-full-sized” banners at 150px width in a div which has a width of 100% and add a background-color or background-image to that div, making it look better on wider displays. That won’t always work, but it certainly doesn’t hurt. We see that quite often on mobile sites.
I also tried this technique with the header image of my little mobile playground http://b3jazz.mobi/ (By the way, notice the rather bad use of color and background-color - which I’ll change soon. I did this at night and it looked great. I was shocked when I showed it to a friend this summer at an outdoor cafe in Berlin. Too little contrast… So, work during the day, do other things at night!)

The baseline, aka Default Delivery Context
Closing this post I would like to compare a few views on what screen width to support (when no content adaption is applied):

1. Luca Passani ’s “baseline” says: 120×120 pixel screen or larger
   http://www.passani.it/gap/#baseline
2. W3C’ Best Practices “Default Delivery Context” suggests: Usable Screen Width: 120 pixels, minimum.
   http://www.w3.org/TR/mobile-bp/#ddc
3. The DotMobi Web Developer’s Guide recommends to design for a max-size of 200×250 pixels.
   http://dev.mobi/node/197

I came across the term “elastic layouts” in an interesting article on Elastic Design by Patrick Griffiths . Although it’s from a desktop web perspective, some points apply to mobile web design as well.

Technorati Profile