TechKnowFile Conference - 2013

1. Responsive Web Design at UTL
Gordon Belray gordon.
belray@utoronto.ca
@gordonbelray
Bilal Khalid
bilal.khalid@utoronto.ca
@UTLBilal
TKF Conference 2013

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

3. Why responsive web design?
Source: http://www.lukew.com/
TKF Conference 2013

4. Source: http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/
TKF Conference 2013

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

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

7. Responsive Design basics
● Flexible grids
● Flexible images
● Media queries
TKF Conference 2013

8. Media Queries
TKF Conference 2013

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

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

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

12. Catalogue design challenges
7+ million records

13. Don Norman while
he was Vice
President of the
Advanced
Technology Group
at Apple
TKF Conference 2013

14. The Finished Design
TKF Conference 2013

21. Current UTL Catalogue

22. Current catalogue on multiple devices
TKF Conference 2013

23. Current
catalogue
mobile
TKF Conference 2013

24. New Catalogue on multiple devices
TKF Conference 2013

25. New UTL
catalogue
mobile

26. demo
http://go.utlib.ca/rwd
(NB: work in progress)
demo successful
TKF Conference 2013

27. Search
tab index for accessibility
mobile on focus popup
for search options
additional search button
mobile

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

29. Facets
off canvas layout
javascript to
reposition absolute
elements
facet icon

30. More facets

31. WAVE Evaluation:
TKF Conference 2013
NO Errors

32. Covers
TKF Conference 2013

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

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

35. Essential Reading
Marcotte, Ethan. Responsive Web
Design.
Wroblewski, Luke. Mobile First.
TKF Conference 2013

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

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

38. Thank You!
(Questions?)
TKF Conference 2013