Welcome to the world of website design! Not everyone can be an expert website builder, and all the puzzle pieces that make up a standard website can be confusing and daunting to the layperson, especially considering all the industry jargon and insider terms that experts use when describing internet sites. But no need to fret – if you're not tech-savvy, understanding the basic components that make up a standard website is not only easier than it may initially seem, but the information can also be very beneficial.
Whether you're planning to create a personal blog, launch a business page, or simply want to understand how websites work, understanding each function and how they work together can help you improve your own online offerings to the world. This easy-to-follow guide will break down the components of a typical website into simple, digestible cyber puzzle pieces. Let’s dive in!
The home page, or main page, of your website is what appears when a user visits your site for the first time. It a comprehensive overview of what your site is about and includes links to all major areas. And the header is the top part of your website’s main page. It’s the first thing a visitor will see when loading your home page.
The header is the website’s ‘title,’ so to speak. The header usually includes the website’s name or logo and a navigation menu. Think of it as the entrance to a house – the home page and its header are the first things anyone sees, and it gives them an idea of what to expect inside. A impactful header is critical because it is your website’s first impression. Size, font, and color should all be considered, as you are counting on the header – among other things – to keep a reader’s attention and want to discover more.
Once the header has their attention, the navigation menu should probably be one of the site pieces that attracts their attention next. Part of the header, the navigation menu is usually a series of text links or buttons that direct the reader to various sections or pages of the website. It's like a map of the house, showing you where everything is located (ex.: Home, About Us, Contact, etc.). Now that a user has come across your site and is intrigued by your header, they need to know how to get around your site and learn more about what you have to offer.
Immediately below the header is what is commonly referred to the ‘hero section,’ which often occupies the largest area of prime real estate within your webpage. This area usually features a large image or a slider (which we'll discuss shortly) accompanied by descriptive and informative text and a forceful, clear call to action. This section is designed to build upon the attention-grabbing pieces above and neatly summarize what the website offers, much like the summary on the back cover of a book. This is where a website can really wow potential customers, with handsome design and eye-popping colors and fonts.
A slider is a ‘dynamic’ portion of the hero section that can display multiple images or videos. These often rotate to give the website some movement, either automatically or through user interaction. A slider can be effectively used to showcase different content – such as featured products, recent blog posts, or key messages from your business – without taking up a huge amount of space on the site’s main page.
We briefly touched upon Calls to Action above, but what does that term really mean? A Call to Action, or CTA, is a prompt on a website that urges the visitor to take an immediate action. It’s what the informative and descriptive text on the site is designed to lead to. Common examples of CTAs could include "Sign up now," "Learn more," or "Buy today," depending on the action you are hoping potential customers will take.
CTAs are usually signified by buttons or links that stand out visually, so that nobody could miss them. They are typically bold, big, and brightly colored to catch one’s eye and encourage them to click. A good CTA is akin to a salesperson in a store asking if a visitor needs help – its job is to guide readers to the next step in their customer journey. And the effectiveness of a CTA button can greatly influence whether a visitor will continue to interact with the site.
You’ve now grabbed your reader’s attention with splashy headers, descriptions, and CTAs. Now you need to build your website out with more detailed content that demonstrates your deeper knowledge and expertise in your particular field or industry. That’s where content sections come in. These are exactly what they sound like: various parts of the website where different types of information are displayed. These are often broken out by sections and can include things like services offered, blog posts, product listings, and more. Each section is usually clearly defined and separated from others, similar to rooms in a house, each serving a specific purpose.
The footer is another area that needs little introduction or explanation, but is important nonetheless. Most popular websites reserve the bottom of every page for basic and necessary information about the website’s subject that most visitors want to be able to find quickly. Appropriate footer information might include contact details, additional pathways for navigation menus, social media icons and links, and required legalities, such as terms and conditions or privacy policies. Think of the footer as the ‘basement’ of a website, where you can find all the utilities you need.
A landing page is a specific page created for a marketing campaign that drives visitors to take a specific action. Maybe you’ve created a free guide that speaks to a common pain point among your potential customers and you want people to be able to download it. Or perhaps you are trying to get people registered for an upcoming webinar you are holding. A landing page is a destination where you can send these interested parties and announce your particular offering. These pages are designed to receive traffic from specific sources such as email links or social media ads, unlike a home page which receives traffic from a wide variety of sources. In other words, you can create an ad or send an email and direct people to the specific landing page link so they can find it immediately, instead of wandering around your website home page in search of downloadables or calendars.
“Alt text,” or alternative text, describes images on web pages. Some visually impaired users use screen readers to access the internet and cannot adequately see images or graphics. Accurate and descriptive alt text is crucial, as these screen readers will read out the alt text to describe the image. Additionally, alt text can help with search engine optimization (SEO), as it allows search engines to better understand the content of the images. Search engines like Google constantly monitor and rank websites based on these ‘nuts and bolts’ factors like alt text. Websites that do not include alt text on their pages can see their website ‘score’ from search engines suffer as a result.
A sitemap is another ‘behind the scenes’ facet of a website and is a guide used primarily by search engines to index the site. Its function is to list every site page in a hierarchical fashion, making it easier for search engines to explore, understand, and categorize the website’s structure. A thoughtfully structured and user-friendly site is desirable, rather than a complicated labyrinth of dead ends and links that go nowhere. For users, a clean sitemap is like an index in a book, helping them understand where everything in the website is located at a glance.
Lastly, we’ve mentioned links a couple times above. What are they? Hyperlinks, often shortened to ‘links,’ are usually underlined words, phrases, or even highlighted images that, when clicked, take the user to another page. This can be within the same site, known as ‘internal links,’ or to a different site altogether, aka ‘external links.’ These links are essential for connecting your content with other relevant information and for navigation purposes within your website.
You’ll notice that “hyperlinks” in the previous paragraph is blue underlined text, as were words in the header and CTA sections above, which means they are hyperlinks! Clicking on them will take you to various external websites that also talk about website components. The more interconnected your website is with other internal pages and the outside world, the more useful it will be for potential customers to follow lines of information to find what they are looking for.
--
Hopefully this guide has been helpful in giving you an early grasp of how websites function. Understanding these fundamental components will help you appreciate the structure and functionality of websites you may be planning to create, and even give you a deeper understanding of sites you visit yourself. Whether you're discussing your needs with a web developer or embarking on a DIY website builder on your own, understanding the basic building blocks and how they work together is the first step in constructing a website that wows your audience and makes them eager to learn more about you!