Responsive Web Design

Prof. Keith Andrews

IICM, Graz University of Technology, Austria

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

Slides:
http://keithandrews.com/talks/2017/cos-2017-03-11-rwd/

Sat 11 Mar 2017, COS, FH Joanneum, Graz.

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 works and provides an appropriate experience across all devices:

Being Responsive

Responsive web design is a combination of:

Resources

Online Resources

Three Web Site Patterns to Support Mobile

  1. Responsive: One URL, serving the same HTML code 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.
Same URLSame HTML
Responsiveyy
Adaptiveyn
Separatenn

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

Separate Mobile (m.) and Desktop Web Sites

m.southwest.com southwest.com
Separate mobile (m.southwest.com) and desktop (southwest.com) web sites.

Examples of Responsive Web Sites

Lists of responsive web sites:

Individual examples of responsive web sites:

How Many Sites are Responsive?

  1. 18.7% of the top 10,000 web sites are responsive (Oct 2014).
  2. Was 10.8% in Nov 2013.

Progressive Enhancement

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

[as opposed to graceful degradation]

Mobile First

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

Breakpoint Diagram

Breakpoint Diagram
A typical breakpoint diagram.

Breakpoints

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 Text (Paragraphs)

Responsive Tables

Responsive Images

Responsive Navigation

Responsive Interaction

Conferences

Videos

Thank You

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

Slides:
http://keithandrews.com/talks/2017/cos-2017-03-11-rwd/