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

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

  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.

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