#MeetTeamBacke: Brandon McNeely

The layout magic behind CSS grids

Websites just keep getting prettier. And as a casual internet surfer, it’s difficult not to believe that the advances in design are something akin to magic. But there’s a lot of work going on behind the scenes to get that website magic working smoothly.

You can thank design and development teams for their wizard-level mastery of code. The master language in the coding universe is CSS (Cascading Style Sheets). CSS determines not only how a website will look, but also the ways in which the site will interact with different users, browsers, and devices. It’s an all-encompassing style guide that transforms site design.

In December 2016, we spoke with Backe Art Director Brandon McNeely about the latest development in CSS, the CSS Grid. Launched in March 2017, CSS Grid was intended to allow for more complex web layouts with a much easier build.

Erica: Can you tell us why CSS Grid is so important to the design community?

Brandon: CSS Grid is very exciting. It’s going to change how we design for the web. It opens it up to all sorts of creative and beautiful layouts we’ve previously only been able to dream about. A complex layout that you’d see in a print magazine spread will now be possible in a browser. You’ll certainly be seeing much fewer websites that look almost identical.

Erica: And how will CSS Grid work differently from previous versions of CSS?

Brandon: With CSS Grid, the site content will be separated from the layout. We can tailor grids, which are individual rectangular cells that breakup the overall page design into individual elements, to the content. We can easily change one without disturbing the other — perfect for responsive design.

It’s the first true layout system for the web. We’ll no longer have to trick browsers into showing viewers what we intended, which is how developers typically work around different browser requirements.

It’ll also be easier and quicker to code since it’s built right. A website can potentially accommodate a different screen size by only adding a few lines of code.

Erica: When can we expect to see CSS Grids transforming the user experience?

Brandon: It should be shipped and quickly implemented across the major browsers in March, and then in the hands of the design community we can see what kind of potential it really has.

Advances like this will give designers and programmers more latitude in how information is presented, while still incorporating standard design principles. Some designers have already begun experimenting with the possibilities available with CSS Grid. The Experimental Layout Lab of Jen Simmons is one such example. On the site, a number of samples demonstrate what can be done with image galleries, typography, column layouts, and more, although viewing the site properly at the moment requires a CSS Grid-compatible browser.

Stay tuned to Backe social, when we unravel the mysteries behind an ad team’s every day work – from design to strategy to social media and more – in our #MeetTeamBacke series.

Backe is a digital marketing and brand communications agency, focused on creating smart, beautiful and strategically-driven work. We build communities, relationships, and meaningful connections.