Smashing Conference Freiburg 2014 Tag 2 – Meine Notizen

Smashing Conf 2014 Tag2

Auch der zweite Tag auf der Smashing Conf 2014 in Freiburg war sehr inspirierend. Ich habe meine Notizen wieder gesammelt und online gestellt.

CSS Architecture

Dave Shea
@mezzoblue
CSS Zen Garden

Problem: Bloated Codebase
Lösung: System für CSS Architektur

Fertige Systeme:

Haben ein eigenes System für CSS Architektur gebaut names Argon. Wichtigste Prinzipien:

  • Keine IDs
  • Nur Klassen. Nicht mal HTML-Elemente werden gestyled. bspw. .header-2 {} statt h2 {}
  • .component.-modifier ._descendent
  • Ausnahme: .js Prefix für Klassen, die nur für JS da sind. Dürfen nicht gestyled werden.
  • Ausnahme: states, wie .is-hidden

Welchen Syntax man verwendet ist nicht wichtig. Wichtig ist, dass man sich daran hält.

Slides: http://www.mezzoblue.com/presentations/2014/smashing/smashing.pdf

Artikeltipps:

Be All In Without Checking Out

Phil Coffman
@philcoffman
http://philcoffman.com/

Work / Life Balance

Versuchen der/die beste zu sein und stetig zu lernen, aber die Balance mit Familie und Freizeit ist wichtig.

  • Inspiration: Be careful of overindulging in inspiration
  • Employer: Choose wisely
  • Daily routine: Establish and communicate work boundaries
  • Know when to fight and when to concede
  • Social Media & Community: A focused period of motivated production
  • Side projects: Plan for the future

Seine Definition von Erfolg: Nicht Anerkennung oder Geld, sondern Gute Work / Life Balance

Slides: http://www.slideshare.net/philcoffman/be-all-in-without-checking-out

Orchestrating Content

Sara W.-Boettcher
@sara_ann_marie
http://sarawb.com

Content auf mobile sollte nicht einfach nur im Design auf die Auflösung angepasst werden, sondern vielleicht auch neu überdacht werden. Vielleicht macht es Sinn, den Content in einzelne Brocken aufzuteilen.

Contentplanung muss schon am Anfang des Projekts passieren und die Designer und Developer sollten darin involviert sein.

Slides: http://www.slideshare.net/Saraboettcher/orchestrating-content

Typefaces for screens

Gerry Leonidas
@gerryleonidas
@typefacedesign
http://leonidas.org/

Schrift für mobile ist gut wenn...

...gleichmäßiger Abstand zwischen den Buchstaben vorhanden ist
...die Punzen offen sind
...Stroke Joints klar sind (siehe Slide 51)

Beispielsweise:

Slides: https://speakerdeck.com/gerryleonidas/typefaces-for-screens

The Future of the Web?

Peter Smart
@petewsmart

Slides: https://speakerdeck.com/petewsmart/the-future-of-the-web-and-how-to-prepare-for-it-today

Technology must be like oxygen: ubiquitous, necessary and invisible.

– Chris Lehmann

Long Life Pages

Matt Andrews
@andrewsmatt
https://github.com/ftlabs

Statt nativer App, haben sie eine Webapp gemacht, die Offline verfügbar ist. Bringt viele Schwierigkeiten mit sich, konnte aber mit AppCache gelöst werden. Sehr empfehlenswert ist es nicht, zu versuchen eine native App als Webapp nachzubauen. (Offline Storage, History, ...)

Service Worker wird AppCache in Zukunft ablösen.

Big, Not Bad

Josh Payton
@jpay
http://hugeinc.com

Case Studies zum http://www.ted.com/ Redesign und zum bevorstehenden eurosport.com Redesign.

http://www.hugeinc.com/case-study/eurosport
http://www.hugeinc.com/case-study/ted

The only constant is change

– Josh Payton

Adaptive Input

Jason Grigsby
@grigs

Who are we to judge which input is better?

– Jason Grigsby

Touch ist nicht zwangsweise Mobile und Maus/Tastatur nicht zwangsweise Desktop. Man darf nicht davon ausgehen, dass Benutzer die eine bestimmte Eingabemethode verwenden.

After poking at this problem for a few weeks, my conclusion is: every desktop UI should be designed for touch now. When any desktop machine could have a touch interface, we have to proceed as if they all do.

– Josh Clark

Artikeltipp: http://smus.com/touch-laptop-experiments/

Slides: https://speakerdeck.com/grigs/adaptive-input-smashing-conference-freiburg

Sonstiges

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

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