Hello from Day 1 at An Event Apart Seattle. We got lunchboxes as swag – my kid will be thrilled.

Designing with Web Standards – Jeffery Zeldman

He started out the talk describing problems we are all facing – 1000s of devices, folds and feeling like a fraud and insecure because he can’t keep up with code, the new tools and the new things to do.

Do we need CSS? We can do it all in a JS framework! But scripts fail.
Bloat then – Dw
Bloat now – Bootstrap (“Using MS Word to send a text message”). Bootstrap’s a great way to prototype, not good for production code.

Modern web standards bible- Adaptive web design by Aaron Gustafson

Your brand happens between devices. CSS flexbox makes it easier to separate layout from presentation.

The people writing the CSS need to be talking to each other

• Make style guide
• Hire a code design director.

Rules for designing with web standards:

• Content & structure 1st
• Remove distraction. Design is 90% typography and 90% whitespace
• Design system to serve content
• Style is servant to brand and content
• Speed is very important
• Design to make user clever.

Designing Deliberately – Yesenia Perez-Cruz

Some of my really sharp coworkers have been talking to me about performance for over a year. Now I really get it.

Performance is a design feature. Prioritize performance from the beginning.

Beauty and usability are in balance. The goal is to deliver core content quickly, by being deliberate with design choices.

Three stages of the design: Core > Enhancements > Leftovers

A user’s perception of when the content was usable (readable) is more important than actual load time.

Ways to make performance a priority…

1. Make performance a project goal. Good for users (keeps em happy and coming back) which is good for business.
2. Set a performance budget – a tangible way to talk about speed. Every design choice has consequences. “That carousel will cost you 700kb”. Performance budget builder
   1. Videos are great for showing speed.
   2. Webpagetest.org
   3. For every design decision, we must ask – what value does this choice provide?
   4. When performance guides design decisions, decisions are made less arbitrarily.
3. Performance budgets help us design deliberately. Web fonts are overused and that comes at a cost. Do you really need web fonts for smaller screens?

Consistency does NOT have to mean identical – a singular design expression, never uniform or static.

The bad part about brand guidelines are that they can be too rigid – time to think about brands in more flexible ways.

A new web strategy – Start with clean experience, then layer on brand experience.

Designing modularity is a precursor to style guides. Identify reusable patterns and use only what you need. Think modularity to differentiate just enough.

cssstats.com – How many styles do we have?

Oregon State University: 34 unique colors, 53 unique background colors (total redundancies here), 12 font families, 33 font sizes (!!!)

Real Art Direction on the Web – Jen Simmons

I probably understood this session the least, but I understood enough to get excited about some of the possibilities!

Bootstrap and 960 Grid system is the reason that websites all look the same today. Turned web layouts into a multiple choice question.

Break away from that –

• Use negative space as a way to guide the eyes. Communicate using space. Create an oasis.
• Get off the grid design.
• Use odd number instead of even number of columns – gives you a different look.
• Give the users with the latest browsers great experiences – don’t kidnap everyone and hold them in IE 8-land.

labs.jensimmons.com

Viewport units – sizing things relative to the viewport size

Object-fit – controls the size of the box and adjusts the aspect ratio of the units.

Css-shapes – breaking out of squares to flow texts around objects. CSS Shapes editor (for Chrome) does the math for you.

Clip-path – breaking out of squares and rectangles.

Css-round – can’t really be used yet (browsers aren’t supporting). Using polar positioning to determine angle and distance.