Responsive Web Design

Responsive web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

The Concept Of Responsive Web Design

Ethan Marcotte wrote an introductory article about the approach Responsive Web Design for A List Apart. It stems from the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it.

The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn’t optimised for those mobile devices. Mobile devices are often constrained by display size and require a different approach to how content is laid out on the screen.

A multitude of different screen sizes exist across phones, tablets, desktops, game consoles, TVs, and even wearables. Screen sizes are always changing, so it’s important that your site can adapt to any screen size, today or in the future.

What a mobile website is supposed to do – image credit

In summary, responsive web design is the concept of developing a website in a manner that helps the layout to change according to the user’s computer screen resolution. It suitably fixes on the smartphone and computer tablet screen. It also requires optimising the site for mobile in terms of data transfer.