Introduction to Responsive Web Design

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:

• Slides from Introduction to Responsive Web Design

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.
• You don’t need to learn new technologies or programming languages. Responsive design is mostly comprised of HTML and CSS, with a little bit of JavaScript thrown on top.
• 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.

Thanks to DC Web Women for organizing the event and Living Social for hosting us. Stay tuned for DC Web Women Code(Her) workshops on the second Tuesday of every month.