Simple Guide To Responsive Design (10 minute tutorial)

When I wanted to convert my web application for mobile and pad devices I had a hard time finding a step by step guide.There are a lot of grid systems and paid templates but what if I already made my site and now I want it to work seamlessly on all devices? This is the tutorial for you.

Responsive websites are not optimized for specific devices, like the iphone but optimized to work on all phones, all pad devices etc.  This is obtained by using a fluid grid and media queries.

The three things we will be covering to get your website working on all devices is:

1. Fluid grid

2. Using em instead of px

3. Media Queries

In this tutorial I will be optimizing the homepage of  Mia Math. This is an application I built that helps girls second to fourth grade learn math.

The source code can be found here, and you can visit the live app here: Mia Math.

By the end of this tutorial we will have three versions of Mia Math:

Desktop, Pad, Mobile:

miamathdesktop

mia math pad

mia math mobile

I use a chrome extension so I can see how my website will render on different devices: Resolution Test. You should install this before we get started.

1. Grid System – Fluid

You need a fluid grid system. All this means is your css grid needs to be in percentages not pixels.

This formula is straightforward:

current pixel / 1000px = percent_of_grid

Let’s break this down. Suppose we have a 12 column grid. The largest component, grid_12 should be at 100%. Mia Math has a container class. This is wrapped around all the content to give margins between the sides of the website and the browser. The container class has a max-width: 1000px;. This is what we divide all the px in our grid by to get the percentage. 1000px is the context that the rest of the grid “lives in”. This is our divisible number.

I am not going to dive too deep into this because there are already a lot of great tutorials out there, here is one:
http://www.awmcreative.com/css/creating-a-flexible-grid-from-pixels-to-percentages/

If you just want the code for a fluid grid, here is the grid I used:

.grid_1 { width: 6.5%; }
.grid_2 { width: 15%; }
.grid_3 { width: 23.5%; }
.grid_4 { width: 32%; }
.grid_5 { width: 40.5%; }
.grid_6 { width: 49%; }
.grid_7 { width: 57.5%; }
.grid_8 { width: 66%; }
.grid_9 { width: 74.5%; }
.grid_10 { width: 83%; }
.grid_11 { width: 91.5%; }
.grid_12 { width: 100%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
margin: 0 2% 1% 0;
float: left;
display: block;
}

2. Ussing em instead of px

There is a very simple formula for achieving this. I think we have used this before :). Go through and change all px values in your css to em or percentages.

current_pixel_value / context = em value

There is also a converter that will do this for you: http://pxtoem.com/

By this point you should see your site adapting to different browser sizes. But we want a fully responsive design so we’re going to add media queries.

3. Media Queries

Before we jump into media queries we have to add something to the website head.

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

The viewport meta tag allows us to override the 980px default width. This is a very simple explanation. The best explanation of this I have found is located here:
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Let’s start with the mobile version first. I want the buttons to span the entire length of the phone. To do this I am going to make by grid span 100%:

/*phone or small*/
@media screen and (max-width: 650px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width: 100%;
}
}

I am going to get rid of the large image:


	.mia_welcome {
		display: none;
	}

And the container that has the links to the grades needs to be in the center of the device.

	.grade_container {
	 width: 100%;
	 text-align: center;
	 margin-top: -1%;
	}

In order to make the website truly responsive we have to view our website at multiple resolutions 650px and under to make sure we fix components that break down as the device gets smaller or larger within our defined phone rage. This involves a lot of tinkering, patients is a virtue in the world of css.

Great, we’re almost there. Next, let’s look at pad devices. For Mia Math it looks like the image  needs to be displayed a little higher.

@media screen and (max-width: 1024px) {

.mia_welcome {
	margin-top: -1em;
}

}

Now we have an app that works on all devices. If you would like to view the source code for further clarity the repo is available here:

One thought on “Simple Guide To Responsive Design (10 minute tutorial)

Leave a Reply