Alexander Skogberg

UX, Web & Design

To content

Summary of An Event Apart: San Francisco 2016

On October 31 to November 2, the design conference An Event Apart was held in San Francisco. As usual, I followed the event on Twitter from my couch in Stockholm.

Golden Gate Bridge

Like every other time I was expecting useful new knowledge , tools and insights, but this time the event really outdid itself. So ridiculously much great stuff!

Here’s what I found most interesting.

Accessibility

Accessibility is something I’ve been fortunate to work with in projects such as Fejjan för alla (Facebook for people with deaf-blindness) and Tidning för alla (accessible news site).

Designing for and performing usability testing with people with various degrees of visual and hearing impairments is a humbling and eye-opening experience.

I’m glad accessibility was given so much attention at this An Event Apart conference by Derek Featherstone (@feather) in his talk, Extreme Design.

Next time I walk past Burger King, I’m stealing some straws for the inUse office.

This is exactly how I pitch accessibility.

I can confirm this. A subtle design flaw can become a huge obstacle if you’re using a screen reader and a Braille keyboard.

It’s true, please read Placeholders in Form Fields Are Harmful by Nielsen Norman Group.

Users of screen readers often jump from one heading to another.

Style guides

Imagine working at a company like Spotify.

You’re offering a service accessible (almost) all over the world. A service used as a web app on different browsers, as a native smartphone app on different platforms and as a desktop app on several operating systems.

In this case, having a non-interactive style guide saved as a PDF titled style-guide-final-version-11-for-real-this-time-seriously.pdf won’t cut it. You need an online style guide for improving communication, maintenance and collaboration.

In his talk Style Guide Best Practices, Brad Frost (@brad_frost) talked about this.

Freebies, nice!

Fewer elements equals less code equals less time spent on maintenance.

Handling different types of input

On mobile devices you use your thumb and on laptops and desktop computers you use a mouse and keyboard, right?

This has been true (well, sort of) for a long time, but with new types of computers like the Microsoft Surface devices these types of input are being used concurrently.

Laptops are tablets and tablets are laptops. This needs to be taken into account when designing for user input.

This was brought up in the talk Adapting to Input by Jason Grigsby (@grigs).

This is a small thing I’ve thought about. Will use this terminology from now on.

Grid layout and fancy new CSS

Flexbox sure made website layout a whole lot easier when its browser support got good. However, things are about to get even better when support for CSS Grid layout will reach the same level.

This, among other cool new CSS features, is what Jen Simmons (@jensimmons) and Rachel Andrew (@rachelandrew) brought up in their talks Revolutionize Your Page: Real Art Direction on the Web and New CSS Layout Meets the Real World.

Great CSS Grid layout examples by Jen Simmons.

CSS Grid layout is currently in development for Google Chrome, Firefox and WebKit browsers according to caniuse.com.

A while back I reduced the amount of CSS on this website by replacing some float based layout with Flexbox. I hope I can do the same when browser support for CSS Grid layout is good enough.

Just as with Flexbox, CSS Grid layout might not be the best layout option for everything.

Using CSS psuedo elements and transform properties you can create non-rectangular elements, but these new options will make it even easier.

Animations and transitions

You’ve probably made sure the choice of colors, microcopy and typography on your company’s website matches the company brand, but what about animations and transitions? Are they included in your style guide?

This was something Val Head (@vlh) brought up in her talk, Motion In Design Systems: Animation, Style Guides, and the Design Process.

Don’t be afraid to try new CSS as long as you provide fallback for browsers that don’t support it.

Front end developers want the type of information that Brad Frost mentions. Don’t force them to figure it out on their own.

If you don’t know HTML and CSS, try these tools for playing around with animations and transitions.

CodePen is an easy way to share nuggets of HTML, CSS and Javascript.

Content and structure

In his talk Designing With Web Standards in 2016, Jeffrey Zeldman (@zeldman) discussed the importance of focusing on content and structure and not diving head first into frameworks and styling.

Finally

This post ended up much longer than expected, but An Event Apart really delivered this time so I had no choice :)

All articles, links and tools from An Event Apart: San Francisco 2016.

Was there something I missed or misunderstood? Let me know in the comments section.

/Alex

Much responsive Many CSS Very breakpoint So media query Such HTML Wow