beyond tellerrand 2012 Düsseldorf Capitol Theater

beyond tellerrand 2012 lud diesmal nach Düsseldorf ein und gut 400 Teilnehmer folgten dem Aufruf. Kein Wunder, bei einem attraktiven Ticketpreis und 16 hochkarätigen Sprechern aus aller Welt. Florian Elischer war für die digiparden vor Ort und nahm viele positive Eindrücke und Inspirationen mit. Im nachfolgenden Bericht erzählt er etwas mehr zu den einzelnen Vorträgen und was ihm besonders daran gefallen hat.

Die Fahrt mit dem Zug von Schwäbisch Gmünd nach Düsseldorf dauerte rund 5 h und verlief problemlos. Einzig der Check-In im Hotel war zuerst etwas ungewohnt, da die Türen verschlossen waren und an der Rezeption niemand zu sehen war. Logisch, wenn an Sams-, Sonn- und Feiertagen hier schon um 22 h der Schlüssel herumgedreht wird… wie auf einem Schild zu lesen war. Nach kurzer Orientierungsphase und dem einen oder anderen Klingelversuch erkannte ich, dass man hier auch elektronisch über einen Automaten einchecken konnte ;-) Über ein Touch-Display musste man nur noch sein reserviertes Zimmer auswählen, bezahlen und bekam anschließend seinen persönlichen Zugangscode für die Türschlösser – ein pragmatischer Ansatz.

Tag 1: Montag, 19.11.12:
Die Konferenz wurde im Düsseldorfer Capitol Theater abgehalten. Sein 50er Jahre Flair sorgte für eine lockere Stimmung und Wohlbefinden unter den Teilnehmern. So kam man schnell mit anderen Webdesignern und Entwicklern ins Gespräch.

Mehr oder weniger pünktlich wurde die beyond tellerrand mit einer eigens dafür kreierten Videoanimation

eröffnet. Der Event-Organisator Marc Thiele sprach ein paar einleitende Worte, bevor er das Mikrofon an die erste Sprecherin übergab.

Nadine Chanine, „Eye Movement and Typeface Legibility“
Die ausgezeichnete Typografie-Designerin aus dem Libanon hielt einen Vortrag zum Thema Augenbewegung beim Lesen und Lesbarkeit von Schriften im Allgemeinen. Besonders interessant war hier ein kurzer Ausflug in die arabische Welt und wie in diesen Kulturen mit Typografie umgegangen wird. Wir erfuhren z.B., dass beim Lesen von arabischen Schriftzeichen das Gehirn anders beansprucht wird, als beim Lesen von lateinischer Typografie (Auslastung und Reihenfolge der rechten und linken Gehirnhälfte).
Nadine Chanines Doktorarbeit befasst sich intensiv mit dem Erfassen von Buchstaben und Wörtern. So braucht man im Durchschnitt 8 Buchstaben, um ein Wort zu identifizieren. Großbuchstaben erkennt das menschliche Gehirn überwiegend am Umriss, Kleinbuchstaben hingegen am Hauptstrich. Eine Sakkade (Blickzielbewegung) umfasst ca. 4 Wörter, danach erfolgt ein kurzer Stopp, auch Fixierung genannt (ungefähr 250 ms für lateinische Buchstaben, 340 ms bei arabischen Schriftzeichen).

Mat Marquis, „Interacting Responsibly (and Responsively!)“

Mat ist Entwickler bei der durchaus bekannten Filament Group, Mitglied im jquery mobile Team und einer der Hauptverantwortlichen beim Relaunch der Webseite „BostonGlobe.com“. Letztere zeichnet sich dadurch aus, dass diese auf eigentlich jedem Device hervorragend dargestellt wird, selbst auf einem uralten Nokia-Handy.
Er begann mit einigen Basics zum Thema „Responsive Web Design“ und empfahl, Breakpoints nicht nach irgendwelchen Vorgaben zu setzen, sondern diese immer passend auf die Seite abzustimmen. Denn je nach Layout und Inhalte müssen diese sogar unterschiedlich ausfallen (ist auch bei der digiparden Seite so).  Des Weiteren ging er auf die nach wie vor ungelöste Frage ein, wie man Bilder optimal für die unterschiedlichen Devices (Low-Res und High-Res Displays) und Bandbreiten zur Verfügung stellt. Aktuell wird das <picture> Tag favorisiert, es wurde bereits als Draft beim W3C eingereicht. Jetzt bleibt nur noch zu hoffen, dass es schnellstmöglich in die Specs aufgenommen wird, um uns Webentwicklern etwas weniger Kopfzerbrechen zu bereiten.
Mat empfahl darüber hinaus, sich auch mal die „Code-Snippets“ von Scott Jehl auf https://github.com/scottjehl anzusehen. Da sind durchaus sehr nützliche Schnippsel dabei, wie z.B. „Respond“.

