Design trends: Content blocks and grid layouts

We conclude our exploration of website design trends with a look at grid layout designs. Over the past few years, website design has conceptually evolved from a linear design — designing a web page like a word processing document, top to bottom — to a “content block” design. The content block concept views web pages as a grid, with multiple columns and components assembled together to form a web page like pieces of a puzzle.

This diagram demonstrates how grid content blocks on a desktop website translate to mobile.

This diagram demonstrates how grid content blocks on a desktop website translate to mobile.

Mobile compatibility for grid layouts

A page layout with multiple columns is uniquely designed for desktop browsers. With the much narrower size of a mobile phone or tablet compared to a computer monitor, you might wonder how a grid layout translates to mobile. Will it simply shrink to the point that it’s hard to read, like an HTML table? Because each individual block of the grid functions independently and isn’t tied to a column heading like a table, that thankfully doesn’t have to happen. Responsive grid layouts — “responsive” meaning the site responds to the size of the device — reflow as a linear design on a mobile device, ensuring the content is easy to read on devices of all sizes.

Grid layouts with page builders

Because the WordPress editor (as of version 4.9 and previous) is designed to create linear page designs, WordPress page builders have become extremely popular. Some themes, like Divi, have a page builder bundled into the theme. Other page builders can be downloaded separately. SiteOrigin’s page builder, for example, has more than 1 million installs. Beaver Builder and Elementor are also popular options.

Gutenberg, the WordPress content block builder

Because of the popularity of page builder plugins, WordPress itself has developed a new editor, Gutenberg, in an attempt to address the content block trend. We’ve discussed this new editor before, and the WordPress development team continues to refine the editor before it releases publicly as a part of WordPress 5.0. In a nutshell, Gutenberg allows users to select different content types — images, text, etc. — and piece them together to form a post or page. However, as of version 1.7 the Gutenberg editor still works in a linear fashion, and it doesn’t allow content other than image galleries to be displayed in columns. This means that a true grid layout is currently unachievable with the Gutenberg editor.

Furthermore, WordPress developer Matt Mullenweg has alluded to the idea that Gutenberg is designed to phase out third-party page builders, saying, “Theme developers won’t need to bundle tons of plugins or create their own page builders. There’ll be a standard, portable way to create rich layouts for posts and guide people through setup right in the interface, no 20-step tutorials or long videos needed. Every theme will be able to compete with multi-functional premium themes without locking users into a single theme or compromising their experience.” While this sounds nice on the surface, Gutenberg has a lot of catching up to do to compete with other popular WordPress page builders.

It’s important to remember that Gutenberg has been consistently adding features since its initial release and has already compensated for many of its biggest shortcomings. It presently comes with a bold disclaimer, “Meant for development, do not run on real sites.” It’s highly possible that Gutenberg will be ready to compete with popular page builders when WordPress 5.0 is released, but as of now, this isn’t the case.

Examples of grid layout websites

Grid layout websites are becoming increasingly popular across the Internet. Here are some examples:

Pinterest

Pinterest

Perhaps one of the earliest examples of a grid design is the Pinterest site layout. One could argue that Pinterest doesn’t use a true grid as its multiple columns don’t line up down the page, but it’s still a great example of a multi-column responsive layout.

Amazon

Amazon

Amazon makes use of a slight variation on a grid throughout their site — a scrollable grid. On the home page, you can typically find rows of images, each with individual scroll arrows to move left and right. It’s a unique way to pack more content in above the fold.

H&M

H&M

Like many store websites, H&M makes use of a grid to display their products. However, H&M also uses a grid look on their home page. Grid layouts work well for shopping sites as they make visual navigation of products easy. Like H&M’s site above, they’re also good for navigating broader categories or highlighting specific areas of a site.

NFL.com

NFL.com

The National Football League’s website uses a grid at the top of the screen to display scores, and they also use a grid look for other sections of their site, like the “What’s Trending” and “Thursday Night Football” sections seen here. A grid layout works well for news sites as it allows stories to be seen easily side-by-side. It’s also a good look for a website’s blog section for the same reason. Similarly, our WordPress tips page uses a grid layout similar to Pinterest.

Sketchers

Sketchers

Similar to the H&M site, Sketchers uses a clean grid layout with simple, square images for navigation on their home page. They’re able to use the grid layout to highlight major categories — men, women, etc. — and also special areas of their site they wish to feature.

Imagine Dragons

Imagine Dragons

Imagine Dragons uses several grid sections on their home page, including their merch and discography, below a hero image at the top. Grid layouts work well for making lists visual, be it a list of products to buy or, for a band, a list of albums.

Comments

comments