Web design terminology you should know (Part 3/4)
Hi, I'm Alli.
I help passionate entrepreneurs, like you, create a strategic brand and website that stands out to your dream clients so you can run a successful business online.
My ultimate goal is to empower you with the tools you need to live your best life by doing the work your love.
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)
Are you more of a visual learner?
Here’s a video version of this post.
Free Conversion-Driven website planner
Turn website visitors into paying clients with this FREE guide!
Tired of your website just sitting there? It could be your BEST salesperson, converting visitors into leads and clients. Our free website planner will help you create a strategic website that magnetizes your dream clients and gets results.