responsive web design from the trenches
DESCRIPTION
TRANSCRIPT
![Page 1: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/1.jpg)
Responsive Web Design from the Trenches
Jeff WisniewskiWeb Services LibrarianUniversity of Pittsburgh
[email protected]@jeffwisniewski
![Page 2: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/2.jpg)
What is responsive?Crafting a single site to provide an optimal experience across a wide range of devices
![Page 3: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/3.jpg)
Why responsive?Because predicting the future is really hard!
![Page 4: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/4.jpg)
You knew this slide was coming
![Page 5: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/5.jpg)
Who has gone responsive? Corporate
Microsoft TechCrunch
Academic Yale Grand Valley State
Public Canton Public Green County
![Page 6: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/6.jpg)
![Page 7: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/7.jpg)
![Page 8: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/8.jpg)
![Page 9: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/9.jpg)
![Page 10: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/10.jpg)
Background Old site 3+ years old Mobile app Dual silos
![Page 11: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/11.jpg)
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
![Page 12: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/12.jpg)
Responsive is… Mobile first thinking and doing Content strategy Responsively designing
![Page 13: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/13.jpg)
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
![Page 14: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/14.jpg)
Guiding Principle: Content FirstIt all flows from the content out…
Inventory Rewriting Prioritization
![Page 15: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/15.jpg)
![Page 16: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/16.jpg)
![Page 17: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/17.jpg)
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
![Page 18: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/18.jpg)
Images Took an ax to most of them Does the image add value?
![Page 19: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/19.jpg)
X
X
![Page 20: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/20.jpg)
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/
![Page 21: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/21.jpg)
Responsive How-To1. A flexible, grid based layout 2. Flexible images and media3. Media queries
![Page 22: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/22.jpg)
Don’t go chasin’ waterfall……processes
Responsive required adjustment: less waterfall, more agile
![Page 23: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/23.jpg)
Responsive ProcessContent inventoryContent prioritizationContent reference wireframesRewrite all content (mobile first)
![Page 24: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/24.jpg)
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)
![Page 25: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/25.jpg)
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…”
![Page 26: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/26.jpg)
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.
![Page 27: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/27.jpg)
Tools Skeletonhttp://www.getskeleton.com/ Foundationhttp://foundation.zurb.com/ Bootstraphttp://twitter.github.io/bootstrap/ HTML5 Boilerplatehttp://html5boilerplate.com/
![Page 28: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/28.jpg)
ToolsDrupal and WP themes
We used Skeleton for Drupal:
https://drupal.org/project/skeletontheme
Tried Omega and Bootstrap, both too much solution for us
![Page 29: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/29.jpg)
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
![Page 30: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/30.jpg)
Questions? Experiences to Share?
![Page 31: Responsive Web Design from the Trenches](https://reader036.vdocument.in/reader036/viewer/2022081414/54c81b464a7959862e8b45ac/html5/thumbnails/31.jpg)
Thanks!