Is it just me, or do all websites look the same?

Describe your website homepage. Does it have a large full-screen image at the top with heading text overlaying it? If so, it probably also has a “call to action” button underneath it. Below that, perhaps a single-paragraph description of your business and then three columns of features/services that your company offers.

In fact, there’s a decent chance it looks something like this:

If this is not how your site looks, congratulations on genuinely breaking the mould, hopefully it’s working well for you. But I bet you’ve still seen plenty of sites that do follow this structure. If you’ve ever had the feeling that websites often look pretty similar, you are not imagining it. The fact is, they do.

This raises two questions of course: why is this the case, and does it actually matter? I’ll answer the second question briefly: it doesn’t matter, but it could be improved. To understand the why of it all, read on.

CHANGING TOOLS FOR CHANGING TIMES

You may not be aware of this, but some of this is Twitter’s fault. In 2011, they released something called Bootstrap, a framework whose sole purpose is to make it easy to create front-end designs quickly and consistently by providing a collection of preset layouts, fonts, colours, and other components that make up a typical website or interface, ready to be plugged straight into your project. In practical terms, it means that non-design minded people can put together a website or user interface that looks decent, without much effort or design skill. For designers, it provides a convenient set of starting points that can significantly speed up the design process. Inevitably, it has taken off like wildfire and now forms the design backbone for over seven million websites and counting.

Bootstrap is not, of course, solely to blame. But its popularity echoes a much wider trend in web design towards tools and frameworks to speed up the website creation process, fuelled by an explosion in demand for websites as a consequence of the massive growth in internet consumption over the last 10 years.

The reasons for this growth are intrinsic to the emergence of web design tools and frameworks. In particular, the boom in mobile internet usage that started with the iPhone in 2007 and took off with the arrival of 4G internet in 2010 meant that much of the threefold increase in internet users over the last decade is mobile-based. This is particularly true of developing countries where infrastructure for cable-based internet services has been completely outpaced by 4G, but equally true in the developed world where households have become increasingly multi-device and the internet is consumed on laptops, desktops, mobile phones and tablets.

This shift in device-based consumption completely transformed the web design landscape, and is almost single-handedly responsible for the homogenisation of website designs today. The reason is a practice called responsive web design. Simply put, responsive design means creating a single website design that adapts its layout to whatever device the user is using to view it, replacing the traditional approach of creating a desktop version of a website and a separate mobile version that would be displayed when it detected the user was on a mobile device. With responsive design, you need maintain only a single design and rest in the knowledge that it will look good on any screen size. An ideal solution for a consumer market where new devices were being brought out daily.

The thing is, responsive design is actually quite hard to get right. Creating hundreds of media queries for every component of your website is a time-consuming, fiddly task with so many edge cases that it’s commercially impractical to try and achieve without some kind of framework. This is where Bootstrap and its rivals came into their own, as they have highly robust, easy-to-use grid systems that handle the responsive headaches for you as long as you stick to the grid structure.

Design constraint or creative restraint?

The thing about most responsive grid frameworks is that they offer extremely simplistic grid structures to work with. You tend to have only 12 vertical columns to play with, and must lay your content out in increments of 12 to fill the space:

You are also encouraged to lay out content in neat rows that stack on top of each other, which lends itself well to mobile where a vertically-stacked flow works best. As a result, you will end up with a design that works well on different devices, but will inevitably be rather blocky in structure:

This is essentially a constraint problem: in order to make a design that looks good on both a small mobile screen and a large desktop screen, some basic rules need to be put in place that, if followed, will mean your design is “safe”. These rules underpin the baseline for all responsive design frameworks which mandate that simplicity is the safest approach of all; stick to columns and blocks and your design will just work. Furthermore, because the mobile is the most restrictive in terms of screen space to play with, designers are actively encouraged to take a “mobile first” approach to web design, basically on the principle that if you can nail the mobile design then the rest will come easily.

Another contributing factor is increased internet speeds and bandwidth. Whereas previously websites were constrained to be small in terms of download size — meaning image-heavy sites were rare — nowadays broadband is widespread and bandwidth is plentiful. And so, given a somewhat constrained physical layout format determined by the responsive grid architecture, one of the best ways of expressing creativity is through the use of high quality photography. It’s a technique that magazines (similarly constrained to grid-based layouts, albeit not responsive) have used for years to great effect, and is largely responsible for the trend towards having a full-screen image at the top of the homepage, as well as the trend towards more minimal design that allows photography assets to stand out. The grid is also largely to blame for the proliferation of three-column services and features blocks that seem to pop up on every other website.

All of this is fuelled, of course, by the website template marketplaces (look at the top sellers), website builders and just general human psychological tendency to mimic each other. These factors create the trend which eventually seeps into the customers’ consciousness and in turn increases the demand for such design, a standard economic supply-and-demand cycle. It is at that point that creative restraint becomes an economic necessity, as deviating too far from the mainstream is a risky move in an ever more competitive market for web design services.

To put it another way, web design has simply grown up.

So is it a Good Thing or a Bad Thing?

Your opinion of the standardisation of web design depends enormously on your point of view. Creative designers often hate it of course, as the trend forces them to limit their own creativity when delivering briefs for clients who demand design styles that they are used to seeing on other websites. But at least the tools out there make it easy and quick to deliver — much easier than it used to be. For their clients, particularly small business owners for whom professional-looking web design used to be very much out of reach, the shift towards grid-based frameworks and more standardised design means that it is now much easier to get a professional-looking website for a reasonable price. Sure, it may not be particularly unique in terms of layout but it will project a good image of your company and — more importantly — convert customers. Finally, for website users there is a certain benefit to standardisation in that it becomes easier to navigate websites when you know where everything is supposed to be. The same principle applies to supermarkets where interiors are often very similar simply because it works.

And there is still an enormous amount of creativity in web design, but much of this is limited to specific creative projects or campaigns. The more corporate, standardised designs pay the bills for designers so that they can innovate on cutting-edge projects that eventually push the mainstream forward, but there is a valid concern around templates and frameworks being deployed without much customisation which ultimately harms the website owner and slows the speed of that innovation. So while the advent of tools and frameworks is fundamentally a good thing, their usage must be employed in tandem with the basic disciplines of good design, regardless of the project.

Besides, I think we can all agree that overall things have improved massively in the last 20 years, and for that we are all better off.

Coca Cola website 1996

Coca Cola website 2016

Firedrop is building the world’s most advanced website builder, using artificial intelligence to automatically generate unique designs based around your content.

Originally published at blog.firedrop.ai on June 20, 2016.