An Event Apart Orlando: Special Edition 2014

My notes from An Event Apart Orlando: Special Edition 2014 at Disney’s Contemporary Resort in Walt Disney World.

Day 1: Monday, October 27

“Understanding Web Design” by Jeffrey Zeldman

When the institutions we have appointed to judge our best work do not understand the nature or value of that work, then our clients, bosses, and coworkers won’t understand it either. And their lack of understanding can put crippling limits on your professional happiness, your long-term career, and the success of your next project. It is hard enough to achieve good design when every stakeholder on your team understands it. But when half the people on your team, possibly including some key “creatives,” don’t know what you do or why you do it, it becomes impossible to deliver good design—design that delights, that achieves business goals and user goals, that creates communities, and that gives people capabilities they didn’t even know they wanted. Discover how to find the essence of our profession, and learn to become the ambassador for web design that our work and your career deserve.

Notes

  • Google is the biggest blind user on the Internet.
  • You mark a page up semantically and Google finds it.
  • A great website makes interaction easy.
  • We don’t design for browsers. We design for people.
  • Don’t wait to be asked to do something, volunteer.
  • We are all evangelists.

“Designing Engagement” by Jaimee Newberry

Engagement metrics aside, how are you engaging your users at an emotional level? How much thinking goes into the personality and tone of your product? What about writing the error messages, alerts, calls-to-action, descriptions, or release notes? Whether you have a playful concept, a big brand product yet to be built, or a product that’s been out for a while, Jaimee wants to share some very important considerations in design thinking, on-boarding, and copywriting to help your products become more fun, delightful, and emotionally engaging experiences for your users.

Notes

  1. Personality
    • If my product were a celebrity, who would it be?
    • Personality informs everything.
  2. OnBoarding
    • Introduce the concept.
    • Be mindful.
      • Give users the option to exit.
      • Don’t make instructions too long.
    • Define your objectives.
  3. Copy
    • Use a copy framework.
    • Honesty is important.
    • Review things.
    • Fun. Not scary.
    • Set expectations.
    • Helpful. Not Confusing.

“Designing Using Data” by Sarah Parmenter

Multi-platform design is hard. Decisions about content structure and hierarchy are often made hastily, with little foundation in reality. Instead of slavishly aping the latest UI trend, let’s design with data, producing designs and systems that yield predictable and desired results. Learn to design functional, beautiful interfaces with a solid backbone, supported by information-led processes tempered by your unique experience as a designer.

Notes

  • Design is no longer the killer differentiator. — John Maeda
  • Instincts are experiments. Data is proof.
  • Convince me that your new design won’t cause us to lose money. Have a business defense for every design decision.
  • No one has an excuse to make an uninformed decision any more. Research ensures that every design decision is informed.
  • Analytics tools:
  • You can’t act on a metric, it’s a vanity stat. Likes are a popularity contest unless you can get people to do something.
  • Vanity metrics: hits, total signups, page views, number of visits, unique visitors, likes
  • Establish personas based on analytics.
  • Have a collection of “real” photos to use. People are wary of stock photos. A post for Blushbar with a professional photo got 0 clicks. The exact same post with a “real” photo got 521 clicks.
  • Facebook: have a call to action on every single post.

“Mobile First Responsive Web Design” by Jason Grigsby

Mobile first and responsive web design aren’t simply two great tastes that go great together—they represent far more than that. Mobile first responsive web design is the responsible way to build responsive design—the best way to create something that is both responsive from a layout and a performance perspective. But if mobile first is the right way to approach responsive design, then why are so few people doing it? Dig into why mobile first responsive design matters, and the techniques needed to make it work.

