Responsive Approaches: Redesigning websites for Duke, NCSU & UNC Libraries
Responsive Web Design at University of Toronto Libraries
38
Responsive Web Design at UTL Gordon Belray gordon. [email protected] @gordonbelray Bilal Khalid [email protected] @UTLBilal TKF Conference 2013
-
Upload
university-of-toronto-libraries-information-technology-services -
Category
Technology
-
view
261 -
download
2
description
TechKnowFile Conference - 2013
Transcript of Responsive Web Design at University of Toronto Libraries
Responsive Web Design at UTL
Gordon Belray [email protected]
@gordonbelray
Bilal [email protected]
@UTLBilal
TKF Conference 2013
"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
Why responsive web design?
Source: http://www.lukew.com/
TKF Conference 2013
TKF Conference 2013
Source: http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/
● 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
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...
TKF Conference 2013
Source: http://www.lukew.com/ff/entry.asp?933
● 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
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
TKF Conference 2013
Don Norman while he was Vice President of the Advanced Technology Group at Apple
The Finished Design
TKF Conference 2013
Current UTL Catalogue
Current catalogue on multiple devices
TKF Conference 2013
Current cataloguemobile
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 buttonmobile
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: NO Errors
TKF Conference 2013
Covers
TKF Conference 2013
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
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/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
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
