Ein Blick beyond tellerrand

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®, ImageAlpha, ImageOptim, Compressor 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!

Zensations setzt Barrierefreie Website für Disability-Performance um

Die Potenziale von Menschen mit Behinderungen als KundInnen und MitarbeiterInnen zu erkennen und Unternehmen auf dem Weg hin zu erfolgreichem Disability-Management zu begleiten. Dafür steht das österreichische Beratungsunternehmen DisAbility Performance. Um das breite Leistungsangebot für Unternehmen, sowie Events und Services der Unternehmensberatung zu präsentieren setzt man auf das Know-How der Digitalagentur Zensations, die aufgrund jahrelanger Erfahrung im Bereich Web-Accessibility als Partner für die Umsetzung sowie für laufendes Consulting gewählt wurde.

Die Besucher werden direkt auf der Landingpage durch Interaktion sensibilisiert, Bildausschnitte im Header zeigen Personen, denen man die körperliche Einschränkung nicht auf den ersten Blick ansieht. Zensations Geschäftsführerin Sabrina Hanneman erklärt: „Teil der Content-Strategie war es, die Menschen in den Fokus zu stellen und dabei zum Nachdenken zu stimulieren anstatt belehrend zu wirken. Accessibility ist kein Add-on und Nischen-Thema, es geht um positive Usability und User Experience, das betrifft jeden. Es lag uns am Herzen die Diversität und das damit einhergehende große Potenzial zu veranschaulichen.“ Wolfgang Kowatsch, Partner & Co-Gründer von DisAbility Performance zeigt sich begeistert: „Zensations hat uns bei der Umsetzung unserer neuen Website hervorragend unterstützt. Uns hat beeindruckt, wie ganzheitlich sich Zensations eingebracht hat und welch hohen Stellenwert die für uns so bedeutenden Bereiche Barrierefreiheit und Userfreundlichkeit gespielt haben. Wir freuen uns auf weitere spannende, gemeinsame Projekte.“

Umgesetzt wurde die Website nach WCAG 2.0 Level AA-Richtlinien und auch bei der Auswahl des Backend legte man natürlich Wert auf volle Barrierefreiheit, weshalb die Wahl schon früh auf das CMS Drupal 8 fiel. Neben einer standardkonformen Umsetzung stand auch die intuitive Bedienung der Website und übersichtliche Darstellung der Inhalte im Vordergrund. Dementsprechend steht eine Accessibility Toolbar mit verschiedenen Einstellungsmöglichkeiten zur Verfügung. Schriftvergrößerung oder Informationen zur Steuerung mittels Keyboard finden sich heutzutage auf vielen Websites, allerdings gibt es auch für eine große Zahl an Nutzern den Bedarf von Kontrasteinstellungen, welche die meisten Augenerkrankungen abdecken. Interessant ist dies vor allem für jene Menschen, die nicht die Möglichkeit haben ihre eigenen, voreingestellten Devices, zu verwenden.

Was gute Beratung ausmacht

Wenn man uns fragt, womit wir die meiste Zeit verbringen, dann kann man gut und gerne behaupten, dass Beratungsleistungen und Projektkonzeption an den obersten Plätzen stehen. Es ist quasi unser Kerngeschäft, denn wer mit uns arbeitet, weiß, dass wir keine unreflektierten Umsetzer sind, sondern unsere Verantwortung in der Beratung ernst nehmen und auch nicht mit Feedback und konstruktiver Kritik hinter dem Berg halten. Das kommt manchmal wahnsinnig gut an, manchmal fühlen sich Unternehmen dadurch im ersten Moment aber auch ein wenig auf den Schlips getreten.

Reflektiert schon während der Auftragsvergabe

Viele Aufträge werden ja nicht mal eben nebenher, sondern über langwierige Auswahlverfahren vergeben. Nicht selten erfordert dies auch detaillierte Vorarbeit auf Kundenseite oder anderer Projektpartnern. Mit mehr oder weniger klaren Business-Zielen, Anforderungen, Wünschen und Deadlines. Je genauer das Briefing, desto einfacher wird es schließlich auch für Externe, sich in das Unternehmen, die Zielgruppen und das Projekt im Allgemeinen hinein zu versetzen bzw. die Anforderungen im Detail überhaupt erst zu verstehen. Ein ausgiebiges Verständnis gegenüber der Problemstellung bildet ja überhaupt erst den Grundpfeiler für eine erfolgreiche Zusammenarbeit.

Was aber, wenn man schon im Briefing Schwachstellen erkennt, ein bereits gescheitertes Projekt neu übernehmen soll, die Deadline für absolut unrealistisch hält oder aus Erfahrung weiß, dass die Projektziele im vorgegebenen Budgetrahmen nicht erreicht werden können? Spätestens dann stellt man sich die Frage: Muss man den Wünschen der Auftraggeber in jedem Fall nachgekommen oder begibt man sich in die Rolle des Advocatus diaboli, zerpflückt das Vorgegebene in seine Einzelteile, um es im Anschluss bestmöglich neu zusammenzufügen? Auf Kundenseite benötigt letzterer Weg viel kritisches Hinterfragen und eine große Portion Selbstreflexion, um diesen Weg dann mitzugehen. Man muss kein Psychologe sein, um zu wissen, dass es die meisten Menschen bedingt bis gar nicht mögen, wenn die eigenen Ideen zu sehr in Frage gestellt werden.

