The world of mobile devices is a torrential down-pour of changing features, costs, form-factors, popularity, software… everything. Designing websites for this constantly changing market is akin to the early 2000′s when new, feature-rich, standards-compliant web browsers were all the rage but you still had to support the older, market-hungry, feature-dumb, standards-ignorant browsers.

Fortunately, todays mobile web is a fairly standards-friendly place making graceful degradation the life of the party. Since this is an extensively documented subject I’m not going to blab on about it too much. Instead, i’ll just give you some tips that I follow.

Tip #1: Target A Device

The most important tip. What devices are you targeting? Are you targeting Blackberry’s? iPhones? A certain feature phone perhaps? Basically each device has it’s own browser implementation, meaning that each device is going to have it’s own quirks when rendering your website.

Know what device you’re targeting so you know what you can and can’t do. You can’t expect to build a house if you don’t know what tools you have to work with.

Tip #2: Degrade Gracefully

One method of designing a website is to design for the lowest common denominator of browser. Don’t do that here, you’re website will look like crap. When we design a website take some extra time to make sure it will degrade gracefully. No fancy javascript or crazy CSS, more than likely it’ll just break on every other device.

Tip #3: Pick Your Size

There is a dizzying array of screen sizes out there on mobile devices. The common trend is 240×320. Stick to that size, design your site to resize horizontally and you should be in the clear.

Tip #4: Check Your UI

If you’re targeting a touch device (aka. iPhone) make sure your buttons and whatnot are big enough to easily touch. Touch screens aren’t a precise technology and everyone’s fingers are different sizes. Don’t make people peck at you’re website, they aren’t chickens.

Many devices aren’t touchable and the only way someone can interact with a website is with buttons or a scroll-wheel. So, your design needs to easily navigable with this sort of interaction. For instance, don’t put your main navigation at the bottom of the document and style them to the top of the screen. These styles probably aren’t supported on non-touch devices so your navs are going to be a the bottom of the page. That’s a big no-no.

Tip #5: Forms In The Fire

Filling out forms sucks to begin with. It’s even worse on a mobile device, especially if you get a form error. Only put forms on your mobile site if it is absolutely necessary. Instead offer a telephone number and an email address.

References

Here are some great references that go into more detail:

• Sender 11: Mobile Screen Size Trends
• Sitepoint: Designing for the Mobile Web
• Smashing Magazine: Mobile Web Design Trends for 2009