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
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
Mobile web stats
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
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
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 Invisible
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
-
We don’t know what the next trend is.
-
We don’t have any control.
-
Base Principles: Flexible Grid and Media, CSS3 MediaQueries
-
Basic Principles: Ubiquity, Flexibility, Performance, Progressive Enhancement, Sustainability
Web Accessibility
Getting Started
Tips for
Getting Started
- Designing
- Writing
- Developing
- (more in development)
Web Accessibility Perspectives
Explore the Impact and Benefits for Everyone
The End
#cos17 Basics – Accessibility & Multi-Screen Design
By Eric Eggert
