Knowledge
BANK
Home > Knowledge Bank > Best Practice Guides > Responsive Web Design

Responsive Web Design

11

Almost every company wants a mobile version of its website nowadays. The use of mobile devices such as smartphones and tablets is increasing and this is one of the reasons why Responsive Web Design (RWD) plays a key role in the field of web design and development. There is no doubt that this process provides a solution to the current online challenge: adapting a company’s sites to a multitude of different screen sizes across a market that is constantly changing.

The purpose of this article is to explain in a simple and visual way the principles of responsive web design and its importance when it comes to succeeding in the online market.

What is Responsive Web Design?

A responsive design means something very simple: a website that responds correctly when displayed on mobile devices, which means that all the content, images and structure remains the same on any device. However, whenever we talk about responsive web design we should really think about this question: What problem does RWD solve?
responsive web design

The three main ingredients of RWD

Before we start going through each of the principles we need to take into account when building a responsive site, it’s key to understand that such sites are fluid: both the grids and the images are fluid, letting the content move freely across all screen resolutions and all devices.

  • Fluid Grids

First at all, a grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. A fluid is a substance that constantly flows. The combination of both is a grid that reflows when the screen size changes. In other words they allow layouts to change. Most responsive grids include versions for at least three different browser widths.

This is an example of how fluid grids work in responsive design:
fluid grids

  • Flexible images

One of the most challenging things in responsive web design is dealing with images. At the moment there are some techniques and tools available in order to serve true responsive images. Some good examples are Adaptive Images, a small PHP script that detects user screen sizes and creates the proper images for that screen size and Focal Point, a CSS framework that allows you to crop images and focus on its main point of interest.

  • Media queries

The third ingredient of RWD is media queries. These are an excellent way to deliver different styles for different devices and provide the best user-experience. As part of the CSS3 specification, media queries expand the role of the media attribute, which controls how styles are applied. For example: it has become common practice for years using a separate style sheet for print media websites to specify = “print”. Media queries take this idea to the next level by allowing designers to assign styles based on the properties of a device such as the screen width, orientation and so on.

Here you can see an example of how media queries work on different devices:

1. The site has a two column layout on a PC screen:
two column layout
2. The layout changes to one column when adapting to a tablet version:
one column layout (tablet version)
3. Media queries define new styles when adapting to a much smaller screen (smartphones):
smartphone version

Follow the “mobile first” philosophy

If one thing is for sure it’s that the web is going mobile. The “mobile first” approach tells us that the first step is designing the optimal view for mobile devices so that we can then use media queries to adapt layouts to larger devices. The mobile first philosophy offers multiple capabilities and advantages, and there is no doubt that the best one is letting designers innovate with new technologies and user-experiences — remember that when designing a desktop based layout you should take into account that some users may be using old browsers that can’t support new technology.

A good book to find out more about mobile first is Mobile First by Luke Wroblewski, a digital product leader who first defined this concept in 2009.

Responsive design is good for SEO

Last but not least, a well optimized mobile SEO strategy has a positive impact on both desktop website and mobile website traffic. In this sense, using a responsive design scheme is a key factor for any company or individual thinking about building a website and wishing to increase their visibility. One great benefit that RWD can offer to your SEO strategy: with this scheme there is only one site to manage and one site to update or alter content on, which means that once you have made changes, these will appear across all devices.


It’s important to remember that the internet has become the main way for people to find information, to shop online or to launch a business. User experience is a huge industry today and responsive design seems to hold the key to satisfying users in the online world.