The Diff is the joint collaboration of American designer Tatiana Mac and me. We both care a lot about inclusive, ethical, and accessible web — The Diff is our outreach project, with the goal of sharing how the web can be beautiful, fun, and wonderful with those principles as its foundation.

Table of Contents

  1. TL;DR
  2. Background
  3. Discovery
  4. Episodes
  5. Links

TL;DR

  • The web is so powerful, and can and should be wonderful to experience for as many people as possible.
  • Tatiana Mac and I believe that the web doesn’t have to be boring or formulaic to be good and to include everyone.
  • We’re streaming on Twitch, live-coding and talking about cool things on the web.

Background

TMac and I first connected after I started reimagining Swiss-style typographical posters in HTML with CSS Grid on Codepen. I was initially inspired by TMac’s Bauhaus and print brochure pens with CSS grid:

I started doing quick warmup pens inspired by the work of Josef Müller-Brockmann and Jacqueline Casey. The pens featured modern CSS features like grid and variables, and were designed to be fluid (with the sizing and aspect ratio preserved by viewport unit measurements).

See the Pen [CSS Grid] Swiss-Style Typography Poster 06 by Henry Desroches (@xdesro) on CodePen.

I was sharing these on Twitter and it eventually got to TMac that my Pen project had been inspired by hers! She reached out via DM about collaborating, and the idea for The Diff began to grow.

Discovery

We decided on doing a stream on Twitch as the format for the collaboration — we figured this would allow for the best balance of structure and flexibility — we could be conversational like a podcast, but still show our work and process like a blog might enable.

V1 of the format of The Diff (a name which was so perfectly bestowed on us by Robb Owen) would consist of Tatiana and I live-coding a poster or design element in HTML, CSS, and JavaScript (as needed), and talking about why we’re implementing in a specific way.

Episode 1

Our first day out, we decided to take a stab at a Saul Bass poster for West Side Story — the one announcing all the Academy Awards the film won:

West Side Story Academy Awards poster

The poster has pretty involved print layout that we felt would translate super well into a CSS grid context. The challenge would be to implement this markup in a way that the page still flowed meaningfully and accessibly with HTML.

TMac and I would both take a pass in our own time at the design, talk on stream about our version, and extract what specific parts might be valuable to a version that we worked together on. Here’s my take:

See the Pen [CSS Grid] Saul Bass: West Side Story by Henry Desroches (@xdesro) on CodePen.

I used a lot of the same principles from my own CodePen posters collection, with a design that scales with window size (instead of changing layout/sizing as the window size allows). You can also check out Tatiana Mac’s interpretation or our combined effort, which we built together live on the stream in Codepen’s “Collab Mode”.

Highlights from the Stream

  • Going over my implementation, then TMac’s, then working on one together, is a lot of looking at the same screen over and over. For future streams, we’ll only build an implementation together.
  • Adaptivity vs. responsivity is an important consideraiton to make. For our combined version, we elected for a standard @media min-width: $breakpoint style of responsiveness that allows us to build from the smallest screens up.
  • Even two hours of streaming is a ton of streaming. I’ve done a bunch of streaming over on my Twitch channel, but it’s important to remember to hydrate and take breaks.

Links

We’re still iterating on the format and frequency of The Diff. Check in with us on the web for updates: