down the rabbit hole - be responsive november 2013 presentation

DOWN THE RABBIT HOLE

Thursday, November 14, 13

TYPICAL CYCLE

IdeaDesign Build


TYPICAL CYCLE

IdeaDesign Build

Brand

MarketingLegal

Product

Sales User Testing


JUST FOR FIXED WIDTH


AND IF THERE ARE MORE...


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)


DESIGN APPROACH

• Just in time Design

•Done just before the development team needs it

• Layered Design

• Skeleton - Initial design work, think Layout

•Muscle - Content to fit in Layout

• Skin - Visual Design


SKELETON


PAGE FLOWS

Search Results DetailsHome

RecentlyUpdated


PRIORITIZE YOUR CONTENTThursday, November 14, 13

PAGE LAYOUTThursday, November 14, 13

THE SIGN OFF

ProposedSolution DevBiz

Rep

UX


VS

IdeaDesign Build

Idea

Design Build

Skeleton

Design Build...


THE DESIGN(MUSCLE & SKIN)


FILLING IN THE SKELETON

ResultsPage

FilterMenu

SearchBar Map etc


THE SEARCH BARThursday, November 14, 13

TAKE 2Thursday, November 14, 13

INACTIVE SEARCH BARThursday, November 14, 13

ACTIVE STATEThursday, November 14, 13

LANDSCAPE FAIL!Thursday, November 14, 13

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)


LANDSCAPE - TAKE 2Thursday, November 14, 13

REFINING THE DESIGN PHASE

Sketches

Prototype

Visual Design

Analysis Build


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.


THE BUILD


THE DETAILS PAGE

• Based on content priority:

• Business name

• Address

• Contacts

•Map

•Opening hours


REFLOWING TO LARGE


TESTING LAYOUT SHIFTThursday, November 14, 13

OUTCOME

• Test page will exercise all breakpoints to ensure coverage

• iframe to trigger mediaquery breakpoint

• screenshot capture to ensure no regressions

•Makes HTML/CSS refactorable


UI INTEGRATION TESTING Thursday, November 14, 13

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


SLIDER BLOCK


SLIDER REUSE


LIGHTBOX MODAL BLOCK


LIGHTBOX MODAL REUSE


OUTCOMES


SEARCH RESULTS PAGE

• http://bit.ly/1dLAdSg


http://bit.ly/1dLAdSg

http://bit.ly/1dLAdSg

WINS

• Less sign offs and more collaborations & showcases

• Software was designed to better suit the device

• UI test coverage enabled weekly/fortnightly releases

• UI library of components enabled quick development of new features.


WARNING: LAYOUT SHIFTS ARE EXPENSIVE


QUESTIONS & FEEDBACK

• 4 question survey

• http://bit.ly/down-rabbit-hole

• Twitter : @cpl_rewinds


http://bit.ly/down-rabbit-hole

http://bit.ly/down-rabbit-hole

down the rabbit hole - be responsive november 2013 presentation

Technology