Responsive & Responsible: Implementing Responsive Design at Scale
Delivering Responsive Design at Scale
Transcript of Delivering Responsive Design at Scale
![Page 1: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/1.jpg)
Delivering Responsive Design at Scale
![Page 2: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/2.jpg)
What is Responsive?
![Page 3: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/3.jpg)
“Responsive web design is an approach aimed at cra!ing sites to provide an op"mal viewing and interac"on experience across a
wide range of devices ”
Wikipedia
h!ps://en.wikipedia.org/wiki/Responsive_web_design
![Page 4: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/4.jpg)
Why does that matter?
![Page 5: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/5.jpg)
device viewing is on the riseLast year, mobile devices generated 14 !mes more traffic than non-mobile devices.
h!p://www.cisco.com/c/en/us/solu"ons/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html
![Page 6: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/6.jpg)
device viewing is on the riseLast year, mobile devices generated 14 !mes more traffic than non-mobile devices.
Mobile devices grew to 7.9 billion in 2015
h!p://www.cisco.com/c/en/us/solu"ons/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html
![Page 7: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/7.jpg)
device viewing is on the riseLast year, mobile devices generated 14 !mes more traffic than non-mobile devices.
Mobile devices grew to 7.9 billion in 2015.
In less than 5 years, there will be an es"mated 1.5 mobile devices per capita in the en"re world (~12bil).
h!p://www.cisco.com/c/en/us/solu"ons/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11-520862.html
![Page 8: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/8.jpg)
Mobile purchasing is increasingPurchases made on mobile devices account for 30% of online purchases.
h!ps://www.thinkwithgoogle.com/ar"cles/mobile-retail-apps-sites-introduc"on.html h!ps://www.internetretailer.com/2014/10/01/mobile-shoppers-convert-160-more-o#en-op"mized-sites
![Page 9: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/9.jpg)
Mobile purchasing is increasingPurchases made on mobile devices account for 30% of online purchases.
Mobile friendly shopping carts have an average mobile order value of 102% compared to the average desktop order value of the same site.
h!ps://www.thinkwithgoogle.com/ar"cles/mobile-retail-apps-sites-introduc"on.html h!ps://www.internetretailer.com/2014/10/01/mobile-shoppers-convert-160-more-o#en-op"mized-sites
![Page 10: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/10.jpg)
Mobile purchasing is increasingPurchases made on mobile devices account for 30% of online purchases.
Mobile friendly shopping carts have an average mobile order value of 102% compared to the average desktop order value of the same site.
Conversion rates on mobile friendly devices are nearly 3x those of non-mobile friendly sites.
h!ps://www.thinkwithgoogle.com/ar"cles/mobile-retail-apps-sites-introduc"on.html h!ps://www.internetretailer.com/2014/10/01/mobile-shoppers-convert-160-more-o#en-op"mized-sites
![Page 11: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/11.jpg)
Context Switching happensMore than 60% of people use at least two devices per day; almost half of them use at least three devices.
h!p://mashable.com/2014/03/06/facebook-device-switch-study/#LdMf6GVQukqZ
![Page 12: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/12.jpg)
Context Switching happensMore than 60% of people use at least two devices per day; almost half of them use at least three devices.
More than half say they begin a task on one device and finish it on another.
h!p://mashable.com/2014/03/06/facebook-device-switch-study/#LdMf6GVQukqZ
![Page 13: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/13.jpg)
Process and Deliverables
![Page 14: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/14.jpg)
Process Changes• Waterfall
• Lack of Itera"ons
• Large Features
• Big Design
• Department Based
• Business Focused
• Varied Shipping Schedule
![Page 15: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/15.jpg)
Process Changes• Waterfall
• Lack of Itera"ons
• Large Features
• Big Design
• Department Based
• Business Focused
• Varied Shipping Schedule
• Short Sprints
![Page 16: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/16.jpg)
Process Changes• Waterfall
• Lack of Itera"ons
• Large Features
• Big Design
• Department Based
• Business Focused
• Varied Shipping Schedule
• Short Sprints
• Small Itera"ons
• Small Feature Sets
![Page 17: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/17.jpg)
Process Changes• Waterfall
• Lack of Itera"ons
• Large Features
• Big Design
• Department Based
• Business Focused
• Varied Shipping Schedule
• Short Sprints
• Small Itera"ons
• Small Feature Sets
• An" Big Design
![Page 18: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/18.jpg)
Process Changes• Waterfall
• Lack of Itera"ons
• Large Features
• Big Design
• Department Based
• Business Focused
• Varied Shipping Schedule
• Short Sprints
• Small Itera"ons
• Small Feature Sets
• An" Big Design
• Feature Based
![Page 19: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/19.jpg)
Process Changes• Waterfall
• Lack of Itera"ons
• Large Features
• Big Design
• Department Based
• Business Focused
• Varied Shipping Schedule
• Short Sprints
• Small Itera"ons
• Small Feature Sets
• An" Big Design
• Feature Based
• Content and User Focused
![Page 20: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/20.jpg)
Process Changes• Waterfall
• Lack of Itera"ons
• Large Features
• Big Design
• Department Based
• Business Focused
• Varied Shipping Schedule
• Short Sprints
• Small Itera"ons
• Small Feature Sets
• An" Big Design
• Feature Based
• Content and User Focused
• Fixed Shipping Schedule
![Page 21: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/21.jpg)
Deliverables• Full Screen Mockups
• final_v2.psd
• ipad_v3.sketch
• ‘Final’ Development Package
![Page 22: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/22.jpg)
Deliverables• Full Screen Mockups
• final_v2.psd
• ipad_v3.sketch
• ‘Final’ Development Package
• Component Mockups
![Page 23: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/23.jpg)
Deliverables• Full Screen Mockups
• final_v2.psd
• ipad_v3.sketch
• ‘Final’ Development Package
• Component Mockups
• Prototypes
• Invision, Marvel, HTML/CSS
![Page 24: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/24.jpg)
Deliverables• Full Screen Mockups
• final_v2.psd
• ipad_v3.sketch
• ‘Final’ Development Package
• Component Mockups
• Prototypes
• Invision, Marvel, HTML/CSS
• Pa!ern Library
• 18F, Salesforce, LonelyPlanet
![Page 25: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/25.jpg)
Deliverables• Full Screen Mockups
• final_v2.psd
• ipad_v3.sketch
• ‘Final’ Development Package
• Component Mockups
• Prototypes
• Invision, Marvel, HTML/CSS
• Pa!ern Library
• 18F, Salesforce, LonelyPlanet
• Development Transparency
• Progressive Enhancement
![Page 26: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/26.jpg)
Avoiding Internal Conflict
![Page 27: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/27.jpg)
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
![Page 28: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/28.jpg)
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
Communicate in public.
![Page 29: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/29.jpg)
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
Communicate in public.
Be transparent about the project’s progress.
![Page 30: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/30.jpg)
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
Communicate in public.
Be transparent about the project’s progress.
Clear understanding of roles and responsibili"es.
![Page 31: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/31.jpg)
Avoiding Internal ConflictEnsure ideas and thoughts are heard.
Communicate in public.
Be transparent about the project’s progress.
Clear understanding of roles and responsibili"es.
Daily standups.
![Page 32: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/32.jpg)
Including Stakeholders
![Page 33: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/33.jpg)
Including StakeholdersUnderstanding stakeholder goals vs preferences.
![Page 34: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/34.jpg)
Including StakeholdersUnderstanding stakeholder goals vs preferences.
Showcase sprint demos.
![Page 35: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/35.jpg)
Including StakeholdersUnderstanding stakeholder goals vs preferences.
Showcase sprint demos.
Host a staging URL.
![Page 36: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/36.jpg)
Including StakeholdersUnderstanding stakeholder goals vs preferences.
Showcase sprint demos.
Host a staging URL.
Consistent method for feedback.
![Page 37: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/37.jpg)
Being Transparent
![Page 38: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/38.jpg)
Being TransparentWorking in small teams.
![Page 39: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/39.jpg)
Being TransparentWorking in small teams.
Open communica"on.
![Page 40: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/40.jpg)
Being TransparentWorking in small teams.
Open communica"on.
Stakeholders and makers together.
![Page 41: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/41.jpg)
Being TransparentWorking in small teams.
Open communica"on.
Stakeholders and makers together.
Understanding business and user goals.
![Page 42: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/42.jpg)
Being TransparentWorking in small teams.
Open communica"on.
Stakeholders and makers together.
Understanding business and user goals.
Aligning them together.
![Page 43: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/43.jpg)
Business Goal
![Page 44: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/44.jpg)
Business Goal with user validation
![Page 45: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/45.jpg)
Customer Validation
![Page 46: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/46.jpg)
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
![Page 47: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/47.jpg)
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
![Page 48: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/48.jpg)
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
• Workflow
![Page 49: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/49.jpg)
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
• Workflow
• Pain points
![Page 50: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/50.jpg)
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
• Workflow
• Pain points
Analy"cs – Conversion rates and device usage
![Page 51: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/51.jpg)
Before, During and AfterCustomer tes"ng – 1 on 1 and A/B tes"ng
• Survey
• Workflow
• Pain points
Analy"cs – Conversion rates and device usage
Measurable Goals
![Page 52: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/52.jpg)
“We’ll know this is successful when shopping cart drop-offs are reduced by 25%
in 6 months. ”
Poten"al Measurable Goal
![Page 53: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/53.jpg)
Vision Define Design Deliver Measure
Many untested ideas Focused, validated features
services delivery
![Page 54: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/54.jpg)
Next Steps: Iteration
![Page 55: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/55.jpg)
Next Steps: IterationGathering analy"cs on devices & conversion rates.
![Page 56: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/56.jpg)
Next Steps: IterationGathering analy"cs on devices & conversion rates.
Upda"ng measurable goals.
![Page 57: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/57.jpg)
Next Steps: IterationGathering analy"cs on devices & conversion rates.
Upda"ng measurable goals.
Con"nuing customer valida"on.
![Page 58: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/58.jpg)
Next Steps: IterationGathering analy"cs on devices & conversion rates.
Upda"ng measurable goals.
Con"nuing customer valida"on.
Making data informed decisions.
![Page 59: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/59.jpg)
Next Steps: IterationGathering analy"cs on devices & conversion rates.
Upda"ng measurable goals.
Con"nuing customer valida"on.
Making data informed decisions.
Upda"ng pa!ern library to reflect changes.
![Page 60: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/60.jpg)
Next Steps: IterationGathering analy"cs on devices & conversion rates.
Upda"ng measurable goals.
Con"nuing customer valida"on.
Making data informed decisions.
Upda"ng pa!ern library to reflect changes.
Product is always evolving – it’s never finished.
![Page 61: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/61.jpg)
TakeAways
![Page 62: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/62.jpg)
TakeawaysBe transparent and open.
![Page 63: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/63.jpg)
TakeawaysBe transparent and open.
Validate features with customers.
![Page 64: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/64.jpg)
TakeawaysBe transparent and open.
Validate features with customers.
Avoid conflicts through communica"on.
![Page 65: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/65.jpg)
TakeawaysBe transparent and open.
Validate features with customers.
Avoid conflicts through communica"on.
Be device agnos"c.
![Page 66: Delivering Responsive Design at Scale](https://reader031.fdocuments.in/reader031/viewer/2022022203/5873b55d1a28abbc788b461b/html5/thumbnails/66.jpg)
About cantina• Boston-based digital design and development agency
• Founded in 2007, 60+ employees
• We help clients like Putnam Investments, John Hancock, CUNA Mutual Group, Epsilon, and Pearson deliver be!er digital products for their customers
• Can"na’s people turn great ideas into digital reality, execu"ng with the best design and development techniques available