Building your business' website from the ground up

Learn the complete end-to-end process of building a successful website for your business in our comprehensive guide 
Jan 14, 2020 • 19 minute read
Edward Kost @EdwardKost
Technical Co-pilot
Cover photo for Building your business' website from the ground up

Mantente actualizado

Suscríbete a nuestro boletín de noticias para mantenerte al día en los temas que importan.
¡Gracias por suscribirte! Revisa tu bandeja de entrada para nuestra próxima actualización.

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:

Part 2: Dummies guide to wireframing a website

Part 3: How to design your brand identity

Part 4: Ultimate guide to designing a beautiful website

Part 5: 2020 SEO guide - How to write website content

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.

domain name registration

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:

Squarespace domain name registration

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. 

wixx 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

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:

wordpress hosting with godaddy

If you purchase web hosting separately, you'll need to install Wordpress manually (don't worry it's free).

There are tutorials available on how to do this with GodaddyBluehostHostgator and Hostwinds.

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.

Freelance Website Design Experts
$25 USD / hour
(79 reviews)
Website Design
PHP
Android
Diseño de sitios web
Diseño gráfico
$20 USD / hour
(63 reviews)
Website Design
PHP
WordPress
Diseño gráfico
Diseño de sitios web
$30 USD / hour
(252 reviews)
Website Design
Diseño de sitios web
PHP
HTML
WordPress
$30 USD / hour
(201 reviews)
Website Design
WordPress
HTML
PHP
Diseño de sitios web

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:

Rafal Boja

rafal boja


Middle Child

middle child

Sea Harvest

seaharvest

 

Kobu

kobu

 

Invictus Games 2018

Invictus games 2008

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 platform menu

Source: ghost.org

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. 

ghost platform editor

Source: ghost.org

The Duckduckgo blog was created with ghost. Click on the image below to see how it works.

duckduckgo ghost platformSource: spreadprivacy.com

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:

mozilla homepage

But their blog is installed on the subdomain blog.mozvr.com

mozilla blog

If you're wondering how you can create a subdomain, here are some tutorials on how to do this with GodaddyBluehostHostgator and Hostwinds.

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.

You will install and activate the plugin WP Staging. Another great option is Duplicator.

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."

wordpress stage site setup
Source: wpcrafter.com

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.

wordpress stage site setup
Source: wpcrafter.com

Now click on "start cloning" 

wordpress stage site setup
Source: wpcrafter.com

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.

wordpress stage site setup
Source: wpcrafter.com

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:

wordpress stage site setup
Source: wpcrafter.com

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.

wordpress stage site setup
Source: wpcrafter.com

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.

If you're not sure how to create a membership website, here are some video tutorials for Wordpress, Wix and Squarespace.

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:

pinterest social login example

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

To create a social login for Wordpress you will need to install the plugin Super Socializer. There are also many other great social login plugin options available.

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 

social login setup website
Source: darrelwilson.com

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:

social login setup website
Source: darrelwilson.com

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"

social login setup websiteSource: darrelwilson.com

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.

social login setup website
Source: darrelwilson.com

Select Facebook Login setup:

social login setup websiteSource: darrelwilson.com

Choose "website" as your login platform:

social login setup website
Source: darrelwilson.com

Next, enter the URL of your website:

social login setup websiteSource: darrelwilson.com

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:

social login setup website

social login setup website
Source: darrelwilson.com

Make sure you also include links to your privacy policy and terms of service in your Facebook developer App profile to give your social login a trustworthy reputation. You can write your own policies or use a template, such as this one for a Privacy Policy and this one for Terms of Service.

social login setup website
Source: darrelwilson.com

Refer to the below list of documentation for retrieving the identifiers for other popular social login options:

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:

SSL certificate proof

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.

mcafee security wix
Source: Wix.com

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

  • SSL certificate

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

Squarespace has similar roadblocks to Wix, there isn't a one-click backup solution. The best you can do is download a .XML file of your website, but this won't export all of the details of your website since Squarespace is constructed with Javascript and CSS.

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:

updating wordpress software
Source: Wpbeginner.com

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:

Wordfence Security

This solution was built specifically for the Wordpress platform. It's both a malware scanner and firewall in one

iThemes Security

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 .

Spam protection, AntiSpam, FireWall by CleanTalk

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 numbers

  • 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.

For example:

"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:

"mfwSw@3pmi97wiw13YO&maw$20PW"

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"

For example,

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.

For example,

The sentence "sardine ferrari 86 too much boiled broccoli for erica"

Becomes

"s@rd1neF3r@rri862MBB4er1c4"

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:

yourname@yourwebsite.com

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"

sarah@website.com

or

sarahbanks@website.com

or

sarab@website.com.

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. 

Google has created instructions for how to do this for different web hosts. If your host is not included in this list, you can verify your domain manually.

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. 

Read part 2 now.


No time to build your website? Hire one of our web developers to build it for you! Click here to get started today.

Mantente actualizado

Suscríbete a nuestro boletín de noticias para mantenerte al día en los temas que importan.
¡Gracias por suscribirte! Revisa tu bandeja de entrada para nuestra próxima actualización.

Talk to one of our Technical Co-Pilots to help with your project

Get Help Now
Artículos recomendados solo para ti
Our 2020 international marketing guide teaches you how to mine the goldmine of untapped international traffic. Do what your competitors aren't doing.
7 MIN READ
If you don't have an SEO strategy you're losing tonnes of traffic. Learn why your business needs SEO and how to hire the right expert for the job.
10 MIN READ
How to hire a freelance writer and build an effective content marketing strategy. Content is your most profitable marketing investment, make it count.
12 MIN READ
If you want to stay competitive in 2020, you need a high quality website. Learn how to hire the best possible web developer for your business fast.
11 MIN READ