Probleme lösen sich nie in Luft auf

Auch wir haben die Erfahrung gemacht, dass so manches Mal genaues Hinterfragen die wahren Probleme überhaupt erstzu Tage fördert. Was vermeintlich simple wirkt, entpuppt sich dann als wahrer Dealbreaker. Das ist im ersten Moment natürlich ungemütlich. Für Auftraggeber, das Budget, die Deadline und auch für die Berater, die darauf hinwiesen. Es wird aber auch nicht besser, wenn man stets an der Oberfläche kratzt und Probleme vor sich herschiebt. Verschwinden werden sie nämlich in den seltensten Fällen. Realistischer ist es, dass sie zu einem späteren – und noch unpassenderen Zeitpunkt – wesentlich stärker als angenommen auftreten. Natürlich, auch gut gemeinte und konstruktive Kritik überrascht, rüttelt vielleicht ein wenig am professionellen Ego und darf nicht dazu missbraucht werden, nicht erforderliche Leistungen und Lösungen zu verkaufen, nur weil man sich davon ein größeres Geschäft verspricht.

Unternehmen holen sich erfahrene Dienstleiter ja auch als Unterstützung, weil intern entweder das Know-How oder einfach die Ressourcen fehlen. Oft auch beides, da sich das Kerngeschäft auf andere Bereiche fokussiert und bei der Umsetzung komplexer Web-Anwendungen oder digitalen Kampagnen lieber auf Experten vertraut wird, die bei der Erreichung der Projektziele behilflich sind. Als Experte wiederum steht man in der Verantwortung das eigene Know-How einzubringen. Dafür wird man am Ende schließlich auch bezahlt. Erforderlich sind dafür mit Sicherheit eine intensivere Auseinandersetzung mit dem Kunden im Vorfeld und laufender Dialog während der Betreuung.

Es scheint nur auf den ersten Blick einfacher genau das zu versprechen, was verlangt wird, um Bestätigung zu vermitteln und ein paar Sympathiepunkte einzuheimsen. Wenn man aber in einer Pitch-Situation ist und nur einer von mehreren Anbietern die Aufgabe kritisch hinterfragt, kann der Schuss rasch nach hinten losgehen und zwar in Richtung: Die kennen sich wohl nicht aus. Auch wenn der Umkehrschluss bedeuten könnte, dass andere zu wenig darüber nachgedacht haben. “Alles kein Problem, wird erledigt” kommt schließlich schneller über die Lippen und signalisiert fälschlicherweie eine gewisse Problemlosigkeit.

Doch irgendwann nimmt sich vielleicht jemand kein Blatt vor dem Mund und klärt auf. Im besten Fall wird der Auftraggeber dann nochmals nachfragen, warum nicht darauf hingewiesen wurde, dass eigentlich entweder nur Ressourcen verschwendet wurden, es effizientere Lösungsansätze gegeben hätte oder die Strategie gar nicht den Zielsetzungen entspricht. Und warum man das als Experte nicht schon im Vorfeld erkannt hat. Touché und lose-lose für beide Seiten also.

Partner oder einfach nur ein Umsetzer?

Das Problem liegt oft auch eher auf Seiten der Auftragnehmer auch mal Nein zu sagen. Nicht nur zu einem Projekt an sich, sondern zu Ideen, bei denen im Vornhinein schon absehbar ist, dass diese dem Projekterfolg nicht zuträglich sind, sogar schaden können oder es einfachere Mittel gibt, um an das gewünschte Ziel zu gelangen. Die Wahrscheinlichkeit, dass sich Kunden, die ausgiebig beraten werden gut aufgehoben fühlen und auch bei künftigen Projekten wieder zusammenarbeiten möchten oder weiterempfehlen ist schließlich hoch.

Soweit, so logisch. Dennoch heißt es oft: “Aber wenn es der Kunde doch so will.” Ja, natürlich, wenn der Kunde es will, dann wird es letztendlich so gemacht. Das bedeutet allerdings nicht, dass man auf dem Weg dorthin der Kopf in den Sand stecken und zu allem Ja sagen muss, um womöglich hinter vorgehaltener Hand zu argumentieren, dass man es eigentlich ohnehin besser gewusst hat. Man sollte sich natürlich auch nicht jedes Mal querstellen, am Ende geht es aber nicht um persönliche Befindlichkeiten, sondern den Projekterfolg.

In einer positiven Geschäftsbeziehung muss Raum dafür sein, die eigene Meinung argumentieren und vertreten zu können. Das macht ein partnerschaftliches Verhältnis, das über das reine Auftraggeber-Dienstleister-Verhältnis hinausgeht, aus. Darauf sollten nicht nur Auftraggeber, sondern auch Dienstleister Wert legen. Wenn ein Projekt über mehrere Monate oder sogar Jahre läuft sind beide Seiten gut beraten, sich als gleichwertige Partner zu verstehen.