What Makes a Website Look Dated?

As designers, we always want to create work that is either on the cutting-edge or “classic” and timeless. It is important to have a design that looks great and is conceived deliberately in a current style. Having an outdated style for your website can leave a negative impression with your visitors, reduce your overall traffic, and lower the interest and credibility of your site. Retro or vintage designs are great, but retro/vintage and outdated are two entirely different concepts, and no visitor will interpret an outdated site as a purposeful throwback to an earlier time. You can avoid the dreaded dated look by steering clear of these seven pitfalls.

What makes a Website Look Dated

Having Anything that is Flashing or Blinking

Sites with these effects are going away, but believe it or not, I still come across sites with these antiquated effects every now and then. Don’t place banners on your sites that flash or blink, as they are distracting from the content and a part of a disadvantageous strategy. If someone wants to buy something on your site, they will. Strategic placement is much better than utter annoyance any day. Also, don’t set your headers or anything else to blink or pulsate. They used to use this a lot in the 90′s and now it just looks dated… not that it ever looks spectacular.

What-makes-a-Website-Look-Dated-colors

Generic Colors

Using the default colors for your site is a quick way to make your site look dated. Having your links in the generic blue, and having them underlined is the sign of a less-than-dilligent designer who’s happy with the browser defaults. Most sites now use colors for their links that match the rest of the site. They are usually styled with a hover state using CSS, so visitors know that a section of text is actually a link. Also, when you use a lot of fluorescent colors that don’t go well together, that can make your site look like the dated work of an inattentive designer. Colors that are too bright hurt the eyes, so be sure to use colors like that sparingly, if at all.

What-makes-a-Website-Look-Dated fonts

Generic Typefaces

In recent years, @fontface and Google Web Fonts has made it easy to integrate custom typefaces in your websites. No longer are you stuck with Arial, Helvetica, Verdana and the other “web safe” typefaces. You can integrate beautiful, bold typography within your site to give it a custom look and personality of its own. It’s easy to do, and your sites will look much more up-to-date and professional.

Using Tables for Your Design

The days of using tables and slicing images into a grid are long gone. Now, you can and should construct all of your layout ideas via CSS. Having a couple of PNG files mixed into a CSS layout is okay, but you no longer have to slice up images to make a beautiful website. You can add dimension to your websites with the text shadow and box shadow CSS properties. Also, there are tons of grid CSS layouts and frameworks that you can use to structure your site properly.

Using Images Where You Could Use CSS

Since CSS has become the predominate method for designing sites, this have almost disappeared from web design altogether. One of the most common uses for using images where you could use CSS was for adding custom typography to a site that just wasn’t available at the time. Now, with Google Web Fonts and @fontface integration, you can find almost any style of typeface that will match what you are looking for. Combine this with transitions, CSS gradients and other effects, and the need for a lot of imagery has gone away.

What-makes-a-Website-Look-Dated-css

Not Taking Advantage of CSS at All

Using CSS will make your site much faster than using images. You can achieve so much in the way of style and structure that you never could before. You no longer have to struggle with tables or slicing layouts. When a site doesn’t take advantage of CSS, it’s apparent even to a visitor who doesn’t know their padding from their margin. You just can’t get the same speed, structure, and user-friendliness from a sliced design as you can with CSS. You end up seeing each slice load, and when one gets hung up, then it leaves an ugly hole in your design. Using CSS will cut your load time in a fraction of what it would be with a sliced PNG layout, and it can offer numerous other benefits in the realms of responsiveness, search engine placement, cross-browser compatibility, and more.

Not Using Transparency in Logos & Images That Require It

This is one of the quickest ways to look dated and unprofessional. How many times have you been to a site where the background is a certain color, and the logo looks like it has just been haphazardly pasted on there? Don’t leave a white background behind your logos. Use Photoshop to create a GIF or PNG file with a transparent background. The background of the site will show through and will look much more natural than if you just use a flat JPEG.

Conclusion

Web design is always in a state of progression, and it’s important to stay up-to-date on the latest practices so your website doesn’t look dated. If your website has any of the qualities shown above, you might want to consider redesigning it or at least upgrading it.

