Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
An Event Apart - Austin, TX 2015 - Notes

Follow ups:

Day 1

Zeldman - Career Advice From a cranky old man

  • have perspective - you could be doing service work
  • great work + bad attitude = fire
    • good attitudes usually move ahead
  • politics trumps work
  • first impressions are forever
  • "Mr huffington" about humility
    • your peers care about those things you're passionate about, others DONT
  • "We have met the enemy, and he is us."
  • sharing your work
    • if you can't share it, "blog like no one's reading" - will help you present your ideas better. can only help even if nobody reads it.
    • a list apart - rachel andrew - business problems for developers

Design Decisions through the lens of Performance

  • usually slow sites as a result of communication or understanding breakdown between design/business/developers
  • set a performance budget at the beginning of a project
  • be deliberate
  • size based (no more than 400kb) or UX based (no more than X seconds to load)
  • can use the budget to split things up by images/markup/css and use that to make intelligent decisions
  • tell client - "performance is a marketable feature"
  • setting these foundations provides room for talking points later without a lot of conflict.
  • create a style guide

Jen Simmons - Modern Layouts Getting out of our ruts

  • eye tracking studies - people ignore sidebars. 10 years of training to do it.
  • panes - appearance of different pages on the same page, usually by separating colors
  • great example of vogue magazine layout. gorgeous. website - horrible. why? because of assumptions about what a web layout is.
  • layout should serve the content
  • css - shapes - circle. coming. in chrome. not in IE yet.
  • media queries in css - like adding salt to your dinner
  • css - column count - columns
    • limited, will flow all the way down the page
    • css regions may come which will enable splitting content up for heights
  • min-height - "vh" - viewport height unit. allows you to fill up vertical space
    • vw - vertical width
    • used by ny times for "magazine covers" on web
  • display: flex + margin: auto = centered!
  • flexbox - css-tricks - a complete guide to flexbox
  • css grid layout - use browser to do things like bootstrap without having to worry about third party code
    • only supported in IE now
  • http://dowebsitesneedtolookexactlythesameineverybrowser.com - NO
  • hardest part is changing our thinking not our css
  • look outside the web for inspiration
  • translate ideas (to the web), don't transfer them.

Cameron Moll - Unified UX

  • kevin spacey speech about content vs. type of screen. pretty impressive.
  • "The best interface is the one within reach"
  • take the "web" out of Responsive Web Design - just think about one unified experience
    • this includes data syncing across devices
  • facebook study: 40% of online users start on one device and finish on another
  • consider web views for continuity: think twitter, slack, amazon apps
  • respect mental models - what are people used to? metaphor of weird water dispenser on fridge.

Karen McGrane - Content in a zombie apocalypse

  • styling decisions are almost always based off of print decisions
  • think about the meaning of content
    • em is italics in print
    • what is it in an audio interface? For instance in-car systems
  • think about wearable displays
  • true separation of content from form
    • more important than ever
  • WSIWYG is dead
    • invented for laser printers @xerox
    • the web is better than print!
  • communicate to content creators what it means to separate content from styling
  • pdf - "pretend piece of paper"
  • loses meaning, not easy to search
  • examples about cost of converting PDF's to real content - $320000 to convert about 2500 pdfs
  • If you give an object a name based on is presentation you will limit its future. try to find a functional name.
  • back end content components
    • capital one example
    • how? would like to see an example
    • decoupled content on the backend presented different ways
    • how is this different than having API's for things?
  • pace layering - layers of human decision making. things on the outside move faster than the inside

Ethan Marcotte - Laziness in the time of responsive design

  • pando nat'l reserve in UT, one tree that looks like many
  • My anxiety doesn't come from thinking about the future, but from trying to control it -Hugh Prather - Notes to myself
  • An exercise of letting go of trying to control every aspect of the user experience
  • nth-child (3n) = every 3rd element
  • allows you to effectively build an infinite grid
  • get rid of the grid in your markup
  • be a little lazier
  • disney animation example - animations weren't as technically good as competitors but he used simplicity to illustrate human stories.
  • design a vocabulary for your team so you're following the same principles
  • making content fit is the baseline - it should feel at home
  • "In the beginner's mind there are many possibilies",
  • In the beginner’s mind there are many possibilities, in the expert’s mind there are few.
    • SHUNRYU SUZUKI “Zen Mind, Beginner’s Mind”
  • responsive - designing simple to complex is really the easiest (laziest) way to do things

