Speaker: Matt Haff
Twitter: @CWSites
Presentation Slides: Download PDF
Original Post: What You Should Know About Responsive Web Design

What is Responsive Web Design?

… an evolutionary milestone in the development of web and interaction design as a practice and as an industry.

Jeffery Zeldman

“[The web] should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.”

Tim Berners-Lee

“If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design, Responsive Web Design is web design, done right.”

Andy Clarke

Doing It Right

• Accessibility
• Web Standards
• User Interaction
• Meet the user where they are – mobile or stationary
• Allow for consumption of content
• Keep in mind there is no silver bullet

What To Tell Your Boss

• SEO – Google has specifically said that responsive design “is Google’s recommended configuration.”
• Easier to Maintain – you only write content once and it is published across every platform, not to mention it’s future friendly
• Content Consumption – make it easier for the customer to get to the content that they’re looking for.

Design With The User In Mind

Reading Experience

• What is the user trying to accomplish?
• Content should fit the screen
• Change the navigation to make it easier for the user
• Don’t strip content, the same information should be accessible across all devices, just change how they access it

“Mobile users will do anything & everything that desktop users will do provided it’s presented in a usable way. Assuming people on mobile “won’t do that” is a losing proposition. Don’t penalize users with missing content & features just because they aren’t on a full screen.”

Brad Frost

“Design is thinking about content and how to put it together. you need to focus on the whole. layout does not equal design.”

Luke Wrobleski

User Experience

• Is what you’re doing common practice or do different devices have different user experiences?
• Attention to details – size of links for touch
• Is it necessary? Everything should have a purpose.
• What is “above the fold” on different devices.
• Cursor vs. Touch – some blackberries still use cursors.

Navigation

• Commonly accepted main navigation is a slide-down menu
• Must be accessible, intuitive, common practice
• Does it work on the smallest screen?
• Don’t make it so long that a user is forced to scroll.

The Way It Was Meant To Be

• RWD = WDDR
• HTML & CSS has always been responsive.
• UX is about meeting the needs of the user.
• Creating websites that adjust to different screens and devices is just the beginning.

Sources

• http://stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_design/
• http://www.scientificamerican.com/article.cfm?id=long-live-the-web
• http://www.copyblogger.com/mobile-responsive-design-benefits/
• http://www.lukew.com/ff/entry.asp?1304
• http://bradfrostweb.com/
• http://www.webdesignerdepot.com/2013/01/the-new-rules-of-the-responsive-web/

Stay Hungry My Friends!

• http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
• http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/
• http://www.smashingmagazine.com/2013/02/25/there-is-no-mobile-internet/
• http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
• http://www.getfinch.com/2011/08/its-not-responsive-web-building-its-responsive-web-design/
• http://www.hongkiat.com/blog/free-responsive-wordpress-themes/