The landscape of the Internet is constantly changing, and as a Web developer/designer, I’m a sort of landscaper of the Internet. The Internet is charging ahead and Web design is moving just as quickly. Unfortunately, many websites, like a little kid in a foot race, lag behind, wheezing and grunting before ultimately falling on their faces. Your website doesn’t have to be that little kid, and you could be at the front of that race. Right now, you could be saying through a Dorito-packed mouth, “How Pethe? How could I pothibly compete in this rathe?” Take my hand and follow me into the future. Here are some things that you should drop in your website redesign.
Ditch these six modern Web Design trends
1. Sidebars
It’s time for sidebars to bite the dust. They clutter up the page, interrupt full-width elements and conflict with other navigation items. They never end at the same point as your copy, so you’re bound to have either a sidebar that outweighs the copy or an empty sidebar taking up space long after you’ve scrolled past the last element inside of it. This can make a huge impact on bounce rate and time-on-page. Additionally, it makes it difficult to engage with the content on the sidebars too, thus decreasing conversions.
With a growing shift to mobile (especially with the onset of the Google mobile algorithm change), how should you respond? Do you slam all of that information into your mobile navigation and have it scroll for days? Do you cram it all on the top of the page and hope the user knows to scroll past it? Do you put it at the bottom and hope the user sees it on the way down?
I have a better solution, ditch it.
I can’t give you a catchall solution for where to put your displaced CTAs, tertiary and quaternary navigation bars and testimonials, but I have some ideas.
- If it's not necessary for these elements to be on the screen at all times, try implementing them into the normal flow of the document.
- If your narrative is strong and keeps the user involved all the way to the bottom of the page, try a tastefully inserted conversion method like this slide-in form.
- If you must have the elements in the viewport, try placing them in a drawer on the side that can be toggled.
- If you can’t get rid of your sidebar, consider giving it {position:fixed} to keep it from running under your copy.
If you have any other solutions to this problem I would love to hear about them.
2. Headlines and subheads that go on forever...
...and run onto multiple lines because it’s so important to have all this information and the end user will be so much better off having read it—no way could this just go into the body copy.
I think the above description says it all. Headlines should be descriptive and attention-grabbing without rambling. A headline is generally much larger than body copy. This means that when you have a headline with multiple lines of text it will take up a lot more visual weight, unbalancing the design and causing visitors to run away from your site.
Additionally, headlines often use display fonts that aren't legible for any long-form copy. Think about how you can tell the user what you want without making them read more than a short sentence, because most of them won’t. If they won't read what you have to say, you're losing opportunities for conversion and thus stifling your business. This brings us to the next item that I would like to see disappear.
3. Non-uniform styling
This is pretty basic, but I have even seen larger design firms breaking this rule. Every element on your site should work visually with every other thing. Think of your brand as a Spartan phalanx. Every single soldier fits together to create a living wall. But all of a sudden, in the middle of the phalanx a soldier breaks rank! It’s a call to action that has a drop shadow and off-brand colors! He is immediately seen as an advertisement and cut down by Athenian arrows.
Then another soldier breaks rank. It’s a photo of the CFO in a much lower resolution than the rest of the team and war elephants trample him. All of a sudden the entire left flank led by the icons-that-we-randomly-found-that-look-nothing-like-the-other-icons-on-the-site regiment collapses and the whole army routs. The user’s trust will be eroded with great velocity if your design isn’t watertight.
4. Gradients and drop shadows
These had a place in Web design not long ago. They may have another golden age sometime in the future, but until then either don’t use them or use them sparingly. I should add that when done well they can look amazing but, per Dumbledore, “with great power comes great responsibility.”
5. Too little copy on a subpage/too few bullets in a list
If you don’t have enough copy to put at least a couple of paragraphs on a subpage, maybe that page shouldn’t exist. Here is why:
- Your end users will think that you tricked them into going to a page with no information.
- Why would you make a bulleted list for two things? Just put them in a sentence.
6. Boring button microcopy
Learn More
Download Now
Click Here
Did you catch the extensive tear down of HubSpot's homepage with slight emphasis of CTA-button copy? If not, you should totally check it out. When it comes to CTA buttons, you don’t have a lot of room to play around with copy, as you don’t want to end up with a button with a paragraph in it. But it's time to ditch those boring, un-descriptive CTAs and speak to your visitors' emotions and give greater context into what they're clicking.
Try to be creative with the copy. Maybe instead of “Learn More” you say “Explore Solutions” or instead of “Download Now” you say “For the love of God don’t click this.” Whatever you decide to put here, try to convey something more than “Something will happen if you click this.”
There are plenty of other modern Web-design trends to ditch, and there's always room for improvement. It's important to always bring yourself back to your buyer personas when implementing design changes to be sure they're something that will resonate with your ideal customer.
Check out part II in this series, Modern Web Design Trends B2B Companies Should Embrace!
Tag(s):
Websites
