Responsive Design Workflow

Mark DelaneyExperience Designer

_MOBILE UX

RESPONSIVEDESIGNWORKFLOW(SO FAR)

Responsive DesignWorkflow

Content Strategy

Responsive Web Design

Device Diversity

A Revised Workflow

(so far)

DESIGNFOR DEVICEDIVERSITY

_MOBILE UX

ZOMBIEAPOCALYPSEOF MOBILEDEVICES

Source: www.flickr.com/photos/digitalsextant/3624030270

Responsive Design – A Workflow that Works | 5

4.3”

Motorola Droid RAZR M

Screen: 4.3” with 960 x 540 & 256 ppiBrowser: Chrome for Android (Chrome 18)OS: Google Android 4.0

Responsive Design – A Workflow that Works | 6

4.3”

Motorola Droid RAZR M

Screen: 5.5” with 720 x 1280 & 276 ppiBrowser: Android WebkitOS: Google Android 4.1

5.5”

Samsung Galaxy Note II

Responsive Design – A Workflow that Works | 7

4.3”

Motorola Droid RAZR M

5.5”

Samsung Galaxy Note II

Screen: 7.9” with 768 x 1024 & 163 ppiBrowser: Apple Safari 6OS: iOS 6

7.9”

Apple iPad Mini

Responsive Design – A Workflow that Works | 8

4.3”

Motorola Droid RAZR M

5.5”

Samsung Galaxy Note II

Screen: 12.5” with 920 x 1080 & 163 ppiBrowser: IE 10OS: Microsoft Windows 8 RT

7.9”

Apple iPad Mini Dell XPS 12

12.5”

Close to 40 new devices released from major

manufacturers in about a 7 week window

SPOT THETREND

Source: www.flickr.com/photos/whiteafrican/2938685296

Responsive Design – A Workflow that Works | 11

Smart Phone

3.5” 4.0” 4.3” 4.5” 4.7”

iPhone 3GS HTC Windows Phone 8S

Motorola Droid RAZR M

Nokia Lumina 920 LG Nexus 4

Notice a trend?

Responsive Design – A Workflow that Works | 13

Smart Phone

3.5” 4.0” 4.3” 4.5” 4.7”

iPhone 3GS HTC Windows Phone 8S

Motorola Droid RAZR M

Nokia Lumina 920 LG Nexus 4

Responsive Design – A Workflow that Works | 14

3.5” 4.5” 4.7” 5.3” 5.5”

Motorola Droid RAZR M

Nokia Lumina 920 LG Nexus 4 Samsung Galaxy Note

Samsung Galaxy Note II

Responsive Design – A Workflow that Works | 15

“Yeah, nah, I’m talking on a book”

WHAT ABOUTTABLETDEVICES?

Source: www.flickr.com/photos/johanl/4816110696

Responsive Design – A Workflow that Works | 17

Tablet

9.7” 10.1”

Apple iPadAcer Iconia Tab W510Dell XPS 10Asus Vivo Tab RT

Responsive Design – A Workflow that Works | 18

Tablet

9.7”7.0”

Apple iPadGoogle Nexus 7

7.9”

Apple iPad Mini

8.9”

Kindle Fire HD

Notice a trend?

Responsive Design – A Workflow that Works | 20

Source: LukeW.com

3”

5”

7”

9”

11”

13”

15”

17”

19”

21”

23”

25”

27”

Smart Phone

TabletLaptop

Desktop

Size Continuum

One Single Continuum

Responsive Design – A Workflow that Works | 21

iPhone Wrist

Responsive Design – A Workflow that Works | 22

Smart TV

A multi-device a.k.a responsive

design

You only need one web design:

RESPONSIVEWEBDESIGN

_MOBILE UX

RWDBALANCINGACT

Source: www.flickr.com/photos/jordanfischer/63832583

Responsive Design – A Workflow that Works | 26

Responsive Web Design

■ A flexible, grid-based layout

The benefits of creating a liquid layout are becoming too great to ignore

The 3 core ingredients

Responsive Design – A Workflow that Works | 27

Responsive Web Design

■ A flexible, grid-based layout

The benefits of creating a liquid layout are becoming too great to ignore

The FED ingredients

■ Media queries

Allow you to gather data about site visitors and use it to apply the appropriate styles

Responsive Design – A Workflow that Works | 28

Responsive Web Design

■ A flexible, grid-based layout

The benefits of creating a liquid layout are becoming too great to ignore

■ Flexible images and media

Being able to create flexible images is an important consideration when trying to create a flexible layout

■ Media queries

Allow you to gather data about site visitors and use it to apply the appropriate styles

The FED ingredients

Rather a great step in the right

direction

Responsive Design is not a panacea…

Mobile is somuch more thana small screen

Source: www.flickr.com/photos/jurvetson/5201796697

A MOREFLEXIBLEWORKFLOW

_MOBILE UX

TRADITIONALAPPROACH

Source: www.flickr.com/photos/jurvetson/5201796697

Responsive Design – A Workflow that Works | 33

Design ProcessA typical waterfall approachto task planning

Project Kick-off Meeting and User Research

IA, Interaction Design and Wireframes

High Fidelity Visual UI Designs (PSDs)

