08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Responsive Web Design at University of Toronto Libraries
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
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
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
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
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
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