An Event Apart 2015 - Atlanta: Day Two

Designing for Crisis Eric Meyer, Author, CSS: The Definitive Guide

  • crisis drives you “how do i get to my [loved one]"
  • opened iPhone and went to find Children’s Hospital of Philadelphia; saw full desktop site
  • couldn’t figure out how to navigate; couldn’t think clearly
  • looked in center column (where the content should be)…nothing of use
  • looked in left column for structure…nothing of use
  • looked for site navigation (admittedly subtle and themed correctly)…missed it completely the first time
  • no consistency in verbiage (Emergency Room vs. Emergency Department)
  • placement of “Contact Us” (and font) looked like ad (brain is trained for it)
  • so many roadblocks to finding the answer to the simple question of how to find your loved one
  • “You don’t get to decide what your users will want to do on mobile. They do.” - Karen McGrane
  • we don’t get to decide their mood, their concentration level, their ability to think clearly
  • TIP: add another persona to your end user list: someone in crisis
  • Empathy: fully imagine being a person who DOESN’T know how this shit works
  • YOU HAVE TO MAKE IT SIMPLE
  • TIP: on top of persona, add contexts to user requirements (example: time of day)
  • helpful tip for airline passengers: Airlines should provide (in-app) maps of the airport, with a route pointing the user from the gate they are arriving into to the connecting flight’s departure gate (relieves stress)
  • error handling: you’ve got to tell the user what action to take if an error occurs
  • processing: you’ve got to tell the user that the system is working
  • give the users options that will fit within the context they are in (car accident; do not force IE on them)
  • do things that will never be noticed; if they are never noticed, you’ve done your job
  • they will never thank you, but the thanks is from all of us to you

Talk Links Torre Kean’s Notes hipmunk.com

Smaller, Faster Web Sites Mat Marquis, Developer, Bocoup

  • Users care about their information and how they can get to it and use it
  • We force our own context on our users (we assume high transfer rates / fast processors / lots of memory)
  • Need to build a “Built for me” site, not a “Works best on…"
  • Page weight (i.e. faster load times) opens opportunity for so many things
  • currently, mobile/tablet usage accounts for 35% of all Worldwide Internet traffic
  • EDGE is 50% of that usage; 3G is 30%; leaving 20% 4G+
  • 71% people expect websites to load faster on phone than desktop
  • 72% of responsive sites send roughly the same data to mobile and desktop users
  • “Cutting down on the weight of our images is the single greatest bandwidth shaving we can achieve.”
  • Smaller Websites
    • average page weight: 2MB
    • JS crept up in size; images have become much worse (retina is the reason)
    • srcset to the rescue
    • icons are a problem, too (“Pictures shouldn’t be made of math”)
    • SVG’s supposedly to the rescue (not all browsers support; looking at you Android)
  • Faster Websites
    • Critical CSS (serve only stylesheets needed for current context)
      • initial TCP/IP connection carries 14KB (sends markup and head content)
      • the rest of the requests happen after the initial connection
    • Deferred Loading of Webfonts
      • most browsers wait 3 sec to load webfont before falling back to system defaults
    • Set a Performance Budget
  • We build purpose, not just websites
  • “I take pride in building things that are invisible. That’s beautiful.” -@wilto #aeaatl

Talk Links Torre Kean’s Notes Chris Zacharias: Page Weight Matters janocycles.com Grunt grunticon grunticon.com fontsquirrel.com/tools/webfont-generator Above-the-Fold Detector

Responsive Images Are Here. Now What? Jason Grigsby, Co-Founder, Cloud Four

  • Currently shipped in Opera and Chrome
  • In development for Safari and Firefox; IE “considering"
  • Images have always been difficult (remember web colors?)
  • Use Cases
    1. Resolution Switching (one image, multiple sizes)
    2. Art Direction (cropping when/where appropriate -OR- different assets)
  • is always required
    • Sometimes, is all you need
    • But what about high density displays?
    • srcset to the rescue: 1X vs 2X display density identifier
    • if that’s not enough, provide browser with width specs
  • How do browsers pick the correct source image from ?
    • Images are downloaded before size is known (viewport is only known size)
    • Tug of war between Lookahead processor vs. Responsive Images
    • The pre-parser is why we can’t solve responsive images with CSS/JS/new image format
      • BUT…it makes browsing experience 20% faster
  • Sizes
    • provides max-width queries to base images on viewport width (vw)
    • Let the browsers be smart
  • So when do we use ?
    • art direction (providing different images based on context)
  • What about CSS?
    • Art Direction
      • image-set(): can be used in CSS where src-set would be used inline
      • image-set() doesn’t support density definitions yet
      • Image Breakpoints: images normally tell you when they need to change
    • Resolution Switching
      • Image Breakpoints: Hmm…don’t have any idea (depends on image, need, rules, etc)
  • Responsive Image Community Group
  • Use of polyfills work with older browsers (Scott Jehl)

