Josh Dick portrait Josh Dick

An Event Apart Boston 2014

My notes from An Event Apart, "the design conference for people who make websites".

An Event Apart SWAG

Introduction

I had the privilege to once again attend An Event Apart, “the design conference for people who make websites.” My notes from An Event Apart Boston 2014 follow this introduction. The notes are grouped by talk, in the order that each talk happened at the conference.

During his talk at the conference, Scott Berkun mentioned his concept of Min/Max Note Taking. This got me thinking about my approach to conference note taking (and publishing). During the conference, I try to capture as many interesting or useful points in my notes as I can, in real time. This method of note taking certainly doesn’t work for everyone, but I find that it helps reinforce the speakers’ ideas in my head.

Notes in summary or “handful of bullets” format would certainly be easier to consume than the wall of text that appears below, but the notion of trying to summarize others’ ideas for consumption doesn’t sit right with me. Summarizing could filter out information or ideas that someone could find useful, or even worse, could accidentally skew the information. To that end, I decided stick with the “wall of text” approach to publishing my notes that I’ve used. Before publishing my notes here, I extensively edit them for clarity and typos, but I don’t make any attempt to summarize them or make them otherwise more digestible.

If you’re interested, my notes from An Event Apart Boston 2013 are also available.

Day 1: 4/28/14

Jeffrey Zeldman - Understanding Web Design (zeldman.com • @zeldman)

  • The mystery of web design: Those that can’t value your work can’t support you in creating your best work.
  • Nobody outside our industry knows what we do; it’s hard to explain in non-technical terms.
  • In a team setting, it’s hard enough to achieve great design even when a team is familiar with design.
  • Understanding a client’s business can be more important to a client than your technical expertise.
  • Doing a personal project helps you break out of the work you’re doing at your job, and if it’s public, helps make people aware of you.
  • Outside the industry, are there any well-known organizations that advocate for good design?
    • The Webby Awards are good at getting media attention and putting on a great show, but don’t necessarily for exhibit good web or interaction design. They get the old media to pay attention to the Internet.
    • The net Awards actually judge design merits, but your boss and client won’t know about them.
    • “Nobody understands the W3C besides the W3C.” The W3C speaks for themselves, not us.
    • Companies speak to us but not for us; Apple wants you to love your iPhone, not HTML.
  • Regarding Facebook’s HTML5 vs native app debacle, Facebook approached mobile as a technology problem, when it was really a design problem. Anything extraneous to Facebook’s core functionality (e.g. sharing pictures with friends) doesn’t belong in Facebook on mobile or on the desktop.
  • HTML5 vs. native is the wrong question. Instead of emulating the desktop experience on mobile, replicate what users love about the experience.
  • Companies harvest data to serve their advertisers instead of their customers.
  • You’re paid to meet business goals, not to make elegant technical achievements that shouldn’t have been attempted in the first place.
  • Web design isn’t about technology. It’s about people.
    • We don’t design for browsers; we design for people to ensure that they have a good experience.
    • We don’t use progressive enhancement or make a page accessible for gold stars; we design experiences for people.
  • To criticize something you don’t understand because it doesn’t behave as something you do understand is wrong (for example: “Web design is shoddy because it hasn’t produced a work as influential as Milton Glaser’s Bob Dylan poster.”) There’s no Mona Lisa of television.
  • Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for.
  • Web design is like architecture or type design. After an architect’s design is done, they relinquish control to the builders and the people who use the building.
  • Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
  • Great web design:
    • makes interaction easy.
    • guides you subtly to your heart’s desire; design is never passive, even if it looks that way.
    • can be invisible or in your face.
    • delights.
    • is not innovative for the sake of innovation.
  • At work:
    • Represent your profession.
    • Don’t wait to be asked to do your job.
    • Arrive early and often.
    • Push your way in. Volunteer.
    • Achieve the right things for the wrong reasons. (For example, The Cold War led to the space race and the moon landing.)
    • Your boss will never care about the web for the same reasons you do. Your job is to find the reasons they’ll care about.
  • We are all evangelists; we need evangelists more than we need superstars.

