Skip to main content
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!