1. Responsive
Web Design
from the
Trenches
Jeff Wisniewski
Web Services Librarian
University of Pittsburgh
jeffw@pitt.edu
@jeffwisniewski

2. What is responsive?
Crafting a single site to provide an optimal
experience across a wide range of devices

3. Why responsive?
Because predicting the future is really hard!

4. You knew this slide was coming

5. Who has gone responsive?
 Corporate


Microsoft
TechCrunch
 Academic


Yale
Grand Valley State
 Public


Canton Public
Green County

10. Background
 Old
site 3+ years old
 Mobile app
 Dual silos

11. 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

12. Responsive is…
 Mobile
first thinking and doing
 Content strategy
 Responsively designing

13. 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

14. Guiding Principle: Content First
It all flows from the content out…



Inventory
Rewriting
Prioritization

17. 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

18. Images
 Took
an ax to most of them
 Does the image add value?

19. X
X

20. 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/

21. Responsive How-To
1.
2.
3.
A flexible, grid based layout
Flexible images and media
Media queries

22. Don’t go chasin’ waterfall…
…processes
Responsive required adjustment: less
waterfall, more agile

23. Responsive Process
Content inventory
Content prioritization
Content reference wireframes
Rewrite all content (mobile first)

24. 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)

25. 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…”

26. 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.

27. Tools
 Skeleton
http://www.getskeleton.com/
 Foundation
http://foundation.zurb.com/
 Bootstrap
http://twitter.github.io/bootstrap/
 HTML5 Boilerplate
http://html5boilerplate.com/

28. 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

29. 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

30. Questions? Experiences to
Share?

31. Thanks!