what's the goal of a website
The goal or purpose of any website is to be the digital ‘front’ for any information or content that you wish to display online. The content displayed on site can be for personal or business reasons. For example, a personal website could be used to showcase your work and skills or to act as an online portfolio or blog. On the other hand, businesses usually build websites to market their products or services, communicate with customers, host events or even sell products directly through their website.
Whatever the purpose of your website is, it’s beneficial to understand how websites are built and the components that go into making them. Let’s dive in!
major components
This article is going to be for non-advanced or ‘master’ users, I will be recommending methods that are beginner friendly (advanced post will come later).
At the highest-level, a website consists of three main components, the front-end design, the back-end code (and scripts) and the database. The front-end is what the user sees and interacts with when they visit a website. It includes things like fonts, colors, layout and imagery. The back-end is where all of the behind-the-scenes coding happens – this includes scripts that run on the server as well as databases that store information. Finally, the database stores all of the content for the website and allows it to be accessed by various scripts as needed.
It’s important to note that if you are building your own website, there’s little to no need to be a code-master in order to get something up and running. I myself have little knowledge on databases, scripts and coding but I use the open source software, WordPress, along with the page builder Elementor Pro to configure, design and launch my site.
website hosting
Let’s pretend you don’t know any code and want to get your website launched as fast as possible. Website hosting, which falls under the back-end code, is a service that rents out space on the internet for you to store your website’s files. Service such as Siteground, Squarespace, HostGator and BlueHost are among the most well known hosting companies. They provide affordable packages with varying amounts of storage and bandwidth so you can choose one that fits your needs.
There are ways to self host your website as well but this takes a bit more technical expertise and is usually not recommended for beginners (I won’t be getting into that in this article as the benefits of purchasing a hosting plan for beginner far outweigh other options.
front end
Next up on our list of components is the website design or ‘front-end’. This is what we call the visual aspects of a website, such as fonts, colors, and layout. Front-end design can be done with HTML, CSS and JavaScript – but there are also tools like Elementor, BeaverBuilder, Squarespace, and other page builders that allow you to build your site without having any knowledge of code (the one that supports this site is Elementor Pro).
domain name
A 3rd required component of any website is the ‘domain name’ or URL. This is the address of your website, like example.com or example.org. You’ll need to register a domain name and then point it to the hosting service you’ve chosen in order to get your site up and running on the internet.
My recommendation is to purchase the domain name from whichever hosting company you are going to use. This is because if you have to mess around with changing nameservers from the get-go you’re likely going to run into technical difficulties.
Front End Design Elements
Page Builders
I’ve already mentioned a bit about pagebuilders above but the simplicity of these tools can’t be overstated. They are a drag and drop interface that allow you to move elements around, change fonts and sizes, add images, videos and other media – all without any coding. I use Elementor Pro for the site you’re on right now (and most of my other websites). Elementor does indeed have a free version but my opinion is to just get the pro version (it’s worth it in the long run trust me).
navigation elements
The navigation elements are what allows the user to move around the website and find what they’re looking for quickly. Common navigation elements include menus, dropdowns and search bars. The menu is typically located at the top of a website, making it easy for users to see what pages are available. Dropdowns allow the user to quickly access a page or subpage from the main menu, saving them time. Search bars are great for larger sites with multiple pages as they allow users to type in keywords and find exactly what they’re looking for.
color scheme
Choosing a color scheme doesn’t have to be hard. Personally, if you have no idea how to start I might recommend looking at the free tool from ‘Cooolors.’ I’ll link to it below here but essentially it allows you to mix and match colors that go well together. This is super helpful for those of you that might not have little to no knowledge of color theory.
A good rule of thumb for color theory is the 60-30-10 rule. Here, you want the main color to be 60%, an accent color 30% and an additional accent 10%.
structure and layout
The structure and layout of your website will determine how easy it is for users to navigate and find what they need. A well-designed website should have a logical hierarchy with clear pathways that lead from the homepage to various sections and pages. Common navigation elements such as menus, drop-down lists, search bars, breadcrumb trails, and footer links should be used to guide users to the information they are looking for.
sidebars
Let’s talk about website sidebars for a minute. While not required for any site, sidebars are a great way to add additional elements and information to your pages without making the main content too long or overwhelming. Common sidebar elements include search bars, recent posts and popular topics, social media links, contact forms, and related content panels.
The use of sidebars will depend on your content layout and width. Depending if you’re using a 1 or two (and sometimes even 3 column layout on desktop) you may be able to fit a sidebar in your design.
2 Column Layouts
A website or page with a two column layout will typically reserve 2/3rds of the width for the ‘main content’ of the site. This will be the main focus of your page and typically leave 1/3rd width to be used for a sidebar.
3 Column Layouts
A website or page with a three column layout will usually have 2 columns that are about 20% of the total width (40% between the two) and the 3rd column (typically the middle column) will be 60%. The smaller 20% columns will be reserved for a sidebar and sometimes a table of contents. The larger 60% column will be used for the main content.
Website Grid Layout
If you are new to designing and building a website, it might helpful to stick to a basic grid layout. This is a great way for beginners to create and organize content (of all kinds) on the page. Now this doesn’t have to be a strict grid where every column and row are the same but just a general idea of how you want your columns to look. This will help keep everything looking neat and organized.
Pages
The number of pages on your website is going to vary based on your needs. Generally, it’s a good idea to start with the basics and build out from there. For example, your website should have at least an About page, Contact page, Homepage, Products & Services page, etc. These will provide the foundation for any other pages you may want to add later on.
One Page Website
The exception to number of pages is the one page website. As the name suggests, a one-page website is a single page that contains all of your content and links to other pages within that same page. This type of site is usually used for personal or portfolio sites where it’s more important to present information in an organized, linear fashion.
Content Types
The content on your website will depend on its purpose – product descriptions for an ecommerce site, news articles for a blog, or educational material for a learning platform. Different content types should be used to make sure the user experience is as effective and engaging as possible. Text-based content such as articles and product descriptions should be paired with images, audio, video and other multimedia elements to help break up the page.
website images
The images that you choose for your site are incredibly important. Your site should look aesthetically pleasing – but more importantly, they should be relevant and appropriate to the content and message you are trying to convey. If possible, use high resolution images vs. blurry and stretched out iphone photos. There are many 3rd party sites such as Shutterstock, Envato Elements and Unsplash that offer stock photos for a relatively low price.
If you want a free route, something like the site “Pixels” is a great way to find something for free. Just make sure you aren’t stealing from other sites is the main concern.
One other thing to note, the images and stock photos that you use on your website don’t have to include people, businesses and other ‘live’ elements. In fact, if you want to go down the route of infographics, icons and other non-human elements, this can help convey the message of your website in a creative and interesting way.
Logos
Website logos are simply another type of image file that is commonly used on a site. Typically the logo is placed in either the header or footer of the site, sometimes both. It’s important for the logo to be clearly visible. Oftentimes the logo will link back to the homepage so that users can easily identify what website they are on. Additionally, logos should be kept simple, professional, and appropriate for the brand or company.
Forms and User Inputs
Forms are essential for collecting user inputs such as contact information or survey responses. Forms should be easy to use and understand, with clear labels and instructions on how to fill out each field. If a form is too complex or confusing it could lead to users abandoning the page altogether.
Video
Let’s chat about video content. Embedding videos from YouTube or Vimeo is a great way to make your website more engaging and interactive, especially if you’re creating tutorials or educational content. Videos can also be used for product demonstrations and advertisements, allowing users to get a direct glimpse into what you are offering them.
Please keep in mind that my opinions are scattered throughout this post as I’m trying to be transparent in the items that I use myself. Because of this I will mention that while YouTube is a good free option to get videos embedded to your site I pay for the higher basic tier of Vimeo in order to remove the ads.
I’ve found that if YouTube videos are embedded to a website they will show ads and ‘external’ links on the video area from other YouTube channels and related content (not necessarily yours). My two cents is that I want to keep visitors on my site rather than having them go down a rabbit hole of puppies, kittens and sharks (on YouTube of course).
website buttons
What are the right links to embed to your website buttons? There are a few different approaches you can take, depending on the goal of your website. If you’re looking to drive traffic to other websites, social media accounts or landing pages, embedding links directly to those sites is one way to do it. This would be especially useful when creating buttons for “Follow Us” or “Sign Up”.
If you want to direct users to a specific page on your own website, embedding buttons with the proper URL can do that as well. This would be helpful for linking to FAQs, Contact Us pages or any other internal page you want visitors to see.
Here’s a quick breakdown of what the buttons on my website have. I really only have buttons for 3 instances:
- Internal Links: To direct visitors to another page/post on my website for related content or a specific offer
- Booking links: 3rd party scheduling software (Calendly) to save me time when scheduling meetings
- Contact links: For getting in touch with me, Jon, for any questions or project work
Blog
There are many common misconceptions around blogs on a website. A blog is a great way to build your website’s visibility and presence on the web (digital landscape), while also giving you an opportunity to share more detailed information about yourself, your business or any other topic that interests you.
Personally, my blog is used to write posts like these (informational) that gain traffic in Google for more visitors to come check out. These posts are oftentimes used as landing pages to my site that I can link to from other sources.
I’m biased of course but my opinion is that content marketing is a worthwhile investment for any website as it’s one of the best ways to build an audience, drive traffic, and establish yourself as an authority in your industry or niche.
security
Let’s briefly talk about some components that can make your website a bit more secure. Ensuring that the proper security measures are in place is an important and necessary step for keeping your website safe from potential threats. Security measures can include:
• SSL certificates – these pieces of code tell browsers that your site is secure and encrypted, protecting user information when they’re on your site (it’s that lock symbol in the top left of the url search bar, standard on most website’s these days).
• Firewalls – these help to block malicious traffic and protect against hackers
• Regular backups – this is important for keeping your website safe, as you can easily restore it to a previous version if something goes wrong
• Security plugins – these add an extra layer of protection to help keep your site secure
If you’re using a reputable/quality hosting provider (I myself use Siteground), most of these features come standard so you don’t have to worry about installation. I believe the only security feature I had to do for my site’s security is install the SSL by clicking a setting ‘on’ when getting started.
Website Analytics
Finally, the last part of a website are the analytics. Analytics are used to track metrics like pageviews, session duration, and bounce rate – which can help you understand how visitors are interacting with your website. This data helps you make more informed decisions about things like content strategy and marketing campaigns so you know where to focus your efforts.
Of course these analytics mean nothing without the core components of a website (like content, navigation, and design). So it’s important to make sure that you’re taking the necessary steps to ensure your website has a strong foundation before you start tracking performance.
Google Analytics
One of the most popular 3rd party analytics tools is Google Analytics. It’s free to use and offers comprehensive insight into how your website is performing – including real-time data on visitors, pageviews, sources of traffic, bounce rate, and more.
It’s important to note that while analytics are a good way to measure success (and understand what’s working and what isn’t ), it’s not the be-all and end-all. Likes, shares, comments, conversions, etc., are all great indicators of success as well.
Personally, I use Google Analytics to see which pages new visitors are landing on, which pages are most visited and content popular by individual countries. Once I know this information I can integrate the findings into my content marketing strategy to create content that will draw more people to my website and appeal to the relevant visitors.
Google Search Console
The other analytics tool that I use is Google Search Console. It’s another free tool from Google that allows you to track how your website is ranking in search engine results. It can tell you which keywords are helping to bring more traffic, what pages are indexed by Google, and it can even alert you to potential errors on your site that might be hindering its performance.
Google Search Console also provides data such as the average position of your website for certain keywords, how many clicks each page is getting from Google search, and the click-through rate for your pages. This allows you to understand how well your website’s performing in terms of SEO and make necessary changes if needed.
Start Your Website
If you need help building or starting your own website, feel free to get in touch and I’d be glad to help. I use WordPress to build and manage all my sites and welcome any questions about the process.
No matter what platform you’re using to build your website, the components above will be utilized. Understanding how they all come together to create a working website is key to getting the most out of your site and ensuring it’s performing as efficiently as possible. Happy building!
