Update 2013: This post was first published in my previous website. It is still mostly relevent but needs updates. I’ll try to update it soon.
Internet is turning mobile. So what should I do then? Make a desktop version and a mobile version of my website? Not really. CSS at the rescue.
The first thing to do is to use fluid grids, which means using only relative sizes in your CSS, instead of absolute ones. You can setup sizes relative to the default browser font size, to the parent HTML blocks, etc.
With this kind of relative sizing, when the user changes the size of the browser, all the elements keep the same proportions.
But what if a screen size gets to this critical point where keeping the same aspect and proportion is not relevant anymore? Then, you should use media queries.
Here again, this is a CSS technique that you can use to reorganize the layout of your webpage upon certain conditions. For instance, if the width of the browser is below a certain size, you can give up a column layout and switch to a single-column layout where blocks are placed one upon another.
Of course, this is not enough and new issues are going to rise when you’re going to put images, or YouTube embeds inside your pages.
Some stuff can help (the CSS
max-width attribute for instance), but it’s not universally supported yet.
What’s interesting me most here is not Internet Explorer-compatibility though, but making websites that look good on iOS devices, the iPhone and the iPad. I’ve tried to give these techniques a try and here it is:
This is a 10-column layout of 82px each, separated by 20px gutters. With 2 outside gutters of 12px each, we get a grid defined by a default width of 1024px.
To setup my CSS correctly, some math are required:
This demo page renders as follow on the iPhone, portrait and landscape: