A Responsive Project Process

  • 2,226 views
Uploaded on

We'll go beyond the ems, percentages and media queries by sharing how responsive design has affected how we approach and practice analysis, content, wireframes, design, testing and site delivery from …

We'll go beyond the ems, percentages and media queries by sharing how responsive design has affected how we approach and practice analysis, content, wireframes, design, testing and site delivery from a more holistic point of view. Presented by Dave Ruse.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,226
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
41
Comments
0
Likes
2

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. Design & User ExperienceA Responsive Process Presented by Dave Ruse
  • 2. Dave RuseWeb DesignerPhase2 Technology
  • 3. A Responsive ProcessA ResponsiveProcess A Responsive Process A Responsive Process
  • 4. Nearly 7 percent of all online purchases were made using iPads, just 18 months after thetablet computers were released by Apple Inc. http://www.businessinsider.com/online-shopping-jumps-164-pct-on-christmas-day-2011-1222-25% of US and UK mobile Internet browsersnever or infrequently use the desktop Internet. http://www.lukew.com/ff/entry.asp?14051.45M devices shipped per day - 317,124 births http://www.lukew.com/ff/entry.asp?1506
  • 5. http://www.flickr.com/photos/kenleewrites/4770358603/
  • 6. “The role of the designer, isthat of a very good, thoughtfulhost, all of whose energy goesinto trying to anticipate theneeds of his guests.Charles Eames
  • 7. This changes everythinga lot.
  • 8. Setting the Stage
  • 9. Within yourproject team. http://www.flickr.com/photos/elstudio/3532534210/
  • 10. http://farm3.staticflickr.com/2220/2520224926_3cc57b
  • 11. http://www.flickr.com/photos/alismith44/269843032/
  • 12. Copy
  • 13. Check out the links in IMPORTANT LINKS Here’s a linkthe sidebar for more Another link So many linksinformation.
  • 14. Check out the links inthe sidebar for moreinformation.IMPORTANT LINKSHere’s a linkAnother linkSo many links
  • 15. Use Caution WhenHiding Content
  • 16. Images
  • 17. Video
  • 18. Ads
  • 19. Wireframes
  • 20. Prototype
  • 21. http://dropbox.headscapedev.com/projects/wireframes/demo.htm
  • 22. http://dropbox.headscapedev.com/projects/wireframes/demo.htm
  • 23. Design
  • 24. “The tool doesn’t makethe craftsman.Oliver Reichenstein
  • 25. Style Tiles
  • 26. or
  • 27. and
  • 28. FIDELITY FLEXIBILITY
  • 29. Internal Reviews
  • 30. Development
  • 31. Drupal
  • 32. Testing
  • 33. Bandwidth http://www.flickr.com/photos/magicdaddy/3679257428/
  • 34. Handoff http://www.flickr.com/photos/denverjeffrey/3989287247/
  • 35. http://www.flickr.com/photos/stevendepolo/5749192621/
  • 36. Thanks!@daveruse
  • 37. ?
  • 38. 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/Wireframes in the Browserhttp://dropbox.headscapedev.com/projects/wireframes/demo.htmStyle Tileshttp://www.styletil.es
  • 39. BBC Style Guidehttp://www.bbc.co.uk/gel/Death of a Cut Up Man - Josh Cooperhttp://www.agileapproach.com/blog-entry/death-of-a-cut-up-manTest 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/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/
  • 40. What did you think? Locate this session on the DrupalCon Denver websitehttp://denver2012.drupal.org/program Click the “Take the Survey” link. Thank You!