Day 2

Jeremy Keith - Building A Resilient Web

  • HTML built upon ignoring elements which aren't standard. this was not an accident
  • postel's law - be liberal in what you accept, be strict in what you return
  • declarative - i want this - html/css - can be more forgiving
  • imperative - do this then that - js - needs to throw errors, helps you debug steps
  • XHTML2 - roundly rejected because of draconian error handling
  • identify core functionality and use the simplest technology possible to implement it. from there, go nuts.
  • think of css rules as suggestions rather than commands
  • clarke, any sufficiently advanced technology is indistinguishable from magic
    • after time magic becomes normal
    • Don't forget about the simple things that are amazing
  • "there is a horse in the apple store" - nobody's paying attention to a horse b/c they're obsessed with the gadgets
  • "cool URI's don't change" - Tim Berners Lee
  • space internet - leave people with a web that lasts that isn't brittle

Matt Haughey - Empathy Is Good Business

  • every dev at slack does 2 hours of support a week to keep them grounded

Brad Frost - Atomic Design

  • tiny bootstraps for every client
  • atoms - small parts, molecules getting bigger, organisms, templates, pages. going from abstract to concrete
  • pattern lab - gives you a starting point for these things.
  • ish - test at different viewport sizes - kinda cool - https://github.com/bradfrost/ish.
  • style inventory - what are the different elements you have and their variations? Are there a lot? There shouldn't be.
    • building groundwork for a future style guide or pattern library
  • developers should be like a prep chef -
    • get the little things ready
    • can assemble the peices together when you're ready

Jason Grigsby - Responsive Images

  • can switch images/resolutions at different viewports
  • always an img tag
  • img-src = 160w - 160 w of your image saved on disk. true width of image.
  • the browser prefetches images even before css (lookahead pre-parser)
  • only knows the viewport size when downloading
  • most likely the image closest to the viewport size is the right one
  • javascript isn't even there when images are downloaded.
  • sizes is a necessary compromise of separating style from content

Eric Meyer - Designing for Crisis

  • usually design for a user profile of the "ideal user" - calm and collected
  • what about the people in crisis? good example of health care, automated mortgage payment
  • when you say "edge case" you're pushing them off to the side. think about pushing them to the forefront
  • if a person in crisis understands your design, the ideal user will have no trouble at all.
  • during usability testing actually create cognitive dissonance by using blurs, transposing words, to see if your design holds up under stress.
  • design is thankless - designing for crisis helps lessen the burden during stressful times

Lara Hogan - Designing for performance

  • "jank" - stutter when scrolling. etsy saw more favorites when it was removed.
  • cell connections - overhead of making radio connections to a tower over and over again
  • images make up vast majority of content on a page (from httparchiver.org)
  • blurring jpegs makes them smaller, cropping can make them smaller
  • don't use gifs ;)
    • if you must, use "dithering" to improve color blending
    • gifs algorithm is very good at removing horizontal redundancy not vertical
  • use png-8 instead of gifs. good for images with few colors
    • no restrictions on color palette
  • WebP - lossless and lossy
    • only supported in chrome, opera
    • may be format of the future
  • replace simple images with svg
    • removes cacheability
    • can make html file larger
  • don't forget about sprites
  • img srcset - let browser choose image based on size of viewport
  • imageoptim - chooses lossless compression algorithm based on the image
    • there are tools to automate these
  • firefox 3d view - gives you nested depths of elements on a page. look for div-itis
  • patterns in code will help developers reuse elements
  • only import font weights you absolutely need
  • optimize character subsetting
  • use a mobile-first workflow with a performance budget
  • make it easy for non-developers to make performant pages. AUTOMATE THINGS.
  • need a culture of performance - everyone's job. the most difficult part
  • have empathy for many types of users

Day 3 - Responsive Design Workshop

