Make your website mobile friendly

With the rise of internet on mobile devices and the rising popularity of the iPhone, Blackberry, Android phones and other devices, it becomes more and more needed to create a mobile friendly version of a website.

Especially sites with a lot of (visual) content would want to supply a stripped down version of the website for mobile devices. You can do this by a few different methods, but we will treat the media-query method here.

Let's suppose you have a website with one stylesheet it is much likely you have this line in you section:


I you got a stylsheet that is optimised for print, for example without backgroundimages wich aren't printed when you print a page, you probably have this in your head:


The media attribute in this lines is much more powerfull than we use in this example. In fact, you can use it to define conditions and therefore make a distinction in different devices. A condition could be something wich a device must meet. When the device meets this condition, for example a screen with a width of 480 pixels wide, then the supplied stylesheet is being loaded. The media="screen" and media="print" are conditions too. If you translate this to human language it would say "When this device is a printer, include the print.css file". You can do this for your browser viewport too.

Responsive webdevelopment and design

This technique is called responsive webdesign, or responsive webdevelopment. In the next few paragraphs i'm going to explain the basics of responsive development.

In this example we will create a website that has 2 columns when there is enough space, and only 1 column when you don't have much space (as on the smaller screen of a mobile device).

Therefore we will define 2 extra stylesheets in the directory where the other stylesheets are. You should name these files "small.css" and "wide.css". Enter these lines in your :


As you see, the conditions in these lines are a bit more extended than in earlier samples. The device not only has to have a screen, but also a minimum and a maximum with of the viewport. If we translate the first line to human language it says "Include the small.css file when the device has a screen and has a viewport width that's less then 800 pixels" and the second line says "Include the wide.css file when the device has a screen and had a viewport that's more than 800 pixels wide".

Put these lines in small.css

And then these lines in wide.css:

When you resize your browser window now (you don't need to have a mobile device, it works on your desktop too), then you'll notice the "design" of the site changes according to the width of the viewport.

More than 800 pixels wide:


Less than 800 pixels:


Now you see what you can do with these so-called "media queries". We can use this for our earlier idea to create a two- or one column layout. First enter this HTML in your test file:



Put these lines in the main.css. These hold the default styles that aply to all devices, such as font, font-sizes, colors, etc:



This is small.css:

As you can see we make the siteContainer (the wrapper that holds the site) a 600 pixels wide, the left column isn't displayed en the right column uses al the space it has by becoming as wide as the siteContainer.

Ans this is wide.css:

When the viewport is wide enough, we make the siteContainer 800 pixels wide, the content stays 600 pixels wide and with the leftover 200 pixels, we create a left column (for ad's, menu, etc.)

Resize your browser smaller then 800 pixels and it looks like this:

And if you make it wider then 800 pixels, then it looks like this:


Go get crazy! You can do whatever you want with this knowledge and your creativity is the limit of what's possible! For example you can leave out the background on mobile devices to limit the bandwith usage of the site. Or you can enlarge the text on the site for the small screens on mobile devices. Or you can leave out all the ad's. Be creative!

Alle media queries in one file

It's also possible to use media queries within a CSS file. This way you don't have to create seperate files for every exception rule. This simple example will demonstrate this:


Lots of website only need a few exception rules for mobile devices (slightly lager font, smaller header, bigger links, hide ads, etc.) so these "inline" media queries are a good solution for them.

Resources

Be sure to read this awesome article about 10 useful code snippets to develop iPhone friendly website. It has some good code snippets to optimize your website for iPhone/ipad/etc. But don't forget there are other mobile devices out there..!

Browser support for css-mediaqueries