Introduction

2018 — present

Implementation Engineer, Accessibility Advocate

In Outbrain I have worked regularly with key publishers from around the globe. These publishers often required unique layouts and styles that went far beyond the standard — off-the-shelf widgets, which Outbrain offers. My work was entirely focused on coding in CSS, first working with float based grids, later moving on to flexbox and finally adopting CSS grid.

Besides design requests from publishers, working off design files (see project 1: a key publisher group in Europe), I also made designs for publishers, adopting widgets into miniking the look and feel of a given publications style (see project 2: a key publisher group in APAC).

Key publishers also required close communication with account managers, publishers and internal development teams. Key publisher projects generally took between 2 to 4 weeks, while work on smaller publishers could be done in up to 2 days on average.

In later years I supported the adoption and quality assurance of new systems and technologies with a focus on operations. This included testing and documenting as well training team members.

My work required knowledge of legal issues (GDPR and not using Google Fonts in Germany as well as the CCPA in the US, etc.), how to implement widgets in different code environments (react, vue, Google's AMP and Wordpress) and allowed me also to increase my knowledge of accessibility best practices.

In addition to my day to day work, I was able to work as an accessibility advocate. In this role I was leading a team of up to 3 Implementation Engineers, conducting trainings, code and design reviews and general accessibility advocacy (see project 3: addressing accessibility concerns in Outbrain).

From 2019 to 2020 I supported Outbrain Japan's marketing manager with design work and photo documentation of one key event.

Projects

In the following I will highlight two of the key publisher widgets I worked on, as well as one example of my accessibility work.

Working on Outbrain’s widgets, we are limited to working with CSS, overwriting existing styles and layouts. This brought some limitations, but allowed me to deepen my knowledge of both the intricacies of flexbox and css grid.

Outbrain’s widgets are rendered in feeds, which typically render one row after another. Therefore widgets are only rendering in one dimension. To use the full potential of CSS grid, heavy customisation was needed.


Project 1: A key publisher group in Europe

For this publisher we had received a layout where we had 2 small recommendations stacked in one row and one larger recommendation matching their space. While this is a very simple layout to realise, the challenge arose from the way our widgets are rendered into a feed: in single rows, as groups of recommendations. It is therefore not possible to natively arrange them 2 dimensionally. Without access to html, this required a purely css based solution.

The first approach was to simply create a 2 dimensional grid inside a row, creating a 2 column and 2 row layout and place each recommendation implicitly. While this worked, it created distorted images, since all images are natively rendered with the same size, but the larger image requires a different aspect ratio, with longer sides.

the complete layout
The requested design in all its glory.
(larger view)

The solution finally was in using the container of our recommendation feeds and make it into a grid container. This enabled me to implicitly arrange different child widgets into the required layout, spanning the larger recommendation into two rows and with differing image aspect ratios.


Project 2: A key publisher group in APAC

This was a redesign project across the publisher groups entities. This example shows a relatively simple design at first glance. What made it challenging, was the requirement to have source titles moved to the bottom of each recommendation, but not fixing the height, as well as having boarders between each row and line.

a detail of the layout
This is a detail view of the design.
(the entire widget in larger view)

In order to archive the requested text order and spacing, a solid understanding of and overwriting how flexbox is natively implemented in Outbrain's widgets was required. The goal was to have a constant look no matter how many elements (up to 3) were present in each recommendation.

Adding the borders made me wish for a native way to add borders within a gird setup (as is possible with a multi column layout). It was finally achieved with a mix of padding and borders, working around the fixed html structure of the widgets and using CSS selectors.


Project 3: Addressing accessibility concerns in Outbrain.

In 2021, Outbrain's product design team sought to renew the Outbrain corporate homepage. I had recently given the team a basic training on what accessibility on web is and how it can effect our users and potential leads.

an icon, showing a person with a broken arm and a person with a walking stick
I designed these icons based on Outbrains custom logos, used in internal accessibility trainings.

In this training my team and I introduce the audience to different kinds of disabilities (permanent as well as temporary), as well as basic concepts like level accessibility as defined in WCAG rule sets.

A standard part of this training is asking the audience why the combination of corporate orange and white should not be used.

These two slides show the issue combining Outbrain's corporate orange and white as text and background
slide asking the question: Why should we never use the the OB brand orange / white color combination for text? slide giving the answer: Because the color contrast is too low. (the contrast ratio is 3.23, but must be at least 4.5 (level AA) to be generally accessible and readable for most users)

This lead the design team to define a slightly darker shade of orange, which in combination with white achieves a contrast ratio of 4.54 and therefore a level of AA.

screenshot of the outbrain homepage in October 2022, showing both the new hue of orange and the old, incessible one
The numbers showing the chosen new orange hue, while the button is still entirely inaccesibile.

In ongoing efforts my team and I have also conducted code and design reviews, which had some positive impact on our internal tools.

The work and trainings has also lead to a broader awareness for accessibility within my team within Outbrain. We were therefore able to better support publisher requests to improve the accessibility of their widgets.

During my time in Outbrain I was enabled to complete two certifications, as well as several related LinkedIn learning courses. All of which were kindly paid by Outbrain.