Namics @ #SmashingConf – Day 2

Tag 2 der Smashing Conference in Freiburg.

Sara Soueidan – A Smashing Case Study

Nach der Begrüßung zum zweiten Tag der Smashing Conference wird das Rätsel gelüftet wer der Mystery Speaker ist: Sara Soueidan – eine Award-Prämierte Frontend Freelancerin aus dem Libanon.
In Ihrem Vortrag berichtet Sie von den Herausforderungen und kreativen Lösungen die sie bei der Umsetzung des neuen Smashing Magazin Webauftritts gefunden hat.
Der gesamte Vortrag ist in 5 Abschnitte unterteilt.

Iconography

Es ist mittlerweile sinnvoll bei Icons und grafischen Bildern auf SVG zurückzugreifen, da die Datenmenge meist kleiner ist als bei herkömmlichen Bildern. Es gibt dabei verschiedene Einbindungsmöglichkeiten u.a. klassisch als Bild oder Inline im Dokument oder im CSS. Welche Art der Einbindung gewählt werden sollte, kommt immer auf den individuellen Fall an. Wird das Icon nur als Dekoration verwendent, kann es Sinn machen, das SVG im CSS zu platzieren, da so ein zusätzlicher Request gespart wird. Wird eine Animation benötigt, sollte das Bild inline platziert werden. Hat das Icon eine Funktion, sollte dabei auf Accessibility geachtet werden. Des weiteren sollte eine Fallback-Variante ausgewählt werden, für Browser die kein SVG unterstützen. Nicht zu letzt sollte man auf die Performance achten, es kann teilweise auch sinnvoll sein kein SVG zu nutzen, wenn das entsprechende Pixelbild deutlich kleiner sein sollte. Sehr interessant bei SVG ist die Möglichkeit in einem Bild andere Bilder und Text einzubetten und die einzelelemente per CSS stylen zu können.

Typography

