Skip to content

Instantly share code, notes, and snippets.

Embed
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
You can’t perform that action at this time.