An Event Apart Seattle - Day 2 Notes

Written by Joe Bibby  |  April 2, 2014  |  Permalink

The Long Web

Jeremy Keith

Built a website for irish folk music that has been running for over 10 years. gone through 3 redesigns, and using technologies that will last another 10 years

Open Device Lab - testing your stuff on multiple devices
not one in Houston

Content first

Mobile First
Luke Wroblewski

URL First - URL design




Pattern Primer Github


The navigation is not fancy javascript - uses a hyperlink to move to the bottom of the page


too often we are concerned about what we are projecting out into the world
input is absolutely crucial

adding attributes that aren’t currently supported, but will be in the future
input type=“number”

placeholder - text shown in a form field as an example
don’t use a placeholder element as a label

Random Placeholder Generator - github

progressive enhancement

more about dealing with technology failing, instead of about not using technology

wanted spark lines but didn’t want to rely on Jquery or Google Charts api

Canvas based Sparkline - github

SVG version Sparkline

conditional loading

site pulls in content as screen gets wider. pulls in flickr images if the screen is big enough

del values

rel=“prefetch” href=“next-page”

rel=“pretender” href=“next-page”

“The best way to be future friendly is to be backwards compatible.”

Long Now Foundation

Putting Your UI in Motion with CSS

Val Head

see slides for first half

Animating like a pro

Don’t be inflexible

Mammoth Booth
menu click and transition flows, but no clicks allowed until animation has finished
need an interrupt

Don’t create obstacles

Square website has a huge modal that comes in to allow navigation of the website
Try it out before you ship it
Prototype the crap out of your ideas

Don’t be too slow

How fast is fast enough?
UI animations should be as fast as they can still be readable.

One thing to always do

Match your animation to your message.

Your choice of easing says something
Timing for Animation

Pulling it off on the web

Looping Animation of Device types

look at Val Head CodePen

CSS animation events
* started
* time elapsed for each animation
* ended

All the Right Moves
Valhead Codepen

SVG is for Everybody

Chris Coyier

SVG is great for:
* icons
* illustrations
* diagrmas
* charts
* logos
* gradients
* any graphic that lends itself to the vector format

CSS3 selector that checks if file is SVG

Inline ,svg.
allows control of SVG file - change color etc..
the noun project

  1. Shapes are in the DOM, thus able to be controlled by CSS
  2. No additional HTTP Request (it’s like a data URI but better)
  3. You can use define once and use in multiple places

SVG Templating

Sites need a system for icons




What is grunt??


Icon System with SVG Sprites

Mind the Gap: Designing in the Space Between Devices

Josh Clark


can be used for any data exchange

It’s not enough to share content across devices, we need to share actions

Sync verbs, not just nouns

Bluetooth LE

Design for People Not Screens

iOS to Mac data transfer

Grab Magic

It’s not a challenge of technology.
It’s a challenge of imagination.

There is Magic in the gaps between devices

Never ever ever ever try to out-mouse the mouse.

Physical & Digital

Digital becomes physical
Physical becomes digital

Anything that can be connected will be connected
Everyday objects are digital gadgets


  • Plan for gadget hopping
  • Share action
  • Peer-to-peer sharing
  • Offscreen interactins

How Designers Destroyed the World

Mike Monteiro

You’re my favorite client
new book

"When you see something that is technically sweet, you go ahead and do it and you argue about what to do about it only after you had your technical success...."  
-J. Robert Oppenheimer  

Victor Papenek
Design for the real world

Designers Responsibility

to the world

You have more power than you think
You have more responsibility than you realize

to the craft

You represent us all
Write. Speak. Teach.
Learn from those who came before and inspire those who come next

to clients

No one hired you to be their friend.
Be WILLING to get fired

to self

the work we choose to take on defines us
This IS possible


Your ego

Your ego is nothing but fear getting in the way of solutions

Your apathy

petty authority

the voice inside




You always have a choice

We are capable of so much more

How to Champion Ideas (Back at Work)

Scott Berkun

The real designer is the person with the power to make decisions

Designer Founders

book series that interviews designers about the path they took to create tech startups.

The user experience of user experience events

How to stay connected

When an event is over, your chance to network and connect ends
Half-meet: a person who you almost started a friendship with at an event

5 non-slimy networking tricks

  • ask everyone you like for a business card
  • saying thank you starts a conversation
  • post your notes from sessions during the event - attracts people to you
  • be active on twitter to find outgoing people
  • if you use LinkedIn, write something personal

Speakers love people who ask them thoughtful questions about their presentation

Don’t shoot yourself or get shot

Don’t think of an elephant!
by George Lakoff


Charm is designed

Charm depends on context

“Here is something you should be doing”
this doesn’t work
“Here is something that will solve your problem”
Here is something that will smarter / better / happier“
”Here is something that will help you get promoted“
”Here is something that will help me get more power"

How to convince your boss

A: Progress is change
B: Leaders like status quo, resist change
A + B = Leaders resist progress

  • Be awesome at your job
  • Get support from an influential coworker
  • plan a trial, including how to evaluate
  • pitch it
  • do it awesomely
  • repeat

How to Pitch an Idea

How to learn a lesson

Events are abstractions, but your life is specific

Min/Max Note Taking

  • you won’t remember much in a week

  • you won’t return to the slides

  • you need to capture reflections today

  • 5 bullets per talk

  • note links and references

  • Post a summary on your blog (tweet it)

  • Post it at work / share with your boss