Responsive Web Design
How and Why
Back in my day…
When life was simple
And Then Came The One
January 9, 2007
Mobile internet adoption has outpaced
desktop internet adoption by eight times
 http://www.morganstanley.com/institution...
Innovation & Transition
2010 iPad – 3 million sold in 80 days
iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”
Today
iPhone 5
sold 5 Million on first day
2 Million in first 24 hours
Over 210 Million
Android Activations in 2013
The long and short of it is that we’re
designing for more devices, more
input types, more resolutions than
ever before. Th...
Mobile
Mobile
It’s Not About
It’s About the Web
How do you design a
web site that works well
on all devices?
1. Design for the Desktop
2. Separate Mobile Site
3. Native Mobile App
4. Responsive Design
Options
Desktop Design
Separate Mobile Design
One site to rule them all
It’s what some of us were going
for with “liquid” web design back
in the 1990s, only it doesn’t suck.
–Jeffrey Zeldman
Res...
One site, multiple devices
One site, multiple devices
• Consistent Experience
• Content Parity
• No Zooming
• Single Code Base (also for CMS users, one login)
• Device Agnostic...
• Context of Use
• Speed/bandwidth
• Advertising
• Workflow
• Project Management
Disadvantages of Responsive Design
“It’s not like our industry nailed web design
before we started responsive design. It’s still a
work in progress.”
- Dan W...
• Content sites vs. transactional sites
• Context of use
• Resources
• CMS
• Don’t do a native app just because the
client...
• Device/browser support
• Test on real devices
• Test in real-life, everyday scenarios
• Speed/bandwidth
• Small-screen f...
A flexible, grid-based layout
Flexible images and media
Media queries, a module from the CSS3
specification.
The Ingredien...
Design Process
Design
Develop
Content Parity
Content Parity
Content Parity
Content Parity
Content Parity
The beauty of the web is its openness.
Don’t arbitrarily lock people out because
of browser, device or configuration.
- Br...
Context of Use
Context of Use
Mobile First
Mobile use case: I just transferred money
at my desk using my phone because
logging into my banking app requires
fewer ste...
Make it work better for everybody.
Some Examples
Some Examples
Some Examples
Some Examples
Clean out the clutter
Give Everybody the same content
Displayed appropriately for their device
No Matter what device they have
Responsive Web De...
Start with Content
Style Tiles
Communicate the
essence of a visual brand
for the web
Mostly Fluid
Column Drop
Layout Shifter
Off Canvas
Style Tiles
Style Tiles
Breakpoints
Set breakpoints according to the content
Device Breakpoints
Device Class Breakpoints
Natural Breakpoints
320px? 480px? WTF!
Break at the specific device width. DON...
Frameworks
http://foundation.zurb.com/
http://foundation.zurb.com/grid-example1.php
http://www.zurb.com/soapbox
• Bootstrap
• Skeleton
• 320 and UP
• SimpleGrid
• Semantic Grid System
• Frameless (Kind of)
• HTML5 Boilerplate
• Golden...
Wireframes and Prototyping
Navigation Patterns
http://bradfrost.github.com/this-is-responsive/patterns.html
Navigation Patterns
Top Navigation
Footer Anchor
Navigation Patterns
Toggle Navigation
Navigation Patterns
Left Nav Flyout
Navigation Patterns
Three-Dimensional Menu
Content, Content, Content
• Ethan Marcotte’s article that coined the term
http://www.alistapart.com/articles/responsive-web-design/
• Responsive Web...
• The article that started it all, by Ethan Marcotte:
– http://www.alistapart.com/articles/responsive-web-design/
• Fluid ...
• @rdoddlm – follow me on Twitter
• me@ryandoddcs.com or rdodd@siteworx.com
• Linkedin
Where to find me
Questions?
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Responsive Web Design - Why and How
Upcoming SlideShare
Loading in...5
×

Responsive Web Design - Why and How

701

Published on

