28 website design best practices
Your website should be as unique as your business but there are some core website elements that every single site online needs to have to be conversion-focused.
In today’s evolving online market, you only have 50 milliseconds to capture the interest and potential purchase from your website visitor. After those 50 milliseconds, most consumers know whether they like your site or not and whether they’ll stay or bounce back to their search, leaving revenue on the table.
When it comes to your digital marketing, your customers and their customer journey should be at the heart of everything you do. Let’s put ourselves in the footsteps of your customers and walk through your site – starting with the basic design and layout.
6 web design standards
Let’s cover six design best practices that are imperative to your site’s success. According to Forrester, a well-designed website can increase conversion rates by 200 – 400% and for every dollar that your company invests in your website’s user experience can bring a return of $100.
Ready to add that revenue? Let’s see how responsive design, your content layout, images, brand colors, typography, and your conversion flow impact your site’s performance and ultimately your bottom line.
1. Responsive design. comScore found that mobile devices account for nearly two of every three minutes spent online and with Google’s shift to a mobile-first index, your site needs to have a responsive design, meaning it adapts to whatever screen it’s being shown on.
Without a responsive design, your site’s ranking could drop and you could lose out on mobile bookings from customers who prefer to book on their phone.
Google offers a free tool to let you see how your site looks on mobile – find it here and test your site now! I’ll wait. Welcome back! If your site passed, great – you’re good to go! If your site isn’t responsive, talk to your web developer or start researching new CMS templates so you stop missing out on ranking opportunities and mobile bookings.
2. Content layout and whitespace. Did you know that 38% of people stop engaging with a website if the content or layout are unattractive?
While you want to find that healthy balance of including enough images, videos, and information about your company, you don’t want to step into the area of analysis paralysis where customers are overwhelmed with choices.
Using whitespace, intentional blank space, on your site breaks up your visuals and text blocks and makes it easier for visitors to scan your site quickly – finding what they came to your site for in the first place.
Take a look at the layout and ratio of content to whitespace on your site. Is it following an F or Z layout to draw visitors to the most important information while incorporating enough empty space to balance out the layout? If your site is a bit overloaded with content sections or images, see where you can reduce or remove excess content to add more whitespace to your site.
3. Images. We process images 6,000 times faster than words, so you want the images on your site to be worth not just a thousand words, but a thousand conversions. Use real-world images to sell the experience, product, or service you offer. Yes, real, meaning no stock photography here unless it’s absolutely necessary.
Focus on high-quality images, meaning the resolution is clear, so customers quickly know what the photo or video is showing. For resolution, you want photos at at least 1,000 x 800 pixels. Optimize your images so the resolution is good but the file size is easily downloadable. Use an image optimizer tool to get quality photos at a good file size.
Take a look at your own website now. Are your photos crisp and selling the experience? If so, good job! If you think there could be better images you need to determine if you can take them with your smartphone or if you want to hire out photography to a professional.
4. Brand colors. Make your branding stick out by using your colors on your site! Try to stick to two complementary colors, colors that are opposite on the color wheel, so you have one that you use as your brand color for headers and content sections and a secondary color so your CTAs really pop.
Of course you’re not stuck just using those two colors, you can also use shades of your brand colors, grays, or neutral tones to add dimension to your site design without turning your site into something psychedelic. Your brand colors relate back to your design and if it’s too hard to look at your site or the colors are too vibrant or making the text hard to read, users will go back to the search results.
Go to your own website and count how many colors you’re using. Are there areas you can tone down the color or lighten it up? Are your headers and CTA buttons different colors?
5. Typography. There are so many fun fonts out there that can add personality to your website, but there’s a reason you often see similar fonts across different sites – they’re readable.
No one is going to be able to buy your product or service if they can’t read what it’s called. Use a tool like the font pairer to see what fonts work well together and if they match your branding or detract from your branding.
Similar to brand colors, try to use only two – maybe three – fonts on your site to keep it consistent. Check out your own website now and take a closer look at your fonts. Do they work with your branding? Are they easy to read?
6. Segmentation. Finally, but definitely not least importantly is your segmentation. Unless you only offer one very specific thing. Use categories to direct your website visitors toward what they need.
There are services you can use to test the usability of your site and its segmentation where users are tracked and given specific tasks to complete. You can see how users actually navigate your site and hear their logic of why they’re clicking where they do to see if your site makes as much sense to your visitors as it does to your designer.
5 crucial website elements
Now I’ll move onto some specific elements your site needs on top of the design standards to meet the needs of your users. These include your navigation, contact information, CTAs, social proof, and your site’s content.
1. Consistent navigation. According to KoMarketing, 50% of visitors use your site’s navigation menu to orient themselves and learn more about your business. By having a consistent and well-laid out navigation, you can send visitors to the right page and even upsell them by showing them items they may not have considered before.
2. Contact information. KoMarketing also found that 64% of users want to see contact information on the company’s homepage and 44% will leave a website if there’s no contact information or phone number, potentially leaving bookings on the table.
Add your company’s contact information to your site’s footer so it’s available on every page of your website as well as a dedicated contact us page with that information and a contact form. Having ways to reach you readily available improves trust and adds credibility.
Your contact information can also have an impact on your site’s ranking via your NAP (Name, Address, Phone number). The search engines look for mentions of your business online to provide credibility for your business and by having your NAP on your site, you’re helping the search engines learn more about your business.
3. CTAs. Calls to Action or CTAs are links, most often in the form of buttons, that direct users to a specific action: Like making a booking, signing up for email newsletters, or visiting another page of your website. Common CTAs include Book Now, Reserve a Tour, Sign Up, Learn More, Shop Now, View Our Tours, Make a Reservation, etc. Using quality CTAs, you can improve your conversion rate and get more online conversions by guiding visitors through your site.
Make your CTAs pop on your website by using highly contrasting colors and putting them in prime locations on your site, such as your hero unit, centered below blocks of text, and so on. You may even add floating CTAs that follow a user down the page so they can take action as soon as they’re ready. CTAs are best done in the form of buttons as consumers are trained to look for them on websites. Buttons should have a defined shape or border, are a different color than their surroundings, and include text or the “call” part of a CTA.
A word of caution with CTAs, we don’t want to overdo it or confuse our website visitors. Have up to two CTA buttons per page, with one more prominent than the other.
Let’s take a look at your website. Can you easily spot your CTAs? How many clicks does it take from your homepage to get to a product or service page?
4. Social proof. Nielsen found that 92% of consumers trust recommendations from peers and 70% trust a recommendation from someone they don’t even know! OptinMonster defines social proof as “a psychological phenomenon where people conform to the actions of others under the assumption that those actions are reflective of the correct behavior.”
You can help customers feel like they’re making the right choice by booking with you by including reviews and testimonials on your site, preferably on your homepage or single activity pages.
5. Credible content. Let’s go back to Journalism 101 and talk about the inverted pyramid. Using the inverted pyramid, your potential customers should be able to answer the who, what, when, where, and why of your service or offering and have enough information to make their purchase then.
You can use other paragraphs to add supplementary information but the most important details need to be at the top. Credible content helps your site’s EAT (Expertise, Authority, Trust) which can impact your site’s ranking. The more credible and trustworthy your content is, the better your site could rank which means more customers landing and converting on your site.
When it comes to content, keep your paragraphs short or use bullet points to help customers scan and understand your content faster. It never hurts to double-check your work and ensure there are no spelling or grammar errors in your content.
SEO and technical elements best practices
You’ve got your design and you’re starting to add some really great content! But let’s take a second to talk about Search Engine Optimization, or SEO, and some technical elements your site needs to have to ensure it performs well in the search engines and driving customers to your site. In this section, I’m covering keywords, headers, URL structure, meta data, and site speed.
1. Keywords. Keywords are one of the most important factors when it comes to how well your site performs in search. Google uses keyword-based indexes to categorize sites and serve the right results to searchers. There are millions of smaller indexes for keywords and keyword phrases, for example Google has a whole index just on helicopters, helicopter tours, Hawaii helicopter tours, and so on.
With more than 3.5 billion searches happening each day on Google, your site needs to have the right keyword terms within its content to be indexed appropriately and served to your potential customers. Focus on real terms your customers use to find your business, generally think of it in terms of a location plus an activity. By optimizing your site for quality keywords, more qualified traffic comes to your site.
To create keywords, start with that location plus activity term and build on that by adding modifiers to create long-tail keyword terms. Say we go back to our Hawaii helicopter tours example. We could start building out additional keyword terms with:
- Kauai helicopter tours
- Hawaii helicopter tours at sunset
- Private Hawaii helicopter tours
- Family-friendly Hawaii helicopter tours
- Hawaii waterfalls helicopter tours
- 70-minute Hawaii helicopter tours
- Hawaii helicopter tours with lunch
A word of caution on keywords: Avoid keyword stuffing. Aim for a keyword density of 1 – 3%, meaning one to three uses of your keyword per 100 words. Keyword stuffing is a form of bad SEO and your site could be penalized and lose ranking for stuffing in keywords.
2. H1s, H2s, H3s. These are simply your headers that are structured in a way the search engines understand. These headers are also good for your human visitors as they help break up your site’s content and call attention to key pieces of information.
Use your H1 to say what each page is about and your secondary and tertiary headers to explain in more depth. Your H2s, H3s, etc. are ideal locations for keyword terms. It’s important to note that you can only have one H1 per page, but you can have multiple H2s, H3s, H4s, H5s, and H6s.
Let’s say your H1 is Sunrise Helicopter Tour as that’s the title of the tour you’re talking about. Your H2 could be something like, See the Sunrise on Our Kauai Helicopter Tour, and an H3 could be, Important Information About Your Helicopter Tour.
By using keywords strategically in your H1s, H2s, and so on, you can get more out of your site’s SEO optimization and bring in qualified visitors who are ready to book.
3. URL structures. Your URL structure, what’s in the address bar, is an often overlooked SEO element that can boost your site’s ranking and helps with keyword optimization. You want a URL structure that’s both human-friendly and SEO-friendly. Instead of having a URL like brand.com/page/tour2 which doesn’t tell the search engines what the page is about, nor helps your users quickly understand the URL, try having a URL like: brand.com/tours/kauai-sunrise-helicopter-tour.
Be intentional in how you structure your URLs. Take a quick look at your own site and click to an activity page. Can you tell just by reading the URL what the page is about? Could you tell what your company does by reading your URL?
Be sure to talk to a website specialist before changing any URLs as you’ll need to set up 301 redirects to keep your site’s authority and make sure the links point to the right page!
4. Meta data. Your meta data is essentially data about the data on your site. There are many forms of meta data, from page titles to descriptions, and they play in important role in optimizing your site for search. They may not have a direct impact on your site’s ranking, but with well-written page titles and meta descriptions, you can attract searchers to click on your link and book with you instead of your competition.
Set your meta descriptions at 160 characters and include a keyword and brand name in the description. Page titles should be 65 characters and explain what the page is about but also use modifiers to be more descriptive as well as keyword terms as those get bolded in search. Split up your page title with pipes, colons, or dashes to add more description or your brand name to your title.
An example of some good page titles include:
- Haunted Denver Tours | Original Ghost Tour of Denver
- Perth Pub Crawls – Australian Bars & Brews Tours
- Guided San Francisco Bike Tour | Mission District | SF Bikes
For your homepage page title, your brand name should come first and then share what you offer and where. The reverse is true for all other pages where you lead with the activity then say who you are. For example, our homepage page title could be: Maui Adventures | Hawaii Eco Tours. An activity page could be: Sunrise Haleakala Tours | Maui Adventures.
Check your meta data either on your website or by doing a Google search for your business and seeing how your descriptions and page titles look in the actual search results. Most Content Management Systems, like WordPress or SquareSpace, allow you to edit your page titles and meta descriptions or add plug-ins that let you edit your meta data.
5. Site speed. Did you know that your conversion rate can decrease by seven percent if there is a one-second delay in load time? By going from an eight-second load to two seconds, you could see conversion rates improve by 74%, according to Akamai. Site speed refers to how fast it takes your site to load for visitors to navigate it.
Test your site speed with Google PageSpeed Insights and see what improvements Google offers to speed up load time. A common load lag is large image files or excess widgets or site code. Optimize your images with a tool like imagecompressor.com to get the smallest file size without compromising quality. Google’s PageSpeed Insights tool will offer up other suggestions for how to improve your site speed, but most of those will need to be done through your web developer.
Security and legal elements
The elements in this section both have direct and indirect impacts on your site’s ranking and security.
1. SSL certificate. Your Secure Sockets Layer, or SSL, certificate means that your site is securing the data that passes from browser to web server. SSL is a part of your site’s ranking and helps customers feel comfortable putting credit card information in online.
Not sure if your site is secure? Simply look for that little green lock in your address bar or an ‘s’ at the end of your http:// prefix to see if a site is secure. If your site isn’t secure, you can buy SSL certificates for your site or get a free one, but paid ones are often more secure.
2. GDPR. The General Data Protection Regulation, GDPR, is an EU law for the protection of individual’s data and privacy. If you operate in the European Union or European Economic Area, you must have a visible disclaimer telling visitors how you’re using or tracking their data.
3. Policies and data usage. Are you collecting user’s information for email marketing or are you in any contracts with advertisers? Be sure to have the right policies and alerts set up on your site to remain in compliance and be transparent with your customers.
Good to haves
Let’s dive into some good to haves for your website design best practices.
1. Key product information. According to KoMarketing, 86% of visitors want to see information about your services once they land on your homepage. Make it easy for them to find the information they came for by having scannable content or using bullet points to list out the key takeaways like price, key features, benefits, and so on.
Open up your website and look at the product or service descriptions on your homepage or an offerings overview page. If you didn’t know anything about your own business, can you tell how much it’s going to cost you to purchase? When the services are available? Any warranties or guarantees? If you can’t see that, your customers can’t either and they don’t want to waste their time hunting down that information.
2. Seasonal information. Do you only operate in the summer? Are certain services only available in the winter? Are your photos and CTAs reflecting the current season and your offerings? It’s important to keep your site updated through the seasons to offer the most up to date information. You wouldn’t want to feature snowmobile rentals on your homepage when the trails are dry in July, but it is the perfect time to call attention to your mountain bike rentals. With each seasonal change, be sure to update your site’s information, photography, and CTAs accordingly.
3. Discounts/offers. Entice customers to book with you by sharing special offers or discounts. Knowing you offer discounts, customers will return to your website to take advantage of a new special or seasonal offer, ensuring repeat business.
4. FAQs. Make it easy for customers to find more information, should they need it, by keeping it all in one central location on a Frequently Asked Questions page. This stops them from leaving your site or abandoning their purchase because they can’t find the information they need.
5. Blog. If you have the bandwidth to blog or can hire someone to do it for your brand, the better your site will be optimized and bring in new traffic. Check out my tips for better blogging to get started!
Things to avoid in your site design
We’ve covered what drives conversions, but let’s take some time to cover what hurts conversions.
1. Stock photos. Stock photos shouldn’t be used on your website when you can use real-life photography from your tours or activities. Stock photos can be used as placeholders until you have images, but real-world photos are best to really sell the experience your customers are going to have. Real-world photos help boost your credibility and establish trust, whereas any business can use stock sites to get photos.
2. Unnecessary widgets. Do you have social media widgets, weather widgets, or other plug-ins on your site? These could be impacting your site speed and more often than not, don’t add enough valuable information to your site to cause the delay. Remove any widgets that are slowing down your site or aren’t providing any benefit to customers deciding whether or not to book with you.
3. Chatbots or intrusive pop-ups. Chatbots are rising in popularity but don’t always make sense for every website out there. If you have a lot of options or a higher price point, chatbots can help customers find what’s right for them. If you only offer a handful of products, your site should be easy to use and doesn’t require the help of a chatbot and could be deterring customers from making a purchase.
4. Competing CTAs. You never want to confuse customers with competing CTAs or telling them to do two things simultaneously. Focus your CTA on driving conversions. If you have to have two CTAs on a page, maybe a buy now button and an email newsletter sign up, use your primary CTA button for the Buy Now option and a secondary CTA, one that’s a different color or style, for your non-revenue focused option.
At the end of the day, when it comes to usability, your site must be:
- Effective: Are customers finding what they’re looking for?
- Efficient: Is your site speed meeting their needs?
- Memorable: Will users remember and recognize your website when they revisit it?
- User satisfaction: Have customers shared how much they love your site or do they share it with others?
Your website is a constantly evolving marketing tool and its design and functionality should be evaluated at least yearly to make sure it’s following website design best practices and meeting the needs of your customers. This list is meant to get you started on the right track, but you’ll have to make adjustments as necessary to meet the needs of your customers.