Rebuilding slack.com

In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a variety of teams, departments, and agencies. We implemented a redesign while overhauling all the under-the-hood code. Our aim was to address a few…

Slack logo
Slack
•
Mina Markham
•10 min read•intermediate•
--
•View Original
ChefCSSHTMLLess

Overview

The article discusses the comprehensive redesign of slack.com, emphasizing the use of CSS Grid for layout, performance enhancements, and accessibility improvements. It highlights the collaborative effort across teams to create a modern, responsive website that supports internationalization and improves user experience.

What You'll Learn

1

How to implement a decoupled codebase for a marketing website

2

Why using CSS Grid improves layout flexibility and responsiveness

3

How to enhance website accessibility for low-vision users

Key Questions Answered

What were the main goals of the slack.com redesign?
The main goals of the redesign included delivering a consistent rebranded experience, improving site architecture, enhancing code modularity, and boosting overall performance and accessibility. This foundational work supports future initiatives like internationalization.
How did the redesign reduce CSS payload?
The redesign utilized a new UI framework called Spacesuit, which allowed for class-based, reusable components. This approach reduced the CSS payload significantly, from 416kB to 132kB, and decreased the number of unique declarations from 1,881 to 799.
What layout techniques were employed in the redesign?
The redesign employed Flexbox and CSS Grid to create responsive layouts. It moved away from a rigid 12-column grid to custom grid objects, allowing for more flexibility in layout design while ensuring compatibility with older browsers.
How does the article address accessibility improvements?
The article highlights several accessibility improvements made during the redesign, such as enhanced color contrast, semantic HTML, keyboard accessibility, and the addition of features like skip links and aria-live regions to improve navigation for screenreader users.

Key Statistics & Figures

CSS payload reduction
70%
The CSS payload was reduced from 416kB to 132kB through the implementation of the Spacesuit framework.
Unique declarations
799 unique declarations
This was a reduction from 1,881 unique declarations in the previous codebase.
Loading time decrease on pricing page
53%
The redesign achieved a 53% decrease in loading time specifically on the pricing page.

Technologies & Tools

Frontend
CSS Grid
Used for creating responsive layouts that adapt to different screen sizes.
Frontend
Flexbox
Utilized alongside CSS Grid to enhance layout flexibility.
Frontend
Less
Used for creating mixins to manage typography settings.

Key Actionable Insights

1
Implement a modular CSS framework to streamline your codebase and improve maintainability.
By using a framework like Spacesuit, you can reduce CSS payload and improve site stability, making it easier for developers to iterate on the code.
2
Utilize CSS Grid for creating responsive layouts that adapt to various screen sizes.
CSS Grid allows for more complex layouts without excessive markup, improving both the design process and user experience.
3
Focus on accessibility from the start of your project to ensure all users can navigate your site effectively.
Incorporating accessibility features early in the design process can save time and resources later, while also enhancing the overall user experience.

Common Pitfalls

1
Failing to consider browser compatibility when implementing CSS Grid can lead to layout issues.
Using feature queries instead of libraries like Modernizr can prevent layout shifts and improve user experience, especially for users on older browsers.

Related Concepts

CSS Grid
Flexbox
Web Accessibility
Responsive Design