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

  1. 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

  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

  1. 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.