Responsive website design can be simply described as an approach to design by which the intent is to provide the most optimal viewing experience on all devices. Elaborated, this includes ease-of-use whereby there is minimal user involvement, by way of resizing, panning and scrolling, across a wide array of devices (from personal computers to mobile devices).

As times change, the requirement to develop a fixed-width website that is designed to look the same in every browser has long gone. With it, the time spent painstakingly panning and zooming around a website on a mobile device to read articles developed for a larger display is gone too. Introducing responsive design. Why produce multiple websites when all you need is one?

Instead of spending much time and capital producing multiple websites, responsive design allows for the production of a single website which is displayed differently depending upon the device the website is rendered with.

Implementing with CSS

A website built with responsive design in mind uses CSS3 ‘media’ queries, which is an extension of the @media rule. This allows the developer to adapt the layout (or design) to the viewing environment.

These media queries allow the website to apply different CSS styles (using a single style-sheet) based upon the resolution of the device that the website is being rendered with.

For instance, for a desktop display at a resolution of 1024×768, the following CSS rule could be applied:

@media only screen and (max-width: 1024px) {
	.nav { height: 50px; }
}

The above rule states that when the resolution of the device rendering the website has a width of 1024 pixels or less, the navigation menu will be 50 pixels in height.

We can further apply another rule, within the same style-sheet, that will change the height of the navigation menu if the resolution of the device in question is smaller than that stated above. For example:

@media only screen and (max-width: 500px) {
	.nav { height: 25px; }
}

The example above states that when the resolution of the device rendering the website has a width of 500 pixels or less, the navigation menu will be 25 pixels in height. This rule will inherently override its predecessor.

Based on the examples above, it is easy to see how different CSS rules may be applied to a single website, changing its appearance and the way in which it is rendered on multiple devices.

These rules are the foundation of responsive website design, and if a website is developed with responsive design in mind, it becomes easier to apply many styles to multiple classes. Thus allowing the developer to alter the website’s appearance at different resolutions so that it may be rendered on a multitude of devices.

Responding to Mobile Growth

Responsive website design is much more than just the latest catchphrase. With the International Data Corporation estimating almost a 50% growth in the global smartphone market last year, and with mobile devices accounting for almost 10% of all website hits globally, making your website display correctly on all devices is now a necessity.

Next Time

If you enjoyed this blog post, look out for our upcoming article where we will take an in-depth look at responsive design and give you some tips on how to approach responsive design with new or existing websites.