Accessibility &
Multi-Screen Design

 

Responsive &

Accessibility Basics

Disclaimer

This course is not a W3C course.
Views expressed are my own.


Dies ist kein W3C-Kurs.
Alle Ansichten sind meine Eigenen.

Responsive Web Design
Introduction

http://futurefriendlyweb.com

Embrace the web medium

The control which designers know in the print medium, and often desire in the web medium, is simply […] the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.

 

 

— John Allsopp

A List Apart: A Dao of Web Design

Mobile web stats

  • 655 million people used Facebook exclusively on their mobile phones – almost 50% [src]
    (June 2012: 102m/July 2014: 399m)

  • 34.7% of „Black Friday“ traffic 2014, 14.6% on tablets
    (Mobile: 2012: 24%, 2011: 14,3%, 2010: 5,5%)

Facets of the same experience

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.

 

 

— Ethan Marcotte

A List Apart: Responsive Web Design

Basic Concepts

  • Flexible Grid
  • Flexible Media
  • CSS3 MediaQueries

Media Queries

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}
.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}
li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }  
  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}
.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}
li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

Examples

Are you a real web designer?

Anything that’s fixed and unresponsive isn’t web design anymore, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design.
Responsive Web Design is web design, done right.

 

 

— Andrew Clarke

The Pastry Box Project: Tuesday, 3 January 2012

More basic principles

  • Ubiquity

  • Flexibility

  • Performance

  • Progressive Enhancement

  • Sustainability

Ubiquity

The One Web w/ Thematic consistency
(Same URL, same content)

Ubiquity

Give the user what they want, when they want it.

71%

of mobile users expect that websites load at least as fast as on the desktop

100% of instructors expected the link for the stat to work.

Only 5 seconds

do 74% of mobile users wait for a website to load.

After that they walk away.

Only 5 seconds.

2MB

Average weight of web page

86%

of responsive websites weight as much in their mobile view as they do in the desktop view

We have a

Website Obesity Crisis!

Performance is

Performance is Design

RWD≠

one size fits all

Progressive Enhancement

@supports

CSS Feature Queries

.main { width: 45%  ; }
.div1 { float: left ; }
.div2 { float: right; }
@supports (display: grid;) {
	.main {
		display: grid;
		grid-columns-template: 1fr 1fr;
	}
}

Embrace the unforseeable

?

       2007                       2010                            2013                2015                 2020

Summary

  1. We don’t know what the next trend is.

  2. We don’t have any control.

  3. Base Principles: Flexible Grid and Media, CSS3 MediaQueries

  4. Basic Principles: Ubiquity, Flexibility, Performance, Progressive Enhancement, Sustainability

Web Accessibility
Getting Started

How
People with Disabilities
use the Web

Tips for

Getting Started

Web Accessibility Perspectives

Explore the Impact and Benefits for Everyone

The End

Made with Slides.com