In a day and age where we see a boom in the use of mobile devices such as the Apple iPhone or Google’s Android, or really any smartphone geared up to browse the web in some sort of browser such as Safari, Opera or Firefox, we find ourselves having to deal with a much higher demand for mobile design.

When designing for web now we need to think long and hard about carrying the designs we create through to mobile devices, and this is not always a simple thing.

From the outset we of any design now we are dealing with the for gone conclusion that at some point the website will be viewed on a mobile device. So the decision really lies at the beginning of any project as to how much time and concentration is to be put in to designing the site for mobile.

There is a difference between gearing up a site to be useable and accessible on a mobile device and actually creating a mobile stylesheet to solely display the website in a different way on a mobile device.

There are lots of things to think about and take into consideration when designing for mobile, not only will it mean the initial design and ongoing up keeping of essentially two websites, but we must also think about why a user would be looking at your site on a mobile device, what usage would they be trying to gain from it and when would they be doing this?

First of all we will look into the reasons for designing for handheld devices.

Recent studies have proven that more and more people are using mobile devices as their primary connection point to the internet.

“Mobile is clearly on the rise, with 56 percent saying they have used a mobile device in public Wi-Fi locations like airports, hotels, and cafes, and 14 percent saying this is now their primary device for connecting in these locations,”

Quote taken from David Staas, JiWire, a mobile audience media company

This is a huge increase from only a few years ago and it will only increase over time as mobile devices become more technical and desirable as a browsing option.

Difficulties of diversity in usage

At the moment there are many ways to make your website mobile friendly. The problem does not lie in our ability to include a mobile offering but more on which mobile devices uses which method.

The simple solution would be to add a mobile stylesheet into the header of your website so when a user views it from a mobile device they are immediately presented with the mobile version, like so:

<link rel="stylesheet" href="screen.css" media="screen"/> To only show on screen

<link rel="stylesheet" href="mobile.css" media="handheld"/> To only show on mobile

Now this would be fine, apart from certain mobile devices do not read the mobile version of the stylesheet, some read both the screen version and the mobile version, some don’t read either, and some ignore the mobile version and only read the screen version.

Confused?

Well after getting your head around this, the reasons for the above are simple. It is not necessarily technical, certain providers choose not to implement the usage of mobile stylesheets on their devices because they feel a mobile styled website is an inferior offering in comparison to being able to view a full website as it would be on your everyday home PC.

For example Blackberry devices will only read the handheld style sheet, an iPhone would read the screen style sheet with media Query support, a Nokia S60 browser would view a website with only the screen style sheet, and a Palm would view both style mobile and screen style sheets.

The poses difficulties! But there is a solution. Thanks to the article by Dominique Hazaël-Massieux there is a technique for tackling most options while minimizing the amount of sylesheets we need to create.

We simply use a technique similar to Eric Meyers CSS reset to convert all styling from the screen stylesheet back to basics on handheld devices, then presenting all hand held devices with the correct CSS options.

So we would set our document out with a core style sheet, and then import out screen and mobile options like so:

@import url("screen.css");

@import url("mobilereset.css") handheld;

@import url("mobilereset.css") only screen and (max-device-width:480px);

This simply says to all devices using screen stylesheets to continue using them, to all mobile devices using both screen and handheld to use the screen reset then use the handheld version implemented later on, and for all mobile devices soley using handheld versions to continue doing so!

So in out website build we would implement the above as:

<link rel="stylesheet" href="core.css" media="screen"/>

<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width:480px)"/>

Because the mobile reset is being brought in through the core.css file then in an idealistic world “most” devices will end up acting as we intend them to.