Making Your Site Mobile Friendly

Making your site friendly for all the mobile devices out there, is often over looked, but with the rise in the use of mobile devices maybe it’s something you consider.

Everyday we use our mobiles more and more. If we have mobile internet, the world is at our finger tips as we can quickly find directions, phone numbers, and much more. So creating a stylesheet to make it easier for mobile users could be very good for you. The best part, is we can do this pretty much effortlessly.

Now, I’m assuming that you have a properly coded XHTML layout. If I’m wrong in that assumption you might have to look elsewhere for a tutorial.

Anyway, we should start off our mobile.css file like this

* {
position: static !important;
float: none !important;
background: none !important;
color: #000;
}

Since we are using such a small screen, there is no room to float anything, so we need everything to appear inline to make it easier to navigate. Also, background images or colors, will just be a distraction, so it’s a good rule to eliminate that as well.

Another important thing for working with mobile browsers is file size. We must make sure we have a web page that can easily and quickly be downloaded without any hassles. So a good suggestion would be to eliminate all of the images in the document (background-image: none !important; example of how to remove images).

Now that we have the CSS document created, all we have to do is include it in our HTML document just like we would any CSS tag, making sure we specify the media as handheld.

<link rel=”stylesheet” href=”mobile.css” type=”text/css” media=”handheld” />

That’s it, pretty quick and painless way to make your site mobile friendly.