A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
4. Responsive Web Design:
A collection of techniques that allow your
website to respond to the device that it is
being viewed on.
5. Responsive Web Design:
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.
28. Responsive web design offers us a way
forward, finally allowing us to “design for
the ebb and flow of things.”
- Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
39. 1. Start from scratch
2. Make an existing design
more responsive
40. 1. Start from scratch
2. Make an existing design
more responsive
41. 1. Start from scratch
2. Make an existing design
more responsive
42. download files for hands-on exercise here:
http://clarissapeterson.com/files/dcww/
open in your text editor: style.css
open in your browser: demo.html
43. If you’re doing this at home, please note that each
section of code is marked at the bottom of the slide with
an example number that you can look for in your
style.css file.
Example 1 in style.css like this
44. Older Browsers:
You need to do some extra stuff
to make all this work and we won’t
have time to get to it today.
(but make sure you learn it later)
147. Articles
Responsive Web Design - Ethan Marcotte (May 2010)
http://www.alistapart.com/articles/responsive-web-design/
How to Approach a Responsive Design (The Boston Globe) - Tito Bottitta (Jan. 2012)
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
50 Fantastic Tools for Responsive Web Design - Denise Jacobs, Peter Gasston (Apr. 2012)
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
Design Process In The Responsive Age - Drew Clemens (May 2012)
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Making of: People Magazine's Responsive Mobile Website (July 2012)
http://globalmoxie.com/blog/making-of-people-mobile.shtml
The Top Responsive Web Design Problems and How to Avoid Them - James Young (Aug. 2012)
http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
148. Websites
@RWD
links about responsive design (Ethan Marcotte)
https://twitter.com/RWD
Future Friendly
making things that are future-friendly
http://futurefriend.ly/
Brad Frost
blog that covers responsive design
http://bradfrostweb.com/blog/
Mediaqueri.es
inspirational websites using media queries and responsive web design
http://mediaqueri.es/
Responsive Design Bookmarklet
a handy tool for responsive design testing
http://responsive.victorcoulon.fr/
149. Other Things You Asked About
Resources mentioned during Q&A. Thanks for all the great questions!
Kristina Halvorson
Content Strategy for the Web, Second Edition (2012)
http://contentstrategy.com/
A List Apart
http://www.alistapart.com/
PX to EM Conversion Made Simple
http://pxtoem.com/
150. Not RWD
DC Web Women
A professional organization of more than 3000 members located in the Washington, DC, area.
Members are professional women, students and enthusiasts who specialize in web-related fields.
http://www.dcwebwomen.org/
We Are All Awesome
Be a role model: why there should be more female speakers at tech conferences. Resources on
creating presentations, getting ideas, writing proposals, and finding conferences with open CFPs.
http://weareallaweso.me/