Rebuilding slack.com – Several People Are Coding


91 bookmarks. First posted by andydavies october 2017.


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 
november 2017 by twleung
Rebuilding – Several People Are Coding
from twitter
november 2017 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 
november 2017 by devolute
RT : An insightful read on rebuilding Slack with CSS grid and focus on perf + accessibility.
from twitter
november 2017 by fjordaan
An insightful read on rebuilding Slack with CSS grid and focus on perf + accessibility.
from twitter_favs
november 2017 by adamliptrot
An insightful read on rebuilding Slack with CSS grid and focus on perf + accessibility.
from twitter_favs
november 2017 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 
october 2017 by justinavery
Using CSS Grid etc to increase performance
css  webdesign  webdev 
october 2017 by dogonwhe
A redesign powered by CSS Grid and optimized for performance and accessibility.
fridayfrontend  css  slack  grids  layout  itcss  bem  flexbox  cssgrid 
october 2017 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
october 2017 by improv42
nice look at a healthy front-end project
webdev  inspiration  grid  css3  flexbox 
october 2017 by inrgbwetrust
ITCSS philosophy
october 2017 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
october 2017 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
october 2017 by taonga
Rebuilding — a powered by grid:
from twitter
october 2017 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 
october 2017 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 
october 2017 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 
october 2017 by lucasalvini
Mina Markham рассказывает о технологической составляющей редизайна маркетингового сайта Slack.
UX  coding  case  redesign  issue  CSS  design+systems 
october 2017 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 
october 2017 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 
october 2017 by liquidx
Slack's latest redesign uses CSS Grid as enhancement w/ fallback to Flexbox.

Nice read by
from twitter_favs
october 2017 by ideasatrandom
RT : Le redesign du site expliqué en détail :
from twitter
october 2017 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 
october 2017 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…
october 2017 by bcm
A large part of the redesign was under the hood. Meet :spacesuit: our new UI framework.
from twitter_favs
october 2017 by elliottpayne