Responsive Web Design

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

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

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

Nowadays, web design is responsive web design!

Being Responsive

Responsive web design is a combination of:

• Responsive Layout: Dynamically adjust the layout to best suit the available window size (reflow at breakpoints, rescale in between).

• Responsive Content: Dynamically adjust embedded content (tables, images, videos, charts, adverts, etc.) to best suit the device characteristics (space, resolution, etc.).

• Responsive Interaction: Dynamically adjust interaction and navigation elements (menus, buttons, search boxes, etc.) to best suit the device characteristics (size, touch, voice, etc.).

• Progressive Enhancement: Selectively add support for additional features such as location, orientation, tilt, and gestures.

  Detect features not devices!

References

• Ethan Marcotte; Responsive Web Design; A List Apart, 25 May 2010. http://alistapart.com/article/responsive-web-design
• Ethan Marcotte; Responsive Web Design; A Book Apart, 2^nd Edition, 03 Dec 2014. 978-1-9375571-8-8
• Ethan Marcotte; Responsive Design: Patterns and Principles; A Book Apart, 18 Nov 2015. 978-1-937557-33-1
• Scott Jehl; Responsible Responsive Design; A Book Apart, 19 Nov 2014. 1937557162
• Smashing Book 5; Real Life Responsive Web Design; Smashing Media, 2015. http://smashingmagazine.com/2015/03/real-life-responsive-web-design-smashing-book-5/
• Stephen Hay; Responsive Design Workflow; New Riders, 05 Apr 2013. 0321887867
• Karen McGrane; Going Responsive; A Book Apart, 18 Nov 2015. 978-1-937557-30-0
• Alla Kholmatova; Design Systems; Smashing Media, 2017. 978-3-945749-58-6
• Tom Barker; High Performance Responsive Design; O'Reilly, 04 Nov 2014. 1491949988

Online Resources

• Smashing Magazine; smashingmagazine.com
• A List Apart; alistapart.com
• This is Responsive; https://bradfrost.github.io/this-is-responsive/
• Responsive Web Design Is…; responsivedesign.is
• 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

Progressive Enhancement

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

as opposed to graceful degradation

See:

• Jeremy Keith; Resilient Web Design; 13 Dec 2016. https://resilientwebdesign.com/
• Aaron Gustafson; Understanding Progressive Enhancement; A List Apart, 07 Oct 2008. http://alistapart.com/article/understandingprogressiveenhancement

Responsive vs Adaptive vs Separate

1. Responsive: One URL, one codebase. Serve the same HTML to all devices. Responsive through CSS and JS.
2. Adaptive (Dynamic): One URL, server generates different HTML based on device sniffing.
3. Separate (m.): Separate URLs serving different HTML. HTTP redirect after device sniffing.

Based on Google's definitions:
https://developers.google.com/webmasters/mobile-sites/mobile-seo/

Separate Mobile (m.) and Desktop Web Sites

Examples of Responsive Web Sites

The first responsive web site:

• The Boston Globe; bostonglobe.com

See many other examples here:

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

How Many Sites are Responsive?

We stopped counting in 2017, because almost all (new) web sites are now built responsive.

Breakpoint Diagram

Breakpoints

• Between breakpoints: fluid (scalable) layout.
  • Heights in em or rem.
  • Widths in %, em, or rem.
  • Absolute units (px, mm, cm, in) are forbidden!
  • Use vector graphics (SVG) where possible.
  • Flexbox is wonderful!
• At breakpoint: change layout.
  • 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: 40rem) {
...
}

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

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

Mobile First

• Luke Wroblewski; Mobile First; A Book Apart, 18 Oct 2011. 1937557022

• Luke suggests:

  1. Design for mobile first (forces setting of priorities).
  2. Then expand to other devices.

• In practice: Everything First (or Everything in Parallel).

• But certainly not Mobile Only (like ÖBB)!.

Responsive Text (Paragraphs)

• Provide text in different versions (lengths): short, medium, long.
  https://www.frankieroberto.com/responsive_text
