Skip navigation
Help

future friendly

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

Responsive design means making your website readable no matter what screen it might be on. In the words of karate master Bruce Lee, “Don’t get set into one form, adapt it and build your own, and let it grow, be like water.” Lee may have been talking about your mind, but his words apply just as well to your website. To paraphrase the rest of that quote, you put water into a cup, it becomes the cup; so, you put your content on a tablet, it becomes the tablet; you put it on a TV, it becomes the TV.”

On a more practical level, achieving a Bruce Lee-like command of the fluid web means ditching the pixels and points for flexible units like ems or percentages. There’s a lot more to responsive design than just fluid layouts, but it’s definitely a key part of the process.

Curiously, when it comes time to use the other universal element of responsive design — the @media query that applies the actual responsive design — most of us revert right back to pixels with something like @media all and (min-width: 500px) {}. It seems logical; after all, you’re trying to fit your content into a window with specific dimensions, so why not use pixels?

Certainly you can, and most sites we’ve seen up to this point use pixels for the actual media query breakpoints, but it’s worth noting that you can use ems here as well.

Lyza Gardner over at Cloud Four recently posted a look at why Cloud Four’s new responsive design uses ems in its media queries. Here’s her reasoning for Cloud Four’s em-based approach:

Folks who design for traditional reading media — where the content really is king — don’t center design decisions around the absolute width of content-holding elements so much as around the optimal line lengths for the content they’re flowing. There are some tried-and-true numbers one can shoot for that make for the “right” number of letters (and thus words) per line for comfortable human reading.

Thus actual column width is a function of font size and ems-per-line.

The rest of the post walks through how Cloud Four used em-based media queries to create a better navigation experience on their site. Some of the advantages may not apply to every responsive design, but there is one additional benefit that works nearly everywhere — em-based media queries mean that your site will handle user zooming much better, applying media queries instead of allowing content to overflow its container.

But perhaps the best part of an em-based approach is that it seems to work in nearly every web browser. Cloud Four’s post doesn’t get into the specifics of their browser testing so I fired up a couple of virtual machines and tested their site and my own simplified demo page in every major browser.

According to my testing, em-based media queries work properly in all OS X browsers. (I tested the latest versions of Safari, Firefox, Chrome and Opera.) Only Firefox and Opera apply media queries on zoom, though. (Chrome and Safari need a page refresh before the query is applied.)

On Windows 7 Firefox, Opera and Chrome behave the same way they do on OS X. IE 9 also worked fine and, like Firefox and Opera, applies media queries when zooming without needing a page refresh. Judging by the comments on the Cloud Four blog, Chrome on Linux may have some issues, but in my testing Firefox and Chrome on Fedora worked as expected.

All the mobile browsers I tested on Android worked as well (Firefox, Chrome, Opera Mini and the default Android browser). On iOS Mobile Safari applies em-based queries as you would expect.

In the end you certainly don’t need to use em-based media queries. As many sites out there demonstrate, pixel-based queries work. At least for now. However, as a wider range of screen sizes begin to access the web switching to em-based queries may put you ahead of the game. Em-based queries mean addressing the content-width rather than just the screen width and that feels like a more future-friendly approach.

0
Your rating: None

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

This week’s Consumer Electronics Show in Las Vegas has seen the arrival of dozens of new devices from tablets to televisions. Some of these newfangled gadgets will soon be in the hands of consumers who will use them to access your website. Will your site work? Or will it end up mangled by a subpar web browser, odd screen size or slow network connection?

No one wants to rewrite their website every time a new device or browser hits the web. That’s why approaches like responsive design, and the even broader efforts of the future-friendly group, are trying to develop tools and techniques for building adaptable websites. That way, when a dozen new tablets suddenly appear on the scene, you can relax knowing your site will look and perform as intended, no matter which devices your audience is using.

Even if you aren’t a gadget lover, CES should help drive home the fundamental truth of today’s web — devices, they are a comin’. Webmonkey has compiled helpful resources for creating responsive design in the past, but the field is new and evolving rapidly so here’s an updated list of links to help you get started responsive, future-friendly sites that serve your audience’s needs whether they’re browsing with a tiny phone, a huge television or the web-enabled toaster of tomorrow.

Basics:

  • Use @media to scale your layout for any screen, but remember that this alone isn’t really responsive design.
  • Use liquid layouts that can accommodate any screen size. Don’t simply design one look for 4-inch screens, one for 7-inch, one for 10-inch and one for desktop. Keep it liquid, otherwise what happens when the 11.4-inch screen suddenly becomes popular?
  • Roll your own grids based on the specifics of your site’s content. Canned grid systems will rarely fit the bill. The problem with canned grids is that they don’t fit your unique content. Create layouts from the content out, rather than the canvas (or grid) in.
  • Start small. Start with the smallest size screen and work your way up, adding @media rules to float elements into the larger windows of tablet and desktop browsers. Start with a narrow, single-column layout to handle mobile browsers and then scale up from there rather than the other way around. Starting with the smallest screen and working your way up means it’s the desktop browsers that need to handle @media, make sure older browsers work by using polyfills like Respond.
  • Forget Photoshop, build your comps in the browser. It’s virtually impossible to mock up liquid layouts in Photoshop, start in the browser instead.
  • Scale images using img { max-width: 100%; }. For very large images, consider using something like Responsive Images to offer the very smallest screens smaller image downloads and then use JavaScript to swap in larger images for larger screens. Similar techniques can be used to scale video.
  • Forget about perfect. If you haven’t already, abandon the notion of pixel perfect designs across devices. An iPad isn’t a laptop isn’t a television. Build the perfect site for each.

Further Reading:

  • Future Friendly — An overview of how some of the smartest people in web design are thinking about the ever-broadening reach of the web: “We can’t be all things on all devices. To manage in a world of ever-increasing device complexity, we need to focus on what matters most to our customers and businesses. Not by building lowest common-denominator solutions but by creating meaningful content and services. People are also increasingly tired of excessive noise and finding ways to simplify things for themselves. Focus your service before your customers and increasing diversity do it for you.”
  • Building a Future-Friendly Web — Brad Frost’s excellent advice: “Think of your core content as a fluid thing that gets poured into a huge number of containers.”
  • There is no mobile web — “There is no mobile web, nor desktop web. It is just the web. Start with the content and meet people halfway.”
  • Responsive by default — Andy Hume on why the web has always been responsive, but was temporarily sidetracked by the fad of fixed-width sites.
  • COPE: Create Once, Publish Everywhere — NPR’s Director of Application Development, Daniel Jacobson, walks through how NPR separates content from display and uses a single data source for all its apps, sites, APIs and feeds. A great example of what Frost talks about regarding content as a fluid thing.
  • Support Versus Optimization — It can seem daunting to support dozens of mobile browsers, but if you aren’t up to the challenge of a few mobile browsers now what are you going to do when you need to support car dashboards, refrigerators, televisions and toasters, all with dozens of varying browsers?
  • The Coming Zombie Apocalypse — Not satisfied thinking a few years ahead? Scott Jenson explores further into the future and tries to imagine what the web might look like when devices all but invisible.

Techniques:

0
Your rating: None