Bruce Lawson, „Web Standards for Cross Devices“
Ein genialer Vortrag vom „Opera Man“ mit Apple Aversion – höchst informativ und humorvoll gestaltet. Seine Themenspannbreite reichte von Best Practice Beispielen bis hin zu zukünftigen Entwicklungen im Web und wie diese zu bewerten sind.
Los ging’s mit einer kurzen Einführung über den „App-Cache“ (Caching Modell bei mobilen Geräten) und die damit verbundenen Probleme. Allein das mentale Modell zu verstehen, erfordert wohl eine Menge Grips. Zudem bereitet die große Device Fragmentierung immense Probleme. Jedes Smartphone, jede OS, jeder Browser hat die unterschiedlichsten Eigenschaften, die es zu berücksichtigen gilt.
Webseiten ohne Responsive Layout kann man über das Viewport-Meta Tag bequem anpassen. Zukünftig wird man Werte auch prozentual angeben können. Wer mehr darüber erfahren will, dem sei diese Seite ans Herz gelegt ww.webkrauts.de/2011/12/21/ein-blick-durch-den-viewport/. Sehr interessant fand ich Bruce kurze Einführung zum Thema „CSS Flexbox“. Zusammengefasst handelt es sich hierbei um ein neues Layout-Modell, das mehr Kontrolle bietet, als die bisherigen float-Modelle. Die Unterstützung ist bereits jetzt recht breit. Man sollte aber unbedingt darauf achten, nur aktuelle Tutorials zu verwenden, da sich die Specs für die finale Version doch nochmals grundlegend geändert haben. Opera hat dazu ein passendes Beispiel online: http://dev.opera.com/articles/view/flexbox-basics/.
Mr. Lawson war auch so nett, seine gesamte Präsentation online zu stellen.

Geri Coady, „Colouring the Web“

Auch die Webdesigner wurden auf der beyond tellerrand nicht vergessen. Geri begann mit einfachem Basiswissen zum Thema Farben im Web. Das Farbempfinden ist zwar ähnlich gelagert, aber nicht bei allen Menschen gleich. Abgesehen von Farbsehschwächen gibt es Unterschiede in der Wahrnehmung zwischen den Geschlechtern, aber auch zwischen den Generationen. Generell sollte man aber auf Sehanomalien Rücksicht nehmen, damit sich Betroffene auf Webseiten problemlos zurechtfinden.
Zum Schluss gab es praktische Tipps von der Expertin, u.a. zum Thema Color-Management im Web oder auch zum Arbeiten mit CSS3 Verläufen. So sorgt das HSLA gegenüber dem RGBA Farbmodell für ein besseres Verständnis und Umgang mit Farben, wenn diese im Browser (erst ab IE9) bearbeitet werden.  Erstellt man einen Webstyle-Guide, so sollte dieser besser direkt als Webseite angelegt werden und nicht wie sooft, als PDF Vorlage. Das erleichtert den Webworkern den Zugriff. Starbucks hat seine Guide-Lines veröffentlicht und dient als gutes Anschauungsbeispiel.

Tag 2: Dienstag, 20.11.12:
Neben vielen, qualitativ hochwertigen Vorträgen, gab es auch noch zahlreiche Aussteller auf der Konferenz, die Einblick in ihr Unternehmen gaben. Besonders beliebt war sicherlich der Stand „developer garden“mit Sascha Wolter, denn hier gab es einen Lego Mindstorms Baukasten zu gewinnen. Ebenso spannend war es aber auch zu beobachten, wie ein 3D Drucker beliebige Gegenstände „druckte“. Meinen Space Invader sieht man auf einem der Fotos J Für alle Mobile-Entwickler, die Device-Testing ernst nehmen, ist die neue Initiative „Open Device Lab“ eine dienliche Entwicklung. Ziel ist es, in möglichst vielen Städten solche Labs zu installieren, die eine große Auswahl an verschiedensten mobilen Geräten bieten, um weitgehende Tests durchführen zu können.

