• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design from the Trenches
 

Responsive Web Design from the Trenches

on

  • 358 views

 

Statistics

Views

Total Views
358
Views on SlideShare
357
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Started with Omega, tried

Responsive Web Design from the Trenches Responsive Web Design from the Trenches Presentation Transcript

  • Responsive Web Design from the Trenches Jeff Wisniewski Web Services Librarian University of Pittsburgh jeffw@pitt.edu @jeffwisniewski
  • What is responsive? Crafting a single site to provide an optimal experience across a wide range of devices
  • Why responsive? Because predicting the future is really hard!
  • You knew this slide was coming
  • Who has gone responsive?  Corporate   Microsoft TechCrunch  Academic   Yale Grand Valley State  Public   Canton Public Green County
  • Background  Old site 3+ years old  Mobile app  Dual silos
  • 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
  • Responsive is…  Mobile first thinking and doing  Content strategy  Responsively designing
  • 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
  • Guiding Principle: Content First It all flows from the content out…    Inventory Rewriting Prioritization
  • 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
  • Images  Took an ax to most of them  Does the image add value?
  • X X
  • Responsive images  Serve different size images, or different images entirely, according to platform  Avoid simply hiding them since they’re still served http://mobile.smashingmagazine.com/2013 /07/08/choosing-a-responsive-imagesolution/
  • Responsive How-To 1. 2. 3. A flexible, grid based layout Flexible images and media Media queries
  • Don’t go chasin’ waterfall… …processes Responsive required adjustment: less waterfall, more agile
  • Responsive Process Content inventory Content prioritization Content reference wireframes Rewrite all content (mobile first)
  • 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)
  • 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…”
  • 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.
  • Tools  Skeleton http://www.getskeleton.com/  Foundation http://foundation.zurb.com/  Bootstrap http://twitter.github.io/bootstrap/  HTML5 Boilerplate http://html5boilerplate.com/
  • Tools Drupal and WP themes We used Skeleton for Drupal: https://drupal.org/project/skeletontheme Tried Omega and Bootstrap, both too much solution for us
  • 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
  • Questions? Experiences to Share?
  • Thanks!