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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s