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

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