Jack Crawford
Apr 15, 2015
11 mins reading time

My smashing experience

Smashing Conference Last month (17th–18th of March 2015) I attended Smashing Conference Oxford. It was my first time at this conference and I enjoyed it a great deal, met some really interesting people and left feeling inspired to apply a bunch of the things I’d learnt back to the real world.

Below are my notes, key points and interpretations of each of the talks I attended.

A good writer is a good thinker - Christopher Murphy @fehler

  • Writing is a great way to learn, it rewires your brain
  • Writing helps you develop, challenge and test new ideas
  • Expand your library as much as you can
  • Don’t just read within your own industry, expand your field and you will be surprised what you can learn
  • The more you consume, the richer your outcomes

Designing for people - Meagan Fisher @owltastic

Having exposure to real users is a must when building products, this talk went into the what, why & how of user testing

  • People building products need exposure to users to understand the feelings & needs of users
  • Try and set a goal to meet, two hours every six weeks should be enough
  • More user exposure = more innovation
  • Common CEO explanation for startup failure: “People just don’t get it, they don’t see my vision”
  • Make friends with reality
  • Get proven wrong at lowest cost, identify problems for your users as early as possible
  • Let go of our own assumptions
  • Be easy to reach on social media, email, etc
  • The technical team should be going through user support tickets
  • Helpful user testing tools: Silverback, Full Story & Inspectlet

Don’t give them what they want, give them what they need - Richard Rutter @clagnut

A case study on designing the The Royal Borough of Kensington and Chelsea website

  • Identify what the client actually needs, not what they want. This is essential but is usually hard!
  • Don’t forget the call centre! They are a valuable user research resource that shouldn’t be ignored
  • All pages should have one primary goal, split things that do two things into two pages
  • Split up mental models e.g. don’t ask for application number and street name in the same input field
  • Always test your tests
  • If all else fails, “blame it on the new CMS”

Responsive images are here - Yoav Weiss @yoavweiss

  • @respimg Responsive image group
  • Load images depending on screen size, directly from HTML elements with srcset attribute
  • The following syntax
<img srcset="large.jpg  1024w,
      medium.jpg 640w,
      small.jpg  320w"
   sizes="(min-width: 36em) 33.3vw,
      100vw"
   src="small.jpg"
   alt="A rad wolf" />

Rethinking publishing - Peter Bil’ak @peterbilak

An innovative solution to increasingly ineffective traditional publication methods, social distribution

  • Readers are a commodity sold to the advertisers
  • Typography is the only connection between different mediums (e.g. print & web)
  • Flexible pricing model: how much is the user willing to pay?
  • Online publishers should make unsubscribing easy
  • Anything made by a human has been designed
  • Removing something is also an act of design
  • Build your maintenance into your product
  • Social distribution

Visualisation that takes us beyond the numbers - Natalie Yadrentseva @natalieyadren

An in-depth look into the power of data visualisation

  • Timelines - abstract from the personal feelings of time
  • Use colour hue to show the differences in data
  • Use colour intensity to represent magnitude
  • colorbrewer2.org

Building beyond the browser - Tom Gianattasio @attasi

How the guys at macaw used node-webkit to build their desktop hybrid app

  • Gives you control over the window (draggable, shape, transparency)
  • Chromium arguments can be passed in e.g. --disable-web-security
  • Macaw uses React-like Virtual DOM diffs
  • Macaw also uses Virtual CSS Object Model
    • CSSOM benchmarks: 15ms vs 220ms livereload
  • Hybrid. Better. Faster. Stronger

A plea to the community & browser developers to stop Blink becoming a monopoly, like IE6 was. A monopoly is bad for the web

  • We made them require IE6 - “Best viewed in IE6”
  • iPhone almost influenced a Webkit monopoly
  • Nobody reads specs, even fewer obey specs
  • CSS prefixes e.g. -webkit-cool-property influence people to only support these cool browsers
  • No more prefixing in Blink, stop building a monopoly
  • IE starting to alias -webkit prefixes
  • Blink is being built by individuals, not companies
  • Is native killing the web? We hope not
  • We need to be the web, but better

Welcome to Planet Fintlewoodlewix - Chris Heilmann @codepo8

