Local Business Website Design: 7 Mistakes To Avoid Losing Customers To Your Competitors
Local Business Website Design (2020 Guide)
This step by step guide will teach you to identify these local business website design mistakes and help you to solve them on your own.
In this all-new guide you’ll learn:
- How to solve Favicon & Page Width Issue
- How to solve Site Navigation Mistakes
- How to structure Menus & Website Sections
- How to do Color Theme & Content Formatting
- How to solve Image Loading Issues
- How to solve CTA Button Issue
- How to make your website Device Friendly
First, you should be absolutely clear about what is the main objective of your website. A pretty website does not have any value if it does not prompt your website visitor to take action.
What Action do you want them to take once they land on your website homepage?
Do you want them to make a call?
Do you want them to schedule a meeting with you?
Ask for a Quote for Your Service?
What is the most important action you want your prospective client to take?
Determine this first and then go through this guide to turn your website to a 24 hours sales agent instead of confusing your prospective clients with blocks of irrelevant information that distracts your prospective clients.
Myths About Website Design
Many local business owners still think a flashy looking design which apparently looks pretty is all that they need to attract clients. They hire designers with no knowledge of digital marketing and understanding of website visitors’ behavior patterns.
These days you have less than 20 seconds to attract your prospective client’s attention. And if you fail to do so, they will leave your website without taking and action and find your competitor to get their job done.
Your website design needs to follow your overall strategic design plan and have all the mandatory elements placed in the right places supported by good design. Don’t have a strategic plan for your website? Contact us here for help.
If you have planned your website strategy well, the next step is to check all the design problems discussed in the guide and fix them to avoid losing your customers.
Install and Activate FREE Theme Builder Plugin
To help you make this changes, we suggest you install the plugin as guided below and create a test page following the guide below. Once you are comfortable, you can make the changes to your original pages.
In this article, I will teach you, how to solve the design issues with Elementor free theme builder plugin. Here is the link to download the plugin…
If you are unaware of how to install and activate the plugin to WordPress dashboard, then check this video to download and install the plugin on your website.
Before starting the process I want you to be aware that this plugin is only valid for the WordPress platform. If your site is not on WordPress then it will not be helpful for you.W WordPress is a widely accepted CMS platform (content management system) in the World. If you are not on WordPress we highly recommend you transform your existing website to WordPress asap. Need Help? Contact here
The video below will guide you how to install WordPress.
Contents
Section 1 :
Favicon & Page Width Issue
Favicon
A Favicon is mainly a shorter version of your logo and it works for your website branding.
It helps your target audience to locate your website easily when you have multiple tabs open.
Due to its tiny size, its best to make images one-to-three characters of text.
Page Width
Having a website with pages that do not have a fixed page width is another amateurish design mistake.
So first decide your website width and then make changes to apply it for all pages. I show you how to do it with Elementor Page Builder.
You can find it on the task bar of any browser with your site title when you visit your site URL.
If the favicon is missing on your website then this will be a mistake. Because the presence of favicon identifying your business or brand when a prospective client has many similar websites open on their mobile or laptop.
How To Fix This Problem
- Login to your WordPress dashboard
- Next hover on appearance and click on customize option.
- Click on site identity.
- Find the option named site icon.
- Upload a smaller version of your logo (Favicon) the dimension of which will be 512 in width and 512 in height.
- Click on SAVE to add Favicon To Your Website.
Find below the video representation of ‘How to add Favicon to WordPress site’
First login to WordPress and click on Elementor menu on the left hand side panel.
You will see various options under Elementor. Click on Settings, then go to style and fix the content width.
Watch the video below to do it easily.
Section 2 :
Site Navigation Mistakes & How To Fix Them
Website navigation is the primary and basic part of your website.
It should be properly organized.
In navigation you should mention all the menu items of your website.
Here’s How To Do it Easily :
Select the Customize option under the Appearance menu in WordPress
Go to Menus, create new menu, give a menu name, after that add all the menu items and give links then save.
1. Click on Customize option under Appearance
2. Click on the Menus
3. Click on Create New Menu
4.Type a menu name in the given box as shown below, ensure you check the primary option (as shown by the marker 2 in picture below) and then click on next
5. Click on add items
6. Add the menu items
7. Now your website menu is added. Here’s an example menu for our test site. Once Your Menu is added Click on Publish Button.
Section 3 :
Menus & Website Sections
Menus
All the menu items which have added in navigation must be sectioned properly on the home page.
It gives a basic idea to your visitors or target audience about the services that you offer. You should create sections based on your navigation menu.
Website Sections
Always remember website interface should be user friendly.
What you actually want to show your target audience should be properly organized and all the elements, contents you are using in your site should be simple and clear.
Menus
To do that Open home page by clicking Edit with Elementor mode,
After that a plus sign (+) will become visible on the blank page
Click on this plus icon (+) for adding a section. (see picture below)
You can choose the sections as different column structure. Select which column structure will be appropriate for your design. (see picture below)
Then add content to relevant sections click on save changes.
Watch this video so that you can go through this process on your own easily.
Website Sections
For this it is important to make a mindmap or prototype so that you are clear about where your site elements will be positioned.
Then use Elementor and drag the elements like a text editor, title, image box, buttons e.t.c.. on your home page. (Process already covered in the above video)
Botomline, you need to showcase your business offer properly. Here is an example of what is wrong and how to design correctly to make it Visitor Friendly.
In the above examples the left image is actually a better and proper user interface where all the elements are present correctly. More importantly, your “Hero section” which speaks directly about what service or offer you have is right at the top, making it immediately visible to your website visitors whether they are on a laptop or a mobile device.
The right side image is a wrong example of a user interface because of many reasons. But the most important reason is, instead of starting the page with what your visitor will get from your website (Hero Section), you start with “About” section, which frankly your visitor is not interested to know right at the beginning, because they don’t yet know what how you can help them (Hero section)
Need help to strategize your website design and what should go in your Hero Section? Contact for Help
Section 4 :
Website Color Theme & Content Format
Color Theme
Not only your website color, all your marketing materials, digital or offline marketing should use same color theme as represented by your brand.
Content Format
Your content format should be clean and simple.
Like your color theme, the typography of your website should be fixed before any design work is done. Without going into details to confuse you, you should have at least have decided on a font family, Font Size for Different Website Elements like Heading, Subheading 1, Subheading 2 etc.
Content readability is another very important factor that can make or break your site. Having blocks of content without proper formatting or alignment is another disastrous mistake of amateurish web design.
Color Theme
To make this happen, before starting your design you should create a color pallete in elementor and make use of colors based on that color pallete you have created to maintain the branding.
Check the video below to understand the process
Content Format
Make your Content formatting perfect with the below mentioned steps:
- Always use proper paragraph spacing with short sentences
- Use bullet lists wherever your content speaks about some lists.
- Use relevant images or visual elements to break the monotonous display of content blocks
- For Big Content Pages, use sections with different colors like the one you are reading now.
Section 5 :
Image Loading Issues
After your site loads, if the images didn’t open properly, then this will create a bad impact on your site visitors.
So before uploading any images for your site, first compress the image size. You can do it through an online image compression tool
Here is the link for the online image compression tool by ShortPixel. After compressing the images download the compressed images and upload them to your WordPress website’s media library. This will ensure you do not lose visitors due to slow loading images.
Check the below video to know how to compress any image using ShortPixel
Another key factor is the excessive use of stock photos on your website. Always try to use your own custom images that relate to your business.
Use of Java and Flash on your website will hamper your website performance and even can stop the website to be rendered and displayed to your visitors. This happens mostly when use excessive advertisements on your site.
Moreover, different browser interprets JavaScript differently.
Excessive uses of advertisements on your site will slow down your site loading speed as the Advertisements are coded in Javascript or Flash.
So try to avoid adding excessive ads on your site. It may be another reason for visitor’s distraction in your website. Here is an example,
Section 6 :
CTA Button Issues
Call-to-action (CTA) buttons are the buttons that are used on any webpage to help guide your website visitor to the action you want them to tke. For example – “Book a Call” , “Get A Quote” etc.
Proper CTA Button Placed In Strategic Locations on your webpage will help you to get more conversions from your webpage , i.e. you will be able to convince more people to take the action you want them to take once they land on your webpage.
Below are 4 examples of correctly structured CTA used in websites
Section 7 :
Device Friendliness
Responsive design can help to solve a lot of problems for your website. It will make your website mobile-friendly and makes it look perfect on both desktop and mobile screens thereby increasing the amount of time visitors spend on your site. This will also help you improve your rankings in search engines like Google.
After completing the design, check responsiveness of your website here
Did the website load correctly?
Is Your font size of your website getting displayed in other devices correctly?
Is your CTA buttons properly positioned while viewing on mobile?
Check the below video to understand better
Is the navigation menu opening correctly in mobile?
If not then your site is not device friendly.
Check the video below to make your navigation menu responsive
To make your website device friendly, go to the Elementor responsive option, and correct all the issues mentioned in the above 2 videos.
Section 8 :
Do's and Don'ts
Do's
- Follow the guide which have been mentioned above
- Try to reach a score of at least more than 85 out of 100 to reach a better positionTake Action on all the tips and recheck after fixing the problem.
Don'ts
- Never Copy Your Competitor’s Site Design
- Don’t forget to check your site in all device.
Now It’s Your Turn
This guide has covered a lot. But it is only one part of the process (the green section in the image below). This picture shows all the sections of our Website FOUNDATION BUILDER MODULE. It will work only if all other factors are satisfied.
To make your Local Business Website actually Functional and make it useful for your prospective clients, your website needs to have all the elements as depicted in the FOUNDATION BUILDER MODEL below.
Want your website to implement all the sections as depicted above to make it actually effective for your local business? It all starts with a FREE 15 minutes zoom phone call.
Click to book your Free Call here
Arnab Sengupta
Designer & Developer
Website Designing and Deployment is not only my profession, but my passion too.
I’m responsible for the designing and front end development of all website projects at VWIT.
I love design work – if you can dream it, I can do it.