Responsive Design Workflow

72
Mark Delaney Experience Designer _MOBILE UX RESPONSIVE DESIGN WORKFLOW (SO FAR)

description

In this presentation, Intergen's Mark Delaney (Interactive Designer, Portals and Content) talks about mobile content strategy, context, device experience and gives advice on how to start your journey on creating a responsive website.

Transcript of Responsive Design Workflow

Page 1: Responsive Design Workflow

Mark DelaneyExperience Designer

_MOBILE UX

RESPONSIVEDESIGNWORKFLOW(SO FAR)

Page 2: Responsive Design Workflow

Responsive DesignWorkflow

Content Strategy

Responsive Web Design

Device Diversity

A Revised Workflow

(so far)

Page 3: Responsive Design Workflow

DESIGNFOR DEVICEDIVERSITY

_MOBILE UX

Page 4: Responsive Design Workflow

ZOMBIEAPOCALYPSEOF MOBILEDEVICES

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

Page 5: Responsive Design Workflow

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

Page 6: Responsive Design Workflow

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

Page 7: Responsive Design Workflow

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

Page 8: Responsive Design Workflow

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”

Page 9: Responsive Design Workflow

Close to 40 new devices released from major

manufacturers in about a 7 week window

Page 10: Responsive Design Workflow

SPOT THETREND

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

Page 11: Responsive Design Workflow

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

Page 12: Responsive Design Workflow

Notice a trend?

Page 13: Responsive Design Workflow

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

Page 14: Responsive Design Workflow

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

Page 15: Responsive Design Workflow

Responsive Design – A Workflow that Works | 15

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

Page 16: Responsive Design Workflow

WHAT ABOUTTABLETDEVICES?

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

Page 17: Responsive Design Workflow

Responsive Design – A Workflow that Works | 17

Tablet

9.7” 10.1”

Apple iPadAcer Iconia Tab W510Dell XPS 10Asus Vivo Tab RT

Page 18: Responsive Design Workflow

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

Page 19: Responsive Design Workflow

Notice a trend?

Page 20: Responsive Design Workflow

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

Page 21: Responsive Design Workflow

Responsive Design – A Workflow that Works | 21

iPhone Wrist

Page 22: Responsive Design Workflow

Responsive Design – A Workflow that Works | 22

Smart TV

Page 23: Responsive Design Workflow

A multi-device a.k.a responsive

design

You only need one web design:

Page 24: Responsive Design Workflow

RESPONSIVEWEBDESIGN

_MOBILE UX

Page 25: Responsive Design Workflow

RWDBALANCINGACT

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

Page 26: Responsive Design Workflow

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

Page 27: Responsive Design Workflow

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

Page 28: Responsive Design Workflow

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

Page 29: Responsive Design Workflow

Rather a great step in the right

direction

Responsive Design is not a panacea…

Page 30: Responsive Design Workflow

Mobile is somuch more thana small screen

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

Page 31: Responsive Design Workflow

A MOREFLEXIBLEWORKFLOW

_MOBILE UX

Page 32: Responsive Design Workflow

TRADITIONALAPPROACH

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

Page 33: Responsive Design Workflow

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

Page 34: Responsive Design Workflow

—Mark Delaney, Designer

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

Page 35: Responsive Design Workflow

AN EMERGINGPROCESS

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

Page 36: Responsive Design Workflow

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

Set better expectations

Page 37: Responsive Design Workflow

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

Lead more productive design conversations

Page 38: Responsive Design Workflow

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

Increase collaboration.

Page 39: Responsive Design Workflow

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

Test designs before committing to them

Page 40: Responsive Design Workflow

Minimises the time heading down the wrong

path

Staying lean & collecting feedback often

Page 41: Responsive Design Workflow

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

Page 42: Responsive Design Workflow

MOBILECONTENTSTRATEGY

_MOBILE UX

Page 43: Responsive Design Workflow

CONTENT& CONTEXT

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

Page 44: Responsive Design Workflow

Responsive Design – A Workflow that Works | 44

Adaptive Content■ Structured content

Small chunks of content that adapt to other devices.

Page 45: Responsive Design Workflow

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.

Page 46: Responsive Design Workflow

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.

Page 47: Responsive Design Workflow

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.

Page 48: Responsive Design Workflow

“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

Page 49: Responsive Design Workflow

OLDCONTEXT

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

Page 50: Responsive Design Workflow

www.flickr.com/photos/oimax/3800475934

Mobile Stereotypes

Page 51: Responsive Design Workflow

www.flickr.com/photos/othree/5224045406

New Context

Page 52: Responsive Design Workflow

www.flickr.com/photos/othree/5224045406

New Context

Page 53: Responsive Design Workflow

Mobile is not the “light” version

Page 54: Responsive Design Workflow

MOBILEFIRSTRESPONSIVEDESIGN

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

Page 55: Responsive Design Workflow

Responsive Design – A Workflow that Works | 55

Mobile LastDegraded and retro-fitted?

Page 56: Responsive Design Workflow

Responsive Design – A Workflow that Works | 56

Mobile FirstProgressively enhanced & future-friendly

Page 57: Responsive Design Workflow

A FEW FINALTHOUGHTS

_MOBILE UX

Page 58: Responsive Design Workflow

THE MOBILEWEB ISDIFFICULT

… BUT IT’SWORTH IT

Source: Kathy Slamen Photography

Page 59: Responsive Design Workflow

Responsive Design – A Workflow that Works | 59

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

■ Challenge traditional processes

Page 60: Responsive Design Workflow

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

Page 61: Responsive Design Workflow

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

Page 62: Responsive Design Workflow

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

Page 63: Responsive Design Workflow

Where do I start?

Page 64: Responsive Design Workflow

mobilewebbestpractices.com

www.flickr.com/photos/perfectoinsecto/4871175954

Page 65: Responsive Design Workflow

Develop your mobile strategy…

but in the meantime there are some useful things you can

do today

Page 66: Responsive Design Workflow

Step 1

Review your traffic logs and determine what mobile

devices are accessing your site today

Page 67: Responsive Design Workflow

Step 2

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

Page 68: Responsive Design Workflow

Step 3

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

small touch targets, large images…

Page 69: Responsive Design Workflow

Let’s create future friendly experiences

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

Page 70: Responsive Design Workflow

It’s going to be fun.

www.flickr.com/photos/othree/5224045406

Page 71: Responsive Design Workflow

Email: [email protected]

Mobile: 021 466 027

Twitter: @TeamIntergen

Thank you

Page 72: Responsive Design Workflow

THE END