The Worst Web Design Mistakes, and How to Prevent Them

I love you, Homestar Runner, but I can't see you. The Web is moving to HTML5, and Flash support will dwindle. But even if your mobile device supports Flash, the experience isn't ideal. Users can't activate mouse rollovers with touch; so if your navigation or a large part of your content is Flash-based, you'll be leaving people behind. Some browsers don't even warn users that they don't have the Flash player; they simply display blank space where the Flash content should go--and a blank website doesn't leave a very good impression. Consider migrating to HTML5 for video, rich content, and dynamic navigation.

What's worse than a full Flash site? A poorly done full Flash site. The banquet hall site at upper left is one giant Flash animation set to scale to the browser. This arrangement can cause problems if the browser doesn't have the same aspect ratio as the Flash animation, the resized animation may get squished or ridiculously overstretched, as the bottom and right-side images demonstrate. At least the site didn't commit the cardinal sin of resizing my browser for me.

This site also gets bonus demerits for automatically playing a Billy Idol song, presenting visitors with an unskippable video intro, and having a completely unpronounceable name.

You know what your website says, so light blue text on a slightly darker blue background may look perfectly readable to you. Your visitors, however, may find the content frustratingly difficult to read. And what happens when visitors can't quickly and easily read the text on your site? They close the tab and move on to the next site listed in their search results.

Notice how much more legible the text from the top example becomes in the bottom example, which shows what happens when you highlight the text with the cursor so that it becomes white on a darker blue background. This is also why you should never display your text content as an image on your site. It becomes impossible to highlight and resize, and it won't reflow or scale properly to broswers of different sizes.

File this under "trying way too hard to be colorful." A unified color scheme not only makes your page look cleaner, but it also helps unify your brand, so visitors leave with a stronger idea of your identity. Verizon is red, AT&T is blue, and T-Mobile even tried to trademark the color magenta. Too many colors can be cluttering, confusing, and sometimes unreadable.

In this example, the website in its original form appears on the left. I've highlighted the whole thing on the right to show how "Feature Articles" improves by going from an illegible dark blue on black to a much more readable white on blue.

No website should ever, ever, be written entirely in Comic Sans font. There's a reason that the number-one search result for Comic Sans is the website bancomicsans.com. It's just not professional. The only thing worse than creating an entire site done in Comic Sans would be to mix fonts throughout the page. Try to pick a font or typeface that matches the tone of your content.

This site also gets points deducted for losing the entire center column when you narrow the browser window just a bit (as shown in the lower image).

I'm sure this page would look just fine in IE6, but it's a mess of out-of-place elements in this screenshot taken in Chrome. Test your layout in at least the big three modern browsers, and try to conform to current Web standards. Set aside some money in your budget for a redesign every few years. Web standards evolve and change quickly, and your award winning design from 1998 may not work as well in the latest version of Firefox.

This page also gets docked for being a guestbook. If you're still trying to keep track of your visitors and customers via a guestbook, consider creating a Facebook page for your business so you can have more interactive contact with your visitors.

It can be hard to pack a lot of content into a single Web page, but that's what good navigation is for. If your site content generates a horizontal scrollbar in a browser window of reasonable size, rethink your layout. While most new laptops come with multitouch trackpads that permit horizontal scrolling with two fingers, not all do, and many people still browse the Web on desktops with mice that only scroll vertically. Horizontal scrolling is a hassle, and it's not something that people look for, so visitors may miss content on the sides. Try to rework your layout to include a deeper menu structure to accommodate all of your content, and make sure it scales properly to fit a narrower browser window.

I think Denny’s was going for the feel of a paper menu with the layout of its website, but it just looks cluttered. Also, the animations used for sliding to the next side panel are slow and laggy. I shouldn't have to wait for content to scroll onto the screen, and jerky animations don't look good.

This is an extreme example of an overload of flashing widgets and animated gifs, but they're a bad idea in any amount. Flashing things are a sure way to distract your visitors from actually reading your website's website. In this example, it's impossible to focus on any one thing. Keep your layout clean and pick just one or two things for visitors to focus on at a time. Place widgets and other elements that aren't part of your main content on the edges so they don't become a distraction to the main thing you want visitors to look at.

As use of visitor counters and Web-ring banners lessens, new widgets are popping up to litter websites. Sure, you want people to know that your business has a Twitter feed, a Facebook Page, an RSS feed, and a YouTube channel--and of course your awesome Flickr and Instagram feeds--but it's easy to go overboard with these widgets. Just as old-fashioned Flash banners slow down page load times, too many social widgets can turn your clean, sleek, fast-loading page, into a bloated mess. Pick up to three--or at most four--of your most active social outlets, and load those widgets into an organized bundle somewhere near your menus, or along the bottom of the page.

Everyone seems to be trying to monetize their websites now. We get it; ads pay the bills here, too. But you have to keep ads in balance. If it's difficult to find your actual content among the mess of ads on your site, rethink your layout--or reconsider how much you're relying on ad sales. This site ay not be most extreme example of ad clutter, but it takes an irony hit for sandwiching a post about bad Web design between five sharing widgets and three rows of ads. At least the ads are on the right side, so they aren't too intrusive. Make sure that your content remains the most important thing on your site.

Keeping your website up to date is important, but the substance of your updates is even more so. If someone reaches an interesting post of yours via a Google search, they won't care that it's been three weeks since your last update. Avoid the temptation to apologize to your readership for not updating more often. Save the updates for when you have something of substance to share.

This bad habit is most common on personal blogs, but the example on the left comes from a business's Facebook page, from a post that was also posted on its blog.

First of all, this site should come with a seizure warning. Click through to the live site only if you're not sensitive to fast-moving, neon things. Not only does the eye-pain-inducing background scroll extremely quickly, making the text nearly impossible to read, but the site also comes with a fake warning message at the top, a dove that flies around the page, a cat that runs across the bottom, and a door that opens if you roll over it. Worst of all, it really does look "better" in Internet Explorer.

The World's Worst PowerPoint Presentations

If you're ready to redo your business's website, check out these tools.

Build a Website for Your Small Business: 5 DIY Services

Free Sites Let You Build a Website in 5 Minutes