Notes

  • People demand fast websites. There are no gestures that can make a website faster.
  • We’ve made the Internet in our own image. Which, in the United States, means obese.
  • First thing you should do to optimize your desktop site for mobile
  • Akamai’s Mobitest is a great way to see how fast your site is on phones
  • Too many responsive sites use display:none to hide things instead of building pages that both look and perform well on mobile.
  • Being Responsive from a layout perspective should not preclude us from being responsive from a performance and interaction perspective. — Scott Jehl
  • 5 key techniques for responsible responsive web design:
    1. Build mobile first responsive designs
      • iOS Viewport Continuum: 320, 375, 414, 480, 568, 667, 736, 768, 1024
      • The absence of support for media queries is in fact the #rst media query. — Bryan Rieger, Yiibu
    2. Keep CSS images in their place
      • Images with display:none are still downloaded
    3. Conditionally load JS based on screen size and capabilities
      • Media queries do not prevent JavaScript from downloading and executing. You need a responsive JS strategy.
    4. Deliver different size <img>s at different screen sizes
    5. Handle high-density images carefully
      • If possible, use CSS for now (background-image)
      • JPEGs with low quality looking good on retina – Retina revolution
  • Eight guidelines for responsive images (8 Guidelines and 1 Rule for Responsive Images)
    1. Use vector-based images whenever you can
    2. Encourage people to upload the highest quality source possible
    3. Provide an automatic image resizing and compression service
    4. Images can be resized to an size with URL parameters
      • Unique URLs are imperative to play nice with caching.
    5. Provide automated output of Picture and PictureFill
    6. Provide a way to override resized images for art direction needs
    7. Integrate image compression best practices
    8. Bonus: Detect support for WebP image format and use it

“Putting Your UI in Motion With CSS” by Val Head

CSS animations are a powerful option to add design details to your work. When used well, motion can improve interactions and bring delightful moments to the user experience. In this session, we’ll look at CSS in a whole new light—and use it, plus a little JavaScript, to craft interactions that bring our web-based work to life.

Notes

  • Animation softens the edges of interaction
  • Animation:
    • Establishes location
    • Guides tasks
    • Demonstrates
    • Tells your story
    • Gets (all the) attention
  • Keep UI animations flexible
  • Don’t create obstacles
  • Look at speed and readability
  • 0.2s to 0.6s a happy place for “small” interactions
  • Ease-outs feel more “responsive”
  • Sometimes when we release an update, I tighten up an old transition by ~50ms. Result: Wow, this new version feels faster. — Cennydd Bowels
  • More complex easing needs more time to be readable
  • Match your motion to your message

“The Map & The Territory” by Ethan Marcotte

When we create for the web, we participate in a kind of public art. We code, we design, we build for an audience, shaping digital experiences that provide a service, or that create joy, or that simply connect readers with words written half a world away. But in this session we’ll revisit what we’ve learned about responsive design, and ensure our content, not just our design, is readily accessible to them wherever and whenever they are. In doing so, we’ll look at some ways in which our audience reshapes the way we think about our medium, and see where they might be leading us—and the web—next.

Notes

  • target ÷ context = result
  • Learning to love :nth-child()
  • Average size of website in 2009 was 320 KB. Average size in 2014 is 1.8 MB.
  • [We noticed a] sharp decline in conversion rate as average site load time increases from 1 to 4 seconds. — Walmart
  • Use smaller JavaScript libraries when possible
    • We need to ask if the tools that we default to are the best options for performance
  • Folder of SVGs + Grunticon + Retina-friendly CSS (with PNG fallbacks)
  • Responsive Design on a Budget
  • Performance isn’t just a tech problem. It’s everyone’s responsibility.
  • “Cutting the mustard” 
    if ( "querySelector" in document
    && "localStorage" in window
    && "addEventListener" in window ) {
        // bootstrap the javascript application
    }
  • We don’t have any non-JavaScript users. No, all your users are non-JavaScript while they’re downloading your JavaScript. — Jake Archibald
  • We don’t have a reliable means of detecting bandwidth.
  • What works is better than what looks good. The ‘looks good’ can change, but what works, works. — Ray Eames

Day 2: Tuesday, October 28

“Enhance!” by Jeremy Keith

