The Beginner’s Field Guide to Web Design Best Practices

Published Oct 10, 2019. Updated Oct 14, 2019.

The Beginner’s Field Guide to Web Design Best Practices

When a website is built around a solid game plan that’s backed by testing and stats, it works better — for your visitors, for Google’s crawlers, and for you, the business owner.

That’s something we’ve learned over the years here at Trajectory. Every website we’ve built has brought a unique set of challenges, and in solving them, we’ve learned firsthand which design techniques and marketing tactics consistently bring in the best results.

In this article, we’re sharing some of these best practices for each phase of the web design process, from your site’s overall strategy to its structure, layout, content, and technical considerations going on behind the scenes.

So when it’s time to build out your next website, you’ll understand the reasons behind each step along the way.

🧠

Website Strategy

Your website is one of your company’s most important and most visible marketing assets. But for it to market your business effectively, there needs to be an airtight strategy behind it. In this section, we’ll discuss a few of the key strategic points to consider when beginning the web design process.

Primary goal

This is always one of the first concerns we clarify with our clients, and it’s one of the first questions you should ask yourself when planning your website: “What is the most important thing that the site needs to accomplish?” This goal could be quantitative, like driving more inbound leads and increasing sales through the website, or more abstract, like increasing brand awareness and modernizing your web presence.

Whatever it may be, determine the main goal (and sometimes a secondary goal) that you want your website to accomplish and let that guide everything else about your site.

If brand awareness is your target, ask yourself whether or not each page provides a consistent brand experience for your visitors. If you’re trying to increase sales, what can you do so that your product, about, and contact pages help drive users to become customers?

Ask these questions at each stage and with every change. This will help you cut through the clutter and keep you focused on that one overarching goal your website needs to accomplish.

Once you have that main goal in mind, you need to decide what action you want someone to take on each page. Some pages, like the Contact page, have a clearly defined goal of getting visitors to fill out a form requesting more information. For other pages, the goal might be for a visitor to click through to another page, like from the Blog page into a post.

Calls to action

One of the most important elements on your entire website is a call to action. Every page on your site should include one (although certain pages may require more than one) so that visitors never have to wonder where to click next.

If it helps, think of calls to action like signs along a highway, pointing your visitors in the right direction at every turn and ensuring they don’t get lost on their journey or take the wrong exit (i.e., leave your site too early).

Your call to action’s ideal size, design, and placement depend largely on the goals you’ve set for your site, so there’s really no one-size-fits-all best practice other than simply including them. But we’ve found that for the majority of our web design clients, their calls to action work best at the bottom of the page. When a visitor reaches the end of the content they’re reading — like a Services page or blog post — it’s clear what their next step should be and how to take it. Here’s an example of how we did this on our own website:

call to action at bottom of page
👷‍♂️

Website Structure

The structure of your website plays a big role in the choices your visitors make while on it. In this section, we’ll explore how to craft a user journey that meets your visitors where they are and then guides them to where you want them to be (in your pipeline or on your client list).

Navigation structure

Strategically mapping out your website’s navigation structure is one of the most important — and one of the most commonly neglected — steps of developing your website.

A menu that’s too complicated confuses users and clutters your site’s navigation, while one that’s too simple can leave people wanting more information and leaving your site when they don’t find it. Most importantly, if your navigation structure doesn’t support your website’s main goal, converting people from casual visitors to loyal customers will be an uphill battle.

So what does a great website navigation structure look like? The specifics depend on which details of your business you’d like to highlight, but remember that it should follow a logical progression that makes sense to the user.

Remember, too, that the longer your visitors have to look for something, the more likely they are to leave your site before taking the actions you want them to.

The best websites typically feature shallow navigation — i.e., a structure that takes only about 3 clicks to reach every page, according to Kissmetrics. This keeps your important pages near the surface of your website so that people don’t have to dive too deeply in their search for information.

But this doesn’t mean that your menu bar should include as many pages as you can squeeze in. We recommend including only about 4-7 items in your main menu, depending on your company’s needs. These should only be your most-visited pages, which typically include:

Keeping your main menu bar clean helps visitors easily find what they’re looking for. But if you have other pages that still need to be listed, you might consider adding them to a menu in your footer. Footer menus typically include pages like:

