Responsive Web Design

A single web site design which dynamically responds (adapts) to the characteristics (screen width, resolution, capabilities) of the display device.

The same web site at the same URL works and provides an appropriate experience across all devices:

• smartphone
• tablet
• laptop
• desktop
• large-screen tv

Being Responsive

• Responsive Layout: dynamically adjust the layout to best suit the available window size (width).
• Responsive Content: dynamically adjust embedded media (text, tables, images, videos) to the available space and display charactersistics (resolution).
• Responsive Navigation: e.g. collapse menus to a single button.
• Responsive Interaction: sniff features to selectively add support for location, orientation, tilt, shaking, touch gestures (swipe, pinch, …), etc.

Resources

• Ethan Marcotte; Responsive Web Design; A Book Apart, 2011. 098444257X

  2^nd Edition coming 03 Dec 2014!

• Scott Jehl; Responsible Responsive Design; A Book Apart, 19 Nov 2014. 1937557162
• Tim Kadlec; Implementing Responsive Design; New Riders, 10 Aug 2012. 0321821688
• Stephen Hay; Responsive Design Workflow; New Riders, 05 Apr 2013. 0321887867
• Ben Frain; Responsive Web Design with HTML5 and CSS3; Packt Publishing, 10 Apr 2012. 9350237881

Online Resources

• Matt Andrews; Responsive Design at the Guardian or How I learned to Stop Worrying and Love the Mobile Web; 2013. http://mattandrews.info/talks/port80-2013/
• BBC News; Cutting the Mustard; Responsive News, 08 Mar 2012. http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

Separate Mobile (m.) and Desktop Web Sites

Examples of Responsive Web Sites

Lists of responsive web sites:

• Eivind Uggedal; mediaqueri.es
• DesignModo; http://designmodo.com/responsive-design-examples/

Individual examples of responsive web sites:

• The Boston Globe; bostonglobe.com
• Smashing Magazine; smashingmagazine.com
• Time; time.com
• engadget; engadget.com
• BBC One; http://bbc.co.uk/bbcone/
• Channel 4 News; http://channel4.com/news/
• The Guardian; http://theguardian.com/uk?view=mobile
• Gov.UK; http://gov.uk/
• TED; http://ted.com/
• Awwwards; http://awwwards.com/

Breakpoint Diagram

Breakpoints

• Fluid Layout Between Breakpoints:
  • Heights in em or rem.
  • widths in %, em, or rem.
• Change Layout at Breakpoint:
  • Say, from 2-column to 3-column layout.

Specifying Breakpoints with CSS3 Media Queries

/* settings for window-width: narrow */
@media only all and (max-width: 40em) {
...
}

/* settings for window-width: medium */
@media only all and (min-width: 40em) and (max-width: 60em) {
...
}

/* settings for window-width: wide */
@media only all and (min-width: 60em) {
...
}

Responsive Design Approaches

Responsive design approaches:

• Progressive Enhancement:
  1. Build baseline first (HTML only)
  2. Then add styling (CSS)
  3. Then add more interactivity (Javascript)

  [rather than graceful degradation]

• Mobile First:
  1. Build for mobile first (forces setting of priorities).
  2. Then expand to other devices.

Responsive Text (Paragraphs)

• Provide text in different forms and lengths.
  http://www.frankieroberto.com/responsive_text
• Limit characters per line for wide displays (or use CSS multicolmun).
• Pack content more tightly on narrow screens.
• http://mobile.smashingmagazine.com/2012/02/27/ever-justification-for-responsive-text/

Responsive Tables

• Responsive Tables Demo: Simon Elvery.
  http://elvery.net/demo/responsive-tables/
• Tablesaw: jquery responsive tables.
  https://filamentgroup.github.io/tablesaw/demo/kitchensink.html
• Mock table: Replace with mock table linked to full table.
  http://jsbin.com/apane6/14
• Selective column display: Prioritise columns, choose higher priority columns if too little space. Others can be accessed by dropdown.
  http://filamentgroup.com/examples/rwd-table-patterns/
• Collapse to list: Table collapses to a list. Each row becomes a list item with set of field and value pairs.
  http://css-tricks.com/examples/ResponsiveTables/responsive.php
http://mobifreaks.com/user-interface/responsive-and-seo-friendly-data-tables/
http://view.jquerymobile.com/1.3.1/dist/demos/examples/tables/movie-list.html
• Transpose and horizontal scroll:
  http://dbushell.com/2012/01/05/responsive-tables-2/
http://codepen.io/JasonAGross/full/rjmyx
• Sticky First Column, Scroll the Other Columns:
  http://zurb.com/playground/responsive-tables
• Wrapped columns: Use inline-block tp wrap columns onto next line.
  http://libcodes.com/codes/css3-rainbow-responsive-price-tables
• Rainbow tables: Colour-coding to identify cells corresponding to column header.
  http://bradczerniak.com/responsivetables/

Responsive Images

• Dynamic image resizing
• Dynamic image cropping:
  • http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
  • http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/
  • http://zomigi.com/blog/hiding-and-revealing-portions-of-images/
• Dynamic rendering via image server:

  http://iipimage.sourceforge.net/2012/08/responsive-images-using-iipimage/
http://www.iandevlin.com/blog/2013/10/responsive-web-design/resimagecrop-a-responsive-image-solution

• New HTML5 syntax:

  picture element --> RespImg Syntax proposal (src-n)

  http://tabatkins.github.io/specs/respimg/Overview.html
  

  <img alt="Photo of Keith."
    src-1="(max-width: 300px) keith-s.jpg"
    src-2="(max-width: 600px) keith-m.jpg"
    src="keith-l.jpg" />
  

  picturefill polyfill

• Adapt images based on screen res (retina display):

  @media print and (min-resolution: 300dpi) {...}
  

• Responsive SVG:

  • Media Queries Inside SVG:
    http://blog.cloudfour.com/media-queries-in-svg-images/
http://people.opera.com/andreasb/demos/demos_svgopen2009/update/svgscalelogo.html

  • Responsive Raster Images Inside SVG:

    http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/

Responsive Navigation

• Collapse menus if too little space
  http://coding.smashingmagazine.com/2012/02/13/progressive-and-responsive-navigation/
http://www.hongkiat.com/blog/responsive-web-nav/
• Off-canvas navigation
  http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

Responsive Interaction

• Larger Target Sizes for Tap
• Shake
• Tilt
• Swipe
  http://www.onextrapixel.com/2012/06/13/really-useful-resources-and-tools-for-responsive-web-design/
• Pinch
• Orientation
  

  @media all and (orientation: landscape) {...}
  

• Location

Conferences

• Breaking Development; Web design and development for mobile devices. Three conferences per year. http://bdconf.com/ Videos available on Vimeo channel http://vimeo.com/bdconf
• Fronteers; Every Oct in Amsterdam. http://fronteers.nl/congres/2013 Videos available on Vimeo channel: http://vimeo.com/fronteers
• Web Directions; Once a year in Australia. http://webdirections.org/ Videos available: http://webdirections.org/videos/
• Mobilism; Every may (2011-2013) in Amsterdam. http://mobilism.nl/ Videos available: http://mobilism.nl/2013/coverage
• An Event Apart; 8 conferences a year around the US. http://aneventapart.com/ Videos available: http://aneventapart.com/news/tag/video

Videos

• Stephen Hay; Cutting the Mustard; Responsive News, 08 Mar 2012. http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
• Jason Grigsby; Responsive Design at the Guardian or How I learned to Stop Worrying and Love the Mobile Web; 2013. http://mattandrews.info/talks/port80-2013/

Thank You

Prof. Keith Andrews

IICM, Graz University of Technology, Austria

Web site:
http://www.iicm.tugraz.at/keith/

Slides:
http://keithandrews.com/talks/2014/kmu2014/