The internet is packed full of websites. Many of them are great! A lot of them are good. Some of them are functional but mediocre. And a lot of them are downright bad.
Let’s investigate the most common elements that make a website bad and why you want to avoid them.
For those of you who are old enough to remember the early days of the internet, what does this site remind you of? Something Geocities-adjacent, right? This is a legitimate business and a legitimate website! But today, it looks like a completely untrustworthy spam site or a parody of old web design because it was initially created in 1997 and – according to the Wayback Machine – hasn’t changed significantly since.
Anything that doesn’t change in 25+ years is going to be dated and fall behind the times, and websites are among the most rapidly-changing elements of our modern culture. Web standards evolve rapidly, and this site is as far behind the times as it’s possible to get. Where do you even start?
"See How My Team at White Peak Can Drive Tons of Traffic to Your Site"
~ Tim Woda - White Peak, CEO
- SEO - unlock massive amounts of traffic from Google.
- Lead Generation - we create phenomenal campaigns that will fill your funnel.
- Google & Social Advertising - cost-effective paid strategies with an exceptional Return-On-Ad-Spend.
Just at first glance:
- The images are low-resolution and artifact-covered from compression and poor transparency.
- The background is busy and disruptive without adding anything.
- The aesthetics are dated.
- Product images are inconsistent.
If there’s one good thing you can say about it, it’s that the site is very fast loading because it was designed to load over dial-up connections and hasn’t added to the load since. It doesn’t have any scripts or ads, either. You absolutely wouldn’t trust it with an online ordering form – it’s not even using SSL security – but they don’t have an online ordering system, just a phone number to call, a fax to send, or an email address to message.
This one almost feels bad to include on this list, like it’s punching down at someone who doesn’t deserve it. But this is their business website, so it will be judged as a business website. This is a clown performer’s website with packages and booking information.
Apart from the very busy design, with clashing colors and poor contrast, you have:
- No navigation at the top; instead, it’s an ad for a free web host.
- The bulk of the page is taken up by an image that is a clickable link to… the image.
- Very little content (so it has almost nothing in terms of SEO.)
It loads quickly, but that’s about it. Now, this clearly isn’t a professionally-made business site for an entrepreneur, it’s a quick project made by a small-time hobbyist as a glorified business card, and that’s fine. It’s just a good example of a lot of common web design practices not being followed.
You might expect Warren Buffett’s massively profitable holding company to have an impressive website, and you’d be right, in the wrong sort of way. The website is impressive, alright; impressive in that it has somehow withstood the test of time as an artifact of uselessness.
On the plus side, it has links to useful information like their SEC filings, Buffett’s letters to his shareholders, and various corporate statements.
On the other hand, it looks like something someone slapped together in an evening using basic HTML, not the kind of website a massive company would operate. If you saw this, you might think it was a lame attempt at a phishing site, except it doesn’t request user information anywhere. It just doesn’t look or feel real and official. Plus, what’s up with that Geico advertisement? Sure, Berkshire Hathaway owns Geico these days, but why is it the only company they own that gets an ad on their homepage?
What do you get when you prioritize aesthetics and form over function? This website. Yale obviously lets their students design the website, and it changes every so often as the collaborative team that designs it makes changes to it. There’s just one consistent throughline, which is that it sucks.
As of the time of this writing, the bulk of the site is taken up by a rapidly flashing multicolored background wishing you a happy holiday and triggering epilepsy. Every subpage has different backgrounds and elements but the same general left-justified, text-with-background-colored layout. Yale might be a prestigious university with a great art school, but they definitely don’t teach web design.
5: Rock Auto
Rock Auto is a national, well-regarded retailer of auto parts. If you DIY repairs on your vehicle, you can get anything you could possibly need here, from tiny electrical parts to chunks of frame and everything in between.
Check out that navigation! This is less of a website and more of a part-picking piece of software that happens to be on the web, like a proto-SaaS platform. You need to select from various options, drilling down from make to year to model to part or search for part numbers. The whole thing feels vaguely untrustworthy and certainly isn’t designed with modern needs in mind.
This is a company providing bottled drinking water to Southern California. It’s also a great example of a website that almost works but just doesn’t quite make it.
At first glance, the design is fine. It has a top bar navigation structure, it has plenty of content, and it has images that represent the site. It has some graphical flourishes that are maybe unnecessary, but that’s fine.
Then you look a little closer and try to use it and see how bad it actually is:
- Images are artifact-covered and low resolution, with text that is decidedly difficult to read.
- There’s a slide-in notice for Covid updates, overlapping the content, and you can’t collapse or remove it.
- The font sizes are pretty small and can be hard to read on a large modern screen.
This site could be excellent if they refined it a little more. As it is, it has the structure and form of a good site, but like an insect mimicking something dangerous, it’s just not quite right on closer inspection.
This is a cupcake-specific bakery in Toronto, and there’s nothing wrong with that. It’s also a very interesting example of someone who has the right idea but doesn’t quite implement it properly.
See, on a PC, this website feels empty, collapsed, and small. There’s not much content, navigation is hidden and scrunched to the side when you open it, and even things like the logo are very small. But then you realize…
…this is a mobile site.
Or, it’s close to a mobile site. This site looks and feels a lot better on a phone (and it’s responsive, so points to them for that!), but it’s still not quite there. The elements are a little too small and don’t quite have the right flow for a mobile design. But the images look better on a phone, and it’s easier to navigate.
Click around a bit and see if you notice something. See how the pages have a lot of white space at the bottom of them? There’s actually text there. It’s unclear whether this is content that wasn’t meant to be there but somehow got injected into the footer or if they’re trying to do some weird Google SEO scam by making nearly-invisible text, but they should stop. That’s enough to warrant a Google penalty, anyway.
This is, ostensibly, a university dedicated to the cutting edge of technology and its advancement, a dream for technophiles everywhere.
In reality, who knows about the school, but the website is borderline unusable. It violates every common website convention. The navigation is on the side, with a button to expand it on the bottom. The main content of the homepage scrolls, but it scrolls horizontally, so you can’t actually move it with the scroll wheel on a mouse. Worse, they even know this isn’t usable, so most of their subpages are traditionally vertical.
It’s basically a case study on how not to design your website navigation.
No, major website giants are not exempt from bad web design; they just can get away with it because they don’t have to care. The eBay website – and, more specifically, individual item pages – are pretty poorly designed.
In part, this is because eBay gives individual sellers a lot of flexibility to add media and layouts to their listings, which results in a lot of amateur web design practices with basic tables and font usage. In another part, it’s because eBay tries to slam in as much information up-front as possible, so the design is impossibly cluttered, and you have to ignore 80% of it to find what you’re looking for. Everything serves a function, but good luck finding the specific information you want at a glance!
Back in the early days of the internet, people weren’t really sure how it would be used, and many tried to mimic existing forms of media. One major modern example is craigslist, which took the idea of a classifieds listing and refined it with categories that lead to titles which lead to listings. They’ve stood the test of time as something functional, though not beautiful.
On the opposite end of the spectrum, you have Arngren. This Norwegian site tried the same thing, with online classified ads, except in a much more newspaper-like format. So, where do you even start?
Seriously, where do you start? Putting the language barrier aside, it’s just a mishmash of images and item listings, with pricing slammed wherever it can go. Plus, it doesn’t all fit on one screen. It scrolls vertically and also horizontally for maximum inability to find anything you’re looking for.
Probably one of the biggest social networks specifically for book nerds, Goodreads is an incredibly important site for authors looking for reviews and for friends to share their reading lists with one another. It’s also kind of a mess. It has editorial content, user content, book-specific content, reviews, recommendations, lists, searches, and a whole lot more, and it’s all just kind of there. It’s small, it’s cluttered, and nothing takes priority enough to give you an indication of what you should be doing at any given time.
Modern web design is very minimalist, and while there’s much to be discussed about that, Goodreads is a good example of how a cluttered design just seems off-putting to modern sensibilities. Will the pendulum swing back around in the future? Maybe, maybe not; who knows?
12: Bank of America
BofA is kind of representative of most banks and financial institutions here since they all have similar websites. They’re just so cluttered and heavy, laden with too many calls to action, too many options, and too little guidance.
If they’re your bank, you probably have figured out a path to get where you need to go at any given time, but it’s still a mess, and heaven help you if you need to find your way to some new feature.
Your Examples Here
This is, of course, just scratching the surface of bad web design extant on the internet. There are so many more wonders to see, from cluttered messes to minimalist design that goes so far to the extreme that it might as well not exist. What are your “favorite” examples of bad design, and why? Let us know in the comments below.
If you want a website of your own and you want to avoid all of these potential pitfalls, why not contact us? We’re an industry-leading and award-winning web design agency, and we have plenty of experience and skilled designers on our team to ensure that you don’t ever fall into any of the same traps as the people who own the sites listed above. Just drop us a line; we’d love to chat about your projects.
Tim Woda is the CEO and founder of White Peak Marketing. He has been on the founding team of five successful start-ups and his digital marketing campaigns have acquired more than 800 million customers for his start-ups and White Peak’s client companies. Tim has been featured by The New York Times, Fox News, Forbes, The Huffington Post, and more. Under Tim’s direction, White Peak was selected as one of America’s Top Digital Marketing Agencies for 2021 by MarTech Outlook magazine.