As a front-end web developer, I've struggled with trying to accommodate for a variety of screen sizes and resolutions. It's a hassle, but it's necessary to ensure your work is accessible by the largest amount of people possible. This is no different with the mobile web and in fact can be more challenging since there's a wider spectrum of screen sizes to develop for than with traditional desktop design.

I find what works best with the desktop also translates well with mobile devices: Cater the most common sizes and code your site in a way that will degrade nicely for other devices.

Designing for the mobile web is not about finding new ways to fit the bells in whistles in into these devices. Its about deciding what is valuable to the site and what is expendable in this format. This often means removing extraneous elements and really thinking about what's valuable to the core of the site.

Phones come in a variety of sizes.

True, there are a ton of phones out there. Different shapes, sizes, operating systems, web capabilities. This is important to know when developing for mobile platforms, but what's more important is to know how many of these people are really in your target audience. I've found the answer is not many.

Do you need to target all sizes?

I do not think so.

I've chosen to cater mobile web development to devices that it really shines on. Smartphones.

That's not to say that you should not strive to make the site accessible on as many devices as possible, but browsing the web on the majority of phones is a cumbersome experience and not an activity most users of lower end phones even engage in.

Let's look at the numbers from an article at PhoneArea.com published in November of 2009.

* Based on their findings, iPhone accounts for half of all smartphone traffic worldwide.
* The Symbian OS, purchased by Nokia, accounts for 25%, but is on the decline.
* Google's android based phone (Droid, HTC Magic, myTouch 3G and HTC Hero) have grown to 11% – and increasing rapidly.
* BlackBerry OS accounts for 7% of the traffic and is on the decline.
* Windows Mobile OS, Palm OS and others account for the remaining web browsers.

The iPhone's 50% share a pretty big number. Fortunately for us, getting our sites to shine on an iPhone is solely simple task. After all, the full featured Safari browser will do a good job of rendering our site in the phone as long as it already looks great on a desktop machine.

That's not enough, though, as we want to create sites fully optimized for mobile browsing. Not just shrink down the existing site to display on the phone.

But the basic point is, the iPhone offers an environment that is very conducive to displaying beautiful mobile sites.
What can we gather from this?

If you design and market sites that cater to iPhone, Android based phones and Symbian OS and you've got over 85% of your potential market covered.

Put the forethought in to building these sites in a standards compliant way and they will degrade nicely to the majority of devices. This should create an experience that ranges from elegant to tolerable on the majority of people who will be accessing your site.

A new standard resolution: 240×320.

With all this talk about different screen sizes, it's important to note something important:

The trend in display size is moving towards a common resolution of 240×320. It's becoming something of a standard in the same way that modern desktop web sites are optimized to display at roughly 1280×800.

75% of phones provide a screen resolution of 240×320 pixels or more. This number is only increasing. It will become more of a standard.

Keeping 240 pixels as your optimal screen width will ensure the best user experience for the majority of mobile web browsers.

Now, this does not mean you should strictly code widths of 240 pixels into your divs or images, it just means you should design with the thought in mind that most people will be viewing your site at this resolution. A good standards compliant layout will adapt to many screen sizes.
A word about Height.

While width is the real obstacle in designing for mobile platforms, height does not seem to be as challenging. Touch interfaces make navigating and scrolling through content a breeze. Common sense should tell you not to drop a 5 inch high header at the top of your mobile site, but height of site is generally not much an issue. Those who frequently browse the web from well-equipped devices are accredited to scrolling.
Advise on creating layouts that work on all phones.

So how do we cater to all of these devices? Do we create a separate site for each devices, similar to the Netscape 4 days of the past?

No.

The vast majority of modern phones – over 80% offer full xHTML (WAP 2.0) capabilities. Take advantage of this to create standards compliant, flexible CSS based layouts.

This will allow you to write semantic code, separate your content from presentation, and to create sites that degrade nicely for the majority of users.
Here are a few tips:

* Do not constrain proportions. We've established 320 pixels as the optimal width for mobile devices. Does that mean fix all the values ​​at 320, forcing viewers on small devices to side-scroll the view all of your content? No. Rather, create a fluid site that will adapt to many screen sizes.
* Make use of standard HTML tags like H1, H2, ul and strong to format your text. Do not expect each devices to format your custom.title CSS class properly in each browser. But expect that they will have their browser will be sophisticated enough to display your h1 tags in a larger font than your h2's.
* Use CSS to redefine these standard tags, but do not get bent out of shape if they do not look the same everything. It may not appear in your particular font and color, but it'll still be an H1 tag and that's what's really important from the SEO side of things.
* Design sites in a stacked fashion. Do not float dives or create side-by-side layouts using tables. There's just not a lot of real estate to work with and a linear, or stacked display on content is more intuitive on mobile device.