A Responsive ProcessDave Ruse
Hi, I’m Dave.Web DesignerPhase2 Technology   @daveruse
“...design that can respond to theconstraints of the browser window ordevice that renders it.Ethan Marcotte
Responsive Web Design• Flexible Grid• Flexible Media• Media Queries
Nearly 7 percent of all online purchases weremade using iPads, just 18 months after the tablet    computers were released ...
http://www.flickr.com/photos/kenleewrites/4770358603/
“The role of the designer, is that of a verygood, thoughtful host, all of whoseenergy goes into trying to anticipate thene...
Education
Setting the Stage
Within yourproject team.                http://www.flickr.com/photos/elstudio/3532534210/
http://farm3.staticflickr.com/2220/2520224926_3cc57b
http://www.flickr.com/photos/sonictk/376526369/
Content
Copy
Device Agnostic
Check out the links in   IMPORTANT LINKS                         Here’s a linkthe sidebar for more     Another link       ...
Check out the links inthe sidebar for moreinformation.IMPORTANT LINKSHere’s a linkAnother linkSo many links
No Hiding
Images
Video
UX
Prototypes
http://dropbox.headscapedev.com/projects/wireframes/demo.htm
Visual Design
Style Tiles
www.styletil.es
Style Tiles
Design Comps
or
and
FIDELITY   FLEXIBILITY
“The tool doesn’t make the craftsman.Oliver Reichenstein
Style Guides
Internal Reviews   Title
Development
Testing
“If you think responsive’s simple I feelbad for you son. We got 99 breakpoints,but the iPhone’s just one.@jbrewer
http://www.flickr.com/photos/magicdaddy/3679257428/
Handoff
http://www.flickr.com/photos/stevendepolo/5749192621/
Thanks!  @daveruse
?
ResourcesResponsive Web Design - Ethan Marcottehttp://www.abookapart.com/products/responsive-web-designMobile First - Luke...
Wireframes in the Browserhttp://dropbox.headscapedev.com/projects/wireframes/demo.htmStyle Tileshttp://www.styletil.esBBC ...
How Much Does A One-Second Page Load Delay Cost?http://www.readwriteweb.com/archives/infographic_how_much_does_a_one-secon...
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
A Responsive Process
Upcoming SlideShare
Loading in...5
×

A Responsive Process

1,927

Published on

How responsive web design affects your entire project process.

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,927
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

A Responsive Process

  1. 1. A Responsive ProcessDave Ruse
  2. 2. Hi, I’m Dave.Web DesignerPhase2 Technology @daveruse
  3. 3. “...design that can respond to theconstraints of the browser window ordevice that renders it.Ethan Marcotte
  4. 4. Responsive Web Design• Flexible Grid• Flexible Media• Media Queries
  5. 5. Nearly 7 percent of all online purchases weremade using iPads, just 18 months after the tablet computers were released by Apple Inc. http://www.businessinsider.com/online-shopping-jumps-164-pct-on-christmas-day-2011-12 22-25% of US and UK mobile Internet browsers never or infrequently use the desktop Internet. http://www.lukew.com/ff/entry.asp?1405 1.45M devices shipped per day - 317,124 births http://www.lukew.com/ff/entry.asp?1506
  6. 6. http://www.flickr.com/photos/kenleewrites/4770358603/
  7. 7. “The role of the designer, is that of a verygood, thoughtful host, all of whoseenergy goes into trying to anticipate theneeds of his guests.Charles Eames
  8. 8. Education
  9. 9. Setting the Stage
  10. 10. Within yourproject team. http://www.flickr.com/photos/elstudio/3532534210/
  11. 11. http://farm3.staticflickr.com/2220/2520224926_3cc57b
  12. 12. http://www.flickr.com/photos/sonictk/376526369/
  13. 13. Content
  14. 14. Copy
  15. 15. Device Agnostic
  16. 16. Check out the links in IMPORTANT LINKS Here’s a linkthe sidebar for more Another link So many linksinformation.
  17. 17. Check out the links inthe sidebar for moreinformation.IMPORTANT LINKSHere’s a linkAnother linkSo many links
  18. 18. No Hiding
  19. 19. Images
  20. 20. Video
  21. 21. UX
  22. 22. Prototypes
  23. 23. http://dropbox.headscapedev.com/projects/wireframes/demo.htm
  24. 24. Visual Design
  25. 25. Style Tiles
  26. 26. www.styletil.es
  27. 27. Style Tiles
  28. 28. Design Comps
  29. 29. or
  30. 30. and
  31. 31. FIDELITY FLEXIBILITY
  32. 32. “The tool doesn’t make the craftsman.Oliver Reichenstein
  33. 33. Style Guides
  34. 34. Internal Reviews Title
  35. 35. Development
  36. 36. Testing
  37. 37. “If you think responsive’s simple I feelbad for you son. We got 99 breakpoints,but the iPhone’s just one.@jbrewer
  38. 38. http://www.flickr.com/photos/magicdaddy/3679257428/
  39. 39. Handoff
  40. 40. http://www.flickr.com/photos/stevendepolo/5749192621/
  41. 41. Thanks! @daveruse
  42. 42. ?
  43. 43. ResourcesResponsive Web Design - Ethan Marcottehttp://www.abookapart.com/products/responsive-web-designMobile First - Luke Wroblewskihttp://www.abookapart.com/products/mobile-firstResponsive Text - Frankie Robertohttp://www.frankieroberto.com/responsive_textResponsive Video - Fitvid.jshttp://fitvidsjs.com/Ads and Responsive Web Designhttp://blog.jonphillips.ca/2012/01/17/ads-and-responsive-web-design/
  44. 44. Wireframes in the Browserhttp://dropbox.headscapedev.com/projects/wireframes/demo.htmStyle Tileshttp://www.styletil.esBBC Style Guidehttp://www.bbc.co.uk/gel/Test on Real Mobile Devices Without Breaking the Bank - Brad Frosthttp://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/Strategies for Choosing Test Deviceshttp://stephanierieger.com/strategies-for-choosing-test-devices/
  45. 45. How Much Does A One-Second Page Load Delay Cost?http://www.readwriteweb.com/archives/infographic_how_much_does_a_one-second_page_load_d.phpLimit Bandwidth to Your Mac/PChttp://osxdaily.com/2009/08/19/limit-connection-bandwidth-with-speedlimit/http://www.netlimiter.com/Starbucks Style Guidehttp://www.starbucks.com/static/reference/styleguide/
  1. A particular slide catching your eye?

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

×