Tackling the screen resolution challenge on mobile devices

Here are some tips for how to deal with the challenges of creating a mobile interface.

In my last blog post about building a mobile interface, I mentioned some of the challenges that I had come across while trying to design mobile-friendly web pages. Worst of these is the challenge posed by the fact that there is no standard screen size or resolution that you can take for granted. Also, the browser capabilities on different phones differ a lot. Given below are some of the Do's and Don'ts that my team has learned over a period of time to tackle this issue.

DO (and I strongly recommend this) get your client to sign off on a list of devices that you're going to consider in your design effort. Many clients will add to the list you have already proposed and drive a hard bargain. But trust me, you will realize at the end of the project that the amount of time and effort you invested in convincing the client to sign off on a finite list of devices was well worth the effort. The mobile device market is booming and many of the upcoming mobile devices are quite different from the existing ones. And God help you if you are catering to markets outside the US. Especially, India or China, where there is a new model getting launched every other day. DON'T make extensive use of tables and nested tables in your web pages. Most mobile browsers out there are not very friendly to complex nesting of tables. The best way of creating a portal for the mobile world is by stacking sections one below the other. I prefer to design a simple home page that kind of lets you sample each of the sections inside the portal. Each of these section highlights are arranged one below the other as shown in Figure A. Clicking on the "More..." button will take you to the respective section page. Clicking on one of the links will directly take you to the details of the selected item.

Figure A

DO make sure that the latest, most relevant, most eye-catching and most in-demand content features in the section highlights. User profiling and Implicit personalization assume great importance here. If your portal sells electronic items, look up the user's purchase history while deciding what shows up in the section highlights. We also reorder the sections so that if a user has purchased a laptop from us then we push the Accessories section to the top and feature laptop accessories there. Remember that however fast the speed, the experience of browsing on a small handheld device is still comparatively cumbersome and the user would prefer to get to what he wants with minimum clicks. DON'T use javascript on your web pages although the new advanced devices do support it. DO make sure that for the high end touch phones your page renders slightly differently. It's not easy to click small links with your fingers. Do use either a slightly larger font-size or make sure that the links appear in some block tag and the entire tag is put inside the hyperlink. This will make it easier for the touch phone users to click the link with their fingers. We go to the extent of maintaining multiple versions of each thumbnail and serve the appropriate one depending upon the UA Profs of the device. We maintain a different set of XSLs for different types of devices (Touch, Non-Touch, 240x320 etc) and apply the appropriate one for XSL Transformation. DON'T use mouseover effects in your menu or web pages. Most touch phones either do not support this feature or support it in some oddball way. DO make sure that you use a simple and basic color palette to avoid strange effects on certain phones. DON'T use background images in your tables and paragraphs. Many phone browsers have default browser settings that ignore the background images. DO make sure (if you are using the UI that I have proposed in the diagram) that the headers of each section are stored as images. We make the images in eight different sizes and keep them in a database. Then, depending upon the UA Profs of the calling device, we serve the appropriate header image. This makes sure that we make optimum use of the screen real estate. We found this approach better than using the table width attribute of HTML to set the width. This is because some old phone browsers do not recognize the width attribute. The image of the header section automatically sets the width of the screen / table that contains the section. We make the header images in the standard 8 sizes that most of the phone screens (more or less) have. DON'T use framesets, iframes etc.

This, of course, is by no means an exhaustive list. I will cover some more points in my upcoming blog posts. Meanwhile do share your experiences in designing web pages for mobiles in the comments.