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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966608/image.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966638/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966639/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966640/image.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966772/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966776/image.png)
More basic principles
-
Ubiquity
-
Flexibility
-
Performance
-
Progressive Enhancement
-
Sustainability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966788/image.png)
Ubiquity
The One Web w/ Thematic consistency
(Same URL, same content)
Ubiquity
Give the user what they want, when they want it.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966837/image.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966858/image.png)
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;
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4966873/image.png)
Embrace the unforseeable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/335005/images/4967654/google-glass.png)
?
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
#cos17 Basics – Accessibility & Multi-Screen Design
- 2,165