beyond tellerrand 2014

Bild

Bereits zum vierten Mal fand heuer die beyond tellerand Konferenz in Düsseldorf statt. Dieses Mal hatte auch ich die Ehre für Liechtenecker live dabei zu sein und zu sehen was der Veranstalter, Marc Thiele, hier in den letzten Jahren auf die Beine gestellt hat.

Die Location

Bild

Die Konferenz fand im düsseldorfer Capitol Theater statt. Die Räumlichkeiten passten nicht nur perfekt von der Größe, sondern verliehen der Veranstaltung einen modernen und doch gemütlichen Touch. Durch das traumhafte Wetter konnten wir zwischen den Pausen auch den großen Hof vor dem Theater nutzen. Diese Erfrischung war besonders am ersten Tag auch notwendig, da die Klimaanlage ausgefallen ist.

Bild

Für Verpflegung war nur indirekt gesorgt. Die Getränkepreise waren sehr günstig und im Hof parkte während der gesamten Konferenz der Burger Truck.

Tag 1

Laziness In The Time Of Responsive Design

Ethan Marcotte eröffnete die Konferenz mit seinem Talk über die Trägheit in Zeiten von Responsive Webdesign. Trägheit oder Faulheit werden oft sehr negativ gesehen, doch Ethan erzählte uns warum das nicht immer so sein muss. Es geht nämlich auch darum loszulassen und wieder einfache Wege zu gehen. In Bezug auf Layouts hat er als Beispiel responsive Videos herangezogen. Hier gibt es zahlreiche JavaScript Bibliotheken, die ein Videos den verschiedenen Browsergrößen anpassen. Doch es geht auch einfacher und ohne JavaScript, wie schon A List Apart 2009 vorgestellt hat.

In the beginner’s mind there are many possibilities, but in the expert’s mind there are few (Shunryu Suzuki quotes)

Auch Muster und Frameworks können spannend und hilfreich sein. Doch sind sie wirklich nötig? Diese Frage sollte man sich immer stellen, denn die Tools die es schon gibt, sind Lösungen für andere Probleme und nicht die eigenen. Daher sollte man sie mit Vorsicht genießen und immer hinterfragen.

Website: http://ethanmarcotte.com/
Twitter: https://twitter.com/beep

SVG is for everybody

Gleich der zweite Talk am ersten Tag war eines meiner Konferenz-Highlights, denn Mr. CSS aka Chris Coyer betrat die Bühne. Jeder der im Web mit Front-end Programmierung zu tun, hat sollte diesen Herrn kennen und, das kann ich jetzt im Nachhinein sagen, live erleben. Mit typisch amerikanischer Präsenz und Redegewandtheit verkaufte er uns geschickt SVG.

Mit Browserunterstützung ab IE9+ und Fallback-Möglichkeiten für alles darunter ist SVG bereit für den Masseneinsatz auf unseren Websites. Die Vorteile können sich auf jeden Fall sehen lassen: geringe Dateigröße, scharf bei jeder Auflösung und Größe, flexibel einsetzbar, Barrierefreiheit, und und und…

Auch gegenüber Icon Fonts, die in letzter Zeit sehr beliebt waren, haben sie einige Vorteile. Diverse Tools erleichtern zwar das Erstellen einer Icon Font schon sehr, doch danach ist jede Änderung wieder mit Aufwand verbunden. Mit SVG verwendet man direkt die Grafiken selbst und ist dadurch extrem flexibel. Außerdem ist es problematisch, wenn die Icon-Font gar nicht geladen wird, denn dann bleibt statt dem Icon nur ein nichtssagender Buchstabe über. Chris hat auf seinem Blog einen ganzen Artikel zu diesem Thema verfasst, den ihr hier findet.

If you can build it in Illustrator, you can make an SVG out of it

Unter dem Strich war die Aussage klar. Wir sind bereit für SVG oder umgekehrt. Diese Technik bringt viele Vorteile mit sich und damit sollte man sich unbedingt schon jetzt beschäftigen. Allen in allem ein aufregender und sehr praxisorientierter Vortrag.