We’re working on increasingly complex websites. There’s a temptation to match this growth with increasingly complex solutions. But there’s a real value in keeping things simple…or at least starting things simple. If you can build a solid robust foundation, there’s a good chance that your work will be future-friendly. Prepare to have your brain subtly rewired as we look beneath the surface-level implementation details of the web to reveal the semantic structure below. Whether you’re publishing content or building the latest hot app, the principle of progressive enhancement will change the way you think about your work.

Notes

  • HTML and CSS are fault tolerant. They will load even if there is an error. JavaScript is not fault tolerant.
  • JavaScript is a single point of failure.
  • When an elevator fails, it’s useless. When an escalator fails, it becomes stairs. We should be building escalators, not elevators. — Jake Archibald
  • Look, it’s simple. Build your apps so they aren’t a twirling shitshow of clown horns when JavaScript breaks. — David Sleight (@stuntbox)
  • In the web front-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile, more foolproof, and just works. — Derek Featherstone
  • Be conservative in what you send; be liberal in what you accept. — Jon Postel, The Robustness Principle
  • A web app is a website that stops working if JavaScript is unavailable.
  • Do websites need to look exactly the same in every browser?
  • cutting the mustard: 
    if (document.querySelector && window.addEventListener) {
    // enhance!
}

“The Developer’s Ampersandwich” by Jenn Lukas

Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page!

Notes

  • Designers and developers working together provide the best foundation for a project
  • Designers must help developers understand design intentions
  • Developers love formulas
  • The Latest in Web Font Trends
  • WhatFont — find out the fonts used in a webpage
  • Use style guides, pattern libraries, and general styles to create a harmonious system
  • Starter Files
  • General styles:
    • Make sure no element goes unstyled
    • Separate document containing every HTML element to define
    • Small, manageable version of a style guide
  • Beware of cross-browser differences with web fonts
  • Set aside time and budget for QA testing
  • Make sure your fonts will work for your audience before design approval
  • Create a font-family browser sample page to share and test
  • Test in your least favorite browser
  • Type Rendering Mix — apply CSS based on the text rasterizer and antialiasing your browser is using
  • Monitor how fonts affect your page speed
  • Size warnings prompted at:
    • Google Fonts: < 160 K
    • Typekit: <= 400 K
    • Cloud Typography: < 1000 K
  • Fallback Fonts on Mobile Devices
  • FFFFALLBACK — find the perfect fallback fonts, so that your designs degrade gracefully
  • tinytype — A compatibility table showing the available default system fonts across different mobile platforms
  • It’s our job to help our clients learn to love web fonts
  • Free fonts:
  • Beautiful Web Type — A showcase of the best typefaces from the Google web fonts directory.
  • Make your own icon fonts
  • The best way to use icon fonts
  • The new Kellum method
  • Contrast should be 4.5:1
  • Use ems/rems for sizing
  • Use ARIA roles with icon fonts
  • “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”
  • Typecast
    • Set up type systems without PhotoShop
    • Tweak established styles or create completely new systems
    • Allow design and development to work together through shared interface
  • Limit number of font sizes; create a system

“Content in Context Is King” by Derek Featherstone

When most people think of Responsive Design, they think of fluid grids and adapting the layout of components in a site or application. But design goes far beyond layout. How far? We will start by combining content, context, and behavior in ways that let us create truly responsive sites—sites that meet the needs of the people using them, when they’re using them, and how they’re using them. Learn how to use clues like time, location, proximity, capabilities and preferences to create better designs for users. After accounting for the device’s form factor, capabilities, and features, we’ll look at context of use, and the art of anticipation, delivering a more thoughtful, more useful user experience for everyone.

Notes

  • What defines context? Time, location, proximity, device, state of mind, capabilities, activity, interests, interaction.
  • What resolutions do we design for? All of them.
  • Taking Direction from Disney’s Customer-Care Philosophy — Disney’s customer care compass
  • Content priority changes with respect to time
    • Change the home page of an event website when the event is going on (show schedule, etc.)
  • Content changes with respect to location
    • Special message on event website for people who are at the event
  • All saved content must be resettable
  • Content changes with respect to proximity
    • Showing friends nearby
  • Display changes with respect to capabilities
    • Low resolution screens that can’t see all menu options
  • Display changes with respect to activity
    • Maps zoom out when moving at higher speeds
  • Display changes with respect to interests
    • When sorting airline flights by shortest flight time, make the flight time more prominent
  • Display changes with respect to state of mind?
    • When you shouldn’t be distracted, e-mail becomes harder to read to stop you from trying to go through it
  • Content in context is king

“Co-Design, Not Redesign” by Kevin M. Hoffman

Organizations continue to pile features and fixes onto the redesign process. Companies that overlooked mobile are making big changes in a panic, while those with designs suitable for any device aren’t sure what to do next. One thing that won’t change is that people crave easier, faster, and more widespread access to their information and tools. Learn how service design thinking, lean approaches to user experience, and co-design processes offer an alternative to the money pit, and deliver experiences that delight your users.

Notes

  • File sharing & repositories are not collaboration.
  • Collaboration happens when the whole is greater than the sum.
  • Design meetings to avoid design by committee, politics, waste of time, etc.
  • Real-time meetings can lead to collaboration.
  • Anyone adding value is collaboration.
  • Only have a meeting if a decision is needed.
    • List all the decisions
    • Identify the owners
    • Invite those who add value
    • Design the agenda
  • Great meetings start with clear objectives.
  • Plan meetings around decisions, not people.
  • Meetings should start with divergent thinking and end with convergent thinking.
  • Divergent thinking
    • Make lists
    • Open discussion
    • Many perspectives
    • Suspend judgement
  • Convergent thinking
    • Prioritize
    • Summarize
    • Agree
    • Use judgement
  • People need to be heard before they can listen.
  • 2 ways to design meetings:
    • Plan outcomes
    • Give room for ideas to breathe
  • A facilitator:
    • Is neutral
    • Doesn’t evaluate or contribute ideas
    • Coordinates/manages the process
    • Selects questions and activities
    • Sufficient domain knowledge including technology, content, workflow & culture
    • Conducts one-on-one interviews before the kickoff meeting
  • Stop using meetings for research. Become and expert and then facilitate a productive conversation.
  • Public recording:
    • Draw or write where everyone can see
    • Summarize and synthesize
    • Prepare visuals in advance
  • Critical ideas are lost if you don’t engage visually.
  • 2 ways to provide access to process:
    • Neutral, informed facilitation
    • Use visuals for agendas, conflicts, decisions, and concepts
  • Shorter & measurable experiments focus on results.
  • 3 building blocks of co-design:
    • Designed meetings
    • Access to process
    • Transparency about risks & outcomes

“Touchy Subjects: Creating Content for Sensitive Situations” by Kate Kiefer Lee

Our readers and users are human. They have their own preferences, experiences, senses of humor, and perspectives—and they bring all of that to the table when they interact with our content. We can’t see our users, and we don’t know what’s going on in their lives, so we don’t always create experiences with their feelings in mind. Certain topics are likely to make them feel uncomfortable or frustrated. Sensitive content types many of us work on every day include error messages, alerts, legal content, financial information, and warnings. Learn how to address touchy subjects, anticipate the reader’s emotional state, and write from a place of empathy.

