responsive web design at university of toronto libraries
Upload: university-of-toronto-libraries-information-technology-services
Post on 20-May-2015
263 views
DESCRIPTION
TechKnowFile Conference - 2013TRANSCRIPT
![Page 1: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/1.jpg)
Responsive Web Design at UTL
Gordon Belray [email protected]
@gordonbelray
Bilal [email protected]
@UTLBilal
TKF Conference 2013
![Page 2: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/2.jpg)
"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
What is responsive web design?
http://alistapart.com/d/responsive-web-design/TKF Conference 2013
![Page 3: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/3.jpg)
Why responsive web design?
Source: http://www.lukew.com/
TKF Conference 2013
![Page 4: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/4.jpg)
TKF Conference 2013
Source: http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/
![Page 5: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/5.jpg)
● 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
Benefits of RWD
TKF Conference 2013
![Page 6: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/6.jpg)
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
![Page 7: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/7.jpg)
Responsive Design basics
● Flexible grids
● Flexible images
● Media queries
TKF Conference 2013
![Page 8: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/8.jpg)
Media Queries
TKF Conference 2013
![Page 9: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/9.jpg)
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...
TKF Conference 2013
Source: http://www.lukew.com/ff/entry.asp?933
![Page 10: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/10.jpg)
● Context○ Research on a phone?
● Workflow Challenges
● Compatibility First○ IE Woes
● Is it the Final Frontier?○ Google Glass? iWatch?
Why not Mobile First?
TKF Conference 2013
![Page 11: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/11.jpg)
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
![Page 12: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/12.jpg)
Catalogue design challenges 7+ million records
![Page 13: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/13.jpg)
TKF Conference 2013
Don Norman while he was Vice President of the Advanced Technology Group at Apple
![Page 14: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/14.jpg)
The Finished Design
TKF Conference 2013
![Page 15: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/15.jpg)
![Page 16: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/16.jpg)
![Page 17: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/17.jpg)
![Page 18: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/18.jpg)
![Page 19: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/19.jpg)
![Page 20: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/20.jpg)
![Page 21: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/21.jpg)
Current UTL Catalogue
![Page 22: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/22.jpg)
Current catalogue on multiple devices
TKF Conference 2013
![Page 23: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/23.jpg)
Current cataloguemobile
TKF Conference 2013
![Page 24: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/24.jpg)
New Catalogue on multiple devices
TKF Conference 2013
![Page 25: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/25.jpg)
New UTL catalogue mobile
![Page 26: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/26.jpg)
demo
http://go.utlib.ca/rwd
(NB: work in progress)
demo successful
TKF Conference 2013
![Page 27: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/27.jpg)
Search
tab index for accessibility
mobile on focus popup for search options
additional search buttonmobile
![Page 28: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/28.jpg)
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
![Page 29: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/29.jpg)
Facets
off canvas layout
javascript to reposition absolute elements
facet icon
![Page 30: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/30.jpg)
More facets
![Page 31: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/31.jpg)
WAVE Evaluation: NO Errors
TKF Conference 2013
![Page 32: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/32.jpg)
Covers
TKF Conference 2013
![Page 33: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/33.jpg)
Coming Soon
● Covers● Zotero● Marked Records● Alternative views● RSS/JSON feeds● Browse lists● Authorities Integration● RDA
● Search completion● Landing pages● User accounts● Geolocation● Shelf Browse● Stackmap● Sirsi API
and much more...
TKF Conference 2013
![Page 34: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/34.jpg)
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
![Page 35: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/35.jpg)
Essential Reading
Marcotte, Ethan. Responsive Web Design.
Wroblewski, Luke. Mobile First.
TKF Conference 2013
![Page 36: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/36.jpg)
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/digital-index/tablets-trump-smartphones-in-global-website-traffic/
● Accessibility in Responsive Web Design. http://www.slideshare.net/wearesigma/accessibility-in-responsive-web-design
TKF Conference 2013
![Page 37: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/37.jpg)
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
![Page 38: Responsive Web Design at University of Toronto Libraries](https://reader035.vdocuments.mx/reader035/viewer/2022062704/555bf3b3d8b42a5b448b489a/html5/thumbnails/38.jpg)
Thank You!
(Questions?)
TKF Conference 2013