Becoming Responsive, Part 1: Media Queries

Matcha Design - Thursday, August 20, 2015

In April 2015, Google changed their search ranking algorithm to subtly bump down websites which weren't mobile-friendly. This caused a chain reaction of website owners who needed their sites to become "responsive," a term for sites which dynamically change depending on the size of the viewport. A responsive site works just as well on a smartphone as on a widescreen monitor, without cutting off most of the content or shrinking the site down to illegibility.

matcha-design-Becoming-Responsive-P1.jpg

Many site owners weren't looking for a whole new design, but for some way to retrofit a responsive design onto their current site. Luckily a properly designed site can be made responsive for far less effort than creating a whole new site. As long as the designer understood the value of separating design and content and didn't create any widgets in Adobe Flash, we can bridge much of the remaining gap with media queries.

Media queries are a CSS feature designed to change a site's stylesheet based on the current environment. The following is a basic media query:

@media (max-width: 960px) { ... }

In the above example, any CSS rule between the curly braces will only take effect if the browser's inner window is 960 pixels wide or narrower.

Let's suppose the website you're making responsive has a standard CSS rule like this:

div#maintext {
width: 1024px;
}

Assuming the entire site is contained within a div with the id "maintext", that means the site is set in stone at 1024 pixels wide; no wider, no narrower. If the browser window is smaller, the user will have to scroll the window back and forth to read everything. Not very friendly for mobile users. So let's add a media query:

div#maintext {
width: 1024px;
}
@media (max-width: 1024px) {
div#maintext {
width: 100%;
}
}

When the browser window is wider than 1024 pixels, the design remains unchanged. But now if we use a narrower screen, the space for content will exactly fit the browser width. In practice, this makes the space seem to accordion inward. This doesn't actually shrink the content itself; you'd need additional CSS rules for that. But it's a good start.

You can add multiple media queries to the same stylesheet. Designers typically use queries to set breakpoints, so the page will translate smoothly down from desktops to tablets to smartphones. Based on the most popular screen sizes, a designer might create several widths: a "wide-as-you-care-to-go" version, a tablet-landscape version (1024px), a tablet-vertical version (768px), a full-mobile version (640 or 480px), and often a very small mobile version for tiny iPhone screens (320px). These designs all take the same page elements and rearrange them to be attractive and functional. This ensures that all the content remains available for all users.

Media queries have many uses besides making a site responsive. For instance, if you want to create a separate stylesheet for users who want to print out the page, you can include your print-friendly styles within:

@media (only print) { ... }

Or suppose you want special styles for a person using a tablet in landscape mode:

@media (only handheld and orientation: landscape) { ... }

Or only for people using Retina (high-resolution) devices:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { ... }

For (much) more information about what media queries can do, check out the Mozilla Developer's Guide page.

Media queries are an important tool for designers of responsive sites, but they're just the first step. In the next installment, we'll take an in-depth look at mobile navigation.

Is your website losing Google ranking by being fixed for desktops? Contact Matcha Design today and we can help transform your site into a future-proof marketing machine.

About Matcha Design
Matcha Design is a full-service creative agency specializing in web designprintidentitybrandinginterface designvideo productionstill photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.