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?)