When designing a website you are never quite sure at what screen resolution it will be viewed at. So it has always been important to make an adaptive web design. Nowadays with the introduction of Smartphones, Tablets and huge 2560px monitors it’s become even harder to adapt your site. Traditionally we’ve had to use lots of different style sheets or device detection scripts. Now with CSS3 media queries it is possible to make a conditional statement. This allows you to completely change the style depending on the viewing portal size. With the added benefit for designers and developers too simply resize their browser window to see the effect of their styling.

Of course things are never that easy, for example IE8 and older don’t recognize media queries however, there are various ways round this. Also different smartphone browsers will react in different ways.

View this demo from Web Design Wall.

To read more about adaptive and mobile design, look at article on Web Design Wall.