CSS Grid is finally starting to live up to its potential in web design

Sometimes revolutions happen so gradually you don’t see them coming. They’re not televised; they’re not live streamed. But there is one quietly unfolding in the world of web design that could alter the way the whole web looks. A technology called CSS Grid is nearly three years old, but only now is starting to reveal its promise. When it comes to layout design, much of the web has been stuck in a creative rut. Companies, brands and publishers, including Apple, McDonald’s, T-Mobile, Nike and yes, even Ad Age, feature websites with a design that’s become all too familiar: Two rectangular bars—one at the top, known as the “header,” featuring the brand’s name—and footer at the bottom that features links to different areas of a site such as “contact us” or “job opportunities.” Meanwhile, the content, or the meat of this sandwich, is in the middle and it’s sometimes accompanied by a right or left rail with links to a site’s most popular products or stories. There’s a reason why so many websites look like this, and it’s ingrained deep within the internet’s paleolithic strata. Back in 1996, cascading style sheets, known simply as “CSS,” debuted. CSS is a tool set for web designers to put their own creative spin on any given website. The simplest way to understand CSS is to think about a house: HTML is the foundation of a home, while CSS is the home’s design style—think Craftsman, bungalow, colonial or Victorian. The issue with CSS, however, is that as the web continued to evolve, the way it looked did not. “Web designers were forced to design with tools [that were equivalent] to Microsoft Word,” says Johna Paolino, a senior product designer at The New York Times. “Imagine trying to create a rich website and move images around in the same way that Microsoft Word limits you—things always snap in a weird place, or group on top of each other in a weird way.” Grid is supposed to change this In 2017, the release of CSS Grid was supported by several leading browsers—Firefox, Safari and Chrome. It was created to empower designers to make the impossible possible, and allow them to do so with ease. During the internet’s early years there was only one screen, and it was the personal computer. But then laptops came out, followed by smartphones, virtual assistants with displays, smart TVs and so-called infotainment systems. Some of these devices only live in portrait or landscape mode, while others can adapt to both. Making sure content rendered correctly became tedious and time-consuming. “When designers started designing for tiny screens and big screens, the only layout you could do was with a hack, so a lot of people reached for templates to make it easy to do the technical stuff,” says Jen Simmons, a designer and developer at Mozilla and a member of the CSS Working Group, a standards body for developing what the future generation of content should look like. “Pretty much every website has been using these weird hacks for the last couple of decades, and that has been a real struggle for designers. People at ad agencies will have all these great, creative ideas, but they couldn’t develop them” because the tools to do so didn’t exist. “With CSS Grid, you don’t have to use a kit, or template,” Simmons adds. “You have the freedom and ability to not be stuck in a formula, but make something that makes your brand stand out.” Beyond having the ability to be more creative, Grid makes content load significantly more quickly, says Simmons, who adds that Grid is able to achieve this because it doesn’t use JavaScript. The technology was met with no shortage of fanfare in the trade press: The site A List Apart (“For people who make websites”) called it a “milestone for a number of reasons.” The New York Times crowed, “This technology removes a lot of the limitations that existed in CSS to date.” Great. Problem solved, right? Not so fast. Despite offering better, quicker and less technical tools than its predecessor, Grid’s adoption has remained low simply because it’s such a radical change. “Developers need time to learn new code,” Simmons says. “Designers need time to realize what’s newly possible. Projects need time to refactor, to pay off technical debt. Massive changes take time.” There are no statistics on how many websites use Grid. Simmons, who has a popular YouTube channel and blog that showcases creative examples of Grid in action, was hard-pressed to think of brands that have adopted the format. Stink Studios, which designed the website for anti-commercial gay pride event Stonewall, avoided using the new technology; the agency was told the site had to be accessible to everyone, everywhere, regardless of what browser they use. “We didn’t use CSS Grid because of compatibility issues,” says Arnaud Tanielian, technical director at Stink Studios. “The website needed to be available for Microsoft Internet Explorer,” and it doesn’t currently support Grid. Tanielian adds that the agency had preexisting templates drawn up within other layout formats that don’t face the same compatibility hurdles as Grid. Still, he believes it’s only a matter of time before browsers like Microsoft Internet Explorer catch up and support Grid, allowing Stink Studios “to use Grid more in the future.” The New York Times, meanwhile, has been tinkering with Grid since its release. Natalya Shelburne, a software engineer at the publication who works closely with Paolino, believes it’s only a matter of time until Grid becomes the de facto standard for website development. But getting there won’t be as easy as flipping a switch. “One of the best places to use Grid is as an internal tool, where risk is low, or a new product, where the risk is low,” Shelburne says. “The home page is a much higher risk—you can’t go from zero to 100 mph on The New York Times’ home page.”

CSS Grid is finally starting to live up to its potential in web design

Featured Stories