Responsive Web Design Part 1

Responsive Web Design and a short background

As cheap tablet devices flood the market designers and developers will have to embrace the smaller tablet form factors when it comes to web design. The days when the design comprised only of a standard 960px width site are well behind us. It is no secret that the mobile growth has shot through the roof and as expected internet usage on mobile devices has had the same exponential growth. How often do you find yourself pulling out your smartphone to access the internet when you are in front of the TV? Instead of walking over to the laptop or PC, switching it on and waiting for it to boot up you quickly use your mobile or tablet device and get your information in matter of seconds.

But, the big problem is when the site is not optimised for a mobile device. In 90% of the cases you will find it difficult to use any sites that are not.

So, as a web site owner, how do you enable the old trusted design to deliver its content to a variety of devices with an equal number of screen sizes? A separate site? An App? Or leave the site as is and hope the users will have a ‘useful’ experience when they are using a mobile device.

Do you know what device your visitors are using when they access your site? With 99% accuracy the answer is NO. Unless you have a very specific site, you will have no knowledge of how, or what device your visitors are using when accessing your web site.

In May 2010 Ethan Marcotte wrote an article called “Responsive Web Design” and with that he gave birth to the term Responsive web design.

So what is Responsive web design (RWD)? In short it is a way of crafting a web site using semantically written HTML, CSS3 media queries together with fluid based grid layout, to adapt the layout to the viewing environment. This way the web site can be easily viewed on any device whether it is on a 24inch widescreen, a 3.5inch mobile or on your TV. Think of it as a one-size-fit-all.

It does not matter what device you are using as the site will adjust itself accordingly to what device is accessing your web site.

How? By using CSS3’s feature of media queries. CSS3 has already been around for a few years now and is implemented in all modern browsers except for IE which only IE-9 has support for CSS3, but the good news is that all smartphones and tablets supports it.

Over the coming weeks I will take you through the journey of Responsive Web design, the good, the bad and tips and tricks you can use in your own design, Stay put, bookmark my page and come back soon.