Front-End Developmentand Testing

Conduct internal and external stakeholder research, establish project goals and design direction.

Planning IA and creating wireframes to determine content and layout for key page templates

Detailed PSD mock-ups of key page templates to illustrate visual UI design (‘look and feel)

HTML & CSS is created for key templates to be handed over to the development team.

Discover Define Design Deliver

—Mark Delaney, Designer

Designing only pixel perfect mock-ups makes it difficult near impossible to then think responsively

AN EMERGINGPROCESS

Source: www.flickr.com/photos/rhinoneal/6200358032

Source: www.flickr.com/photos/carbonnyc/2154870998

Set better expectations

Source: www.flickr.com/photos/zenilorac/698514624

Lead more productive design conversations

Source: www.flickr.com/photos/aon/7184559114

Increase collaboration.

Source: www.flickr.com/photos/jcfrog/4692750598

Test designs before committing to them

Minimises the time heading down the wrong

path

Staying lean & collecting feedback often

Responsive Design – A Workflow that Works | 41

Front-End Developmentand Testing

As low fidelity & style prototypes evolve, they can converge into a single higher fidelity prototype ready for testing & final sign-off.

User Research & Collaborative Sketches

Sketches can involve the whole team & can help everyone communicate.

Content Analysis, Modelling & IAPlanning content, IA, & templates should occur prior to design details.

Static or Interactive WireframesModel key pages, map content & define components & variations.

Visual Design & Style Prototype

Style prototyping can begin as soon as consensus forms around content & components allowing for the concurrent, but independent exploration of style.

Low-fi HTML Prototype

HTML & CSS templates can begin as soon as initial wireframes are complete

Responsive Workflow

Discover & Define

Define & Design

Define & Design

Define, Design & DeliverDesign & DeliverDesign & Deliver

MOBILECONTENTSTRATEGY

_MOBILE UX

CONTENT& CONTEXT

Source: www.flickr.com/photos/joeshlabotnik/2359224681

Responsive Design – A Workflow that Works | 44

Adaptive Content■ Structured content

Small chunks of content that adapt to other devices.

Responsive Design – A Workflow that Works | 45

Adaptive Content■ Structured content

■ Presentation-independent content

Small chunks of content that adapt to other devices.

Raw content without formatting.

Responsive Design – A Workflow that Works | 46

Adaptive Content■ Structured content

■ Presentation-independent content

Small chunks of content that adapt to other devices.

■ Reusable content

Raw content without formatting.

Content that is used on multiple platforms and in many formats.

Responsive Design – A Workflow that Works | 47

Adaptive Content■ Structured content

■ Presentation-independent content

Small chunks of content that adapt to other devices.

■ Reusable content

Raw content without formatting.

Content that is used on multiple platforms and in many formats.

■ Meaningful metadata

Data that describes the content for easy interpretation.

“Content is like water. You put water into a cup it becomes the cup. You put water into a bottle it becomes the bottle”.

Josh Clarke – Seven Deadly Mobile Myths

OLDCONTEXT

Source: www.flickr.com/photos/joeshlabotnik/2359224681

www.flickr.com/photos/oimax/3800475934

Mobile Stereotypes

www.flickr.com/photos/othree/5224045406

New Context

www.flickr.com/photos/othree/5224045406

New Context

Mobile is not the “light” version

MOBILEFIRSTRESPONSIVEDESIGN

www.flickr.com/photos/pete-karl/4637024524

Responsive Design – A Workflow that Works | 55

Mobile LastDegraded and retro-fitted?

Responsive Design – A Workflow that Works | 56

Mobile FirstProgressively enhanced & future-friendly

A FEW FINALTHOUGHTS

_MOBILE UX

THE MOBILEWEB ISDIFFICULT

… BUT IT’SWORTH IT

Source: Kathy Slamen Photography

Responsive Design – A Workflow that Works | 59

Responsive DesignSome of the things that we’velearnt along the way

■ Challenge traditional processes

Responsive Design – A Workflow that Works | 60

Responsive DesignSome of the things that we’velearnt along the way

■ You can’t wing content

■ Challenge traditional processes

Responsive Design – A Workflow that Works | 61

Responsive DesignSome of the things that we’velearnt along the way

■ You can’t wing content

■ Optimize for touch

■ Challenge traditional processes

Responsive Design – A Workflow that Works | 62

Responsive Design

■ You can’t wing content

■ Optimize for touch

■ Design for mobile first

Some of the things that we’velearnt along the way

■ Challenge traditional processes

Where do I start?

mobilewebbestpractices.com

www.flickr.com/photos/perfectoinsecto/4871175954

Develop your mobile strategy…

but in the meantime there are some useful things you can

do today

Step 1

Review your traffic logs and determine what mobile

devices are accessing your site today

Step 2

Test your site on those devices to determine where the experience breaks down

Step 3

Develop an action plan to address common issues – e.g.

small touch targets, large images…

Let’s create future friendly experiences

www.flickr.com/photos/lorena-s/6285307719

It’s going to be fun.

www.flickr.com/photos/othree/5224045406

Email: mark.delaney@intergen.co.nz

Mobile: 021 466 027

Twitter: @TeamIntergen

Thank you

THE END