Sarah Parmenter - Designing Using Data (sazzy.co.uk • @sazzy)

  • “Design is no longer the killer differentiator.” -John Maeda
  • Instincts are experiments. Data is proof.
  • “…become an expert to facilitate the most productive conversation you can have.” -Kevin Hoffman, An Event Apart 2014
  • “Many designers who are skilled technicians, craftsmen, or researchers have struggled to survive in the messy environment required to solve today’s complex problems. They may play a valuable role, but they are destined to live in the downstream world of design execution.” -Tim Brown, IDEO
  • Compared to learning a new tool, designing using data has a much bigger impact over a much shorter time.
  • Being able to design with data is what will keep us valuable.
  • It’s easy to think of data/content as not part of our job.
  • “Research is formalized curiosity. It is poking and prodding with a purpose.” -Zora Neale Hurston
  • “No one has an excuse to make an uninformed decision anymore.” -Federico Holgado, Mailchimp
  • “Being a good designer is no longer enough. We need designers that can tell you WHY they design something a certain way.”
  • “…designers go from decorators to problem solvers.” -Aaron Walter, Mailchimp
  • “(If) a strategy can’t predict outcomes, our strategy is broken.” -Jared Spool, An Event Apart 2014
  • Vanity metrics are pieces of data on which you cannot act and exist purely for ego-stroking:
    • hits
    • total signups
    • page views
    • number of visits
    • unique visitors
    • likes
  • A metric needs to tell you something tangible to act on.
  • “Making your numbers go up (any numbers–your BMI, your blood sugar, your customer service ratings) is pointless if the numbers aren’t related to why you went to work this morning.” -Seth Godin
  • Track people and their habits.
  • These are tools that can be used responsibly to do just that: Minimaltyics, KISSmetrics, GoSquared, gaug.es, Mixpanel, Chartbeat, TrueSocialMetrics, crazyegg
  • BrowserStack for cross-browser testing
  • Optimizely for A/B testing
  • Seth Godin’s “purple cow” business is a business that does something that bucks the trend of what a related business would be.
  • “Experiment led design may happen outside of normal work.” -Kevin Hoffman
  • People like honesty; they see through sales patter. Don’t be afraid to share your failures.
  • Referrer loyalty: Those who arrive at your site from a referrer are likely to arrive at your site from the same referrer in the future.
  • Blushbar:
    • Used social metrics to optimize social reach.
    • Realized they needed an iPhone app because people didn’t know how to bookmark the appointment booking web page.
    • It’s the small things that make you stand out from the crowd. (For example, Blushbar gave out umbrellas in case of rain.)
    • Changing “book appointment” to “book YOUR appointment” resulted in a 200% increase.
  • For Highrise, “see plans and pricing” was a more effective web call to action than “start your 30-day free trial”.
  • Good visual media creates a more positive perception of the value of the product or service you’re selling.
    • But, content comes first!
    • Use “real-world” imagery instead of professionally created imagery; too much polish can look like stock imagery. (Made the difference between 0 clicks vs 521 clicks in two Facebook campaigns with the exact same title and wording.)
  • Web-savvy people have a higher tolerance for bad design.
  • If you can’t communicate your findings in the words of your boss/clients, you’ve failed to help them find value from those findings.
  • “A mind is like a parachute. It doesn’t work if it is not open.” -Frank Zappa

I should point out that Sarah’s “Designing with Data” presentation used data from her business, Blushbar, to make its points. I was impressed that she used the presentation itself to practice what she preached.

Dan Mall - Responsive Design is Still Hard/Easy! Be Afraid/Don’t Worry! (danielmall.com • @danielmall)

