“Web design best practices” isn’t just a buzz phrase.
In any profession or skill, understanding the best core methods can help you create the best results.
When it comes to creating custom websites, the final product is always different, but each site should have some traits in common.
These traits are important for user experience. They’re important for getting your website to appear on search engines. They’re even important for paid ads.
Together, they’re important for the growth and health of your business as a whole.
Some of these web design best practices are technical. Some are guiding philosophies to keep in mind. All of them will help your business have a website both you and your visitors love.
The #1 Web Design Best Practice
Each time we meet with a new client, we always ask this question:
“What purpose do you want your website to serve?”
Or this variation:
“Why do you need a new website?”
Sucess in business or life, in general, comes from understanding why you’re doing something in the first place. When you don’t answer the question beforehand, you don’t get the best results.
You’ve been to a website like this before. When you visit the site, it doesn’t make an impression on you. You’re not sure what to do next. The company’s mission isn’t clear.
It’s just a website.
If you have a website already, think about the impression it has on your current visitors. Is your purpose clear? 樂威壯
Do you have a unique selling proposition to share? Do they know what steps you want them to take?
When you work with a full-service marketing agency like MLT Group, we can help you answer those questions.
The answers can be simple things like:
- Finding qualified employees
- Getting more traffic and leads
- Informing the customer about your product that requires research before purchasing
- Demonstrating your expertise in the industry
- Building your brand
The process doesn’t have to be complicated, but it has to occur.
While you’re thinking about the ‘why’ behind a website for your business, let’s dive into some specific best practices.
Responsive Design
Per Statistica, 52.4 percent of all search traffic comes from mobile phones.
Google announced that it will shift to “mobile first-indexing.” This means that Google will first look at the mobile version of your website when it decides how high it wants to rank your website.
If your mobile website has a bad user experience, or, even worse, you don’t have a mobile website, you will lose out on website traffic, leads, and ultimately sales.
Also, not having a mobile-friendly website is just bad for business in 2019.
Without knowing you, I know you have a smartphone. Knowing how much you interact with the web through your phone should tell you everything you need to know.
This is where responsive design comes in. Responsive design goes a step above and beyond creating a mobile-friendly website.
With responsive design, we build websites that accommodate any screen size from phone to tablet to desktop.
Here’s the short version of how we do it:
- Create unique designs for different screen sizes
- Build different versions of the web site depending on size
- Test all versions until the site displays seamlessly on any screen
Reponsive design is even better than building a mobile-friendly website because it’s more cohesive and uniform.
If your current website isn’t at least mobile friendly, we need to talk:
Create An Awesome User Experience
On each page of your website, you must consider the action you want your user to take and then create a design to accomplish that goal.
This is known as user experience design.
UX design, per the Interactive Design Foundation: “is the process of creating products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function.”
You can dive deep into the topic of UX and discuss different aspects, but the key is to figure out how to create a great user experience on every page of the website.
The elements on each page can vary, but include things like:
- Header space
- Content
- Images
- Buttons
- Animation
- Color
- Taglines
When we work with clients, we discuss these elements in-depth, but they’re all results of the user experience you want to provide.
If you do the process backward and piece elements together without understanding what you want to achieve, you often achieve nothing.
The Homepage
Your homepage is the most critical page of your website because it’s the first thing people see.
Internet visitors are picky and will leave your site quickly if your design doesn’t entice them to view more. This is bad for multiple reasons. One, you don’t want visitors to leave your site right away because, duh. Second, if people visit your site and leave right away, it can have a negative impact on your search engine rankings. Each time a visitor comes to your site and leaves right away, you get a “bounce” which is something Google doesn’t like to see.
So how do you come up with an attractive design that makes people want to click through?
Here are some of our homepage design best practices.
Put Your Best Stuff Above the Fold
When someone comes to your homepage, they won’t necessarily see or scroll through all of it. Depending on their desktop screen size, they’ll see what’s “above the fold.”
Here’s an example:
For your website design, make sure you utilize the important areas of your homepage that appears above the fold.
Header and Banner Space
Your header and banner space is usually a wide horizontal space that goes across your entire screen. There are many different ways to design this space and add content, but you want to make sure to add your most important information in this area.
These elements can include:
- Deals and discounts
- Unique selling propositions
- Call to actions
- Tag-lines
- Images
- Video
Here’s an example of an e-commerce store that features a discount deal in their banner space:
Here’s another example of a company who shows their unique selling proposition with a call to action (CTA) to go to an important page on their website.
Some industries, like real estate and custom home building, utilize images to show off the quality of their work.
When you work with a design and digital marketing agency, you’ll go through a question and answer process to figure out the most important aspects of your business. Then, those aspects will be incorporated into the design and adworcontent.
Graphics and Buttons
Visual cues help people understand what to do next.
Graphics and buttons take the guesswork out of decision-making for your visitors and make your website look more professional and fun.
“Break out boxes” are a classic example of great use of graphics. Break out boxes are graphics that feature and link to important pages on your website.
Here’s a good example of them:
Always think of ways the content on your site could be represented with graphics and images instead of text alone.
Interior Page Designs
Your interior pages are all the other pages on your site besides the homepage.
The most common interior pages with unique designs are:
- services pages
- product pages
- product category pages
- content pages
- unique individual pages
With each page, you should set an intention for the desired result you want to achieve.
There’s a theme here – always put your visitor in mind before you design a website page.
We work with our clients to create a strategy for each page on the website. We start with questions like:
- What do you want visitors to do while on this page?
- How do you want visitors to feel while on this page?
- What impression do you want to provide when visitors land on this page?
Let’s take a look at some of our clients’ websites and break down the strategy behind their page designs.
Services Page Design
Elcor Construction provides paving and excavating services.
On their services page, they wanted visitors to see their work in action. On the page, we used break-out boxes to highlight their primary services and make them easy to find:
The design on this page helps reflect professionalism, the quality of their work, and the idea they want the visitors to get the information they need quickly.
Product Page Design
Northland Fastening Systems provides stud welding equipment.
Each of their products — studs — has a wide variety of variables for each part. On the product page, we added a menu for the visitor to select the material, thread size, and length of their stud. Then, the product page automatically generates a part number to order the exact product:
Visitors can find the exact part they need. Other stud welding providers may ask to look through an entire table of numbers to find their part. This design strategy saves time and gives the user the impression they are working with a large company who can handle all their needs.
The sidebar menu also helps visitors find related products they might also need.
Product Category Page Design
Poppi Italian Leather sells custom handbags imported directly from Italy. Each handbag type is carefully selected and grouped into categories:
Each product photo uses high resolution, color balanced, and enhanced photos to make sure the custom quality comes across on the page.
Custom Individual Pages
Some pages are one-of-a-kind unique.
That’s exactly the type of design we created for 12 For Health — a health and wellness company.
They have a program called the 12 Habits of Health. For the 12 Habits page, we created a custom rotating gallery to feature snippets describing each habit:
The design also includes important statistics that show the importance of adopting healthy habits.
The color palette evokes positive emotions associated with a healthy life. The interactive style speaks to a sense of activity, which is a big part of a healthy lifestyle.
If you use a specific focus and intent on each page you create for your website, you’ll guide the user experience to help the visitor find what they need and achieve your desired outcome at the same time.
Aside from specifics for the homepage and interior pages of your website, there are some general web design best practices you should always follow.
Consider SEO and Content Marketing As a Web Design Best Practice
The way you design your website has an impact on how well it will rank in search engines for a number of reasons. That’s why it’s important to have a digital marketing plan in place to decide how the content will work within the frame of the website. There are also specific design techniques you can use or avoid to help your site’s SEO performance. When you work with a smart digital marketing agency, they’ll take a large number of factors into consideration. Here are some important elements to consider.
Content-Length
Often, the longer the content on your website, the better. The search engines want pages with as much information as possible. This has to be balanced with the design of your website. You don’t want readers to feel overwhelmed by your content. Fortunately, there are techniques you can use to weave the content into the design in a way both search engines and users will enjoy.
Use Subheadings
Subheadings (H1-H5) help break up the copy and give your reader a mental break between paragraphs.
Add Images
You can add images between content areas and even wrap them around the text of your website to enhance the way your content looks on the page.
Here’s a great example:
Create Panels for Different Topics
Let’s say you have a service page that has multiple sub-services underneath it. You can make each section of the service look unique by creating a panel for it.
Here’s an example below:
Take a look at this page. It has 500+ words of content, but it doesn’t feel like 500 words. From the user’s perspective, they’re seeing great information carefully woven into the design:
Build Your Website to Convert Visitors into Leads and Customers
Getting traffic to your website won’t make a difference unless you convert that traffic into a lead or a sale.
Your website design should have multiple areas with calls to action (CTAs).
CTAs come in many forms.
Contact/Request a Quote Forms
In addition to displaying your phone number on your website, you want users to be able to contact you by email.
You can create forms and place them in high-traffic areas of your website. This will give them the chance to reach out to you if they have questions or want more information.
Email Newsletter Sign Ups
Email marketing is still one of the top channels for communicating with customers and potential customers.
To get visitors to sign up, however, you have to go above and beyond adding a form to your sidebar that says “Sign up for our newsletter.”
They need a reason to sign up and they don’t want to feel like they’ll be receiving a newsletter — they want value.
How do you both provide and communicate that value?
Here are some tried and true techniques.
Offer Something Valuable for Free
You can offer visitors a valuable resource and ask them for the email address.
Examples can include:
- Access to deals and discounts
- Whitepapers
- A free email course
- Videos
- Quiz with answers
Check out this example of a giveaway in exchange for an email:
Notice the following:
- The headline and description for the give away are focused on the visitor
- The signup form is prominent – not tucked away in the sidebar
- Use of compelling copywriting to persuade the visitor
Give Them a Sneak Peek of What’s Inside
Notice the phrasing for this email signup form:
This copy answers the question “what’s in it for me?” up front
Strategically Place Your Sign Up Form
You want your email sign up form to appear where visitors are most likely to engage with it.
To some, this comes in the form of a pop up:
Although many people don’t like them, numbers show they work.
If you want to be less aggressive, you can create an “exit intent” pop up that only appears if the user is about to leave the website.
Often, you want to embed your signup form in an area that’s clear, visible, and obvious, like the banner space area of a page.
Phone Number
Many people still want to call your phone number directly.
You can use the header space of your website to display your phone number and add it in other relevant spots like your footer, contact-us page, and even at the end of your blog posts.
Conclusion
This is just a short list of the web design best practices you can use to create a website both users and search engines love.
A clear digital marketing plan from start to finish makes a world of difference when it comes to the success of your website.
Why not work with an expert team to help you?