A lot of website owners’ dreams just came true. Now the definitive guide on how to design websites to look as abhorrent as you can imagine. A guide telling you that it’s OK to use gifs and memes; it’s A-OK to use large blocks of gaudy colours like fuchsia and cyan and it’s SPOT-ON to embed heaps of unnecessary widgets because you can because you’re a HTML coding wizz.

 

worlds-worst-website

Your website could look as bad as this! (For exemplar websites – the worst websites we could find – click the images throughout this article)

Or, for those finicky types who value things like subtlety, readability and style, you may read this guide in an opposite way, as ‘How not to design a terrible website’. Why you would want anyone to visit your website is beyond us – it’s yours and you can make it look however you want. So with that established, we can proceed –

 

Table of Contents

 

(The logo at the top) Banners are often the first thing that catches your visitor’s eye. So to get them hammering the close button before the page even finishes loading:

  • Make it way too large
  • Use a silly font that adds a touch of dubiety to your content. We recommend: Comic Sans, Papyrus or something you made in WordArt. You never want to come across as too serious about whatever your website is about e.g. your business.
  • Don’t hyperlink it back to the site’s landing page. This is too convenient.

 

  • Thin, laggy, buggy, fiddly, deeply-nested dropdowns are the way to go.
  • Or menus that are so large that they fill the screen when you mouse over them accidentally and it’s hard to make them go away.

 

Background

pennyjuice

You want your background to be:

  • Too lurid, so as to distract from the text or make it hard to read.
  • A colour that conflicts with the colour of the text. A bright colour on bright colour, similar colours, a black background, etc.
  • A tiled image that wasn’t designed to be tiled, so you get this nice effect of having the same image hundreds of times all over your page. Not a pattern which is supposed to be tiled so it looks like one consistent background.
  • A blank background. Not a shade of white, you didn’t set a background. It looks finished, ok, done.

 

Text

  • Emphasise as much as possible with all caps, underline, highlight, large point sizes and exclamation marks!!! No one will be able to hear what they are reading unless you scream it into their face. And relativity is no such thing, so more emphasis on one thing doesn’t detract from anything else on the page.
  • Use: emoticons – text and image-based, text speak (so it sounds like it was written by a teenage girl lol), spelling mistakes and obscure unicode symbols that won’t show up on other people’s browsers.

 

Images

lingscars

  • Full size always. Even if they break the formatting, make the viewer scroll horizontally to see them. Good job. Never use ‘height’ or ‘width’ attributes in HTML tags, it’s just a hassle.
  • Formatted irregularly.
  • Clicking on them does nothing or opens the image in the current tab, not in a new one.
  • Memes, gifs and other stuff that distracts from the content rather than ads to it should be used liberally.
  • Don’t worry about image licensing. Just steal images from other people’s website, they’ll never know. Don’t bother getting them the legal way by doing: ‘Google Image search’ → ‘Search tools’ → ‘Usage rights’ → ‘Labelled for reuse’.

 

Multimedia

  • Plays automatically at full volume. Makes them jump out of their seat and then fumble to close the website as fast as they can so it doesn’t eat all their data.
  • Sound bites – always a hit – repeatedly play a short soothing clip of sound like the sound of a fire breathing dragon.
  • Music. Everyone loves the same music as you and would be delighted if you had a playlist widget on your website that takes a long time to load then plays unexpectedly.
  • Embedded Flash and Java. These play perfectly on all devices. You can’t go wrong.

 

libertyvan

  • Link to websites that have nothing to do with the content. E.g. a list of ‘Cool sites’. Wow man, cool! Long lists of such links are always useful to have on the sidebar of the page.
  • Links don’t open in a new tab, so when visitors click an external link they leave your site completely. Good riddance.

 

Ads

  • Obnoxious amounts. Relativity doesn’t apply here either, even with pay-per-click. More ads means more money.
  • Ads even on pages promoting your business. At least you have a fall-back source of revenue yeah?
  • Pop-ups and ones that catch the mouse and go all over the page wreaking havoc.
  • Under dropdown menus and other places in which a visitor can accidentally click them. This is fantastic for SEO as well, not.

 

Formatting

arngren

  • Never update your formatting to the latest styles. The 90s was the pinnacle of good web design which died with Geocities. Like wacky javascript cursors, where did they go?
  • Never upgrade to HTML5. You want to be able to keep using marquees, frames, HTML formatting tags, table layouts and other simple ways to make a bad website.
  • Frames are really useful. You can put any amount of stuff in them, even a whole webpage. And viewers never get peeved when they’re scrolling down the page and get caught in a frame so they come to a jarring halt. That’s if they’re using a browser that handles frames at all…
  • Fixed width layouts rock! They’re easy to make. No relative width-length mumbo jumbo. And they’re a pleasure to use on mobile phones and on small screens where the viewer has to scroll horizontally which is always fun.
  • Fill the whole thing up with content. Make the text stretch from side-to-side to fill in all the gaps and also create a pleasant reading experience.
  • Embed lots of widgets. The time they take to load is definetly worth it for the visitor who wants to see how many people have visited the page, where around the world other visitors are coming from, etc.
  • Don’t bother testing it on other browsers, computers, operating systems or devices (definetly not mobile). The web is famous for displaying the same everywhere (not).
  • A note that reads: ‘This site is under construction’. Bad websites – aren’t they all.
  • HTML looks great without formatting. White background, wall-to-wall text, Times New Roman font. The defaults were definetly meant to be used straight-out-of-the-box and not as a basis on which to build other stylings.

 

Source Code

This is a whole other can of worms. But the main things are:

  • Don’t use CSS. You can make your website look bad enough with HTML4’s formatting tags. <u>Wicked!</u>
  • Don’t seperate presentation from content. That’s not an extremely useful thing to do. Use inline CSS to style everything individually and painstakingly. Don’t define styles in a seperate CSS stylesheet that you can then reuse as many times as you want. Otherwise, everything will start looking the same, and you want each page and paragraph to look different from the next.

 

 

After all that you should be an expert in terrible web design. Maybe you already were but you just didn’t know it. Maybe you realised it was time to make a few changes to your website. It’s very easy to make a website horrible, because many design habits and a lot of HTML itself originated 20 years ago when devices and browsers were a lot different, so workarounds had to be used. But now we have the possibility of creating really nice websites. If you don’t follow the points in this guide, you might just find yourself with one.

 

Don’t read the following web design articles

If you want to read an article on ‘How not not to design your website’, then by all means. By why in the world would you want to read a whole article oppositely? That’s just irritating.

Leave a comment