How To Build A Website

How The Internet Works

In today’s hyper-connected world, pretty much everyone knows how to access the internet and visit web pages, but how does it all work? What does it look like and what makes it all possible? To answer the question “How Do Websites Work”, we have to take a step back to “How Does The Internet Work?”.

At it’s core, the internet is made up of a massive interconnected network of computers. These interconnected computers are called “clients” and “servers”. Clients make requests for data (or “packets”) and servers in return deliver responses. These computers are all connected to routers which are used to ensure packets are delivered to correct destination.

The internet relies on a set of protocols. These protocols are what has allowed the internet to adapt to evolving technology and improve its own infrastructure. Protocols are simply rules and standards that machines use to communicate.

One of the most important protocols is called IP or “Internet Protocol”. When a device is connected to the internet, it is given a unique set of numbers called an “IP Address”. An IP address is used to determine the origin of a request so the response can be returned to the correct destination.

Another key protocol is the DNS or “Domain Name System”. The Domain Name System converts IP addresses into human readable text to make it easy for users to access information.

DNS Servers are used to lookup and find the IP addresses that correspond with the associated domain name. They are connected to each other using a distributed hierarchy to manage major domains (like .com or .org). When a browser makes a request for a domain name, the DNS protocol will lookup and provide the IP address back to the browser.

HTTP or “Hypertext Transfer Protocol” is the language the browsers and servers use to communicate with each other. When a browser makes a request to a server, they use HTTP to communicate and send information back and forth.

HTTP primarily uses two types of requests; “GET” and “POST” requests. A “GET” request is simply the browser asking a server for information. The server returns the request by sending the information in a series of small chunks (data packets). A “POST” request is when your browser sends information to a server.

A website is a collection of individual web pages, documents, style information and files that are hosted on a web server and associated with a domain name.

When a user wants to visit a website, they use a web browser to make an HTTP request to the web server. Web browsers interpret the data and display it HTML, a universal markup language used for displaying content in browsers. Content is styled using CSS and functionality is added using Javascript. 

Websites are crawled, indexed and ranked in search engines using bots and complicated algorithms. Search engines are massive databases used for finding web pages.

It can be easy to take the convenience and simplicity of the internet for granted but without clearly defined protocols and the scalable design philosophy it was built upon, the internet would not be what it is today.

Hosting and Domains

There are two requirements for starting a website; web hosting and a domain name.

Web hosting is the server where files and documents that make up your website are stored.

A domain name is the address that is used to find and access your site.

A web hosting server specifically built and optimized for storing websites and web applications. When people refer to web hosting, they are talking about renting space on these servers to host their websites. Web hosting platforms provide specialized software and services for web developers and webmasters for hosting and managing their projects.

