Mobile and Tablet web development – one site fits all

Posted: 31 January 2012
Rapid adoption of tablets & smartphones is fuelling the need for a 'one size fits all' motif.

When the “World Wide Web” was introduced in 1990, it was only accessible via personal computers. Today, the web can be accessed thought a range of devices - laptops, tablets, mobile phones and even smart fridges and windows as demonstrated at CES 2013 in Las Vegas. Contemporary websites come in different shapes and sizes and provide a vast amount of information on practically anything one can think of.

With Internet surfing becoming a natural part of life and considering the ever growing number of browsers, web developers and designers have had to tackle a number of issues, for instance getting sites to render perfectly in different browsers, and supporting mobile browsing. Mobile Internet consumption has increased dramatically, with half of the current UK Internet users accessing the web via mobile devices.

Following the trend, web designers and developers have adopted a ‘Responsive Web Design’ approach with the use of CSS3. In short, it makes websites automatically adapt to the elements of the users’ viewing environment: be it screen size, Operating System or device orientation in space.

A quick note: if using media queries, a website may not fit all mobile devices unless developed with a fluid layout (which should become a standard when creating responsive websites), since they differ in screen sizes and platforms.  Although not yet finalised by W3C, the international consortium on web standards, CSS3 has been used by developers on live projects as the technique supported by “modern” browsers (e.g. Mozilla Firefox, Chrome, and Safari – all with the use of prefixes).

An alternative to media queries are Touch Optimised / Web App frameworks such as jQuery Mobile and Sencha. These frameworks are built specifically for touchscreen devices and bring back some user interaction. The framework is cross-platform compatible, so there’s no concern about styling the website for individual devices.

The only downsides - this would be a separate development from the standard HTML CSS site to which users would have to be redirected, and the result may not look as slick as the desktop version: the design capability of the framework is quite limited. It would, however, work flawlessly across a galaxy of touchscreen devices.

Overall, due to the popularity of mobile browsing, the need for responsive web design (mobile design) is a must for a customer-facing site: not only does it help market the company, it also shows the company is meeting the needs of its browsing customers.