Written by Suzanne Scacca and originally posted on WPMUDEV’s site. We just borrowed it 🙂
The average adult watches approximately four-and-a-half hours of TV every single day. This includes both live and DVR’ed content. Then there are online streaming services like Amazon Prime, Hulu, and Netflix to think about. Netflix alone clocks about 125 million hours of streaming videoeach day.
Needless to say, when your audience doesn’t have their face in front of your website, they’re spending a good chunk of time in front of other screens in order to consume movie and television content. While I’m not opposed to that (since there’s nothing like binge-watching an entertaining show after a long day of work), what I am opposed to is bad web design captured on film.
Obviously, I say this (mostly) in jest. The Internet has come a long way in the last couple of decades. Think of a movie like The Net, which came out in 1995.
It’s not the director’s or Sandra Bullock’s fault that the Pizza.net website looks dated or that the load time is so atrocious now. The web design and development landscape is continually changing, becoming better and smarter with each passing year. And, thankfully, we now have WordPress that inherently saves most people from making poor choices in web design.
That said, there are still movies and TV shows—even in recent years—with some awesomely terrible examples of bad web design. If you want a little fright this Halloween season, follow me as I take you on a journey through some truly scary websites immortalized on TV and in film that need to be laid to rest.
R.I.P.: 13 Scary Websites from TV and Movies that Need to Be Laid to Rest
Halloween is one of my favorite times of year because it actually becomes acceptable to watch as many scary movies as I normally do. That said, scary movies aren’t the only ones that fall victim to scary websites. TV shows like How I Met Your Mother and The IT Crowd are anything but horrifying (unless you’re terrified by relationships or the corporate lifestyle, of course) and they’ve each featured some pretty terrible examples of web design.
Curious to see what sort of examples of scary websites I’ve uncovered? Let’s dig in.
1. How I Met Your Mother
How I Met Your Mother is not that old of a show and, yet, Barney Stinson’s contribution to this list inspires all sorts of scary web design trends I hope we never see again. Oh, and don’t forget to click through to the resolution choice page. (Why is this even a choice?)
How scary is it? (1-5): 5
Why is it scary?
- Background image set to repeat
- Low-resolution background image
- The “cutout” of Barney placed atop the photo
- Placement and stylization of the “Sponsored by” text and logo
- The hard-to-spot CTA
- The subsequent resolution choice page
- Video resume that’s only available as a downloadable file (and no warning given either!)
2. Parks & Rec
Again, here is another example of a scary website from a TV show that went off the air not too long ago. However, the outdated design on the Parks & Rec City of Pawnee website is likely more a reflection of the quaintness of the city and a lack of WordPress developers living in Pawnee that were available to help (I hope).
How scary is it? (1-5): 3
Why is it scary?
- Not responsive
- Definitely wasn’t built with WordPress so the layout, style, and functionality are really outdated
- Navigation is clunky (i.e. there isn’t any hover)
- Some pages end up with almost duplicate navigations, the second of which (in green) isn’t so obvious
- A broken link to “Get Involved” results in an unsightly popup
3. Breaking Bad
Perhaps the scariest thing about the Breaking Bad “Save Walter White” website is that the design totally misses the mark for the show’s timeline. It’s funny… but it’ll also make you stop to question when exactly the show was supposed to take place when you’re watching it (which I believe is around 2009 to 2011).
How scary is it? (1-5): 5
Why is it scary?
- Everything… everything is bad
- Cheesy background design
- Text sits loosely on top of distracting background
- Poor font choice
- White and yellow font
- Odd spacing between words
- Lines break in the middle of words (leaving random hyphenations everywhere)
- One wrong click and you’ll unintentionally find yourself on another site
4. The Good Wife
In terms of web design, The Good Wife’s ChumHum search engine isn’t all that bad. It’s definitely followed the minimalism that we love about Google. However, there are a number of issues with the way this search engine works.
Like the never-ending scroll:
And the URLs for the search results:
How scary is it? (1-5): 3
Why is it scary?
- Maybe too minimal?
- No autocomplete
- Never-ending scroll makes this search engine too difficult to navigate/use
- When you click on any of the search results, you’re taken to the correct website, but the URL remains stuck at ChumHum
5. Sherlock
As far as personal blogs go, the one for Watson from the TV show Sherlock isn’t horrendous. It’s just not great.
How scary is it? (1-5): 1
Why is it scary?
- Design is clean and simple, but old
- No featured images
- Blog wasn’t updated frequently enough when it was live
- Flash players… blegh
- The About Me and photo sections are too sparse and un-clickable (i.e. unnecessary)
6. The IT Crowd
This actually isn’t an official website from The IT Crowd nor was it featured on the show. However, it’s such a great example of what the Reynholm Industries website probably would’ve looked like that it deserves a spot on this list.
How scary is it? (1-5): 2
Why is it scary?
- Very antiquated design
- The “Home” button
- Blinking red cursor in the copyright footer line
- Inconsistent layout of text and images throughout
- The multi-step helpdesk system
- No basic contact forms available
7. Doctor Who
Although Doctor Who’s fictional website for the U.N.I.T. does resemble the outdated government agency sites you may find around the Internet today, this one just isn’t good.
Why is it scary?
- Inconsistent design between home page and internal pages
- Internal pages all use different colors
- Navigation is not top-aligned
- Typography choice and size are not ideal (too small, too difficult to read, etc.)
- Fonts used are inconsistent
- U.N.I.T. logo doesn’t lead back home
- Embossing of words and buttons throughout site
- Scarce use of imagery; when they are used, typically aren’t optimized or sized appropriately
- Not responsive
- There’s a translation notice at the top of the site despite it not actually being written in French
8. Castle
At first, I totally wanted to hate on the VampireLovers website from Castle. However, upon closer exception, there are really only a few things I take issue with.
How scary is it? (1-5): 1
Why is it scary?
- Left-aligned sidebar
- Photo gallery doesn’t look like it was made with a high-quality plugin
- Gap in navigation menu which throws off the consistency otherwise present
9. Arrested Development
Arrested Development was always known as a show dedicated to attention to detail and their development of fake websites was no exception. In the below clip, you’ll find about a dozen websites, each with their own set of no-nos, from cheesy animations to ill-chosen neon font colors.
How scary is it? (1-5): 5
Why is it scary?
- Because all of them are so bad you can’t help but laugh
10. Fear Dot Com
Anyone else remember Fear Dot Com from the early ‘00s?
Maybe this horror movie fail is best left forgotten.
How scary is it? (1-5): 5
Why is it scary?
- All caps all the time
- No “X” or back button to give users control over the experience
- Poorly-designed (i.e. boring) CTA buttons
- Ugly color palette
- Website will literally drive you insane
11. Jay and Silent Bob Strike Back
You know that when a scene starts with “what the f@#$ is the Internet?” that you’re about to see a totally out-of-date website. This one comes to us courtesy of Jay and Silent Bob Strike Back and the fake movie review site they created called “Movie Poop Shoot”.
How scary is it? (1-5): 4
Why is it scary?
- Home page requires you to click through to actually enter site
- Vulgar graphics and animation (though I guess that’s okay for a movie review site?)
- Left sidebar
- White font on black background
- Too many colors, sizes, and styling of typography
12. Chain Letter
Chain Letter has a 29% rating on Rotten Tomatoes, though I bet it’d get an even lower score if more web developers saw the website from this movie and left a review for it.
How scary is it? (1-5): 3
Why is it scary?
- White font on a dark and distracting background
- Ambiguous and confusing website name (or is it a page name?)
- Boring navigation menu located on the left
- ALL CAPS!
- Cheesy stock photo and crappy personal photos included
13. The Social Network
In the only real website entry on this list, we have The Social Network’s immortalization of the real Facebook… before it was Facebook.
The image above comes from Facemash, what actually now looks like a desktop only, pared-down, and even more shallow version of dating apps like Bumble and Tinder.
And here is what The Facebook looked like at the 1:28 mark:
How scary is it? (1-5): 1
Why is it scary?
- Too simplified of a color palette and design
- Doesn’t make full use of space (i.e. could really benefit from a full-width banner and frame)
- Logo isn’t easily recognizable as it could be any random college student’s face
Wrapping Up
Alright, now that I’m done scaring you away from any potential encounters with movies and TV that feature horrific web designs, let’s focus on the positive. Most of the scary websites we’ve seen here are as a result of design limitations in the past (especially if WordPress wasn’t around), potentially questionable taste, or simply because they wanted to make viewers laugh when they caught a glimpse of the “Easter egg”-like website.
The good news is that many of the web design trends we rely on nowadays should prevent these sort of “scary” throwbacks in the future. As a reminder, these web design best practices will keep your site safe now as well as in the foreseeable future:
- Responsive design
- Minimalism
- Consistency
- A well-planned navigation
- Smart color choices
- Intuitive contact forms
- Well-designed CTAs
- A focus on the tiniest of details (like text)
Clean, simple, and flawlessly designed WordPress sites will (hopefully) always be in fashion.
