Clearleft
  • Services
  • Work
  • Thinking
  • Events
  • About
  • Contact

Primary Navigation

  • Services
  • Work
  • Thinking
  • Events
  • About
  • Contact

Front-end development

We design robust and accessible systems with reusable components from buttons to grid systems, which makes integration easy and keeps your designs consistent.
  • Viewpoint

Awareness

Turning accessibility awareness into action with HTML.

Jeremy Keith

Jeremy Keith

  • News

Going Offline is online… for free

I wrote a book about service workers. It’s called Going Offline. It was first published by A Book Apart in 2018. Now, it’s available to read for free online.

Jeremy Keith

Jeremy Keith

A close-up view of a digital screen displaying the word "IMPERIAL" in a thin white line box at the top, followed by bold white text that reads "Scientific imagination for world-changing impact." The background features abstract circular shapes in dark blue and black, with vibrant green and pink elements at the bottom, suggesting a modern, futuristic design.
  • News

Imperial College London website redesign

Clearleft worked with Imperial College London to transform the university’s website, aligning an ambitious new strategy with a bold new brand.

Richard Rutter

Richard Rutter

A close-up view of a digital screen displaying the word "IMPERIAL" in a thin white line box at the top, followed by bold white text that reads "Scientific imagination for world-changing impact." The background features abstract circular shapes in dark blue and black, with vibrant green and pink elements at the bottom, suggesting a modern, futuristic design.
  • Case study

Imperial College London

This is the story of how we worked with Imperial to transform its website, aligning an ambitious new strategy with its bold new brand.
A web page design mockup for an article titled "Building With Fungi." The page features a vibrant illustration of a futuristic, abstract scene involving fungi-based materials. The text discusses the use of mycelium in construction and other industries. The design includes purple accents, a prominent share button, and additional informational boxes.
  • Case study

Ingenia

This is the story of how we helped the Royal Academy of Engineering redesign the website for their magazine, [Ingenia](https://www.ingenia.org.uk/).
  • Viewpoint

Applying the four principles of accessibility

Here’s how I interpret the top-level guidance in the Web Content Accessibility Guidelines.

Jeremy Keith

Jeremy Keith

  • Tiny Lesson

A modern approach to browser support

Recently we realised we didn't have a written browser support policy. We decided to rectify that. We wanted a policy that would focus on outcomes for the user: rather than fixating on specific browsers, we needed to consider capabilities. It turns out there’s an initiative for that.

Richard Rutter

Richard Rutter

A mobile preview of three of the This is Engineering website pages on a pink neon abstract background.
  • Case study

This is Engineering

This is the story of how we worked with the Royal Academy of Engineering to improve their This is Engineering campaign website.
Patterns Day
  • Viewpoint

Making the Patterns Day website

The joy of getting hands-on with HTML and CSS.

Jeremy Keith

Jeremy Keith

  • Viewpoint

Coding prototypes

Write what you need to test a hypothesis. Then throw that code away.

Jeremy Keith

Jeremy Keith

  • Viewpoint

The intersectionality of web performance

Business, sustainability, and inclusivity.

Jeremy Keith

Jeremy Keith

  • Case study

The Baillie Gifford Prize for Non-Fiction

This is the story of how we designed and built a beautiful, maintainable website for discerning readers of non-fiction.
  • Viewpoint

Avoiding groupthink: fine-tuning CSS specifications

Every now and then Clearlefties are asked to help out the CSS Working Group. Invariably it’s also a chance to learn, not just about upcoming CSS, but also new methods of collaboration and group decision making.

Richard Rutter

Richard Rutter

  • Viewpoint

Engineering a better design test

How can we adapt our tools for better testing?

Benjamin Parry

Benjamin Parry

A close-up of the sidebar on a web page.
  • Case study

Malvern Panalytical

This is the story of how we laid the foundations for an ambitious digital transformation by streamlining a fragmented assortment of elements and patterns across a range of digital properties.
  • Viewpoint

Web standards, dictionaries, and design systems

There’s a pattern here.

Jeremy Keith

Jeremy Keith

  • Viewpoint
  • News

The history of design systems at Clearleft

From pattern portfolios to Fractal.

Jeremy Keith

Jeremy Keith

  • Viewpoint

Inside CSS

A privileged peek inside the workings of the CSS Working Group, an essential part of how the World Wide Web continues to be defined.

Richard Rutter

Richard Rutter

  • Tiny Lesson

How to use variable fonts in the real world

Using variable fonts in the real production context is tricky. Learn how we achieved it for the new Ampersand website.

Richard Rutter

Richard Rutter

  • Viewpoint

Making a healthcare app in an age of austerity

The story of how we created a healthcare app, at no cost to the NHS, by using the power of web technologies, some design nous, a little critical thinking, and a good dose of enthusiasm.

Richard Rutter

Richard Rutter

Two people collaborating happily in front of a whiteboard.
  • Case study

Code For America

This is the story of how we used design systems to create digital brand consistency and deliver a detailed front-end style guide.
  • Viewpoint

On Responsive Design

A final year student studying Interactive Design at Nottingham Trent University recently asked us some questions about Responsive Web Design. This is our response.

Richard Rutter

Richard Rutter

A designer is wearing a bold patterned shirt and glasses. He is sitting with a woman with long dark hair. Both are smiling and looking at a screen on a desk. Two more laptop screens can be seen in the foreground while in the background is a blurred out studio office kitchen.

You’re unique

Which is why we prefer to tailor our approach specifically for you. Let’s discuss a collaborative partnership and how we can achieve the best outcomes together.

Richard Rutter
Email Rich about your design challenge

Richard Rutter, Cofounder

  • The team
  • Join us
  • Hire us
  • Podcast
  • Privacy
  • Equal opportunities
  • Sustainability policy
  • 68 Middle Street Brighton BN1 1AL United Kingdom
  • info@clearleft.com

Copyright © 2005-Now Clearleft Ltd. All Rights Reserved.

Sign up to our newsletter

Every two weeks we send out a newsletter. It's a round-up of latest news and handpicked hyperlinks covering design, technology, and culture.