Die Herausforderung bei Typografie ist oft eine gewünschte Abhängigkeit zwischen Geräte-Größe und Schriftgröße. Hier können bei neueren Browsern gut das Vieport unit „vw“ verwendet werden. Jedoch gibt es  in der CSS-Definition leider keine minimale oder maximale Schriftgröße. Um diesem Problem zu begegnen haben ein paar Mathematiker unter den Programmierern eine Formel entwickelt:
font-size: calc( minSize + (maxSize – minSize)*(100vw – minScreen) / (maxScreen – minScreen);
Zusätzlich zu den Schriftgrößen behandelt sie Text-Unterstreichung mit Auslassung der Unterlängen, Verschachtelung von Links („<object>“ hack), Padding bei Text der über mehrere Zeilen läuft („box-­decoration­break“) und die Möglichkeit per CSS counter individuelle nummerierte Listen zu erstellen.

Layout

Bei Layout ist es wichtig, dass trotz individuellen Anordnungen von verschiedenen Text-Bereichen, diese im Markup weiterhin in einer sinnvollen Reihenfolge bestehen bleiben, diese Anforderung führt auch hier zu kreativen ansätzen wie unterschiedliche Container zu einander platziert werden müssen, um das gewünschte Design zu erreichen.
Bei responsive Layout ist es möglich, dass in einem größeren Breakpoint ein Abschnitt, welches zwischen dem Fließtext verortet ist, aus diesem herausgezogen und in einer Seitenleiste dargestellt wird. Diese Herausforderung begegnete Sara Soeidan mit eine combination aus floating, negativen margin und individull auf das Desing angepasster realtiven Breite.
Die Anordnung/Sortierung von Elementen, kann einfach mittels Flexbox „order“ beeinflusst werden, so kann ein semantische Aufbau gewahrt werden, die Darstellung je nach Breakpoint aber unterscheidlich sein.

Interactions & Animations

Für die Animation von Menüs und Accordions per CSS wird eine Technik vorgestellt, die wir bei Namics schon öfter angewendet haben. Das Problem ist, dass per CSS nur zwischen Zahlen animiert werden kann, da man oft jedoch nicht die Höhe eines Elements gekennt, kann man dieses nicht ohne Weiteres ein-„sliden“. Die Lösung hier ist die Animation des CSS-Attribut max-height unter Verwendung von einem angepassten Animations-Timing zur Behebung Problemen beim „schließen“.

A11Y: Small Steps, Big Difference

Sara Soueidan weist eindringlich darauf hin dass Accessibility ein sehr wichtiges Thema ist und jeder Entwickler dieses Thema beachten sollte.

  • Icons mit Funktionen sollten immer auch eine textliche Repräsentation haben
  • Grafiken mit Text, sollten diesen Text ebenfalls auslesbar darstellen
  • Elemente die den Inhalt beeinflussen, wie z.B. Filter, sollten immer auf das geänderte Element hinweisen („aria-controls“)
  • Es sollten Short-Links zu wichtigen Inhalten berreitstehen (Skip-Links)

Allgemein sollte Accessibility nicht als Nacharbeit, sondern von Anfang der Entwicklung betrachten werden, Tests sollten auf Komponenten Ebene erfolgen, nicht erst gesamte Seiten. HTML sollte auch ohne CSS noch sinn ergeben, HTML-Elemente sollten semantisch verwendet werden und ungewöhnliche Umsetzungen, Tricks o.ä. sollten stehts Dokumentiert werden.

Zusammendfassend war Sara Soueidans Vortrag wohl der interessanteste, längste und inhaltsdichteste der gesamten Konferenz und man versteht leicht, warum sie Award-prämiert ist.

Paul Lloyd – Designing Systems: Theory, Practice And The Unfortunate In-Between

Paul Lloyd zeigt in seinem Vortrag die verschiedenen Arten von Design-Systemen, wie diese Betreut werden und welche Fehler oft gemacht werden.
Möchte eine Firma ein Design-System verwenden, muss dies klar und definitiv gemacht werden, es müssen dedizierte Ansprechpartner existieren, die auch Zeit für die Betreuung eingeräumt bekommen. Welche Art und Intensität an Design-System und für welchen Zweck dies verwendet wird muss individuell mit allen Beteiligten definiert und dann auch eingehalten werden.

Eva-Lotta Lamm – You Can Sketch. (You Might Just Not Know It Yet.)

Bei Evalottchen (Twittername von Eva-Lotta Lamm) heist es: Laptops zu, Handys weg und stattdessen Blatt und Stift raus.
Die Präsenstation hat einen große Unterschied zu allen anderen – es gibt keine Folien. Alle Inhalte werden Live auf einem Blatt Papier gezeichnet – es geht nunmal um Sketching – und alles sind eingeladen mitzumachen.
Es werden die wichtigsten Methoden dieser kreativen Art mitzuschreiben und zu visualisieren vorgestellt und dabei gleich von allen angewendet.

smashingconf16_sketch

Deconstructing Performance by Denys Mishunov

Im Vortrag von Denys Mishunov werden wir über das Theme Performance-Optimierung aufgeklärt. Grundsätzlich wird klargestellt, dass Nutzer es hassen zu warten, so steigt der gemessene Stresslevel von Probanden bei einer langsamen Internetverbindung um ca. 50%. Bei technischer Performance Optimierungen ist zu beachten, dass eine Geschwindigkeitsverbesserungen erst ab ca. 20% für den Nutzer spürbar ist, somit sollte vor einer aufwändigen Optimierung abgeschätzt werden, ob der Nutzer die erreichbare Verbesserung überhaupt spüren wird. Wer bei diesem Vortrag einen stark technischen Vortrag erwartet liegt falsch. Es wird nicht berichtet mit welchen Anpassungen im Frontendcode ich einen Webauftritt performanter machen kann, es geht vielmehr darum, dass Performance relativ ist. Als Entwickler sollte man sich von seinem Auftraggeber keine festen Zeiten diktieren lassen, in denen eine Seite geladen sein muss. Wichtig ist das subjektive Geschwindigkeitsempfinden des Nutzers. So kann es sein, dass ein seite mit 25 Sekunden gemessender Ladezeit für den Nutzer schneller wirkt als eine andere mit 6 Sekunden. Es gibt zwei verschiedene Wartezeiten, zwischen denen unterschieden werden muss:

  • Passive Wartezeit – ein Benutzer wartet auf ein Ergebnis, ohne während dessen etwas anderes zu machen.
  • Aktive Wartzeit – ein Benutzer ist wärend des Warten beschäftigt.

Guten Beispiele für eine aktive Wartezeit im Internet ist z.B. ein Youtube-Video. Nach dem Laden der Seite sieht der Nutzer den Videoplayer mit einer Ladeanimation (Passives Warten), sobald jedoch ein gewisser Teil des Videos geladen wurde, beginnt der Player das Video abzuspielen, während er weiter läd (aktives Warten). Als andere Beispiel kann der Upload-Prozess bei einem Slide-Share Anbieter genannt werden: Während der Nutzer hier auf das Fertigstellen des Uploads wartet, können schon Metadaten zur Präsentation eingegeben werden. Sind diese eingegeben sind auch meinst die Folien fertig hochgeladen.

Es sollte vielmehr also darauf geachtet werden, dass möglichst wenige passive Wartezeiten existieren. So wird ein Nutzer einer Nachrichten Seite bereits beginnen Teaser oder einen Artikeln zu lesen, während der Rest der Seite noch geladen wird.

Um eine möglichst frühe Nutzbarkeit einer Website zu erwirklen bietet es sich an das „critical-path“ CSS bereits Inline im HTML zu rendern, somit kann eine erste, nutzbare Variante bereits nach laden des HTML dargestellt werden. Dieser Anatz bringt je nach Komplexität des Systems auch Schwierigkeiten mit.

Optimistic UI ist ein interessanter Ansatz, um den Nutzer eine schnellere Raktion eines Systems zu vermitteln. So wird bspw. beim Absenden eines Formulars nicht erst nach Server beschätigung eine Erfolgsmeldung ausgegeben, sondern sobald der Nuzter das Formular abgesendet hat. Dieser Ansatz geht davon aus, dass es beim einem solchen Absenden eines Formulars nur selten zu einem serverseitigen Fehler kommt. Ist dies einmal der Fall, wird einfach nachgelagert eine Fehlermeldung ausgegeben. Mit dieser Vorgehensweise wird das System für den Nutzer deutlich schneller, ohne eine wirkliche Performanceanpassung.

Polle De Maagt – Crafting For #WorldDomination

Ziel von Polle De Maagt ist dass Firmen mehr menschlich und weniger werbend werden.
Firmen sollten also mehr machen als nur Werbung für ein bestehendes Produkt zu machen. So konnte er beispielsweise mit einer Fluggesellschaft den Kundenservice durch die Nutzung der Facebook-Messengers mit Service-Mitarbeitern und guter Bot-Struktur deutlich verbessern. Allgemein sollten Firmen mehr „in den Schuhen der Kunden“ laufen und so die Bedürfnisse kennenlernen, so ist die Methode „Mobile Day“ – ein Tag an dem alle Mitarbeiter die eigenen System nur in Smartphone-Größe bedienen durften – bei einem Reiseanbieter sehr erfolgreich gewesen.

Wichtig ist auch wie eine Firma spricht. So sollte ein Flug-Passagier nicht „PAX“ genannt werden – wie es im Flugsegment oft der Fall ist. Durch eine solche Art der Benennung wird der Kunde zur Sache und bleibt nicht ein Mensch.

Eine sehr sympatische „Menschlichkeit“ kann in Autorespondern verwendet werden. So verwendet Polle De Maagt nicht einen generischen Autoresponder-Text sondern lustige Geschichten oder ähnliches. Dies bewirkt, dass sich die schreibende Person nicht über die Abwesenheit ärgert, sondern viel mehr teilweise Personen sogar regelmäßig „überprüfen“, ob er nicht wieder abwesend ist und eine schöne neue Geschichte zu lesen ist.

Sarah Drasner – Innovative SVG Animations

SVGs werden auf jedem Gerät scharf dargestelltung, haben eine kleine Dateigröße, sind einfach zu animieren, haben einfache Möglichkeiten für Accessibility und haben eine weit Unterstützung und eignen sich damit perfekt für keine UX-Animationen. Diese Aussage vermittelt Sarah Drasner in ihrem Vortrag anschaulich. Aus ihrer Erfahrung macht es Sinn zunächst mit einem einfachen Storyboard zu beginnen. Für komplexe Animationen bietet sich dann die Javascript Bibliothek „GASP“ von GreenSock an. Ja nach Animationsarte bietet sich beispielsweise auch React-Motion, Snao.svg, die Web Animation API, D3.js und viele mehr an.

Bei Animationen mit Nutzer-Interaktion hilft die JS-Funktion „RequestAnimationFrame“, da mit dieser Funktion die Browser über einen passenen Zeitpunkt der Abarbeitung entscheidet.

Sehr intersant ist auch der Ansatz verschiedenen Versionen einer SVG-Animation je nach Geräte-Größe zu verwenden. Dies kann sowohl als unterschiedliche SVG-Dateine, als auch durch ein- und ausblenden bestimmter Elements im SVG erreicht werden. SVGs können auch responsive verwendet werden, indem man die wie Bausteine aufbaut, die dann einfach zu positionieren sind.

Oliver Reichenstein – On Icons

Oliver Reichenstein hat mit seiner Firma viele Tests gemacht ob man Icons, Text, oder beides zusammen verwenden sollte. Letztendliche Aussage ist dass es ganz individuell auf den Fall ankommt.
Icon helfen Platz zu sparen, sind dekorativ und wirken oft freundlicher als Text. Verwendet man jedoch nur Icons, müssen diese absolut klar verständlich sein, ansonsten sind sie nicht hilfreich. Text ist vorallem sinnvoll an Stellen an denen Icons nur verwirren würden. „Es sollten immer so wenig wie mögliche Design verwendet werden… aber nicht weniger.“

Hinterlasse eine Antwort

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

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>