Vom 7. bis 9. November durfte ich an der Konferenz beyond tellerrand für Webdesign und Development in Berlin teilnehmen.

Noch vor der eigentlichen Konferenz wurde am 7.11. mit einem vom Accessibility Club organisierten Workshop gestartet. Nach Vorträgen von Karl Groves, der für die Paciello Group arbeitet, und uns Tenon.io präsentierte, sowie von Job, der uns Screenreader demonstrierte, ging die Veranstaltung in ein Barcamp über. Es wurden viele Themen besprochen, unter anderem auch wie die Lage in Österreich ist, nachdem hier die Gesetzeslage Dienstleister dazu verpflichtet ihre Produkte barrierefrei zu präsentieren – auch online.

Am Abend fanden sich einige Teilnehmer der Konferenz in der Microsoft Digital Eatery ein, wo es spannende Vorträge zu den Themen “Seductive web design”, “Why I love type”, “The emoji family in JavaScipt” und “Create more personal computing” gab. Danach lud das Unternehmen auf Snacks ein, wobei sich die Konferenzteilnehmer und Speaker des Abends untereinander austauschen konnten.

DJ Beats, Radiohead und One Direction

Tag eins der Konferenz startete mit vielen erstaunten Ohren. Der Admiralspalast wurde bereits um 9 Uhr vormittags von DJ Tobi Lessnow beschallt. Auch die zu Beginn etwas Skeptischen im Publikum ließen sich von der Motivation und der Begeisterung anstecken.

Im ersten Talk erklärte Paul Bakaus in seinem Vortrag “Progressive Web AMPs”, dass 53% der Nutzer eine Website verlassen, wenn sie nach drei Sekunden noch nicht geladen ist. Die meiste Ladezeit nimmt dabei Werbung ein – im Schnitt sogar 50%. Der Vorteil von progressive web AMPs ist, dass beispielsweise Werbungen mit weniger Priorität geladen werden als der Inhalt und daher weniger Nutzer die Website frühzeitig verlassen. Außerdem ist die JS library open source und wird von Unternehmen wie Google, Twitter und Pinterest verwendet.

Im Anschluss sprach Ariel Cotton über “The World is your Interface”. Die emotionale Ansprache enthielt viele Anekdoten aus ihrem Leben und Erkenntnisse die sie gesammelt hat. Dazu zählt, dass nichts original ist, da alles nur eine Imitation von etwas anderem ist – und das ist auch in Ordnung so. Das Leben sieht sie als Lehrschule für User Experience. Achtsamkeit erachtet sie als besonders wichtige Eigenschaft eines Designers. Als solcher muss man seine persönlichen Träume vergessen und stattdessen die Bedürfnisse der User in den Mittelpunkt stellen. Die Aufgabe eines Designers ist es, den Menschen zu helfen.

! L ife is a study in UX.

Der dritte Talk mit dem Titel “How the tech sector could move in one direction” von Sacha Judd hat viele von den Socken gehauen, da es die erste Hälfte um die Boygroup “One Direction” ging und es letztendlich mit dem Thema Diversity endete. Die Fangemeinde der Band hat ihrer Meinung nach unglaubliches Potential. Viele der jungen Frauen haben Fanblogs (Tumblr) programmiert, doch kaum eine von ihnen sich für gut genug, um im technischen Bereich zu arbeiten. Sacha sieht das Problem im Bewerbungsprozess. Die Vergangenheit, Herkunft und das Geschlecht sollte weniger Rolle spielen, da das für die geleistete Arbeit irrelevant ist.

Mehr Verantwortung, weniger Probleme und jeden Tag eine Zeichnung

Tim Kadlec beschrieb in seinem Vortrag “Unseen” nicht nur die sichtbaren Hürden für die Nutzung des Internets, wie die Fähigkeit der Nutzer, den Antrieb, die Leistbarkeit und die Infrastruktur, sondern auch die drei großen unsichtbaren Hürden Sicherheit, Zugänglichkeit und Performance. Um sie sichtbar zu machen empfiehlt er beispielsweise aXe für Accessibility Tests zu verwenden. Es gibt keine perfekte Sicherheit, Zugänglichkeit und Performance – das Wichtigste ist, es zu versuchen und sich stets zu verbessern.

Als nächstes wurde allen, die es noch nicht wussten, klar, warum Mike Monteiro einer der heiß ersehntestes Speaker der Konferenz war. In seinem Vortrag “Let us now praise ordinary people” appellierte er an die Designer ihrer Profession mit Verantwortungsgefühl nachzugehen. Designer sind nichts besonderes, nur “ordinary people”, aber diese sind es, die die Welt verändern können. Und man hat auch das Recht, nein zu sagen. Es ist unsere Entscheidung, womit wir unsere Lebenszeit verbringen und in welche Projekte wir unsere Energie investieren.