Ebenfalls eine witzige Idee, die gut ankam, sind die Kaffeemonster von www.kuhnigk.com.

Andre Jay Meissner, „Tamagotchi Galore“
Andre Meissner arbeitet aktuell bei Adobe als Developer-Relationship Manager. Sein Anliegen bei beyond tellerrand, „Testet auf möglichst vielen und testet vor allem auf echten mobilen Devices!“. Die zunehmende Fragmentierung ist eine große Herausforderung für alle Mobile Developer. Nimmt man seine Aufgabe ernst, um eine optimale Ausgabe auf möglichst vielen Endgeräten zu erreichen, bleibt einem intensives Testen nicht erspart. Dummerweise taugen Simulatoren nur bedingt, da gerätespezifische Bugs oder auch die Geschwindigkeit nicht simuliert werden können. Man kommt nicht umhin, umfangreiche Checks durchzuführen – aktuell auf Minium 10 – 15 Geräten (auf welchen Smarthphones und Tablets, das ist abhängig vom jeweiligen Land). „A pain in the ass“ bleibt das Debugging. Jeder Browserhersteller strickt an einer eigenen Debug-Software, eine übergreifende Lösung lässt noch auf sich warten. Eine Erleichterung bieten u.a. „weinere“ und Adobe „Edge Inspect“. Wer keinen Zugriff auf ein „Open Device Lab“ hat, soll Freunde und Bekannte fragen, ob diese nicht mehr gebrauchte Geräte zur Verfügung stellen können.

Remy Sharp, „Mobile Debugging“

Während Andre seinen Vortrag etwas allgemeiner gestaltete, tauchten wir mit Remy tiefer in die Mobile Debugging Sphäre ab. In seiner Einleitung verwies er darauf, dass er seine erste HTML-Seite für Handys 1999 erstellte und dass diese immer noch online sei (leider hab ich mir die URL nicht notiert).
Ratschlag Nummer 1 des Profis „kenne den Feind“. Ähnlich wie bei den verschiedenen Browsern, ist es auch hier wichtig zu wissen, wie diese „ticken“ und wie man Standard-Bugs schnell eliminiert. Vor allem wenn man mobile Apps programmiert, kommt man nicht umhin, diese umfassend zu testen. Hilfestellung bieten hier Programme wie „Charles„, die JavaScript Library modernizr.com, aber auch www.jsbin.com  oder Aardwolf, ein „remote JS Debugger“ für gängige OS.
Ratschlag Nummer 2 lautete „expect the unexpected“. Man sollte zudem nie eine Fehlerquelle ausschließen, sei sie auch noch so weit hergeholt. Passend dazu erzählte er von einem Bug, der nur dann auftrat, wenn man über 3G und nicht über WiFi die App nutzte.
Zum Schluss gab’s noch einen Fun Fact. Die Wikipedia Website lädt ca. 162 KB JS Code, die Web App Google Mail gerade einmal 29 KB zu Anfang. Deshalb sein 3. Ratschlag „load JS dynamically“. Grundsätzlich sollte man immer nur die Skripte laden, welches auch wirklich benötigt werden. Den Rest lädt man besser später dynamisch hinzu, um Bandbreite zu sparen. Gerade bei langsamen Verbindungen ein dickes Plus für jede Anwendung, die so verfährt.

Eva-Lotta Lamm, „Visual Improvisation – Using playfulness to spark ideas“

Ein erquickender Auftritt von E.L. Lamm, Interaction Designerin bei Google, erweckte müde Geister zu neuem Leben. Ihr Schwerpunkt „lernen zu improvisieren, sich frei zu machen und den Flow spüren“ klang zwar etwas esoterisch angehaucht, war aber alles andere als das. Der erste Teil handelte von Künstlern, die ihr Improvisationstalent nutzen, um Jazz oder Theater zu spielen oder um zu rappen und dabei Neues zu erschaffen. Wichtig dabei ist es, los zu lassen und die eigene Angst vor dem anfänglichen Nichts zu verlieren. Improvisation ist aber auch für Designer wichtig. Denn wer zu Beginn des Design-Prozesses schon weiß, wie das Endprodukt aussehen soll, plant eine Produktion. Als Beispiel für eine echte Kreativschmiede nannte sie die Agentur www.heatherwick.com. Anschließend gab es etliche Beispiele aus der Praxis. Bei Street-Art werden Gegenstände durch Improvisieren künstlerisch verändert oder ergänzt. Ebenso kann man aber vorhandene Dinge ersetzen, kombinieren, modifizieren oder in einen neuen Kontext setzen. In den Pixar Studios entstehen Szenen ganz ähnlich. Ein Designer beginnt mit einem Ausschnitt, andere Beteiligte fügen peu a peu weitere Elemente hinzu oder kombinieren diese neu.
Zum Schluss gab eigentlich nur die Aufforderung zu üben, zu üben und nochmals zu üben. „Failure is just the negative space around success!“.

