When you’re tasked with creating a website for your business, you’ll soon realize that there’s a whole new set of vocab for you to know.

Can you fake it until you make it? Sure, but luckily you don’t need to.

This is part 3 in a series of 4 posts where I’m teaching you the vocab you need to know to get started. So, here we go!

Backend vs. frontend

What’s happening behind the scenes on the server-side of your website is what’s called the backend. It’s the part of your site that you can’t see or interact with.

The frontend of a website is the part that you can view on-screen and interact with. It includes everything that your users experience directly.

Homepage

And what’s the first thing your dream client sees when they type in your domain?

That’s right, this is your homepage or the first page of your website. It acts as an introduction and gives an overview of what your business is all about.

Internal pages

So what are internal pages then? Well, these are pretty much all the pages that aren’t your homepage…your About, Services, and Contact page for example.

Above the fold

You’ve probably noticed that the most important information or really compelling headlines show up at the top of a web page or the part of the page that a viewer can see before they need to scroll down. This is what’s called above the fold.

This term comes from when newspapers were sold from newsstands. The newspapers were folded in half for display, so the biggest, most intriguing headlines were placed above the fold so they could be read by people passing by to grab their attention and entice them to keep reading.

Header

One element that’s always above the fold on a website is the header. It’s what you see at the very top of the pages of your website. It usually includes your logo and your navigation.

Sticky header

And you may have noticed that sometimes when you scroll down the page the header sticks to the top. This is what’s called a sticky header. These are useful for allowing your user to click to another page without having to scroll all the way back up to the top to get back to your navigation.

Navigation/Menu

Inside of your header is where users expect your navigation to live. Your navigation is your menu of links that make it easy for your visitors to move, or navigate, from one web page to another on your site.

Drop-down menu

Ideally, your main navigation is clear and brief so that your visitors can easily find what they’re looking for.

So, if you have a lot of content on your site, you may want to implement a drop-down menu. This is when related pages are nested below a link in your primary navigation. When you hover over the main link the drop-down menu appears.

Anchor link

When you have a website with just one page, there’s no need to have a navigation that links to multiple pages, but you do want to guide your viewers to easily find your information.

Anchor links are a great way to do this. When clicked on an anchor link jumps the user down to a specific place on that same page.

Hamburger menu

So what happens to your navigation menu when you’re viewing it on a mobile device? Most users now recognize the three short-stacked lines that appear at the top of a website on their phone or tablet as a way to access the menu.

This icon is called the hamburger icon because it resembles a hamburger in a bun. When clicked, it will toggle your navigation open and closed.

Hero Section/Hero Banner

Right below a website’s header is the hero section (or hero banner). This section usually contains a large, compelling image, an attention-grabbing one-liner (what I refer to as your BIG message), and sometimes also your primary call-to-action.

Hero Image

Your hero image then is that large, often full width, image that helps set the tone of your website by creating a unique atmosphere. This is the first image a person sees when they arrive at your website.

Heading Tag

On top of or near your hero image, there’s usually a really captivating headline or title of the page. These are usually labeled as a Heading 1 or an H1 tag. Then as you move down your content subtitles are labeled Heading 2 or H2 tags.

These heading tags are used to provide structure and allow search engines to index your content. They follow a top-down hierarchy and go from H1 to H6 throughout the body of your pages.

Body

What’s called the body is the large central area that makes up the majority of your website. It’s where the content of your website lives in between the header and the footer

Sidebar

Sometimes alongside the body, on the left or right, you see a sidebar. Sidebars are used to show additional information, such as ads, recent posts, or opt-in forms.

Footer

The footer is located at the very bottom of your website. This is the place where you can add in a bit more information, such as your contact information, social media links, or repeat your primary call to action.

Opt-In Form

The footer can also be a great place to add an opt-in form. This is an online form where visitors can subscribe to your email list by “opting in.”

Pop-Up

Sometimes you see opt-in forms appear inside of a pop-up.

A pop-up (or lightbox) is an overlay box that appears on top of the content of a web page. These can be set up to appear based on a specific action a user takes, like when they scroll to a certain part of the page, for example.

Parallax

You’ve probably seen an effect as you’re scrolling down some websites where the background images move more slowly than the images and graphics in the front. This is called parallax scrolling and it helps to create an illusion of depth on a page and add to your overall user experience.

Responsive design

One of the most important things you can do to create a good user experience though is to make sure that your website is responsive. Meaning that it will adapt to look good on the screen size your viewer is using whether it be a desktop, a tablet, or a mobile device.

Having a website that looks good is just one piece of the puzzle because it also needs to function properly. And, I’m sure you know that there are many more terms to cover when it comes to the technical side of a website which is what I’ll be covering in the final post in this series.

If you missed the 3 other posts that go over the basic terms you need to know, click the links below:

Digital marketing terms you should know (Part 1/4)

Branding and design terms you should know (Part 2/4)

Website tech terminology you should know (Part 4/4)