This document discusses responsive web design for libraries. It begins with an overview of responsive design and why it benefits both users and developers. It then discusses two university library case studies of implementing responsive designs. The rest of the document delves into various aspects of responsive design such as navigation, images, tables, forms and more. It provides examples of using frameworks like Foundation to create responsive prototypes. Overall, the document serves as a guide for libraries to understand responsive design principles and challenges in implementing them.
HTML Injection Attacks: Impact and Mitigation Strategies
Responsive Design For The Mobile Web
1. Responsive Design
for the mobile web
Gordon Belray
Bilal Khalid
Sian Meikle
Dillon Moore
OLA Superconference 2013
2. What is responsive web design and
why do we like it?
○ For the user
○ For the developer
Two takes on responsive web design in
libraries:
○ Wilfrid Laurier University
○ University of Toronto
3. 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
http://alistapart.com/d/responsive-web-design/
4. Why responsive web design?
Source: http://www.psdtowordpress.eu/blog/responsive-design
Output
Input
5. From the User’s Point of View
Standard URLs regardless of device
Hazards of browser detection and redirection
Device context ≠ user intent
What is the mobile use case?
The Tesco story
6. "Mobile sites should be minimal,
functional with everything designed to
help the user complete a task and then
go"
…not a bad goal for any web site
Bruce Lawson, "Why we shouldn't make separate mobile web sites",
Smashing Magazine, April 19 2012
http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/
7. From the Developer’s Point of View
Most efficient content development strategy
Alternative to fragmenting content
Not silver bullet, or one-size-fits-all solution
Content auditing
“Future-proofing”
8. Responsive web design shouldn't...
Bloat pages
Hide content on some devices
Ignore device conventions
Serve same experience to all users
10. Design process changes
● Content
● Reconsider assumptions about users
● Don't ignore restrictions and possibilities of
new devices
11. Mobile First
"... an experience
focused on the key
tasks users want to
accomplish without
the extraneous
detours and general
interface debris that
litter many of today’s
websites."
-p.22
12. Mobile First
1. Prepare for the growth of the mobile web
2. Space limitations force you to focus on only
the essential features
3. Opens up the new possibilities of mobile
technology
Adapted from Wrobleski
19. Flexible Media
● Images
○ Possible with CSS, but with caveats
○ Javascript options, such as adaptive images
○ How will this image look on a small screen?
● Videos
○ Possible with CSS when using HTML5 <video>
○ Embedded video (iframes)
○ Again, consider javascript options, such as fitvid.js
23. Responsive Prototyping
● Front-end frameworks for creating
responsive prototypes
● Usually include responsive grid, breakpoints,
javascript plug-ins, styled features
● Many examples, Twitter Bootstrap and Zurb
Foundation among the most popular
25. Foundation
● Sass (Syntactically Awesome StyleSheets)
grids
● HTML pages
● lets you view your content in a responsive
design
● many features already implemented - great
for new ideas
28. Problems with Prototyping
● Easy to get pulled back into desktop first
● Everyone wants to see the desktop version
anyway
● Now how do we make it work with Drupal?
29. Responsive with Drupal
● Many major starter themes are responsive,
including Omega and Zen
● Projects are underway to create themes for
Foundation and Bootstrap
● Consider trade-offs (e.g., commitment to
accessibility, availability of support)
31. Why not Mobile First?
● Context
○ Research on a phone?
● Workflow Challenges
● Compatibility First
○ IE Woes
● Is it the Final Frontier?
○ Google Glass? iWatch?
42. Search
tab index for accessibility
mobile on focus popup
for search options
additional search button
mobile
43. 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
47. Find out more
Ethan Marcotte, “Responsive Web Design”,
A List Apart, May 25, 2010
http://www.alistapart.com/articles/responsive-web-design/
"HRWD - Hybrid Responsive Web Design"
Brett Jankord Designer / Developer Blog, Feb 29, 2012
http://www.brettjankord.com/2012/02/29/hrwd-hybrid-responsive-web-design/
...anything from Beyond the Mobile Web,
Stephanie Rieger's blog, http://stephanierieger.com/
48. Find out more (cont'd)
"Mobile First Design: Why It’s Great and Why It Sucks"
by Joshua Johnson on March 13, 2012
http://designshack.net/articles/css/mobilefirst/
"Media Queries"
http://mediaqueri.es/
"Responsive Navigation Patterns" by Brad Frost, February 24, 2012
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
"Which Responsive Images Solution Should You Use?" by
Chris Coyier May 11, 2012 http://css-tricks.com/which-responsive-imagessolution-should-you-use/ .