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

CSS Material design toggle switch

html - css - javascript

Because sometimes all you want is just a good looking switch without importing an entire library to do it.

Five practical .htaccess tricks

apache - php

Apache's '.htaccess' has some very powerful tools that you can use with minimal effort to enhance the user experience and even performance, of your website.

Handy Python tricks for beginners

python

When first starting out in a language like Python, things tend to move a bit slow until you learn how to use the built-in functions and operators which exist to speed up the development process. So this tutorial will try to mitigate that problem.