Responsive Design For The Mobile Web
-
Upload
university-of-toronto-libraries-information-technology-services -
Category
Technology
-
view
391 -
download
2
description
Transcript of Responsive Design For The Mobile Web
Responsive Design for the mobile web
Gordon BelrayBilal KhalidSian Meikle
Dillon Moore
OLA Superconference 2013
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
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/
Why responsive web design?
Source: http://www.psdtowordpress.eu/blog/responsive-design
Output Input
From the User’s Point of View
Standard URLs regardless of deviceHazards of browser detection and redirectionDevice context ≠ user intentWhat is the mobile use case?The Tesco story
"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/
From the Developer’s Point of View
Most efficient content development strategyAlternative to fragmenting content Not silver bullet, or one-size-fits-all solution Content auditing“Future-proofing”
Responsive web design shouldn't...
Bloat pagesHide content on some devicesIgnore device conventionsServe same experience to all users
Responsive Design basics
● Flexible grids
● Flexible images
● Media queries
Design process changes
● Content
● Reconsider assumptions about users
● Don't ignore restrictions and possibilities of
new devices
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
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
Objections?
If these trends continue...
Navigation: global nav
G. Hagedorn - CC by-sa 3.0 http://commons.wikimedia.org/wiki/File:Smartphone_icon.svg
Navigation: global nav options
● Accordion ● Anchor link to footer
Navigation: global nav options
● Select list ● Left slide
Navigation: global nav options
● Toggle button
Navigation: local nav
● So many tabs...
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
Tables
● Fluid isn't enough
Forms
● Consider single column forms
● Placement of labels
● Placement of examples, guides, error
messages
Traditional Wireframing
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
Foundation
foundation.zurb.com
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
Foundation
Foundation
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?
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)
The UTL Experience
● Context○ Research on a phone?
● Workflow Challenges
● Compatibility First○ IE Woes
● Is it the Final Frontier?○ Google Glass? iWatch?
Why not Mobile First?
Catalogue design challenges
Current UTL Catalogue
Current catalogue on multiple devices
Current cataloguemobile
The New, Responsive UTL Catalogue
Demo
New Catalogue on multiple devices
demo
New UTL catalogue mobile
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
Other Considerations
● Performance○ Resource limitations
● Reducing Payload○ Selective Loading, Polyfills
● Server-side Device detection○ WURFL, Device Atlas
● Hybrid RWD
Find out more
Ethan Marcotte, “Responsive Web Design”, A List Apart, May 25, 2010http://www.alistapart.com/articles/responsive-web-design/
"HRWD - Hybrid Responsive Web Design" Brett Jankord Designer / Developer Blog, Feb 29, 2012http://www.brettjankord.com/2012/02/29/hrwd-hybrid-responsive-web-design/
...anything from Beyond the Mobile Web, Stephanie Rieger's blog, http://stephanierieger.com/
Find out more (cont'd)
"Mobile First Design: Why It’s Great and Why It Sucks"by Joshua Johnson on March 13, 2012http://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-images-solution-should-you-use/ .
Thank You!
(Questions?)