As a web developer I’m always on the lookout for quick, easy ways to implement code written in XHTML and CSS on the small screen.
Of course, now there are plenty that appear on delicious or digg. However, one I keep sending colleagues to is over at ‘Woork’: Tips to design your site for mobile devices.
It has the easiest to follow steps showing how to get your carefully hand coded web pages to work seamlessly on mobile devices, such as the iPhone.
The online tutorial covers choosing an URL address for your mobile site version, using a redirect script for mobile devices, designing a mobile-friendly layout using CSS and XHTML with code that you can copy that will let you explore the beginnings of mobile web development in no time at all.
Desktop versions of web sites can have multi-tiered menus, multiple columns and fixed width layouts, but this isn’t always desired in the mobilised version.
For example, compare the Facebook desktop site to the iPhone version. The mobile experience for social networking or news sites is about getting content delivered to your users ‘on the go’, using a stripped down version only with the main modules of the site content, for example ‘status updates’ or news headlines only. This delivers an optimised experience for their mobile internet device, and always keeps the users in mind.
Google has a fantastic range of its services on mobile now. Below is a screenshot of the mobile interface when you are signed into your account. As ever, Google’s minimalist interface design works well on the mobile – quick to load and easy to scan.
Looking ahead, 2009 will be the biggest year for mobile web usage to date. Smashing Magazine has listed the Mobile Web Design Trends For 2009, and highlights some good examples of popular sites that do the conversion to mobile well. With the explosion in phones that have much more capable web browsers, the limelight will move away from designing iPhone-specific sites, to standards-driven sites that can adapt to a variety of small-screen devices.
I hope to be able to delve into best practice for mobile web development in the next few posts. Stay tuned, and let me know if you have any questions on any of the details here.