What dates a site: outdated and modern

A dated design relies on a technology that has gone, or gets in the reader’s way in any fashion. What dates a page is whatever does not serve the reader.

One page, ten years apart

Open any site, and within a couple of seconds you feel whether it is “fresh” or “old”. That feeling is made of small things, and every small thing has a reason. Learning to see the reasons is useful twice over: so you don’t make something dated yourself, and so you don’t throw out something good by mistaking it for old stuff.

For that you need to tell three things apart.

• Outdated. The trick rested on a technology or a limitation that is gone (a Flash intro, spacers in tables), or it gets in the reader’s way in any fashion (small light gray text).
• Out of style. The trick reads as well as it ever did, but it isn’t done now (for example, rounder or squarer corners than today’s). That is taste, and you can change it or not.
• New but harmful. An effect that appeared recently and gets in the way of reading or makes people wait. It looks fresh and ages fast.

The rule in one line: what dates a page is whatever does not serve the reader. Everything that serves the reader stays in service for decades: plain text, a clear button, an understandable headline.

Check yourself: how is “outdated” different from “out of style”?

Outdated relied on a technology that has gone, or gets in the reader’s way in any fashion. Out of style reads just as well, but isn’t done today.

A game: outdated or modern

Below are eight pairs. In each, the same block is made in two ways. Choose the version that is less dated and serves the reader better, and only then read the explanation. One pair is a trap, where the new turns out worse: see whether you fall for it.

Pair 1 of 8: The first screen of a site. Choose first, then read the explanation.

◄ slide 2 of 5 ►

SALE! NEW! WE ARE THE BEST!

● ○ ○ ○ ○ (turns by itself)

The left is better

Your project

Who it is for

What the visitor does

The right is better

Signs that date a page

Almost all the signs fall into a few groups. This is a handy list for checking any page, yours included.

The first screen.

• A greeting instead of an answer to “what is this and who is it for”.
• A carousel that turns by itself. Usability studies (Nielsen Norman Group among them) have shown more than once that almost nobody clicks through such carousels, and that automatic motion annoys the reader.
• A splash page before the entrance.

Text.

• Small size and light gray color. The WCAG contrast check asks for 4.5 to 1 for ordinary text; there is a lesson on color coming up.
• A line of 150 characters across the whole width or, the other way round, a narrow column in the middle of an empty screen.
• Everything underlined, everything highlighted at once.

Structure and devices.

• A fixed page width. Most visitors today come from a phone, and a page has to adapt to the width of the screen.
• A menu of ten or fifteen items.
• Markup with the styling baked into the tags (font, center): this was done until CSS became reliable.

Pictures and decoration.

• Stock “handshakes” and “smiling employees”. Nielsen Norman Group showed that people look at real photographs of people and of the work, and skip decorative pictures.
• Gloss, shadows under text and other styling “like an object” (skeuomorphism).
• “Under construction” signs, counters and browser badges: these are leftovers from the era when every browser showed a page differently.

Motion.

• Automatic motion that can’t be stopped: WCAG 2.2 requires a way to pause it.
• Animation that ignores the “reduce motion” setting. For people with vestibular disorders, parallax scrolling can be physically nauseating.

Check yourself: why is a “Welcome!” greeting counted among the dated tricks?

It takes the most prominent place and says nothing. A visitor decides whether to stay within seconds, and in those seconds they need an answer: what is this, and who is it for.

Modern things age too

Don’t think “modern” is the finish line. “Glass” effects, running gradients and animations that look fresh today will date a page in a few years just as well as counters do. So a sensible strategy is this:

1. Take principles, not effects. Legibility, hierarchy, clear states, understandable words.
2. Keep the look in one place. When colors, sizes and corner radii are stored as named values (we’ll get to them in the lessons on tokens), you can change the “fashion” in an hour without rewriting pages.
3. Ask: who does this serve? If there is no answer, the trick is decoration, and decorations age first.

Practice

You are given a page from the mid-nineties: a greeting instead of a headline, font and center tags, a menu of twelve items, small gray text, a button with a gloss, a Netscape notice and a rigid 960 pixels. Fix the seven things listed in the task. Write the rules in the styles.css tab, and build the menu from your sections: put their names in place of the ready-made items.

A hint about the menu: you can loop over the items from the brief the way the finished examples do, but it is simpler to type the names by hand and delete the rest. What matters is that the menu holds at least three sections of your project, and no more than six items in all.

What was wrong with 2014

In 2014 many of this lesson’s tricks were still alive: carousels on home pages, stock photos, buttons with a shadow. They were heavily criticized even then, but templates and site builders kept copying them for years. So fashion isn’t the only cause of aging: often a trick survives just because it is in a template.