Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World

646 views

Published on

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 @scubachris

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
646
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • It’s like a curse word to some and to others it’s the holy grailPic of the holy grail
  • It’s like a curse word to some and to others it’s the holy grailPic of the devil
  • We wanted our websites, websites that we’d built since the late 1990’s for one format. Granted over time as screen resolutions increased we too increased our “standard” size from 800x600 to 1024x768 and so on. Designers had the photoshop templates to work against and developers knew the size they’d be getting to build against. And our friends the UX team also had a standard page/stage size they work against.
  • Almost overnight, well not really but certainly in the last 24 months there has been a proliferation of screen sizes, resolutions and more importantly and continued change in our behavior and the devices that we use on a more then daily basis.
  • Touch screen, mouse – RWD allows for flexibility & a better experience
  • Listen up agency folks
  • – most people are surprised at the high number of visits by mobile users (and it’s rising)If you ask what’s taxonomy then stay with me.
  • GCM.com – maintaining one site and MilkPep will pay DFCB for the upkeep which is currently going to VeltiGartner estimates that by 2013, mobile phones will over­take PCs as the most com­mon web access device world­wide
  • As of February 2012, almost half (49.7%) of US mobile subscribers owned smartphones, according to Nielsen. And 44% of those users access the internet from their mobile device according to the Pew Research Center (Aug 2011).
  • Present flat printed mockups to the client
  • Spend a 1 week or 2 perfecting one layout and then quickly create the other 2 looks because it’s the way things are done
  • And you build it all in photoshop at 1024x768 which is considered the standard these days
  • With placeholder content to suggest hierarchy of content
  • Present flat printed mockups to the client
  • Client starts to mix and match elementsand styles from the 3 mocksIt’s human nature to combine options
  • you spend a month building out pixel perfect psd’s of all the template pagesHand them over to the dev team and find out that what you’ve envisioned isn’t possible
  • Enter Style tilesIt’s the perfect compliment to a wireframe deliverable Separates style from layout & contentIt gives the client design options without investing time in interface specific details
  • It lets us experiment with web type
  • Play with color
  • And design UI elements
  • And gives a clear vision for what the site will feel like when it’s complete without needing to build a finished mockup.
  • What are some ways this might cost more? Planning. Experimentation.How might this save money?
  • What are some ways this might cost more? Planning. Experimentation.How might this save money?
  • Widgets = Multi-State Objects. Great example: One Page Sites.
  • Why do you think this is so important?
  • Draftfcb at DAS: Responsive Design: The Art of a Three-Screen World

    1. 1. RETHINKTHE WEB Digiday, Agency Summit March 21 @scubachris / @draftfcb
    2. 2. RESPONSIVE DESIGN Digiday, Agency Summit March 21 @scubachris / @draftfcb
    3. 3. RESPONSIVE DESIGN Digiday, Agency Summit March 21 @scubachris / @draftfcb
    4. 4. IT STARTED BECAUSE THIS Digiday, Agency Summit March 21 @scubachris / @draftfcb
    5. 5. BECAME THIS… Digiday, Agency Summit March 21 @scubachris / @draftfcb
    6. 6. THE IMPORTANT THREE THINGS 3. OS 2. Resolution1. Devices Digiday, Agency Summit March 21 @scubachris / @draftfcb
    7. 7. BUT THE LONGERTERM ISSUE IS… Digiday, Agency Summit March 21 @scubachris / @draftfcb
    8. 8. THE SOLUTIONCreate a responsive website.Keep in mind, responsive web design will not make the site perfect inevery device but it will scale elegantly across multiple devices to allowfor the best customer experience, however your customer chooses toview your content. http://www.craftedbydavid.com/ Digiday, Agency Summit March 21 @scubachris / @draftfcb
    9. 9. HTTP://DFCB.GITHUB.COM/RESPONSIVATOR/ Digiday, Agency Summit March 21 @scubachris / @draftfcb
    10. 10. BBC.co.ukDigiday, Agency Summit March 21 @scubachris / @draftfcb
    11. 11. http://www.harvard.edu/ Digiday, Agency Summit March 21 @scubachris / @draftfcb
    12. 12. http://www.time.com/time/ Digiday, Agency Summit March 21 @scubachris / @draftfcb
    13. 13. NOW ASK YOURSELFIs it a better way of working?Can it mean better: - Creative - UX - DevelopmentBuilding for today while planning for tomorow Digiday, Agency Summit March 21 @scubachris / @draftfcb
    14. 14. STILL NOT CONVINCED?1. Look at your site analytics2. How often do you need to update your content3. Review your taxonomy Digiday, Agency Summit March 21 @scubachris / @draftfcb
    15. 15. GETTING STARTEDMobile FirstSites should be built considering the mobile version first since it is the smallest screen size andthe content displayed needs to be structured to show the most important information first. Alsothe growth of mobile indicates those devices will be the more frequent ones to access thecontent.Content AuditFor current site that are transitioning to responsive, a content audit will allow the team tounderstand what content is available on site and make determination as to what is mostvaluable and where the gaps are.TaxonomyA taxonomy audit should be included in your content audit as it is your future planning. It allowsyou to create a tagging and data hierarchy and better future proof your data to display on anytype of device. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    16. 16. GETTING STARTEDResearchReview the current site analytics to get a clear understanding of how site visitorsare currently accessing the site. This will give the team a better understanding forthe breakpoints within the responsive design. If the site is a new site with noprevious history, reviewing the analytics of competitors will also give an indication ofhow the site should be created.If the brand has a call center or receives customer feedback on the site, it is alsobeneficial to review the commentary to understand the current customer pain pointsto help make design decisions.Finally, in tandem with analytic research, the UX team can also provide a HeuristicAnalysis of the site which will help structure the new designs and content. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    17. 17. NOW YOU’RE PSYCHEDThe lighting round for:1. UX2. Creative3. Development Digiday, Agency Summit March 21 @scubachris / @draftfcb
    18. 18. WIREFRAMES WIREFRAMES ARE THE UGLIESTWEBSITES YOU HAVE EVER SEEN AND ARE ALSO BLUEPRINTS OUTLINING: Content relative priority of that content (hierarchy) interactive features & functionality how it works Digiday, Agency Summit March 21 @scubachris / @draftfcb
    19. 19. “You can use an eraser on thedrafting table or a sledgehammer on the construction site” -Frank Lloyd Wright Digiday, Agency Summit March 21 @scubachris / @draftfcb
    20. 20. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    21. 21. New Responsive Progressive Screen, SameForces Focus Enhancement! Content VALSPAR< LINKED PROMOTILE LINKED PROMO TILE > Explore Color Browse Products Paint Calculator How-To Videos Find a Retailer FB T YT P Full Site | About | Terms of Use | Privacy Policy | Contact Copyright
    22. 22. VALSPAR Digiday, Agency Summit March 21 @scubachris / @draftfcb
    23. 23. USPS EVERYWHERE LOCATOR > 800 Pixels Wide 400 - 800 Pixels Wide < 400px Wide ON LANDING EVERYWHERE LOCATOR USPS LOGO USPS LOGO EVERYWHERE LOCATOR Boise, Idaho NEAR ME Boise, Idaho NEAR ME VIDEO CONTENT Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM USPS LOGO EVERYWHERE LOCATOR Boise, Idaho NEAR ME IM LOOKING FOR THE FOLLOWING SERVICES: IM LOOKING FOR THE FOLLOWING SERVICES: AT THE FOLLOWING LOCATIONS: IM LOOKING FORTHE FOLLOWING SERVICES: AT THE FOLLOWING LOCATIONS: Post Office Approved Postal Provider WHATSTHE DIFFERENCE? Post Office PRIVACY POLICY | NO FEAR ACT EEO DATA | FOIA | COPYRIGHT 2012 USPS. ALL RIGHTS RESERVED. POSTAL INSPECTORS INSPECTOR GENERAL THE EAGLE LOGO ISAMONG ONE OFTHE MANY TRADEMARKS OFTHE U.S. POSTAL SERVICE. PRES TRUS ERVING THE T PROMOTING INTEGRITY Approved Postal Provider AT THE FOLLOWING LOCATIONS: WHATSTHE DIFFERENCE? Approved Post Office Postal Provider WHATSTHE DIFFERENCE? PRIVACY POLICY | NO FEAR ACT EEO DATA | FOIA POSTAL INSPECTORS PRESERVING THETRUST INSPECTOR GENERAL PROMOTING INTEGRITY COPYRIGHT 2012 USPS. ALL RIGHTS RESERVED. POSTAL INSPECTORS INSPECTOR GENERAL THE EAGLE LOGO IS AMONG ONE OFTHE MANY TRADEMARKS OFTHE U.S. POSTAL SERVICE. PRESERVING THETRUST PROMOTING INTEGRITY PRIVACY POLICY | NO FEAR ACT EEO DATA | FOIA COPYRIGHT 2012 USPS. ALL RIGHTS RESERVED. THE EAGLE LOGO IS AMONG ONE OFTHE MANY TRADEMARKS OFTHE U.S. POSTAL SERVICE. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    24. 24. USPS EVERYWHERE LOCATOR Digiday, Agency Summit March 21 @scubachris / @draftfcb
    25. 25. THE TRADITIONAL WEB DESIGN PROCESS Digiday, Agency Summit March 21 @scubachris / @draftfcb
    26. 26. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    27. 27. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    28. 28. FRANKENCOMP! Digiday, Agency Summit March 21 @scubachris / @draftfcb
    29. 29. With ego bruised, the designertries to figure out how to makeelements that were neverdesigned to work together feellike one cohesive piece.
    30. 30. 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
    31. 31. These problems are compounded when your project is responsive. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    32. 32. Allow designers to get backto what we’re all here to do…CREATE Digiday, Agency Summit March 21 @scubachris / @draftfcb
    33. 33. 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
    34. 34. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    35. 35. Style Tiles allow the designer to stop building pages and empowers them to think about UI systems Digiday, Agency Summit March 21 @scubachris / @draftfcb
    36. 36. EXISTING BRANDSTYLE TILE Digiday, Agency Summit March 21 @scubachris / @draftfcb
    37. 37. STYLE TILE 1 Digiday, Agency Summit March 21 @scubachris / @draftfcb
    38. 38. STYLE TILE 2 Digiday, Agency Summit March 21 @scubachris / @draftfcb
    39. 39. STYLE TILE 3 Digiday, Agency Summit March 21 @scubachris / @draftfcb
    40. 40. ONE CODEBASETO RULE THEM ALL
    41. 41. MYTHIt costs too much to engage a developer early in the process. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    42. 42. TIME & MONEYSpend a penny now. Save a dollar later. Digiday, Agency Summit March 21 @scubachris / @draftfcb
    43. 43. HAVE YOU CONSIDERED?Slow ConnectionsBrowser SupportTouchscreensPerformanceMultimediaSecurityRetinaSEO… Digiday, Agency Summit March 21 @scubachris / @draftfcb
    44. 44. THINK BEYOND HOW A WEBSITE LOOKS THINK ABOUT HOW IT WORKS Digiday, Agency Summit March 21 @scubachris / @draftfcb
    45. 45. THINK MODULAR “Stop Thinking in Pages.Start Thinking in Systems.” - Jeremy Keith Digiday, Agency Summit March 21 @scubachris / @draftfcb
    46. 46. CREATIVE & DEVELOPMENTSHOTGUNMARRIAGEDigiday, Agency Summit March 21 @scubachris / @draftfcb
    47. 47. WATERFALLWORKFLOW Digiday, Agency Summit March 21 @scubachris / @draftfcb
    48. 48. WATERFALL WORKFLOW- Gotchas- Bottlenecks- Over-The-Fence- In-The-Dark Client- Production Crunch- Chaos Digiday, Agency Summit March 21 @scubachris / @draftfcb
    49. 49. RESPONSIVEWORKFLOW Digiday, Agency Summit March 21 @scubachris / @draftfcb
    50. 50. RESPONSIVE WORKFLOW- Tight Collaboration- Identify & Solve Problems Quickly- Client Inclusion Digiday, Agency Summit March 21 @scubachris / @draftfcb
    51. 51. EMBRACE THEFLEXIBILITY OF THE WEB Digiday, Agency Summit March 21 @scubachris / @draftfcb
    52. 52. COLLABORATIONWITHIN THE AGENCY IS IMPROVED Digiday, Agency Summit March 21 @scubachris / @draftfcb
    53. 53. “Responsive design is not about mobile.It’s not about the desktop. It’s about the web.” - Jeremy Keith Digiday, Agency Summit March 21 @scubachris / @draftfcb
    54. 54. WHAT’S NEXT?Start thinking about your contentas an asset and developing API’sto connect to different “devices” Digiday, Agency Summit March 21 @scubachris / @draftfcb
    55. 55. THANKS! Digiday, Agency Summit March 21 @scubachris / @draftfcb

    ×