12 Horrid Website Design Trends to Abandon in 2016

It’s too easy to get caught up in the idea of something.

Side Tangent: Remember when flash-based sites premiered? Website designers were building complicated, insanely animated sites just because they could. At the time, some designers did it tastefully, but the majority made our eyes bleed. The idea of their concept outweighed the actual interaction we users had with those sites. Although flash sites are pretty much dead, we can still fall into the same trap if we aren’t careful.

In the website design and development realm, this seems to happen all the time. The idea of a concept or element outweighs the actual performance in the final product. This leads to poorly architected websites that users end up hating.

We live in a time where a website can truly be a make or break point. Users are scraping the internet for the solutions to their problems. Some may find your website on a Google search for some solution. Others may take another peek at your organization after meeting you for the first time or seeing your name somewhere.

When that pivotal moment occurs—where they actually find themselves on your site—it is the absolute most critical of times. It’s a fragile time where the slightest mishap—no matter how minuscule—can turn that user off and send them away from your site.

That’s why it’s mission critical to take ideas further than what we simple think they’ll do. We have to do our research and observe the way that the average user will interact with the websites we’re responsible for.

Website Design Trend You Should Abandon

Here are 12 website design trends that are just plain bad for your users.

If you’re thinking of using them, please don’t. If you’re currently using them, it’s time for a gut check.

1.) Loading Screens That Are Created to Cover Up Web Pages That Take 7 Years to Load

I’ll make no bones about it—we have a loading screen that smooths the transition between pages. It’s a cheeky little animation, which if you explore our website you’ll quickly see.

Guess what though? Any page on our website on average only takes a few seconds to load at the very, very most. We aren’t using it to pass the time for a page that takes more than four seconds to come to fruition.

I’ve stumbled upon countless websites—especially for witty creative agencies—who use loading screens to try to distract a user on a page that takes over ten seconds to load. From an SEO and user standpoint, four seconds is the cut off. Anything over that is just plain bad. Anything over ten seconds is horrendous.

The website experience you’re delivering might be worth the wait, but most users aren’t going to wait. If your website needs a loading screen because your pages take a while to load, you’re in big trouble.

Building a website in a way that allows any page to load lightning fast is critical to retaining users once they stumble upon your site.

The speed formula is based on the following:

1. How clean your CSS and Javascript are
2. How optimized your content is
3. How fast your host is
4. Whether or not you use a Content Delivery Network (CDN)

Points one and two come down to the way a website is built.

2.) Splash Pages

Splash pages are gatekeepers to a website. If someone tries to access your homepage, they’ll come to face-to-face with that gatekeeper. Before getting into the main content of your site, they have to usually click a button or perform some action to get in.

Technical Pitfalls—SEO

On the technical side, the splash page is a separate page. From a search engine’s perspective, a splash page isn’t a splash page with a site behind it—it’s seen as the home page. This is bad for a couple of reasons:

• Again, it treats this as your home page. As such, there isn’t much to crawl. Sometimes one image and minimal text, which won’t be good for your ranking
• It’s hard to see beyond the splash page because there aren’t very many links to begin crawling

This is one of those instances where the idea of something outweighs the output. A designer might have a cool idea for something, but at the end of the day splash pages aren’t ideal.

There’s Only One Usage of Splash Page I Recommend

The only instance I recommend using these in is for “site under construction” screens. Here’s my fine print though:

• I’d utilize a construction splash page for a new site being built, not a pre-existing site that’s being rebuilt. If you’re rebuilding a pre-existing site, have your designer do it off-site on a staging domain while your website remains in tact.
• When using a splash page, be sure that search engines are temporarily discouraged from crawling. We don’t want them to try to crawl a new site that isn’t ready yet. Don’t forget to turn this off when you launch the site (one of many website redesign mistakes)!

There is a Way to Utilize the Splash Idea Well—the Splash Section

Instead of “locking” your site behind a splash page, you can utilize a similar concept without breaking SEO bank—the splash section.

A splash section acts as a full-width/height hero section on your home page. From here, you can utilize the same cool effects, except the button you click doesn’t take you into the site—it takes you down the page.

People Are Already Embracing the Section Concept for Hero Sections

The beautiful imagery of splash pages has already inspired a revolution of the way hero sections are designed nowadays. It’s turned a home page from a boring info listing into a visual festival. From all points—SEO, load-time and user experience—using the splash section idea can be highly effective for your website.

