Rebuilding slack.com – Several People Are Coding


87 bookmarks. First posted by andydavies 8 weeks ago.


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…
cssgrid 
17 days ago by twleung
Rebuilding – Several People Are Coding
from twitter
21 days ago by alvar
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…
css  casestudy 
5 weeks ago by devolute
RT : An insightful read on rebuilding Slack with CSS grid and focus on perf + accessibility.
from twitter
5 weeks ago by fjordaan
An insightful read on rebuilding Slack with CSS grid and focus on perf + accessibility.
from twitter_favs
5 weeks ago by adamliptrot
An insightful read on rebuilding Slack with CSS grid and focus on perf + accessibility.
from twitter_favs
5 weeks ago by paulo72
I'm pretty sure you've heard of this communication tool call Slack, right? Well, it's kinda popular. Check out how they rebuilt it and managed to shave 53% off their pricing page load time!
article  newslettered  newsed  281 
6 weeks ago by justinavery
Using CSS Grid etc to increase performance
css  webdesign  webdev 
6 weeks ago by dogonwhe
A redesign powered by CSS Grid and optimized for performance and accessibility.
fridayfrontend  css  slack  grids  layout  itcss  bem  flexbox  cssgrid 
7 weeks ago by spaceninja
A redesign powered by CSS Grid and optimized for performance and accessibility. Illustrations by Alice Lee . In August, we released a major redesign of…
from instapaper
7 weeks ago by improv42
nice look at a healthy front-end project
webdev  inspiration  grid  css3  flexbox 
7 weeks ago by inrgbwetrust
ITCSS philosophy
7 weeks ago by jedlin
Rebuilding slack.com A redesign powered by CSS Grid and optimized for performance and accessibility. Illustrations by Alice Lee . In August, we released a major…
from instapaper
7 weeks ago by elivz
A redesign powered by CSS Grid and optimized for performance and accessibility. Illustrations by Alice Lee . In August, we released a major redesign of…
from instapaper
7 weeks ago by taonga
Rebuilding — a powered by grid:
from twitter
7 weeks ago by tomstardust
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…
CSS  Grids  Development  FrontEnd  Slack 
8 weeks ago by gregg
We use some features of Grid that aren’t currently fully supported in all browsers, the most notable being percentage-based grid-gap. Although support for this has been implemented in some versions of Safari, we still needed to anticipate its absence. In practice, a Grid object is styled as follows:
@supports (display: grid) and (grid-template-columns: repeat(3, 1fr)) and (grid-row-gap: 1%) and (grid-gap: 1%) and (grid-column-gap: 1%) {
.c-photo-collage {
display: grid;
grid-gap: 1.5rem 2.4390244%;
}
.c-photo-collage > :nth-child(1) {
grid-column: 1 / span 3;
grid-row: 1;
}
.c-photo-collage > :nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.c-photo-collage > :nth-child(3) {
grid-column: 4;
grid-row: 1;
align-self: flex-end;
}
.c-photo-collage > :nth-child(4) {
grid-column: 3 / span 2;
grid-row: 2 / span 2;
}
};
Any browser that doesn’t meet the query requirements will use our flexbox fallbacks instead.
@supports not ((display: grid) and (grid-column-gap: 1%)) {
/* fabulously written CSS goes here */
}


---

Inclusive, from the start
Another major goal was to ensure that low-vision, screenreader and keyboard-only users could navigate the site with ease. While starting from a clean codebase, we were able to make many impactful improvements to color contrast, semantic HTML and keyboard accessibility with little additional effort. Additionally, we were able to work in some new features for a more accessible experience. We added a skip link before the navigation so that users could bypass the menu if desired. For a better screenreader experience, we added an aria-live region and helper functions to announce form errors and route changes. In addition, interactions are keyboard accessible with noticeable focus states. We also strived to use clear, descriptive alt text.
Looking Forward
There are always more wins to be had for better performance, maintainability and accessibility. We are refining our site telemetry to better understand where the bottlenecks lie and where we can make the most impact. We’re proud of the progress we have made; progress that will surely serve us well as we look to create a more pleasant experience for our customers around the world.
css  webdesign  webdev  grid  slack 
8 weeks ago by sherbondy
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…
css  grid  @supports 
8 weeks ago by lucasalvini
“Rebuilding ” by
from twitter
8 weeks ago by codepo8
Mina Markham рассказывает о технологической составляющей редизайна маркетингового сайта Slack.
UX  coding  case  redesign  issue  CSS  design+systems 
8 weeks ago by jvetrau
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…
slack  web  css  grid  flexbox  webdesign  design 
8 weeks ago by beery
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…
css  grid  flexbox 
8 weeks ago by liquidx
Slack's latest redesign uses CSS Grid as enhancement w/ fallback to Flexbox.

Nice read by
from twitter_favs
8 weeks ago by ideasatrandom
RT : Le redesign du site expliqué en détail :
from twitter
8 weeks ago by frato
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.
css  slack  webdesign 
8 weeks ago by siggiarni
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…
8 weeks ago by bcm
A large part of the redesign was under the hood. Meet :spacesuit: our new UI framework.
from twitter_favs
8 weeks ago by elliottpayne
A redesign powered by CSS Grid and optimized for performance and accessibility. Illustrations by Alice Lee . In August, we released a major redesign of…
from instapaper
8 weeks ago by anglepoised
A redesign powered by CSS Grid and optimized for performance and accessibility. Illustrations by Alice Lee . In August, we released a major redesign of…
from instapaper
8 weeks ago by kohlmannj
. on how Slack optimized CSS (grid, type…) while rebranding
from twitter_favs
8 weeks ago by jitendravyas