While I could list 50 other issues that plague web design (like don’t hire a crappy agency), the following are the top five issues we've observed. Go to any business website and you’ll stand a chance to see at least one of these five issues.
Here’s the key question: Does it really cost any more $$ to do something right the first time? Even if it did, what’s it worth to you and your brand to do a website update, maintaining a sense of excellence among your prospects instead of sloppiness?
Pitfall #1) Unequal columns
See the screen shot below. While subtle, this issue plagues many websites and lends to an overall crummy display.
There are no themes, templates, or designs that build in coding for equal height columns. That’s because the fixes are a bit complicated and not readily integrated into themes.
There are three ways to fix this annoying issue:
- Keep the amount of text (characters) the same for all columns.
- Apply CSS Flex Box coding to the columns in question. In any platform, this requires custom programming. In WordPress, it will require theme and CSS mods.
This one issue separates wannabe web design shops from real web design agencies that can handle the technology required for a good website. If you're planning a website update, make sure you hire a capable agency.
Pitfall #2) White Space Issues
This is another common issue. It’s rampant in WordPress because of the designers usually build cookie-cutter themes. See the following screen shot. I intentionally broke one of our development sites to illustrate this issue:
The fix for the issue shown in the screen shot requires programming the width of each container separately, for most web platforms. In Hubspot, it would be possible to easily set a column to any dimension within the 12-column flex-grid array the platform provides.
Pitfall #3) Non-Responsive Responsive Design
Responsive design is a technical feature of most websites today. Today, most all platforms designed for a website update, no matter who the vendor, will boast they feature a responsive design or are mobile ready. Normally, these claims are accurate as long as you don’t deeply modify the design.
Once you start to modify any design, chances are you’ll break some responsive elements.
Consider this perfectly formatted responsive page:
And the same page with a broken responsive layout:
Each time a designer customizes any panel on any page, that same page needs to be tested to validate it still will display well on tablets and smart phones. If not, additional coding needs to be added.
Pitfall #4) Not Designing for Your Users
This issue falls into the User Experience (UX) realm. Marketers will often say, “I love this (or that) design.” But will your audience love it? That’s the question.
There are two points to consider to get and keep your users engaged:
- Know your users. Know what they like, what they’re searching for, what their needs are, what your company can do to fulfill their needs. Basically, in a website you’re trying to achieve that “aha” moment that occurs when people find what they're looking for.
- Do user testing. You first must apply everything you know from step #1 above. Once you’ve launched the best website content possible, you can test if your users are digesting it using metrics.
User testing involves applying metrics to quantify how users are accessing your content and which content they’re accessing.
The most common and one of the most important metrics is page or blog article traffic. Using resources such as Google Analytics or a good marketing automation package such as Hubspot, you can quantify metrics. For example, which blogs are attracting the most traffic and which blogs are producing the highest visitor to lead conversion rates?
From there, you can add HotJar heatmaps, and gain a deeper perspective of what your users are looking for. From there, simply add more of the kind of content your users want.
Pitfall #5) Bad Use of Text
Website typography is vitally important, right? Obviously, people need to read your pages, and you want them to want to read them.
Website typography involves defining several functions of coding on a website:
- Font face (the actual font style).
- Font loading time.
- Font size.
- Font color.
- Line height (line spacing).
All three of these functions make or break the typography on a website.
You should try to avoid glaring typos too. Everybody makes mistakes. Here’s the top ranked article on website typography from Smashing Magazine—a site with high domain authority, but with a glaring typo and no explanation why it’s there.
Here’s the article. (it’s a good article. You should read it.) And here’s a screen shot of the typo:
It’s easy to get lost in the weeds on font programming. Generally, we like to see the following:
- Font face : A sans-serif font. Some Google fonts like Roboto and Open Sans are very popular. There is a cult-like following with Proxima Nova, but you must pay for that font. Google fonts are free.
- Font loading time: Be careful with downloading too many variants of Google fonts because you’ll add loading time to your website and cause an SEO issue in the process.
- Font size: We too think a base font size of 16px is good. BTW: we’re talking pixels (px), not points (pt) as a measuring standard for web design. There are reasons for this.
- Font color: Whatever you want, but the trend today is to avoid pure black (hex: #000000), and head more toward off-black (hex: #444444, etc.).
- Line height: Normally expressed in relative spacing. A browser’s default is “1.” It’s common today to set line height to add line spacing, e.g., “1.5.”
Ready to start a website update project? We’ve prepared an easy to use template to help you get organized. Go ahead and download it or just give us a call! We love helping businesses with all their web design needs!