Week 11: Responsive Web Design

Something awesome happened at work last week.

During our team meeting our manager said that we would move forward with using some of the new features in HTML5 and CSS3 even though not everything is supported in every browser. We're not just letting go of pixel-perfect similarity between browsers, we're not worried about having the exact same visual effects and features. Instead of designing everything for the least capable browser the templates will be designed based on what's possible in modern browsers. Furthermore, the sites will be designed for multiple devices.

It's the most exciting thing since we dropped support for Internet Explorer 6 and I'm not even a designer.

So it seemed like rather good timing that J. Cornelius (VP of Operations at Coffee Cup and President of the Atlanta Web Design Group) came to speak to our class that same week and touched on the same thing.

Why is this good?

• Less time spent tweaking
• Deliver the best possible design regardless of browser
• Deliver design meant for mobile
• Things that are used are kept and improved
• More pressure on browsers to adopt standards

I won't dwell on the first item since I've already ranted about it in a previous post. But the point made by John Allsopp earlier and reiterated by Cornelius last week applies to the second item as well: most people only use one browser. The person using IE7 doesn't care that the person using Opera or Firefox gets rounded corners and a different font. However, the people using Opera and Firefox will like how nice sites look that make full use of the standards those browsers support. There's really no reason those users should get less than what's possible.

But let's say for a second that a lot of people do use multiple browsers. If they have a browser the site looks better in wouldn't they just use that one rather than complain that the other browser doesn't show all the same stuff?

A lot of people already design for mobile but sometimes what happens is that a separate version of the site is built for mobile devices. Using CSS to make the existing site adjust for different devices will make maintenance much easier.

Another point is that it is important to use the new standards in order to keep them around. The W3C abandons things that aren't implemented by the browsers and the browser companies won't implement things unless there is pressure to do so. We can't wait for every browser in existence to support something to use it because that will never happen. While we're waiting for more support, W3C and the browser companies see little to no interest and the existing support gets dropped.

The major browser companies are using the W3C standards and the modern versions of their browsers have some level of support for HTML5 and CSS3. Since the browser wars are no longer about whose interpretation of the standards is correct the browsers have to compete based on who delivers the best experience. If a lot of sites start using something that's only supported by Mozilla that pressures the other browser companies to implement it as well.

Example Sites

Amped - Amped is the hack day that wrapped up Web Week in Atlanta. Currently, if you look at it in Firefox (3.6.4) you get the gradient background with the circular stripes. You don't see the stripes in Opera (10.63) but you do still see the effects with the font and text. In IE9 (9.0 beta) you lose the background stripes and font/text effects (but still looks cooler than how it does in IE6).

Robot or Not - This is the site our manager showed us right after coming back from An Event Apart (the conference put on by A List Apart). Designed by Ethan Marcotte, it is an excellent example of a site that adjusts to different browser window sizes.

More Information

A List Apart: Responsive Web Design

The Big Web Show: Episode #9

Responsive Web Design presentation on SlideShare