Skip to content Skip to footer

Decode Website Jargon With Our Web Design Glossary

Written by Eggs, Not Robots

We don't expect you to read something that we couldn't be bothered to write, and that's why we don't use AI to create our blogs. The info, advice, and opinions you're about to enjoy are straight from the brains of Holly and Sophie AKA The Good Eggs.

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.

Web Design Glossary for Small Business Owners

Topics

Person working on a laptop surrounded by coding books

Web Design Glossary: 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.

[If you are interested in learning to code, StephMyLife Tech Bootcamps have some fun free challenges that help you learn HTML and CSS, like this Flappy Bird game]

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 – 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 that 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.

Woman working on a laptop

Web Design Glossary: General Website Terms

If you’re building a website yourself or working with a developer, here are some concepts and terminology that it’s 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 are no barriers that prevent people from using your site. Accessible practices include using alt text to describe images for screen readers; making sure there’s high contrast between your text colour and background colour, to be clear for people with visual impairments, and having captions on videos.

WAVE Website Accessibility Evaluation Tool is very helpful tool for your site’s accessibility, and for a deeper dive into the crucial role of accessible design, take a look at Microsoft’s Inclusive Design Toolkit.

Analytics

Data about who is visiting your website. This can be very basic – like how many pageviews you got or which country visitors were from – or more complex – like tracking a purchasing journey or seeing which search terms people are using to find your site. Google Analytics is the big daddy of analytics, but can be a bit overwhelming to setup and use. Most website builders will also give you some basic analytics.

Automation

Tools or systems that do things automatically for you, giving you more time and headspace to focus on other bits of your business. This could be as simple as an email autoresponder or more complicated workflow using software like Zapier.

Back-end

The admin area of your website, 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 the average website visitor.

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

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)

Geography affects page load speed. 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 around the world that store 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)

Software used to create, manage, and modify digital content on a website without needing loads of specialised technical knowledge. WordPress, Wix, Webflox 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: 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.

Front-end

Front-end development deals with the main view of your website, which a visitor would see and interact with. You’re looking at the front-end view of the Good Egg website 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 Commissioners 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 make it more visible on search engines. Lots of factors affect your website’s search engine ranking, including the keywords you’ve used on your site; if it’s being linked to by other websites (known as ‘backlinking’) and your site’s loading speed, bounce rate (how quickly people bounce off your site), mobile friendliness and accessibility.

SERP (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 and enables 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. Lots of website hosting includes 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 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. 

Person looking at images on a laptop, with a camera beside them

Web Design Glossary: Website Building Terms

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.

Two computer monitors and a mobile phone on a desk

Web Design Glossary: Website Design Jargon

Design terminology that might come up during the website development process. Knowing these design terms can also be helpful for getting inspiration from design websites like Dribbble.

Above the Fold

The bit of a webpage that appears first: 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.

Body

The main meat of your website: everything underneath your top menu and above your footer.

CTA (Call to Action)

A CTA gives us an instruction to get us to do something on a website, and is often in the form of a button. CTAs could be things like ‘Get in touch’, ‘Buy now’ or ‘Read more’.

Favicon

The little icon associated with your website, which you’ll see next to the site’s name. Gmail’s is a colourful envelope, ours is a smiley face.

Footer

The bottom section of a webpage, where you’ll usually find contact details, privacy policy, and 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.

Header

The top section of a webpage, 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 focussed 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 eBook: The Good Egg Guide To Building A Feel Good Business.

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

Building and designing a website so that it looks good on all different screen sizes and devices – from widescreen desktops to portrait mobile phones. If your website is responsive, you should be able to resize it into lots of different browser window sizes, and it still look great.

User Journey

How a visitor moves around your site, 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 not a 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 functional elements 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 website, that gives a visual representation of the basic structure of the page. You can draw a wireframe on a piece of paper, like the one below.

Web design wireframe

Terms 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.

File Type

The different formats an image file can be in. The main ones are:

  • JPEG/JPG (the extra E makes no difference btw): standard format for images. The file sizes of jpegs tend to be smaller than PNGs, so are preferable for a faster site.
  • PNG: PNGs can have transparent backgrounds, so these are good for logos or other icons
  • SVG: these are 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. Think Gromit laying out the tracks in The Wrong Trousers, but with less peril. 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. 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 big images has a huge impact on your site’s loading time (‘big’ can be a very variable term, but definitely aim for a filesize of 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 filetype, like JPEG
  • Resize your images and make them smaller – your image probably doesn’t need to be 6000 pixels wide when most desktops are only 1920 pixels wide.
  • Compress your images using a tool like TinyJPG.
Woman and man working on laptops

If you’re tired of working with website designers who use the jargon from this web design glossary like a second language, get in touch. We love chatting about websites like humans.

Find out more about our web design services here.

A Special Message

We like that you were curious enough to click on our anchor link (or you just love scrolling).

As a little reward, if you’re interested in our web design services, drop us a message to hello@goodegg.digital and mention the word ‘Capybara’ for a 10% discount. 

If you’re not in the market for web design right now, here’s a different treat for you. 

And now you can jump back to anchor link in the glossary.