Hellicar & Lewis, „Halycon (Beautiful Days)“

Wie Kreativität aussehen kann, zusammen mit einem interessanten und humorvollen Vortrag (das liebe ich an den Briten), zeigten die beiden Geschäftsführer Pete Hellicar & Joel Gethin Lewis von der Agentur Hellicar & Lewis. Ihre Stärke liegt in ungewöhnlichen Ideen und Projekten. Bevor ich jetzt allzu viele Worte darüber verliere, schaut euch einfach auf deren Webseite um. Besonders gut hat mir die Wall Mapping Installation gefallen. www.hellicarandlewis.com

Chris Shiflett, „The Magic of Mind“

Chris Shiflett entführte uns in die Welt der menschlichen Wahrnehmung und wie sich diese nur allzu leicht täuschen lässt. Mit einem kleinen Bildmanipulationsexperiment zeigte er auf, wie wichtig es ist, Veränderungen auf einer Webseite gut sichtbar zu gestalten, da sonst wichtige Hinweise, wie z.B. Input-Feld-Validierungen, leicht übersehen werden.
Weiter ging’s mit dem Begriff „Unaufmerksamkeitsblindheit“ aus der Psychologie. Hier hat man nachgewiesen, dass die meisten Menschen nicht besonders aufmerksam sind, sich quasi viel im Unterbewusstsein abspielt. Der folgende Clip veranschaulicht das sehr deutlich.
Beim Thema „Signifikante Umgebung“ kommt es darauf an, Elemente oder auch Geräusche (Jingles) zu gestalten/erzeugen, die dem Benutzer vertraut vorkommen und auf die er sich verlässt. Genannt wurden hier u.a. der Hinweis bei Browsern, dass man sich auf einer verifizierten Webseite befindet (z.B. bei Banken) oder ein Jingle für jede Tokioter U-Bahn-Linie, damit die Leute selbst unterbewusst wissen, wo sie sich gerade befinden.
Wie leicht sich der menschliche Geist täuschen lässt, erfuhren wir auch bei „Mythos der Intuition“. Als Beispiel wurde hier eine Umfrage zum Thema „Helm und Sicherheit beim Fahrradfahren“ angeführt. Je nach Land gab es hier ganz unterschiedliche Ergebnisse. Während in Deutschland rund die Hälfte der Menschen davon ausgeht, dass ein Fahrradhelm die Sicherheit erhöht, waren es in den USA fast 100%, in den Niederlanden hingegen nur 20%. Auch weitere Experimente zeigten auf, dass Menschen nur dann richtig handeln, wenn sie über die Vorgehensweise Bescheid wissen (Auswahl zwischen 3 Türen + erneute Auswahl).
Auch das Erinnerungsvermögen ist beim Menschen eigentlich mangelhaft ausgebildet > „fälschliche Erinnerung“. Allzu leicht lässt man sich täuschen und nimmt Dinge überhaupt nur unzureichend wahr. Als Anschauungsbeispiel gab es einen Video-Clip, in dem es augenscheinlich um einen Kartentrick ging. Auch ich konzentrierte mich hauptsächlich auf diesen Vorgang und bekam, bis auf ein bis zwei Ausnahmen, überhaupt nicht mit, wie viele Dinge sich während des Kartenlegevorgangs tatsächlich geändert hatten. Das fing bei der Deko des Studios an und endete bei den Kleidungsstücken der Protagonisten. Ableitend für das Webdesign lässt sich sagen, wichtige Informationen müssen leicht zugänglich und klar gekennzeichnet sein (außenstehende und keine Inline-Labels bei Input-Feldern).

Ben Bodien, „Branching out“