You can also use this space to reiterate your contact info in a spot that’s accessible from every page.

👨‍🎨

Website Design

It only takes visitors 0.05 seconds (or about 50 milliseconds) to form an opinion about your website — an opinion that is based largely on how your site looks. And if the opinion they form isn’t a favorable one, you stand to miss out on a huge chunk of business. 57% of users say they won’t recommend a business with a poorly designed mobile website, while 38% of people will stop engaging with a website if the layout and/or content are unattractive.

In this section, we’ll explore some of the design principles that we implement on every website we develop.

Consistency

Consistency is a crucial part of any good website design. It forms the foundation of good user experience, and it strengthens your brand in visitors’ minds.

Your site should be consistent not only with the norms that visitors have come to expect from every site, but also with the precedent that it sets itself.

For example, your visitors expect to find your logo and company name at the top of your site, either centered or aligned left, and your navigation menu directly beside or below your logo. They expect this because it’s the standard that has been established for them by practically every other website they’ve visited. Straying from this standard will only confuse visitors and make it more difficult for them to find the information they want.

The first page your site visitors land on also establishes a standard for them, and as they browse deeper into your content, they expect all subsequent pages to adhere to that norm, too. For example, if you chose to center your navigation menu on your homepage, it should be centered on every other page, too. If the body paragraphs on your About page are size 18 font, all of your body text on other pages should be the same size. Your logo should be the same size (and shape) no matter where it appears on your site.

This level of consistency helps to establish your brand with first-time visitors and reinforce it with returning users.

When most people think of branding, they think of logos, but logos are just one piece of the branding puzzle. Your brand is the impression that visitors are left with after interacting with your company, and that impression is influenced by colors, overall style, typography/fonts, your content’s underlying messaging, and more.

Your audience’s experience with your brand should be the same no matter when or where they come into contact with it — whether that’s a flyer, social media, a business card, or your website. Not only does consistent branding make your company more memorable, but it also helps customers trust you and be more likely to purchase from you. In fact, email marketers constantly struggle to get more than 20% of recipients to open their emails, but 64% of people will open one simply because they trust the brand that sent it.

Consistency builds trust, and if you want your website visitors to become committed customers and loyal fans, they absolutely must trust you and your company first.

Color palette

The colors of your web design play a significant role in how well your visitors follow through on the goals you’ve set for them. Want to learn more? We wrote an entire blog post on how to benefit from color psychology in your website design.

Whitespace

One often-overlooked element of modern web design is the empty space between elements, also known as whitespace. Whitespace is a part of every good design because it keeps the page from looking cluttered or messy. It makes your site text more legible, and it allows the eyes to rest as they scan the page. It also acts as a visual separator between unrelated design elements (for example, the paragraphs on this page). But most importantly, whitespace helps bring attention to your calls to action, opt-ins, and other important features.

Here’s an example of a website we designed that makes good use of whitespace. Note how your eye is drawn to each feature individually:

white space

High-quality imagery

We encourage our web design clients to incorporate their own images and photos into their site whenever possible because doing so helps you begin to connect with potential customers before you ever speak to them. Users get to sneak a peek at your office, meet the team on your About page, and start to develop a feel for how your business treats its customers … all before deciding whether or not to reach out.

But often, businesses don’t have professional, high-quality photos of their office or warehouse, and can’t afford to or don’t want to hire a photographer for the project. In these cases, we may need to use stock images to give their website more visual interest.

Be careful when choosing stock images. You want your website to stand out from the competition, but if you use the same photos as everyone else in your industry, you simply blend into the background. Look for images that have a more boutique, natural, organic feel to keep the sense of personal connection alive and avoid falling into stock-photography cliches.

stock photos

Take a look at the two stock photos above. Which one feels more sincere and inviting to you?

✍️

Website Content

When it comes to marketing your services and products, content is king. It gives you a platform to establish yourself as an industry leader and an expert in your field. It gives potential customers an insight into your process. And it generates 3X as many leads as paid search or outbound marketing, and converts 6X higher than other methods.

In this section, we’ll explore some of the best ways to include content on your website.

Formatting

Poorly formatted page copy is one reason that many small business websites lose visitors. We see web pages all the time that lump their text together into one large section. But when people see a wall of text with no photos or visual elements to break it up, they’ll probably skip reading it altogether. In fact, the average visitor only reads 28% of the words on your page, according to a study by Nielsen.

So when formatting your website content, whether a services page or a blog post, it’s important to make the text easily skimmable.

Start by taking large chunks of text and breaking them up into easy-to-read snippets. Even something as simple as adding paragraph breaks can help visitors scan and digest content more easily. It also naturally provides more white space, making the page more visually appealing and less overwhelming.

And the shorter your paragraphs are, the better — at the longest, they should be only 4-5 sentences.

When presenting similar ideas listed one after another, try forming them into bulleted and numbered lists. You should also use headings throughout your website (like we did in this post) to guide your visitors and to help them quickly find information as they scan your text. Headings should be either catchy, to grab visitors’ attention, or descriptive, to make it clear what the section is about.

Blog posts

Blog posts are a great way to demonstrate expertise in your field, build trust with your audience, and keep past customers engaged with your brand. They have also been rated as the 5th most trusted source for accurate online information behind news sites, Facebook, retail sites, and YouTube. Additionally, 47% of buyers consume about 3-5 pieces of content before deciding to make a purchase.

Through a blog, you can offer solutions to problems your audience faces and position yourself as the best person to solve those problems for them. That’s the kind of content that resonates with your audience and gets them to take action.

As a result, B2B companies that blog generate 67% more leads per month than those who do not, while B2C companies that blog generate 88% more leads per month than their non-blogging competitors.

But your blog posts help in more ways than just lead generation. Featuring a blog on your website gives you a 434% better chance of ranking highly on search engines — a must for businesses that don’t have a strong flow of referrals.

So what should you blog about to get readers back again and again? Your topics should be relevant to the services you offer and should be tailored to the reason people visit your website in the first place. Above all, they should provide helpful information to your site visitors.

For example, if you’re a dentist, someone who visits your website may have a toothache and want to know what’s causing their discomfort. You can help by writing a blog titled, “Top 5

Causes of Toothaches and How to Relieve Them.” Or if you’re a dog trainer, your visitors may be looking for tips on getting their pooch to obey commands. For them, a “12-Step Guide to Obedience Training” could come in really handy.

Testimonials and reviews

Here’s a surprising fact: Your best marketing material is written by other people. Even with the most well-written content, users are still wary to trust your claims. But according to a study from BrightLocal,

On top of that, 74% of consumers say word of mouth is a key influencer in their purchasing decisions, and studies show that reviews and testimonials are between 2X and 10X more effective than paid media at persuading buyers.

If your business has reviews hiding all over Yelp, Google, and industry-specific review sites, use them to your advantage by including them on your own website. If you have a lot of positive reviews, you may even want to add a Reviews or Testimonials page. You won’t get dinged for duplicate content and you’ll establish a great level of trust with your users.

You can apply the same logic to any awards your company has received from entities like the Better Business Bureau (BBB), local publications’ “best of” lists, or industry organizations. Proudly display them on your site right along with your reviews, because all of these contribute to that sense of trust you want your visitors to have, and ultimately, it will help nudge them along the path to becoming a customer.

Case studies

Case studies work alongside your blog to establish industry expertise, giving visitors an insight into your process and showing them what sort of customer experience to expect if they decide to work with you. The best case studies:

You can include client testimonials for added credibility — data is impressive, but your visitors also want to see that your customers were happy with the results.

Another reason to include case studies on your website: they are incredibly specific, so you know that anyone reading them is interested in that exact same type of service. This makes case studies an ideal tool for turning site visitors into leads.

Here at Trajectory, we typically publish a case study soon after we launch a new website to showcase the improvements our web design services have made for our clients. But you don’t have to be a web design agency to use case studies to your advantage — these work in any industry. Here are some examples to get you started:

🤓

Technical Considerations

Much of your website’s design will depend on your industry, your audience, and your business goals. But there are some universal web development basics that apply to any website, regardless of its purpose. In this section, we’ll dive into some of these must-haves.

Fast load times

