Hello and welcome to “Web Programming for Smart Phones,” our landmark five-part series dedicated to unlocking the mysteries of the mobile web. We begin our journey with looking at “form factor,” the unsung hero of modern computing.

So what does that mean, exactly? – Form factor, for lack of a better definition, is the ability of an application or a website to properly fit the monitor, screen, or phone of your choice. Good form keeps a user coming back for more. Bad form om the other hand … well … no one wants to go back to a site that looks cluttered or ugly.

How does this involve smart phones? – Most major graphics card/monitor combinations these days primarily employ one of three screen resolutions — 1024 by 768, 1280 by 800, and 1440 (or 1600, depending on the monitor) by 900. The four major smart phones, however rely on the following  — 320 by 480 for the iPhone, Palm Pre, HTC G1, and 360 by 480 for the Blackberry Storm. Now obviously, a site that’s made for a sixteen by nine screen will not necessarily look all that great on a phone that is almost one-fifth of the size. If planned well, a site should be easy to navigate without appearing to be overly simplistic or “stripped down.”

Form factor gone bad – The “award” for bad form in a mobile device goes to the Associated Press. When you first log on to the site, you are greeted by minuscule, barely readable text and an awkward looking “white bar” on the right side of the screen. To the left sits a menu box filled with links. When the page is magnified, this seemingly helpful menu quite literally follows you around the page. In the first few minutes of testing, we found that the box was “standing” in the way of nearly every story we wanted to read. We left the site shortly thereafter.

Form done well — our site excluded, of course   – Sticking to the world of news and views, our favorite is easily The Drudge Report. All of the articles, for example, fit neatly within the confines of the phone, making horizontal scrolling unneeded. Finding an article is easy — just scroll up to it and click.

Our suggestions – After much discussion, we here at the Free Line agree that good form is based upon the five following points. Do these and your site will truly be a cut above the rest.

1. Put your best content near the top of the page. Yes, it seems like a no-brainer, but you would be surprised at the sites that attempt to “spread the wealth,” as they say. (AP, we’re looking in your direction.)
2. Keep the fanciness down to the minimum. Sometimes, the best of intentions  just end up getting in the way. Now we’re not saying to abandon CSS or anything. All of that is great, provided that your mobile does not suffer because of it.
3. “Within proportion” on a standard monitor is a mobile phone’s “way too large.” Our advice is to make something that will look great on a smaller screen, but won’t give the appearance of being dull and boring on a traditional desktop or laptop display.
4. Test as much as you can. You probably already test your sites on the likes of Internet Explorer, Firefox, Safari, and Opera. Well, it’s now time to add Safari Mobile, Web OS Browser, and the Android Browser to that list.
5. Check out as many web sites as humanly possible. See what works and what doesn’t. After all, learning from past mistakes never hurts.

…And there you have it. Be sure to come back next Monday for our part two of our series: Fun With Content. Expect the classic Free Line for the rest of the week. Until then, we bid thee adieu.