Smashing Conf Freiburg 2016 – Notizen Tag 2

My notes from the second day at Smashing Conf 2016 in Freiburg.

A Smashing Case Study



If SVGs are complex they become pretty big. Sometimes it makes sense to use a PNG, because it may be smaller than the SVG. You've got to compare.

You don't have to choose just one embedding technique, you may, but you don't have to. Choose whatever makes sense in the certain use case.

Responsive Typography

Responsive Typography CodePen
Article: Truly Fluid Typography With vh And vw Units

CSS Underlines

CSS Underlines Suck
Nested Links

Multiline padded text

CSS box-decoration-break caniuse


a11y is not an enhancement, it's a requirement

<svg aria-labelledby="title">
    <title>Back to top</title>

Useful for dynamically added content:


ARIA Live-Regionen

Designing Systems: Theory, Practice, and the Unfortunate In-between - Paul Lloyd


Fractal – Build. Document. Integrate.
Book: 101 Things I Learned in Architecture School

You can sketch. (You might just not know it yet.) - Eva-Lotta Lamm


5 steps to change your notetaking

  1. Write in
    and not in

    short lines - 2-4 words per line
    one thought per chunk
    leave some space

  2. choose the most IMPORTANT word and make it BIG

  3. add visual hierachy (size, style (uppercase, lowercase, blockletter), contrast, color, underline & frames)
  4. add structure
    connect (lines and arrow)
    sperate chunks with dividers
    group chunks with containers
  5. Add visual hooks
    one icon per chunk
    simple images and basic shapes
    guide eye - make page scanable

Tipp: Develop consistency
Tipp: Capture first, structure later

Deconstructing Performance - Denys Mishunov


For users to notice, you have to reduce pageloadtime at least by 20%

Resource Hints

Crafting for #worlddomination - Polle de Maagt

@polledemaagt – You’ll go wherever you’re meant to go

Innovative SVG Animations - Sarah Drasner


Sarah Drasner Codepen
Workshop: Advanced SVG Animations CodePen
Sarah Drasner Favorite SVG Animations


Recommended Tools

CSS for simple interactions.
More than 3 sequences:
GSAP (Greensock)
Snap.svg - The JavaScript SVG library for the modern web

JS-stroll – Rewriting code from other languages or other technologies into Vanilla JS and SVG for fun and practice.

On Icons - Oliver Reichenstein


As few icons as possible but not less

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *