How Do You Create a Timeless Web Design?

The thought experiment that CSS Tricks’ Chris Coyier came up with is an interesting one. How do you create a timeless web design for a site that is meant to last forever?

“By the Way, the Website Has to Run Unchanged For 10 Years!”

Have you ever thought about this? I’ll admit it, I haven’t. Chris Coyier asks himself, and us, how a website has to look when the client wants to run them without any changes for at least ten years. Looking at the continuously stabilizing best practices, this question might not be that uncommon in the future. Let’s see which results we can come up with together.

Chris Coyier lists different designer types that can react to the fictional client’s unusual request in very different ways. At one end of the spectrum, there’s the designer that deems any type of layout and design unnecessary and believes that a simple HTML text is fully sufficient. At the other end, there are the designers that would decline the request right away.

Most of us would probably be somewhere in between and think about what’s required to provide a contemporary design, and what can be forgone. When thinking about it in-depth, we can get to completely different ideas.

Deterring Example: the Million Dollar Homepage

A few days ago, I read an interesting article by the Library Innovation Lab, which dealt with the popular million dollar homepage. I’m sure you remember the website where every single pixel was sold to provide the operator with a million dollars in the end.

On 1,000 x 1,000 pixels, at a price point of one dollar per pixel, prospects were able to buy a spot to place their ads. The project made waves in 2005. The operator easily made the planned million dollars in a pretty short amount of time.

Today, 12 years later, the million dollar homepage still exists, although it seems like a relic of the past. Sure, one of the reasons for that is that there was no design guideline. This couldn’t result in anything but a completely random design. Under this aspect, we shouldn’t even judge the project.

The striking thing is something else. It’s the fact that more than half of the 3.000 links on the page can’t be accessed anymore. Almost 600 links lead into the web nirvana, and the others lead to partially suspicious redirects.

Thus, the million dollar homepage’s use is not only reduced for the visitors, but for the former pixel buyers as well.

What does this tell us when it comes to selling a client a website that can be run for at least 10 years without any changes?

Requirements For Sustainable Websites

It’s pretty obvious. We have to avoid links that don’t originate from our client’s link cosmos. And even then, we have to make sure that the client remembers to adjust the internal links whenever he makes changes.

We also have to forgo external resources, as we don’t have an influence on the permanent availability of these elements. As alluring as it may seem, we should avoid integrating external scripts from web repositories or communicated CDN locations. Instead, move required resources to the client’s site, and integrate them locally. However, make sure that the scripts don’t reference external resources. Prepare for a bit of work.

It’s also important to think about which functions might not be available in the future. Luckily, features that count as deprecated, can be identified rather easily.

In this context, using frameworks is not recommendable either. The new hot shit, like React or Vue is sure to be a problem in ten years. Vanilla JavaScript should be safe though.

What to do about fonts? Typography is a pretty important design elements. Coyier points out that it’s older than web design itself, so it shouldn’t be one of the expendable design elements. So, let’s use fonts. But, once again, save and integrate them locally. Instead of the older WOFF format, we can use WOFF2 to integrate a certain sustainability. We’ve already presented WOFF2 here.

The only trend that we can rely on for this project is minimalism. At least, it includes the modest use of animations. I would only use the latter when it comes to micro interactions.

In the future, we can probably still rely on SVG as our graphic technology. This way, we don’t depend on resolutions. Jpg and Png will still run the scene in ten years. WebP wasn’t able to establish itself so far, and it probably won’t do so in the future.

Generally, we do have to admit that we can only create a timeless website when it doesn’t have to provide advanced functionality. I would decline a request for an online shop that has to run unchanged for 10 years. A web business card or another purely representative presence shouldn’t be a problem though, as long as the above-mentioned requirements are met.

What do you think? What has to be provided for the client to be able to receive his 10-year website?

blog