Responsive design is a major buzz-word, everyone wants it and rightfully so with the huge shift towards mobile. But what exactly makes a site responsive? It essentially takes three things:
1. Flexible grid-based layout based on percentages
2. Flexible images and media
3. Media queries
Flexible grid-based layout
A flexible percentage-based grid is the backbone of responsive design. It’s based on the formula:
target pixel size (in design) / context of available size = result
If the width of the browser is 1024px, then 100% width will be 1024px, 90% will be 922px, 50% will be 512px, etc. If the width of the primary container is 90%, the new context for the elements that it contains becomes 922px. (see illustration)
Let’s say that the primary container on a PSD design is 936px, and it contains a column that is 608px, 608 (target) / 936 (context) = 65% of the total. When the width of the container is 922px, as it is in the example, 65% of a 922px context is 599px (922 * 0.65 = 599) .
Font size is calculated in the same way, most desktop browsers begin with a default context of 16px, if you would like to change the font size to 22px, 22px becomes the target size, 16px is the context, which become 22 / 16 = 1.375, or 1.375em. (see h1 above)
Flexible Images and Media
If an image was in the left column above, it’s container would be set to 65%, in this case that would be 599px. As long as the image is larger than 599px, it will be scaled down to a 599px width. This means very large images are often needed to work for large screens, particularly if full-width images are needed.
Media queries are used in both responsive and adaptive design (mobile design that does not use a percentage-based grid). Media queries are CSS calls that check for browser width or height, and serve CSS to browsers only with specific minimum or maximum heights and widths.
For example, if a site is built with the maximum size in mind, then a media query is added at the width where the top navigation breaks to a second line. Let’s say the top nav breaks at 740px width, a new set of styles is used to display the top navigation in a different way below that width, like stacked below the logo instead of to the right.
There are a number of common responsive breakpoints based off of current devises that can be a good basis for media queries as well:
Mobile portrait (320×480)
Mobile landscape (480×320)
Small tablet portrait (600×800)
Small tablet landscape (800×600)
Tablet portrait (768×1024)
Tablet landscape (1024×768)
I hope this helps simplify what responsive design is and if it’s something that’s needed for your next project. Responsive design is great for a lot of projects and a positive move towards the mobile web shift, although it’s not always quite right for everything depending on image availability, budget, audience, or purpose.