Down the Rabbit Hole - Be Responsive November 2013 Presentation

DOWN THE RABBIT HOLE

Thursday, November 14, 13

TYPICAL CYCLE

Idea


Design

Build

TYPICAL CYCLE
Sales
Product

Idea

Design

Brand

Build
Legal

Marketing


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
• Layered

just before the development team needs it
Design

• Skeleton
• Muscle
• Skin

- Initial design work, think Layout

- Content to ﬁt in Layout

- Visual Design


SKELETON


PAGE FLOWS

Home

Search
Results

Recently
Updated


Details

PRIORITIZE YOUR CONTENT

PAGE LAYOUT

THE SIGN OFF

Biz
Rep

Proposed
Solution

UX

Dev

Idea
Design

Build

VS
Idea
Skeleton
Design Build
Design Build...

THE DESIGN
(MUSCLE & SKIN)


FILLING IN THE SKELETON
Results
Page

Search
Bar


Map

Filter
Menu

etc

THE SEARCH BAR

TAKE 2

INACTIVE SEARCH BAR

ACTIVE STATE

LANDSCAPE FAIL!

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 2

REFINING THE DESIGN PHASE
Prototype
Analysis

Sketches

Build
Visual Design


A COUPLE OF NOTES

• Prototype

is useful when:

• there

is user interactions (input ﬁeld, youtube video, etc)

• there

is uncertainty around page layout/reﬂows

• 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 SHIFT

OUTCOME

• Test

page will exercise all breakpoints to ensure coverage

• iframe

to trigger mediaquery breakpoint

• screenshot
• Makes


capture to ensure no regressions

HTML/CSS refactorable

UI INTEGRATION TESTING

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


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.


WARNING:
LAYOUT SHIFTS ARE EXPENSIVE


QUESTIONS & FEEDBACK

•4

question survey

• http://bit.ly/down-rabbit-hole
• Twitter: @cpl_rewinds


Down the Rabbit Hole - Be Responsive November 2013 Presentation

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (12)

Último

Último (20)

Down the Rabbit Hole - Be Responsive November 2013 Presentation