Auch dieser Vortrag war klasse und vor allem sehr persönlich gestaltet. Bevor es um das eigentliche Thema ging, gab es einen kleinen Abriss aus seinem Leben, mit wirklich ultra coolen Fashion Fotos aus seiner Kindheit (70iger/80iger Jahre). Er hätte Fotomodell werden sollen ;-).
Seine Message ans Publikum „Habt den Mut eure Komfortzone zu verlassen, probiert Neues aus, auch wenn ihr ab und zu scheitert, denn nur daraus lernt man dazu!“.  Hierfür ist es wichtig, dass man sich Ziele setzt, experimentiert, um Fehler zu begehen, aber sich selbst auch realistisch bewertet, ob etwas zu schaffen ist oder nicht. Neben Arbeiten für Kunden, sollte man auch seine persönlichen Projekte angehen, in denen man sich so ausleben kann, wie man es für richtig hält.

Mark Boulton, „Adapting to Responsive Design“

Responsive Design verändert nicht nur die Gestaltung von Webseiten, sondern auch den Business Prozess und die Darstellung von Inhalten. Über tausende von Jahren war das Funktionsprinzip relativ einfach. Ein Medium, ein Layout. Das funktioniert heutzutage immer weniger, denn Benutzer möchten Inhalte auf den unterschiedlichsten Medien nutzen (Multiscreen Experience), deshalb sind fixe Layouts eher hinderlich, da die Darstellungsqualität darunter leidet.
Mark Boulton wies darauf hin, dass Responsive Design aber auch eine neue Herausforderung für das Geschäft mit dem Kunden ist. Schließlich muss man diesem zum einen erklären, warum die neue Webseite teurer ist, als bei der Konkurrenz und zum anderen, warum auch der Design-Prozess zukünftig anders gestaltet werden muss. Um den zeitlichen Rahmen nicht zu sprengen, muss man wieder mehr Sketches und einfache Wireframes gestalten, anstatt sofort mit Photoshop zu beginnen. Designer und Entwickler müssen enger zusammenrücken, um eine optimale Umsetzung zu gewährleisten.
Responsive Design verändert zudem das Zusammenspiel zwischen Layout und Content. Eine Content Strategy wird wichtiger denn je. Ohne vorhandene Inhalte kann man ein adaptives Design kaum umsetzen, da nicht klar ist, wie sich diese bei verschiedenen Größen verhalten.
Auch bei Online-Werbung müssen neue Wege gedacht werden, weil die klassische Anordnung bei RD nicht mehr ohne weiteres funktioniert. Spiegel Online hat z.B. neue Zwischenseiten eingefügt, auf denen Werbung geschaltet ist, um dieses Problem etwas zu umgehen.
Zum Abschluss seines Talks erzählte er noch von seinem aktuellen Projekt, die Neugestaltung der CERN Webseite und welche Herausforderungen hier auf das Team warteten (noch nicht online).

Andy Baio, „Hugs, Kisses and Disintermediation“
Ehe man sich’s versieht, ist man bereits beim letzten Vortrag der diesjährigen beyond tellerrand angelangt. Schade eigentlich. Nichtsdestotrotz war auch dieses Thema spannend. Im Mittelpunkt standen die Themen Social Media und wie diese gängige Geschäftsmodelle/-prozesse ändern können. Andy erzählte zu allererst von seinem eigenen, sehr speziellen Projekt und wie er die neuen Möglichkeiten für seine „Chip-Tune-Jazz Idee“ (Jazz in Kombination mit Spielekonsolen Sound) eingesetzt hat. Dafür sammelte er über Kickstarter, eine der größten Finanzierungsplattformen weltweit, das notwendige Startkapital. Rausgekommen ist dabei dieser coole Sound: www.youtube.com/watch?v=qckXXfyYXc4
Solche kreativen und individuellen Konzepte hätten früher normalerweise keine Chance auf Realisierung gehabt, da man damit kein Geld verdienen konnte oder es aber an der finanziellen Ausstattung scheiterte.
Auch das Projekt „Indie Game – the movie“ wurde über diesen neuen Kanal produziert. Es lohnt sich auf jeden Fall, den Trailer dazu anzusehen.
Fazit: Man hat heute viel größere persönliche Freiheiten und kann das machen, wozu man Lust hat, wenn man einige wenige von seinem Projekt überzeugt bekommt.

Auf ein Neues im Mai 2013! Die verwendeten Bilder stammen teilweise aus der Twitter-Timeline anderer Teilnehmer. Vielen Dank dafür, der Twitter Name wurde als Copyright-Vermerk hinzugefügt.

2 Gedanken zu „beyond tellerrand 2012 Düsseldorf Capitol Theater

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s