Web Design Accessibility, Performance and Aesthetics
A presentation at Space Apps Challenge 2018 Kickoff in in Pasadena, CA, USA by Scott Gruber
Space Apps Challenge 2018 Kickoff Web Design Accessibility, Performance and Aesthetics Scott Gruber Pasadena, October 2018
www.ioes.ucla.edu
Southern California as Seen From Apollo 7 This view of southern California was taken by the Apollo 7 crew during their 18th revolution of the Earth, on Oct. 12, 1968.
What are the building blocks of the web?
HTML and CSS
HTML Elements <head>, <title>, <body>, <header>, <nav>, <article>, <section>, <img>, <aside>, <h1> <p>, <div>, <span>, <footer>, <audio>, <details>, <video>
CSS Properties • CSS Grid Layout • CSS Flexbox • CSS Multicolumn Layout • CSS Transitions • CSS Variable Fonts • CSS Box model
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?
Who do we need to design for?
Everyone.
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.
Could be you.
Everyone has access to the world wide web.
How do people access the web?
What does that mean?
We have no control.
We have no control. And it's ok.
I can only control what I do.
My Design Process Accessibility, Performance and Aesthetics
- Accessibility
NASA Web Design System Design and build fast, accessible, mobile-friendly websites backed by user research.
“Offer accessibility out of the box.” – NASA Design Principle
Web Content Accessibility Guidelines or WCAG 2.1
Color Contrast Ratio
Color Contrast Ratio Headlines should have a contrast ratio of at least 3:1 Normal text should have a contrast ratio of at least 4.5:1
Color Contrast Ratio Blue has contrast of 7.39:1 Red has contrast of 4.62:1
- Performance
Websites should load fast.
How fast?
In 2 seconds or less!
Don't assume your audience surfs the web on a fast, shiny network
The Need for Speed How do I design for performance?
Set a performance budget
Optimize images
Remove unused code
Test with Google Lighthouse, Web Page Speed Test and Pingdom Tools
Test • Google Lighthouse • Web Page Speed Test • Pingdom Tools https://developers.google.com/web/tools/lighthouse/ https://www.webpagetest.org https://tools.pingdom.com
- Aesthetics
Websites still gotta look good.
CSS Zen Garden, 2003
HTML with no CSS styles
MID CENTURY MODERN by Andrew Lohman
APOTHECARY by Trent Walton
STEEL by Steffen Knoeller
A ROBOT NAMED JIMMY by meltmedia
Responsive Web Design, 2010
Stephanie Walter
Justin Avery, site and newsletter
“Responsive Web Design is the combination of flexible grids, flexible images, and media queries.” –Justin Avery
Ethan Marcotte RWD across 4 viewports
Responsive Field Day across 4 viewports
NASA across 4 viewports
“Art direction and design helps your audience feel something”
Andy Clarke, Head of Creative at Stuff and Nonsense. Design consultant and mentor. Author of “Art Direction for the Web”
Three Elements of Good Design • Layout - CSS Grid and Flexbox • Typography - Web Fonts • Design systems
“HTML and CSS are the fundamental technologies for building Web pages” – W3C
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.
NASA Web Design System https://nasa.github.io/nasawds-site/
My design principles Accessibility, Performance and Aesthetics
“I hope we will use the Net to cross barriers and connect cultures.” – Tim Berners-Lee Inventor of the World Wide Web, 1989
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.
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
NASA Web Design System
-
MDN CSS Grid Layout
-
MDN Web technology for developers
-
W3C Design and Applications
-
Learn CSS Grid
-
Layout Land
-
Master CSS Grid
-
CSS specifications
-
Google Lighthouse
-
Web Page Speed Test
-
Pingdom Tools
-
Web Content Accessibility Guidelines (WCAG) 2.1
-
Space Apps Challenge 2018 Kickoff
-
Responsive Web Design Is
-
Content is like water
-
Ethan Marcotte RWD across 4 viewports
-
Responsive Field Day across 4 viewports
-
NASA across four different breakpoints
Buzz and feedback
Here’s what was said about this presentation on social media.
