Menu

Let's serve everyone good-looking content

Published on by Hidde de Vries in thoughts .

In Benjamin’s poll, the second most voted reason to avoid Grid Layout was supporting Internet Explorer users. I think it all depends on how we want to support users. Of any browser. Warning: opinions ahead.

What lack of Grid Layout means

Let’s look at what a browser that does not support Grid Layout actually means.

What it is not

To be very clear, let’s all agree this is not the case:

That would be bad. Luckily, it is not that bad. CSS comes with a cascade, which includes the mechanism that the values of style rules are always set to something. Rules have a default value, which is usually what browsers will apply for you. It can be overridden by a website’s stylesheet, which in turn can also be overridden by user stylesheets. Because of the design of CSS, properties always compute to some value.

What it is

When turning an element on the page into a grid, we apply display: grid to it. At that point, it becomes a grid container and we can apply grid properties to it (and its children). If we set display: grid in an unsupported browser, the element will simply not become a grid container, and it will not get any of the grid properties you set applied. The display property will be whatever it was, usually inline or block, different elements have different defaults.

A little sideline: per spec, if you use floats (or clear), they will be ignored on children of grid containers. This is great for fallbacks.

Without Grid Layout, you still get your content, typography, imagery, colours, shadows, all of that. It will likely be displayed in a linear fashion, so it will be more or less like most mobile views. That is a perfectly ok starting point and it is good-looking content that we can serve to everyone.

Serving users good-looking content

I think our goal, rather than supporting specific browsers or specific CSS properties, should always be this: to serve users good-looking content and usable interfaces that are on-brand. I think good-looking and usable do not depend on how griddy your layout is. On-brand might, though. Some brand design guidelines come with specific grids that content needs to be layed out in. But aren’t we already used to stretching such guidelines, building responsive interfaces that work across viewports? Shouldn’t we let go, because we cannot control a user’s browser?

If for some small proportion of our users, we let go of the specific grid we created with grid layout, that will not hurt them. Likely not without any fallback, but definitely not with a simple fallback based on floats, inline-block or maybe flex and/or feature queries. But keep it simple. As Jeremy Keith wrote:

You could jump through hoops to try to get your grid layout working in IE11, […] but at that point, the amount of effort you’re putting in negates the time-saving benefits of using CSS grid in the first place.

I don’t think we owe it to any users to make it all exactly the same. Therefore we can get away with keeping fallbacks very simple. My hypothesis: users don’t mind, they’ve come for the content.

If users don’t mind, that leaves us with team members, bosses and clients. In my ideal world we should convince each other, and with that I mean visual designers, product owners, brand people, developers, that it is ok for our lay-out not to look the same everywhere. Because serving good-looking content everywhere is more important than same grids everywhere. We already do this across devices of different sizes. For responsive design, we’ve already accepted this inevitability. This whole thing is a communication issue, more than a technical issue.

Save costs and sanity

If we succeed in the communication part, we can spend less time on fallbacks, now and in the future (I’m not saying no time, we want good-looking content). An example: that mixin we created to automatically fallback grid to flex to inline-block might look like a great piece of engineering now, it may later become a piece of hard to comprehend code. Solving the communication issue instead of the technical one, will save time in initial development costs and help prevent technical debt.

Comments & mentions (18)

HJ Chen replied: "Solving the communication issue instead of the technical one, will save time in initial development costs and help prevent technical debt."
Large Heydon Collider replied: Been meaning to mention this, but your site appears to have no max-width, hence very long measure and no margins?
HJ Chen likes this
Nathan de Vries likes this
Ahmad likes this
Anselm Hannemann likes this
Jeremy Keith replied:

A terrific piece by Hidde, about CSS grid, but also about a much bigger question:

I don’t think we owe it to any users to make it all exactly the same. Therefore we can get away with keeping fallbacks very simple. My hypothesis: users don’t mind, they’ve come for the content.

If users don’t mind, that leaves us with team members, bosses and clients. In my ideal world we should convince each other, and with that I mean visual designers, product owners, brand people, developers, that it is ok for our lay-out not to look the same everywhere. Because serving good-looking content everywhere is more important than same grids everywhere.

Adactio Links replied: Let’s serve everyone good-looking content hiddedevries.nl/en/blog/2018-0…
@baldur@toot.cafe replied: “Let’s serve everyone good-looking content” hiddedevries.nl/en/blog/2018-0…
Grrr Tech replied: Loving the message of @hdv in this article on Grid Layout: it touches on why it should be ok for layouts not to look the same *everywhere*.

hiddedevries.nl/en/blog/2018-0…
Grrr Tech replied: Loving the message of @hdv in this article on Grid Layout: it touches on why it should be ok for layouts not to look the same *everywhere*.

hiddedevries.nl/en/blog/2018-0…
Front-End Front replied: Let’s serve everyone good-looking content hiddedevries.nl/en/blog/2018-0…
Claudio Semeraro replied: "I don’t think we owe it to any users to make it all exactly the same. [...] users don't mind."
Let's serve everyone good-looking content - hiddedevries.nl/en/blog/2018-0…
ShitMarcusSays replied: #RT @marcusklaas: @hdv een klasse functies waar je een hoop mee kan berekenen dat in normale SQL extreem moeizaam of traag is
ShitMarcusSays replied: #RT @marcusklaas: @hdv wat ik bijvoorbeeld vaak wil is: geef me binnen elke groep de rij waarvoor een waarde maximaal is. zonder window functions is dat bijna niet te doen
CSS {IRL} replied: This: hiddedevries.nl/en/blog/2018-0…
Unknown replied:

Hidde de Vries posted some excellent thoughts on not bothering with complex CSS fallbacks for older browsers (in this case when using CSS grid):

I don’t think we owe it to any users to make it all exactly the same. Therefore we can get away with keeping fallbacks very simple. My hypothesis: users don’t mind, they’ve come for the content.

Granted, what we mean by “content” is vague. A blog post is different from a list of trainers, which may require a more complex layout than a single column. But what always strikes me about these types of posts (which have been written for years) is that they don’t take the obvious next step and recommend ditching complex layouts altogether.

If users don’t care about a complex layout then why should the people making web pages? Why do we bother creating griddy layouts at all when it means more work and more code?

(Actually, a few designers have argued just this.)

Hidde acknowledges the main reason for implementing grids is to keep on-brand: Some brand design guidelines come with specific grids that content needs to be layed [sic] out in. In other words, it’s not users who demand grids, but marketing departments.

But that’s not a good reason, and something designers should resist. You could argue for making things look fancy for their own sake by referring to the world of advertising. Companies still pay for display adverts and TV spots because they communicate something about the the “brand” beyond its content and price. They don’t want to look cheap, and nor does your website:

… an ad can emit a powerful signal about a brand, regardless of information content. Online ads are cheap and easy to make, but the problem is, they look it.

But this is by the by. Even if we accept the Don Draper logic, a simple layout doesn’t have to look cheap. If your user is happier with plainer then that’s a good business reason for keeping it simple. Online, the interface is the brand, and your testing and feedback should dictate the layout you implement.


Note: That’s not a reason to discard CSS grid

Frontend Daily replied: Let's Serve Everyone Good-Looking Content: hiddedevries.nl/en/blog/2018-0… (Whether or not their browser supports the latest layout model or not.)
Leave a comment
Posted a response to this?

This website uses Webmentions. You can manually notify me if you have posted a response, by entering the URL below.