Your SlideShare is downloading. ×

A Responsive Process

1,883
views

Published on

How responsive web design affects your entire project process.

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,883
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A Responsive ProcessDave Ruse
  • 2. Hi, I’m Dave.Web DesignerPhase2 Technology @daveruse
  • 3. “...design that can respond to theconstraints of the browser window ordevice that renders it.Ethan Marcotte
  • 4. Responsive Web Design• Flexible Grid• Flexible Media• Media Queries
  • 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. http://www.flickr.com/photos/kenleewrites/4770358603/
  • 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. Education
  • 9. Setting the Stage
  • 10. Within yourproject team. http://www.flickr.com/photos/elstudio/3532534210/
  • 11. http://farm3.staticflickr.com/2220/2520224926_3cc57b
  • 12. http://www.flickr.com/photos/sonictk/376526369/
  • 13. Content
  • 14. Copy
  • 15. Device Agnostic
  • 16. Check out the links in IMPORTANT LINKS Here’s a linkthe sidebar for more Another link So many linksinformation.
  • 17. Check out the links inthe sidebar for moreinformation.IMPORTANT LINKSHere’s a linkAnother linkSo many links
  • 18. No Hiding
  • 19. Images
  • 20. Video
  • 21. UX
  • 22. Prototypes
  • 23. http://dropbox.headscapedev.com/projects/wireframes/demo.htm
  • 24. Visual Design
  • 25. Style Tiles
  • 26. www.styletil.es
  • 27. Style Tiles
  • 28. Design Comps
  • 29. or
  • 30. and
  • 31. FIDELITY FLEXIBILITY
  • 32. “The tool doesn’t make the craftsman.Oliver Reichenstein
  • 33. Style Guides
  • 34. Internal Reviews Title
  • 35. Development
  • 36. Testing
  • 37. “If you think responsive’s simple I feelbad for you son. We got 99 breakpoints,but the iPhone’s just one.@jbrewer
  • 38. http://www.flickr.com/photos/magicdaddy/3679257428/
  • 39. Handoff
  • 40. http://www.flickr.com/photos/stevendepolo/5749192621/
  • 41. Thanks! @daveruse
  • 42. ?
  • 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. 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. 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/