radius180 (Logo)

Managed IT Solutions, 24/7 Support

Category: Development

The Responsive Web Series – Part 3: Media Queries

Welcome to the final installment of the Responsive Web Series! Jump in right here with Media Queries if you think you’re ready, but most people should start with the first two parts: Why it Matters and Responsive Grids.

This entry will be the final installment, and the most technical. An understanding of basic HTML/CSS is a must. You can use the W3Schools if you are a budding developer and looking to learn the basics. Alternatively, there are lesson-based education platforms like Treehouse and CodeAcademy with a wealth of resources to jump-start your plunge into the Web.

Now that we have our grid, making it responsive is just a matter of some smart CSS. As in the last installment, let’s continue using Skeleton as our example. Of course, if you download Skeleton all of the Media Queries we are about to discuss will already be included – However, without a basic understanding of how it works, you can easily find yourself lost in the shuffle if you need to customize anything.

So, with Skeleton, you’ll see the first thing they do is define the column widths from last week’s post for a normal 960-pixel grid. This is a default, normal-sized desktop setting. Using the formula described in the last installment, they calculate their container and column widths:

/* #Base 960 Grid
================================================== */

	.container									{ position: relative; width: 960px; margin: 0 auto; padding: 0; }
	.container .column,
	.container .columns							{ float: left; display: inline; margin-left: 10px; margin-right: 10px; }
	.row										{ margin-bottom: 20px; }

	/* Nested Column Classes */
	.column.alpha, .columns.alpha				{ margin-left: 0; }
	.column.omega, .columns.omega				{ margin-right: 0; }

	/* Base Grid */
	.container .one.column,
	.container .one.columns						{ width: 40px;	}
	.container .two.columns						{ width: 100px; }
	.container .three.columns					{ width: 160px; }
	.container .four.columns					{ width: 220px; }
	.container .five.columns					{ width: 280px; }
	.container .six.columns						{ width: 340px; }
	.container .seven.columns					{ width: 400px; }
	.container .eight.columns					{ width: 460px; }
	.container .nine.columns					{ width: 520px; }
	.container .ten.columns						{ width: 580px; }
	.container .eleven.columns					{ width: 640px; }
	.container .twelve.columns					{ width: 700px; }
	.container .thirteen.columns				{ width: 760px; }
	.container .fourteen.columns				{ width: 820px; }
	.container .fifteen.columns					{ width: 880px; }
	.container .sixteen.columns					{ width: 940px; }

	.container .one-third.column				{ width: 300px; }
	.container .two-thirds.column				{ width: 620px; }

	/* Offsets */
	.container .offset-by-one					{ padding-left: 60px;  }
	.container .offset-by-two					{ padding-left: 120px; }
	.container .offset-by-three					{ padding-left: 180px; }
	.container .offset-by-four					{ padding-left: 240px; }
	.container .offset-by-five					{ padding-left: 300px; }
	.container .offset-by-six					{ padding-left: 360px; }
	.container .offset-by-seven					{ padding-left: 420px; }
	.container .offset-by-eight					{ padding-left: 480px; }
	.container .offset-by-nine					{ padding-left: 540px; }
	.container .offset-by-ten					{ padding-left: 600px; }
	.container .offset-by-eleven				{ padding-left: 660px; }
	.container .offset-by-twelve				{ padding-left: 720px; }
	.container .offset-by-thirteen				{ padding-left: 780px; }
	.container .offset-by-fourteen				{ padding-left: 840px; }
	.container .offset-by-fifteen				{ padding-left: 900px; }
	.container .offset-by-eight-plus-half		{ padding-left: 500px; }

Break-points

Break-points are the specified device widths where you know the design will have to change. You can set them up any way you want, but Skeleton’s are very effective and I recommend using them. The logic is as follows:

  • Device Width is over 999px: Full Desktop (Default)
  • Device Width is between 768px and 999px: Small Desktop, Tablet in Portrait
  • Device Width is between 480px and 767px: Mobile in Landscape, Generic Mobile
  • Device Width is less than 480px : Mobile in Portrait

We need to know what our breakpoints are so that we can use them efficiently in our Media Queries. If you use them as described above, your site will transition very seamlessly from Desktops to Tablets to Smartphones. Now, all we need to do is recalculate our column widths for each size!

Anatomy of a Media Query

To build your first media query, we need to break down the code into understandable bits of information. Take a look at the example below, and we’ll go through each section at a time:

