Smashing Conf Freiburg 2016 – Notizen Tag 2

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

A Smashing Case Study

@SaraSoueidan

SVG vs. PNG

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
currentColor
Nested Links

Multiline padded text

box-decoration-break
CSS box-decoration-break caniuse

a11y

a11y is not an enhancement, it's a requirement

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

Useful for dynamically added content:

aria-live=""

ARIA Live-Regionen

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

@paulrobertlloyd

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

@evalottchen

https://www.instagram.com/evalottchen/

5 steps to change your notetaking

  1. Write in
    CHUNKS
    and not in
    LINES

    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

@mishunov

http://anrgren.net

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

Resource Hints

Crafting for #worlddomination - Polle de Maagt

@polledemaagt

srprs.me – You’ll go wherever you’re meant to go

Innovative SVG Animations - Sarah Drasner

@sarah_edo

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

Optimization

https://jakearchibald.github.io/svgomg/
https://github.com/svg/svgo
https://github.com/svg/svgo-gui
https://petercollingridge.appspot.com/svg-editor

Recommended Tools

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

http://mojs.io/

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

On Icons - Oliver Reichenstein

@iA

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 *