Resources

• Ethan Marcotte; Responsive Web Design; A Book Apart, 2011. 098444257X
• 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

Responsive Web Design

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

Responsive web design is a combination of:

1. Responsive layout: dynamically adjusting the layout to best suit the available window size.
2. Responsive content: dynamically adjusting embedded media (text, images, videos) to the available space and display charactersistics.
3. Responsive navigation: e.g. collapsing menus to one Select item.
4. Responsive input: feature sniffing to selectively add support for features such as location, orientation, tilt, shaking, and touch gestures.

Responsive web design allows a single web site to adapt to a variety of display sizes and devices.

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
• BBC One; http://bbc.co.uk/bbcone/
• Channel 4 News; http://channel4.com/news/
• The Guardian; http://theguardian.com/uk?view=mobile

Breakpoint Diagram

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) {
...
}

1. Responsive Layout

Design a fluid (liquid) layout for each of the widths in the breakpoint diagram:

• http://www.maxdesign.com.au/articles/css-layouts/ or Google search for "CSS liquid two-column layouts" or "CSS liquid three-column layouts".
• Use relative units (%, em, rem) to specify widths of columns (box model issue).
• Float divs next to each other for columns (clearfix issue).
• Use display: inline-block to place divs next to each other for columns (whitespace issue).

2. Responsive Content

Structured Text

Provide internel structure to chunks of textual content:

• Think in terms of content chunks and sub-chunks (which map to CMS database fields).
• Specifying teasers and summaries provides options for design later.

Structured Text for News Stories

<article>
<h1>Title<h1>

<div class="teaser">
<p>Some teaser text...</p>
</div>

<div class="summary">
<p>A concise one-paragraph summary of the story.</p>
</div>

<div class="story">
<p>The full story.</p>
<p>In multiple paragraphs.</p>
<p>Maybe with images.</p>
</div>

</article>

Responsive Text (Paragraphs)

• Provide text in different forms and lengths.
  http://www.frankieroberto.com/responsive_text http://mobile.smashingmagazine.com/2012/02/27/ever-justification-for-responsive-text/
• Limit characters per line (width: 60ex;) for wide displays.
• Switch to multiple columns if screen very wide (column-count).
• Pack content more tightly on narrow screens (line-height, letter-spacing, word-spacing).

Responsive Tables

• 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://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" />
  

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

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

• Responsive SVG:

  http://blog.cloudfour.com/media-queries-in-svg-images/ demo1 demo2

• Responsive raster images inside SVG:

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

3. 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/

4. Responsive Input

• Orientation
  

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

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

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; Responsive Design Workflow; Mobilism 2012, 11 May 2012. Video http://vimeo.com/45915667, slides http://www.slideshare.net/stephenhay/mobilism2012.
• Jason Grigsby; Mobile First Responsive Design; Breaking Development, Orlando, 08 Apr 2013. Video http://vimeo.com/64144191, slides https://speakerdeck.com/grigs/mobile-first-responsive-design-bdconf-orlando-april-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/2013/maribor2013/