Register | Login

What is Responsive Web Design?

Responsive Web Design (RWD) is a way of building websites so that they adapt their layout to best suit the screen size of the device. For example, if you are viewing this website on your mobile phone or tablet, you will see that it fits perfectly to the screen without the need to zoom in or out. This makes browsing on a mobile so much faster and easier! Also with the huge increase of smart phone and tablet devices being used to surf the web it is so important that your website is responsive and mobile friendly. Not only that, Google has recently introduced mobile friendly tests and if your website is not responsive you will be penalised, thus affecting your Google page ranking.

With Responsive Web Design, having two separate websites for desktop and mobile is no longer necessary. This saves a lot of development time which will inevitably save you money.

How does it work?

If you do not know HTML or CSS it may be difficult to understand how this technology actually works but the following paragraphs should give you a basic understanding nevertheless.

The foundations of Responsive Web Design are fluid proportion-based grids, CSS3 media queries and sizing containers with percentage values.

Fluid, proportion-based grids

This basically means that you define a grid system that will cater your design for all screen sizes. Most responsive web design developers use a 12 column grid as this gives them most flexibility. For example, 12 is divisible by 3 and 4 so you could have a 3 column website or a 4 column website which are the most popular. The reason we use a grid is because your columns drop below one another on smaller screens and it helps that the columns are equal width to maintain alignment. To get an idea of how Responsive Web Design works just drag the edge of this window to reduce the width of the browser and see how the design adapts.

CSS3 media queries & the “Mobile First” approach

Media queries are breakpoints in your CSS which give you the ability to style things differently for certain screen sizes. For example, you could make a box fill 30% of the screen when at desktop size and fill 100% of the screen when at mobile size. Below is an example of how you would do this in your stylesheet.

/* Mobile – Global */
.box { width: 100%; }

/* Desktop */
@media screen and ( min-width: 800px ) {
.box { width: 30%; }

Note that the CSS code for the mobile layout is position above the desktop code. The reason we do this is because mobile devices usually aren’t as fast at loading web pages as desktop devices and therefore positioning the mobile code at the top means it will load the page quicker. This approach to Responsive Web Design is called… yes you guessed it.. “Mobile First”. You can then overwrite certain parts of your mobile CSS with your desktop CSS to change the appearance of certain elements on different screen sizes.

Sizing with percentages

Using percentage values for the width of your containers will allow everything to scale in proportion to the screen size of the device. Pixels are fixed measurements so try to avoid using them whenever possible. However pixels are not completely banished from your style sheet. You can use them in clever ways like using the CSS3 max-width property so that a certain element of your design does not exceed a specified amount of pixels. This type of technique is usually used to set a max-width for a container so that when it reaches the desired pixel width it doesn’t get any larger regardless of how big the screen is. To make images responsive we just simply set a max-width of 100% and a width of 100%. This makes the image fill the surrounding container at whatever size it is.

James koussertari


Leave a reply

We use cookies to ensure that we give you the best experience on our website.