It’s here! The new digitalocean.com launched last week, and we’re so excited to share it with you.
We unified the site with our updated branding, but more importantly, we focused on improving the site’s accessibility, organization, and performance. This means that you’ll now have faster load times, less data burden, and a more consistent experience.
This rebuild is a nod to the values at the core of our company: we want to build fast, reliable products that anyone can use. So how did we make our site twice as fast and WCAG AA compliant? Read on:
Accessibility
One of the biggest concerns we had for our website redesign was making it accessible for users with low vision, people who use screen readers, and users who navigate via keyboard. Our primary focus was to be WCAG 2.0 AA compliant in terms of color contrast and to use accurately semantic HTML. This alone took care of most of the accessibility concerns we faced.
We also made sure to include text with any descriptive icons and images. Where we couldn’t use native HTML or SVG elements, we used ARIA roles and attributes, especially focusing on our forms and interactive elements. The design team did explorations based on the various ways people may perceive color and put our components through a variety of tests to make sure these were also accounted for.
We keep track of our progress on an internally-hosted application called pa11y, and when we uploaded our new site to the staging server initially, seeing the drop in errors and warnings made all of the audits worth it:
A Unified System
The old digitalocean.com CSS had thousands of rules, declarations, and unique colors. The un-gzipped file size came out to a whopping 306 kB.
For the redesign, we implemented a new design system called Float based on reusable components and utility classes to simplify and streamline our styles. With the Float framework, which we hope to open source soon, we were able to get the CSS file size down to almost a quarter of its original size: **only 80kB!**
We also dramatically reduced the complexity of our CSS and unified our design. We now have:
- 978 rules, down from 3200+
- 26 unique colors, down from over 100
- 5 unique background colors, down from 59
- 7 media queries, down from 61
This framework allowed us to have a reference to existing code contained in a map that we referenced instead of creating new variable units. This is how we got reduced the size of our media queries by 89%. We also used utility classes (such as `u-mb–large`, which translates to “utility, margin-bottom, large”) to unify our margin and padding sizes, which reduced the number of unique spacing resets previously sent down to users by 75%.
Not only is the CSS more unified throughout the site, both visually and variably, it is also much more performant as a result, saving users both time and data.
Front-end Performance
The largest pain point in terms of load time on the web in general is easily media assets. According to the HTTP archive, as of July 15 of 2016, the average web page is 2409 kB. Images make up about 63% of this, at an average of 1549 kB. On the new digitalocean.com, we’ve kept this in mind, and had a higher goal for our site assets: less than 1000 kB with a very fast first load time.
We use SVG images for most of our media and icons throughout the site, which are generally much smaller than `.jpg` or `.png` formats due to their nature; SVGs are instructions for painting images rather than raster full images themselves. This also means that the images can scale and shrink with no loss of quality in their designs across various devices.
We’ve also built an icon sprite system using `<symbol>` and `<use>` to access these icons. This way, they can be shared in a single resource download for the user throughout the site. Like our scripts, we minify these sprites to eliminate additional white space, as well as minify all of our media assets automatically through our `gulp`-based build process.
There was one asset, however, that rang in at 600 kB on the old digitalocean.com: the animated gif on the homepage. Gifs are huge file formats, but can be very convenient. To minify this asset as much as possible, we manually edited it in Photoshop to reduce the color range to necessary colors and manipulated the frame count by hand. This saved 200 kB from the already-automatically-optimized gif alone without reducing its physical size, getting our site down to that goal of less than 1000 kB.
Conclusion
There is always more work to be done in terms of improved performance and better accessibility, but we’re proud of the improvements we’ve made so far and we’d love to hear what you think of the new digitalocean.com!