Notes

  • Map your touchy subjects
  • Plutchik’s wheel of emotions
  • Match your tone to the content type and the reader’s feelings
  • Principles:
    • Be clear
    • Get to the point
    • Stay calm
    • Be serious
    • Be nice
  • In our site’s communication with users, we can’t always be interesting or clever, but we can always be nice.
  • Read your copy out loud
  • A good teacher I know, Jennifer Auger, has a simple but effective technique for the writing classroom. When her students have blah voiceless writing, she makes them speak the following words to her before reading their text: Listen to me, I have something to tell you. — Peter Elbow, Vernacular Eloquence: What Speech Can Bring to Writing
  • Error messages and alerts
    • Reader’s feelings: frustration, stress, annoyance
    • Tone: gentle, calm, serious
  • Customer service messages
    • Reader’s feelings: frustration, stress, confusion
    • Tone: helpful, friendly, straightforward
  • Help documents
    • Reader’s feelings: confusion, stress, anticipation
    • Tone: helpful, friendly, specific
  • Contact pages
    and forms

    • Reader’s feelings: confusion, curiosity, anticipation
    • Tone: friendly, direct, informative
  • Unsubscribe pages
    • Reader’s feelings: annoyance, frustration, distraction
    • Tone: warm, understanding, honest
  • Social media
    • Reader’s feelings: distraction, interest, curiosity
    • Tone: direct, friendly, unobtrusive
  • Legal policies
    • Reader’s feelings: apprehension, confusion, vigilance
    • Tone: serious, calm, thorough
  • Apologies
    • Reader’s feelings: anger, disappointment, anticipation
    • Tone: honest, warm, direct
  • Prepare for the worst
  • Templates
    • possible content types
      (email, tweet, blog post, etc.)
    • apologize up front if necessary
    • say what happens next
    • who the message will be from
    • who needs to sign off
  • Voice & Tone — MailChimp’s content style guide

“Content in a Zombie Apocalypse” by Karen McGrane

Friends, a zombie apocalypse is upon us: an onslaught of new mobile devices, platforms, and screen sizes, hordes of them descending every day. We’re outmatched. There aren’t enough designers and developers to battle every platform. There aren’t enough editors and writers to populate every screen size. Defeating the zombies will require flexibility and stamina—in our content. We’ll have to separate our content from its form, so it can adapt appropriately to different contexts and constraints. We’ll have to change our production workflow so we’re not just shoveling content from one output to another. And we’ll have to enhance our content management tools and interfaces so they’re ready for the future. Surviving the zombie apocalypse is possible, and Karen will explain how: by developing a content strategy that treats all our platforms as if they’re equally important.

Notes

  • We can no longer function under the illusion that we can tightly couple how something looks with what it means.
  • No matter what the next big thing turns out to be, we’ll have to figure out how to get our content onto it.
  • We need true separation of content from form
  • Content modeling — define your content attributes
  • Create once, publish everywhere
  • And here is an ugly truth about structured data: there are substantial costs to waiting. — NY Times
  • Don’t wait to start fixing your data structure

Day 3: Wednesday, October 29

“Screen Time” by Luke Wroblewski

When many of us were kids, screen time was how long we were allowed to sit in front of a TV. Screen time today is much more complex. People increasingly move between and simultaneously use screens of various sizes, proportions, and quality as they get online each day. From working around the differences in contrast between devices, to adjusting UI to compensate for different viewing differences; from RESS techniques to combine the best of server-side and responsive techniques, to the magic of vertical media queries and much more, you will gain a deeper understanding of screen time today, and explore new ways to design effective cross-screen experiences for tomorrow.