Dan outlined a “modern web design process, in four easy payments.”

  1. Plan (research and hypothesize)
  2. Inventory
    • Content inventory: A simple content strategy for dummies designers is to add/edit/remove components as necessary to fit the content.
    • Performance inventory: Calculate your performance budget before designing, since it can help focus your design (number of images, JS libraries, etc.)
    • Pattern inventory:
      • Atoms (HTML tags)
      • Molecules (collections of atoms, for example “Image with Caption”)
      • Organisms (collections of molecules, for example “Article Body” or “Carousel”)
      • See demo.patternlab.io for an example of a pattern inventory.
    • Visual inventory:
      • If you want to get a better understanding of something, asking a question is infinitely more useful than making a statement." -Jason Santa Maria, The Pastry Box
      • “Is showing their app on a laptop on the homepage the best way to sell it to prospective customers?”
      • “Can their brand pull off a minimalist design approach?”
      • “Should their copy be more playful?” Would a playful design with kitschy illustrations make you grin as you explore the site?
      • Rather than wasting time creating comps, splice the customer’s logo into an existing design. This allows the customer to see themselves in a certain light without putting lots of effort into comps. Would a design for CNN be appropriate if its logo was simply spliced into a different, existing site?
  3. Sketch — explore ideas roughly and quickly.
    • Content reference wireframes
    • Linear design: List out all of the components of the page (header, grids, footer, etc.) and just block them out as gray boxes. This allows you to see which components should have more space devoted to them relative to other components.
    • It’s easy to make boxes responsive but harder to make a web site cohesively responsive.
    • Element collages: Turn powerful phrases into visual hooks.
      • “Obviously this isn’t a website, but I see how it could be one.” -The perfect client’s reaction to an element collage
      • Make an element collage horizontal so a client doesn’t mistake it for a web site comp.
      • “Element collages are like giving your client a peek at all those hidden layers.” -Paul Lloyd
    • Prototyping, with problem and solution statements: “This prototype does one thing and one thing only.” The first prototype should be something any developer can do; prototypes should get iteratively more complex and fleshed out.
  4. Assemble
    • “Assembling the site should take the least time on the project. The real work is research, sketching, prototyping.”
    • Responsive web design should act as a catalyst for:
      • Availability of content
      • Performance
      • Accessibility
      • Organizational change
      • Progressive enhancement
      • Workflow
      • Business benefits

Luke Wroblewski - Screen Time (lukew.com • @lukew)

Know Your Screen

  • In 2013, enough LCD screens were sold to dedicate 0.5 square feet of LCD to every human on earth.
  • In a world of glass, online time is screen time.

Output

  • When creating web content, use:
    • Image resources represented as vectors rather than as raster pixels whenever possible.
    • CSS and web type whenever possible.
    • SVG and icon fonts whenever applicable.
    • Picturefill (for now) if you need to use raster graphics.
  • Increase font sizes on screens that are wide enough but not tall enough for it to make sense.
  • For widescreen layouts:
    • Tighten up the layout by vertically compressing whitespace.
    • Move calls to action closer to the top.
  • For portrait layouts:
    • Rebalance widescreen layouts by minimizing menus and maximizing content.
    • Menus can be repositioned off-canvas or at a different portion of the screen (even the bottom; repositioning towards the bottom works better than to the sides.)
  • Output trends:
    • High resolution is the resolution.
    • Widescreen is the aspect ratio (16:9 or even 19:10).
    • Media queries know about more than width alone; pay attention to variable heights as well!

Input

  • Not all devices correctly report whether they are touch capable, so support all inputs (both touch and click-based input.)
  • You can include “hidden features” for each set of inputs. For example, double tapping an image in a touch interface and mouse-wheel scrolling in a click interface could both perform the same “zoom” action.
  • Communicate what’s possible.
  • Screen size is a poor proxy for detecting input type, but it’s what we’ve got…for now.

Posture

  • Posture is how we combine input and output.
  • Physical screen size and viewing distance determine the final perceived size of objects (in real-world units like inches, not in pixels!)
  • Objects should be sized approximately 1/2 inch per foot of viewing distance. (Example: the box art in all of Netflix’s UIs across different devices of increasing size.)
  • A full HD resolution TV can have the same resolution as a phone (1920px × 1080px), even though one is viewed ten feet away while the other is viewed one foot away.
  • Design to human scale and environments, not to screen width.

Kristina Halvorson - Content/Communication (braintraffic.com • @halvorson)

Principles

A principle internally motivates us to do things that seem good and right. A rule externally compels you to do things someone else has deemed good and right.

Content Principles

  • Principles unite us in our day-to-day-work.
  • This content is not for us.
  • “Responsive” does not equal “reactive”.
  • The story informs the format.
  • Numbers aren’t everything.

Strategy

  • A good strategy provides you with context and constraints, and doesn’t allow you do do anything/make excuses for anything: “We will share user-facing, task-based content that makes our customers feel smart and safe, both personally and professionally.”
  • Strategy keeps us accountable.
  • Strategy helps web teams ask better questions about content at the beginning of a project.
  • A content strategy consists of content components (substance and structure) and people components (workflow and governance).

