In 2005, Jesse James Garrett wrote an excellent article describing and coining the term “Ajax.” He demonstrated Ajax as a method of using multiple web programming languages to neatly load content onto a web page without actually refreshing the page.
It’s tough to accurately describe this functionality to people not familiar with web development, and it’s even tougher for those people to actually visualize this functionality in action (although this page will help you). But trust me, Garrett’s article changed the game for web programmers. Ajax stretched the imagination of designers and developers, showing them the seemingly infinite list of possibilities of what they could do when creating web applications.
Google has given us the most widely-used Ajax applications: Gmail, Maps and their Suggest functionality, just to name a few. And many others besides Google have given us great Ajax applications as well but the point is, Garrett’s article got the creative juices flowing for lots of designers and developers. By showing them what was possible, he made them rethink their entire creative process.
What Jesse James Garrett was to Ajax, Ethan Marcotte may end up being to responsive web design. The title of his widely-cited A List Apart article, responsive web design is a big buzz phrase among the early adopter segment of the design/development body politic. And although there are concerns about its implementation, many of them valid, responsive web design is an unquestionably forward-thinking concept.
Inspired by modern architectural theory, responsive web design uses CSS3 to detect the width of a device…a web browser, a tablet, a smartphone…whatever. Combine this detection process with traditional CSS techniques for positioning page elements, and you’re able to create one website that neatly displays on all devices.
I’d like to present this as an opportunity to our team at work, but I need to develop and test out code on my own first. So I may adjust the portfolio for my HTML5 Project to accommodate a responsive web design. Doing this requires my understanding of the process…here’s what I’ve learned so far.
Setting Up CSS For Responsive Web Design
Media queries, a part of the new CSS3 specification, are the linchpin of responsive web design. They’re set up when you link stylesheets to your web page and look somewhat like this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> <link rel="stylesheet" media="screen and (max-width: 320px)" href="smartPhone.css" /> <link rel="stylesheet" media="screen and (max-width: 600px)" href="tablet.css" />
With this code in mind, let’s look at the following scenario:
- you want a wide desktop web browser to load the “large.css” file, which displays a certain text block on your site with a left-aligned, 14 point font
- you want a skinny iPhone web browser to load the “smartPhone.css” file, which displays the same text block on your site with a right-aligned, 6 point font
- you want a semi-wide iPad web browser to load the “tablet.css” file, which displays the same text block on your site with a center-aligned, 10 point font
- no problem for either bullet point…the previously-mentioned coding method will detect the device’s width, then apply the device’s proper CSS file
Before we discuss how all this works, let’s look at responsive web design in action. Since not every browser supports this functionality, I need to check out your browser first…
It looks like you’re not using Internet Explorer 8 or lower so you should be able to view this demo with no issues. But if you’re using a really old version of either Firefox, Safari, Opera Mobile or Opera Mini, you may need to update it.
There are quite a few sites supporting a responsive web design, but I really like what web developer Chris Pederick has done with his site. So let’s open that site up in a separate browser.
Now spend a few seconds clicking-and-dragging the bottom right corner of your browser to resize it. Notice how the page elements reformat themselves so that they neatly display on the page…regardless of its height and width.
Set your browser dimensions up so that it’s vertical like a skyscraper. Notice how the elements neatly adjust to fit on the page. You’ve just previewed how this site would look on an iPhone or Android.
Welcome to responsive web design!!!
How Responsive Web Design Works
As I see it, responsive web design must utilize the following:
Repeating myself here…a part of the new CSS3 specification that handles both the device detection process and the proper CSS file-loading based on that detection.
Referring to another Marcotte article over on ALA, fluid grids teach you how to apply 8th grade algebra to create CSS that neatly readjusts page elements, making things more responsive.
The Viewport Meta Tag
Needed when creating a site for any iOS device, i.e., the iPad and the Phone. It looks like this…
<meta name = "viewport" content = "width = EnterYourOwnWidth">
It’s good to know how the Viewport meta tag works so read up on it over at the Apple Developer site.
- Added Bonus:
This method doesn’t work on all browsers as of this article and also requires tweaking the .htaccess file, something I’ve never felt comfortable doing. But the demo shows that it works well in the browsers that it does support.
Responsive Design Issues
But as I said earlier, there are issues, the main one being site optimization.
Let’s look at my previous code, without the viewport meta tag:
The code above will detect a device’s width, then apply the proper CSS file. But while it will apply only one CSS file, it loads all three at once. The fact that you don’t use these files doesn’t matter-they will still load onto your computer. So your computer is loading resources it doesn’t need and won’t use, making things a little sluggish.
Also, while either of the fluid image above techniques seem to work well, there’s a chance that you’ll want to load individual images for each stylesheet. Again, depending on which stylesheet is applied, you’re loading things that you don’t need.
This loading of extra, unused resources may not be a big deal if you’re browsing a responsive-designed site on a ethernet cable-connected computer; however, a wireless device (especially one on a public network) will probably have issues.
A simple Google search brings up quite a few articles against issues with responsive web design, the biggest one coming from web developer Jason Grigsby. My suggestion is to read the negative articles on the subject as well as the positive ones, the Grigsby one at least.
So, yes, the responsive web design concept is new. REALLY new. I do see its promise but am not ready to recommend as “development best practice” at work until I get my hands dirty with it on my own first.
So, again, I’m now researching the possibility redoing my HTML5 Project wireframes to fit a responsive design so I can fully understand this concept. This will take time but I’m will to work as long as possible to get this done.
There are tons of responsive design resources…here’s a complete list of ones that have helped me. Some of these resources have already been mentioned:
- Ethan Marcotte’s original “Responsive Web Design” article at A List Apart
- Marcotte’s “Fluid Grid” article, also over at A List Apart
- “Responsive Web Design” episode at “The Big Web Show,” featuring Ethan Marcotte
- Stephen Hay’s “Real-world Responsive Design” lecture at the 2010 Fronteers conference
- Viewport meta tag documentation for iOS on the Safari Web Content Guide
- Jason Grigsby’s “CSS Media Query for Mobile is Fool’s Gold” article over at his blog – an argument against responsive web design
- CSS3 First Look course over at lynda.com, which includes a GREAT chapter on media queries
- Kayla Knight’s “Responsive Web Design: What It Is and How To Use It” article over at Smashing Magazine
- Rachel Andrew’s “How To Use CSS3 Media Queries To Create a Mobile Version of Your Website” article, also over at Smashing Magazine
- The LESS framework-a pre-built template for creating responsive web design sites
- mediaqueri.es – a GREAT gallery of responsive web design sites
Extra: As of this article, Ethan Marcotte is set to release a book entitled (surprise!) “Responsive Web Design” via A Book Apart in a few monthsextension of his two ALA articles along with new content. To be alerted when it’s released, either sign up for their newsletter at the previously-mentioned link or follow A Book Apart on Twitter.
Feel free to share any responsive web design resources that you like…and your comments!!!! Responsive web design is new so the more info that goes around, the better for all of us.