Your SlideShare is downloading. ×
0
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Down the Rabbit Hole - Be Responsive November 2013 Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Down the Rabbit Hole - Be Responsive November 2013 Presentation

512

Published on

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

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
512
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
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. DOWN THE RABBIT HOLE Thursday, November 14, 13
  • 2. TYPICAL CYCLE Idea Thursday, November 14, 13 Design Build
  • 3. TYPICAL CYCLE Sales Product Idea Design Brand Build Legal Marketing Thursday, November 14, 13 User Testing
  • 4. JUST FOR FIXED WIDTH Thursday, November 14, 13
  • 5. AND IF THERE ARE MORE... Thursday, November 14, 13
  • 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. 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. SKELETON Thursday, November 14, 13
  • 9. PAGE FLOWS Home Search Results Recently Updated Thursday, November 14, 13 Details
  • 10. PRIORITIZE YOUR CONTENT Thursday, November 14, 13
  • 11. PAGE LAYOUT Thursday, November 14, 13
  • 12. THE SIGN OFF Biz Rep Proposed Solution UX Thursday, November 14, 13 Dev
  • 13. Idea Design Build VS Idea Skeleton Design Build Design Build... Thursday, November 14, 13
  • 14. THE DESIGN (MUSCLE & SKIN) Thursday, November 14, 13
  • 15. FILLING IN THE SKELETON Results Page Search Bar Thursday, November 14, 13 Map Filter Menu etc
  • 16. THE SEARCH BAR Thursday, November 14, 13
  • 17. TAKE 2 Thursday, November 14, 13
  • 18. INACTIVE SEARCH BAR Thursday, November 14, 13
  • 19. ACTIVE STATE Thursday, November 14, 13
  • 20. ACTIVE STATE Thursday, November 14, 13
  • 21. LANDSCAPE FAIL! Thursday, November 14, 13
  • 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. LANDSCAPE - TAKE 2 Thursday, November 14, 13
  • 24. REFINING THE DESIGN PHASE Prototype Analysis Sketches Build Visual Design Thursday, November 14, 13
  • 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. THE BUILD Thursday, November 14, 13
  • 27. THE DETAILS PAGE • Based on content priority: • Business name • Address • Contacts • Map • Opening Thursday, November 14, 13 hours
  • 28. REFLOWING TO LARGE Thursday, November 14, 13
  • 29. REFLOWING TO LARGE Thursday, November 14, 13
  • 30. REFLOWING TO LARGE Thursday, November 14, 13
  • 31. TESTING LAYOUT SHIFT Thursday, November 14, 13
  • 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. UI INTEGRATION TESTING Thursday, November 14, 13
  • 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. SLIDER BLOCK Thursday, November 14, 13
  • 36. SLIDER BLOCK Thursday, November 14, 13
  • 37. SLIDER REUSE Thursday, November 14, 13
  • 38. SLIDER REUSE Thursday, November 14, 13
  • 39. LIGHTBOX MODAL BLOCK Thursday, November 14, 13
  • 40. LIGHTBOX MODAL BLOCK Thursday, November 14, 13
  • 41. LIGHTBOX MODAL REUSE Thursday, November 14, 13
  • 42. LIGHTBOX MODAL REUSE Thursday, November 14, 13
  • 43. OUTCOMES Thursday, November 14, 13
  • 44. SEARCH RESULTS PAGE • http://bit.ly/1dLAdSg Thursday, November 14, 13
  • 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. WARNING: LAYOUT SHIFTS ARE EXPENSIVE Thursday, November 14, 13
  • 47. Thursday, November 14, 13
  • 48. QUESTIONS & FEEDBACK •4 question survey • http://bit.ly/down-rabbit-hole • Twitter: @cpl_rewinds Thursday, November 14, 13

×