Talk Links Torre Kean’s Notes A List Apart: Responsive Images in Practice PictureFill

Prototyping and Play Dave Rupert, Paravel; The Shop Talk Show

  • Co-host of Shop Talk Show (co-host with Chris Coyier)
  • Tools to Help
    1. Clicky Image Prototypes
      • invisionapp.com (prototyping)
      • flinto.com
    2. Clicky Motion Prototypes
      • framer.js
      • Origami
    3. Code Prototypes
      • codepen.io
      • jekyllrb.com
      • Pattern Labs (atomic design) (patternlab.io)
    4. Frameworks & Libraries
      • getbootstrap.com
      • foundation.zurb.com
      • ionicframework.com
  • “Spend less time designing the Container and more time designing the Content.” - Trent Walton
  • How We Prototype
    • Goal: get to code as soon as possible
    • Start with sketching
    • “The fidelity of your prototype should match the fidelity of your thinking.” - Jared Spool
    • Share what you’re building; make sure people know what you’re doing, the decisions you’re making
    • “Don’t Hoard the Process"
      • unintentionally creates animosity
    • Web Design is a Team Sport
    • We’ve got to set goals to match skills
  • Benefits of Prototypes in the Workplace
    • Prototypes help solve arguments
    • “Won’t work ‘cause it’s weird” - Me. Every project ever.
    • “If a picture is worth a thousand words, a prototype is worth a thousand meetings.” -IDEO
    • You WOW upper management
    • “The technical challenges of integrating with the CMS are huge when [a design is] not even tested yet.” - Chris Balt, Microsoft, on the RWD Podcast
  • The Costs of Not Shipping
    • Turnonver
  • Biggest Failures
    1. Too Many Designers
    2. Didn’t Code Soon Enough

Talk Links Torre Kean’s Notes Making Front-end Development a Team Sport

Content Amid Chaos Sara Wachter-Boettcher, Author, Content Everywhere

  • We love the web, so we don’t want to see it trashed
  • Gripes about websites:
    • Always late
    • Not mobile-ready
    • Too corporate
    • Totally irrelevant
    • Way too long
    • Redundant
  • We’re really talking about “not-my-problem” or “too-big-to-try” problems, not content problems.
  • How can web projects fix those problems?
    • Turn your project into a catalyst project
      1. Make change feel achievable
        • most people want to do a good job
          • but big problems feel…big
        • Start with just one thing (Visible / Valuable / Scope-able)
          • sweet spot is between your skills and area of influence and what’s causing problems right now
        • Fix something…don’t necessarily fix everything
          • Small wins build optimism
      2. Aim for ownership
        • We can’t just wait around for “someone else” to fix it
        • We need people to take charge
        • Get people problem-solving together (Ask, don’t just tell.) (Do, don’t just talk.)
        • Doing things with people > doing things for people.
      3. Get a commitment
        • Maps give us momentum
        • Maps connect vision to operations (defines where you’re headed)
        • example: Unstructured (scattered) content ——> Structured (indexable) content
        • Identify potential projects / challenges: break down into tasks
        • Decide who will lead each charge / Set a cadence for progress
        • Maps keep us moving
        • We’re not here for perfection. We’re here to change for the better.

Talk Links Torre Kean’s Notes

Magical UX and the Internet of Things Josh Clark, Principal, Global Moxie

  • Interactions not just keyboard/mouse anymore; now there’s touch/natural gestures
  • Design beyond the screen is coming; we have to be ready (“Expecto Patronum” is coming)
  • Common technology will lead to these new design interactions to user experiences

A Performance in Three Acts

  1. Magic & Technology
    • “Any sufficiently advanced technology is indistinguishable from magic.” - Arthur C. Clarke
    • “Fantasy fuels a need for a simpler, more controllable world.” - Alan Kay
    • “One goal: Make the computer disappear” - Alan Kay
    • The phone is the first Magic Wand (aka Internet of Things Device) for everyone
    • Sensors + Smarts + Connectivity = Magic
    • “Mobile is available at the point of inspiration.” - Tomi Ahonen
    • Mobile phones bring computing power to immobile objects (we can now embed smart brains in anything)
    • Average smartphone screen time: 3+ hours a day.
    • The more connected we are the more disconnected we are
  2. Physical Meets Digital
    • Physical interaction with a digital API
    • The world IS the interface
    • The world IS ALSO a data source
    • The world is a big canvas
    • The world has depth and mass
    • Gather data for insight; Channel intention
  3. Magic, Imagined
    • “What is ____ was magic?”
    • Add insight, not just data
    • Make the tech invisible
    • Build systems smart enough to know they’re not smart enough
    • Algorithms can go VERY wrong
    • The magic is not about the thing; it’s about the combo of sensors/smarts/connectivity
    • Technology should amplify our humanity
  • It’s not “Can We?”, it’s “How Will We?"

Talk Links Torre Kean’s Notes bit.ly/browser-magic

Lee Feagin @leefeagin