Overview

The redesign of The Times and The Sunday Times is all about content. It is about showing the right piece of news in its dedicated amount of space on the screen. The challenge of keeping this sort of strict hierarchy in a responsive layout determined by content can be difficult.

Redesigning and rebuilding a new website for such a large organisation is not an easy task. I don’t mean this in a technical sense. With so many people who care about the product, conflicting opinions and ideas are part of day-to-day. The key here is to not let yourself become emotionally attached to your code. Kill your babies.

Collaboration

To build the UI in the most appropriate way, I wanted to really understand the design. The first thing I did was sit down and go through all the designs with Kyle Wheeler — the lead designer of the project.

We printed and annotated the designs, creating a common language between design and tech. This would help us communicate better and establish consistency through our components.

By working closely with the design team I was able to define the UI structure, especially for the homepage.

Collaborating with visual and UX designers is such an important step! I ❤ collaboration.

UI Structure

The goal was to keep the UI structure as simple as possible. Unfortunately this is not as easy as it seems but I’m confident that we’ve achieved an impressive level of simplicity.

The UI is separated into Components, Modules and Global elements.

Components

Components are very low level, they can be used in a variety of different places and in different context. Ideally, we’d want a component to have very similar rendering wherever it’s used. Components don’t usually have a heavy impact on the layout. For example, a component wouldn’t necessarily be aware of how many grid columns it is spanning.

Examples of Components are:

Buttons

Labels

Headlines

Modules

Modules are more complex than Components. Modules can have a significant impact on layout, they are usually aware of how they sit on the grid and how they need to respond on different breakpoints. Modules are not always reusable, for example, the Global Nav module will only ever be used once.

Examples of modules are:

Sections

Slices & Slice Items

Related links

Key facts

Globals

Global files are where we would set some default rules for certain elements, utility helpers and variables.

Markup

There are two different ways to use a Component:

Good ol’ plain HTML

As our Components are essentially “CSS classes”, you can use it by writing HTML with the right class(es). Component helper

We are using Dust.js as our templating language as it can render our views on the server and client side. Dust.js allows us to create custom helpers, so we took advantage of this to create an uiComponent Helper.

In the following snippets, I share the Dust.js uiComponent Helper

Dust.js custom uiComponent Helper

Here’s is an example of including components as HTML and via the Dust.js Helper:

Having a uiComponent Helper is great because it ensures that every instance of each component will be using the exact same markup. Furthermore it creates a single source of truth for each component and if we need to update the markup, we only need to update one file.

CSS

I wanted to share with you some of the CSS structure we utilised and the approach we took.

Naming convention

For the CSS naming convention we are using SUIT CSS. Here are some examples of SUIT CSS syntax:

ComponentName

ComponentName--modifierName

ComponentName-descendentName is-*

u-*

We have also slightly extended it to support the following classes:

has-*

no-*

js-*

Breakpoints

We tried to keep the number of breakpoints down to a minimum to avoid unnecessary complexity, however, we wanted a flexible solution which would allow us to scale up, or define custom breakpoints if a specific module needed one.

As we decided to use Susy 2 to power our grid system, the way we define the breakpoints is using a mixin called susy-breakpoint, this is built on top of the famous Breakpoint Sass plugin.

Below is a snippet of our breakpoints:

And here is an example of our Susy settings:

We also created some helper mixins to help us use the mixins easily and efficiently. Below is an example of our breakpoint settings:

Grid

The grid is powered by Susy 2, if you haven’t heard of it, I’d highly recommend you go check it out. In the past, I’ve built dozens of grid systems from scratch, but in this case, using Susy has saved tons of time. Susy is extremely flexible, you can literally build any grid you want on top of it, Susy just does the maths!

I created some mixins around the default Susy API though, as I wanted a custom setup to support a fallback for browsers without flexbox support. More on this in a bit.

The grid is pretty straight forward, it’s 6 columns on mobile and 12 columns on larger devices.

Here is a demo usage:

Custom mixin wrapper for Susy’s span mixin

Example of a module defining its position in the grid

Slices and Slice Items

The homepage of The Times is essentially a combination of different Slices. We created about 20 different variations that will display news content in a different way, based on number of stories and importance.

Slices

A slice is simply an element that wraps a Slice Item. Slices are built to be as dumb as possible.

Slice Items

A Slice Item must always live inside a Slice element. Essentially, a Slice Item is where the news content lives. Each Slice Item is extended with a Slice Item Identifier, these identifiers are also used in the designs, you’ll see them labeled below as Nl1, T2, S1a, T1, etc.

Below is an example of how Slices and Slice Items look like in their simplest form.