Every couple of years web design evolves and takes on a new face. 4 years ago we moved from having fixed width websites at 700px to 980px to use the extra space we gained as monitor resolutions increased.

We now have entered a new period where websites need to work not only on laptops and desktops but also on tablets and smartphones, and with the significant increase in their usage, it is something that cannot be ignored.

So how do we do this? Responsive CSS. And what is that you ask?

Basically, the website is built with 3 (or any number if you choose) different sizes to change size to. Usually something like 980px, 650px and 480px in width. This accommodates firstly desktops and laptops, then Ipads and tablets and finally smartphones; Iphones and Android phones etc. 

Using different stylesheets and media queries with CSS3 this enables us now to target the different resolutions without touching the content.  And then, when we open up a site in the different formats of media, the website will modify itself, giving the user the best experience.

So as you can see, we are also entering into user experience and information architecture here.

As an example, grab the right-hand bottom corner of the screen and drag inwards. You will see this website slowly change shape. This is the CSS3  and media queries at work. Now open the site in a smartphone and you will see a complete change in the site, plus you won’t need to pinch the screen to make it larger either.

So what we are doing here, is making the website much more accessible to all it’s potential users. And remember, it’s the users that count.