PS: Für alle die es schon immer interessiert hat: sein Name wird nicht französisch ausgesprochen. Ich hatte am WC die Möglichkeit nachzufragen 🙂

Technology – The Power And The Promise

Robin Christopherson arbeitet bei AbilityNet an Lösungen, um Personen mit körperlichen und geistigen Einschränkungen ein besseres Leben zu ermöglichen. Da er selbst blind ist, weiß er natürlich ganz genau wovon er spricht. Technik ist für jeden von uns extrem wichtig und nützlich in unserem Alltag. Doch für Menschen wie Robin ist sie noch viel mehr. Allein zu sehen, wie er da auf der Bühne stand und seine Präsentation mit zahlreichen Video Beispielen hält, war eindrucksvoll.

Während wir uns oft Sorgen über die Entwicklung der Technik, wie z.B. beim Google Glass oder Face Detection von Facebook machen, vergessen wir meist die entscheidenden Vorteile, die sie für Personen mit Behinderung mit sich bringen. Über FaceTime von Apple konnten endlich auch Personen die nicht sprechen können über ein Smartphone per Zeichensprache kommunizieren. Google Glass kann eine unglaubliche Hilfe für Personen mit Sehbehinderung sein und auch Face Detection ist hierfür ein super Beispiel. Damit könnte Robin Information über bekannte Personen in seiner Nähe automatisch bekommen.

Robin verdankt sein jetziges Leben mit Job und Familie der Technik und er möchte, dass wir Technik auch aus anderen Perspektiven kennen lernen. Das ist ihm mit seinem Talk auch wirklich gut gelungen!

Website: http://www.abilitynet.org.uk/
Twitter: https://twitter.com/USA2DAY

My Illustrious Ascent Toward “Less Exciting” Work

Ich verfolge schon länger die Arbeit von Jessica Hische und bin immer noch extrem begeistert. Sie ist Designerin und ihre Arbeit steckt voller Liebe zum Detail. In ihrem Talk erzählte sie uns von ihren Projekten und zeigte uns zahlreiche Beispiele dazu. So spannend ihre Designs auch sind, war ich trotzdem leider etwas von ihrem Auftritt enttäuscht. Es gab keine konkrete Aussage oder zumindest keine die bei mir angekommen ist. Trotzdem empfehle ich euch ihre Arbeit anzusehen, wer sie noch nicht kennt. Lasst euch inspirieren!

Website: http://jessicahische.is/
Twitter: https://twitter.com/jessicahische

Ola Gasidlo – offline first

Offline first ist ein Thema, das man im letzten Jahr schon öfter gehört hat und welches immer wichtiger wird. Das Internet, oder besser gesagt die Internetverbindung, hat ihre Grenzen, aber unsere Apps sollten das nicht haben. Wenn im Zug plötzlich die Verbindung abbricht, sollten wir nicht mit einer leeren Seite oder einem Hinweis allein gelassen werden, dass die Verbindung zum Internet nicht besteht. Hier macht man es sich leider noch viel zu oft zu einfach. Dabei lassen die technischen Möglichkeiten schon lange mehr zu, erzählt Ola Gasidlo von Hoodie.

Offline is not a bug

Die erste Regel bei offline first ist: Do not loose the data. Deshalb tut es gut, die Daten auch immer im Client zu speichern, falls die Verbindung zum Server nicht funktioniert. Hier ist
es aber auch wichtig, die eigene App und deren Benutzer gut zu kennen. Was ist relevant und was nicht? Wie kann ich meinem Benutzer auch offline helfen? Diese Fragen sollte man sich auf jeden Fall stellen und eine Offline-Strategie daraus erstellen. Diese ist natürlich nicht für alle Applikationen gleich.

Leider war ihr Talk dann aber auch schon aus, als es um die tatsächliche Implementierung gegangen wäre. Da hätte ich gerne mehr gehört. Für wen aber Offline First noch ein neues Thema war, der hat auf jeden Fall einen guten Einblick bekommen.