Process

  • Do not make process your god.
  • “Different methods work or fail because of people, not because they are universally good or bad.” -Pawel Brodzinski, Agile Bullshit
  • Artifacts (fonts, etc) are tools, not outcomes.
  • Good process helps us move together.

Roles

  • Roles give us a place.
  • The RACI Model:
    • R - Who is responsible for completing a task?
    • A - Who is accountable for the work’s success?
    • C - Who must be consulted before work can be signed-off on?
    • I - Who must be kept informed along the way?
  • For every project, every time:
    1. At some point, invite All the People
    2. Make sure everyone’s aligned on terminology (e.g. audit vs. inventory, wireframe vs. prototype)
    3. Identify timing issues, agendas, overlapping responsibilities

Perceptions

  • Perceptions give way to perspective.
  • “In content strategy, our master skills must include translating and negotiating, so we can facilitate communication between disparate disciplines and help them to communicate.” -Rachel Lovinger, Tinker, Tailor, Content Strategist

Conclusion

  • We are perpetually catching up.
  • Our work is personal together.
  • “This multi-device web design increases stress exponentially.” -Trent Walton, .net Magazine
  • “A study of over 350 people in 6 business units at a financial services company found that the greatest predictor of a team’s achievement was how the members felt about one another.” -Shawn Achor, The Happiness Advantage

Jared Spool - UX Strategy Means Business (uie.com • @jaredspool)

Design and Business

  • Design is the rendering of intent.
  • Every design has content, and every design has… …a design.
  • Great content and great design both exist, but we tend to treat them as separate entities. We believe they overlap with great UX, but in truth they are inseparable: great content + great design = great UX.
  • We use strategy to achieve a desired outcome, but UX strategy can’t predict outcomes.
  • Regarding Apple’s iOS 6 Maps fiasco: Apple acquired 3 mapping companies and used 10 data sources; Google used 1,300 data sources and had 1,000 people × 10 years of correcting map errors. Apple didn’t do the wrong things, Google had done it better 10 years earlier. We were comparing 10-year-old vs. 1-year-old process and strategy.
  • Amazon’s cash float model:
    • Amazon doesn’t focus on profit for most of the things they sell, because they can sell everything at cost and still make money.
    • Amazon turns inventory every 20 days while Best Buy turns inventory every 74 days.
    • Standard retail payment terms are 45 days.
    • Best Buy has a cash debt before distributors are paid; Amazon has a cash float.
  • Great business models are explicitly designed.
  • How business is done in Silicon Valley: South Park’s “Underpants Gnomes” model (1. Steal underpants; 2. ???; 3. Profit)
  • Business strategic priorities:
    • Increase revenue
    • Decrease costs
    • Increase new business
    • Increase existing business
    • Increase shareholder value
  • Can apply those strategic priorities to any business (examples: Zappos’ pioneering self-return policy, universities, government, etc.)
  • Framing work in these terms helps communicate it to the people who are responsible for the health of the organization.

Types of Business Models

  • Advertising is a business model failure (For example: look at how cluttered dictionary.com is.)
    • Everything that isn’t content on a page is there to disrupt the user from the experience they intended to have.
    • It’s intentional and it disrupts the user.
    • Advertisers don’t care about the user; they care about selling stuff.
    • Advertising disrupt’s the users’ experience supposedly to benefit the advertiser.
    • Internet advertising statistics:
      • A typical internet user sees 1,707 ads in a year. (Comscore)
      • An average ad is clicked 0.1% of the times it is shown. (Doubleclick)
      • A 468px × 60px banner is clicked 0.04% of the times it is shown. (Doubleclick)
      • Users can’t see 31% of ads. (Comscore)
      • Users click on 50% of mobile ads by accident. (Goldspot Media)
      • You are 475.29 times more likely to survive a plane crash than to click on a banner ad in your lifetime. (Solve Media)
    • Regarding K-Mart’s “ship my pants” ad: “I’ve watched this ad a thousand times. I love this ad; I will never shop at K-Mart.”
    • When you don’t pay for the product, you are the product.
    • walgreens.com: 3.8% of the screen real estate is dedicated to the top 5 most accessed elements on the page, which account for 60% of traffic. The rest of the page is crammed with marketing stuff users don’t care about.
    • Internet advertising that could actually work relies on seducible moments, when an ad delivers the right content at the right time.
    • Figuring out what products go with what content is prohibitively difficult and expensive, but it works because it is purposely built into the experience.
    • Advertising should be the business model choice of last resort.
  • Metered paywalls
    • nytimes.com: Only users who return to the site multiple times are shown the paywall (limited to 10 articles for free.)
    • NY Times made more money from the metered paywall than from advertising. This plays into the business strategic priorities.
    • Metered paywalls demand excellent content.
  • Supporting product sales
    • iFixit shares information about repairing electronic devices, and sells the specialized tools needed to do so.
    • Etsy sells instructions to make products as well as the products themselves.
  • Alternative Channel Revenue
    • Radiolab makes more money from their live shows than from pledge drives.
    • Mythbusters On Tour makes more money than television advertising.
  • Content Distribution (examples: Amazon Kindle, Apple iTunes)

