Responsive Design

Responsive Design Guides

A collection of collections of responsive design resources all across the web, mostly from people far smarter than me.

• This Is Responsive
  Brad Frost’s awesome collection of “patterns, resources and news for creating responsive web experiences.” Basically, if you go here, you don’t need to come to this page anymore.

My Talks

WordPress D.C.

I gave a talk about using responsive design with WordPress at the WordPress D.C. meetup on April 10, 2012.

• Slides from my presentation
• My talk recorded on USTREAM

WordCamp Baltimore

On September 8, I’ll was on a panel with John Hartley at WordCamp Baltimore. My portion of the presentation focussed on responsive navigation solutions.

• My slides for WordCamp Baltimore (plus, the whole deck combining John’s part of the talk with mine)

Resources

• Sass Responsive
  My nacent library of variables, mixins and formulas to help implement responsive web design when using Sass.

Blog Articles

Ready to get your feet wet? These blog posts and topics give a great overview of how to get into responsive design or even just why you should.

• A List Apart: Responsive Web Design
  The original Ethan Marcotte article that got this whole responsive design ball rolling.
• Think Vitamin: Beginner’s Guide to Responsive Web Design
  Think Vitamin has some great tutorials on website development, some free and some paid.
• Smashing Magazine “Responsive Design” Tag
  Every article on Smashing Magazine that’s been slapped with the “Responsive Design” tag. The list of articles there just keeps growing.
• An Event Apart: Responsive Design Workflow
  Notes from Luke Wroblewski on Sarah Parmenter’s presentation at An Event Apart Washington DC 
• Responsive News
  A blog about what’s happening in the responsive design world. (Last article dated April, 2012)
• The Web Developer Toolbox: Modernizr
  Part of a series of articles on what web developers need in order to build to get the job done. This article focusses on Modernizr, a useful tool in detecting a browser’s feature support.
• Create fluid layouts with HTML5 and CSS3
  An excerpt from Ben Frain’s book, Responsive Web Design with HTML5 and CSS3.
• This Is Responsive
  Not just a blog post, but a whole blog dedicated to “[sharing] the latest #rwd news and resources” as collected by Brad Frost and Pon Kattera from R/GA.
  
• A Dozen Questions for Mr Marcotte
  The Web Standardistas asked Ethan Marcotte, godfather of the responsive web design movement, 12 questions about web development in general, responsive design in particular, and some personal stuff along with.
• responsive web design: missing the point
  Source of the now-famous “This Is Not the Web” infographics, Brad gets to the point as to why designing a complete mobile experience really matters, whether that experience is responsive or not.
• Responsive Websites
  By Eric Wendelin, a good write up of some tools at your disposal, some of which I had never heard of, in building a responsive site.
• What We’ve Learned About Responsive Design
  By Christopher Butler from Newfangled Web Developers.
  
• New: Say Hello to the One-Size-Fits-All Website
  Even major publications such as Inc. magazine are recognizing that responsive web design is a “thing.”

Books

Ready to dive in head first? These books give great in-depth information about responsive design and related topics.

• Responsive WordPress Theming, Tracy F. Rotton, Manning Publications, 2013
  I’m currently writing a book on creating responsive WordPress themes.  Chapters one through three are currently available in Manning’s Early Access Program, and more chapters will be available in coming months.
• Responsive Design, Ethan Marcotte, A Book Apart, 2011
  A real how-to guide with plenty of illustrations and examples. Written primarily for front-end developers, it’s really the bible on how to pull off building your own responsive design sites.
• Mobile First, Luke Wroblewski, A Book Apart, 2011
  The statistics on how fast mobile is growing as a web browsing segment are crazy stupid. In his book, Luke makes a strong case for building your websites from the mobile size up, rather than desktop down.
• Code Poet: WordPress Meet Responsive Design
  The great new WordPress resource site and their free eBook by Chris Coyier, Ian Stewart and Sara Cannon.
• Responsive Web Design with HTML5 and CSS3
  From British technology writer and web developer, Ben Frain. See an excerpt of his book on .net Magazine.
• The Responsive Web
  A book in progress from Manning Publications, this title is available as part of their “MEAP” (Manning Early Access Program) where you can read the chapters as they are being written.

Responsive Design in the Wild

Who’s using responsive design? These sites are. Not all are WordPress, but some are.

• Smashing Magazine
  A WordPress site using responsive design.
• CSS Tricks
  Another fully-responsive WordPress site. Additionally, it’s the go-to resource for every kind of CSS trick and technique you can think of, from beginner to advanced to just plain insane.
• Boston Globe
  Launched with great fanfare in 2011, this was the first major, super-mainstream, heavy-traffic website to go responsive. It was built by the Filament Group, Ethan Marcotte’s web development firm. (Not a WordPress site.)
  
• Bank of America Campus Recruitment
  Also, not a WordPress site. But it’s awesome how many large corporations are embracing responsive design into their websites.
• University of Chicago
• RVLT/revolution
  This site defies description.
• Time
  And the onslaught of “mainstream” publications making the switch to responsive continues!
• Webdesigner Depot