Website: http://hood.ie/
Twitter: https://twitter.com/misprintedtype

Escape To Planet Aerth

We need ab web of choices, no compromises

Im sozialen Netz ist es üblich, überall seine persönlichen Daten anzugeben und diese auch zu teilen. Das war schon immer so und es sieht auch derzeit nicht so aus, als ob sich das ändern würde. Aber warum eigentlich? Warum müssen wir immer neue Benutzerprofile erstellen? Und gibt es wirklich keine andere Möglichkeit, als all diese Daten zentral zu speichern? Das sind alles Fragen, die sich Bastian Allgeier gestellt hat und seitdem ist Dezentralisation eines seiner Hauptthemen geworden. Er sammelt dazu Ideen und Ansätze und versucht damit dieses Thema zu einem Thema für alle zu machen.

Website: http://bastianallgeier.com
Twitter: https://twitter.com/bastianallgeier

It’s great to create

Den Abschluss am ersten Tag machte Jon Burgerman. Ich muss zugeben ich kannte ihn noch nicht. Eines ist aber klar, ich werde ihn nicht vergessen!

If you can’t be good, be different

Jon Burgerman ist Künstler, Selbstdarsteller und bekannt für seine „Doodle“ Bilder. Sein Talk war Unterhaltung pur und die Einblicke in seine Welt unvergesslich. Wenn ihr einmal die Chance habt diesen Mann live zu sehen, geht hin! Es zahlt sich auf jeden Fall aus.

Website: http://jonburgerman.com/
Twitter: https://twitter.com/jonburgerman

Tag 2

Responsive Design is Still Hard/Easy! Be Afraid/Don’t Worry!

Dan Mall ist Art Dirctor und Designer bei SuperFriendly . Mit RWD haben wir derzeit alle zu tun und im Prinzip ist es sehr einfach. Wir haben ein Fluid Grid und Media Queries. Doch in der Realität ist es dann doch viel mehr. Dan möchte mit seinem Talk Tipps und Tricks bereitstellen, die uns Designer und Entwickler im Alltag mit RWD helfen.

Entscheidend ist für ihn die Adaptierung von der Wasserfall-Methode zu einem agileren Konzept. Konzept, Design und Entwicklung können heutzutage nicht mehr nacheinander ablaufen. Die einzelnen Partien müssen von Anfang an gemeinsam arbeiten. Natürlich hat der Entwickler zu Beginn noch nicht all zu viel zu tun, aber es ist wichtig, dass er bei den ersten Meetings schon dabei ist. Beim Designer ist es dann umgekehrt. Er hat Anfangs mehr zu tun, aber dafür zum Schluss weniger. Wichtig ist nur, dass alle gemeinsam beginnen und fertig werden. (Focal Points) Dieses agile Prinzip bezieht sich genauso auf ein ganzes Projekt, wie auf einen einzelnen Sprint darin.

Die Planung ist auch ein Aspekt bei RWD der oft vernachlässigt wird oder zu kurz gerät. In einem Beispiel erzählt Dan, wie sie schon vor dem ersten Meeting mit dem Kunden Feedback von Benutzern des Produktes eingeholt haben.

Weiters empfiehlt er, sich kleine Frameworks selber zu erstellen. Ein Beispiel dafür ist die Auflistung von Seiten und Seitenelementen in einer Tabelle. Dabei wird einfach definiert, welches Element auf welcher Seite zu finden ist. Hiermit kann man auch schon früh einen HTML / CSS Prototypen erstellen, der auch responsive ist. Der Kunde bekommt damit schon früh einen Eindruck, wie sich die Seite auf verschiedenen Geräten verhält. (Hier muss natürlich auch der Kunde mitspielen)

Auch für die Performance muss in der Planung schon Früh Platz geschaffen werden und er empfiehlt ein Performance Budget festzulegen. Hier kann man sich Ziele für das Gewicht oder die Geschwindigkeit der Seite setzen. Dadurch hat man dann Argumente um Änderungen im Design zu besprechen. Ist der neue Slider wirklich so wichtig, dass wir von unseren Performance Zielen abweichen können?

