What is a Responsive Design Website?

Long gone are the days when internet users browsed websites sitting at a desk. Most of the time, when a search is done now, it will be done through mobile devices. These screens are different from a desktop computer, so a business needs to use a responsive design for their website to allow the content to be viewed at its best, whatever screen size.

The idea of a responsive design was first considered in Ethan Marcotte’s article on Responsive Web Design in 2010 (where he coined the phrase), and they are still fully relevant today.

How Does it Work?

A responsive website design is much more than simply scaling the web page bigger or smaller according to the device it is viewed from. Elements of web pages (for instance, menus, images, and font size) will alter and move around to provide the best user interface possible for the device.

When the website is created, Cascading Style Sheets (CSS) and HTML are used to resize items, move others around, and hide content to make the page look good, no matter how it is viewed.

A responsive design has three main points: fluid grids, fluid images, and media queries.

Fluid grids – Instead of a website being designed in set pixel numbers, a responsive design works in units like percentages so that it can change as needed. Normally a min width is put into the website design so that when a certain size is reached in a browser window, the website stops reacting to the size – this prevents the website from becoming illegible.

Fluid images – Images are a little more complicated; they should never be so large that they become pixelated but need to be able to shrink down. One way this can be done is by putting their true pixel value at width 100% so they cannot be made bigger than this size, but they are always within the flexible grids and so shrink for smaller screens when needed.

Media queries – These apply different rules for different conditions of a website so that if a smaller device is used, only one column of text can be seen. Still, if a desktop is being used, 2 or 3 columns of text might be visible.

Why it matters

The reason having an adaptive design is so necessary to businesses these days is that it improves the user experience. Even being able to change a browser window size and still have the website usable makes a big difference to whether a customer will remain on your site or not. You also want to be on the good side of Google (as the leading search engine), and Google ranks your website higher if it is mobile friendly – in other words, it has a responsive web design.

Today you should be looking to design a website from a mobile perspective first and then altering it towards a desktop – rather than making a desktop website suitable for mobile.

Working with a website designer will help you achieve a website that is fully responsive and will provide your users with a pleasant experience – encouraging them to remember your business and stay on your website, potentially becoming repeat customers.