Responsive Web Design at University of Toronto Libraries
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design at University of Toronto Libraries

on

  • 295 views

TechKnowFile Conference - 2013

TechKnowFile Conference - 2013

Statistics

Views

Total Views
295
Views on SlideShare
267
Embed Views
28

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 28

http://itsdev.library.utoronto.ca 21
http://its.library.utoronto.ca 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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

Responsive Web Design at University of Toronto Libraries Responsive Web Design at University of Toronto Libraries Presentation Transcript

  • Responsive Web Design at UTL Gordon Belray gordon. belray@utoronto.ca @gordonbelray Bilal Khalid bilal.khalid@utoronto.ca @UTLBilal TKF Conference 2013
  • What is responsive web design? "Responsive web design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices (from desktop computer monitors to mobile phones)." - Wikipedia TKF Conference 2013 http://alistapart.com/d/responsive-web-design/
  • Why responsive web design? Source: http://www.lukew.com/ TKF Conference 2013
  • Source: http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/ TKF Conference 2013
  • Benefits of RWD ● One URL to rule them all... ○ No matter the device ○ Better SEO ● Less fragmentation ○ Easier management of data ○ Especially as the device market grows ● Uniformity of experience ○ Your brand travels with the device ● Can be easier to develop* ○ *not necessarily TKF Conference 2013
  • Responsive web design shouldn't... ● Bloat pages ● Hide content on some devices ● Ignore device conventions ● Serve same experience to all users ● Blindly assume user needs/context TKF Conference 2013
  • Responsive Design basics ● Flexible grids ● Flexible images ● Media queries TKF Conference 2013
  • Media Queries TKF Conference 2013
  • Mobile First ● Tap into an exploding (exploded?) market ○ See any recent market research ● Forces you to focus on your key info, actions ○ Real Estate, resources at a premium ● Extends your capabilities ○ GPS, Device Camera, Accelerometer... Source: http://www.lukew.com/ff/entry.asp?933 TKF Conference 2013
  • Why not Mobile First? ● Context ○ Research on a phone? ● Workflow Challenges ● Compatibility First ○ IE Woes ● Is it the Final Frontier? ○ Google Glass? iWatch? TKF Conference 2013
  • Responsive can be Accessible ● AODA Compliance "[By 2014], All new internet websites and web content on those sites must conform with WCAG 2.0 level A"* ● Take into account colour contrast, tab index ○ What happens if you took away all CSS? JS? ● Use ARIA to make "Rich" web applications accessible ○ Roles, states, properties * Source: http://accessontario.files.wordpress.com/2012/01/iasr-compliance-timelines-summary-accessibility-ontario.pdf TKF Conference 2013
  • Catalogue design challenges 7+ million records
  • Don Norman while he was Vice President of the Advanced Technology Group at Apple TKF Conference 2013
  • The Finished Design TKF Conference 2013
  • Current UTL Catalogue
  • Current catalogue on multiple devices TKF Conference 2013
  • Current catalogue mobile TKF Conference 2013
  • New Catalogue on multiple devices TKF Conference 2013
  • New UTL catalogue mobile
  • demo http://go.utlib.ca/rwd (NB: work in progress) demo successful TKF Conference 2013
  • Search tab index for accessibility mobile on focus popup for search options additional search button mobile
  • Navigation hide desktop / tablet navigation and replace with standard menu icon wrap with <a href="#footer"></a> <footer> <a name="footer"></a> include a back button
  • Facets off canvas layout javascript to reposition absolute elements facet icon
  • More facets
  • WAVE Evaluation: TKF Conference 2013 NO Errors
  • Covers TKF Conference 2013
  • Coming Soon ● ● ● ● ● ● ● ● Covers Zotero Marked Records Alternative views RSS/JSON feeds Browse lists Authorities Integration RDA TKF Conference 2013 ● ● ● ● ● ● ● Search completion Landing pages User accounts Geolocation Shelf Browse Stackmap Sirsi API and much more...
  • When? ● Focus groups - Late May ○ Selected library staff, faculty, students ● Beta public release - June ○ In parallel with current catalogue ● Public launch - August ○ Most major, core features released ● Phase 2 - December 2013/January 2014 ○ New features TKF Conference 2013
  • Essential Reading Marcotte, Ethan. Responsive Web Design. Wroblewski, Luke. Mobile First. TKF Conference 2013
  • More Reading ● Designing a responsive, Retina-friendly site (Intro + Part 1, Part 2). http://paulstamatiou. com/responsive-retina-blog-development-part-1 ● Tablets trump smartphone in global website traffic. http://blogs.adobe.com/digitalmarketing/digitalindex/tablets-trump-smartphones-in-global-websitetraffic/ ● Accessibility in Responsive Web Design. http: //www.slideshare.net/wearesigma/accessibility-inresponsive-web-design TKF Conference 2013
  • Tools and Frameworks ● Developer Tools (Chrome, Firefox, Safari...) ● Responsive Design Bookmarklet. http: //responsive.victorcoulon.fr/ ● WAVE Bookmarket. http://wave.webaim.org/help ● Respond.js. https://github.com/scottjehl/Respond ● Other Tools: Initializr, Modernizr, MatchMedia.js, Picturefill... ● Frameworks: Twitter Bootstrap, Zurb Foundation 4, Skeleton... TKF Conference 2013
  • Thank You! (Questions?) TKF Conference 2013