Conclusion

  • Business model recap:
    • Metered paywalls
    • Repurposed content
    • Supporting product sales
    • In-app purchase
    • Alternative channel revenue
    • Content distribution
    • Advertising (but don’t do it!)
  • Content has actual monetary value!
    • SignificantObjects turned thrift-store chotchkies objects of value by attaching stories to them.
    • Crutchfield writes their own copy for items in their online store, while Walmart’s site relies on generic information provided by vendors. In user testing, users spent 237% of their budget at Crutchfield, but only spent 89% of their budget at Walmart.
  • The best UX strategists create delight by working in the intersection of business and design.
  • We can design intentional business models.
  • The 5 business strategic priorities are a tool for mapping our design intent into business objectives, and to map business objectives into design intention.
  • We need to study business models like we study technological techniques.

Day 2: 4/29/14

Jeremy Keith - The Long Web (adactio.com • @adactio)

  • Mobile first? URL first. Design your URLs before you design anything that’s going to appear on the screen.
  • URLs are the one universal syntax of the web. They should be readable, guessable, and hackable.
  • Content first, navigation second.
  • It’s OK to use unsupported attributes/elements in HTML since browsers typically ignore things they don’t understand and degrade gracefully.
  • The <datalist> element are the bastard love child of the <input> and <select> elements.
  • Any text in a <datalist> can also be used as a placeholder with a “for example” or “e.g.” prefix.
  • Progressive enhancement doesn’t mean designing for the lowest common denominator; rather it means starting from the lowest common denominator.
    • “I like an escalator, because an escalator can never break. It can only become stairs. You’ll never see an ‘Escalator Out of Order’ sign, only ‘Escalator Temporarily Stairs. Sorry for the convenience.’” -Mitch Hedberg
    • “Javascript is the electricity of the web.” It should be “subservient to the existing structure.”
    • In other words, a site should be enhanced by JavaScript but not necessarily require it.
    • “Until the page has finished loading, every user is a non-JavaScript user.” -Jake Archibald
    • Progressive enhancement is more about technology failing than technology not being supported. (For example: <a href="javascript:void(0)">Download</a> broke the ability to download Google Chrome when the download page’s JavaScript stopped loading.)
  • Don’t rely on 3rd-party APIs for your core business since they could go away without notice.
  • Use conditional loading for any nonessential third-party content (for example, social widgets; write links in the HTML that will be shown while the page loads, then after the page is done loading, allow widgets to load and replace the links.)
  • The rel attribute can be used to make prefretching suggestions to the browser to optimize performance.
  • The best way to be future friendly is to be backwards compatible.

