Web Design Accessibility, Performance and Aesthetics
A presentation at FWD:labs Salon #78 in in 418 Bamboo Ln, Los Angeles, CA 90012, USA by Scott Gruber
What are the building blocks of the web?
HTML, CSS and a pinch of JavaScript
Is building for the web easy?
It makes me nervous just thinking about it!
Let's all take a deep breath.
Breathe.
OK. Feel better?
What kind of people use the Internet?
Millennials.
Millennials. Cultural icons. Digital natives.
Who else?
Could be a blind person using a screen reader.
Could be someone in a wheelchair walking her dog.
Could be a special education student.
Could be a business woman.
Could be an engineer flashing a cub scout sign.
Could be an scientist or inventor.
Could be your grandma.
Everyone can access the world wide web.
How do people access the web?
What the hell does that mean?
We have no control. And it's ok.
I can only control what I do.
My Design Process
Accessibility, Performance and Aesthetics
- Accessibility
Web Content Accessibility Guidelines or WCAG
Color Contrast Ratio
Color Contrast Ratio Texts have a contrast ratio of at least 4.5:1 Headlines have a contrast ratio of at least 3:1
- Performance
Websites should load fast.
How fast?
In 2 seconds or less!
Jumbotron images with a carousel?
Don't use it.
Don't assume your audience surfs the web on a fast, shiny network
What to do?
Set a performance budget http://bradfrost.com/blog/post/performance-budget-builder/
Use Responsive Images One image may not be enough.
- Aesthetics
Websites still gotta look good.
CSS Zen Garden, 2003
MID CENTURY MODERN by Andrew Lohman
APOTHECARY by Trent Walton
STEEL by Steffen Knoeller
A ROBOT NAMED JIMMY by meltmedia
Responsive Web Design, 2010
Justin Avery, site and newsletter
https://blog.stephaniewalter.fr/en/download-illustration-content-is-like-water/
Ethan Marcotte RWD across 4 viewports https://responsivedesign.is/examples/ethan-marcotte/
Ethan Marcotte, Calc and font-size https://responsivedesign.is/examples/ethan-marcotte/
Milwaukee Ballet across 4 viewports https://responsivedesign.is/examples/milwaukee-ballet/
Milwaukee Ballet typography media queries https://responsivedesign.is/examples/milwaukee-ballet/
CSS Grid Layout, 2017 CSS Grid Layout will transform the way you design and develop for the web– and Rachel Andrew will change the way you understand the spec.
Rachel Andrew, web developer, teacher and author of The New CSS Layout
Jen Simmons, Mozilla Developer Advocate and creator of YouTube video series Layout Land
Andy Clarke, Head of Creative at Stuff and Nonsense. Design consultant and mentor. Author of “Art Direction for the Web”
Art direction and design helps your audience feel something
Good looking sites can be accessible and fast loading. With the new CSS we have a wonderful opportunity to bring editorial design to the web and with it a sense of control and craftmanship that I began with 20 years ago.
My design principles Accessibility, Performance and Aesthetics
Thank you. https://speaking.scottgruber.me Creative Commons Attributions: Slides 5, 24, 25, 26, 28, 29, 30, 31 made by Brad Frost for Responsive Field Day 2015. Rachel Andrew's photo by Drew McLellan.
Accessibility, performance and aesthetics inform my design practice and I’d like to share my thinking for you to keep in mind as you make your own sites. Design is about solving problems creatively and technically. Art direction guides design to generate emotion for editorial goals. One of my goals as a designer and developer is to make sure people of all ages, abilities or places in the world can engage with compelling content. I design sites to be easy to use and to load fast no matter how or where you connect. That doesn't mean sites don't need to look good. In this salon, I'll share a few stories about my experience building sites based on my ethics and principles.
for free. You
can too.
Video
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
FWD:labs Salon #78
-
Resilient Web Design by Jeremy Keith
-
Color Contrast Checker
-
Web Accessibility Checklist
-
Web Content Accessibility Guidelines
-
Web Accessibility Resources curated by Scott Gruber
-
Art Direction for the Web by Andy Clarke
-
Front-End Performance Checklist 2018
-
Tim Kadlec
-
Responsive Field Day, Portland 2015
-
What Goes into a Well-Done Critique by Jared Spool
-
Atomic Design by Brad Frost
-
Inclusive Design Patterns by Heydon Pickering
-
CSS Layout Newsletter curated by Rachel Andrew
-
Grid by Example by Rachel Andrew
-
Web Typography by Richard Rutter
-
Layout Land produced by Jen Simmons
Buzz and feedback
Here’s what was said about this presentation on social media.
