Responsive Web Design at UTL

Gordon Belray gordon.
belray@utoronto.ca
@gordonbelray

Bilal Khalid
bilal.khalid@utoronto.c...
What is responsive web design?
"Responsive web design
(RWD) is an approach to web
design in which a site is crafted
to pro...
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 Co...
Benefits of RWD
● One URL to rule them all...
○ No matter the device
○ Better SEO

● Less fragmentation
○ Easier managemen...
Responsive web design shouldn't...
●

Bloat pages

●

Hide content on some devices

●

Ignore device conventions

●

Serve...
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 ke...
Why not Mobile First?
● Context
○ Research on a phone?

● Workflow Challenges
● Compatibility First
○ IE Woes

● Is it the...
Responsive can be Accessible
● AODA Compliance
"[By 2014], All new internet websites and
web content on those sites must c...
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>
...
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 Integr...
When?
● Focus groups - Late May
○ Selected library staff, faculty, students

● Beta public release - June
○ In parallel wi...
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...
Tools and Frameworks
● Developer Tools (Chrome, Firefox, Safari...)
● Responsive Design Bookmarklet. http:
//responsive.vi...
Thank You!
(Questions?)

TKF Conference 2013
Responsive Web Design at University of Toronto Libraries
Responsive Web Design at University of Toronto Libraries
Responsive Web Design at University of Toronto Libraries
Responsive Web Design at University of Toronto Libraries
Responsive Web Design at University of Toronto Libraries
Responsive Web Design at University of Toronto Libraries
Upcoming SlideShare
Loading in …5
×

Responsive Web Design at University of Toronto Libraries

675 views

Published on

TechKnowFile Conference - 2013

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
675
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Web Design at University of Toronto Libraries

  1. 1. Responsive Web Design at UTL Gordon Belray gordon. belray@utoronto.ca @gordonbelray Bilal Khalid bilal.khalid@utoronto.ca @UTLBilal TKF Conference 2013
  2. 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. 3. Why responsive web design? Source: http://www.lukew.com/ TKF Conference 2013
  4. 4. Source: http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/ TKF Conference 2013
  5. 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. 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. 7. Responsive Design basics ● Flexible grids ● Flexible images ● Media queries TKF Conference 2013
  8. 8. Media Queries TKF Conference 2013
  9. 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. 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. 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. 12. Catalogue design challenges 7+ million records
  13. 13. Don Norman while he was Vice President of the Advanced Technology Group at Apple TKF Conference 2013
  14. 14. The Finished Design TKF Conference 2013
  15. 15. Current UTL Catalogue
  16. 16. Current catalogue on multiple devices TKF Conference 2013
  17. 17. Current catalogue mobile TKF Conference 2013
  18. 18. New Catalogue on multiple devices TKF Conference 2013
  19. 19. New UTL catalogue mobile
  20. 20. demo http://go.utlib.ca/rwd (NB: work in progress) demo successful TKF Conference 2013
  21. 21. Search tab index for accessibility mobile on focus popup for search options additional search button mobile
  22. 22. 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
  23. 23. Facets off canvas layout javascript to reposition absolute elements facet icon
  24. 24. More facets
  25. 25. WAVE Evaluation: TKF Conference 2013 NO Errors
  26. 26. Covers TKF Conference 2013
  27. 27. 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...
  28. 28. 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
  29. 29. Essential Reading Marcotte, Ethan. Responsive Web Design. Wroblewski, Luke. Mobile First. TKF Conference 2013
  30. 30. 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
  31. 31. 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
  32. 32. Thank You! (Questions?) TKF Conference 2013

×