Responsive Web Design A collection of techniques that allowyour website to respond to the device that it is being viewed on.
Responsive Web Design A collection of techniques that allowyour website to respond to the device that it is being viewed on.This allows all users to have an optimal experiencewithout creating separate sites for different devices.
1. Start from scratch2. Make an existing design more responsive
download ﬁles for hands-on exercise here:clarissapeterson.com/ﬁles/dcww/open in your text editor: style.cssopen in your browser: demo.html
If you’re doing this at home, please note that eachsection of code is marked at the bottom of the slide withan example number that you can look for in yourstyle.css ﬁle.Example 1 in style.css like this
Older Browsers: Some of this won’t work in olderbrowsers, so you’ll need to do some extra stuff to make it work. (read the book....)
1. A ﬂexible, grid-based layout2. Flexible images and media3. Media queries
BooksEthan MarcotteResponsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/Luke WroblewskiMobile First (2011)http://www.abookapart.com/products/mobile-ﬁrst
ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/How to Approach a Responsive Design (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-designDesign Process In The Responsive Age - Drew Clemens (May 2012)http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/Making of: People Magazines Responsive Mobile Website (July 2012)http://globalmoxie.com/blog/making-of-people-mobile.shtml3 Types of Solutions To Work With Responsive Images - Steven Bradley (July 2012)http://www.vanseodesign.com/web-design/responsive-images/
More ArticlesThe 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-themPresidential Smackdown Edition: Separate Mobile Website Vs. Responsive Website - Brad Frost (Aug. 2012)http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/Responsive Design Case Study (South Tees Hospitals NHS Foundation Trust) - Matt Berridge (Aug. 2012)http://builtbyboon.com/blog/responsive-design-case-study MiscellaneousSomeone asked how I measure things on the screen:MeasureIt (Firefox add-on)https://addons.mozilla.org/en-US/ﬁrefox/addon/measureit/
Websites@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWDFuture Friendlymaking things that are future-friendlyhttp://futurefriend.ly/Brad Frostblog that covers responsive designhttp://bradfrostweb.com/blog/Mediaqueri.esinspirational websites using media queries and responsive web designhttp://mediaqueri.es/
Other InformationDC Web WomenA 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 ﬁelds.http://www.dcwebwomen.org/We Are All AwesomeBe a role model: why there should be more female speakers at tech conferences. Resources oncreating presentations, getting ideas, writing proposals, and ﬁnding conferences with open CFPs.http://weareallaweso.me/
Mount Rainier. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Thank You Clarissa Petersonclarissapeterson.email@example.com @clarissa
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.