What is Responsive Web Design?

They need a version that looks good on a Galaxy, an iPhone, a BlackBerry, an iPad, a Notebook, a Kindle, a Hipstergizmo, etc. etc. This will mean that all the screen resolutions and layouts must be spot-on.

This is called responsive web design – the ability for a web page to alter in response to the environment – or in this case; the platform, screen and orientation. Just like architects, web designers need to know about various engineering mechanisms to make this happen.

Who knows where this trend will stop? Fact is – it’s just not going to. Web designers will need to stay on top of responsive design and its tools for ever – this is your life now! More and more devices will no doubt be invented in the future, and websites will need to function properly on all of them. Social robots with digital screen interfaces, anyone?

It’s obviously just not feasible to design a new site for every conceivable device, plus a few that haven’t even been invented yet – so advances in design and development have been geared towards using various mixes of flexible layouts and grids, and intelligent use of images and CSS media queries.

CSS media queries are a technique that introduces certain properties to the page only if a certain condition is true – for example, they change the colour of the background from dark blue to light blue if the browser window is less than 500 px, which makes things easier to see.

If a user switches from their laptop to their iPad / smartphone, then the website should automatically change to suit the resolution, image size and scripting abilities. The website should be programmed to respond automatically to the environment – in this case, the user preference.

As you can imagine, this kind of design is pretty technical, and web designers have to know their stuff. Here are some important factors that have to be taken into consideration by website designers when building a responsive website.

1. Responsive web design utilises adjustable screen resolution

With every new device, there’s a new screen size – standard sizes would be boring though, right? Functionality and colour also have to be catered for, whether the site is viewed in portrait orientation or in landscape.

2. Responsive web design uses flexible layouts

Back in the earlier days of web designing, the only things that could remain flexible were the actual layout columns with text. Images could ruin the effect by breaking the layout – we often see this even today, when half a picture just hangs off into space somewhere, and you have to zoom or click on the pic to view it properly – pretty annoying for the average modern user.

Now we can make images automatically adjustable, and there are ways to make sure layouts never break – although designers have to be careful not to let things get too squashed up and unreadable. As with all other types of design, there are checks and balances and give and take that must be considered.

Responsive images are vital tools for modern web designers

This is a technique of allowing images to shrink proportionately on smaller devices, but ALSO shrinks image resolution. Large images therefore don’t waste space unnecessarily, and they load faster.

This is pretty technical stuff, so let’s not get too long-winded. Coders already know where to find this information!

 4. Showing or hiding selected content

Web designers using the principles of responsive design can change element sizes proportionally, and rearrange them so that everything fits onscreen as the screen gets smaller. Sometimes it’s just not possible to shrink everything to fit though – your size M t-shirt might technically fit on your 7-foot bodybuilder brother, but it probably won’t look too great.

The answer to this is that responsive web design also allows the user to view important content, while other content and elements are hidden – until the user looks for them. The right balance and structure must be found to get this effect right – it’s a Yin / Yang process from start to finish.

5. Touchscreens vs Cursors

Anyone with a modern smartphone knows that touchscreens have become immensely popular in today’s world of devices and gadgets. Right now touchscreens are mainly available for the smaller devices like tablets, phones and watches; but the market trend for laptops and desktops to have touchscreen capability is on the rise.

As an example, the Tesla car uses a 45cm touchscreen for most of its controls. Since screen sizes are measured on the diagonal, the Tesla screen has 3 times the area of an iPad screen.

Web designers using the principles of responsive design need to work with these innovations and make sure their sites do the job they’re designed to do. What’s that? Well to be user-friendly.

6. Responsive Web Design and SEO

Many web designers are still unaware of how responsive design impacts on SEO –  which is crazy, because our search engine overlords at Google have actually suggested responsive design outright when optimising a website for smartphones.

Google wants your site to utilise the principles of responsive design because it’s easier for them to find and index it. If a site is designed optimally in this way, it doesn’t matter what device the site is displayed on – responsive design automatically adjusts a page in such a way that webmasters can keep the content on the same URL.

Google doesn’t have to crawl and index separate versions of the same site. If it’s easy to read a website’s content then it’s more likely that the site will be ranked higher in the search results. This will mean that the site is doing what it’s supposed to do. This will be the makings of getting more hits!