Building your business' website from the ground up
Not sure how to create a website for your business? We'll show you how
The business world has changed dramatically in the last 20 years. In today's business world it's almost impossible to make any sales without a business website.
But how do you build a website from the ground up? In this multi-part series we'll guide you through the complete end-to-end process of building a successful website for your business, from writing up an action plan to securing your very first customer.
This is part 1 of our ultimate guide to building a website series. To navigate to any of the other chapters refer to the table of contents below:
Now let's jump right right in.
Planning your website build
This is the point most business owners screw up. They jump right into website design mockups without formulating an action plan first.
To ensure the entire project runs smoothly, you need to start with at least a basic plan.
All of the elements of website construction are covered by answering the following 3 questions:
1. What will the website say?
What type of questions will your visitors want answered?
What is your value proposition?
2. How will the website look?
What type of graphics or videos do you need?
What will your color scheme be?
3. How will your website get customers?
Will you be paying for traffic (search engine marketing), or getting free traffic (search engine optimisation) or both?
You should start by answering these questions as simply as possible to get your ideas out of your mind and onto paper. Not only will this help you estimate the timeframe of the project, but it'll also uncover any difficult tasks you should outsource to others.
Setting up your building blocks
There are 3 essential building blocks you'll need in place to make the creation of your website possible. Let's go over each of them.
1. Domain name
This is your web address. For example, "www.tesla.com." You can see if your domain name is available by searching for it in a free online tool.
If you want to secure your ideal domain name before anyone else does, name.com is a great choice. Name.com gives you the option of purchasing the domain name alone.
If you know which platform you'll be using, you can use their dedicated domain name search tool and purchase your domain when you sign up to their platform.
For example, if you plan to build your website on Squarespace, you can search for your prospective domain name from their dedicated search tool and then purchase it when you subscribe to their service:
If you're confused about all the different platform options, don't worry. We'll discuss them in detail shortly.
With your domain name purchased, the next step is to add it to a hosting plan.
2. Website hosting
A website host provides the technology and storage required to make your website visible on the internet. Any images and content you upload onto your website will be stored with your host and not on your computer.
There are several hosting options available. As mentioned, some of them also offer domain name registration as well as website builder tools in their hosting packages:
3. Choose a website platform
With your domain name and hosting purchased, the next step is to choose a platform to build your site on.
If you purchase a domain before choosing a platform, you can transfer it to your chosen platform in just a few steps. Every web platform provides unique instructions for doing this.
Your choice of platform depends on how complex your business website needs to be, and also your web development capabilities.
If you have little to no web development experience, Squarespace and Wix are the simplest site builders to use, and because they also offer web hosting, you could have a website built and running online in minutes.
These web platforms allow you to create a website with a drag-and-drop builder.
Wix drag-and-drop builder in action - Source: gonewmommy.com
If you don't have the time to build a website from a blank canvas, you can choose a template and customize it to your liking
Squarespace template library - Source: squarespace.com
If you're really short on time, Wix offers Artificial Design Intelligence, or Wix ADI, which will autonomously build a custom website for you based on your answers to a few questions.
Because these builders allow you to publish a fully functioning website in a short amount of time, they're a great option for quickly launching a basic ecommerce store before an upcoming sales season.
The caveat of these drag and drop builders is that they're not designed for complex websites. So if your business website requirements are beyond just the static display of information, you're better off using a more scalable platform like WordPress.
Have a look at the video below for a step-by-step tutorial on how to build a website with Wix:
If you want to build an ecommerce website with Wix, follow this tutorial:
Here's a step-by-step tutorial on how to build a website with Squarespace:
Here's a tutorial for building an ecommerce website on Squarespace:
Building a website with WordPress
If you have complex website feature requirements, you should build it with WordPress.
Wordpress is an incredibly popular platform choice. In fact, about 26% of websites on the internet are built on WordPress.
Because of this popularity, some hosting providers offer specific Wordpress hosting plans that are run on dedicated WordPress servers for optimum performance.
These hosting plans come with WordPress pre-installed, so you can instantly start using the platform right after signing up.
Godaddy offers a dedicated WordPress hosting plan:
If you purchase web hosting separately, you'll need to install Wordpress manually (don't worry it's free).
The great thing about WordPress is that it's adaptable to a broad range of skill sets, so the platform can be used by both novice website builders and seasoned developers.
The tutorial below shows how to transform WordPress into a drag-and-drop website builder for those who don't know how to code.
Beginners can also build an ecommerce store with WordPress:
But if WordPress needs to be actively customized into a drag-and-drop builder, why would you choose it over dedicated drag-and-drop builders like Wix and Squarespace?
By building your website on WordPress, you'll always have the option of scaling the complexity of your website in the future.
Because WordPress is open source, its coding structure can be completely modified. So if you ever want to implement a particularly complex feature, simply hire a web developer and they'll personalize your WordPress website accordingly.
Which bring us to our next point: How do you decide when you need to hire a web developer?
The best way of answering this is with some examples.
The websites examples below are WordPress websites created by web developers. If any of the functions or visuals mirror what you have in mind for your website, you'll need to hire a web developer to create it for you.
Click on the images to explore each website in a new tab:
Invictus Games 2018
Keep in mind that you don't need to only outsource complex projects to web developers. If you just don't have the time to build your website, even with a drag-and-drop builder, you could completely outsource it to a web developer and focus on other, more important tasks.
Alternative to WordPress
Some business owners don't need a fancy website, just one that can publish blogs. If you find yourself in this category, the blogging platform Ghost is perfect for you.
Ghost was developed for those who don't need the extra bells and whistles of a complete content management system like Wordpress, but just a simple blog publishing platform.
Because Ghost is solely focused on blogging, the menu is built around blog creation. There's no clutter. Just a clean, easy-to-navigate interface.
Ghost's markdown editor streamlines blog editing. Editing options become visible as you select different sections of the blog, so there's no need to continuously navigate to the main menu.
The Duckduckgo blog was created with ghost. Click on the image below to see how it works.
Ghost is open source, and the coding is customizable, but there are limitations, so advanced websites are best created with Wordpress.
But in saying that, if you need a complex website but you prefer Ghost's blogging interface, you could install Ghost on a subdomain, separate to your main website.
That way all of your bloggers and content creators will only need to log into this sub domain, leaving your main website untouched. This will remove the possibility of accidental design modifications and greatly minimize the chances of a security breach.
Mozilla does hosts their Ghost blog on a subdomain. As you can see, their main website domain is Mozilla.org:
But their blog is installed on the subdomain blog.mozvr.com
Setting up a staging site
When modifying your website or experimenting with new features, you shouldn't be working on your live website. If something goes wrong, your website could break which will cut off all your traffic while you scramble to get it up and running again.
Instead, you should always work on a duplicate version of your website set up in a separate staging environment. Any changes you make in this staging environment will not effect your live site, and when you're ready, you can push this staging website over to the live environment without interrupting your internet presence.
This sounds complicated but thanks to plugins, it's super easy.
It is important to note that the free version of WP staging will only push your website over to a staging environment but it will not then push any changes you make back into the live environment. If you want this option you will need to upgrade to a paid subscription. For more details, refer to their pricing packages.
If you're not in a financial position to upgrade, you can just use this staging environment to test any changes you wish to make, and if nothing breaks, apply them to the live site.
When the WP Staging plugin is activated, select it in the left hand menu of your Wordpress Dashboard and then click "new staging site."
Next, give your staging website a name. You can delete it after you've finished testing in this environment and keep creating new staging sites every time you need them. So maybe name it as the day and time you created it.
Don't worry about the below entities, DB tables, Files, login options, all of your website data will autonomously be distributed into each of these segments during the migration.
Now click on "start cloning"
And that's it!
The plugin will duplicate your entire website into a seperate web folder on your server, this should take between 2 - 5 minutes.
Once completed, a link will become available for you to access your staging site.
You don't need to worry about anyone accessing your staging site, you need to login to access it. This is great because you don't want Google automatically indexing your staging site and then penalizing you for duplicate content, it's really bad for SEO.
Here is the page that loads when your staging site link is clicked:
To log into your staging site, use the same admin login credentials as your original website.
Once logged in, everything will look exactly the same except for a bright orange header that conveniently reminds you that you're in a staging environment.
Social Login for your website
86% of users are inconvenienced by having to create new accounts on websites, so if you're creating a membership website, you should simplify the login process with social login options.
Social logins allow users to sign up to a new service almost instantly, often with just a single click, rather than having to go through the arduous process of proving their email, a new password and then verifying that email etc.
And a simplified process = increased conversion.
You should adopt this as habitual UX practice, always aim to simplify every process to a minimal number of steps.
Here is an example of a social login form for Pinterest:
As you can see, users have the option of signing up with their social media credentials, either for Facebook or Google.
Don't worry about getting access to sensitive user information, think of social login as solely a verification from social websites that a user is legitimate and registered on their system, so there's no password exchange.
Here is a helpful explanation of the social login process.
How to create social login for wordpress
Once the plugin is activated you will need to set it up by integrating each of the social login options you want to offer.
Let's walk through this process.
On the left hand menu of your Wordpress dashboard navigate to Super Socializer > social login
Select all of the social networks you want to have as as a login option and then paste their unique identifier in the corresponding fields below:
To set up a social login for Facebook you can learn the process by reading their documentation, or alternatively follow the steps below.
You will first need to register as a developer with Facebook. Head over developers.facebook.com and login using your personal facebook credentials.
You will then be presented with this welcome screen. Select "Create first app"
Give this App ID a name. For ease of reference use your website URL or website title. Also provide an email address to stay informed about the status of this ID.
Select Facebook Login setup:
Choose "website" as your login platform:
Next, enter the URL of your website:
After you click "save" you will be presented with some complicated looking code. If a web developer is building your website for you, they will need to embed this code into your website, but since you are using a Wordpress plugin, you don't need to worry about this code (phew!).
Select "Dashboard" in the left-hand menu and you will see the 'app' that you created. You will also see its ID, this is what you need to paste into your Super Socializer app:
Refer to the below list of documentation for retrieving the identifiers for other popular social login options:
- Google social sign-in documentation
- Twitter social sign-in documentation
- Linkedin social sign-in documentation
How to set up social sign in for Wix and Squarespace
Wix and Squarespace do not currently support social logins for visitors. The reason being that these platforms are not designed to be used as membership websites. You should stick to Wordpress if you want to build such a site.
Installing an SSL certificate
An SSL (secure socket layers) certificate encrypts all of the information submitted on a website, this includes contact forms, order forms and credit card data. Because of their respectful handling of user data, Google gives precedence to websites with SSL certificates, so if you want to rank well in Google you must get one.
Most popular drag-and-drop web builder platforms, such as Wix and Shopify come with an SSL certificate preinstalled, if you are using a platform like Wordpress or similar, an SSL certificate will need to be manually installed.
You'll first need to purchase one from your web host. Usually they'll also be able to install and activate the SSL certificate for you, if not, refer to the instructions below for some popular web hosts:
How to manually install an SSL certificate with…
After your SSL certificate is installed it will take between 1 to several hours for it to be activated. Your SSL certificate is activate when your web address URL loads with "https" alongside a locked padlock symbol as follows:
Setting up and configuring website backups / security firewalls
To prevent a security breach from compromising your data and nullifying the hard work you put into making your website, you must protect yourself from cyberattacks.
Let's discuss the different security options available for the website platforms outlined above.
Wix security breach prevention
Wix has multiple security measures in place to protect its users, it has a multiple layer security architecture that identifies all attacks, and encrypts all user data according to the Payment Card Industry standards (PCI).
In the event of a security breach, Wix claims that your password cannot be discovered thanks to a special type of cryptography known as a message digest.
While these measures may seem impressive, they are not impenetrable. This is why Wix encourages its users to report any security breaches.
Because Wix runs all websites on their own servers, they prefer to take ownership of user security and don't accommodate 3rd party firewall solutions. On one hand this gives you one less thing to worry about setting up yourself, but on the other it forces you to have complete faith in Wix's defence tactics.
Wix websites are no easier to hack than regular websites, so the statistics seem to be in favour of your website's safety, however, if you want to establish some form of added security you can install the McAfee SECURITY app.
Wix McAfee SECURE
McAfee SECURE is a plugin you can install from the Wix App marketplace it autonomously scans your Wix website for any viruses and malicious activity. Once installed, your website will display the McAfee secure logo which will give peace of mind to your visitors and encourage conversions.
The Wix McAfee SECURE app has both a free and paid premium model. To benefit from its security scanning technology you will need to upgrade to the premium plan (starting at $4.99 USD per month).
How to backup a Wix website
Wix currently does not support the ability to backup your website externally. The best workaround solution is to create a manual backup by duplicating your site, however, this doesn't guarantee that the most up-to-date version of your website will be saved.
Squarespace security breach prevention
Like Wix, Squarespace prefers to take complete ownership of its user security. Some of the measures they take to achieve this are:
Web Application Firewall technology (WAF)
Dedicated security teams that continuously analyze potential threats
Credential encryption via password hashing
Squarespace doesn't seem to offer any security extensions, the only option you have in terms of adding layers of security is 3rd party customization. Since this does involves writing up custom coding, you will need the help of a professional developer if you have little experience in this field.
Keep in mind that not all 3rd party solutions are guaranteed to be compatible with Sqaurespace and since they fall outside the scope of the Squarespace's service, their support team is not obliged to help you with them. SaaS web builders are not designed for high level customization, so they get a little touchy when you mess around with their coding.
If you want to have more control over your website's security, you are better off choosing a more agile platform like Wordpress.
How to backup a Squarespace website
The workaround to this is to save all of the text and images of each webpage in a Google drive folder, but you will need to also include screenshots of each webpage in order to have a record of the actual design competition, not exactly a highly efficient process.
Wordpress security breach prevention
Because Wordpress is a standalone content management system, you are responsible for supporting it with the appropriate security measures.
Follow these steps to keep your Wordpress website protected
Choose a secure web host (dedicated not shared)
Don't let pricing be the only decisive factor, cheaper usually means less secure. Dedicated server web hosting is the most secure style of hosting.
Sharing memory and processing power with others is a great way to cut-costs but it puts you at risk of being affected by the questionable activities of your neighbours. This isn't only limited to cyberattacks, since everyone on the same servers shares the same IP address, if one of your neighbours send a lot of spam, your IP address, and web reputation, will be blacklisted.
Most web hosts offer dedicated server solutions, you may need to give them a call to confirm.
Keep Wordpress up-to-date.
Wordpress regularly updates their software to arm themselves against the latest web attacks. To ensure you benefit from these security upgrades, it's your responsibility to update Wordpress at your end.
You will be notified of any available Wordpress updates upon logging in:
Install and activate an SSL certificate
Follow the process in the preceding section for installing an SSL certificate on your Wordpress website.
Install Wordpress security plugins
There are various security plugins available, the most trusted plugin solutions are listed below:
This solution was built specifically for the Wordpress platform. It's both a malware scanner and firewall in one
This solution is capable of identifying hackers by their IP address and preventing them from accessing your website. There are over 30 different ways this solution can keep your Wordpress website secure .
This plugin prevents annoying spam comments from infiltrating your blog posts and even contact forms by using real-time email validation.
Backing up your Wordpress website
Unlike Wix and Squarespace, backing up your Wordpress website is a very simple process.
The following plugins allow you to completely back-up your Wordpress website with a single click. You can even schedule regular backups that will occur autonomously without any manual intervention.
Keeping your web admin passwords secure in 2020
It doesn't matter how sophisticated your web security solution is, if your login credentials are weak, it's useless. In fact, according to the 2019 Data Breach Information Report, 80% of security breaches were a result of weak passwords.
To make your web admin portal difficult to hack, your password should follow the following convention:
Have at least 12 characters
Include letters (upper and lower case)
Coming up with a password that meets the above criteria isn't that difficult, the real difficulty lies in actually remembering it!
There's a trick to coming up with a difficult password you will actually remember. Start by thinking of a short fact about your life that naturally includes words, numbers and symbols. The more specific you get, the better.
"my favourite watch stopped working at 3pm in 97 when I was 13 years old and my allowance was $20 per week"
Now encrypt this sentence by shortening each word and implementing symbols. In this example we'll shorten each word to a single letter to keep it concise:
This password meets all of the above criteria, it's 21 characters long, contains numbers, upper and lower case letters and symbols
Notice how we didn't capitalise the first character, almost everyone does that, instead, be unconventional by assigning capital letters to random words.
It may take a few reptitision to remember this password at first but then it'll stick to your long term memory, especially if it's something personal to you.
Another way of encrypting a word is by substituting each individual letter with symbols / numbers, just make sure you don't use obvious substitutions like replacing "o" with "0"
The word "reality" becomes "r3@l1tY"
You could use a combination of this method and the above single letter method to construct your password sentence and make it even harder to crack.
The sentence "sardine ferrari 86 too much boiled broccoli for erica"
If you prefer to make your password a random combination of words like this, make sure the words don't logically relate to one another so that they can be easily guessed, such as "don't go chasing waterfalls"
Setting up a business email account
It's important for you to also create a business email account to represent your business in a prestigious manner.
A business email is one that includes your website URL, for example:
The easiest method of doing this is via G Suite. All you will need is a Google account and proof that you own your domain.
This isn't a free service, business accounts are priced at $12 USD per user per month and enterprise accounts at $25 USD per user per month.
A business account is more than sufficient for most, you get unlimited cloud storage and a vault for archiving data, but you can compare and contrast all the plans to decide which one is best for you.
How to set up a business email with G Suite
Setting up a business email with G Suite is a simple 3 step process:
1. Choose a G Suite package
Sign up to your preferred G Suite Package. You can sign up for a free trial before committing, You
2. Add users to your account
Next you will need to create user profiles for each of your email addresses. If you have multiple people in your team you can create an email specifically for them. Head to the admin console home page and then click on Users.
You are free to choose any convention, some commonly used combinations are"
You can even add a photo for each user. After you have set up each user profile they will receive an email (to their personal email address you entered) with instructions on how to sign in.
3. Verify your domain
You need to provide proof that you own the domain you wish to connect. The process of verifying ownership is different for each website host.
Once set up it can take a few hours for your email accounts to be activated. To check whether your G suite account is activated, send an email to yourself from your personal email account, once received, you should be ready to go!.
With all your building blocks now in place, the next step is to create a wireframe design for your website.
In part 2 of our guide, we'll show you how to put your website structure together with wireframing.
No time to build your website? Hire one of our web developers to build it for you! Click here to get started today.