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

21 nov. 2019 • Durata lecturii: 18

Actualizat pe 15 ian. 2020, de către Closed User

Closed User

@EdwardKost

Closed User

Nu s-a putut efectua copierea în clipboard. Încearcă din nou după ce-ți ajustezi permisiunile.

S-a copiat în clipboard.

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.

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.

Featured Work in Website Design

Fearless eCommerce Website

de whatifdesignin

E-commerce Website Design

de pilipenko2001

Custom Design - Furniture Website

de mdataur15

Tattoo Masters - Web Design

de gonzalocuevasmen

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

There are tutorials available on how to do this with

and

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

RS Software

@kabirchy

30 USD/oră

4,7

(1624 recenzii)

PHP

JavaScript

Python

Website Design

Graphic Design

Accesează profilul

Rainstreamweb

@rainstreamweb

20 USD/oră

5,0

(93 recenzii)

PHP

JavaScript

Website Design

Graphic Design

Data Entry

Accesează profilul

Xportsoft Technologies

@pbsoftware

12 USD/oră

4,7

(266 recenzii)

PHP

Java

Python

Website Design

Graphic Design

Accesează profilul

Seabit Media

@seabitmedia

20 USD/oră

4,9

(6625 recenzii)

PHP

JavaScript

XML

.NET

Website Design

Accesează profilul

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

Middle Child

Sea Harvest

Kobu

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.

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.

Source: ghost.org

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

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

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

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

and

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

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.

Source: wpcrafter.com

Now click on "start cloning"

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.

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:

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.

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:

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

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:

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"

Source: 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.

Source: darrelwilson.com

Select Facebook Login setup:

Source: darrelwilson.com

Choose "website" as your login platform:

Source: darrelwilson.com

Next, enter the URL of your website:

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

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

and this one for

Source: darrelwilson.com

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.

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:

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.

UpdraftPlus

Duplicator

BackupGuard

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

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

sarahbanks@website.com

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