Responsive Design Workflow
-
Upload
intergen -
Category
Technology
-
view
965 -
download
1
description
Transcript of 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
THE END