Website Design Terms Glossary: Jargon You Need to Know!
Whether you’re hiring a website designer or DIY-ing your site, knowing the correct terms can be incredibly useful!
As with any industry, the world of website design comes with its own jargon - unique words and acronyms that you wouldn’t ordinarily come across in every day life. When website design isn’t your profession, this can become confusing quickly.
There are a number of reasons why it’s a good idea to familiarise yourself with these words, including:
You can write a more detailed brief for a designer
You can have meaningful discussions with your designer
You’ll be able to follow tutorials easier
You’ll know what to say to tech support
Below are some of the main terms that are most commonly used in basic website design speak, that I thought would be useful to list, glossary style! Anything written in bold means that it the word is also listed in this glossary.
Above/below the fold
The ‘fold’ refers to the bottom edge of your browser; so if some text is ‘below the fold’, it means you have to scroll before you can see it. Any content ‘above the fold’ can be seen on a screen without needing to scroll. This is why website designers will suggest that your most important content should appear ‘above the fold’, so that it’s the first thing people see when they land on your site!
Accordion
This is a way of formatting content where only the headings of a paragraph are shown, that when clicked on, open up the body text below in an accordion-like transition.
Analytics
Data about your website and how visitors use it. Many website owners use Google Analytics, which shows them how many people visit their website, where these people came from, what pages are most popular, and much more.
Announcement bar
A thin bar of colour with text on it that appears at the top of a website, used to display an important message (eg. ‘20% off for a limited time only!’ or ‘Grab your free downloadable PDF today’). It should always have the function to close the bar so it disappears.
I’ve written a more in-depth post about grabbing peoples’ attention on your website.
Banner
The area that appears below the main navigation and above the fold on a website’s Home page. It will usually feature a large image or graphic, with some text introducing visitors to the website.
Body Text
Text used throughout the website in standard paragraphs. Such as the text you are reading right now! It should be fairly small in comparison to headings, but easy to read on a screen.
Browser
The program you use to access the internet (eg. Safari, Internet Explorer, Google Chrome, or Firefox).
CSS
This is an acronym for ‘Cascading Style Sheet’. It is a code language used to determine the design of a web page. Your designer may use CSS to add extra design customisation to your site with code.
Cookies
Cookies are small files that hold information; they are 'dropped' on a person’s computer when they access your website, and they can send information about how they are using your website back to you, the website owner. If you want to have access to analytics about your website, your website will need to use cookies, and you must legally disclose this in a Privacy Policy. You can read more about cookies in my own Privacy & Cookies policy, and the legalities of running a website in another blog post.
Content
All text, images, video and any other media you want to include on a page of your website.
Copyright notice
The text usually found in the footer of a website that says the year the website was last updated, the name of the business that runs the website, and a © symbol. This informs website visitors that the content on the website is subject to copyright law and may not be re-used without permission.
CTA (‘Call to action’)
A way of directing your website visitors on what step to take next. This could be a button leading to another page, a newsletter sign up or opt-in offer, a phone number or contact form, or a heading telling them to leave a comment on a blog post, for example.
Domain Name
This is the name of your website (eg. ‘byrosanna.co.uk’); every domain name is unique and it is how browsers find where your website is hosted so they can display it to users. You purchase a domain name from a domain provider (eg. Godaddy.com) and then connect it to your website host when you’re ready to make your website live. I have a much more in-depth post about domains if you’re interested!
Dropdown menu
When you click a navigation link and it opens up a list of links to choose from underneath, this is referred to as a dropdown menu.
Ecommerce
The ability to sell products and take payments on your website. Having ‘ecommerce ability’ means a website has features such as an inventory (where you can add products and stock), a shopping cart or purchase buttons, a checkout page, connection to a payment gateway, and order management.
Favicon
The small icon that appears on the left hand side of a website’s browser tab. It’s usually a tiny version of a business’ logo, and you can upload this to your website.
Footer
The very bottom section of a website where you can’t scroll any further. On most websites, this is where the copyright notice is and where the privacy & cookies policy pages are linked to. However you can put any content you like here, including social media icons, sign up forms, page links, logos etc.
Hosting
All websites are made up of digital files (just like the files you have on your computer), and those files need to be stored somewhere when they are uploaded to the internet. A ‘Website Host’ provides storage for anyone wanting to create a website, and there are many different types of hosting. Companies such as Bluehost and Siteground offer this, or if you’re using a platform like Squarespace, the hosting (aka storage) is included in their service. For a more in-depth explanation, read my ‘Website Hosting Explained’ blog post.
Lightbox
When you click on an image thumbnail and it is opened up to full size and given a white or black background (can be varying degrees of opacity) to make it stand out, this is called a lightbox. There should always be an ‘X’ or close button so you can make the lightbox disappear.
Mailing lisT
Also known as a ‘newsletter list’ or ‘email subscriber list’. It is a list of email addresses of potential customers that you have collected through marketing and on your website. You use Email Marketing Software (such as Mailchimp or Convertkit) to store this list and to send out marketing emails to this list, making sure you adhere to privacy laws and that you have a clear privacy policy.
Navigation menu
Sometimes referred to as either a ‘navigation’ or a ‘menu’, this is a set of links that provide options of pages for your website visitors to choose from. Most commonly you have the ‘primary navigation’, which appears at the top of a website and usually includes links to pages like Home, About, Services, Contact etc. You can also have ‘secondary navigations’ that appear somewhere else, or a ‘footer navigation’ of links that appear in the footer of your website.
Navigation links can also open up dropdown menus that display other links to child pages too.
OpacitY/Transparency
A scale of how opaque or transparent something is. Often referred to when talking about overlays, announcement bars or pop-ups.
Opt-in offer/freebie
This refers to an offering or free item that a website visitor will receive in exchange for signing up to your mailing list. Once people have signed up, you can set up your Email Marketing Software so that it automatically sends something (eg. a discount code or a downloadable PDF) out to people. To learn more about these and how to set them up, read my post on Opt-In Offers.
Overlay
An image, pattern, graphic, or colour that is laid on top of an image, in varying degrees of opacity.
Parallax
The effect where an image appears to move or scroll up as you scroll down a web page, conveying a sense of depth and movement, creating a point of interest on the page.
Parent and child pages
Also known as ‘top level’ pages, and ‘sub pages’. A parent/top-level page can have relevant information that is split off into separate pages (called child/sub-pages); these are often linked to from the parent page, or in a dropdown menu in the website’s navigation. For example, your ‘Services’ page would be the parent page, and your separate pages about each individual service would be the child pages.
Payment Gateway
A service that processes and authorises credit card or direct payments so that customers can enter their card details and have their payment securely sent from their bank to you. Payment Gateway Providers such as SagePay, Stripe and PayPal offer this and take a small percentage of each sale for their service. A Payment Gateway is needed for any ecommerce website.
Pop-up
A mini window that appears on a website with an important message. Examples include Cookie notice pop-ups, sign up form/opt-in offer pop-ups, or ‘Live Chat’ pop-ups. All of these should have the function to be closed so that they disappear.
Privacy policy
If your website runs analytics, collects email addresses with a sign up form, sells products or even just has a contact form, you are collecting data from individuals and therefore need to abide by privacy and data protection laws. This includes having a clear and easily accessible Privacy Policy written up on your website. I have more detailed about this in my ‘Is Your Website Legal?’ blog post.
Responsive
Also known as ‘mobile responsive’; this means that the design and layout of your website automatically changes or ‘responds’ when viewed on different size devices. Most new websites are all mobile responsive, and if you use Squarespace, all templates are developed to be mobile responsive and look great on all screens too.
serif/Sans serif
This is a font style. A serif font has lines or ‘tendrils’ attached to the ends of each letter (aka ‘serifs’), while sans serif fonts do not have these (literally ‘without serif’). Eg.
Slider/slideshow
A way of displaying multiple images or gallery where they appear to wipe across the screen to reveal the next image, often on a timer or they can have arrows or buttons to allow the user to control which images they view.
SSL certificate/encryption
A small file that when installed onto a website, can encrypt the pages so that your website’s servers (read more on website servers) can communicate securely with your customer’s browser. It means hackers can’t intercept sensitive data such as email addresses or payment details, and it is displayed on your website if you have one by a ‘padlock’ icon and ‘https’ instead of ‘http’ next to your domain. Read more on how they work in this SSL article.
Thumbnail image
A small (often square - hence the ‘thumbnail’ metaphor) image that is used to represent a larger version of that image. You can click on a thumbnail image and it will either open up the larger image in a lightbox, or will link through to a different page.
Two-factor authentication
When you enter a username and password to access your website, this is one layer of security. To add a second layer (or ‘two factors’) of security, you can also have a code sent to your email address or mobile phone, or scan a code that appears on the screen with an app. For more details on how to set this up, check out my ‘two factor authentication’ blog post.
Whitespace
This is simply the space around an element on your web page (it doesn’t have to be white - this is just another word for ‘blank’ in this instance). Designers use whitespace on websites to make pages look uncluttered and organised in a minimal, tidy/clean way. It creates ‘breathing space’ for the reader and is more visually pleasing.