This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
701
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design - Why and How

  1. 1. Responsive Web Design How and Why
  2. 2. Back in my day…
  3. 3. When life was simple
  4. 4. And Then Came The One
  5. 5. January 9, 2007
  6. 6. Mobile internet adoption has outpaced desktop internet adoption by eight times  http://www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html AT&T, the exclusive carrier for Apple's iPhone, saw a 4,932% increase in mobile traffic data in the since the iPhone’s launch.  http://www.lukew.com/ff/entry.asp?933 Smartphone sales surpassed worldwide PC sales by the end of 2011  http://www.pcworld.com/article/171380/ Does Mobile Matter?
  7. 7. Innovation & Transition
  8. 8. 2010 iPad – 3 million sold in 80 days
  9. 9. iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”
  10. 10. Today
  11. 11. iPhone 5 sold 5 Million on first day 2 Million in first 24 hours
  12. 12. Over 210 Million Android Activations in 2013
  13. 13. The long and short of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back. – Ethan Marcotte Beyond the desktop
  14. 14. Mobile
  15. 15. Mobile It’s Not About It’s About the Web
  16. 16. How do you design a web site that works well on all devices?
  17. 17. 1. Design for the Desktop 2. Separate Mobile Site 3. Native Mobile App 4. Responsive Design Options
  18. 18. Desktop Design
  19. 19. Separate Mobile Design
  20. 20. One site to rule them all
  21. 21. It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. –Jeffrey Zeldman Responsive Web Design
  22. 22. One site, multiple devices
  23. 23. One site, multiple devices
  24. 24. • Consistent Experience • Content Parity • No Zooming • Single Code Base (also for CMS users, one login) • Device Agnostic • URL Management Advantages of Responsive Design
  25. 25. • Context of Use • Speed/bandwidth • Advertising • Workflow • Project Management Disadvantages of Responsive Design
  26. 26. “It’s not like our industry nailed web design before we started responsive design. It’s still a work in progress.” - Dan Willis @uxcrank
  27. 27. • Content sites vs. transactional sites • Context of use • Resources • CMS • Don’t do a native app just because the client wants one How do you choose?
  28. 28. • Device/browser support • Test on real devices • Test in real-life, everyday scenarios • Speed/bandwidth • Small-screen first • Let content determine design • Let design determine breakpoints • Consider UX and Business goals first • Communicate with your clients • Responsive workflow Things to Consider
  29. 29. A flexible, grid-based layout Flexible images and media Media queries, a module from the CSS3 specification. The Ingredients
  30. 30. Design Process
  31. 31. Design Develop
  32. 32. Content Parity
  33. 33. Content Parity
  34. 34. Content Parity
  35. 35. Content Parity
  36. 36. Content Parity
  37. 37. The beauty of the web is its openness. Don’t arbitrarily lock people out because of browser, device or configuration. - Brad Frost
  38. 38. Context of Use
  39. 39. Context of Use
  40. 40. Mobile First
  41. 41. Mobile use case: I just transferred money at my desk using my phone because logging into my banking app requires fewer steps.
  42. 42. Make it work better for everybody.
  43. 43. Some Examples
  44. 44. Some Examples
  45. 45. Some Examples
  46. 46. Some Examples
  47. 47. Clean out the clutter
  48. 48. Give Everybody the same content Displayed appropriately for their device No Matter what device they have Responsive Web Design
  49. 49. Start with Content
  50. 50. Style Tiles Communicate the essence of a visual brand for the web
  51. 51. Mostly Fluid
  52. 52. Column Drop
  53. 53. Layout Shifter
  54. 54. Off Canvas
  55. 55. Style Tiles
  56. 56. Style Tiles
  57. 57. Breakpoints Set breakpoints according to the content
  58. 58. Device Breakpoints Device Class Breakpoints Natural Breakpoints 320px? 480px? WTF! Break at the specific device width. DON’T DO THIS!! Identify your most important device widths, classify the devices and set the breakpoints BETWEEN them. Define breakpoints where your layout breaks. Also define breakpoints where you need a layout change due to space limitations.
  59. 59. Frameworks http://foundation.zurb.com/
  60. 60. http://foundation.zurb.com/grid-example1.php
  61. 61. http://www.zurb.com/soapbox
  62. 62. • Bootstrap • Skeleton • 320 and UP • SimpleGrid • Semantic Grid System • Frameless (Kind of) • HTML5 Boilerplate • Golden Grid System Other Frameworks
  63. 63. Wireframes and Prototyping
  64. 64. Navigation Patterns
  65. 65. http://bradfrost.github.com/this-is-responsive/patterns.html
  66. 66. Navigation Patterns Top Navigation
  67. 67. Footer Anchor
  68. 68. Navigation Patterns Toggle Navigation
  69. 69. Navigation Patterns Left Nav Flyout
  70. 70. Navigation Patterns Three-Dimensional Menu
  71. 71. Content, Content, Content
  72. 72. • Ethan Marcotte’s article that coined the term http://www.alistapart.com/articles/responsive-web-design/ • Responsive Web Design, the book http://www.abookapart.com/products/responsive-web-design • Fluid Images, by Ethan Marcotte (Chapter 3 of the book) http://www.alistapart.com/articles/fluid-images/ • Fluid Grids, by Ethan Marcotte http://www.alistapart.com/articles/fluidgrids/ • Responsive Web Design, another article by Ethan Marcotte http://www.netmagazine.com/features/responsive-web-design • CSS3 Media Queries http://webdesignerwall.com/tutorials/css3-media-queries • Mediaqueries.es, a list of sites using Responsive Web Design techniques http://mediaqueri.es/ Resources
  73. 73. • The article that started it all, by Ethan Marcotte: – http://www.alistapart.com/articles/responsive-web-design/ • Fluid Images by Ethan Marcotte: – http://unstoppablerobotninja.com/entry/fluid-images • IE8 and below Media Queries fix: – http://code.google.com/p/css3-mediaqueries-js/ • IE6 min/max-width hack: – http://www.cameronmoll.com/archives/000892.html • Fluid Grids by Ethan Marcotte: – http://www.alistapart.com/articles/fluidgrids/ • Media Queries reference, list of Media Query selectors available: – http://www.w3.org/TR/css3-mediaqueries/ • Responsive Typesetting: – http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html Resources
  74. 74. • @rdoddlm – follow me on Twitter • me@ryandoddcs.com or rdodd@siteworx.com • Linkedin Where to find me
  75. 75. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×