Vom 7. bis 9. November durfte ich an der Konferenz\u00a0beyond tellerrand<\/a>\u00a0f\u00fcr Webdesign und Development in Berlin teilnehmen.<\/p>\n Noch vor der eigentlichen Konferenz wurde am 7.11. mit einem vom Accessibility Club organisierten Workshop gestartet. Nach Vortr\u00e4gen von\u00a0Karl Groves<\/a>, der f\u00fcr die\u00a0Paciello Group<\/a>\u00a0arbeitet, und uns\u00a0Tenon.io<\/a>\u00a0pr\u00e4sentierte, sowie von\u00a0Job<\/a>, der uns Screenreader demonstrierte, ging die Veranstaltung in ein Barcamp \u00fcber. Es wurden viele Themen besprochen, unter anderem auch wie die Lage in \u00d6sterreich ist, nachdem hier die Gesetzeslage Dienstleister dazu verpflichtet ihre Produkte barrierefrei zu pr\u00e4sentieren \u2013 auch online.<\/p>\n Am Abend fanden sich einige Teilnehmer der Konferenz in der Microsoft Digital Eatery ein, wo es spannende Vortr\u00e4ge zu den Themen \u201cSeductive web design\u201d, \u201cWhy I love type\u201d, \u201cThe emoji family in JavaScipt\u201d und \u201cCreate more personal computing\u201d gab. Danach lud das Unternehmen auf Snacks ein, wobei sich die Konferenzteilnehmer und Speaker des Abends untereinander austauschen konnten.<\/p>\n Tag eins der Konferenz startete mit vielen erstaunten Ohren. Der Admiralspalast wurde bereits um 9 Uhr vormittags von\u00a0DJ Tobi Lessnow<\/a>\u00a0beschallt. Auch die zu Beginn etwas Skeptischen im Publikum lie\u00dfen sich von der Motivation und der Begeisterung anstecken.<\/p>\n Im ersten Talk erkl\u00e4rte\u00a0Paul Bakaus<\/a>\u00a0in seinem Vortrag \u201cProgressive Web AMPs\u201d, dass 53% der Nutzer eine Website verlassen, wenn sie nach drei Sekunden noch nicht geladen ist. Die meiste Ladezeit nimmt dabei Werbung ein \u2013 im Schnitt sogar 50%. Der Vorteil von progressive web AMPs ist, dass beispielsweise Werbungen mit weniger Priorit\u00e4t geladen werden als der Inhalt und daher weniger Nutzer die Website fr\u00fchzeitig verlassen. Au\u00dferdem ist die JS library open source und wird von Unternehmen wie Google, Twitter und Pinterest verwendet.<\/p>\n Im Anschluss sprach\u00a0Ariel Cotton<\/a>\u00a0\u00fcber \u201cThe World is your Interface\u201d. Die emotionale Ansprache enthielt viele Anekdoten aus ihrem Leben und Erkenntnisse die sie gesammelt hat. Dazu z\u00e4hlt, dass nichts original ist, da alles nur eine Imitation von etwas anderem ist \u2013 und das ist auch in Ordnung so. Das Leben sieht sie als Lehrschule f\u00fcr User Experience. Achtsamkeit erachtet sie als besonders wichtige Eigenschaft eines Designers. Als solcher muss man seine pers\u00f6nlichen Tr\u00e4ume vergessen und stattdessen die Bed\u00fcrfnisse der User in den Mittelpunkt stellen. Die Aufgabe eines Designers ist es, den Menschen zu helfen.<\/p>\n ! L ife is a study in UX.<\/p>\n Der dritte Talk mit dem Titel \u201cHow the tech sector could move in one direction\u201d von\u00a0Sacha Judd<\/a>\u00a0hat viele von den Socken gehauen, da es die erste H\u00e4lfte um die Boygroup \u201cOne Direction\u201d 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\u00fcr 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\u00fcr die geleistete Arbeit irrelevant ist.<\/p>\n Tim Kadlec<\/a>\u00a0beschrieb in seinem Vortrag \u201cUnseen\u201d nicht nur die sichtbaren H\u00fcrden f\u00fcr die Nutzung des Internets, wie die F\u00e4higkeit der Nutzer, den Antrieb, die Leistbarkeit und die Infrastruktur, sondern auch die drei gro\u00dfen unsichtbaren H\u00fcrden Sicherheit, Zug\u00e4nglichkeit und Performance. Um sie sichtbar zu machen empfiehlt er beispielsweise aXe f\u00fcr Accessibility Tests zu verwenden. Es gibt keine perfekte Sicherheit, Zug\u00e4nglichkeit und Performance \u2013 das Wichtigste ist, es zu versuchen und sich stets zu verbessern.<\/p>\n Als n\u00e4chstes wurde allen, die es noch nicht wussten, klar, warum\u00a0Mike Monteiro<\/a>\u00a0einer der hei\u00df ersehntestes Speaker der Konferenz war. In seinem Vortrag \u201cLet us now praise ordinary people\u201d appellierte er an die Designer ihrer Profession mit Verantwortungsgef\u00fchl nachzugehen. Designer sind nichts besonderes, nur \u201cordinary people\u201d, aber diese sind es, die die Welt ver\u00e4ndern k\u00f6nnen. 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.<\/p>\n ! As a designer you have the responsibility to leave the world in a better state than you found it.<\/p>\n Einen hands-on Talk h\u00f6rten wir im Anschluss von\u00a0Heydon Pickering<\/a>. Seine Tipps bezogen sich auf \u201cWriting less damned code\u201d. Sein erster Ratschlag war, sich bei einem Kundengespr\u00e4ch auf den Boden zu kauern und aus dem Raum rauszurollen, sollte dieser ein Carousel w\u00fcnschen. Er pl\u00e4diert daf\u00fcr, den Inhalt f\u00fcr eine bessere Usability und Accessibility untereinander und nicht nebeneinander anzuordnen. Wie viel unn\u00f6tigen Code ein Twitter-Button erzeugt, beschrieb er in seinem zweiten Statement. Auch WAI-ARIA solle nur f\u00fcr Elemente eingesetzt werden, wo es tats\u00e4chlich n\u00f6tig ist. Von der Font-Resizing Funktion riet er ebenso ab, da diese auch mit einfachen Browsereinstellungen zu erreichen ist. Niemals sollte man au\u00dferdem 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: \u201eIt\u2019s nice that you tell me what i can ignore\u201c). Des Weiteren h\u00e4lt er alle Zur\u00fcck- Buttons f\u00fcr \u00fcberfl\u00fcssig, da sie sowieso in jeden Browser integriert sind. Sein Fazit: Less is less. Less code, less problems.<\/p>\n Danny Gregory<\/a>\u00a0erz\u00e4hlte in seinem Talk \u201cEveryday matters!\u201d seine pers\u00f6nliche Geschichte, wie er wieder zum Zeichnen zur\u00fcckfand. Ein Schicksalsschlag hat ihn dazu bewogen. Nicht um K\u00fcnstler 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). \u201eRemember. You once knew how.\u201d<\/p>\n Mike Kus<\/a>\u00a0verriet in seinem Talk \u201eBe the black sheep\u201c wie man als Webdesigner nach 2020 noch \u00fcberleben kann. Das Wichtigste ist, zu erkennen, dass die Identit\u00e4t des Unternehmens einzigartig sein muss und das Fundament f\u00fcr das Design darstellt. Der Kunde muss wissen, was er will. So setzt sich dann das Portfolio eines guten Designers aus verschiedenen Identit\u00e4ten der Kunden zusammen und bildet dadurch die des Designers selbst.<\/p>\n In \u201cTypography is code\u201d beschreibt\u00a0Frank Rausch<\/a>\u00a0die Wichtigkeit von guter Typografie im Web. Dazu bezieht er sich auf die\u00a0App Viki<\/a>\u00a0(von\u00a0Raureif Berlin<\/a>), die Wikipedia in typographisch korrekter Weise wiedergibt. Besonders wichtig ist, dass nur ca. 60 Zeichen pro Zeile angezeigt werden. Weitere wichtige Punkte f\u00fcr die Typografie sind: Auswahl der Typeface, Schriftgr\u00f6\u00dfe, Zeilenh\u00f6he, Stil, Zeilenl\u00e4nge und das Tracking. Auch auf die richtigen Anf\u00fchrungszeichen, ein echtes Minus, dem Umbruch nach einem Doppelpunkt und spezielle Abst\u00e4nde, beispielsweise vor Gewichts- oder Distanzangaben wie kg und cm ist zu achten. Besondere Features sind ein Nachtmodus \/ hoher Kontrastmoduls sowie die Vergr\u00f6\u00dferung der Schriftgr\u00f6\u00dfe 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.<\/p>\n Charlotte Jackson<\/a>\u00a0sprach in Ihrem Vortrag \u201cFrom pages to patterns\u201d das Problem von unlesbarem und inkonsistenten Code an. Die L\u00f6sung liegt ihrer Meinung nach in Frontend Style Guides (= Component libraries = Pattern libraries). Mithilfe von Paper Prototyping kann man firmenintern Bezeichnungen f\u00fcr unterschiedliche Komponenten finden. Diese Bezeichnungen sollten dann mit dem gesamten Team geteilt werden oder im Idealfall sogar f\u00fcr alle ersichtlich auf einer Wand aufgeh\u00e4ngt werden und Teil der Firmensprache werden.<\/p>\n Harry Roberts<\/a>\u00a0riet in seinem Talk \u201eRefactoring CSS without losing your mind\u201c dazu eine shame.css Datei anzulegen, um Hacks zu isolieren. Darin soll dokumentiert werden, warum man welchen Hack eingebaut hat. Dadurch l\u00e4sst sich gut nachvollziehen, wo und warum ein Hack eingebaut wurde und ob bei den Mitarbeitern eventuell Bedarf f\u00fcr Erkl\u00e4rungen oder Hilfestellungen besteht.<\/p>\n \u201eThe Joy of Optimizing\u201c brachte uns\u00a0Una Kravets<\/a>\u00a0n\u00e4her. Da 2016 erstmals die Zahl der Smartphones und Tablets die der Desktop-Computer \u00fcberschritten hat, werden Ladezeiten von Webseiten ein immer gr\u00f6\u00dferes Thema. Zu den bekannten Bildformaten JPG, GIF und PNG erw\u00e4hnte sie auch noch WebP. Dieses Format kann sowohl lossy als auch lossless speichern und unterst\u00fctzt Animationen. Unterst\u00fctzt 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\u00f6rige Videoformat. Dessen Vorteil ist die geringere Dateigr\u00f6\u00dfe im Vergleich zu anderen Videoformaten.<\/p>\n In Zukunft spannend werden die Bildformate BPG (= better portable graphics) und FLIF (= free lossless image format) f\u00fcr responsive Images \u2013 hier k\u00f6nnen 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\u00a0ImageMagick\u00ae<\/a>,\u00a0ImageAlpha<\/a>,\u00a0ImageOptim<\/a>,\u00a0Compressor<\/a>\u00a0oder\u00a0SVG Online Optimizier<\/a>.<\/p>\n Una Kravets<\/a>\u00a0gab zudem noch weitere Profitipps:<\/p>\n Im Vortrag \u201cBeyond Measure\u201d ging\u00a0Erika Hall<\/a>\u00a0auf 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\u00dfes Potential. Und im Gegensatz zur g\u00e4ngigen Meinung sagen hingegen quantitative Studien oft nichts aus, weil sie nicht die richtigen Fragen stellen. Es m\u00fcssen beantwortbare Fragen gestellt werden – und diese findet man oft erst durch eine qualitative Studie im Vorfeld.<\/p>\nDJ Beats, Radiohead und One Direction<\/h2>\n
Mehr Verantwortung, weniger Probleme und jeden Tag eine Zeichnung<\/h2>\n
Typografie, Patterns und Bildoptimierung<\/h2>\n
\n
Storytelling und Naivit\u00e4t<\/h2>\n