---
title: A fresh look for releases.ubuntu.com
description: Updating the design of the Ubuntu Releases website using Vanilla Framework
url: https://canonical.com/blog/a-fresh-look-for-releases-ubuntu-com?format=md
---
1. [Blog](https://canonical.com/blog)
2. Article
---
[Karl Williams](https://canonical.com/blog/author/deadlight "More about Karl Williams")
13 February 2019
# A fresh look for releases.ubuntu.com
[Design](https://canonical.com/blog/tag/design)
[Development](https://canonical.com/blog/tag/development)
[web](https://canonical.com/blog/tag/web)
---
Share the article
As part of the ongoing project to upgrade all of our websites to use our [Vanilla Framework](https://www.vanillaframework.io), we tackled [releases.ubuntu.com](http://releases.ubuntu.com), a website that lists all Ubuntu releases available for download.
## Our design and build process
### Identify page types
The first step in the design process was identifying how many pages needed to be updated and the general scope of the project.
We conducted a technical investigation, aided by the engineering team who maintain the project, and identified how the site works and to what extent we could modify the codebase.
The releases pages are unusual in that they are not generated by a web framework or served as static HTML files like most of the [websites we maintain](https://github.com/canonical-websites). The ability to reliably download Ubuntu being of utmost importance to our users, these pages are served directly by the Apache web server’s [Directory Listings feature](https://wiki.apache.org/httpd/DirectoryListings#Directory_Listings). The limitation this imposes is that we are only able to configure the [header and footer templates](https://wiki.apache.org/httpd/DirectoryListings#Headers_and_Footers) used by Apache and have little control over the file listing table’s HTML.
These header and footer templates are generated by a script, when a directory of install images are created by a new Ubuntu release. This script contains logic that appends page elements relevant to the specific release. For example, links to specific installation guides.
The project also has no facility to compile Sass during builds, so we were limited to using [the pre-compiled, hosted CSS file](https://assets.ubuntu.com/v1/vanilla-framework-version-1.8.0.min.css). This means that including and extending the default Vanilla behaviour must be achieved in CSS rather than Sass. We wanted to keep this practice to a minimum because overriding the framework features without Sass can lead to more overly-specific CSS rules and adds to maintenance overheads. Keeping local changes to a minimum can allow an upgrade to be as simple as swapping out the URL to the compiled CSS to the latest release.
```
```
Despite no two release pages being exactly the same, they fall into two core categories: the [homepage](http://releases.ubuntu.com/) – which has signposts to the other pages – and individual release listings, e.g. for [Cosmic Cuttlefish](http://releases.ubuntu.com/cosmic/).
### Apply Vanilla Framework
We tackled the homepage first, applying the compiled Vanilla stylesheet to the existing HTML and adding classes for the base components. As a first pass, it greatly improved the appearance of content on the page.
When applying Vanilla to a page, we first find logical ways of organising the content into [strips](https://docs.vanillaframework.io/en/patterns/strip) – the base-level building block of any Vanilla page layout – and then further subdivide the strips into [rows and columns](https://docs.vanillaframework.io/en/patterns/grid) as needed.
With the basic structure defined, we can then style the existing HTML elements with pattern classes. In this case, we applied the [list](https://docs.vanillaframework.io/en/patterns/lists) and [table](https://docs.vanillaframework.io/en/base/table) patterns to the `` and `` elements
Following this process, we were able to reorganise the content into sections, define a structured layout and improve the flow of the page.
Homepage pre- and post-Vanilla:
Release page pre- and post-Vanilla:
### Design iteration and using Vanilla components
The “first-pass” versions of the pages were then used by the design team as a basis to explore visual improvements.
The design team produced design mockups, focusing on::
* Updating the branding
* Applying clearer layouts to differentiate sections
* Introducing colour
* Establishing a typographic hierarchy
Below are some design explorations using existing Vanilla patterns to help bring content to life on example homepage and release pages.
Homepage explorations:
Releases explorations:
The design team reviewed the proposed mockups and selected the best of both the homepage and the releases pages, but we felt we could further improve the design by:
* Exploring using `heading-four` sized links as signposts in the hero section
* Reworking the layout of the list of Ubuntu flavours
* Removing the visually overwhelming [external link](https://docs.vanillaframework.io/en/patterns/links#external-link) pattern
* Applying [the card pattern](https://docs.vanillaframework.io/en/patterns/card) to the highlighted download options, keeping consistent with [ubuntu.com’s download section](https://www.ubuntu.com/download/desktop) and emphasising the links are direct downloads
### Final designs
Taking feedback into consideration we trialled a couple of versions for the [Ubuntu flavours](http://releases.ubuntu.com/) section and then came to a final decision for the redesign of both templates.
### Final build and release
We then updated the [template-generation code](https://bazaar.launchpad.net/~ubuntu-cdimage/ubuntu-cdimage/mainline/view/head:/lib/cdimage/tree.py) to include the patterns required for the latest designs and managed to keep the non-pattern local CSS overrides to [a few lines](https://pastebin.ubuntu.com/p/s7wQSFbXC5/) of code (mostly relating to the file listing table).
The final build was then QA’d in various browsers and the changes to the python script were tested and reviewed to ensure that there were no issues with the new code.
The first page to go live was the listing for [Ubuntu 18.04.1 LTS](http://releases.ubuntu.com/bionic/) and other pages on [releases.ubuntu.com](http://releases.ubuntu.com) will follow soon.
[Get in touch
Interested in running Ubuntu in your organization?](https://ubuntu.com/about/contact-us/form)
## Sign up for our newsletter
Get the latest Canonical news and updates in your inbox.
Work email:
\*I agree to receive information about Canonical's
products and services.
By submitting this form, I confirm that I have read and agree to [Canonical's Privacy Policy](https://canonical.com/legal/dataprivacy).
Sign up
## Share on
---
## Related posts
[### Why web engineering is great](https://canonical.com/blog/why-web-engineering-is-great)
Hi, I’m Johann! I’m an engineering manager in Canonical’s web team. For the larger part of my 15 years of work experience as engineer, I’ve been working in web development....
[Johann Wolf](https://canonical.com/blog/author/johannwolf)
27 April 2026
[### Challenges designers face in open source (and how to fix them)](https://canonical.com/blog/challenges-designers-face-in-open-source-and-how-to-fix-them)
Open source powers up to 90% of modern software, yet many projects lack usability. Canonical’s Design team surveyed 115 cross-functional professionals to uncover the 4 core...
[Kola Ojoodide](https://canonical.com/blog/author/kola-ojoodide)
26 June 2026
[### Web Engineering: Celebrating Our Third Annual Hack Week](https://canonical.com/blog/web-engineering-celebrating-our-third-annual-hack-week)
The Web Engineering team is thrilled to announce the successful conclusion of our third annual Hack Week! Over the past three years, this initiative has become a cornerstone of...
[Anthony Dillon](https://canonical.com/blog/author/ya-bo-ng)
6 November 2025
[### Web Engineering: Hack Week 2024](https://canonical.com/blog/web-engineering-hack-week-2024)
At Canonical, the work of our teams is strongly embedded in the open source principles and philosophy. We believe open source software will become the most prevalent method of...
[Anthony Dillon](https://canonical.com/blog/author/ya-bo-ng)
8 January 2025