@media only screen and (min-width: 768px) and (max-width: 999px) { … }

  • @media only screen
    • This lets the CSS know only to execute the following styles when the page is loaded from specific types of Media sources. “only screen” dictates that the CSS only applies to screens – not, for example, when the page is printed.
    • This has many applications beyond responsive websites, as you can specify styles for Auditory devices (screenreaders), braille printers, TV monitors and even projectors.
  • (min-width: 768px)
    • Defines the minimum width in pixels a device must have available in order for the styles to be applied.
  • (max-width: 999px)
    • Defines the maximum width in pixels a device can have before the styles will no longer be applied.
  • Other rules and Syntax
    • You can get more specific with these, by defining portrait or landscape mode, but only when the device itself reports these statistics to the browser. Some older phones will not do this, so be careful.
    • In addition to AND, other operators you can use are NOT and ONLY. These give you even greater flexibility, so be creative and use them only when needed!

If you haven’t already figured it out by now, this example would apply rules for a Tablet in Portrait view, and perhaps some smaller/older desktop machines. The column widths in question would change to the following:

/* #Tablet (Portrait)
================================================== */

	/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 999px) {
		.container									{ width: 768px; }
		.container .column,
		.container .columns							{ margin-left: 10px; margin-right: 10px;  }
		.column.alpha, .columns.alpha				{ margin-left: 0; margin-right: 10px; }
		.column.omega, .columns.omega				{ margin-right: 0; margin-left: 10px; }
		.alpha.omega								{ margin-left: 0; margin-right: 0; }

		.container .one.column,
		.container .one.columns						{ width: 28px; }
		.container .two.columns						{ width: 76px; }
		.container .three.columns					{ width: 124px; }
		.container .four.columns					{ width: 172px; }
		.container .five.columns					{ width: 220px; }
		.container .six.columns						{ width: 268px; }
		.container .seven.columns					{ width: 316px; }
		.container .eight.columns					{ width: 364px; }
		.container .nine.columns					{ width: 412px; }
		.container .ten.columns						{ width: 460px; }
		.container .eleven.columns					{ width: 508px; }
		.container .twelve.columns					{ width: 556px; }
		.container .thirteen.columns				{ width: 604px; }
		.container .fourteen.columns				{ width: 652px; }
		.container .fifteen.columns					{ width: 700px; }
		.container .sixteen.columns					{ width: 748px; }

		.container .one-third.column				{ width: 236px; }
		.container .two-thirds.column				{ width: 492px; }

		/* Offsets */
		.container .offset-by-one					{ padding-left: 48px; }
		.container .offset-by-two					{ padding-left: 96px; }
		.container .offset-by-three					{ padding-left: 144px; }
		.container .offset-by-four					{ padding-left: 192px; }
		.container .offset-by-five					{ padding-left: 240px; }
		.container .offset-by-six					{ padding-left: 288px; }
		.container .offset-by-seven					{ padding-left: 336px; }
		.container .offset-by-eight					{ padding-left: 384px; }
		.container .offset-by-nine					{ padding-left: 432px; }
		.container .offset-by-ten					{ padding-left: 480px; }
		.container .offset-by-eleven				{ padding-left: 528px; }
		.container .offset-by-twelve				{ padding-left: 576px; }
		.container .offset-by-thirteen				{ padding-left: 624px; }
		.container .offset-by-fourteen				{ padding-left: 672px; }
		.container .offset-by-fifteen				{ padding-left: 720px; }
		.container .offset-by-eight-plus-half		{ padding-left: 400px; }
	}

When applying these styles for mobile, simply set all your columns to be full page width, and turn off all offsets and gutters. This will allow your columns to stack on top of each other, ideal for mobile browsing when you have a small amount of space to work with. I would suggest setting this in pixels and allow some room on either side so your text doesn’t shove up against the sides of a device. Ideally, you want your content to have some breathing room. Grab a book and take a look at the space they allot for page margins if you need a reference.

In closing, now that you have the tools and understand the importance of a good responsive website, why don’t you build one? If you have a new client, start building it in a responsive framework from the start, and when you are ready to launch, surprise the customer with their mobile-friendly site! Or simply hone your skills and create a test site, just to prove to yourself you can do it.

Now go forth! Venture on a journey through desktops and netbooks, iPads and Androids, and create the accessible, mobile-ready web of the future!