The basics of responsive web development

Step 1: Define the viewport

The viewport is the viewing window through which users see your page.

If you don't set the viewport properly, your mobile visitors will see a really zoomed out version of your desktop layout.

What to do:

Put this tag anywhere between your opening and closing head tags:

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

This tag tells your browser two things:

1. Use the user's device width as the viewport width (width=device-width)
2. Don't start zoomed in or out (initial-scale=1.0)

With this tag, you're ready to start making your site responsive.

Step 2: Use fluid widths

The general idea is to give the pieces of your page percent widths as needed so your layout adjusts with the page width.

There are many ways to use fluid widths, so I'll give a few common examples.

Example 1: A standard content div

Suppose you want to style a div so that it takes up the full width of the page until the page reaches a certain width. This is common for content. Here's how the code would look:

			.example-div{
				max-width: 700px;
				margin-left: auto;
				margin-right: auto;
			}
		

In this example, the div will take up the full width of its container (divs do this by default), but the div will never get wider than 700 pixels. The div's left and right margins are set to auto so that the div will be centered.

Example 2: Side by side boxes

Let's say you want some fixed-width side-by-side divs that will stack on top of each other automatically when the viewport gets narrow. Here's how that might look:

			.side-by-side-div{
				display: inline-block;
				margin: 10px;
				width: 350px;
				max-width: 85%;
			}
		

First, we're using display: inline-block; so that the divs will stay on the same line together. The margin will keep the divs from being smashed together. The width will be 350 pixels unless the viewport gets too narrow in which case the width won't go over 85%.

Feel free to play around with fluid widths to see how changes affect your layouts.

Step 3: Write media queries

A media query is a feature of CSS3 that lets you apply different styles depending on the width of the page. It can detect things besides width, but width is the most common.

Here's an example of a media query:

			.example-div{
				background-color: blue;
			}

			@media (min-width:700px) {
				.example-div{
					background-color: red;
				}
			}
		

Here the div is set to have a blue background by default. However, if the viewport width goes above 700 pixels, then our div's background will turn red. Neat, right?

You're more likely to use this to adjust layout rather than colors, but now you know how a media query works.

Don't overuse media queries!

Media queries are a powerful and useful tool, but if you use too many of them, your pages will become bloated and complicated. If you don't believe me, just imagine styling the same div over and over for six different page widths, and now do this for all the other stuff on your page.

As much as possible, try to use fluid widths and careful thought before resorting to a media query. You'll thank yourself later.

Step 4: Handle images properly

People will see your pages on all sorts of devices. For a desktop user, that big banner image on your home page might be ok, but for a mobile user, that's a disaster because it loads slower and uses up more data.

Your stylesheet should have something like this for your biggest images:

			/* basic background - mobile and small screens */
			background-image: url('smallimage.jpg');

			/* enhanced background - larger screens */
			@media(min-width:700px){
				background-image: url('bigimage.jpg');
			}
		

By default, the above code loads your smaller image. If the screen is wider than 700 pixels (or whatever width you choose), then the bigger version of the image will show.

This is a great way to get good performance across devices. Your mobile users will love you.