Slide 1
Slide 2
What are the building blocks of the web?
Slide 3
HTML, CSS and a pinch of JavaScript
Slide 4
Is building for the web easy?
Slide 5
Slide 6
It makes me nervous just thinking about it!
Slide 7
Let's all take a deep breath.
Slide 8
Breathe.
Slide 9
OK. Feel better?
Slide 10
What kind of people use the Internet?
Slide 11
Millennials.
Slide 12
Slide 13
Millennials. Cultural icons. Digital natives.
Slide 14
Who else?
Slide 15
Could be a blind person using a screen reader.
Slide 16
Could be someone in a wheelchair walking her dog.
Slide 17
Could be a special education student.
Slide 18
Could be a business woman.
Slide 19
Could be an engineer flashing a cub scout sign.
Slide 20
Could be an scientist or inventor.
Slide 21
Could be your grandma.
Slide 22
Everyone can access the world wide web.
Slide 23
How do people access the web?
Slide 24
Slide 25
Slide 26
Slide 27
What the hell does that mean?
Slide 28
Slide 29
Slide 30
Slide 31
Slide 32
We have no control. And it's ok.
Slide 33
I can only control what I do.
Slide 34
My Design Process
Slide 35
Accessibility, Performance and Aesthetics
Slide 36
- Accessibility
Slide 37
Web Content Accessibility Guidelines or WCAG
Slide 38
Color Contrast Ratio
Slide 39
Slide 40
Slide 41
Slide 42
Slide 43
Slide 44
Color Contrast Ratio Texts have a contrast ratio of at least 4.5:1 Headlines have a contrast ratio of at least 3:1
Slide 45
Slide 46
- Performance
Slide 47
Websites should load fast.
Slide 48
How fast?
Slide 49
In 2 seconds or less!
Slide 50
Slide 51
Jumbotron images with a carousel?
Slide 52
Don't use it.
Slide 53
Don't assume your audience surfs the web on a fast, shiny network
Slide 54
What to do?
Slide 55
Set a performance budget http://bradfrost.com/blog/post/performance-budget-builder/
Slide 56
Use Responsive Images One image may not be enough.
Slide 57
Slide 58
- Aesthetics
Slide 59
Websites still gotta look good.
Slide 60
CSS Zen Garden, 2003
Slide 61
MID CENTURY MODERN by Andrew Lohman
Slide 62
APOTHECARY by Trent Walton
Slide 63
STEEL by Steffen Knoeller
Slide 64
A ROBOT NAMED JIMMY by meltmedia
Slide 65
Responsive Web Design, 2010
Slide 66
Justin Avery, site and newsletter
Slide 67
https://blog.stephaniewalter.fr/en/download-illustration-content-is-like-water/
Slide 68
Ethan Marcotte RWD across 4 viewports https://responsivedesign.is/examples/ethan-marcotte/
Slide 69
Ethan Marcotte, Calc and font-size https://responsivedesign.is/examples/ethan-marcotte/
Slide 70
Milwaukee Ballet across 4 viewports https://responsivedesign.is/examples/milwaukee-ballet/
Slide 71
Milwaukee Ballet typography media queries https://responsivedesign.is/examples/milwaukee-ballet/
Slide 72
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.
Slide 73
Rachel Andrew, web developer, teacher and author of The New CSS Layout
Slide 74
Jen Simmons, Mozilla Developer Advocate and creator of YouTube video series Layout Land
Slide 75
Slide 76
Slide 77
Andy Clarke, Head of Creative at Stuff and Nonsense. Design consultant and mentor. Author of “Art Direction for the Web”
Slide 78
Art direction and design helps your audience feel something
Slide 79
Slide 80
Slide 81
Slide 82
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.
Slide 83
My design principles Accessibility, Performance and Aesthetics
Slide 84
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.
