Responsive web design guide

05 Dec, 2018

In 2017 it was recorded that around 63% of all U.S web traffic is made up of mobile devices. It is becoming increasingly vital that websites adopt a responsive design to accommodate this rapidly growing portion of the market. Unfortunately, a large portion of the internet still relies on fixed with elements that get cut off on small screens, or are too small on large screens.

Responsive design adapts the position and size of elements on the page in proportion to the dimensions of the window or device displaying the page. For example, desktop users may see content in a grid layout, while on mobile the same content could be displayed in a list layout to better utilise screen space.

The first step in responsive web design is to make sure the site will be scaled according to the screens dimensions and pixel density. I covered this in my "Essential meta tags" tutorial but to briefly reiterate, this can be accomplished using the viewport meta tag. With the most popular configuration being as follows.


<meta name="viewport" content="width=device-width, initial-scale=1">

It is important to be careful when working with "fixed width" elements. If they are not properly managed, they will be the first to fall out of view. A good way to manage these elements is to use the "max-width" attribute in CSS.

By setting a "max-width" on an element with an adaptive width, the element will behave regularly, until the width of the window causes the element to shrink below its "max-width". If we required, we could also utilise the CSS "calc()" command to allow space for a 15px margin on either side like so.


#someElement{
  max-width:800px;
  width:calc(100% - 30px);
  height:200px;
  margin:0 auto;
}

In some situations, you might need another column down one side of the page. To achieve this, we would use the same technique as above. However, inside of "#someElement", we would create two more elements for example "#content" and "#navigation", which would be floated to either side of the parent element.


#content{
  width:calc(100% - 180px);
  height:200px;
  float:left;
}
#navigation{
  width:180px;
  height:200px;
  float:right;
}

On mobile devices, however, it might not be practical to use a two-column page layout. Instead, we will need a way to responsively change the position of "#content" and "#navigation" to a verticle style layout. The most effective way to do this is to use CSS media queries.

CSS media queries allow you to set new CSS code to be applied when certain conditions are met regarding the dimensions of the screen. In this case, we will utilise them to change the layout of the page when the width of the screen drops below 600px.


@media only screen and (max-width: 600px) {
    #content, #navigation{
        	width:100%;
        	float:none;
	}
}

If you would like to research any of these topics further, here are some other helpful articles I would recommend reading.

Other Tutorials

View All

Immersive Parallax scrolling effect

javascript - css - html

You might have noticed while moving along in a car or train, how far away objects seem to move across your vision slower than those closer to your eyes. This effect is known as parallax and its a fundamental aspect of vision which can often go unnoticed.

How to use jQuery's ajax to load dynamic content

javascript - php

Providing dynamically loaded content instead of loading a whole new page can go a long way in terms of improving the experience your users have on your website.

Beginners guide to Regular Expressions

javascript - php - python

Regular Expressions (RegEx) are an extremely powerful tool that is common across most popular languages in use today. It can be used to find, replace and match text using a specialised instruction set.