Nach dem großen Erfolg der Digital Visions 2012 war es klar, dass wir 2013 wieder die UX- und Frontendkonferenz veranstalten werden. Vollbepackt mit tollen Speakern, gutem Kaffee und kulinarischen Leckerbissen war es dann am 4. Oktober so weit und wir luden ins f6 in den 6. Bezirk ein.
Status Quo der Webtypografie
Eröffnet wurde die Veranstaltung mit dem Talk von Gerrit van Aaken. Er ist eine Koryphäe wenn es um Webtypografie geht und er kennt dessen langen Weg im Netz genau. Prinzipiell stellt sich die Frage ob wir mit Webtypografie jetzt endlich am Ziel angekommen sind? Gerrit sagt JEIN!
Auf der einen Seite Ja, denn durch den rasanten Fortschritt der Browser und Tools wie Google Fonts oder Fonts.com ist das Einbinden von benutzerdefinierten Schriften so leicht wie noch nie: Schrift aussuchen und generierten Code einbetten. That’s it! Auch schon einige Online-Ausgaben von Zeitschriften wie die Süddeutsche.de haben sich an moderne Web-Fonts herangetraut.
Trotzdem sind wir aber auch gleichzeitig noch nicht angekommen laut Gerrit und das hat einige Gründe. Das größte Problem ist die Darstellungstechnik. Wie viele sicher schon bemerkt haben, schauen Web-Fonts überall anders aus und das liegt an deren Rendering. Schriften bestehen aus Vektorgrafiken, die gerastert werden müssen und dafür gibt es zahlreiche Systeme. Leider arbeiten diese alle unterschiedlich. Das Ergebnis hängt vom Betriebssystem und dem Browser ab. Als ob das noch nicht kompliziert genug wäre, hängt es zusätzlich auch noch von Treibern ab, die möglicherweise installiert sind oder eben nicht. Kann man hier noch durchblicken? Eher schwierig, denn wenn der Text mal dem gewünschten Erscheinungsbild entspricht, können weitere Probleme auftreten. Zum Beispiel wird die Schrift wieder unscharf wenn man mit CSS Transformierungen wie rotate arbeitet.
Hier gibt es auf jeden Fall noch eine Menge an Handlungsbedarf, um auf einheitliche Schriften zurückgreifen zu können. Zusätzlich sollten noch diese Punkte erfüllt werden, damit Fonts im Web zum No-Brainer werden:
- alle Screens mehr als 300ppi
- alle Datenverbindungen stabile 2 Mbit Verbindung
- auch auf mobile Geräten
- Billigsmartphones müssen genug CPU und Speicher besitzen
Das Ziel ist erreicht:
Wenn der User absolut keinen qualitativen Unterschied mehr zwischen eingebauten und eingebundenen Fonts bemerkt!
Trotzdem bleibt es aber spannend, denn laut Gerrit werden wir nie dort ankommen wo wir hinwollen.
Zusammenfassend ist Gerrit van Aaken seiner Philosophie “Wissen immer teilen” und den hohen Erwartungen gerecht geworden. Er hat uns alle auf den neusten Stand der Webtypografie gebracht und uns gezeigt, dass wir noch lange nicht soweit sind wie wir es gerne mit Webtypografie hätten. Trotzdem haben wir heute einfache Möglichkeiten Web-Fonts einzubinden und das sollten wir seiner Meinung nach auch tun. Viel zu lange hatten wir die gleich faden Systemschriften und etwas Vielfalt tut uns auch im Web sehr gut.
Visionair – UX Flughafen-App
Im zweiten Talk des Tages hat uns Gregor Hofbauer Einblicke in das Projekt Visionair verschafft. In einem Zeitraum von über 3 Jahren hat er an einer interaktiven Datenvisualisierung für den Prozessablauf am Flughafen Wien gearbeitet und schon der Prototyp kann sich sehen lassen. Das Interface Design überzeugt durch moderne, simple aber trotzdem detailreiche Visualisierung. Aber auch bestimmte Überlegungen und Erkenntnisse in gewissen Arbeitsschritten und in der Zusammenarbeit mit einem so großen Kunden, wie dem Flughafen Wien, haben uns fasziniert. Visionair erinnert an futuristische Interfaces aus Filmen wie Minority Report oder Star Trek. Gerne hätten wir wohl alle so ein Interface auf einem Multitouch Table selber getestet.
In der kurzen Zeit konnten wir natürlich nur einen kleinen Einblick in das Projekt Visionair erhaschen, aber dieser hatte es in sich und sorgte auch noch im Anschluss an den Talk für reichlich Interesse.
Mobile User Experience
Thomas Nägele ist Interaction und User Experience Designer und in seinem Talk betrachten wir Mobile User Experience aus dem Web gesehen. Der Begriff „mobile“ ist schon länger nicht mehr das, was er mal war. Zu viele neue Geräte und Auflösungen lassen die Grenzen zwischen mobile und Desktop immer mehr verschwimmen. Ein Tablet gehört zwar zu den mobile Geräten, wird aber hauptsächlich daheim über W-Lan benutzt. Laptops werden am Schreibtisch zu Hause, aber auch unterwegs bedient. Neue Modelle haben auch eine Touch-Oberfläche und werden dadurch gleichzeitig zum Tablet. Eindrucksvoll war auch das Beispiel-Bild vom Laptop am Klo. Wer war am stillen Örtchen denn noch nicht im Internet?
Heutzutage sollte es nur noch um den Kontext und die Intention des Benutzers gehen. Der Inhalt steht im Mittelpunkt. Thomas hat uns Einblicke in seinen RWD Workflow erlaubt. Er setzt auf HTML / CSS Prototypen und verwendet ein selbstgeschriebenes CSS Framework. Er empfiehlt jedem Designer sich auch mit dem Programmieren zu beschäftigen, denn nur so bekommt man den richtigen Bezug zu der Materie in der die Designs letztendlich landen. In Photoshop beginnt man jede neue Datei mit der Eingabe einer fixen Größe. Das ist genau das Gegenteil von RWD und daher ist ein Umdenken im Design-Prozess unabdingbar.
Wer ohne Inhalt designed, der dekoriert eigentlich nur!
Wichtig ist Thomas auch die eigene Ideologie. Es gibt sehr viele und gute Tools, mit denen man sich auseinander setzten sollte. Aber alles in Hinsicht auf seinen eigenen Weg, den man finden muss. Kein Tool ist perfekt.
In einem sehr spannenden und interessanten Talk hat uns Thomas das moderne Web vorgestellt und uns gezeigt, wie sich RWD in den letzten Jahren schon deutlich entwickelt hat und wodurch sich auch unsere Ansprüche und Anforderungen geändert haben sollten.
Das perfekte Steak
Vor der Mittagspause durfte dann noch ein bekanntes Digital Visions Gesicht vor die Menge. Stefan Baumgartner war schon 2012 dabei und wir freuten uns ihn wieder bei uns begrüßen zu dürfen. Er verbindet sein Detailwissen mit Unterhaltung und sorgt dadurch immer für die perfekte Atmosphäre.
In seinem Talk teilte er mit uns Erkenntnisse aus seinen letzten Projekten. So sollte es für jede verwendete Library auch einen wichtigen Grund geben. Hier zählt nicht nur der Speicherplatz, sondern auch die Kompatibilität mit dem restlichen Code. Zwanghaft etwas programmieren zu wollen ist da immer der falsche Weg. Auch ”Standard-Code” ist eben nicht immer das was er zu sein scheint.
[code language=“CSS“]
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
[/code]
So kennt z.B. der IE10 den oben angeführten Apple meta viewport tag, den wir täglich verwenden, nicht. Erst mit dieser Erweiterung bricht unser Layout nicht zusammen:
[code language=“CSS“]
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0" />
[/code]
Es ist also oft nicht alles so selbstverständlich wie es oft scheint. Genauso verhält es sich mit prefixed CSS Attributen. Diese sollte man noch mit Vorischt genießen, denn oft gibt es einen Grund dafür, warum sie noch nicht standardisiert sind und es entstehen öfter Probleme als man denkt.
Insgesamt war Progressive Enhancement ein wichtiger Punkt in Stefans Talk. Hier geht es darum immer von einer Basis auszugehen um die wichtigsten Inhalte für den ersten Eindruck zuerst bereitzustellen. Jeder Request muss gerechtfertigt sein, denn Performance ist entscheidend. RESS – Responsive Design & Server Side Components – ist ein Ansatz der genau darauf abzielt. Er verbindet die Vorteile von RWD und server-side detection. Auf dem Server kann man dadurch das vorhandene Gerät erkennen und speziell auf dieses eingehen. Das spart Zeit und liefert dem Benutzer das bestmögliche Erlebnis.
Progressive Enhancement ist auch so beliebt, da wir nicht wissen was uns noch alles in der Zukunft erwarten wird. Der internetfähige Kühlschrank war nicht nur bei Stefan eine Erwähnung wert. Die Zutaten machen die Speise aus und so ist das auch im Web. Wenn es schmecken soll, muss zuerst einmal die Umgebung und die Basis stimmen.
Beyond the Screen
Gestärkt ging es dann nach der Mittagspause weiter mit Nicole Neuberger. Sie ist selbstständige Service & Experience Designerin und befasst sich unter anderem mit Verbesserungen im Gesundheitssystem. Dieses hat sich im letzten Jahrzehnt kaum geändert, aber wir Menschen, unsere Psyche und Erkrankungen hingegen enorm. Hier ist auf jeden Fall Handlungsbedarf gegeben und Nicole kämpft an vorderster Front für besseres Service. Besonders wichtig ist Human-Centered Design. Nicole beschäftigt sich mit den Menschen und ihren Problemen um daraus Ansätze für bessere Bedingungen zu kreieren. Die Sprache stellt leider noch immer eine große Hürde für Patienten dar. Aber auch der Umgang der Ärzte mit Patienten kann noch stark verbessert werden. Bessere Usability könnte hier auch mögliche Verwechslungen und entstehende Fehler vorbeugen. Es gibt auf jeden Fall noch so einiges zu tun und es war sehr spannend aktuelle Einblicke zu bekommen. Auch die anschließenden Fragen zeigten das rege Interesse an diesem Thema.
RWD – Die Geister die ich rief
Sven Wolfermann durfte als letzter ans Rednerpult und sein Thema war die perfekte Ergänzung zu den Themen von Thomas und Stefan zuvor.
Vor ein paar Jahren tauchte plötzlich RWD auf. Ein wenig Flexible Grids, ein wenig CSS Media Queries und fertig ist die Website oder? Es ist mittlerweile zu einem Standard in unserer Branche geworden und doch können wir das Biest noch immer nicht richtig bändigen. Anhand zahlreicher Beispiele zeigt uns Sven die Tücken von RWD auf. Ein großes Problem sind die fehlenden Infos über unsere User:
- wir kennen die Bildschirmgröße nicht
- wir kennen die Browsereigenschaften nicht
- wir kennen die Verbindungsgeschwindigkeit nicht
Was wissen wir denn eigentlich noch? All diese Dinge erschweren uns die Arbeit. Wir müssen quasi auf alles vorbereitet sein und schnell soll es natürlich auch sein. Ist RWD immer noch so easy? Zusätzlich ändert sich aber auch der Workflow. Die Design-Planung wird immer umfangreicher und ist nicht mehr linear. Auch Sven sieht den modernen Designer im Browser arbeiten. Designentscheidungen müssen im Browser getroffen werden und nicht in Photoshop. Die (kurze) Zeit der Standard Breakpoints ist auch schon wieder vorbei. Breakpoints sollen sich dem Inhalt anpassen und nicht einem bestimmten Gerät, denn diese können wir nicht mehr überblicken oder kontrollieren.
Heutzutage wissen wir nicht wie und wo der User unsere Website besucht
Technisch ist auf jeden Fall mobile first der richtige Ansatz, aber damit ist nicht Smartphone-first gemeint. Insgesamt wandert der Trend zu einer neuen Strategie, über die wir auch schon berichtet haben: Content first. Geht es dem Inhalt gut, geht es uns allen gut!
Zusätzlich war auch das Thema Bilder in Bezug auf RWD ein heiß diskutierter Teil seines Talks. Wir brauchen derzeit eine Vielzahl an Bildgrößen für unser RWD, jedoch wollen wir nicht jedem die schweren HD-Aufnahmen aufzwingen. Große Bilder werden zwar verkleinert dargestellt, benötigen aber die volle Dateigröße. Effektiv ist das bei weitem nicht. Die perfekte Lösung gibt es jedoch leider noch nicht und darum müssen uns derzeit Polyfills aushelfen, auf die Sven in seinen Slides genau eingeht und die auf jeden Fall einen Blick wert sind.
Sven hat uns in seinem Talk gezeigt, dass man mit den Geistern die man ruft schon auch umgehen können muss, dass es aber möglich, wenn man sich ihnen stellt.
Dankeschön
Digital Visions 2013 war ein großer Erfolg und wir möchten uns bei allen Teilnehmern, Sponsoren, Speakern und bei unserem Team herzlich bedanken. Es hat uns auch heuer wieder extrem viel Spaß gemacht und daher bleibt uns auch diesmal keine andere Wahl als 2014 wieder zu kommen!
Fotos
Video
Sponsoren
