Responsive Web Design from the Trenches


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Started with Omega, tried
  • Responsive Web Design from the Trenches

    1. 1. Responsive Web Design from the Trenches Jeff Wisniewski Web Services Librarian University of Pittsburgh @jeffwisniewski
    2. 2. What is responsive? Crafting a single site to provide an optimal experience across a wide range of devices
    3. 3. Why responsive? Because predicting the future is really hard!
    4. 4. You knew this slide was coming
    5. 5. Who has gone responsive?  Corporate   Microsoft TechCrunch  Academic   Yale Grand Valley State  Public   Canton Public Green County
    6. 6. Background  Old site 3+ years old  Mobile app  Dual silos
    7. 7. Why not dedicated mobile?  Data had us questioning the “mobile use case” scenario  Maintenance redundancy  No need to leverage special device capabilities for main library site  Near future proofing
    8. 8. Responsive is…  Mobile first thinking and doing  Content strategy  Responsively designing
    9. 9. Guiding principle: Mobile first ALL of your content is now MOBILE. So be kind. Design FIRST for mobile, and build out Design with touch in mind (larger targets) and ample whitespace Images that ADD VALUE
    10. 10. Guiding Principle: Content First It all flows from the content out…    Inventory Rewriting Prioritization
    11. 11. Content  Rewrote virtually everything  Writing for the web is now writing for mobile  Held library wide writing workshops had ~50 staff participate and rewrite content
    12. 12. Images  Took an ax to most of them  Does the image add value?
    13. 13. X X
    14. 14. Responsive images  Serve different size images, or different images entirely, according to platform  Avoid simply hiding them since they’re still served /07/08/choosing-a-responsive-imagesolution/
    15. 15. Responsive How-To 1. 2. 3. A flexible, grid based layout Flexible images and media Media queries
    16. 16. Don’t go chasin’ waterfall… …processes Responsive required adjustment: less waterfall, more agile
    17. 17. Responsive Process Content inventory Content prioritization Content reference wireframes Rewrite all content (mobile first)
    18. 18. Responsive Process Linear design (phone) Breakpoint graph Design for the various breakpoints Sketch, wireframe Usability test Functional testing (on multiples of devices and form factors), repeat HTML design prototype (this comes scary late)
    19. 19. One month to launch Web committee member: “ummm are you like, going to start building the site soon?” Me: “we HAVE been building the site….up here…”
    20. 20. Tools  Frameworks package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.
    21. 21. Tools  Skeleton  Foundation  Bootstrap  HTML5 Boilerplate
    22. 22. Tools Drupal and WP themes We used Skeleton for Drupal: Tried Omega and Bootstrap, both too much solution for us
    23. 23. Tips, Tricks, Lessons Learned  Was hard to resist the urge to start coding earlier  Rewriting content was time very well spent  We’re still handing off to many non optimized sites/services  Focus on content, not devices  Design in text  Used personas to test platform use cases
    24. 24. Questions? Experiences to Share?
    25. 25. Thanks!