! As a designer you have the responsibility to leave the world in a better state than you found it.

Einen hands-on Talk hörten wir im Anschluss von Heydon Pickering. Seine Tipps bezogen sich auf “Writing less damned code”. Sein erster Ratschlag war, sich bei einem Kundengespräch auf den Boden zu kauern und aus dem Raum rauszurollen, sollte dieser ein Carousel wünschen. Er plädiert dafür, den Inhalt für eine bessere Usability und Accessibility untereinander und nicht nebeneinander anzuordnen. Wie viel unnötigen Code ein Twitter-Button erzeugt, beschrieb er in seinem zweiten Statement. Auch WAI-ARIA solle nur für Elemente eingesetzt werden, wo es tatsächlich nötig ist. Von der Font-Resizing Funktion riet er ebenso ab, da diese auch mit einfachen Browsereinstellungen zu erreichen ist. Niemals sollte man außerdem Device Breakpoints erstellen, Content Breakpoints sind dem vorzuziehen. Bei Grids empfiehlt er den Mobile First Ansatz. Keinesfalls sollten Widgets links oder rechts vom Main Content platziert werden (Zitat: „It’s nice that you tell me what i can ignore“). Des Weiteren hält er alle Zurück- Buttons für überflüssig, da sie sowieso in jeden Browser integriert sind. Sein Fazit: Less is less. Less code, less problems.

Danny Gregory erzählte in seinem Talk “Everyday matters!” seine persönliche Geschichte, wie er wieder zum Zeichnen zurückfand. Ein Schicksalsschlag hat ihn dazu bewogen. Nicht um Künstler zu werden, sondern um des Zeichnens Willen. Talent sieht er als eine Kombination aus Passion, harter Arbeit und Persistenz. Zudem unterscheidet er zwischen Art (= Kunst im Museum und die Kunstindustrie) und art (= Momente des Lebens dokumentieren, im hier und jetzt sein). „Remember. You once knew how.”

Typografie, Patterns und Bildoptimierung

Mike Kus verriet in seinem Talk „Be the black sheep“ wie man als Webdesigner nach 2020 noch überleben kann. Das Wichtigste ist, zu erkennen, dass die Identität des Unternehmens einzigartig sein muss und das Fundament für das Design darstellt. Der Kunde muss wissen, was er will. So setzt sich dann das Portfolio eines guten Designers aus verschiedenen Identitäten der Kunden zusammen und bildet dadurch die des Designers selbst.

In “Typography is code” beschreibt Frank Rausch die Wichtigkeit von guter Typografie im Web. Dazu bezieht er sich auf die App Viki (von Raureif Berlin), die Wikipedia in typographisch korrekter Weise wiedergibt. Besonders wichtig ist, dass nur ca. 60 Zeichen pro Zeile angezeigt werden. Weitere wichtige Punkte für die Typografie sind: Auswahl der Typeface, Schriftgröße, Zeilenhöhe, Stil, Zeilenlänge und das Tracking. Auch auf die richtigen Anführungszeichen, ein echtes Minus, dem Umbruch nach einem Doppelpunkt und spezielle Abstände, beispielsweise vor Gewichts- oder Distanzangaben wie kg und cm ist zu achten. Besondere Features sind ein Nachtmodus / hoher Kontrastmoduls sowie die Vergrößerung der Schriftgröße beim Gehen. Die JavaScript Library smarty pants kann zum Konvertierung von sogenannter Microtypography verwendet warden. Gerade in Bezug auf Typografie betont Frank Rausch wie wichtig es ist, dass Designer auch in den Prototyping und Development Prozess involviert sein sollen.

Charlotte Jackson sprach in Ihrem Vortrag “From pages to patterns” das Problem von unlesbarem und inkonsistenten Code an. Die Lösung liegt ihrer Meinung nach in Frontend Style Guides (= Component libraries = Pattern libraries). Mithilfe von Paper Prototyping kann man firmenintern Bezeichnungen für unterschiedliche Komponenten finden. Diese Bezeichnungen sollten dann mit dem gesamten Team geteilt werden oder im Idealfall sogar für alle ersichtlich auf einer Wand aufgehängt werden und Teil der Firmensprache werden.

