Website Design Definitions — Good Egg’s Guide to Decoding Website Jargon

At Good Egg, we love talking like humans to other humans, because *spoiler alert* we’re humans too. We’ve proved it many times by selecting photos of bicycles and traffic lights.

But if you’re building a website or working with a website developer, it can feel like all the information you’re being given or asked for has been written by robots (robots whose preferred language is abbreviations and acronyms).

So if website jargon has got you tied up in knots, we’ve put together a handy web design glossary to help you feel empowered when you’re working on your own website or outsourcing to a website designer.

This web design glossary absolutely isn’t an exhaustive list, but it should cover most key terms you might find in a DIY article or on a call with a developer while you’re adding a website to your digital marketing toolkit.

Tip: If you’re stuck on a specific term, search for it in this article for a quick fix!

Website Design Definitions Relating To Coding Languages

As we’ve mentioned, working with tech folks can feel like you’re speaking a different language. And sometimes that’s because you literally are. Websites can utilise dozens of different languages to talk to each other and appear correctly on our screens.

You don’t need to learn them to have a website – most modern website builders take care of it for you – but here are a few key ones to be aware of.

CSS (Cascading Style Sheets)

CSS Styles control your website’s appearance

It tells your website browser how a webpage should look (its style). Without CSS, webpages would look like an old Word document written in Times New Roman: just headings, text, and images. Very boring.

HTML (HyperText Markup Language)

HTML is the barebones content of your website

This is the skeleton that other languages, like CSS, can then build on. If you ever customised your own MySpace page, you’ll have used HTML – it’s the code that sits within angle brackets (”<” and ”>”).

JavaScript

JavaScript is a programming language

This allows your website browser to produce visual changes on a site (like a form submission or an animation) without having to reload the page.

PHP

Another programming language

PHP acts like the brain of a website, running complex behind-the-scenes tasks. PHP processes data and generates dynamic web content.

General Website Design Definitions

If you’re building a website yourself or working with a developer, here are some concepts and terminology that are helpful to understand.

Keep in mind that in big organisations, any of these topics could be one person’s whole job, so don’t feel like you have to ace all of these.

Accessibility

Designing your website inclusively to ensure that there aren’t any barriers that prevent people from using your site

Accessible practices include using alt text to describe images for screen readers; ensuring high contrast between your text colour and background colour to be clear for people with visual impairments; and providing captions for videos.

WAVE Website Accessibility Evaluation Tool is a very helpful tool for your site’s accessibility.

Analytics

Data about who is visiting your website

This can be very basic – like how many page views you got or which country visitors were from – or more complex – like tracking a purchase journey or seeing which search terms people use to find your site.

Google Analytics is the big daddy of analytics, and most website builders will also give you some basic analytics.

Automation

Tools or systems that do things automatically for you

These tools give you more time and headspace to focus on other bits of your business. This could be as simple as an email autoresponder or a more complicated workflow using software like Zapier.

Backend Development

The site admin area of your website

This is where you publish new pages or posts from. This is where your website data is stored and managed. You’d have to be logged in to see this – it’s not accessible to your website visitors.

Browser

The programme/app that lets you browse the Internet

Popular browsers include Google Chrome, Safari, Firefox or Microsoft Edge. Browsers might display your website slightly differently, especially between desktop and mobile, so if you’re making design updates on your site, check them on a few different devices.

Cache

Where browsing data is stored

When you visit a website, your browser might temporarily store information from that site on your computer, so that it can load the page more quickly when you visit again. This is the cache.

If you’re making changes in your website’s back-end and they’re not showing, caching could be one reason why the changes aren’t pulling through to the live site. You can clear the cache in your browser by doing a hard refresh. Fabric Digital has a great summary of how to hard refresh your browser.

CDN (Content Delivery/Distribution Network)

A global network that makes websites load more quickly

Geography affects page load speed and website performance. If a website’s server is based in London, a visitor in Paris will have faster load times than a visitor in Hong Kong. 

CDNs get around this by creating a network of servers worldwide that cache a version of your website. So rather than waiting for the information to travel from London, a visitor in Hong Kong might access a server in Singapore instead. Much closer, and therefore much quicker.

CMS (Content Management System)

Website builders

Software used to create, manage, and modify digital content on a website without needing loads of specialised technical knowledge. 

WordPress, Webflow, and Squarespace are some of the big names in the CMS space. They’re also sometimes referred to as website builders.

Cookies

Little bits of data that store information about your activity on websites

They can be used to help a website remember things for you, like your user preferences, shopping basket, or login details. 

Cookies can also track what you’re up to across the web, like when you search for Italian holidays and then start getting adverts about Rome on your Instagram.

Device

The piece of tech that you’re viewing a website on

In the early days of the internet, this would have just been a desktop computer, but now someone could be viewing your site on all sorts of different screen sizes: a mobile phone, a tablet, a laptop, or the touchscreen that controls their smart home.

