SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
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/
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
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
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)
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
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/
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/
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/