I love the current state of visual design online, don’t get me wrong. There’s so many beautiful apps and services that I’m constantly feeling the pressure to up my own game. Oddly though, in this sea of great design, there’s a strange aspect of conservative conformity. I’ve only started to wrestle with this myself, but this article will detail why I think web design needs a reboot.

There’s no reason for the web to look like the 90s

Most design today is based, at least in part, on context from the 90s. At that time design was constrained by bad browsers, small screens with poor contrast and bad system font typography. The results were frankly fantastic. Since then most of these constraints have changed radically, but design trends still closely resemble their forerunners.

Screen size and layout metaphor

Screen size should have little to no impact on design. In the early days of the internet, screens were terribly expensive and for the first couple of decades they were more or less standardised into a handful of sizes. TV and Cinema did the same thing, it was a great way to ensure affordable cost and mass market.

Today there are _hundreds_of screen sizes being used in large numbers. So many that simply testing a design on the most common screen sizes becomes an exercise in futility. Instead we tend to settle for flagship devices. An iMac Pro and Google Pixel Phone? Then we’re all set. Never mind the other 89 screen sizes that are used in more than a million visits per week…

Designers all over the world try to adapt to this by padding their layouts as if they were cinema screens. Just like Hollywood in the 60s we show the same things in almost the same size and then add white space fill the full width of the screen. Making sure the proper elements align above the “fold” (whatever that is on screens today).

This is nonsense. Screen size actually affects user behavior. The iPad technically _is_just a large iPhone, but people sure don’t use it as such. Windows 10 does work on mobile devices, but no one would use software designed for a 4k monitor on their cellphone.

I believe that the only useful metaphor left over from the early days is scrolling. Scrolling is arguably more useful than ever because it is the _main user input_on the most common type of device used online today — the touch screen phone.

Instead of seeing web pages as a full width scrolling sheets, there are two other metaphors in use that are more useful with todays technology:

Specifically sized cards.

Possibly made famous by the failed Palm OS. Look at any mobile app today and you will see cards everywhere. Usually they are made to be one size, and are then stacked horizontally or vertically depending on the available screen real-estate.

Infinite canvas

Facebooks infinite scroll is probably the most commonly used one. But infinite canvases are everywhere just like Cards. Presentations zoom and pan, web pages scroll, app windows show only part of the document. The use cases go on.

User Interface Inputs

The web is primarily used through graphical user interfaces, and mostly on mobile devices. Based on this premise isn’t it strange that so many designs still use the desktop hunt-and-peck-with-your-mouse style of elements?

Why do we right click links and chose to bookmark or open in a new tab? Why don’t we drag the link to the side of the screen for a new tab, and to the bookmark icon to store it?

Despite huge success on mobile apps, the web still fails to recognise touch as a first class user input. Mouse clicks are already optional on many laptops. Ten years after the touch device started it’s rise to power it is time for us to make the web reflect that.

Grid & Typography

In the last few years typography has turned the web from computer science book into a beautiful print poster. Finally we have access to technology like CSS grid that allows us to recreate any print layout. But why print?

Print design is all based on a set of constraints that have no value on the web. Most typography is created to fit fixed size sheets of paper. Worse still, fonts are set in rows with fixed heights. Do we really always need to scroll?

In stark contrast with layouts, why aren’t we type setting based on screen size instead? Imagine if the font size was set to 80 characters across the screen. Or 200 characters vertically? What sort of grid could that produce?

So where do we go from here?

I don’t really know. The situation is extremely interesting. I’ll keep working on this, and post everything I think of right here. If you’d like to join in the fun, please contact me! Honestly, I’d love your help.

Your next steps

• Try things that are not like classic web and print design.
• Discuss this with me and others on twitter.

---