Create an Alternate css File for your Mobile Visitors

I'm no css or web developer expert, in fact I'm not even a newbie. So it was really hard for me to be able to create a mobile version of my site. And it is not finished yet, but at least it now renders in only one column with an acceptable font size, and it is somehow easy to read in the mobile device.

I've tested with an iPod Touch, a Samsung Galaxy Ace, and a Blackberry 9700 Bold, if you have some other device and it is not displaying correctly, please do let me know.

I want to share how I did it here, so it may help other css non-expert.

Media Queries

The first thing you need to do when creating an alternate site for your mobile visitors, is to "ask" the device if it is a mobile device. I did this in the past using the web server, and redirecting visitors to an alternate site (That was using WordPress), but that is not a good idea, as you will have the SEO spreaded, and you will also have your content copied in two sites/urls. That is not a good SEO practice, and yes, you can use robots.txt to disallow crawlers to visit your mobile site, I did not like that approach.

I then "discovered" the CSS way, but as I said I'm not a CSS guy so it took me a lot of time to go this way.

What you need first, is to use @media queries, you can do it either in the CSS file itself, or in the html file.

Inside the CSS file

What you have to do, is add some extra rules only for smartphones, below your normal css rules.

Using the example below, you add inside the curly brackets the lines you need to change your normal CSS to one that mobile devices can use.

@media only screen and (max-device-width: 480px) {

}

Load an extra CSS file for mobile devices only

If you want to write too much code, and want to keep regular css file small, you can write a special CSS file that only mobile devices will load. To do that, you need to add the following line in the head section of your HTML file, just like any other CSS file.

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

Now, only devices with screen equal or less than 480px will load the mobile-device.css, keep in mind that iPads will not do it, as its screen is bigger than 480 px.

Use this line to address the iPad both, portrait and landscape:

<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="ipad.css" />

Now you know how to load specific CSS files for your mobile devices.

Modify the Normal Layout to Fit in Mobile Devices

This will vary for everyone of you reading this, as we do not have the same layout structure, but just to illustrate, I'll use my case as an example:

In my case my structure is as follows:

#wrapper {
	width: 910px;
}
#header {
	width: 910px;
}
#page {
	width: 910px;
}
#content {
	width: 640px;
	float: left;
}
#sidebar {
	width: 220px;
	float: right;
}
#footer {
	width: 910px;
}

This is a simplified version of my layout (I changed it to percentages resently).

In order to adjust it for mobile devices like the iphone, androide and blackberry phones, my mobile-device.css file has these contents:

#wrapper {
	width: auto;
}
#header {
	width: auto;
}
#page {
	width: auto;
}
#content {
	width: auto;
	float: none;
	clear: both;
}
#sidebar {
	width: auto;
	float: none;
	clear: both;
}
#footer {
	width: auto;
	display: none;
}

Of course I also changed the size of the fonts, and you can also change the background and some other things.

One thing I did was to hide the footer using display: none; because it is not useful in small screens.

Final steps

For all this to work, you also need to add this line the header of the document:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>

Now you are ready to test.

Feel free to read my css files, and use the ideas, if you find somethig that could be done better, let me know please.