draftfcb at das: responsive design: the art of a three-screen world
DESCRIPTION
We all know from looking at our own technology that computers, tablets and phones are three screens that are constantly in and out of consumers’ hands. So how do you build the best experience without building it three different times, in three different voices, using three different databases? In this session, Draftfcb's Chris Miller will discuss rethinking the Web and experience design on the three screen, as well as how to think mobile first and scale up -- not down. In addition, he'll provide real-world examples of best and worst responsive design. Presenter: Chris Miller, chief digital officer, Draftfcb Chicago @scubachrisTRANSCRIPT
![Page 1: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/1.jpg)
RETHINKTHE WEB
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 2: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/2.jpg)
RESPONSIVE DESIGN
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 3: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/3.jpg)
RESPONSIVE DESIGN
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 4: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/4.jpg)
IT STARTED BECAUSE THIS
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 5: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/5.jpg)
BECAME THIS…
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 6: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/6.jpg)
THE IMPORTANT THREE THINGS
1. Devices
2. Resolution
3. OS
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 7: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/7.jpg)
BUT THE LONGER TERM ISSUE IS…
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 8: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/8.jpg)
THE SOLUTIONCreate a responsive website.Keep in mind, responsive web design will not make the site perfect in every device but it will scale elegantly across multiple devices to allow for the best customer experience, however your customer chooses to view your content.
http://www.craftedbydavid.com/
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 9: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/9.jpg)
HTTP://DFCB.GITHUB.COM/RESPONSIVATOR/
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 10: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/10.jpg)
Digiday, Agency Summit March 21 @scubachris / @draftfcb
BBC.co.uk
![Page 11: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/11.jpg)
Digiday, Agency Summit March 21 @scubachris / @draftfcb
http://www.harvard.edu/
![Page 12: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/12.jpg)
Digiday, Agency Summit March 21 @scubachris / @draftfcb
http://www.time.com/time/
![Page 13: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/13.jpg)
NOW ASK YOURSELF
Is it a better way of working?
Can it mean better:- Creative- UX- Development
Building for today while planning for tomorow
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 14: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/14.jpg)
STILL NOT CONVINCED?
1. Look at your site analytics
2. How often do you need to update your content
3. Review your taxonomy
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 15: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/15.jpg)
GETTING STARTEDMobile FirstSites should be built considering the mobile version first since it is the smallest screen size and the content displayed needs to be structured to show the most important information first. Also the growth of mobile indicates those devices will be the more frequent ones to access the content.
Content AuditFor current site that are transitioning to responsive, a content audit will allow the team to understand what content is available on site and make determination as to what is most valuable and where the gaps are.
TaxonomyA taxonomy audit should be included in your content audit as it is your future planning. It allows you to create a tagging and data hierarchy and better future proof your data to display on any type of device.
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 16: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/16.jpg)
GETTING STARTEDResearchReview the current site analytics to get a clear understanding of how site visitors are currently accessing the site. This will give the team a better understanding for the breakpoints within the responsive design. If the site is a new site with no previous history, reviewing the analytics of competitors will also give an indication of how the site should be created.
If the brand has a call center or receives customer feedback on the site, it is also beneficial to review the commentary to understand the current customer pain points to help make design decisions.
Finally, in tandem with analytic research, the UX team can also provide a Heuristic Analysis of the site which will help structure the new designs and content.
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 17: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/17.jpg)
NOW YOU’RE PSYCHEDThe lighting round for:
1. UX
2. Creative
3. Development
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 18: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/18.jpg)
WIREFRAMES WIREFRAMES ARE THE UGLIEST WEBSITES YOU HAVE EVER SEEN AND
ARE ALSOBLUEPRINTS OUTLINING:
Content
relative priority of that content (hierarchy)
interactivefeatures & functionality
how it works
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 19: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/19.jpg)
“You can use an eraser on the drafting table or a sledgehammer
on the construction site”-Frank Lloyd Wright
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 20: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/20.jpg)
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 21: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/21.jpg)
![Page 22: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/22.jpg)
ProgressiveEnhancement!
ResponsiveForces Focus
New Screen, Same Content
![Page 23: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/23.jpg)
VALSPAR
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 24: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/24.jpg)
USPS EVERYWHERE LOCATOR
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 25: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/25.jpg)
USPS EVERYWHERE LOCATOR
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 26: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/26.jpg)
![Page 27: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/27.jpg)
THE TRADITIONAL WEB DESIGN PROCESS
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 28: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/28.jpg)
![Page 29: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/29.jpg)
![Page 30: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/30.jpg)
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 31: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/31.jpg)
![Page 32: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/32.jpg)
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 33: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/33.jpg)
FRANKENCOMP!Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 34: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/34.jpg)
With ego bruised, the designer tries to figure out how to make elements that were never designed to work together feel like one cohesive piece.
![Page 35: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/35.jpg)
It sets our clients up for disappointment when the finished site doesn’t look like our beautiful Photoshop mockups
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 36: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/36.jpg)
These problems are compounded when your project is responsive.
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 37: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/37.jpg)
Allow designers to get backto what we’re all here to do…
CREATE
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 38: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/38.jpg)
STYLE TILESA design deliverable containing fonts, color and interface elements
that convey the visual language and feeling of the website.
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 39: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/39.jpg)
![Page 40: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/40.jpg)
![Page 41: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/41.jpg)
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 42: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/42.jpg)
Style Tiles allow the designer to stop building pages and empowers them to think about UI systems
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 43: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/43.jpg)
EXISTING BRAND STYLE TILE
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 44: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/44.jpg)
STYLE TILE 1
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 45: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/45.jpg)
STYLE TILE 2
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 46: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/46.jpg)
STYLE TILE 3
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 47: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/47.jpg)
ONE CODEBASETO RULE THEM ALL
![Page 48: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/48.jpg)
MYTHIt costs too much to engage a developer early in the process.
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 49: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/49.jpg)
TIME & MONEY
Spend a penny now. Save a dollar later.
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 50: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/50.jpg)
HAVE YOU CONSIDERED?
Slow ConnectionsBrowser SupportTouchscreensPerformanceMultimediaSecurityRetinaSEO…
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 51: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/51.jpg)
THINK BEYOND HOW A WEBSITE
LOOKSTHINK ABOUT HOW IT
WORKSDigiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 52: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/52.jpg)
THINK MODULAR
“Stop Thinking in Pages. Start Thinking in Systems.”
- Jeremy Keith
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 53: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/53.jpg)
SHOTGUN MARRIAGE
CREATIVE & DEVELOPMENT
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 54: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/54.jpg)
WATERFALL WORKFLOW
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 55: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/55.jpg)
- Gotchas- Bottlenecks- Over-The-Fence- In-The-Dark Client- Production Crunch- Chaos
WATERFALL WORKFLOW
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 56: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/56.jpg)
RESPONSIVE WORKFLOW
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 57: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/57.jpg)
- Tight Collaboration
- Identify & Solve Problems Quickly
- Client Inclusion
RESPONSIVE WORKFLOW
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 58: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/58.jpg)
EMBRACE THE FLEXIBILITY OF THE WEB
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 59: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/59.jpg)
COLLABORATION WITHIN THE AGENCY IS
IMPROVED
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 60: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/60.jpg)
“Responsive designis not about mobile.
It’s not about the desktop.It’s about the web.”
- Jeremy Keith
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 61: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/61.jpg)
WHAT’S NEXT?
Start thinking about your content as an asset and developing API’s to connect to different “devices”
Digiday, Agency Summit March 21 @scubachris / @draftfcb
![Page 62: Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c75b404a7959fa518b462b/html5/thumbnails/62.jpg)
THANKS!
Digiday, Agency Summit March 21 @scubachris / @draftfcb