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.
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
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.
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.
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…
This sample code demonstrates how this tool is referenced in your site, and really demonstrates how simple it is to work with:
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.
- Responsive Web Design Live DesignCast — Dec. 14
- jQuery Pocket Reference
- Ajax and PHP: Building Responsive Web Applications