Responsive Web Design: Should I Use CSS3 or Adapt.js?

At a basic level, responsive design isn’t hard to wrap our heads around—it’s simply styling a web page to fit the device used to view the site. But the impact on the designer is immense. Instead of designing each page once, we now have to design the same page multiple times.

Designers who write their own CSS, HTML and JavaScript are keen to jump into responsive layouts. The most basic hurdle you face when getting started with this type of code, though, is how to render the page using a CSS file appropriate to the user’s environment.

It’s really easy to get started. This article will show you two of the most common tools for creative adaptive designs. CSS3 media queries are easy to start with and are the default choice for many web designers. But Adapt.js is a fantastic starting point for anyone new to responsive design. It lets you skip the pains of browser support and jump straight to the fun part—designing.

CSS3 Media Queries

Most people start dynamically applying appropriate style sheets with media queries (a CSS3 specification that lets you specify how a site should render based on screen width, orientation or other factors). Basically, it’s the easiest way to make the change to responsive design. It doesn’t require JavaScript to work, and it’s pretty darn easy to get set up. Andy Clarke created fantastic code template for doing this.

This code structure is great; you simply start adding styles to each block and it will be rendered based on the screen sizes as noted in the markup. The @media tag allows you to filter the CSS so that only the styles in that block render if the screen size is matched. If you’re just getting started, this is a great first step. At this point there’s nothing magical happening. You’re simply writing CSS that only gets applied to certain browser sizes.

Drawbacks

Once you start writing code, these clear sections grow really quickly. This can make it difficult to identify which format you’re working on. The easiest fix to this is to simply use @import tags to pull in a separate file for each block. OK, problem solved!

But there’s another issue—every device is going to load all of the CSS for every layout option all at once.  This slows down the site and can be a real burden on slower connections—for phones in particular. (This is one of the reasons I turned to Adapt.js, but more on that in a minute.)

The last major issue is browser support—in particular Internet Explorer 7 and earlier simply don’t support @media filters. Some folks take a hard line when it comes to older browsers and are OK with leaving them in the dust. As much as I agree, I also know clients want their site to look perfect for all visitors; they aren’t as annoyed as us about the fact that people are still using 10-year-old browsers.

You have a few options to solve this problem. Primarily among these is to use what is known as a polyfill. A polyfill is a JavaScript tool used to replicate modern attributes in older browsers. For example, this polyfill makes many CSS3 options magically available in older browsers. To solve this specific problem, I suggest using this JavaScript file called respond.js. It will make your media queries work in uncooperative browsers.

As you can see, rendering different styles to the user’s browser can be more complex than you expected. But some very smart people addressed these issues to make life simpler for the rest of us…

Adapt.js

Adapt.js is a tiny set of JavaScript code—a mere 826 bytes. To put this in perspective, the Word document for this article was 30 times that size. (Ironically, its creator, Nathan Smith, begins his explanation of Adapt.js by saying it’s not a tool for responsive web design.) Semantics aside, this tool lets you not only change style sheets depending on the size of a user’s browser, but it essentially bypasses all of the issues I presented above.

This sample code demonstrates how this tool is referenced in your site, and really demonstrates how simple it is to work with:

For starters, this tool doesn’t rely on media queries at all. It actually uses old JavaScript methods for determining the browser’s width. These basic methods not only predate media queries but CSS itself. Once the proper CSS file is determined, it’s added using a standard HTML link tag to embed a CSS file:

This HTML is not only simple, but is 100% supported in all browsers. One major problem solved.

Up next is the matter of organization. When you download this tool, it’s pre-coded to use separate CSS files for each layout. This makes it easy to organize your styles and work on them independently, eliminating headaches and making the code easy to decipher.

This approach also solves the problem of loading unneeded files. Since the CSS is in separate files, and only the needed one is added to the page, users don’t end up downloading a bunch of bandwidth-hogging styles they’ll never use. This makes the site faster.

Drawbacks

There’s always a catch. Fortunately, the one issue is minor and easily worked around. The problem is that Adapt.js relies on JavaScript to work, and so it won’t run at all if a user has JavaScript disabled. It also won’t work for a low-tech device (such as an older model mobile phone) accessing the site.

The answer to this is simple. When you build your site, include a default style sheet that applies the majority of your styles. That way, even if JavaScript isn’t running, the site will style in a default way. Adapt.js is set up to have the mobile stylesheet as the default style, since the most likely candidate for a non-JavaScript client is a phone.

More resources

Need help deciphering all this tech jargon? Register for an account on HOW Interactive Design, and you’ll get access to our Web Design Tech Glossary.

One thought on “Responsive Web Design: Should I Use CSS3 or Adapt.js?

  1. Pingback: Responsive Web Design: Should I Use CSS3 or Adapt.js? | HOW Interactive Design | Development Digest | Scoop.it

COMMENT