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
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.
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.
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.
Anchor Link
A type of hyperlink that takes 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. Or here’s an anchor link to take you to a special message.
API Key
API keys are a string of letters and numbers, which allow different bits of software to talk to 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 where users can access your website, such as goodegg.digital. You buy a domain name from a domain registrar (like GoDaddy), then connect (also known as ‘pointing’) it to your website, 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.
Integration
Integration is when your website sends or receives information to another website or 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 live on the internet right now. Changes you make to a live site will take effect straight away.
Navigation
The process of getting around a website, using things like menus 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 the URL of a page has changed or you’ve deleted a page from your site, redirects tell users and search engines where to go instead to find the page.
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 in 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 what information is there. An SEO plugin like Yoast will help you submit a sitemap, and this in turn can help 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 a simple thing like, testing a plugin, or a full redesign. ‘Pushing to live’ transfers these changes to your live site.
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.
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.
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.