What do you think is something that makes a website look dated? Share your thoughts in the comments section below.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Keith Parks

    I agree with most of your points, but in terms of link styling I think you are missing something. If you want your site to be accessible to people with visual disabilities, in particular color blindness, then using color alone to differentiate your links will fail.

    Sometimes you can tell by the context within the page that the words are likely to be links (for instance, your “Related posts”. But your inline links within text would be totally lost.

    If you feel the regular underline is too harsh, you can do a CSS light or dotted underline that is more subtle. But some sort of highlighting beyond color should be used.

  • http://otoraby.com Omid

    Useful!
    TNX

  • Kylke Ralston

    Thanks James.

    Very good imput and an article well worth reading. One additional factor I would suggest (seems obvious, but is often overlooked) and that is managing dated information.

    Text content can oftentimes utilize words such as “new”, “recently”, or even have dated offers that in a time span of several weeks, months, or even years later, will seem outdated and consider the site un-managed (one of my pet peeves). Even supposedly relavent links are oftentimes not updated and instead ignored. I am constantly discovering web sites that reference content that upon further investigation have long since expired– and that never makes for welcoming new visitors. As mentioned earlier, this would seem obvious, but proper “house keeping”, even a little bit at a time, I believe makes for a friendlier visit and helps keep your site from looking dated.

  • Tiffani

    I have to comment on the generic colors section..

    “Having your links in the generic blue, and having them underlined is the sign of a less-​​than-​​dilligent designer who’s happy with the browser defaults. ”

    What about accessibility? I do change the color of the links, however I use underlined links because of accessibility. There are people that can’t see color or the weight of a font. What suggestions to you have to replace an underline?

    Thanks for the article.

  • MsAThinks

    You chose a kids math website. Kids like blinking things. Choose another example to illustrate your point, for example http://www.angelfire.com/super/badwebs/

  • Karen

    Good points. But you said, “Now, with Google Web Fonts and @fontface integration, you can find almost any style of typeface that will match what you are looking for.” I say in response, “Not if you have to make Japanese websites.” (Where is that emoticon that shows me green with envy at those of you that blissfully live life only having to deal with English?)

    Another thing that frustrates me (although perhaps it’s getting better slowly) is that while we’re redesigning our websites to use more CSS, in particular, more background images instead of img tags, some browser developers have not really thought much about users trying to PRINT web content. Yes, they will print things – the paperless society is a myth. After several years, Chrome finally added even the OPTION of printing backgrounds (before that, it was impossible even if you knew what you were doing, and I don’t think there was even a plugin), but unless I’m mistaken, most browsers still come with that option off by default. I understand the idea of saving toner/ink, but many (most?) users have no idea why what they print looks nothing like what’s on the screen. We as designers can try to do clever things with print stylesheets, but if the settings on the browser aren’t cooperating, there is only so much we can do. Browser developers aren’t helping either – they love to implement the newest CSS3+ fancy screen tricks, while ignoring print-based CSS2.1 standards like page-break-inside (which I still don’t know of a browser that fully implements, although Opera comes closest). Sorry for my rant – I’ll shut up now.

  • Syed

    Very well articulated thoughts and facts on this topic.
    Great James

  • http://www.design2code.co.za Nathaniel

    nice post, i actually know designers that could learn from reading this. I can’t seem to share the post though?

  • Dave

    Not really a useful article in 2013. Maybe 2002, no one should be using tables for layout now.

    How about over use of techniques that will look dated in next half decade.

    e.g

    Over use of bootstrap styles (write your own)
    Over use of CSS3 such as shadows, gradients, radius etc
    Overuse of carousels
    Over use of things like masonry (people using it on EVERY site)
    More abuse of jquery/CSS3 trinkets.

  • Peter

    Yes, but frankly I was hoping for something more 2009 than 1999. These design features are *too* out-dated — no web-designer with a grain of salt would even think of touching them.

    Something about choice of backgrounds, certain kinds of layouts, non-generic color schemes, clutter, navigation — pointers like these would have been more helpful….

  • Jerry

    I am not to sure about using transparency for your logo. The logo that I have has a black background itself, if I used transparency background it would look terrible, the black background I think is what makes it stand out and look good. I tried several different backgrounds including transparency but kept with the black.

  • http://www.designyourownblog.com Marianney

    Love these tips. I think a lot of Blogger blogs are guilty of several of these practices!
    I will be sharing this on my FB page, thanks again.

  • David

    Good stuff, but it’s not all centered on a dated “look”.

    You’re actually talking in your article about 3 distinct things:

    1. Dated design – it might have looked good then, but no more (and the more trendy something is the more likely that its shelf-life is short)

    2. Up-to-date coding techniques – while no longer recommended, someone certainly COULD implement a classic design (even a responsive design) with image slicing and tables.

    3. Professional vs. amateur design. Something can look dated but professional or amateurish with up-to-date coding techniques.

  • http://www.observativetiger.com/ ObservativeTiger

    @Marianney; Agreed, and I’m off to update my blog with some css now.
    @James; As a web designer/programmer for close to 20 years now, it was comical to hear some of the old methods we all used to us for keeping viewers viewing (blinky sizzle we called it back then), and workarounds for images. James you couldn’t be more right on the basics of modernizing a site, at least for 2013. Thanks for the post!

  • http://www.windupwebdesign.com Brian

    C’mon now. This is an outdated article about outdated web practices. If someone commits any of these acts they should be driven from the internet with pitchforks and torches.

  • Nick

    great article

  • Chris

    IMHO the article would have more worth if it identified why some designs are “timeless”.
    Hint: it’s all about adhering to design fundamentals.

  • Vincent H

    This article looks dated. Come on, I expect more of you Sitepoint.