Lightning-fast load times are a must-have because they benefit both user experience and SEO. You can easily measure your site speed with Google PageSpeed — simply plug in your website’s URL and the tool will evaluate your site’s speed, opportunities for improvement, and more.

page load times

Studies show that 47% of consumers expect a web page to load in 2 seconds or less. Perhaps unsurprisingly, then, 53% of mobile pages are abandoned if they take longer than 3 seconds to load. Because even though mobile users typically access your website from slower networks (like 4G or LTE), they still expect the same instant gratification they’ve become accustomed to from a WiFi or ethernet connection.

Unfortunately, the average page load time is closer to 15 seconds.

And while that’s improved from 22 seconds in 2017, your visitors won’t be happy if they have to wait that long to see your content. The longer it takes to show up, the more likely they are to bounce — i.e., leave your site without clicking through to another page. According to Google’s Industry Benchmark report released in 2018, as page load times increase from 1-10 seconds, the probability of a mobile site visitor bouncing increases 123%.

mobile page speed

To make matters worse, once those visitors are gone, they’re not coming back. About 61% of users are unlikely to return to a site they had trouble accessing, and 40% will visit a competitor’s site instead.

Your audience won’t be loyal to you if they can’t even load your page. So if you want to build trust with your visitors and get them back to your site again and again, start by tightening up your page speeds.

Responsive/mobile-friendly design

Responsive web design, also known as mobile-friendly design, has been a buzzword in the design community for so long that it’s easy to assume everyone has already adopted it. Still, plenty of the websites we revamp come to us without a single mobile-friendly feature.

A responsive website is one that easily scales to fit any screen size while offering the same ease of use on any device. Want to know if your site is responsive? Simply head to your site and manually resize the window to its narrowest possible width. If the design automatically adjusts so that it looks great at every size, it’s responsive. You can also use Google’s mobile-friendly test to see how your site looks on a mobile device.

Mobile responsiveness is crucial to your website’s success because now, more people visit sites from their mobile devices than from desktop computers. Smartphones were responsible for 52.2% of internet traffic in 2018, compared to just 50.3% in 2017 — a nearly 4% global increase in just one year. And it’s been estimated that by 2020, 45% of all e-commerce will be conducted on mobile devices, compared to just 20% in 2016.

mobile website visits

The best way to connect with your target audience is to meet them on the device where they’re already most comfortable. So if you’ve only focused on desktop design, you’re going to lose out on the majority of your potential customers.

But user experience isn’t the only reason to invest in a responsive site. Because of these trends, in 2015 Google began using mobile-friendliness as a ranking factor when showing mobile search results. Responsive websites get priority — if two sites are equally relevant to the search term, but only one is responsive, that one is much more likely to show up first when someone searches.

So not only is your outdated site difficult for visitors to use, but thanks to mobile-first indexing, it also will eventually get fewer and fewer visitors. In fact, if your site doesn’t function well on mobile, it’s probably already suffered a dip in traffic — about 40% of people will choose a different search result if the first isn’t mobile-friendly.

Secure domain (HTTPS)

Site security has been one of Google’s ranking factors since 2014, when the search engine giant began prioritizing SSL-encrypted URLs — i.e., web addresses that start with HTTPS:// rather than HTTP://. It’s been a minor factor so far, but is expected to carry more weight soon in light of growing concern over privacy and data usage.

These issues have been top of mind for most consumers for the past several months, thanks to multiple data breaches at major companies that made national headlines last year. Now, 95% of Americans say they’re concerned about how companies use their data, and more than 50% are looking for new ways to safeguard their personal information. That includes avoiding websites that could pose a threat to their data — 85% of people won’t continue browsing if a site isn’t secure.

👋

Final Thoughts

If the best practices we’ve detailed here all seem like a LOT to remember … well, they are. That’s why it’s important to hire an expert web design agency with a proven record of developing beautiful, fast websites with high conversion rates.

The good news is that if you’re reading this, you’ve already found one. Want to know how we can implement these strategies on your website? We’re happy to talk with you about your company’s website needs.

Related posts

Start your digital transformation today

Ready for a slick new website, increased traffic and more converting customers? Tell us a little about your business and we’ll reach out to get your project underway.

Start your web design project today