Für weiter Tipps empfehle ich euch seinen Blog.

Website: http://danielmall.com
Twitter: https://twitter.com/danielmall

CSS is a mess

Jonathan Snook ist Front-end Developer und hat bei Yahoo zahlreiche große Produkte wie Mail neu überarbeitet. Derzeit arbeitet er bei Shopify und ist unter anderem für die CSS Struktur verantwortlich. Seine Erfahrungen und Konzepte für flexible CSS Strukturen hat er bereits vor ein paar Jahren im Buch „SMACSS“ zusammengefasst. Ich habe dieses Buch auch schon länger daheim und kann es jedem wärmstens empfehlen.

Shift your thinking, dont code for the page

Für alle die das Buch kennen, war in seinem Vortrag leider nicht viel Neues dabei. Er erklärte die Wichtigkeit von CSS in großen Projekten und warum es nicht einfach ist, flexible CSS Architekturen aufzubauen. Es ist wichtig für das System zu programmieren und nicht für eine Seite oder ein Template.

Website: http://snook.ca/
Twitter: https://twitter.com/snookca

Content in a zombier apocalypse

Karen McGran ist Content Strategy Expertin und unterrichtet Design Management in Manhattan. Sie leitete schon große Projekte der New York Times oder The Atlantic. In ihrem Talk erzählt sie von Problemen der Inhaltsvermittlung in Zeiten eines nicht zu bändigenden Internets. So sehr wir auch versuchen es zu kontrollieren, wir werden es nicht schaffen und das müssen wir in erster Linie akzeptieren.

Doing the right thing for the future = doing the right thing for accessibility

Gerade deshalb ist es wichtig, Inhalte außerhalb von Design und Form zu betrachten. Nur dann können wir den Inhalt einmal erzeugen und überall verwenden. Inhalt ist auch nicht gleich Inhalt, wie sie uns anhand von zwei verschiedenen Websites von Kochrezepten zeigt. Der Unterschied liegt im Detail und dieser ist enorm wichtig.

Website: http://karenmcgrane.com/
Twitter: https://twitter.com/karenmcgrane

Type is visible language

Erik Spiekermann sollte jeder einmal erlebt haben. Mit seinen fast 70 Jahren hat dieser deutsche Gestalter, Typograf und Buchautor eine Menge an Erfahrung sammeln können, die er auch gekonnt weitergeben kann. Unter anderem hat er z.B. die Schrift der Deutschen Bahn entwickelt oder an der Neuen Helvetica mitgearbeitet. In seinem Talk nahm er uns mit auf eine Reise durch seine Arbeitswelt.

Dont work with assholes and dont work for assholes

Website: http://spiekermann.com/
Twitter: https://twitter.com/espiekermann

Maintaining Simplicity

Stephen Hey ist Designer und Berater für plattformübergreifende Design Workflows.
Wir neigen dazu, Dinge komplizierter zu machen als sie sind und das sieht man auch im Web. Dabei kann es so einfach sein. Die meiste Zeit wollen wir nämlich nur eines: Von A nach B zu kommen. Wenn wir ein Bier wollen, gehen wir ein Bier kaufen. Wenn wir einen Film sehen wollen, schalten wir den Fernseher ein. Im Web machen wir uns aber bzw. dem Benutzer unsere Produkte das Leben oft unnötig schwerer und es entstehen viele Störungen, die zwischen A und B stehen.

Not being able to do something in a particular browser is not a browser problem, it is a design problem

Ein gutes Beispiel ist die Website einer bestimmten Autovermietung. Dort kann man sich den Preis für die Miete eines Autos, für einen bestimmten Zeitraum, ausrechen lassen. Die Wahl des Zeitraumes erfolgt über einen Datepicker mit Datum und Uhrzeit. Uhrzeit? Die spielt doch keine Rolle für den Preis? Stimmt, tut sie auch nicht und sorgt damit für unnötige Verwirrung bei der Auswahl. Aber warum ist dann überhaupt im Datepicker integriert? Die logische Erklärung ist: aus Faulheit. Der Datepicker der verwendet wurde bestand aus Datum und Uhrzeit und da man diesen nicht ändern wollte oder konnte, ist die Uhrzeit einfach geblieben. Stören tut sie ja nicht oder? Leider tut sie es eben doch, denn sie verlängert den Weg von A nach B.