Harry Roberts riet in seinem Talk „Refactoring CSS without losing your mind“ dazu eine shame.css Datei anzulegen, um Hacks zu isolieren. Darin soll dokumentiert werden, warum man welchen Hack eingebaut hat. Dadurch lässt sich gut nachvollziehen, wo und warum ein Hack eingebaut wurde und ob bei den Mitarbeitern eventuell Bedarf für Erklärungen oder Hilfestellungen besteht.

„The Joy of Optimizing“ brachte uns Una Kravets näher. Da 2016 erstmals die Zahl der Smartphones und Tablets die der Desktop-Computer überschritten hat, werden Ladezeiten von Webseiten ein immer größeres Thema. Zu den bekannten Bildformaten JPG, GIF und PNG erwähnte sie auch noch WebP. Dieses Format kann sowohl lossy als auch lossless speichern und unterstützt Animationen. Unterstützt wird es von Safari und Firefox und es gibt ein Photoshop- Plugin zur Erstellung. Eingebunden wird dieses mithilfe des HTML picture elements. WebM ist das dazugehörige Videoformat. Dessen Vorteil ist die geringere Dateigröße im Vergleich zu anderen Videoformaten.

In Zukunft spannend werden die Bildformate BPG (= better portable graphics) und FLIF (= free lossless image format) für responsive Images – hier können mehrere Bilder in einer Datei gespeichert werden. Derzeit befindet sich die Technologie im Beta-Stadium. Derzeit kann man sich Abhilfe schaffen durch die Verwendung von ImageMagick®ImageAlphaImageOptimCompressor oder SVG Online Optimizier.

Una Kravets gab zudem noch weitere Profitipps:

  • Während dem Ladevorgang können beispielsweise geblurrte Bilder angezeigt werden. Ein Bild, das normal rund 400kB aufweist, ist im geblurrten Zustand nur ca. 0,5kB groß und kann somit sofort dargestellt werden, während das Originalbild noch geladen wird.
  • Schwarz-weiß Bilder, die mithilfe eines Blend Modes eine bestimmte Farbwirkung erzielen, laden ebenfalls schneller. Less colors, less problems.
  • Bei GIFs sollte man redundante Frames löschen. Oder man steigt gleich auf GIFV um – kleine Autoplay Videos in besser Qualität als GIFs.
  • Bei Bildern soll immer eine max width definiert werden, die der größten responsive Breite entspricht. Auch für Retina ist es nicht nötig eine 200%ige Auflösung zu verwenden, da das menschliche Auge diese feinen Unterschiede kaum wahrnimmt.
  • Verwende WebP statt Jpg.
  • Unter http://una.im/CSSgram/ stellt Una eine Library zur Verfügung, um Instagram Filter mithile von CSS Filtern und Blend Modes nachzuahmen.

Storytelling und Naivität

Im Vortrag “Beyond Measure” ging Erika Hall auf das Thema Storytelling und das Stellen der richtigen Fragen ein. Der Mensch ist ein imperfektes Wesen, der nicht rein rational entscheidet / entscheiden kann. Daher haben Geschichten ein so großes Potential. Und im Gegensatz zur gängigen Meinung sagen hingegen quantitative Studien oft nichts aus, weil sie nicht die richtigen Fragen stellen. Es müssen beantwortbare Fragen gestellt werden – und diese findet man oft erst durch eine qualitative Studie im Vorfeld.

Jeff Greenspan rät in seinem Talk “Be Stubborn. Be Naive.” zu eben genau dem: seid stur, seid naiv. Nicht in jeder Lebenslage mag dieser Tipp ein guter sein, doch wenn es um kreative Ideen gehen, dann sollte man immer selbst daran glauben (naiv) und sie auch durchsetzen (stubborn). Jeff Greenspan selbst hat mit dieser Methode viele Kunstprojekte umgesetzt, die Menschen wachrütteln sollen. Hätte er sie zu sehr auf ihre Umsetzbarkeit und ihre Erfolgschancen hinterfragt, so hätte er sich vermutlich dafür entschieden, sie nicht zu verwirklichen. Aber glücklicherweise war er auf diesem Gebiet naiv und stur genug, um es zu wagen.

Wer gerne mehr Details zu den einzelnen Talks möchte, kann sich die Videoaufzeichnungen auf Vimeo dazu ansehen.

Alles in allem war die Konferenz nicht nur gefüllt mit mitreißenden Vorträgen, die zum Denken anregten und einiges zum Lernen vermittelten, sondern auch ein gut organisiertes, schön präsentiertes, spannendes Erlebnis. Thumbs up, große Empfehlung!