Down the Rabbit Hole - Be Responsive November 2013 Presentation

669 views

Published on

Sharing the design and development techniques used to rebuild yellowpages.com.au responsively

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

  • Be the first to like this

No Downloads
Views
Total views
669
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Down the Rabbit Hole - Be Responsive November 2013 Presentation

  1. 1. DOWN THE RABBIT HOLE Thursday, November 14, 13
  2. 2. TYPICAL CYCLE Idea Thursday, November 14, 13 Design Build
  3. 3. TYPICAL CYCLE Sales Product Idea Design Brand Build Legal Marketing Thursday, November 14, 13 User Testing
  4. 4. JUST FOR FIXED WIDTH Thursday, November 14, 13
  5. 5. AND IF THERE ARE MORE... Thursday, November 14, 13
  6. 6. TIME AND UNKNOWNS • Do we create compositions for all different permutations just to get a sign off? (a lot of time needed) • Will it work on the device? (unknowns) Thursday, November 14, 13
  7. 7. DESIGN APPROACH • Just in time Design • Done • Layered just before the development team needs it Design • Skeleton • Muscle • Skin - Initial design work, think Layout - Content to fit in Layout - Visual Design Thursday, November 14, 13
  8. 8. SKELETON Thursday, November 14, 13
  9. 9. PAGE FLOWS Home Search Results Recently Updated Thursday, November 14, 13 Details
  10. 10. PRIORITIZE YOUR CONTENT Thursday, November 14, 13
  11. 11. PAGE LAYOUT Thursday, November 14, 13
  12. 12. THE SIGN OFF Biz Rep Proposed Solution UX Thursday, November 14, 13 Dev
  13. 13. Idea Design Build VS Idea Skeleton Design Build Design Build... Thursday, November 14, 13
  14. 14. THE DESIGN (MUSCLE & SKIN) Thursday, November 14, 13
  15. 15. FILLING IN THE SKELETON Results Page Search Bar Thursday, November 14, 13 Map Filter Menu etc
  16. 16. THE SEARCH BAR Thursday, November 14, 13
  17. 17. TAKE 2 Thursday, November 14, 13
  18. 18. INACTIVE SEARCH BAR Thursday, November 14, 13
  19. 19. ACTIVE STATE Thursday, November 14, 13
  20. 20. ACTIVE STATE Thursday, November 14, 13
  21. 21. LANDSCAPE FAIL! Thursday, November 14, 13
  22. 22. PROBLEM • The sketches were good to allow us to make a decision on a proposal of an idea, but we were missing: • The interaction of the idea on the actual device (ie. what happens when the keyboard appears on landscape) • The actual spacing of the elements on page (ie. when padding, margins and actual graphics were used the space issue comes up immediately) Thursday, November 14, 13
  23. 23. LANDSCAPE - TAKE 2 Thursday, November 14, 13
  24. 24. REFINING THE DESIGN PHASE Prototype Analysis Sketches Build Visual Design Thursday, November 14, 13
  25. 25. A COUPLE OF NOTES • Prototype is useful when: • there is user interactions (input field, youtube video, etc) • there is uncertainty around page layout/reflows • Visual designs is obviously a must for the build. Thursday, November 14, 13
  26. 26. THE BUILD Thursday, November 14, 13
  27. 27. THE DETAILS PAGE • Based on content priority: • Business name • Address • Contacts • Map • Opening Thursday, November 14, 13 hours
  28. 28. REFLOWING TO LARGE Thursday, November 14, 13
  29. 29. REFLOWING TO LARGE Thursday, November 14, 13
  30. 30. REFLOWING TO LARGE Thursday, November 14, 13
  31. 31. TESTING LAYOUT SHIFT Thursday, November 14, 13
  32. 32. OUTCOME • Test page will exercise all breakpoints to ensure coverage • iframe to trigger mediaquery breakpoint • screenshot • Makes Thursday, November 14, 13 capture to ensure no regressions HTML/CSS refactorable
  33. 33. UI INTEGRATION TESTING Thursday, November 14, 13
  34. 34. LEGO BLOCKS • Made use of OOCSS techniques to build a library of components • Made these components intrinsically responsive • Building pages will just be a matter of composing these elements Thursday, November 14, 13
  35. 35. SLIDER BLOCK Thursday, November 14, 13
  36. 36. SLIDER BLOCK Thursday, November 14, 13
  37. 37. SLIDER REUSE Thursday, November 14, 13
  38. 38. SLIDER REUSE Thursday, November 14, 13
  39. 39. LIGHTBOX MODAL BLOCK Thursday, November 14, 13
  40. 40. LIGHTBOX MODAL BLOCK Thursday, November 14, 13
  41. 41. LIGHTBOX MODAL REUSE Thursday, November 14, 13
  42. 42. LIGHTBOX MODAL REUSE Thursday, November 14, 13
  43. 43. OUTCOMES Thursday, November 14, 13
  44. 44. SEARCH RESULTS PAGE • http://bit.ly/1dLAdSg Thursday, November 14, 13
  45. 45. WINS • Less sign offs and more collaborations & showcases • Software • UI was designed to better suit the device test coverage enabled weekly/fortnightly releases • UI library of components enabled quick development of new features. Thursday, November 14, 13
  46. 46. WARNING: LAYOUT SHIFTS ARE EXPENSIVE Thursday, November 14, 13
  47. 47. Thursday, November 14, 13
  48. 48. QUESTIONS & FEEDBACK •4 question survey • http://bit.ly/down-rabbit-hole • Twitter: @cpl_rewinds Thursday, November 14, 13

×