News article

What on earth are they talking about? Understanding the basics of website terminology

While “Hamburger menu”, and “sliders” might trigger cravings for fast food, these terms are actually key ingredients in the recipe for building a website!

When you begin the process of creating a website, you will run into designers, developers and copywriters using all sorts of website jargon. Although it may sound like another language at first, once you break it all down, it becomes a lot easier to understand.

Just as you patiently explain everything to your clients, we’re here to share our wisdom with you in a friendly, easy-to-grasp way.

To sound like a website pro, here are 19 website terms to get familiar with. Most of these terms revolve around the design and content that make your website shine. As for the techy stuff, we’ll save that for another blog!

So, let’s unravel the world of website terminology, one term at a time.

Above the fold

We’ll kick things off with the phrase “above the fold”. This space is precious! It refers to the part of the webpage that users can see without scrolling down.

This is the first thing that appears when the page loads, so you want the content to be prime real estate. It’s where you introduce yourself, showcase what you’re about, and highlight who you help.

Animation

When you think of animation, your mind might wander to the enchanting world of Disney classics and vibrant cartoons. While I’d love to sprinkle Disney animation magic everywhere I go, sadly, I’m not referring to that type of animation.

What I’m speaking about is the various forms of simple animations you can use to bring your website to life and turn it from a static web page to something a little exciting. We’re talking about things like hover effects, page transitions or scrolling tricks. These small details make a whole new world of difference.

Call to action (CTA)

A CTA is like a signpost guiding visitors towards what they should do next when they land on a website. They are strategically placed and intended to provoke an immediate response from the user. CTAs can take various forms such as buttons or links. Examples include “Join our newsletter” or “Get in touch”.

Drop-down menu

When you’re aiming for multiple pages on your website without cluttering up the navigation bar, the drop-down menu comes to the rescue. This hides all available options until it is clicked.

Here’s how it works: you will have a primary option in the navigation, such as “About us”. When you click on it, drop-downs underneath are revealed, such as “Community work” and “Awards”. It’s a smart way to keep things organised while offering easy access to other pages.

Favicon

Not something to be overlooked, a favicon is a small detail, but very crucial. Short for “favourite icon”, a favicon is that little icon that appears just to the left of the page title tab in your browser.

Right now, you can probably see the Yardstick logo to the left of your open tab. Its main purpose is to help visitors locate your page easier when they have multiple tabs open.

Footer

This is where all the important stuff hangs out – your regulatory text, privacy policy, cookies policy and any other crucial information. You never need to worry about it disappearing either, as the footer will be displayed on every page of your website.

Hero banner

When you hear the word “hero”, you instantly think about capes, masks and someone who saves the day. Although your website’s hero banner may not come wearing a tight Lycra outfit, if done right, it will save the day and keep people on your website!

Think of a hero banner as the first impressive image or section that grabs the visitor’s attention when they land on a webpage. It makes a statement, communicates the essence of who you are and who you help, or highlights something essential. Remember, not all heroes wear capes…

Hero statement

Let’s add another hero into the mix! Your hero banner will contain what we call the “hero statement”. It’s a punchy headline or brief text that communicates your main message, offering a glimpse into what the purpose of your website is.

Let’s say you are a Chartered firm helping business owners prepare for retirement, we must include this within the hero statement so visitors don’t have any doubts about what your superhero power is!

Holding page

Good things take time. While you are waiting for your shiny new website, you may request for a holding page to be built.

A holding page will cement your online presence and let people know your website is coming soon. It will usually contain your contact details and a little bit of information about who you are.

Iconography

Icons are visual symbols that you can dot around your website. They represent statements, actions, or objects and help simplify information and guide attention. Sometimes, people like to use icons instead of images, but it is a personal preference.

Already using icons on your site but not sure if you’re making the most of them? Dan is here to save the day by highlighting five giant oopsies you’re making when using icons.

Lorem Ipsum

Yes, that dummy copy you see has a name! Lorem Ipsum is a jumbled Latin text that’s used as a placeholder or filler content. Designers use it to mimic how text will flow and look in a design, ensuring that the layout, fonts, and spacing all work harmoniously.

Navigation

An easy-to-use navigation bar = happy visitors! Without website navigation, visitors won’t be able to find any pages, so it’s a key part of your website.

Navigation menus come in all shapes and sizes. There’s the hamburger menu, traditional menu and sidebar menus to consider.

Not sure what’s right for your website? Don’t worry, as the Yardstick team will talk you through your options to establish what’s right for your brand and audience.

(If you want to read more about actual hamburgers rather than the menu type, then Jacob’s blog about the economics of disappointing burgers will be what you’ve been craving)

Sitemap

Unless you are really brave, you wouldn’t undertake a long journey without a map and an outline of where you are heading. Just like a roadmap, a sitemap gives your website project direction, and we can’t start a new website without one.

A sitemap is an organised list of pages of a website. It serves as a blueprint of the website’s content, displaying the relationships between various pages and their organisation within the site.

Slider

No, not that kind of slider. The other kind. The website kind. Also known as a carousel, a website slider displays various pieces of information one by one in a cycle. On your website, you will most likely encounter them on the homepage to show different client types and client stories.

Staging environment

You don’t need to know the intricacies of what a staging website is, however, when we build your new website we will send you a link to the “staging site”. This is a server environment that allows us to test your website under almost real conditions.

Sticky menu

A sticky menu is a fixed navigation menu that always remains visible and in the same position. So, as the user scrolls down and moves around the site, they can always access the menu. This leads nicely to the next point…

User experience

User experience is all about how a person feels when they interact with your website. Just as you would when a client walks into your office, you want your visitors to feel welcomed, comfortable, and thrilled to be there. It’s about understanding your audience, anticipating their needs, and designing a website that’s a pleasure to explore.

Website back end

The website backend is where all the magic happens away from the eyes of visitors. It’s the unsung hero, powering everything you see on the website’s front end. From storing and organising data to ensuring security, managing user accounts, and making sure the site loads quickly, the backend handles it all.

White space

White space refers to the empty or unused space between elements on a webpage. Imagine a page where every corner is filled with text, images, or other elements. It would appear cluttered, overwhelming, and challenging to navigate. Therefore, white space is a strategic design choice that improves the overall user experience.

We’re here to help

Pat yourself on the back for making it to the bottom of this blog! Of course, this list is not exhaustive, but we hope it helps you take your first steps in understanding website terminology.

Now that you are all clued up, are you ready to start building a new website with our team? You can get in touch via email hi@theyardstickagency.co.uk or call 0115 8965 300.

Stay in touch

Newsletter

Sign up to receive our hints, tips & ideas to improve your marketing.
As you’d expect, we’ll never pass your details to anyone else and if you don’t like what we have to say, you can unsubscribe at any time.