Sunday, December 25, 2011

How to right-size your website for mobile screens


Takeaway: Sankalp Waingankar shows you how to make optimum use of the screen width provided by different mobile devices even when you have to design for older devices that don’t support the use of HTML tables.

A few weeks ago I posted my first blog on TechRepublic. It was about designing mobile-friendly portals. In this article, I had made a passing reference to the eight sizes in which we cut up the horizontal banners on the web pages so that they make optimum use of the screen width provided by different mobile devices. Ever since that article got published, I have been inundated with questions on what these eight sizes are. So this post is solely about these sizes and how and why we use them. I recommend that you go through the original posts to understand the context.

See:

Are you prepared to negotiate the mobile Internet challenge?
Tackling the screen resolution challenge on mobile devices


Why do we need the banners cut up in eight sizes?

Given the non-standard screen sizes of mobile devices, the best way of displaying data without letting it get distorted and without causing horizontal scroll bars is by arranging the sections and the content pieces within them one below the other instead of one beside the other. (Refer to Figure A in the second article mentioned above.)
The best possible way to ensure that the differing screen widths on mobile devices get utilized properly without distorting the page display is by arranging the content within tables and setting the table width to either 100% or to an appropriate size based on the device calling it.
However, the above-mentioned strategy will work for you only if you have to support devices that are relatively newer. If your client mandates that you have to support old devices too, you will not be able to rely on the table width properly. Many old devices do not support HTML tables.
In this case you will have to place the images and content one below the other in DIVs. When we do this, the different sections will obviously assume different widths. This will give the web page a very inconsistent and untidy look.
To tackle this issue we create the banner headers in the form of images and place them as section headers on top of each section. These section headers ensure that the page looks consistent in its width and makes optimum use of the available screen width on the mobile device.

What are these sizes?

These banner headers are created in the following eight sizes.

91 pixels
118 pixels
166 pixels
198 pixels
230 pixels
310 pixels
342 pixels
640 pixels

These sizes cover most of the old phones that we have on our client’s network.

For the newer phones we do not have to depend so much upon section headers as almost all of these new phones support most of the HTML tags and properties. Hence, for newer phones we use either a table or a div with width specified as 100%.
How do we use these section headers?

We use WURFL (refer to www.wurfl.com) to maintain a database of different screen resolutions for devices. We detect the width of the calling device and accordingly forward the section header that is the same size or just a tad smaller. This may result in some small white margin towards the right of the screen. But there are not many easy ways of avoiding that.

I hope the information out here helps you make your web pages more mobile friendly. Do let me know what are the strategies that you use to achieve the same.

Source:http://www.techrepublic.com/blog/webmaster/how-to-right-size-your-website-for-mobile-screens/177?tag=content;siu-container

No comments:

Post a Comment