eCommerce

Buying and selling things online

This could be via a marketplace, like Etsy, or using eCommerce platforms like Shopify, Squarespace, or WooCommerce.

Frontend Development

What a website’s visitor sees

Front-end web development focuses on the main user interface (the view of your website that a visitor sees and interacts with). You’re looking at the front-end view of this web page right now.

Privacy Policy

A page on your website that tells a visitor how you use their information

If you’re in the UK and your business processes any personal data – like names or email addresses – you need a privacy policy on your site. The UK Information Commissioner’s Office (ICO) has a useful article about who needs a privacy notice and how to write one.

SEO (Search Engine Optimisation)

Tweaks you can make to your website to improve its visibility in search engines

Lots of factors affect your website’s search engine ranking. This includes the keywords you’ve used on your site, whether it’s being linked to by other websites (known as ‘backlinking’), your site’s loading speed, bounce rate (how quickly people leave your site), mobile friendliness, and accessibility.

SERP 

This stands for Search Engine Results Page

The page of search results that you see when you type a query into Google or other search engines. 

SSL Certificate

A digital certificate that authenticates a website’s identity

SSL certificates enable an encrypted connection, which keeps your data safe. You’ll know if a website has one because you’ll see a little lock next to the URL. 

Not having an SSL certificate is bad for your website’s SEO and will decrease user trust in your site. Many website hosting services include SSL certification as part of the service.

UI (User Interface)

UI is how something looks and functions

Good UI feels familiar and intuitive. Bad UI is cluttered, inconsistent, and difficult to use. Using a consistent web design throughout your site is a good UI practice.

UX (User Experience)

UX is designing the layout, functionality, and flow of information, where things are, and how you navigate to them

Good UX operates seamlessly and is satisfying to use. Bad UX doesn’t work properly or isn’t accessible. 

Website Design Definitions Relating to Web Building

These are more nitty-gritty pieces of jargon related to getting your website up and running. They’re the kind of things you might see flashing up on an error message.

Anchor Link

A type of hyperlink used for in-page navigation

Anchor links take you to a specific point on a page, rather than just the top. They’re shown in a URL using a hashtag. We’ve used anchor links at the top of this blog to help you jump around the article.

API Key

API keys are strings of letters and numbers that allow different pieces of software to communicate with one another

For example, an API key connects our website to our mailing list provider. They’re normally found in integration settings, and each one is unique.

Domain Name

The address users can use to access your website, such as goodegg.digital

You buy a domain name from a domain registrar (like GoDaddy), then connect it to your website (also known as ‘pointing’) via a process called updating the nameservers. This can take 24-48 hours to take effect.

Hosting

Your website host stores all the files for your website

Some website builders, like Squarespace and Wix, host your website for you. Others, like WordPress, are self-hosted, so you arrange the hosting yourself. Web hosting uses a lot of energy, so we think it’s important to use a sustainable host, like SiteGround or Krystal. Read more about how to make your website more sustainable in our eco-friendly website guide.

Integration

When your website sends or receives information to another website or web app

Showing your Instagram feed on your homepage is an integration. So is Calendly talking to your Google Calendar to work out your availability for a meeting.

Live Site

The version of your website that is currently live on the internet

Changes you make to a live site will take effect straight away.

Navigation

The process of getting around a website

Navigation is most often done via menus, hyperlinks, and buttons.

Plugin

A piece of software that adds specific features to a website

You might use a plugin to add a design feature to your site or to add some cool functionality.

Redirect

If a page’s URL has changed or you’ve deleted a page from your site, redirects tell users and search engines where to go instead to find it

Say we were changing our ‘Blog’ page to a ‘News’ page, and changing the URL from goodegg.digital/blog to goodegg.digital/news. A redirect would mean that anyone typing in the old URL (/blog) would automatically get redirected to the new URL (/news). 

Without a redirect, you’d get a broken link, which would then go to a 404 ‘Page doesn’t exist’ error message, and you’d lose any SEO juice you’d built up on the old page.

Sitemap

A list of the pages on your website

When you’re building a website, this is how you plan the site structure and content. Once the website is built, search engines use sitemaps to understand your site and the information it contains. 

An SEO plugin like Yoast will help you submit a sitemap, which in turn can improve your search engine rankings.

Staging Site

A staging site (or staging environment) is a copy of your website where you can make changes without affecting your live site

This could be anything from testing a plugin to a full redesign. ‘Pushing to live’ transfers these changes to your live site.

Website Design Definitions Relating to Web Development

Design terminology that might come up during the web development process. Knowing these design terms can also help you get inspiration from design websites like Dribbble.

Above the Fold

The bit of a webpage that appears first

