My Smashing Conference Highlights

The Smashing Conference in Oxford was an absolutely great event. Perfectly organized at a beautiful location, top speakers, inspiring and intense. Thanks!

But… It’s impossible to summarize every of the 16 talks, so I narrowed down this post to a collection of my personal highlights based on the overall coverage on Lanyrd and added few „further reading“ recommendations from my Pocket list. Have fun watching the nice sketchnotes from Elisabeth Irgens, click through the slides and follow the links…

First just watch this video by Seb Lee-Delisle. It shows in a great way what the conference was mainly about: Creating beautiful experiences based on creative coding.

More fun: Audience-controlled laser flappy birds

Now off to the talks…

Engineering color on the web (Lea Verou)

Sketchnote by Elisabeth Irgens

Watch the slides! You’ll learn a lot:

  • Great overview of the different color models and how to use them in CSS
  • You might gain intereset in reading the CSS color level 4 specification as there’ll be lots of enhancements planned for working with colors more easy than today
  • Tips how to create your own color helper functions in JS or SASS


Further reading

Real life responsive design (David Rupert)

Sketchnote by Elisabeth Irgens

Unfortunately no slides until now. Beside the valid point that we as web developers and designers should have embraced the fluidity of the web in the past far more often than we really did, basically Dave confirmed what I experience in my current projects: Waterfall projects, seperate teams and designers and developers who don’t talk to each other don’t work anymore. In my experience, Scrum still might not be the holy grail to this, but it’s the best environment I know to solve these problems.


Putting our images on a diet (Guy Podjarny)

Sketchnote by Elisabeth Irgens

My squeezed notes

  • Apart from the usual images formats there’s a huge need for new images compression solutions like WebP, JPEG XR 4 and JPEG 2000
  • Detect browser support and conditionally load, possibly accept encoding header. Use a different format per URL or same URL for different responses but be aware of caching.
  • Where possible prefer JPEG to PNG, if you don’t need transparency


Icon Design Process (Jon Hicks)

Sketchnote by Elisabeth Irgens

Can’t remember all the details… „Mystery speaker“ Jon Hicks took us on an entertaining ride about the challenges to create meaningful and scalable icons. Have a look at the slides!


Further reading

Levelling up with flexbox (Zoe Mickley Gillenwater)

Sketchnote by Elisabeth Irgens

An absolute must-watch:

  • The best overview of the Flexbox layout model I’ve seen so far
  • Zoe focused on how we can use flexbox today by going through a lot of real world situations
  • It is easy to provide fallbacks for old browsers, so hopefully you’ll get motivated to use flexbox in your next projects, too


Other interesting talks

1 Kommentar

  1. Pingback: Revision 165 – Über den Webkongress Erlangen und den Zustand mancher Website | Working Draft

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see