3.) Low-Resolution Images

Your website is your online identity. If you’re showcasing low-quality images, that’s going to reflect poorly on you, especially if those images are of your properties, portfolio pieces or team.

Use Optimized JPGs

For website usage, most of your images are going to be JPGs. JPGs are able to maintain an extremely high-quality without being too large in size. You don’t want to put any images on your site that are larger than 500 KB each.

4.) Images Used in the Place of Text

Any place that utilizes text should use real, living text. I mean every and any use of text.

The worst possible thing you can do is try to use images in the place of text. This commonly happens when designers put together hero images and banners. Instead of coding those hero images to have living text sitting on top of an image, they put them in one image file.

At the end of the day, it’s a really lazy practice.

5.) Images Used in the Place of HTML/CSS

This is relatively uncommon, but still happens at times.

Let’s say you have a color block at the top of a page. Sometimes people use an image to accomplish this color block, rather than coding it to manifest.

PhotoShop Web Exporting

This is a practice that still happens and needs to go away forever.

It’s one thing to use PhotoShop for mocking up a website, but it’s another thing entirely to export that PSD into HTML. Yes, this actually happens.

Sure, it’s a lot easier than coding it properly, but the output is pretty lame and clunky. Plus, edits are difficult to implement.

6.) Hero Banner Sliders

I’ll pick on this example again. The hero section (the first image section on the page) is a sliding banner section.

Banner Blindness

Related Awesomeness: 
Death to Sliders! 3 Reasons to Abandon Website Sliders

The concept of a banner slider is to try to show as much information as possible in one place. What actually ends up happening is that the user is overwhelmed by all the information and either skips past the section or leaves the site. This is called banner blindness.

Instead, Break Up the Information Over Vertical Space

A better design practice is to break up and lay out your information vertically, instead of horizontally.

Decompress that information down the page and give the user scrolling room. By breaking information into bite-sized sections revealed upon scroll, you’re giving them the ability to quickly digest information before moving on to the next.

7.) Premature Pop-Up Box SMACKS

I just arrived. I’m scrolling. I’m reading.

And then …

Pow! I get hit with a pop-up box with something usually out of place like “subscribe for email!”

After grabbing my metaphorically bleeding nose, I’ll almost always exit the pop up and continue exploring a little more annoyed than I started.

Pop-Ups Can Be Useful at the Right Time

Let’s set the record straight here—pop-up boxes can be useful at the right time. When I arrive on a website for the first time and make it 25-percent down the homepage is not one of them.

If you want to optimize the effectiveness of a pop-up box, have it trigger after a certain amount of page views. If someone’s on your site, and they go through five pages, then they’ll probably be more receptive to a pop-up box, especially if the offer is relevant.

• Quick Tip: Instead of a simple “subscribe by email” box, consider offering a piece of premium content like an eBook.

8.) Poor Parallax Effects

Parallax is a popular effect that a lot of websites are utilizing.

From a development perspective, there are multiple ways to accomplish a “family” of parallax effects. The bad news is that not every method outputs the smoothest effect.

Let’s Get Nerdy—Parallax jQuery Development Issues

Websites that utilize jQuery to change the background-position as the user scrolls, not only take longer to load, but are a little glitchy if you don’t build them properly. Here are some common pitfalls of the jQuery position change technique:

• Rough picture lagging as the user scrolls down. I’ve seen some examples of this that looked like what nails on a chalkboard sound like.
• Funky perspective—where white space will show if an image changes position too quickly or too intensely

How to Smooth jQuery Development Issues

Jagged position change is caused when a very specific element is forgotten from the equation—data speed.

Data speed controls the pace at which an image will reposition itself on the front end. By dictating the data speed in the jQuery formula, you can smooth out the way the parallax image effect repositions itself.

Here’s an example of how to pull this off in jQuery:

$(window).scroll(function() {
var yPos = -($(this).scrollTop() / $(‘#section-test-hero’).data(‘speed’));
var coords = ‘center ‘+ yPos + ‘px’;
$(‘#section-test-hero’).css({ backgroundPosition: coords });
});

Next, you just set your parallax image section’s data-speed in the HTML ouput:

<div id=”parallax section” class=”parallax” data-speed=”2″></div>

• Lower numbers mean slower speeds. For a smooth parallax, I recommend a lower number for a smooth perspective effect.

An Alternative—a Super Easy Way to Make Parallax Happen

There’s a much easier way to make parallax happen with pure CSS.

• background-size:cover; background-attachment: fixed;
  • This keeps the background fully stationary as the user scrolls, but does so without a single hiccup.

9.) Nauseating/Distracting Background Videos

A recent trend is utilizing a background video as a hero visual sitting behind text. When done properly, the effect is really slick and can bring a site to life.

When done improperly, however, background videos can be a really bad thing. When you’re picking a background video make sure that there isn’t too much jagged motion.

If It’s Nauseating—Don’t Use It

It doesn’t have to be complicated either—take a look at the video. If it makes you nauseous then don’t use it.

If It’s Distracting—Don’t Use It

On the other hand, a background video can also be distracting. If the background video takes too much away from the messaging then don’t use it.

You also might want to experiment with some CSS opacity overlays to make that video a little more subtle.

10.) Low-to-No Contrast

Contrast comes back to design more than the actual development.

When the rubber meets the road, however, a lack of contrast is really bad for user experience.

You have to think of your user like they’re drunk. If an element isn’t standing out, they’ll probably miss it. It’s important to make elements, especially the clickable ones, stick out like well-designed sore thumbs. This will help a user navigate and find their way better.

When you’re visually designing a site, you need to consider the following:

• Older users have bad vision
• There are low-quality monitors out there. The above example would barely showcase any form fields on a low quality monitor.
• People experience bad lighting and glare will surfing the web
• A lot of users are reading on smaller screens

11.) Low-to-No Repetition

Another design principle is that of repetition. Repetition is an important concept behind successful brands. It’s consistency in fonts, color schemes, logo usage and visual identity.

This concept couldn’t be more important for a website. You want to keep your font selections minimal, your sizes, colors and layout choices consistent. It makes the whole product feel complete and intentional.

Sure you can break these if you’re familiar with the concept of repetition. Bottom line—you have to know the rules to break them first. And even when breaking the repetition rule, you really have to be careful about how you do it.

12.) Content Minimalism

I’m a big fan of minimalism when it comes to design, but I’ve recently stumbled upon some sites that take minimalism too far. 

Above is an example of a site I stumbled across. The page your looking at is the entire page. There’s nowhere to scroll. Nowhere to learn more about who the company actually is.

The other pages within the site stay consistent with that theme and are even more minimalistic when it comes to content.

A Site Needs Compelling Content

The design isn’t bad—it’s minimalist.

The content, however, is where the problem lies. If I’m someone looking for a branding or marketing company, I want to learn more. I want to get to know you better and understand your approach fully. A few sentences isn’t enough to help me make a choice. Prospects doing their online research are looking for some meat on the bones.

This design could actually build out an awesome site. If what you’re viewing above was a section of the about page, and there were similarly minimalistic sections waiting below, this could make for a digestible and smooth browsing experience.

It’s a Battle of Content Nowadays

Design is vital, but content is really what brings design to life. There’s only so far you can go without any content to back you up.

The companies serving up fresh content are the ones attracting, retaining and converting visitors into customers.

Some Recommendations

Design with the User in Mind

It doesn’t matter what a website developer is capable of. It’s all about the experience a user has on the site.

Make Websites Easy to Use

Websites shouldn’t be complicated, confusing places. They should be welcoming places where users want to kick off their shoes and stay a while. Make your website visually appealing, digestible and high-performing.

Make Content a Priority

Even the best-designed websites need content to help them tell the story. Put an emphasis on your content. Whatever industry you’re in, cultivate compelling assets to help convey who you are, what you do and where you’re going.

Test, Test, Test, Test

Once a website is built, it’s not over. It’s really just beginning. Your site should be equipped to monitor performance in every way and should at the very least have:

• Heat-Mapping
• User action tracking
• Google Analytics on every page

Don’t Let the Next Time You Touch Your Site Be Years from Now

Once you’re site is completed, again, it’s not over. Using the testing protocols above, you need to monitor how things are going. If you notice from your analytics that a certain page is churning visitors like no one’s business, you need to make a change right away—not years from now.

Designers—Make the World a More Beautiful Place, One Site at a Time

Make the design world a better place. Avoid these mishaps and top perpetuating them on behalf of the intent.

How’s Your Website Doing?

GET A FREE AUDIT