Karen McGrane and Ethan Marcotte

Karen - Why responsive?

  • mobile use is growing. some industries get 90% of traffic from mobile devices.
  • Diversity of devices. no longer just a phone and a tablet
  • Can no longer assume a set of screen sizes
  • We have lots of screen sizes, lots of pixel densities
  • We have no idea what type of device a person is using
  • "access to content any way I want it" - most important thing to consumers
  • Google study: 90% of people start a task on one device then complete it on another
  • Google: RWD is the recommended approach to creating websites

Ethan - A flexible foundation

  • there is a tendency to think that our industry to think of things as more disconnected than they are (pando forest example, many trees are one root system)
  • architecture - starting to move towards more flexible designs instead of fixed ones
  • "a contiual and constructive information exchange"
  • responsive layout is flexible in nature and responds to change
  • having principles is the foundation. principles don't change, process and details do
  • first: define priority not layout

Karen - Managing Content

  • responsive design won't fix your content problem
  • performance is a content strategy problem - don't just shrink things
    • don't download everything and hide it
  • don't think about what goes in a container first, think about the content first
  • content inventory: document in a quantitative way what you have, not subjective
  • do a content audit - what can stay? what can go?
  • a migration won't work for a responsive redesign
  • REWRITE content
  • no difference in how to write for the web

Ethan - Responsive design fundamentals

  • instead of using units of measure use percentages
  • target (px) / content (px) = result
    • this will give you a percentage to use in your css
    • put the decimals in your percentages!
    • add in any padding - use those percentages
  • then add media queries to do different things to make the design work at different viewpoints
    • use em's for media queries!
  • images: img { max-width: 100% }
  • content choreography - think about how elements in front and around flow around an element.
  • use breakpoints to "Defend your content"
  • Ask: "What if someone doesn't browse the web like I do?"
  • look at display: flex (flexbox) to reorder things
    • check if browser supports flex using a little javascript
  • design the priority not the layout
  • Tools of the trade:
    • progressive disclosure
    • conditional loading
    • rethinking the hierarchy (shift things around)
  • look into ajax include pattern: https://github.com/filamentgroup/Ajax-Include-Pattern/
  • consider that if changes are drastic enough to layout, you may need a server side solution
  • good example of showing/hiding, classing ads with priority, using a little javascript to load the prioritized ads upon resize
  • AppendAround - open sourcing of this https://github.com/filamentgroup/AppendAround
  • compressive images
    • make an image bigger at lower quality will look better when reduced with CSS
    • the bigger views suffer
  • we do not have a realiable means of detecting bandwidth
  • responsive images
    • default to serving smallest appropriate image
    • use the <picture> element
  • tables (!)
    • start mobile and work from there
    • can the table be replaced or changed at a certain breakpoint?

Process and Performance

  • visual design and interaction design need to be considered together, no longer separate
  • "comping" out many different layouts doesn't scale
  • "photoshop layouts are the best way to show you how your website will never look"
  • you need questions more than answers
  • A separate UX team slows down our ability to deliver because there is no quick iteration between design and build" - BBC Quote - Tom Maslen
  • don't start with what the breakpoints would be. it will quickly become dated
  • interactive verification sessions
    • do any elements need additional design direction?
  • FAIL QUICKLY
  • treat graphic mockups as a "catalog of assumptions"
  • hand a bunch of people different devices and have them validate the prototype
  • shipping quicker will let you get user feedback quicker
  • instead of thinking about functionality in terms of mobile/tablet/desktop think in terms of a matrix of features like input method, screen size, network speed, etc.
  • build a device lab

Karen - Rolling out Responsive

  • need to use a ground up approach, no a re-write or retrofit
  • if you do a retrofit, you will ultimately do a ground up rewrite
  • "do no harm" to the desktop if you do a retrofit
  • beta site of a mobile site
  • a beta will take longer and cost more. is it worth it?
  • for a rewrite, consider how content is edited. make sure it's digital
  • authors should be trained on using style sheets or markdown so that text doesn't need to be reformatted in different systems
  • responsive is not a project, responsive is a permanent new way of working. Scott Kelton Jones, expedia
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment