All posts tagged ‘responsive design’

File Under: CSS, Responsive Design

Resizing Responsive Designs with CSS REMs

Photo: Ariel Zambelich/Wired.com

Building responsive websites means that your design has to adapt to different screen sizes. We’ve covered a number of ways to do that in the past, including working with percentage widths, em-based type and other flexible techniques of responsive design.

There’s another way to achieve flexibility that doesn’t involve keeping track of ems or percentages — the new CSS REM unit. REMs are just like ems — REM stands for Root Em — but instead of being relative to the parent element like Ems, REMs are relative to the document root’s font size. Most of the time that means the html element.

We’ve previously looked at REMs as a way to achieve fluid typography, but REMs can help with more than just type sizing.

Mobify’s Roman Rudenko has an article on CSS-Tricks that shows how to use REM units to scale specific page elements while leaving others unaffected. Rudenko even shows how you can use REM units as a replacement for the very powerful, but not very well supported, viewport width unit.

For those wondering why you might want to resize some elements and not others, here’s Rudenko’s use case:

This style of sizing can be useful for user-driven customization, or to adapt layouts for cases that require secondary elements to be more touchable (tablet) or visible (TV). Without REM, every adjustable element would have to be resized separately.

This technique can be applied to whole pages as well. For example, if your type is all sized in REMs and you want it to be a bit larger as screen sizes get bigger, all you need to do is adjust the font size on the html element with each media query and all your REM-sized type will get bigger based on that single line of code.

For more on REMs and what you can do with them be sure to check out Rudenko’s post and our earlier write up.

Turning Off Responsive Design

In the bad old days of just four years ago it was pretty common for mobile users to get shunted off to some half-baked, feature-deprived “mobile” version of the website they were trying to visit. This misguided practice was common (and annoying) enough that even today Chrome for Android and other mobile web browsers ship with a feature that allows users to “request desktop site.”

To make that feature work Chrome for Android changes its user agent string. Any site that uses user agent strings to redirect mobile users will no longer because to redirect them and the desktop version is displayed.

Responsive websites don’t rely on user agent strings though. Instead they adapt to screen size based on CSS media queries so even if a user has the option for desktop sites checked in Chrome they still won’t get the “desktop” site (of course with responsive sites there really is no desktop site, just a desktop layout).

Provided your responsive designs are good, this isn’t a problem (and if they aren’t then you have bigger problems). However, Opera web standards evangelist Bruce Lawson raises an interesting edge case: what about users that have never seen the mobile layout and are disoriented when they do? If you were expecting, say, the desktop layout of the BostonGlobe.com and instead saw the mobile layout for the first time you might be understandably confused. Here’s what Lawson has to say:

My reason for wondering [about turning off responsive design] is watching my dad use his Xmas Android phone and seeing his puzzlement that some sites look completely different on that device. Non-RWD sites loaded the layout he was familiar with — the desktop layout — which meant he could verify he was on the right site, he knew where in the layout the content he wanted was, and then scroll and zoom to it. When a site looked radically different, he’d check the URL bar to ensure that he’d typed in the right address. In short, he found RWD to be confusing and it meant he didn’t trust the site – no way would he buy anything from these sites.

The first thing to note is that this isn’t a problem unique to responsive sites. The same thing would crop up with a separate mobile experience. The difference is the inability to opt out of the responsive layout. An edge case? Sure, but Lawson isn’t alone in wondering about turning off responsive designs. CSS guru Chris Coyier tackled that very question last year, writing:

Why don’t we see opt-out responsive design? My guess is two-fold:

  1. It’s a bit technically challenging to implement and there aren’t a lot of precedents.
  2. It’s admitting you didn’t do a very good job on the responsive design.

The latter likely being the bigger factor. Like: why are we creating this responsive design at all if we aren’t sure it’s a better experience?

I would agree with both points, but clearly there are at least a few edge cases where offering an option to turn off responsive design might be a good idea. Of course it may not be worth worrying about the edge case of unfamiliar visitors — that’s the sort of decision you can only really make by looking at your own visitors and doing your own testing.

If you actually want to try it, Coyier has some ideas on how to go about creating an option to opt out of a responsive design.

File Under: Responsive Design

Take Responsive Design Beyond Media Queries

The basic elements of responsive design — fluid grids, flexible media and CSS media queries — are key to building successful websites that work across platforms and devices, but these three components are not the end of the responsive design story. In fact, as developer Brad Frost argues in the talk embedded above, there is, or should be, much more to it than that.

While many would call the broader approach “adaptive” design, Frost wants the phrase “responsive web design” to go the way of Corn Flakes, as he puts it. That is, to become a more general term that can “encompass all the things that go into creating a great multi-device web experience.” That means things that go beyond fluid grids, flexible media and media queries — things like performance, device support, device optimization and future-friendly designs.

In Frost’s analogy responsive design is the tip of the adaptive design iceberg, where all the good stuff is under the water. “Below the waterline, that’s where the true opportunity is,” says Frost, “that is where we actually have the potential to basically reshape what the web is, what it can do, where it can go and who it can reach. And that is powerful.”

Just what’s below the waterline and how do you roll these broader ideas into an actual website? Well, be sure to watch the video — Frost walks through an example of a mobile-first responsive design, which you can also read about on his site. If you prefer a tutorial sans video, Frost’s write-up from last year is available on HTML5Rocks.

Simplify Responsive Design by Embracing the Flexible Nature of the Web

Some flexible foundations are better than others. Image: McPig/Flickr

If you’re using pixels as part of your responsive designs you’re probably making your life harder than it needs to be.

There’s nothing “wrong” with using pixels in an otherwise responsive layout, but if you do you’ll likely end up writing more code than you would using flexible units.

Jon Allsopp’s A Dao of Web Design predates responsive design by a decade, but its prescient advice remains perhaps the best way to approach any design, responsive or otherwise: “It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

More than just embracing the nature of the medium, building your sites atop what developer Trent Walton calls “Flexible Foundations” can go a long way to making development easier. As Walton points out in his post, using pixels often means more code since pixel-based type, margins and padding mean you need to add new values at every responsive breakpoint.

“In many ways,” writes Walton, “every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.”

Stick with percentages, ems or the newer rem units and your designs can scale simply by changing the body font size. Embracing the flexibility of the medium means you can adapt as well — no need to panic when a client wants to make the logo bigger at the last minute, you can scale the whole layout up (or down) with a few lines of code. For Walton’s design firm, Paravel, the flexible approach has already proved its worth in just this way:

This paid off a few weeks ago, when a client wanted to make significant changes to the layout for his site. Type, imagery, buttons, etc. needed to be smaller and overall width & spacing (margins / padding) needed to be reduced. Thankfully, this was as simple as adjusting the body font-size at wide views. Years ago, however, this could have set the project weeks beyond scoped timeline and budget.

As developer Brad Frost has said, “Get your content ready to go anywhere because it’s going to go everywhere.” Pixels may work today, but they make for a rigid site that might well break on new devices. As Walton concludes “the sites we’ve built to display on a desktop, smartphone, or a tablet today could be on a TV screen, coffee table display, or mega space yacht projection system tomorrow.” Start with a flexible foundation and your site should handle just about any hardware that tries to load it.

Five Ways to Simplify Responsive Design

Building responsive websites can be daunting. After all, instead of just one desktop layout you’re creating at least two, probably three or even four layouts to handle different breakpoints and screen sizes. That means considerably more work, which can feel overwhelming if you don’t have a good plan of attack.

One of the better plans I’ve seen recently comes from developer David Bushell, who recently outlines 5 Tips for Responsive Builds. Among his suggestions there are two standouts, the first being “utilize breakpoint zero.” For Bushell “breakpoint zero” just means “start by writing HTML in a semantic and hierarchical order. Start simple, with no CSS at all and then “apply the basic styles but don’t go beyond the default vertical flow.”

In other words, keep your layout slate blank as long as you can so that when you do start adding layout rules you can spot problems with different breakpoints early and fix them before changing things becomes a major headache.

The other highlight of Bushell’s post is the suggestion that you maintain a CSS pattern library — reusable snippets of CSS you can drop in for quick styling. There are a ton of ways you can do this, whether it’s something formal like SMACSS (pronounced “smacks”), OOCSS, or just taking the time to write a style guide with some sample code. The point isn’t how you do it or which method you use, but that you do it.

Be sure to check out Bushell’s post for more details on these two suggestions as well as the other three ways you can help make your responsive design process a bit smoother.