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

Triggering vibrations from your website

javascript

Most common mobile browsers (excluding safari) allow you to trigger the device's vibration motor from your web application using the Vibration API. The Vibration API is provided to you by the mobile browser itself.

Detecting system dark mode in CSS

css

The "dark mode" feature has been spreading to apps and websites far and wide recently. It brings a new and discrete look to your applications as well as offering some extra control to the user...

Beme style progress bar

html - css - javascript

How to create a progress bar that wraps around the screen of any sized device similar to the Beme app.