Notes

  • Know Your Screen: online time is screen time and increasingly mobile
  • Output: high resolution & widescreen, vertical media queries
    • A 5″ smartphone has the same resolution as a 27″ Apple Cinema Display
    • Resolutions keep growing: Mo’ Pixels Mo’ Problems
    • Full bleed images on websites come with very large file sizes
    • Use CSS & web type whenever possible
    • Use SVG & icon fonts whenever applicable
    • Resolution media query 
      @media only screen and (min-device-pixel-ratio: 1.5) {
    .class {
        background: url(img@2x.png); background-size: 50%;
    }
}
    • You have to be able to handle different orientations on monitors now
    • Vertical media query 
      @media screen and (min-width: 75em) and (min-height: 30em)
    • [increase font size] on screens that are wide enough but not tall enough for it to make sense.
    • Shorter, wider screens:
      • Tighten up font sizes
      • Move up call-to-actions
    • Re-arrange elements in a layout on orientation change to something that makes more sense
    • Summary:
      1. High resolution is the resolution
      2. Widescreen is the aspect ratio
      3. Media queries know about more than width
  • Input: support all inputs, communicate what’s possible
    • Any piece of glass you can’t touch and interact with will feel broken.
    • Types of input:
      • multi-touch, keyboard, cursor (trackpad, trackball), pen
      • camera, gyroscope, voice, magnetometer, GPS, microphone, accelerometer, bluetooth
    • Don’t attempt to switch between touch and mouse — just support both.
      • There is not a great way to detect touch in browsers today
      • We need a general solution
      • downplay the keyboard shortcuts when can be used to fingerprint screen size is smaller
    • Summary:
      1. Support all the inputs
      2. Communicate what’s possible
      3. Screen size is a poor proxy but it’s all we got …for now
  • Posture: viewing distance, environment & more
    • Distance from the screen
    • Netflix:
      • Designs for distances away from the screen:
        • 10-foot: living rooms
        • 2-foot: laptops
        • 1.5-foot: tablets
        • 1-foot: phones
      • Buttons get bigger for larger screens, in real inch sizes, not pixels (0.5 inch per foot)
        • 1-foot distance: 1″ button
        • 1.5-foot distance: 1.75″ button
        • 2-foot distance: 2.25″ button
        • 10-foot distance: 5.25″ button
    • Screen size is a poor proxy for posture
    • Media queries level 4 
      @media (light-level: washed) {
    body {
        background: #;
    }
}
    • Summary:
      1. Design to human scale
      2. And environments
      3. Not to screen width

“Designing for Crisis” by Eric Meyer

It’s easy to design for the idealized user, someone who’s smart, calm, and informed. It’s less easy, and thus more important, to design for a more realistic user: still smart, but harried and uncertain. The best designs handle both with care. But how many designs can help a user who is completely in the dark and barely capable of rational thought? In this talk, Eric will draw on his personal and professional experience to explore examples of crisis-mitigating design successes and failures. In the process, he’ll illustrate ways that you can and should consider the needs of users teetering on the edge of panic. Helping them will make your designs more relevant and useful for all your users.

Notes

  • You don’t get to decide what your users will want to do on mobile. They do. — Karen McGrane
  • Create personas that are crisis-driven as part of your process
    • Someone who is in leisure (calm)
    • Someone who is in haste (a little distracted)
    • Someone who is in crisis
  • Test each persona in different times and situations
  • Write once, fail everywhere. (That was a Java joke, people.)
  • Use CSS to simulate a different state-of-mind: 
    body {filter: blur(0.67px);}

