Slidecast: RWD Introduction & Workflow Overview

2012.10.22

(Note: The audio sync is a little off for some sequences as slideshare's tools aren't all that precise)

Summary

Responsive Design is a way of making a single website that works well on mobile, tablet and desktop browsers. Back in 2010 Ethan Marcotte, first coined the term "responsive design" and described it as having 3 components:

  • Flexible Images
  • Fluid Grids
  • CSS Media Queries

Well it seems Ethan let quite a few cats out of the bag with this one and we've been trying to herd those cats ever since.

What started as exclusively a front-end web design technique has expanded to include a whole new range of both front-end and server-side programming techniques. The real challenge came when we also suddenly discovered that tried and true practices for project management and creative concept development started to fall apart. It’s not practical to create photoshop mockups of ever page in a site at every device size - there’s simply too many variables to account for in graphic design software.

Responsive Design requires a new process for creating websites and new ways of interacting with teams and clients.

This presentation will outline a birds-eye-view of Responsive Techniques, Strategies, Tools, and Gotchas of RWD. It will focus on some of the new workflow techniques needed and cover some suggestions on how to learn more.

 

Comments

What started as particularly a front side end web design technique has prolonged to involve a whole new wide range of both front side part end and server-side growth techniques.
There is simply too many factors to consideration for in graphics software.
What began as specifically a front-end web style strategy has extended to consist of a whole new range of both front-end and server-side growth methods.
I loved this stuff. I was just wondering if this would all work when creating an LMS? Plus when someone takes your course will they be responsive as well to the method used to take the course?
Brent Gregson - February 12, 2014
Two decades ago Ethan Marcotte had written Sensitive Web Style for A Record Apart in what would become one of the most discussed methods in the market - ever. Let's just ignore the buzz around responsive web design for a moment and determine if this is actually a value while concept from a company viewpoint.
Nice article on responsive design. Thanks!
As a responsive web designer this post is very informative for me. I will try adobe-edge and hope that it will make my work easier. Thanks for the post.
As a responsive web designer this post is very informative for me. I will try adobe-edge and hope that it will make.
Having a distinct mobile and/or tablet version is a good choice when you want to have total control of the content, even at the expense of added cost and time. This option has some key strengths over the others, and is a great option for sites with a high level of mobile traffic.
Having a distinct mobile and/or tablet version is a good choice when you want to have total control.
First of аll I would like tо saу aweѕomе blog!I had a quick question which І’d like to ask if you don’t mind.
First of аll I would like tо saу aweѕomе blog!I had a quick question which І’d like to ask if you don’t mind.

Share

Author

Aidan Foster

Responsive design expert & owner of Foster Interactive, a Drupal focused studio based in Toronto, Canada.

If you like this post please share it.

Follow @finteractive on twitter

Additional Info

Originally Presented Oct 2012 at the HTML5 Toronto Web Developers meetup to a mixed audience of developers, designers, and project planners.

Slide Summary

1-25: History of Responsive Design
26-50: Coding Basics (Developer Focused) 
51-57: Progressive Enhancement
58-70: Mobile First
71-93: Responsive Workflows
96-99: Selling Responsive Design