Mobile trends and developments have been moving at very fast rate since the iPhone raised the bar, in terms of both the user experience and how the mobile device can be used in our busy everyday lives.
Back in the 90s, mobile development began with WAP sites consisting of a collection of “cards” making up a site. You were limited to wap images (*.wbmp) and very limited user client side interaction with the browser. See Wap Basics at W3C for more details.
Now, high profile sites that you can visit on browsers such as Symbian’s (Webkit-based) browser or iPhone’s Safari are based on current web standards used by desktop computers, and often written in XHTML (eXtensible Hyper Text Markup Language). However, we can now target for these handsets and for older phone models using the magic of CSS. The CSS file specifically targets mobile browsers, the CSS tells the browser how the layout and presentation is ordered.
Not all sites are written in XHTML (for example, PHP and Java-driven sites), but the backbone that is interpreted by browsers in still HTML and CSS. It’s the way which we tell the browser which CSS file to use that makes the difference – making either the site display as normal or customising the user experience with a mobile specific CSS file using the following line of code.
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />
To target the iPhone specifically with CSS use:
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
<!--<![endif]-->
This is where the CSS best practice comes in for delivering web content to mobile devices. The principal objective is to improve the user experience of the web when accessed from such devices.
The recommendations refer to delivered content and not to the processes by which it is created, nor to the devices or user agents to which it is delivered.
The differences in coding the Mobile Web
Opera’s developer relations manager Chris Mills – who I recently met recently at SxSw 2008 – has written an article over at thinkvitamin.com, focusing on the “do’s, don’ts and best practices” of mobile web development. He looks at different approaches to mobile development problems, and how the mobile web differs from the normal web. As with other popular tech blogs, the comments are just as valuable in reading as the original post.
Chris’ article makes real sense when you look at a two-part article by Icelandik Mobile and Microformats Guru, Brian Suda. In “Designing and Developing mobile web sites in the real world“, Brian focuses on the audience being the key factor for making mobile sites. Someone browsing your mobile site has very different needs and expectations from a desktop customer.
The Future is in your Pocket
Mobile development is still in its early days, and a long way from being standardised. However, if you give mobile the same thought and approach as building accessible and sematic desktop-based online applications, you will be future-proofing your work.
A great article for iPhone development is on A List Apart. It explains step-by-step the considerations for web development methods targeted at the iPhone, but many of the ideas and concepts presented can be useful and effective with other mobile devices.
In the future articles, I will be looking at mobile development events you can get along to, as well as the individuals leading the way in iphone web development.