Thanks to everyone who came to my Introduction to Responsive Web Design workshop last night. If you missed it, I’ve posted the slides for you to view online or download:
Here’s what we talked about:
- Responsive web design (RWD) is a collection of techniques that allow your website to respond to the device that it is being viewed on. This allows all users to have an optimal experience without creating separate sites for different devices.
- The three pieces of RWD are: a flexible, grid-based layout; flexible images and media; and media queries.
- We’ve always thought of web design as decorating a fixed-size page like a painter does a canvas. But we’ve moved to an era where web sites are viewed on a wide range of devices and screen sizes, so we need to change our thinking. The web is free from the physical restraints of a canvas.
- Responsive web design is about being able to respond and adapt so that each user can get the best possible experience. It’s like Frank Lloyd Wright building a house on top of a waterfall.
- Mobile strategy is important because the number of people accessing your site with mobile devices is only going to keep increasing. Having a responsive site is a start, but it shouldn’t be your entire mobile strategy.
- Your workflow needs to change to accommodate responsive design. We are now free of the canvas, so don’t limit yourself to a Photoshop canvas. Think from a content-first perspective to make sure your site can meet the needs of your users, rather than just looking pretty.
We also went through a hands-on demonstration of converting the DC Web Women site design from fixed width to responsive. All of the demo code, as well as a link to the files so you can try it yourself, are in the slides from the workshop.