Project Ironman – Large Scale Refactoring @trivago

I had the pleasure to give a presentation about Project Ironman at a user group in Dortmund.

Project Ironman was the technical migration of the trivago hotel search’s existing CSS core to a pattern library based user interface.

After a long journey, we started to establish a Design / Frontend System from the beginning of 2015 at trivago incl. introducing a pattern library, a atomic design workflow, new coding guidelines and adapted several methodologies like BEM or ITCSS to help us maintaining and developing our CSS/UI at large scale.
Some of the top-level goals of creating a Design System was to ensure consistency in code and design of all our applications as well as reducing technical debt and keeping our application scalable.
I gave a lightning talk at the beginning of 2015 to present our learnings and the issues caused by not having a complete design system at the LeanUX Meetup in Düsseldorf.
In less than a year we were able to develop the base of a new Frontend / Design System and started to redesign / reimplement some of our applications like our trivago company pages.

Nevertheless implementing a new CSS / frontend foundation in our core product the trivago hotel search was a completely different challenge. Around 100 people including Developers, Product Owners and Designers work on this application and a lot more have a stake in it, so there is now way around to do smooth (agile) transition and keep (product) development freezes, which will normally be caused by a refactoring, as low as possible.

So therefore we decided to migrate the CSS foundation to the new base we have developed in our Design System in a very short timeframe and we only had to postpone a few UI related features. After this step is done we are able to built new UI components on a solid, modern and sustainable base.

The project was a huge success, the proposed timeframe was 4 weeks and with an amazing spirit due to our incredible engineering culture and people we were able to finish this project within 3 weeks including positive metrics on the business side.

We are currently working on a blog article about this project and we will publish it on our trivago tech blog as soon as it is finished.

Until then, you might have a look at the slides.

The talk was presented at the OpenTechSchool Meetup Dortmund and gives insights and background about the project scope, its implementation and the business value.

fluid boxes with fixed aspect ratio

In some cases e.g. for displaying a responsive video we need a solution for flexible elements which keep their aspect ratio when resized. You can do this with javascript but then you are doing something wrong.

Displaying flexible images is not a problem as we might know but keeping the aspect ratio on block elements like div isn’t that easy because their height is depending on their content (height: auto) or fixed values.

When we take a deeper look into the CSS specification we see that the padding-top when given in percentage on a block is calculated out of the width of the containing element.

“Percentages: refer to the width of the containing block”

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

With this knowledge we are now able to produce a flexible container that keeps its aspect ratio while resizing. Lets first make a responsive video:

See the Pen responsive video – keep aspect ratio by Christoph Reinartz (@creinartz) on CodePen.0

The trick is we set the padding-top of the outer element top to 56,25% (9/16 = 56,25%) and set the parent element to position absolute and fluid 100% width and height. For a 4:3 video we would use 75% (3/4 = 75%) to have another aspect ratio.

Doing this let us solve a problem with may arise during developing a responsive website. A flexible box which should keep its aspect ratio, e.g. a box which always has the same height as its width.

Lets do this 100% x 100% box and 200% x 100%.

See the Pen Flexible box same height as width by Christoph Reinartz (@creinartz) on CodePen.0

i like this!

Designing for access

Zum Aspekt der Usability einer Webseite gehört u.a. das Designen der Webseite für varierende Bildschirmgrößen (RWD) als auch das Behandeln der unterschiedlichen Eingabemethoden (Touch, Click). Aber wir sollten auch darauf achten, das unsere Webseite auch in weniger idealen Bedingungen (Screenreader, limitierte Software beim Zugriff auf das Web) funktional bleibt. Einer der großen Stärken von HTML ist zum Beispiel die großartige backward compatibility, was bedeutet das Seiten die mit der letzten Version von HTML geschrieben wurden, weiterhin auf nahezu allen Geräten aufgerufen werden können, die HTML unterstützen.

Während HTML Dokumente weitestgehend zugänglich geboren wurden bleiben sie dies nicht immer: Der (rücksichtslose) Einsatz von CSS und JavaScript kann dazu führen das vorher zugänglicher Inhalt im Nachhinein vollkommen unzugänglich ist.
Nehmen wir zum Beispiel ein Drop-Down Menü dessen Inhalt mit “display: none” versteckt wurde. Mit wenigen Ausnahmen werden Screenreader nur die Teile der Webseite vorlesen die auch sichtbar sind. So wird das Menü nicht nur visuell versteckt, sonder auch akustisch.

Die Idee dass das Web zugänglich geboren wurde geht ein hand mit dem Konzept des Progressive Enhancement, das uns lehrt zuerst mit funktionierendem, bedeutungsvollen HTML zu beginnen und dann “unauffällig” die User Experience mit dem Präsentationslayer (CSS) und dem Funktionslayer (JS) zu bereichern.
Aus großer Kraft folgt große Verantwortung, immer dann wenn wir uns ins Abenteuer des nicht-standard-browser rendern von HTML begeben sind wir dafür verantwortlich dass die Inhalte weiterhin zugänglich bleiben.
Ein gutes Beispiel dafür sind die neuen tollen Formular Input types wie “number, color oder search”. Wir können diese Features sicher nutzen um in Browsern die diese Typen schon unterstützen eine bessere Interaktion zu ermöglich aber damit auch weiterhin Browser unterstützen die diese Typen nicht kennen und stattdessen auf ein Standard-Text Element zurückfallen.