In einem weiteren Beispiel erwähnt Stephan das weit verbreitete und doch sehr umstrittenen „Hamburger-Icon“.

Bild

Es wird bereits fast überall für mobile Menüs eingesetzt und wir gehen davon aus, dass es jeder auch versteht. Das trifft vielleicht auf uns Designer und Programmierer zu, aber für viele sind es einfach nur drei Striche und manchmal gar nicht als klickbares Objekt erkennbar. Deshalb wird empfohlen, es zumindest in Verbindung mit einem Rahmen und dem Text „Menu“ zu verwenden. Auf einigen Seiten wird es sogar zusätzlich, mit z.B. einem Popup, explizit erklärt. Dadurch stellt sich natürlich die Frage, ob das Icon dann noch wirklich Sinn macht.

Außerdem sollte man, um Projekte simpler zu halten, auch wirklich bei Null beginnen. Designer und Entwickler sind immer vorbelastet und bringen ihr eigenes „Gepäck“ zu jedem Projekt mit. Diese Vorbelastung hindert uns daran, Dinge aus einem anderen Blickwinkel zu sehen. Weiters muss es auch einen Punkte geben, an dem man Stop sagt. Ein Punkt an dem keine weiteren Features oder Änderungen passieren.

Website: http://www.the-haystack.com/
Twitter: https://twitter.com/stephenhay

The Internet with a human face

And last but not least durfte Maciej Cegłowski auf die Konferenzbühne. Er betreibt eine Bookmarking Plattform, die besonderen Wert auf die Privatsphäre der Benutzer legt.

The internet does not forget!

Privatsphäre im Web ist ein Hauptthema in seinem Talk und schließt da an wo Bastian Allgeier aufhörte. Auch ihm ist es ein großes Anliegen, das derzeitige Web zu überdenken. Wie können wir die Vorteile nutzen, ohne uns und unsere Daten verkaufen zu müssen?

Aber es geht noch um mehr. Es ist egal bei welchem Anbieter die Daten gespeichert werden(Bsp. Facebook, Telegram, Threema etc.), denn wenn die Behörden die Daten brauchen, bekommen sie diese auch. Besonders Amerika hat hier einen schlechten Einfluss auf unser Web. Wir müssen uns von den Zwängen lösen und beginnen diese Probleme auch war zunehmen. Was für ein Internet wollen wir für unsere Kinder? Außerdem können wir mit dem Internet noch so viel mehr erreichen, wenn wir uns nicht Sorgen um unsere Daten machen müssten.

Der letzte Talk war ein würdiger und spannender Abschluss der beyond tellerand Konferenz und hat noch einmal zum Nachdenken angeregt. Zum Glück war jeder zweite Slide der Präsentation mit einem Foto eines Tierbabys geschmückt, wodurch wir nicht all zu deprimiert die Konferenz verlassen mussten.

Website: http://idlewords.com/
Twitter: https://twitter.com/baconmeteor

Fazit

Insgesamt haben sich alle Lobeshymnen auf die beyond tellerand Konferenz für mich bewahrheitet. Sie war professionell organisiert und bot wirklich spannende Talks aus verschiedensten Themenbereichen, die aber trotzdem gut zusammengepasst haben und schlüssig waren. Ich bin schon jetzt auf das Lineup im nächsten Jahr gespannt und empfehle jedem dort einmal vorbei zu schauen.

Zuvor kommt aber noch diesen Oktober zum dritten Mal unsere Digital Visions Konferenz in Wien und es empfiehlt sich schon jetzt den Termin im Kalender einzutragen.

Ich beende diesen Artikel wie Jon Burgerman seinen Talk, mit 2 Minuten und 44 Sekunden „Everything is awesome!„.

Bild