Make your Web site more Mobile Friendly

The improvement in Internet speed on mobile phones coupled by the penetration of smart phones have a significant impact on the way we design Web sites. It has come to a point whereby designing a mobile-friendly Web site is no longer considered as an extra feature, but rather more than a necessity.

Several technologies exists to easily deliver content to mobile devices, including XHTML, CSS WML, XHTML-MP, Flash Lite, etc. The key in developing for handheld devices is understanding the underlying restrictions (Internet speed, screen size, browser) and choosing the appropriate technologies. In this post, we are going to feature various resources on how you can create mobile phone optimized sites.

The basics

Mobile Web Design Series
Overview of how to get started in Mobile Web Design.

Designing for Moble: Bringing Design Down to Size
Slides from a workshop by BlueFlavor covering basic fundamentals, myths and jargons common to the mobile Industry.

Usability Guidelines for Mobile Web Design
A breakdown of 7 important usability guidelines for Web sites on mobile devices.

Design / Development

Opera’s Mobile Articles
Detailed advice on HTML/CSS coding, testing and design, not specific to Opera but applicable to all handheld design and rendering.

Creating Web Content for Mobile Phone Browsers
This O’Reilly Network article covers the use of WML and XHTML but not CSS.

Pocket-Sized Design
Covers the major practical considerations and suggestions on what to include in a Handheld Stylesheet.

iWPhone WordPress Plugin and Theme
This plugin and them will automatically reformat your blog’s content and optimize it for Apple’s iPhone.

Mobilize any web page with Google Reader
How to use Google Reader to easily provide a mobile version of your site.

Testing

W3C Mobile Web Test
Web Compatibility Test for Mobile Browsers as issued by by World Wide Web Consortium.

iPhoney
A free iPhone Web simulator for designers.

WapTiger WAP Emulator
A free WML Browser Emulator. (Plugin download required)

How to test Mobile Style Sheets
Comprehensive list of mobile browser emulators.

Advanced topics

Monetizing the mobile Web
Slides containing metrics and case studies on the benefits of mobile advertising.

CSS3 Media Queries
Candidate Recommendation (as at November 2007), providing a means of tailoring CSS to the particular capabilities/limitations of a device with a given media type.

mobiForge
The world’s largest independent mobile development community featuring in-depth articles.

2 Comments

  1. Thanks for the info... also check out the WURFL database for a list of devices and their capabilities. there is also an emulator called "Klondike" that can help you with testing but sometimes the phone browser is more strict than the emulator. Elemental