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.

2. Design & User Experience
A Responsive Process
Presented by Dave Ruse

3. Dave Ruse
Web Designer
Phase2 Technology

5. A Responsive
Process
A Responsive
Process A Responsive
Process
A
Responsive
Process

7. Nearly 7 percent of all online purchases were
made 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

8. http://www.flickr.com/photos/kenleewrites/4770358603/

9. “
The role of the designer, is
that of a very good, thoughtful
host, all of whose energy goes
into trying to anticipate the
needs of his guests.
Charles Eames

16. This changes everything
a lot.

17. Setting the Stage

18. Within your
project team.
http://www.flickr.com/photos/elstudio/3532534210/

19. http://farm3.staticflickr.com/2220/2520224926_3cc57b

20. http://www.flickr.com/photos/alismith44/269843032/

21. Copy

24. Check out the links in IMPORTANT LINKS
Here’s a link
the sidebar for more Another link
So many links
information.

25. Check out the links in
the sidebar for more
information.
IMPORTANT LINKS
Here’s a link
Another link
So many links

26. Use Caution When
Hiding Content

30. Images

32. Video

34. Ads

36. Wireframes

37. Prototype

38. http://dropbox.headscapedev.com/projects/wireframes/demo.htm

39. http://dropbox.headscapedev.com/projects/wireframes/demo.htm

40. Design

41. “
The tool doesn’t make
the craftsman.
Oliver Reichenstein

42. Style Tiles

44. or

45. and

46. FIDELITY FLEXIBILITY

49. Internal Reviews

50. Development

51. Drupal

52. Testing

55. Bandwidth
http://www.flickr.com/photos/magicdaddy/3679257428/

56. Handoff
http://www.flickr.com/photos/denverjeffrey/3989287247/

60. http://www.flickr.com/photos/stevendepolo/5749192621/

61. Thanks!
@daveruse

62. ?

63. Resources
Responsive Web Design - Ethan Marcotte
http://www.abookapart.com/products/responsive-web-design
Mobile First - Luke Wroblewski
http://www.abookapart.com/products/mobile-first
Responsive Text - Frankie Roberto
http://www.frankieroberto.com/responsive_text
Responsive Video - Fitvid.js
http://fitvidsjs.com/
Ads and Responsive Web Design
http://blog.jonphillips.ca/2012/01/17/ads-and-responsive-web-design/
Wireframes in the Browser
http://dropbox.headscapedev.com/projects/wireframes/demo.htm
Style Tiles
http://www.styletil.es

64. BBC Style Guide
http://www.bbc.co.uk/gel/
Death of a Cut Up Man - Josh Cooper
http://www.agileapproach.com/blog-entry/death-of-a-cut-up-man
Test on Real Mobile Devices Without Breaking the Bank - Brad Frost
http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
Strategies for Choosing Test Devices
http://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.php
Limit Bandwidth to Your Mac/PC
http://osxdaily.com/2009/08/19/limit-connection-bandwidth-with-speedlimit/
http://www.netlimiter.com/
Starbucks Style Guide
http://www.starbucks.com/static/reference/styleguide/

65. What did you think?
Locate this session on the
DrupalCon Denver website
http://denver2012.drupal.org/program
Click the “Take the Survey” link.
Thank You!