Blog-Posts about Project Ironman

As announced in my last post i finally wrote my article about Project Ironman for my companies tech-blog. You can find the post here or on Medium.

I received a lot of (nice) feedback mostly via twitter.

 

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!

about:consistency – lessons learned: the hard way

i had the big pleasure to give a lightning talk at the leanUX meetup organized by the guys from sipgate at Düsseldorf.

the most exciting point for me was that one of my favorite speakers, a man called brad frost, also talked at this meetup.

so to let him understand what i am talking about i did this talk in english, which was quite challenging and needed some more practice than doing a talk in my native language.

i was very glad that i received a lot of cool feedback after the talk.

Designing for RTL platforms – A flipped layout

I had the pleasure to write an article for my company’s techblog about our approach of implementing the view / presentation layer for the flipped right-to-left platforms such as www.trivago.co.il or www.trivago.ae

We basically decided to flip the css declaration within preprocessing instead of using a post-processing approach

You can read the complete article on the trivago techblog