https://smashingmagazine.com/2012/02/27/ever-justification-for-responsive-text/
• Limit characters per line for wide displays:

  
  max-width: 60em;
  

  or use CSS3 text wrapping:

  
  text-overflow: ellipsis;
  

  or use CSS3 columns:

  
  column-count: 2;
  column-rule: 0.1em solid #bbb;
  column-gap: 2em;
  

• Pack content more tightly on narrow screens:

  
  line-height: 1.2;
  word-spacing: -0.1em;
  letter-spacing: -0.05em;
  

• Turn on hyphenation in general:

  
  body {
    hyphens: auto;
  }
  
  /* but turn it off for certain elements */
  code, var, kbd, samp, listing, plaintext, xmp, abbr {
    hyphens: none;
  }
  

• Turn on justification in general:

  
  p {
    text-align: justify;
  }
  
  /* but turn it off for narrower screens */
  @media only screen and (max-width: 40rem)
  {
  p {
    text-align: left;
  }
  }
  

Responsive Table Example

Good Table Design

• Distinctive header row (grey background, bold text).
• Left align text, right-align numbers.
• Alternate row shading.
• Sticky header row.
• Sortable columns (JS).

Responsive Table Variants

• Chen Hui Jing; Table Design Patterns On The Web; Smashing Magazine, 24 Jan 2019. https://smashingmagazine.com/2019/01/table-design-patterns-web/
• Heydon Pickering; Data Tables; Inclusive Components, 31 Mar 2018. https://inclusive-components.design/data-tables/
• Tablesaw: JS library for responsive tables.
  https://github.com/filamentgroup/tablesaw
• Responsive Tables Demo: Simon Elvery.
  http://elvery.net/demo/responsive-tables/

Responsive Images

Resources:

• MDN; Responsive Images; MDN, 08 Jan 2020. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html
• Jason Grigsby; Responsive Images 101; Cloud Four, 16 Mar 2015. https://cloudfour.com/thinks/responsive-images-101-definitions/

Individual techniques:

• Dynamic image resizing: rescaling an image in the browser.

  
  width: auto;
  max-height: 20em;
  

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

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

• HTML5 picture element:

  
  <picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
  </picture>
  

• HTML5 srcset and sizes attributes:

  
  <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px, 800px"
    src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
  

• Dynamic image cropping: sometimes called the "art direction use case".
  • Obama example
    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

• 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

Resources:

• Chris Poteet; A Brief Overview On Responsive Navigation Patterns; Smashing Magazine, 19 Apr 2017. https://smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/
• Nick Babich; Basic Patterns For Mobile Navigation: Pros And Cons; Smashing Magazine, 10 May 2017. https://smashingmagazine.com/2017/05/basic-patterns-mobile-navigation/
• Pete McCain; UI Patterns For Navigation That Makes Good UX Sense; Usability Geek, 14 May 2019. https://usabilitygeek.com/ui-patterns-for-navigation-good-ux/
• Erick Arbé; Adventures in Responsive Navigation; 2018. responsivenavigation.net

Individual techniques:

• 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
• Pinch
• Orientation
  

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

• Location

Conferences

• WebExpo Prague; Every Sep in Prague. webexpo.net Videos available: https://webexpo.net/videos/
• Beyond Tellerrand; Three conferences a year in Germany. beyondtellerrand.com Videos available: https://youtube.com/user/btconf/
• Fronteers; Every Oct in Amsterdam. https://fronteers.nl/congres/ Videos available on Vimeo channel: https://vimeo.com/fronteers
• Amuse UX Conference; Every Oct in Budapest. amuseconf.com Videos available: https://ustream.tv/playlist/590291/
• An Event Apart; Several conferences a year around the US. aneventapart.com Videos available: http://aneventapart.com/news/tag/video
• Web Directions; Once a year in Australia. webdirections.org Videos available: http://webdirections.org/videos/

Thank You

Web site:
https://isds.tugraz.at/keith/

Slides:
https://keithandrews.com/talks/2020/2020-01-29-cos-rwd/