This is what a visitor to your site would see without scrolling. This is generally someone’s first impression of your website, so it needs some pizazz. This is also sometimes known as the hero section.

Body

The main meat of your website

This is everything underneath your top menu and above your footer.

CTA (Call to Action)

A CTA gives us instructions to do something on a website

This is often in the form of a button or a link. CTAs could be things like ‘Get in touch’, ‘Buy now’, or ‘Read more’.

Favicon

The little icon associated with your website

This is what you’ll see next to the site’s name. Gmail’s is a colourful envelope, ours is a smiley sun/face.

Footer

The bottom section of a webpage

This is where you’ll usually find contact details, privacy policy, and a list of links to other important pages (often known as your secondary navigation).

Hamburger Menu

If you’re reading this on mobile (or make your browser window a bit smaller), you won’t see our menu along the top of the screen; you’ll see three horizontal lines in the top corner (known as a hamburger button)

When you tap that button, our previously hidden menu (the hamburger menu) will appear as a dropdown menu. This is usually the primary navigation method when using a website on a mobile device.

Header

The top section of a webpage

This is where you’ll find the site’s logo and primary navigation menu. You might also have a login area here, a shopping cart button or links to social media.

Landing Page

A standalone web page created specifically for a marketing or advertising campaign

Everything on this page is focused on getting the visitor to take a specific action, like signing up for a course, enquiring about a service, or buying a ticket.

This is a landing page that we created for our sustainable website design training.

Mockup

A prototype of a website to show how it would look when it’s built

It doesn’t have any functionality (interactive elements) but shows the design and appearance. We use Figma to build mockups.

Responsive Design

Responsive web design means building and designing a website so that it looks good on all different screen sizes and devices – from widescreen desktops to portrait mobile phones

With a responsive website, you should be able to resize it across many different browser window sizes, and it still looks great.

User Journey

How a visitor moves around your site

This covers everything, from the moment they arrive on the page to when they achieve their end goal (like buying your product, learning about your services, or getting in touch). 

Good web design guides the user around the site using information, reinforcement, incentives, and calls to action. If there’s no clear user journey, your visitor will probably give up and leave your site.

Sticky Elements

Not jam-related

Anything that’s ‘sticky’ on a website is a functional element that ‘sticks’ somewhere on the screen. Most commonly, you’ll see this with sticky menus, where navigation bars will stay stuck at the top of the screen whilst you scroll around a site.

Wireframe

A simple outline of a website

This provides a visual representation of the page’s basic structure. You can draw a wireframe on a piece of paper, like the one below.

Website Design Definitions Relating to Images

We obviously love words at Good Egg, but good use of images can make or break a website (both literally and metaphorically). Here are some key design terms about the visual elements of your site.

Alt Text (Alternative Text)

A description of an image that gets added to a site’s HTML code

Alt text is used by screen readers to describe images for people with visual impairments, so it’s best practice to write alt text for all the images on your site. A browser will also show this image description if it can’t load the image. This is sometimes also known as alt tags.

File Type

The different formats an image file can be in

The main ones are:

• JPEG/JPG (the extra ‘E’ makes no difference btw): JPGs are the standard format for images, and their file sizes tend to be smaller than PNGs, so they’re preferable for a faster site
• PNG: PNGs can have transparent backgrounds, so these are good for logos or other icons
• SVG: This is a vector file type, which means you can make your image or graphical element as big as you like, and it will never get blurry

Lazy Loading

Enabling Lazy Loading on your website tells browsers to only load the images that are visible on screen, rather than every single picture on the page

The images will only be loaded as needed when a visitor scrolls down. Only loading the images that people need means less energy consumption and better energy efficiency on your site. Cracking.

Metadata

Data about a file that’s written into the file itself

This is like how Google Photos can tell you what camera a photo was taken on. If you ever, hypothetically, downloaded songs from Limewire, you’ll remember the pain of the metadata being wrong and having to manually add the name of the band and the song title.

Optimisation

Optimising images reduces their file size without noticeably reducing their quality

This is important because using lots of large images has a huge impact on your site’s loading time (‘big’ is a variable term, but definitely aim for a file size under 500KB per image).

It’s good practice to optimise your images before uploading them to your site, by doing things like:

• Use a smaller file type, like JPEG
• Resize your images – they probably don’t need to be 6000 pixels wide when most desktops are only 1920 pixels wide
• Compress your images using a tool like TinyJPG

Web Design Without The Jargon

Website terms can be useful for describing tasks and processes throughout a web design project. But let’s be honest — some designers weaponise these terms to confuse clients and make things seem more complicated than they actually are.

Armed with our guide to website design definitions, you’re ready to hold your own when working with a designer or DIYing your website. 

And if you’re ever stuck, we offer free 15-minute calls designed to detangle (there’s no obligation to buy any of our services if you book a virtual drop-in session, we just love to be helpful Eggs)!