Responsive Design Workflow
-
Upload
intergen -
Category
Technology
-
view
965 -
download
1
description
Transcript of Responsive Design Workflow
![Page 1: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/1.jpg)
Mark DelaneyExperience Designer
_MOBILE UX
RESPONSIVEDESIGNWORKFLOW(SO FAR)
![Page 2: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/2.jpg)
Responsive DesignWorkflow
Content Strategy
Responsive Web Design
Device Diversity
A Revised Workflow
(so far)
![Page 3: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/3.jpg)
DESIGNFOR DEVICEDIVERSITY
_MOBILE UX
![Page 4: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/4.jpg)
ZOMBIEAPOCALYPSEOF MOBILEDEVICES
Source: www.flickr.com/photos/digitalsextant/3624030270
![Page 5: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/5.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/6.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/7.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/8.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/9.jpg)
Close to 40 new devices released from major
manufacturers in about a 7 week window
![Page 10: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/10.jpg)
SPOT THETREND
Source: www.flickr.com/photos/whiteafrican/2938685296
![Page 11: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/11.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/12.jpg)
Notice a trend?
![Page 13: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/13.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/14.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/15.jpg)
Responsive Design – A Workflow that Works | 15
“Yeah, nah, I’m talking on a book”
![Page 16: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/16.jpg)
WHAT ABOUTTABLETDEVICES?
Source: www.flickr.com/photos/johanl/4816110696
![Page 17: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/17.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/18.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/19.jpg)
Notice a trend?
![Page 20: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/20.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/21.jpg)
Responsive Design – A Workflow that Works | 21
iPhone Wrist
![Page 22: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/22.jpg)
Responsive Design – A Workflow that Works | 22
Smart TV
![Page 23: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/23.jpg)
A multi-device a.k.a responsive
design
You only need one web design:
![Page 24: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/24.jpg)
RESPONSIVEWEBDESIGN
_MOBILE UX
![Page 25: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/25.jpg)
RWDBALANCINGACT
Source: www.flickr.com/photos/jordanfischer/63832583
![Page 26: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/26.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/27.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/28.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/29.jpg)
Rather a great step in the right
direction
Responsive Design is not a panacea…
![Page 30: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/30.jpg)
Mobile is somuch more thana small screen
Source: www.flickr.com/photos/jurvetson/5201796697
![Page 31: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/31.jpg)
A MOREFLEXIBLEWORKFLOW
_MOBILE UX
![Page 32: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/32.jpg)
TRADITIONALAPPROACH
Source: www.flickr.com/photos/jurvetson/5201796697
![Page 33: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/33.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/34.jpg)
—Mark Delaney, Designer
Designing only pixel perfect mock-ups makes it difficult near impossible to then think responsively
![Page 35: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/35.jpg)
AN EMERGINGPROCESS
Source: www.flickr.com/photos/rhinoneal/6200358032
![Page 36: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/36.jpg)
Source: www.flickr.com/photos/carbonnyc/2154870998
Set better expectations
![Page 37: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/37.jpg)
Source: www.flickr.com/photos/zenilorac/698514624
Lead more productive design conversations
![Page 38: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/38.jpg)
Source: www.flickr.com/photos/aon/7184559114
Increase collaboration.
![Page 39: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/39.jpg)
Source: www.flickr.com/photos/jcfrog/4692750598
Test designs before committing to them
![Page 40: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/40.jpg)
Minimises the time heading down the wrong
path
Staying lean & collecting feedback often
![Page 41: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/41.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/42.jpg)
MOBILECONTENTSTRATEGY
_MOBILE UX
![Page 43: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/43.jpg)
CONTENT& CONTEXT
Source: www.flickr.com/photos/joeshlabotnik/2359224681
![Page 44: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/44.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/45.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/46.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/47.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/48.jpg)
“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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/49.jpg)
OLDCONTEXT
Source: www.flickr.com/photos/joeshlabotnik/2359224681
![Page 50: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/50.jpg)
www.flickr.com/photos/oimax/3800475934
Mobile Stereotypes
![Page 51: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/51.jpg)
www.flickr.com/photos/othree/5224045406
New Context
![Page 52: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/52.jpg)
www.flickr.com/photos/othree/5224045406
New Context
![Page 53: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/53.jpg)
Mobile is not the “light” version
![Page 54: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/54.jpg)
MOBILEFIRSTRESPONSIVEDESIGN
www.flickr.com/photos/pete-karl/4637024524
![Page 55: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/55.jpg)
Responsive Design – A Workflow that Works | 55
Mobile LastDegraded and retro-fitted?
![Page 56: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/56.jpg)
Responsive Design – A Workflow that Works | 56
Mobile FirstProgressively enhanced & future-friendly
![Page 57: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/57.jpg)
A FEW FINALTHOUGHTS
_MOBILE UX
![Page 58: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/58.jpg)
THE MOBILEWEB ISDIFFICULT
… BUT IT’SWORTH IT
Source: Kathy Slamen Photography
![Page 59: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/59.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/60.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/61.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/62.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/63.jpg)
Where do I start?
![Page 64: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/64.jpg)
mobilewebbestpractices.com
www.flickr.com/photos/perfectoinsecto/4871175954
![Page 65: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/65.jpg)
Develop your mobile strategy…
but in the meantime there are some useful things you can
do today
![Page 66: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/66.jpg)
Step 1
Review your traffic logs and determine what mobile
devices are accessing your site today
![Page 67: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/67.jpg)
Step 2
Test your site on those devices to determine where the experience breaks down
![Page 68: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/68.jpg)
Step 3
Develop an action plan to address common issues – e.g.
small touch targets, large images…
![Page 69: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/69.jpg)
Let’s create future friendly experiences
www.flickr.com/photos/lorena-s/6285307719
![Page 70: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/70.jpg)
It’s going to be fun.
www.flickr.com/photos/othree/5224045406
![Page 72: Responsive Design Workflow](https://reader036.fdocuments.in/reader036/viewer/2022062510/54b537334a79599a088b4751/html5/thumbnails/72.jpg)
THE END