There are several different types of web hosting, including:

  • Shared hosting - your website is hosted on a server shared with several other websites.
  • VPS hosting - your website is hosted on a single server that acts like multiple, separate servers.
  • Dedicated hosting - your website is hosted on a dedicated server.
  • Cloud hosting - your website is hosted in chunks on various servers around the world.
  • Managed hosting - your website is hosted and managed by a third-party service or platform (also called as "Built-in hosting). 

Web hosting plans vary in pricing, features and reliability. When choosing a hosting plan, it’s important to consider your project’s requirements: what is your budget? What content-management-system are you using? How much traffic are you expecting to receive?

The most basic and affordable type of web hosting is a Shared Hosting Plan. If you are starting a brand new website or you aren’t expecting much traffic when you start, a Shared Hosting Plan might be right for you. Hosting providers will often make it easy to upgrade and increase your capacity.

A domain name is the address that is used to access websites. The Domain Name System allow IP addresses to be converted into human-readable text, the most common of which is the URL (or Uniform Resource Locator).

A domain name is made up of three basic components:

  • Machine name - Identifies the purpose of the website (like www. or ftp:)
  • Mid-level Domain - The user friendly phrase or word used to lookup the domain’s IP address (for example “subdomain.domain” or “domain”).
  • Top-level Domain (TLD) - Identifies the registry entity the domain belongs to (like .com or “.org”). Also called a domain extension. 

Domain names are managed by Registrars who maintain an active registry of domain names and IP addresses under their management. When you want to purchase a domain name, registrars will claim it on your behalf and allow you to use it for a set period of time.

Good domain names are short, memorable and easy to type and can be said in conversation. There are no set rules for choosing domain names but you should try to avoid using general keywords, numbers, and hyphens.

Many hosting platforms offer domain registration with their hosting plans. This makes it easy to keep all of your website assets in one place. 

SEO and Analytics

Search engines work by crawling websites using a bot (or spider) and indexing them in their database. Using complicated algorithms, the index organizes, categories and ranks the web pages according to a number factors called “search signals”. When a user enters a query, the search engine will display web pages and content that the index has ranked as the most relevant according to the keywords in user's search query.

Search engines are constantly updating and tweaking their algorithms and how they rank websites; their only purpose is provide users with accurate, relevant and useful results.

There are four basic ways that people use search engines:

  • “Know” - when they want to find information.
  • “Go” - when they want to find places.
  • “Do” - when they want to complete an action.
  • “Buy” - when they want to purchase something.

SEO or Search Engine Optimization is the process of improving the ranking position of a website for specific keywords.

Keywords are phrases and terms used by search engines to show relevant content to users. Maintaining a concise keyword strategy with relevant terms to your content is crucial if you want to get found in search engines.

Keywords generally fall into two categories; “short-tail” and “long-tail keywords”. Short-tail keywords tend be more broad and consist of one or two words. Long-tail keywords are longer and more specific. It's important to understand the difference between the two and how utilizing a mix of the two is your key to a successful keyword strategy.

A well optimized web page uses specific keywords that relate to the content on the page. Search engines take into account things like keyword relevancy and density. If your content isn't related to the keywords on your page or if you are stuffing your page with lots of keywords and nothing else, search engines will catch on and your pages could be poorly ranked.

Use thoughtful keywords and regularly audit your site for areas of improvement. Here are some of the place you can optimize your site for keywords:

  • URLs,
  • Title tags,
  • Meta descriptions,
  • Page titles,
  • Header tags (H1, H2, H3),
  • Bolded and italicized text,
  • Anchor text and links,
  • Image titles and alt text,
  • Page content,
  • Blog categories, tags and posts.

Increasingly, search engines are using user-experience signals in their ranking process. User-experience includes things like page load speed, layout, navigation, mobile-responsiveness and page engagement. It’s not just about providing useful content anymore, it’s about providing an amazing experience.

The process of ranking websites in search engines is a constantly changing discipline with new guidelines and best practices being introduced regularly.

As the way we use the internet changes, so does SEO. Search engines like Google and Bing alter their algorithms and processes in order to provide the best (most relevant) answers to their users.

Using Google Search Console

Google Search Console is a free tool provide by Google for submitting your website to the index and gaining insight into search rankings and queries related to your website.

Getting started with Search Console is simple. Sign up for an account and you will be prompted to add and verify your property (website). Once your site has been verified, you can submit your sitemap and ask Google to crawl and index your website.

A sitemap is a file used to list all your site pages and provide information about your website hierarchy. Bots and crawlers use sitemaps to collect information about your website.

Once your site has been crawled and indexed, Search Console provides useful reports about your website’s search engine performance, like search traffic analytics and other tools for managing your website’s online search presence.

Google Search Console is an essential tool for managing your site’s search presence, gaining insight into search traffic and optimizing your site for organic growth.

Using Google Analytics

Web analytics are a method of tracking and measuring your website’s performance. Web and user analytics are a powerful way to gain valuable insight into how people are using and engaging with your website.

Analytics tools work by installing a small snippet of code on every page of your website. The code collects anonymous information about your website visitors and their behaviour, including their location and browser, their path through your website, and how they interact with specific pages. All of this information is then sent to Google Analytics for your analysis.

Google Analytics is a free analytics suite provided by Google. In addition to user reports and insights, you can also track things like conversions and goals. The structure of an analytics account looks something like this:

  • Account - The top level entity used to manage multiple Analytics accounts.
  • Property - A single website or app. Each property is given a unique tracking code.
  • View - A defined way of viewing and manipulating data in a single property. You should always have a raw, unfiltered master view for data integrity.

Google Analytics provides various ways of viewing website data in the Reporting interface, including;

  • Real time - see user data in real-time (users on your website right now).
  • Audience reports - learn about user demographics.
  • Acquisition reports - learn where users are coming from.
  • Behaviour reports - learn about user engagement.

Understanding how users are interacting with your website using Analytics is key to providing a better experience and learning more about your audience.

Planning Your Website

The Planning Stage is arguably the most important process you can go through before starting a web design project. Understanding what you are setting out to build and how you are going to build it is your key to launching a killer website.

Before you jump into building your site, here are some of the things you should know:

  • Purpose and Goals - What are you building and what are you trying to achieve?
  • Branding and Design - What colors, fonts and brand/domain name will you use?
  • Sitemap and Pages - What pages do you need to create?
  • Content Planner - What content will you include?

To help you answer these questions, I've created a Website Planning Workbook to guide you through the website planning process. To complete the workbook, open the the google doc, click on "File > Make A Copy". This will create your own copy of the workbook for you to fill out.

Launching Your Website

Once you've built your website, your next step is to launch and share it with the world! Before you do, you should do a quick SEO audit and ensure everything is ready for your website launch. This includes things like checking your copy for spelling errors, securing your site with SSL, and submitting your site to search engines. Here are some of the essential things you should check before you launch your site:

To help you with this, I've created a Launch and SEO Checklist. Use it to ensure everything is in place to launch your website. To create your own copy of the checklist, click on "File > "Make A Copy". This will create your own version of the checklist in Google Drive.

Web Design Resources