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.
Continue reading