Responsive Web Design from the Trenches

Jeff WisniewskiWeb Services LibrarianUniversity 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 firstALL 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 FirstIt 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-image-

solution/

Responsive How-To1. A flexible, grid based layout 2. Flexible images and media3. Media queries

Don’t go chasin’ waterfall……processes

Responsive required adjustment: less waterfall, more agile

Responsive ProcessContent inventoryContent prioritizationContent reference wireframesRewrite all content (mobile first)

Responsive ProcessLinear design (phone)Breakpoint graphDesign for the various breakpointsSketch, wireframeUsability testFunctional testing (on multiples of devices and form factors), repeatHTML design prototype (this comes scary late)

One month to launchWeb 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 Skeletonhttp://www.getskeleton.com/ Foundationhttp://foundation.zurb.com/ Bootstraphttp://twitter.github.io/bootstrap/ HTML5 Boilerplatehttp://html5boilerplate.com/

ToolsDrupal 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!