In three steps, we cover the most important elements of a business website.
Raise your hand if you think your business needs a website? (If you raised your hand, keep reading.) Now raise your hand if you think your business needs a great website?
Ok, yes, that was a trick question. First, we should talk about what makes a business website great. Turns out, a lot of things. We will walk you through some of the most important qualities of a top performing website. By the end of the blog, we think you’ll have your hands raised in the air like you just don’t care.
STEP 1: Pass the “50 Millisecond” Test
There’s not much you can do in under 50 milliseconds. Sneeze, blink a few times, and, oh, form an opinion about a website. Fifty milliseconds is all it takes for a visitor to judge your site and their option matters! If they like what they see, they’ll stick around. This gives you the chance to engage them further with your content or services.
If visitors are less than impressed, they can easily click the back button and find a competitor’s site they like better. The competition for web traffic is fierce!
The first step to a great website is making sure it delivers a good first impression by being user friendly. To pass that 50 milliseconds test, here are some things to watch out for.
Mobile Responsiveness
If you’re a frequent reader of our blogs, then maybe you already read our post, “Why Everyone Needs a Mobile Responsive Website?” To summarize, more than half of all website traffic comes from mobile devices. So, it’s important that your business website looks good on a mobile phone or tablet.
Nowadays it’s common for a theme’s structure to be responsive and have a flexible grid structure. But it’s not always perfect. Sometimes you have to adjust the CSS code to tweak the font size, alignment, and spacing to accommodate a smaller screen. Before you go live with a new website, make sure you look at it on your phone. This way you’ll know if any of those tweaks need to be made. Just remember, 57% of users won’t recommend a business with a poor website on mobile!
Fast load time
The internet has changed our expectations of how long we should have to wait for information. The expectation is that it shouldn’t take more than a few seconds. Today, 53% of mobile users will leave a website if it takes over three seconds to load. (Desktop browsers aren’t any more patient.)
Every one-second delay loading your website can cause a 7% conversion loss. Google calculated that if their page load slowed by just four-tenths of a second, they’d lose 8 million searches a day. As you can see, load time is a big deal breaker for website traffic and conversions. Search engines also look at load time, prioritizing faster sites in their search results.
We don’t recommend you use the old eye-ball test to determine if your site is slow. You might be a little biased about the results. (”It’s not that bad,” is a common phrase we’ve heard from clients.) To get the real answer, use free tools like GTmetrix. It will give your website an overall letter grade in terms of page speed along with the areas of improvement.
There are a lot of factors that impact your site’s load time, and some of them can get pretty technical. Common reasons for a slow load time include JavaScript issues, excessive HTTP requests, unclean code, large files, bad hosting… Unless you have a lot of coding and back-end experience, hire a professional website designer. They will take care of all of this for you.
SSL certificate
If your website uses HTTP (hypertext transfer protocol), you may have noticed a new “Not Secure” label in the top left of the browser.
In 2018, Google implemented a new practice to get more websites to transition to HTTPS (hypertext transfer protocol secure). The difference is that HTTPS uses an SSL (secure sockets layer) to encrypt information that flows from the server to the browser. HTTPS sites better protect sensitive information from being stolen.
Cybersecurity is a hot topic. Therefore, switching to a more secure HTTPS is a no-brainer. What consumer wants to enter their credit card information into a “Not Secure” website? Also, HTTPS positively impacts your SEO ranking.
But the process isn’t that easy. As this blog outlines, there are many steps. You have to purchase an SSL certificate to start. Many hosting companies include SSL certificates in their packages. But unless you have a working knowledge of websites, we suggest partnering with a professional website developer. They’ll know how to transition your existing site from HTTP to HTTPS.
STEP 2: Keep Your Traffic Engaged
Let’s say your website has passed the 50-millisecond test. (Hurray!) It’s time for step two of building a good website. Now that you’ve got your traffic’s attention, it’s time to keep it! The best way to do this is with a strong web design. Ninety-four percent of the time, people reject websites based on their design alone.
Great designs, unfortunately, don’t just magically appear. Instead, they start with a strong layout which is the framework of a website. Within that layout, you have images, text, and content that make up its overall structure. You want to be strategic with your layout so that it supports your website goals.
Let’s discuss some important things to consider when building a layout, shall we?
The Importance of Visual Hierarchy
When planning your layout, there are many principles of design that a web designer will follow. One worth mentioning is visual hierarchy. The laws of visual hierarchy help keep all the page elements, like images and text, balanced and organized by size, position, color format, and spacing.
For example, the most important piece of content on your website should also be the biggest. People naturally understand that bigger means “Look at me first!” Same with the position on the page. When is the last time you scrolled to the bottom of anything to learn more? Never. The answer is never.
When we designed Bake For Your Life’s website, we made the tagline big and clear at the top of the page.
Doing this set the tone for the products, the brand, and the rest of the web browsing experience. If the font were the same size as the body text or lower on the page, it would lose its effect. And the sentence would be confusing. When it’s big, you know it’s a title. But when it’s the same size as all the other text, it’s not clear what it’s intended for.
Visual hierarchy also helps dictate the appropriate balance between images and text. The more cramped and crowded a page’s content, the harder it is to read. Maintaining the right amount of space is pleasing to viewers because it removes clutter and improves clarity. In 2012, Google conducted a study that found more complex web designs were less likely to be perceived as beautiful.
When you look at the Bake For Your Life website, you can see how effective the spacing is.
Imagine if the text and product images were scrunched up next to each other. It would be hard to navigate the site and digest the information. But spacing makes it much easier to recognize the different packages.
Website designers earn their degrees by studying design principles like visual hierarchy. They know better than anyone what is visually appealing to the eye. Choosing to partner with a creative professional is the best way to ensure that your website will look stunning and make a lasting impression.
Fonts
Most people don’t realize that fonts don’t always look exactly the same on every screen. For instance, let’s say you have a thin font as your website header. It’s perfectly legible on a large desktop. But chances are, it will be too difficult to read on a smaller mobile screen.
A good website will use website optimized fonts. These fonts are available on a wide range of systems and browsers. They ensure that your site text has a consistent look on every device. Text that optimized for web can be easily selected, searched, and rendered with clarity on any browser. Google Fonts is a great resource of free web fonts that you can use.
Color
Roses are red, violets are blue, and color psychology is really true. Ninety-three percent of the time, consumers say that visual appearance and color are the most important factors when shopping for a new product. The same is true for the colors on your website: 90% of a viewer’s web assessment is based on color alone.
A strong web layout will use color wisely. First and foremost, your brand colors must be clear. Otherwise, how will you reinforce your brand identity? Color increases brand recognition by 80%. You want your brand to permeate through your website so people know, without a doubt, it belongs to you.
Designers will often create color palettes that have secondary and accent colors that complement the primary colors. When we designed Wagner Murray’s website, we used their primary colors, teal and grey, throughout the webpages. We did this intentionally to drive home their brand identity. But if we stopped at those two colors, the website would look… well, boring. That’s why we also used their copper accent color for call outs, creating energy and movement with these small pops of color.
There is such a thing as color overload. It’s tempting to highlight in yellow or use a red font. But a web designer knows how to keep color in check. If you have a polished, sophisticated brand identity, the word “SALE” in big red letters doesn’t match up. They’ll find the right colors to highlight important call outs that are in line with your brand aesthetic.
Images
Stock photography gets a bad rap for good reason. The images look staged and fake. And yet, pictures of giddy employees smiling around a boardroom table are widely used by businesses. We’re sorry to be the ones to tell you this, but those images aren’t convincing anyone!
While not all stock photography looks fake, you want to be careful using them throughout your entire website. Websites are an opportunity to connect with potential customers. Consumers trust authenticity, so if you use fake images it’s hard to ask consumers to trust you.
Hands down, the better option is to take your own photos. Capture the employees and office space that make your company unique.
STEP 3: Make it Easy to Convert
We’ve talked a lot about design elements, but we have to be honest. Pretty websites are nice and all, but if you’re going to spend time and money building a new site, you will want something in return. Money from sales? New leads? Yes, please!
That’s why the third step to building a good website is making sure it’s optimized for conversions. Put another way, if your website visitors are ready to contact you or purchase a product, make the process easy peasy lemon squeezy. Here’s how.
Smart Navigation
When Nordstrom added a Medium Leather Wrapped Stone to its e-commerce site, people were confused.
Still trying to figure out if this $80 rock being sold at @Nordstrom is a joke. #TBD https://t.co/GTwW9Kk5kv
— Cayla Durrett (@CaylaDurrett) November 27, 2016
Think of the wrapped stone as a cautionary tale for your website. Just because your web layout looks nice doesn’t mean people will find it functional. Pretty websites can actually turn business away if users don’t know where to go.
Before executing your web design, you should first map out your site. Put yourself in your customer’s shoes to plan your site navigation. The goal is to make sure it’s easy to get from a top-level page (like your homepage) to a bottom level page (like a blog article) and back.
Start by listing all the content on your website (blogs, articles, product descriptions, employee bios, etc.). Then figure out an orderly way to categorize them within your top-level navigation. The trick is to keep your navigation bar as simple as possible. Try not to have over 6 options if you can help it!
A well-mapped e-commerce site, for example, allows customers to navigate from “View Cart” to “Hats” and back to “View Cart.” The checkout process is fluid and uninterrupted thanks to easy site navigation.
Use clear navigation categories. A category like “About” is clear, whereas “What’s the deal?” is not. You want titles that give web visitors a clear understanding of what they’ll find on that page before they read the page content.
Keep the navigation consistent from page to page. This makes it easy for site visitors to find buttons and links. And keep your page elements consistent too! Meaning, format your headings all the same and make sure they’re visually different from sub-headings.
Smart CTAs
Any website worth its salt will have a call-to-action (CTA).There are many types and your website will probably use at least two. Some of the most common ones ask users to:
- Subscribe to a newsletter
- Access or download content
- Make a purchase
- Learn more
- Share on social media
Some CTAs lead to macro conversions. These are actions that directly affect your business. Examples include purchases, paid-subscriptions, contact form submissions, or phone calls. Other CTAs lead to micro conversions. These are smaller actions your website visitors can take that eventually lead up to maco conversions. For example, add to carts, newsletter sign ups, or content downloads.
To figure out which CTAs to use throughout your website, look at your webpages individually. Think about the person reading the page content and ask where they’d be in the conversion funnel.
Someone reading your About page is most likely in the awareness stage. They probably don’t want to “Call Today,” but would love to “Learn More.” People reading your blogs might not be ready to submit a contact form, but they’d probably enjoy a free download.
When you’re creating your CTAs, try to use action words or verbs. Instead of using “Email Signup,” try “Sign Up for Emails.” Use accent colors for your CTAs so that they stand out on the page and are easy to find.
Great Websites Take Great Effort
So there you have it! The three steps to creating a great business website. By now, you’re either feeling ready to swim or sink. If you’re feeling overwhelmed, that’s normal. Websites are a huge undertaking! They pull together a lot of moving pieces from your brand and business model. That’s why we always recommend working with an agency, even if in a consulting role. Having extra support to navigate the technical aspects of your site can really help. If you’re feeling stuck or have questions about your website design, feel free to drop us a line!
Want More Real World Marketing Advice?
Subscribe to our Lunar Ledger newsletter to receive awesome freebies and great marketing content.
