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

My notes from An Event Apart 2015 - Atlanta:

General Links

• CoffeCup's Responsive Email Designer
• meyerweb.com: Friday Figure
• A List Apart: The Love You Make

Jeffrey Zeldman The Work That Dare Not Speak its Name

• "They still see you as how they hired you. First impressions are forever"
• Great work + bad attitude = fired
• Tell the story of the project’s success.
• Dare to speak. Unlock your inner voice. Blog!
• "Expert" just means you started before someone else.
• How to be You
  • Know yourself; change yourself
  • Manage your managers
  • Blogs and side projects show what you can do

• Torre Kean's Notes

Sarah Parmenter Designing for Social Behavior

• Why do people comment?
  • Is it doing any good?
  • People comment due to “Participation Media” -> people want to make ripples
  • Tribe Behavior/Mentality
  • People will find loopholes. ALWAYS!
• Never had a crisis meeting about anyone’s genitalia
• Lovers and haters are always the quickest to become known
• How to Capture Users
  1. Commitment to the Cause
     • consistency (relied upon to keep producing)
     • Show up and do it…again and again and again
  2. Authenticity
     • give users something they can’t get elsewhere
     • be honest, brutally honest
     • real always wins out
  3. Emotion
     • free people prime example
     • use user-generated content (viewed as very authentic)
     • tweets are very positive and airy
     • blog: constantly updated (most posts are aspirational)

Talk Links

• Torre Kean's Notes

Samantha Warren Change or Die: Creating Successful Design Methods for a Multi-Device World

As designers, we are set in our ways As designers we tend to get set in our ways, we need to adapt to the users context instead of our own Yet, we are in a constantly changing profession (especially devices) Blindsided by Context Reasons People Don’t Change

1. Fear
2. Time
3. Comfort (we must empathize) Passion is infectious. Change is infectious if passion is there. cnn.com responsive re-design Tactics for executing change:
4. Plant the seed
5. The Already Done (just do it)
   • A prototype can save a thousand meetings
6. Money Talks
   • Speak the language of business (convincing for change)
   • How can it impact money, bottom line, sales, etc
   • Process Change: Design = Time = Money
7. Share
   • Internally (Basecamp, Yammer, blogs, emails, etc)
   • Publicly (conferences, blog posts, white papers)

“If it’s not in the wiki, then it doesn’t exist.”

Talk Links

• Torre Kean's Notes
• Medium: Story Map

Yesenia Perez-Cruz Design Decisions Through the Lens of Performance

No one sets out to design a slow, heavy site

• poor planning, communication, awareness Design is a balancing act (help users build up brands and goals vs business goals) Consider overall user experience (not just visuals) What is performance?
• how quickly web pages load
• how quickly content is delivered to intended audience Why design for performance?
• online users allow 1-2 seconds of load time
• users go to competitors if loads 250ms faster
• global network speeds vary significantly How do we do this?

1. Think about performance from beginning
   • make performance a project goal (in requirements doc)
2. Establish performance budget
3. Communicate and document.

Talk Links

• Torre Kean's Notes
• Image Optim

Tim Brown Typesetting Body Text Like a Pirate Jedi with a DeLorean

Talk Links

• Torre Kean's Notes
• Universal Typography
• Flippant
• Modular Scale

Dan Mall So…What Do I Make?

Designers Plan

• Interview (ask the users; after all, they use it)
• Write Manifesto -Creative Direction (point of view): says what you’re going to do AND what you’re NOT going to do

Designers Inventory

• Interface Inventory - take an interface inventory; consolidate, consolidate, consolidate - makes user’s cognitive load smaller
• Performance Budget - it does matter! (sometimes life and death -> Radio Free Europe) - take an inventory of now: cut it to 80% of current load time -> goal
• Visual Inventory - Find examples of “other” ways to view their business/brand - Look for color, concept, and tone for the client

Designers Sketch

• Element Collage - listen to the client; listen for phrases - turn those powerful phrases into visual hooks - show different variations to show possibilities
• Prototypes - Each prototype must take less than 1 hour - 1st prototype should be something anyone can build - build ugly (always come back to the ugly to polish) - every prototype should solve one problem and one problem only

Designers Assemble

• Mise en place (everything in its place
• Libraries (building a comp is dragging elements in) - Pattern Lab (atomic design framework idea)
• Ultimate Tool for Designers: Empathy

Talk Links

• Torre Kean's Notes
• Ommwriter
• Visual Inventory
• Typecast
• RIF
• Photoshop Creative Cloud Libraries