A presentation at FWD:labs Salon #78 in September 2018 in 418 Bamboo Ln, Los Angeles, CA 90012, USA by Scott Gruber
What are the building blocks of the web?
Is building for the web easy?
It makes me nervous just thinking about it!
Let's all take a deep breath.
OK. Feel better?
What kind of people use the Internet?
Millennials. Cultural icons. Digital natives.
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
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
Websites should load 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.
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
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.