The Mobile Challenge

Gone are the days when we simply had to worry about which browser a web site had to support we now have to consider what ‘form factor’ it is going to be viewed on. Typically at present that breaks into three groups:


          1. Desktop or classic web

          2. Tablet

          3. Smart phone


Now each of these has a different form factor.

At the beginning of the smart phone rise to prominence the phone manufactures vied with each other around who could render the best ‘minified’ version of any web site. It was irrelevant to the web site designer as the need was small and the reward poor to ‘support’ these niche phones.

With the launch of the iPhone all this changed. In addition HTML 5 arriving and the ability to respond to the form factor of the client started to become important.

Today it is paramount that the web team ‘get it right’ with their support for all viewing clients.


There are many theories about how we should achieve this but for today I am going to consider only three:


           1. Responsive Design

           2. Adaptive Design  

           3. Responsive, Adaptive Design!


Responsive Design

Responsive design is based on a simple premise: design you site, style sheets et al in a manner that allows them to adapt the same site to many screen sizes. Now this design paradigm works really well where the site content is, lets say, on the minimalistic or sparse side. A site that give you just enough but not too much detail. The reason being for my thoughts here are as we ‘adapt’ to the smaller form factor a site  displaying ‘content bloat’ will just look awful on a mobile phone.

That is not to say this doesn’t work just that it may not be the solution.


A quick win in the world of responsive design is to try adding the following lines of code to your candidate MVC web site (\Views\Shared\_Layout.cshtml):


<meta name="viewport" content-"width=device-width" />

This provides a ‘quick fix’ but not an elegant one.


Adaptive Design

This design paradigm is about providing style and content to the particular client. This is typified by the sites that offer a mobile ‘switch’ or url extension.

It requires the developer to provide different web pages for each form factor. This is considerably helped by the likes of JQuery Mobile and the like.

For my buck this is the most sensible way forward. We can have a content rich desktop version but the serve that up in a much more mobile friendly manner. The catch has always been the switch between the two.


Responsive, Adaptive Design

‘As it says on the can’ a combination of both recognising the form factor shift we can decide what content and style to present.


Over the next few articles I will be attempting to show this in action with a real world example.

Written by Andy James at 10:05

Categories :



Comments closed