Ein weiterer Bestandteil des Designen für Accessbility sind die Beachtung der ARIA-Spezifikationen (W3C’s Accessible Rich Internet Applications) welches ein Set von HTML-Attributen ist um erweiterte Bedeutung den HTML-Elementen zuzuweisen.

Das Designen für Accessibility erfordert vor allem 2 Sachen, zum einen ein bisschen Planung und vor allem die Erkenntnis das es Millionen von Internetnutzern gibt, die zum einen ggf. selbst eingeschränkt sind oder deren Geräte / Software eingeschränkt ist.

Zugänglichkeit für alle!

Code.talks 2014 – Ein Bericht

Nach dem ich bereits letztes Jahr als Besucher bei der Developer Conference war und dort die schöne Atmosphäre und Vielfalt der Vortragsthemen genossen habe bin ich dieses Jahr als Speaker zu dieser Konferenz gereist die zu code.talks umgetauft wurde.

Nach meinem Vortrag auf der PHP Usergroup Düsseldorf im April dieses Jahres (Slides hier: http://de.slideshare.net/ChristophReinartz/was-nicht-passt-wird-responsive-gemacht) und dem tollen Feedback dass ich dort erhalten habe war die Idee geboren einen ähnlichen Vortrag auch bei einer größeren Konferenz einzureichen. Da ein paar Wochen später der Call for papers bei den code.talks eröffnet war, bewarb ich mich dann auch für einen Speakerslot. Erfreut hatte ich bereits einige wenige Wochen später die Bestätigung dass mein Vortrag angenommen wurde.

Ein früher Blick in den Programm-Kalendar zeigte dass man meine Session in Kinossaal 1 gelegt hatte. Ein riesiger Kinossaal mit über 1000 Plätzen und einer Leinwand die breiter als 30m ist. Zudem werden Vorträge in diesem Saal auch gefilmt. Ich war etwas beunruhigt, da neben mir auch eine ganze Menge alter Hasen im Programm waren und ich nicht verstand warum mich als Frischling auf die große Bühne packen wollte. Ich dachte mir das ändern die noch und begann mit meiner Vorbereitung der Präsentation.

Durch einen Hackathon bei meinem Arbeitgeber der trivago GmbH und durch einen sehr guten Arbeitskollegen und Freund bin ich auf die Open Tech School Dortmund aufmerksam geworden und war erfreut das ich von einer der Organisatoren gefragt wurde ob ich nicht meinen Responsive-Vortrag auch ein mal da halten wollte. Eine prima Gelegenheit den Vortrag auch vorher schon mal zu üben. So begab ich mich Mitte September nach Dortmund um zwar von einem kleinen aber netten Publikum eine Vor-Version des Vortrag zu präsentieren.

Ein paar Besserungen, Ergänzungen und Aufbereitungen später habe ich die finale Version dann noch mal meinen liebsten Kollegen wenige Tage vorher noch mal präsentiert und war mir einigermaßen sicher dass das so funktionieren könnte. Die Nervosität stieg.

Neben mir hatte noch ein Arbeitskollege einen Speakerslot (http://www.codetalks.de/session_post/die-10-gebote-composer-edition/) und eine ganze Reihe weiterer (Arbeits-)Kollegen hatten sich ebenfalls eine Karte für diese Konferenz besorgt. So begab es sich das wir am 07.10 mit einem kleinen Trupp von 7 Leuten mit dem HKX (wie es Tradition ist wenn man zu einer Konferenz nach Hamburg fährt) nach Hamburg reisten. Weitere Kollegen reisten mit anderen Zügen und Flugzeugen nach oder waren bereits angekommen.

Nach einer unterhaltsamen Fahrt stiegen wir gegen 21 Uhr in Hamburg aus und waren etwas überrascht aufgrund des massiven Polizeiaufgebots aufgrund von Demonstrationen. Eine kurze Taxifahrt später luden wir unsere Sachen in die Hotels und begaben uns erstmal in Down Under (ein gemütliches australisches Pub) um einen Happen zu essen und ein leckeres Bier zu geniessen. Später fuhren wir noch mit dem Taxi auf die Reeperbahn für einen Absacker in der Drei-Zimmer Wohnung. Ich entschied mich die letzte Bahn zu nehmen um fit den ersten Konferenz Tag zu genießen zu können.

10511222_792126240849279_5862740585699655464_n

Der erste Tag begann mit einer etwas chaotischen T-Shirt Ausgabe. Und mit ausgiebiger Erkundschaftung von Kinosaal 1. Ja, es war dabei geblieben. Ein paar Tage vorher hatte ich den Veranstalter noch mal per Mail angefragt warum ich denn ich in Kinosaal wäre, worauf ich die Antwort erhielt, dass mein Vortrag bei einer Vorabumfrage wohl der zweitbeliebteste gewesen sei. Nun gut.
Der Kinosaal war noch größer als in der Erinnerung. Es war mir etwas mulmig bei dem Gedanken am nächsten Tag dort unten zu stehen. Den weiteren Konferenz-Tag versuchte ich mich größtenteils von diesen Gedanken abzulenken und konzentrierte mich auf die Talks. Besonders interessiert war ich natürlich an dem Frontend-Track und besuchte so u.a. die Vorträge von Matthias Lau und Sven Wolfermann die sich auch beide um das Thema Responsive Design drehten. Da sich zum Teil sich Inhalte als auch Folien mit meinem Vortrag überschnitten verschlimmerte dies mein mulmiges Gefühl kurzzeitig, letztlich zeigte es mir ja aber auch dass ich wohl auch nicht daneben liege mit dem was ich vorbereitet hatte. Kurz vor Ende des ersten Konferenz Tages stellte ich mich mal unten auf die Bühne des Kinosaal 1 und ich war geflasht! Zum Glück konnte ich mir aber gar nicht weitere Sorgen machen, da draußen schon ein Bus wartete der alle Speaker zu einem Dinner bringen würde. Ich stieg also in den Bus.

Altes Mädchen hieß das Restaurant ganz in der Nähe der Sternschanze. Es gab dort ein richtig leckeres Essen (ja auch vegetarisch) und ein leckeres Bier names Zwickl welches ich zur Genüge verköstigte dass er mir als sinnvoll erschien damit ein bisschen meine Nervosität zu unterdrücken. Schon während der Fahrt zum Restaurant als auch während des Dinners ergaben sich einige interessante und lustige Gespräche mit anderen Speakern. Man tauschte sich aus und knüpfte neue Kontakte. Nach dem Dinner fuhren weitere Shuttle-Busse zu After-Konferenz Party im Hühnerposten. Ich entschied mich aber lieber ins Hotel zu gehen, da ich befürchtete sonst am nächsten morgen einen Hangover zu haben, da mein Vortrag bereits um 11 Uhr stattfinden sollte. Aufgrund von reichlich Zwickl schlief ich wunderbar.

Am nächsten Morgen war ich angespannt aber auch erfreut und sehr motiviert meinen Vortrag endlich halten zu können und begab mich früh zur Konferenz. Meine super Kollegen haben wohl meine Nervosität gespürt und sich bestens um mich gekümmert. Um 10 Uhr begann der erste Vortrag. Ich begab mich in Kinosaal 1 und begab mich so langsam in den Tunnel.

1796538_793420867386483_7666181461457046988_n

10.45 Uhr. Ich stand unten auf der riesigen Bühne.  Wohl auch aufgrund der After-Konferenz Party und das einige auch nur am ersten Tag anwesend waren, war der Saal nur mäßig befüllt. Da hatte ich aber gar nichts dagegen. Meine Kollegen motivierten mich noch ein wenig und dann ging es auch schon los, nach einer kurzen Ankündigung durch den Veranstalter konnte ich loslegen. Vom Vortrag selber weiß ich in der Retrospektive eigentlich gar nicht mehr so viel, dafür war ich viel zu angespannt. Ich habe aber zu keiner Zeit den Faden verloren und meine Präsentation nach ca. 38 Minuten beendet. An ein paar Stellen habe ich leider ein paar Dinge unterschlagen die ich erwähnen wollte, aber nun ja, dass war wohl der Anspannung geschuldet.
Nun kamen die Fragen. Ich mag das nicht! Nicht weil ich keine Fragen mag, sondern weil ich nach den Vorträgen erst mal total durch bin. So kam es dann auch, dass ich mich direkt auch bei einer Fragen herumgewindet habe, anstatt einfach zu sagen, dass ich darauf keine konkrete Antwort geben kann. Aber nach 2-3 Fragen war auch die Publikumsfragerunde beendet. Ein paar Leute kamen noch runter und stellten in kleiner Runde noch ein paar Fragen, die dann auch wesentlich angenehmer zu beantworten waren, weil man bis dahin schon die 2-3 Minuten durchschnaufen konnte.

Ich hatte es geschafft! Ich hätte es gerne noch besser gemacht! Aber ich war auch stolz!

Den Rest des Tages konnte ich dann entspannt genießen, erfreute mich noch einiger Vorträge und wir begaben uns nach der Konferenz wieder zurück zum Hamburger Haubtbahnhof um (diesmal im IC) die Heimreise anzutreten. Erschöpft am zufrieden war ich um Mitternacht zu Hause.

Die Slides zum Vortrag gibt es hier: http://de.slideshare.net/ChristophReinartz/rwd-codetalks-40130867