Christian was the mystery speaker with an influential talk on fixing the present before we try to innovate the future

  • Feeling like a fraud (overcompensate, aggression, lethargy)
  • We don’t control our users
  • Less privileged people have a right to get online, support them too. Forget about us, they deserve to be connected
  • Backwards compatibility shouldn’t be a nuisance
  • Learn the languages, then use the frameworks for a deeper understanding
  • Try to suck at things, it’s the best way to learn
  • Build minimum loveable products rather than mimimum viable products, nobody wants a shoddy experience
  • Fix the broken things before we build the new shiny broken things

Enhancing responsiveness with flexbox - Zoe Gillenwater @zomigi

Using flexbox today in the real world as progressive enhancement with fallbacks

I attended @zomigi’s Leveling Up With Flexbox workshop on the first day of the conference. The session was highly interactive and hands on and taught me a lot about the power of flexbox. The main thing I learnt is that it’s most useful as a tool for enhancing layouts for components on the page, rather than a replacement for all layout techniques. Floated grids still have a place, for now!

  • Change the order of components with CSS without affecting their order in the DOM with flexbox’s order property
  • Responsive web design is not binary, it’s a continuum

Debugging HTTP - Lorna Mitchell @lornajane

A fun spin on the wonderful world of HTTP and how to debug it

  • 6 stages of debugging (denial, frustration, disbelief, testing, gotcha, relief)
  • Seeing the problem is harder than fixing it
  • Devtools copy as cURL
  • ngrok localhost tunnel for exposing local servers to the public
  • Charles proxy - debugging through proxies

Making a silky smooth web - Paul Lewis @aerotwist

Lots of techniques for building and debugging performance in front-end web applications

  • The rendering process in a browser:
    • Layout: set the geometry and position for each element
    • Painting: put the pixels for each element into layers
    • Composite: draw the layers on the screen
  • csstriggers.com
  • requestAnimationFrame > setTimeout as it doesn’t block rendering
  • Devtools timeline JS profiler
  • Use faster CSS selectors & limit selection scope
  • Reduce paint complexity, look at the tools
  • Animate the composites
    • transform & opacity are the silkiest to animate, as long as the element is on it’s own layer
    • Promote to a layer using translateZ(0) or will-change CSS properties
    • Don’t promote all the things, layers use memory
  • RAIL
    • Response (100ms after touch to respond)
    • Animation (10ms if we can)
    • Idle (50ms at a time)
    • Load (1000ms aim)

Crafting for #worlddomination - Polle De Maagt @polledemaagt

Social media is a powerful marketing, customer support and payment taking tool

  • Add an automated “expected response time” as the twitter header
  • Payments through social media
  • €80000/week taken via social media payments at KLM
  • Awesome dog advert

User research for designers & engineers - Rachel Ilan Simpson @rilan

User research is really scary but absolutely essential

  • Talking to users is scary, it could invalidate our products & ideas
  • Why talk?
    • Identify new opportunities
    • Build the right thing
    • Fail early, fail often
  • Card sorting - what do the users think is the most important feature?
  • Codesign sessions - let your users design with you
  • Prototyping tools: Pop app, Keynotopia
  • The scrollwheel Guy Collins animation
  • Make sure you debrief with the team after user testing!

UX of offline-first - Jake Archibald @jaffathecake

Performance on the web matters more than ever, make sure your sites are (or seem) as fast as possible

  • Let users play level one as soon as level one is ready
  • Use markup for markup with actual content, don’t leave all of the rendering to JavaScript
  • Unblock your scripts
  • Lie about performance e.g. make the UI seem as though a request has finished, even if it’s still queued in the background
  • Don’t make fonts required on first render
  • Frameworks that are focused on Front-End performance: React, Ember fastboot
  • Critical CSS: Extract and inline the most important CSS and defer the rest
  • Distract the user with an actual experience
  • Load scripts separately if functionality is different? HTTP2 speed benefits should reduce round-trip disadvantage
  • Render time punished by assets loading quickly, loading assets after requestAnimationFrame prevents this block.
  • The time people hate wasting the most is right now
  • Treat the network as an enhancement
  • Service workers
  • Users don’t trust offline web, yet
Tags conference, smashing, ux