Paul Irish - Responsive Design Performance Budget (paulirish.com • @paul_irish)

  • 71% of people expect websites to load as fast (or faster) on their phone than on a computer.
  • The #1 thing you can do for your site for mobile devices is to make it faster.
  • Worry about speed way before worrying about reformatting sites to fit small screens. (Double-tap and pinch zooming are workarounds for desktop layouts, but there are no workarounds for a slow site.)
  • Speed Index: A metric that precisely measures a user’s experienced page load time in milliseconds.
  • Total page bytes, number of requests, and bytes of JavaScript are not reliable indicators of actual page load times.
  • For fast pages, what is the right number of requests and optimal page size?
  • “Measuring performance by the KB is like measuring effectiveness of your diet by the pound. Measuring performance by number of requests is like measuring your diet by number of things you ate - in both cases, who cares about what you actually ate, right?” -Ilya Grigorik
  • Not all requests are made equal; where are they initiated? What part of the UX do they block?
  • Not all bytes are made equal; the first 14kb are extremely important. Different content-types can have different performance impact(s) for the page.
  • “Bloat” isn’t a great word to describe performance issues, it can refer to transfer size, code complexity, or dead code.
  • Components of an HTTP request:
    • DNS lookup
    • New TCP connection (handshake roundtrip)
    • HTTP request requires minimum of one round trip to the server — plus server processing time.
  • Bandwidth + Latency ≈ Performance.
    • Bandwidth: Amount of data transferred over the network per unit time (e.g. 5 mb/s)
    • Latency: Delay in the network to transfer a packet (e.g. round trip time)
  • Last-mile latency (cable/DSL) is slow, and it’s even worse for mobile (see “Living with Lag”).
  • Video streaming is bandwidth limited; web browsing is latency limited.
  • Optimizing transport (TCP) performance:
    • TCP is optimized for long-lived connections and bulk data transfers.
    • Most of the HTTP data flows consist of small, bursty data transfers, but network round trip time is the limiting factor in TCP throughput and performance in most cases.
    • Consequently, latency is the performance bottleneck for HTTP and most of the web.
    • Latency defines the speed at which the page loads; mobile’s growth means average latency is growing.
    • Latency’s influence means optimizing for request count.
  • Optimizing for the critical path
    • When a JavaScript file is referenced in the <head> of the document, the browser can’t process the rest of the page until it has finished processing that file.
    • Eliminate render-blocking JavaScript (especially in <head>). Load all JavaScript asynchronously.
    • Critical CSS: The CSS used to render the content “above the fold”.
    • Minimize render-blocking CSS.
    • Deliver the goods — serve critical content in the initial HTML, then progressively enhance.
    • No redirects (they just add round trip time).
    • Use gzip.
  • Tools that can help: WebPagetest / Google PageSpeed Insights / Pagespeed Module (apache/nginx) / speedcurve
  • Visualize your performance wins! Use visuals and data to make your case for improving performance.
  • Your count of high-latency users is going to increase. Prepare for it.
  • Aggressive but good performance goals:
    • Deliver a fast mobile web page load (show above-the-fold content in under 1 second (Speed Index under 1000). Serve critical-path content, including CSS, as part of the first 14kb of the first server response.
    • Delight your users.

Lea Verou - The Chroma Zone: Engineering Color on the Web (lea.verou.me • @LeaVerou)

Screens, Pixels, and Subpixels

  • White pixels are actually composed of RGB subpixels, using additive color.
  • Different screens have different subpixel geometries.
  • Text is rendered with subpixel antialiasing; you can play with it using Subpixel Explorer.
  • Browsers allow you to explicitly disable antialiasing through CSS selectors (but don’t do it, since it makes fonts look terrible; it could be useful for icon fonts.)
  • 3 colors × 8-bit subpixels = 2^8 × 3 = 3 bytes per pixel in uncompressed images.

Colors in HTML 3.2

Colors in CSS 1 - 2.1

  • rgb() syntax
  • #rgb shortened hex syntax
  • “orange” color name (seriously)

CSS Color Level 3

  • A color space has perceptual uniformity when the perceptual similarity of two colors is measured by the distance between them.
  • RGB and RGB-derived color spaces are not perceptually uniform.
  • Everyone says “CSS3” even though it doesn’t exist (only the modules are versioned).
  • HSL colors are slightly more intuitive than RGB colors.
    • Saturation: Closeness to gray.
    • Lightness: Closeness to white or black (but the model treats pure blue and pure yellow as having the same lightness, even though yellow always appears lighter to us; HSL is not perceptually uniform since it’s derived from RGB.)
  • The hue-rotate filter is useful for colorizing images when applied on top of a sepia filter.
  • The multiply blending mode tends to makes colors darker. (For example, red[255,0,0] × blue[0,0,255] = black[0,0,0,].)
  • Lightness != luminance, can’t rely on it to judge whether white or black text would appear better on top of a color.
  • CSS4 introduces relative luminance to better match human perception, but it’s not perfect; it slightly fails for orange, but will always fail “better” than lightness (HSL).
  • When dealing with transparency, there’s no such thing as a transparent pixel; transparency is calculated using alpha blending.
  • Using the transparent keyword is a shorthand for transparent black, so linear-gradient(90deg, white, transparent) will actually fade from gray instead of pure white. Use hsla() transparent white instead (linear-gradient(90deg, white, hsla(0,0%,100%,0))).
  • CSS Color Level 3 included some racist color names: indianred, navajowhite, and peru
  • CSS Color Level 3 also included a color named darkgray which is actually lighter than gray, due to backwards compatibility (gray is halfway between white and black in RGB.)
  • The currentcolor keyword is the first variable we ever got in CSS.

The Future: CSS Color Module Level 4

CMYK vs. RGB

  • CMY “works” mathematically but not in the real world, that’s why CMYK is used for print.
  • sRGB has a slightly larger color gamut than CMYK (LAB > Adobe RGB > sRGB > CMYK)
  • There’s no simple way to convert between RGB and CMYK.

Josh Clark - Mind the Gap: Designing in the Space Between Devices (globalmoxie.com • @globalmoxie)

Physical Gap

  • We’ve lost the ability to transfer information between two physically collocated devices; we’re in a multi-device world individually. (An old example: Palm Pilot beaming.)
  • Designers haven’t provided an elegant strategy to cross the physical gap; right now all we have is remote control, self-email or SMS, and content syncing.

Behavior Gap

  • How can we make physical interactions for exchanging data between devices?
  • Sequenced: Move from one device to the other, e.g. desktop to mobile.
  • Simultaneous: Live peer-to-peer interaction (for example, Racer).
  • It’s not enough to share content across devices. Share action.
  • Sync verbs, not just nouns.
  • Current technologies: WebSockets, WebRTC, Bluetooth LE, Web Audio API, Infrared
  • Danger: Screens encumber and constrain. Design for people, not screens. The best things in life happen outside of screens. It’s our obligation to bend technology to our lives, not vice versa.

Physical Interaction

  • Do we need screens at all? (For example, Drumpants doesn’t.)
  • Drumpants uses human → device interaction, how do we bring that to device → device interaction?
  • The Misfit Shine fitness tracker syncs to your phone by placing it directly on the screen.
    • It turns out this is because the Shine is made of metal which significantly weakens its Bluetooth signal, so the Shine needs to be physically close to the phone to sync.
    • Embracing a constraint can lead to the best designs.
  • If you physically tap your phone on your computer, nothing happens. Or does it? (See Happy Together’s demo video and code.)
  • This is not a challenge of technology; it’s a challenge of imagination.
  • There is magic in the gaps between devices. (See the Grab Magic demo video.)
  • Magic tends to decay; it is self-deprecating, we get used to it, and it’s a moving target.
  • Never ever ever ever try to out-mouse the mouse.
    • For example, using the LeapMotion as a mouse is a much worse experience than just using a mouse.
    • However, the LeapMotion can be used to add digital magic to physical objects. (Example: pointing at floors in a physical model of a building highlights different floor plans with lights.)
  • Mundane computing: Making mundane tasks easier. (But perhaps you can go too far, given the example of the Egg Minder.)
  • Anything that can be connected will be connected; everyday objects will become digital gadgets.
  • Physical things have digital avatars.
  • Software makes hardware scale.
    • Teddy Ruxpin looks creepy today, and relied on canned audio tapes. Toymail is a modern technical successor that allows for social interaction.
    • LG HomeChat: Text your appliances!
  • Danger: Connected devices won’t always say nice things. Anything that can be hacked will be hacked. (Cam you imagine an appliance botnet? Or an instant poltergeist?)
    • BBC article: “A luxury toilet controlled by a smartphone app is vulnerable to attack, according to security experts.”
  • Software is ideology, embedded with values.

Imagination

  • Plan for gadget hopping
  • Share action
  • Peer-to-peer sharing
  • Offscreen interactions
  • Design for sensors
  • Avatars for objects

Bruce Lawson - Web+: Can the Web Win the War Against Native Without Losing its Soul? (brucelawson.co.uk • @brucel)

  • Why the web-vs-native gap? 86% of time is spent in apps rather than the mobile web.
  • Forget AppCache, Service Workers are the new hotness.
    • Invoked even when offline, can enable apps that are “offline by default”.
    • Normal resource loading is the fallback behavior.
    • Forces you to have URLs.
    • Service Workers + IndexedDB = Power.
  • High-level or low-level?
    • “…when we try to produce high-level APIs, they tend to suck for various reasons, and therefore that we should produce lower-level primitives atop which people can build nicer things” -Robin Berjon (W3C, HTML Editor)
    • “…browser vendors should provide new low-level capabilities that expose the possibilities of the underlying platform as closely as possible. They should also seed the discussion of high-level APIs through JavaScript implementations of new features” -The Extensible Web Manifesto
  • BBC: “since the launch of iPlayer the amount of platforms with incompatible distribution infrastructure, video formats and security technologies has rapidly increased. This level of growth in the complexity of delivery is unsustainable”
    • Perfect argument to promote web over native, hence DRM for the web is a necessary evil.
    • Allow the battle for DRM to win the war for the web (over native).
  • People prefer the familiar; users trust known resources.
  • Bookmarks in mobile browsers are used sparingly, instead mobile users “bookmark” by downloading the native app.
  • What’s the difference between “bookmarking” a page and “installing” it? Making it visible outside the browser.
  • Native apps feel native to the device/platform, web apps don’t. Android and iOS are gradually developing different conventions for interaction, and a native app responds the way its user expects.
  • W3C Resource Priorities spec — <img lazyload />
  • On mobile, hardware-accelerated scrolling gets knocked back down to software/the CPU if the browser has to listen for scroll events.
  • For the web to get a leg up on native, we need univerally installable webapps.
    • No versioning, no installing, instantaneous updates à la Google Chrome
    • “I don’t care which [standard] we end up using, I only care that we all end up using the same one.”
    • Installable Webapps: Extend the Sandbox
  • Using plain HTML for the initial page load will always be faster than JavaScript solutions.
    • There are tools like prerender.io, but do you really want to go down that path?
  • Don’t make webapps that emulate all of the failures of native apps.

Scott Berkun - How to Champion Ideas (Back at Work) (scottberkun.com • @berkun)

  • The real designer is the person with the power to make decisions.
  • There are more designers now who have founded a company than ever before in history.
  • Staying connected helps you champion ideas.
  • 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. (You can guess what a halfhook is.)
  • 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 — start a UX happy hour! Monthly booze is magical.
  • When trying to champion something, don’t be an easy target. Don’t shoot yourself or get shot.
  • Events are abstractions, but your life is specific.
  • Min/max note taking:
    • You won’t remember much in a week
    • You won’t return to the slides
    • You need to capture reflections TODAY
    • 5 bullets per talk
    • Note links and references
    • Post a summary on your blog (or tweet it)
    • Post it at work / share with your boss
  • Championing something requires a great deal of persuasion and charm; it’s not what you say, it’s what people hear.
    • Charm is designed and depends on context: “Here’s something you should be doing” vs. “Here’s something that will help solve your problem”.
    • Use language that matters to your audience.
  • Progress is change; leaders like status quo and resist changes; therefore leaders resist progress. Powerful people want to protect their power.
  • Champions of ideas have really good networks.
  • How to convince your boss to try new things:
    • Be awesome at your job
    • Get support from an influential coworker
    • Plan a trial, including how to evaluate
    • Pitch it
    • Do it awesomely
    • Repeat

Conclusion

Here are my takeaways from the conference:

  • We design for people, not browsers. Worry about experience before worrying about technology decisions; don’t miss the forest for the trees.
  • We need to go back to basics to improve performance, especially on mobile. Serve static, critical-path content as quickly as possible, then progressively enhance after the page is done loading.
  • Make an effort to effectively communicate about design in ways your coworkers and superiors will understand and benefit from, so everyone wins.

Finally, I have to mention that I was delighted to see that last year’s bacon cupcakes made a welcome reappearance this year:

Bacon Cupcake

As always, An Event Apart was well-organized, informative, and served as a terrific inspirational recharge.

Tags: designwebdev

[ ↩ all writing posts ]