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/2013/uxdg2013/

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:

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

Resources

Online Resources

Separate Mobile (m.) and Desktop Web Sites

m.southwest.com southwest.com

Figure 1: 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:

Breakpoint Diagram

Breakpoint Diagram

Figure 2: A typical 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) {
...
}

Responsive Text (Paragraphs)

Responsive Tables

Responsive Images

Responsive Navigation

Responsive Input

Conferences

Videos

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/uxdg2013/