body {animation: shake 3s infinite ease;}
body > * {animation: shake 5s infinite ease-in;}
body > * > * {animation: shake 7s infinite ease-out;}
@keyframes shake {
    0% {transform: translate(0,0); filter: blur(0);}
    15% {transform: translate(1px,0); filter: blur(0.25px);}
    60% {transform: translate(0,1px); filter: blur(0);}
    85% {transform: translate(-1px,-1px); filter: blur(0.25px);}
    100% {transform: translate(1px,0); filter: blur(0);}
}
  • Use JavaScript to simulate a different state-of-mind: 
    function walk(node)  {
    var child, next;
    switch ( node.nodeType ) {
        case 1:  // Element
        case 9:  // Document
        case 11: // Document fragment
            child = node.firstChild;
            while ( child ) {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;
        case 3: // Text node
            handleText(node);
            break;
    }
}
function handleText(textNode) {
    var v = textNode.nodeValue;
    v = v.replace(/(\w+) (\w+) (\w+) (\w+) (\w+)/g, '$1 $2 $3 $4 ---');
    textNode.nodeValue = v;
}

“The Elusive, Inclusive Web App” by Scott Jehl

You’re excited about the ubiquity of the web. You want to build broadly accessible web experiences. But you don’t want to compromise on delivering compelling, immersive experiences that feel at home in today’s devices, even alongside native apps. Guess what: you don’t need to compromise. Scott will discuss goals, patterns, and techniques for building client-side web applications today, and show you how “universal access,” “responsive design,” and “web app” can work together beautifully.

Notes

  • It gives them a ‘get out of jail free’ card for bad, exclusive practices. — Jeremy Keith on the term “web app”
  • Not only about empathy. Access is a business opportunity.
  • Much of the world’s web traffic this year will come from cheaper, under-featured devices in emerging markets. — Asia: Mobile Internet’s Tomorrow
  • Responsive Design is Responsible Design
  • Weight does not need to increase wait
    • How we load stuff matters more than how much stuff we load
  • Prioritizing Access & Performance
    • Because speed broadens access
  • If you want the app/site/thang to work anywhere, serve functional <HTML>
  • Lessen the weight of existing assets: Minify, Concatenate, & Gzip
    • Optimizing everything that you can
  • Cram your initial view in the first 14kb round trip
  • Reduce render blocking scripts in ‘Above the Fold’ content — PageSpeed Insights
  • Inline CSS (via SSI) in doc head prevents blocking and helps “above fold” content load in under 14K.
  • The fold will vary across devices
  • Detecting critical above-the-fold CSS
  • grunt-criticalcss
  • Inlining your critical CSS & JavaScript
    • Load the rest in a non-blocking manner (if at all!)
  • Inlining critical CSS 
    <head>
    ...
    <style>
        body{font-family:sans-serif;}div.foo{...
    </style>
    ...
</head>
  • Next, inline the critical JavaScript (If you have any…) 
    <head>
    ...
    <style>
        <% include "critical.css" %>
    </style>
    <script>
        <% include "initial.js" %>
    </script>
    ...
</head>
  • Enhance.js
  • A mustard cutter 
    <head>
    <script>
        ...
        // if the browser “cuts the mustard”... (IE9+ here)
        if( document.querySelector && document.addEventListener ){
            loadScript( "enhancements.js" );

            // maybe add a class too?
            document.documentElement.className += " enhanced";
        }
        ...
    </script>
 </head>
  • Shoestring: A library on a budget — Our simple DOM toolkit with jQuery syntax. Good enough until it’s not.
  • Client-side MVC
    • Model: The data, the content.
    • View: The way that content is presented to the user.
    • Controller: The logic for handling user input, which updates the model, and refreshes the view.
  • The process, summarized
    1. API emits data in JSON
    2. Server combines JSON + mustache, outputs HTML
    3. Functional HTML is delivered to browser
    4. CSS + JS add qualified visual and interactive enhancements
    5. JS fetches all app data + templates
    6. All further updates and navigation can be handled with JS

“How Designers Destroyed the World” by Mike Monteiro

Designers have a responsibility, not only to themselves and to their clients, but also to the wider world. We are designers because we love to create, but creation without responsibility breeds destruction. Every day, designers all over the world work on projects without giving any thought or consideration to the impact that work has on the world around them. This needs to change. In this bluntly honest talk, Mike will invite you to consider your responsibilities as a designer and embrace your role as gatekeeper. You’ll learn how to increase your influence and be moved to use your powers for good.

Notes

  • Creation without responsibility breeds destruction
  • Who can pull the plug on something that sucks? You!
  • We need to fear the consequences of our work more than we fear the consequences of speaking up.
  • We need to fear the consequences of our work more than we love the cleverness of our own ideas.
  • Don’t fear taking responsibility, fear causing harm
  • Design for the Real World, by Victor Papanek
    • There are professions more harmful than industrial design, but only a very few of them.
  • You are responsible for what you put into the world
  • We focus so much on what we can do, we forget to ask what we should or shouldn’t do.
  • What goes on the web goes through us!
  • Designers’ responsibility:
    1. To the world
      • You have more power than you think.
      • You have more responsibility than you realize.
    2. To the craft
      • You represent us all.
      • Write. Speak. Teach.
    3. To clients
      • No one hired you to be their friend.
      • “You were hired to do great design, not to make people happy. If you want to make people happy, make sandwiches.”
      • Be willing to get fired.
    4. To self
      • The work we choose to take on defines us.
      • Your portfolio is another word for your reputation, which is another word for your integrity.
      • “You are not an order taker, you are not a pixel pusher, you are a gatekeeper.”
  • Destroy:
    • Your ego
    • Your fear
    • Your apathy
    • Petty authority
    • The voice inside
    • Institutions
    • Misogyny
  • You always have a choice.

“Just Enough Research” by Erika Hall

Every product, service, or interface we design in the safety and comfort of our workplaces has to survive and thrive in the real world. This means countless strangers will be using our creations in a chaotic environment over which we have no control. Research is the key to grounding ideas in reality and improving the odds of success, but research can be a very scary word. It may sound like money you don’t have, time you can’t spare, and expertise you have to seek. Fear no more. Learn practical, effective, efficient techniques that work within any design and development process to give you invaluable insight into your users and what they need and value. Not only will you reduce the risk of a wrong guess, you’ll also uncover new opportunities for innovation.

Notes

  • Assumptions are risks
  • When blue-sky thinking meets reality, reality wins. Before you try to change the world, research it.
  • How to research:
    1. Form questions
      • Good questions: Specific, answerable, practical
      • How else might your target customer solve the same problem?
      • Your target customers have to love you more than they hate change.
    2. Gather data
      • Think critically
        • Critical thinking: Disciplined, self-correcting, clear, logical
      • Observe
      • Interview
        • Interviewing is not talking. Interviewing is listening.
      • Experiment
      • Read
    3. Analyze data
  • Even when the subjects are well selected, focus groups are supposed to be merely the source of ideas that need to be researched. — Robert K. Merton, American Sociologist
  • What is “just enough” research?
    • Different for every organization
    • Different for every project
    • Do enough to:
      • identify needs
      • understand your organization
      • empathize
      • assess the competition
  • You want to be proven wrong, as quickly as possible, for the lowest cost

“How To Champion Ideas Back At Work” by Scott Berkun

An Event Apart, as the name says, is special indeed. But what happens when you leave? How will you act on what you’ve learned? This talk by master of design evangelism Berkun will show you how to bend the brains of your coworkers and clients to your will! You’ll get great advice on educating, inspiring and leading people who weren’t even at the show. Don’t miss this fun closing talk that will ensure you get as much value from your time after An Event Apart as you did during.

Notes

  • The real designer is the person with the power to make decisions
  • Scott Berkun – Books
  • Main points:
    1. How to stay connected
      • When an event is over, your chance to network and connect ends
      • Halfmeet: a person who you almost started a friendship with at an event
      • 5 non-slimy networking tricks
        • Ask everyone you like for a business card
        • Saying thank you starts a conversation
        • Post your notes from sessions during the event – attracts people to you
        • Be active on twitter to find outgoing people
        • If you use LinkedIn, write something personal
      • Speakers love people who ask them thoughtful questions about their presentation
      • Keep the fire burning
    2. Don’t shoot yourself or get shot
      • A champion is an easy target
      • Charm is designed; charm depends on context
      • Convince people to listen to you by saying:
        • “Here is something that will solve your problem”
        • “Here is something that will increase revenue”
        • “Here is something that will save you time”
        • “Here is something that will make you smarter/better/happier”
        • “Here is something that will help you get promoted”
        • “Here is something that will help me get more power”
    3. How to convince your boss
    4. How to learn a lesson
      • Events are abstractions, but your life is specific
      • Min/Max Note Taking
        • Why?
          • You won’t remember much in a week
          • You won’t return to the slides
          • You need to capture reflections today
        • How?
          • 5 bullets per talk
          • note links and references
          • Post a summary on your blog (tweet it)
          • Post it at work / share with your boss
      • Make a table with the following columns:
        • Lesson learned
        • Problems it can solve in my organization
        • Projects or people with that problem

Other Attendee Notes

Related Links