Accessibility & Multi-Screen Design
Responsive Web Design

A List Apart: A Dao of Web Design

• 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%)

A List Apart: Responsive Web Design

• Flexible Grid
• Flexible Media
• CSS3 MediaQueries

Examples

• UX London
• Stuff & Nonsense
• International Polar Foundation
• Muumilaakso
• Microsoft

The Pastry Box Project: Tuesday, 3 January 2012

• Ubiquity
• Flexibility
• Performance
• Progressive Enhancement
• Sustainability

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Can I Use css-featurequeries? Data on support for the css-featurequeries feature across the major browsers from caniuse.com.

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

• Designing
• Writing
• Developing
• Evaluating (draft)
• Managing (draft)
• Advocating (draft)

• Keyboard Compatibility
• Colors with Good Contrast
• Clear Layout and Design
• Text to Speech
• Large Links, Buttons, and Controls
• Video Captions
• Customizable Text
• Voice Recognition
• Understandable Content
• Notifications and Feedback