Mobility

How to right-size your website for mobile screens

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:

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.

About

Sankalp Waingankar (PMP, ITIL V3 F, MCP), has spent more than 11 years building web portals and web based applications for clients from different industry and technology domains.

21 comments
blog commenting
blog commenting

Hi,think you've made some truly interesting points. Not too many people would actually think about this the way you just did. I'm really impressed that there's so much about this subject that's been uncovered and you did it so well, with so much class. Good one you, man! Really great stuff here.

apotheon
apotheon

> 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. Maybe you can clarify what you mean by that. I see no reason that using div tags to organize your page would necessarily produce the results you describe. How does CSS fail to allow you to specify div widths?

Wellness1
Wellness1

Now talk to us about tablets. That's news. Thanks.

Justin James
Justin James

Using tables for layout is not a good idea in general... why are you doing it? I'm curious, because this is a "worst practice" much of the time. And what devices do not support HTML tables? I think it's been 15 years since that was a major concern... but maybe it's different for mobile? All the same, what mobile devices do not support tables? J.Ja

Jaqui
Jaqui

could be browser specific, or config specific ;) and I'm pretty sure Doug dosn't use that bad of a coding tool. :D

sankalpw
sankalpw

Justin, are we confusing regular web development with mobile web development here? These are two different things. The problem that got taken care of 15 years ago was about HTML Table support for PC based browsers. In mobile devices too this problem is now being taken care of. However, we still have some way to travel. The mobile handset market is still flooded with devices that are very non-standard. This particular client for whom I developed a mobile portal was based in South Asia. That market being an emerging one, is flooded with enterprising businessmen who think up of a "Killer Device" overnight, get to the drawing board in the morning, hit the assembly line by afternoon and make their first sale by evening. :-). Catering to the Indian, Chinese and Korean markets is when this non-standard mobile screen problem really aggravates. And that is when you will see the value in the solution I have given below. Believe me, it is a design that we finalized after struggling with quite a few templates. Also, we have been trying to break away from this design for quite some time too. The banner stops us from automating stuff. But no viable solution has come forth so far. Let me know if you reach a better design.

Jaqui
Jaqui

they haven't spent the money to get the latest version of adumbie dreamwaever so all the tables are converted to divs? just as bad code, and just as dumb a way to do the layout, but what can you expect from dreamweaver.

Slayer_
Slayer_

I always have a horizontal scroll bar, and the images get cut off right where the browser renders the images. I have my task bar on the side of my screen, which cuts down the width of my browser.

Justin James
Justin James

I see the reason for confusion now. You are not talking about "smartphones", which run slimmed down versions of the same browsers desktop users have, which render things pretty much as expected. You are talking about a wide variety of devices which happen to be able to display Web pages. It's a terminology problem. In the United States, "mobile devices" means the same thing as "smartphones" and "tablets" (such as the iPad). Relatively few people in the US use the Web features of a phone that is not a smartphone, and no developer (that I am aware of) cares about the display of Web pages/applications on mobile devices that are not smartphones. I think that it would be *extremely* helpful in future articles if you made it really clear what kinds of "mobile devices" you mean. One of the advantages of the US being so behind in the cell phone market, is that we don't have the problems with these things that you see in the Asian (and to a lesser extent, European) market. J.Ja

sankalpw
sankalpw

I don't know many people who use Dreamweaver to create Mobile Web pages. Are you using it? How is the experience? I am personally very stingy about the size of the HTML source that my developers write on mobile pages. When I had used Dreamweaver a long time back for PC browser based web sites I remember that it used to inject a lot of source code of its own into the Web Pages. Since you still use it, you may be able to tell me if Dreamweaver has improved.

Justin James
Justin James

I'm re-reading the post, there are reasons given for this approach in the article, but the reasons given do not really justify it. It seems that they are trying to work around an inability to get DIVs to fill the screen, width-wise. This is a trivial thing to do in CSS... Sure would like a response from the author on this... J.Ja

sankalpw
sankalpw

My mistake. I should have mentioned that this was aimed at a global market and not merely the US one. I think in the US market, things are much easier since most people are already using smart phones.

Justin James
Justin James

"Features phones" (aka "dumb phones") is what he means. In Asia, Africa, and Europe, tons of people use them to browse the Web, but not in the US. It's because of how phones and plans are priced. In the US, most people get a phone subsidized by the carrier, so there's little price difference between a smartphone and a feature phone up front, it's the monthly cost that's big. And there's little reason to spend the data plan price (usually around $30/month) to use the Web on a feature phone since it's such an awful experience... if you want Internet on the phone, just pay a few bucks more at signup for the smartphone. In other places, people pay for their phones up front, making smartphones prohibitively expensive for a lot of folks. As a result, you see piles of people using feature phones to get on the Internet. In fact, in many places (especially third world and developing nations, but Japan and Korea too for example), it's phones, not computers, that are the primary computing devices. So yeah, the confusion with this article is that it makes perfect sense to a global audience, but makes little sense to a North American audience, and it wasn't clear in the article what market was discovered. I get this all the time on my stuff too, whenever I fail to mention Symbian smartphones, a bunch of folks in Asia and Europe remind me that they have over 30% market share there. :) J.Ja

CharlieSpencer
CharlieSpencer

If Sankalp isn't talking about smart phones or tablets, what kind of devices is he? Signed, Ignorant American

Jaqui
Jaqui

never used dreamweaver, adobe admits their products aren't worth using, they don't make them work on all operating systems, and I do not have one they do support.

apotheon
apotheon

Are your Websites so smartphone focused that you don't care how they look on desktop and laptop systems? Obviously, there aren't a lot of people using Lynx for anything other than for network testing purposes and the like, but mentioning that a given browser (no matter what browser it is) doesn't run in (m)any smartphones doesn't really make for a very strong argument.

sankalpw
sankalpw

I haven't come across any phone that uses lynx as a browser at least on my client's network. If you know of any phones that do, please let me know.

Jaqui
Jaqui

lynx no images at all breaks your premise completely. edit to add: no support for tables [ or css as well ] breaks using tables for layout also

sankalpw
sankalpw

The CSS solution is an obvious one and we experimented with that as the first option. But it did not render the web pages correctly across all mobile devices. We tried different options and finally hit jackpot with this solution. The basic premise of the solution is that, while different mobile devices may treat and render your HTML differently, all of them will render your image as it is. However non-standard the browser, however old the device, if it has the capability to surf the internet, it will show your banner image as it is. This is the reason why we chose to adopt this approach.

Jaqui
Jaqui

since a div size and placement is controlled by css settings it is trivial to have a div full width or partial in css. that type of "problem" on their part just kind of supports my "adumbie" opinion though. if they were to offer, I might be willing to invest the hours needed to rewrite one of the dreamweaver templates to be decent, clean, code instead of the crap it is. that would give them the info they need to lose the ecess divs idiocy.

Editor's Picks