The Guidance Digital Web Design Glossary
If you’ve decided you need a new website for your business and have started having conversations with web designers around Bristol, you’d be forgiven for thinking they’re speaking a different language at times.
Like most industries, web design has a lot of terms that won’t make much sense if you haven’t heard them before. With that in mind, our Bristol team wanted to put together a glossary of commonly heard web design terms.
In doing so, we hope we’ll give you a better understanding of the web design industry and the process we follow when designing and building a website here at Guidance Digital.
We’ve split the terms into different sections, some are directly related to the designing and building of websites, others cover subjects closely tied to web design.
We hope this guide brings clarity to some potentially puzzling terms, enables you to have more constructive conversations with different web designers, and ultimately helps you create a website that does what you want it to do.
This glossary is split into seven sections and then ordered alphabetically. Some of the terms include a text description, where we’ve tried to be as clear and concise as possible. Others include pictures and text descriptions.
Web Design Glossary Sections
Section 1: Web Design
Section 2: WordPress
Section 3: Technical Website Terms
Section 4: Website Legals
Section 1: Web Design
In this first section, we’ll cover terms that are linked specifically to web design principles and the terms you may hear when you first start discussions with a web designer.
In web design an accordion is a stacked list of headed boxes. Each headed box can be clicked on to reveal content associated with the header. Accordions can work really well if you have lots of content to share with website visitors, but don’t want to overwhelm them by presenting all of the content in one go.
When we’re talking about alignment in web design, we’re talking about positioning the elements (text, images, videos, and buttons) in a straight line. Web design elements can be aligned vertically or horizontally.
Below the Fold
‘Below the fold’ refers to the part of a web page that a user must scroll to see. The term originates from newspaper publishing where it referred to content located below the physical fold in the middle of the paper.
The bottom margin is the space required underneath an element on a web page. This is typically measured in pixels or px.
Broken Grid Web Design
We cover grid designs slightly later on in this section and while it seems counterintuitive to cover broken grid designs first, the alphabetical nature of this list means that’s the way it has to be.
A broken grid layout is a web page layout that doesn’t follow a traditional grid structure layout where elements are aligned within an invisible grid. There are several things you can do to start creating a broken grid design, including but not limited to: varied alignment, layering, containers, and whitespace.
If you’re looking for inspiration, The team at Bashooka has put together a list of 40 cool examples of breaking the grid in web design.
Buttons in web design help users understand the different options, make choices, and navigate through different pages or sections of a website.
Because in most instances you want users to click or at least see clicking as an option, it is important that a button stands out. A web designer will typically do this with the use of an accent colour, animation, drop shadow, or different font.
Call to Action
When somebody visits your website you typically want them to take a specific action. When we talk about websites for businesses that could be something like get in touch, request a quote, book an appointment or buy a product.
To encourage users to take any of the above steps a web designer will often use a ‘call to action’. A call to action is either copy, a visual element or combination of the two that prompts a user to take the action.
A contact form is used to collect information from users visiting your website. While we advise our clients to include their business phone number and an email address on their site, we think there are numerous benefits to also including a contact form.
From a business owner’s perspective, a contact form gives you the ability to request specific information from users on your website related to the product or service you offer. As an example, if you’re a restaurant owner you most likely want to know when the individual is planning to visit your business, how many people there are in the party, and if anybody has any special dietary requirements. Including fields within your contact form for each of the above points guides your users into sharing only the information that you need.
From a user’s point of view, they are getting clear direction from the contact form about what information you need which saves them time.
A dropdown menu is a menu that displays a list of options when a user interacts with it – typically hovering over it or clicking on it. In web design a dropdown menu is typically used to display the main navigation of a website when it’s being viewed on a mobile device or tablet.
A frequently asked questions (or FAQ) section is a useful way of sharing information with new customers related to questions previous customers have asked. It provides a good reference point for customers who aren’t ready to contact you directly, but do want some more information on the product or service you offer.
A favicon is a small image related to a particular web page or website. They are often used by designers as a visual reminder of the website in the address bar or browser tab. This blog shares 7 tips and tricks for creating the perfect favicon for your new website.
A grid layout in web design is the division of the web page into sections according to vertical or horizontal guides. The guides provide a framework for the different sections and elements within the page to sit on.
Following a grid framework when designing a web page helps give your page and wider site uniform structure. This in turn makes it easier for users to navigate through your website.
You’ve probably seen a hamburger menu at the top of a website you’ve recently visited. The name refers to the three horizontal lines stacked on top of each other in the design of the menu icon.
Hamburger menus work really well on mobile devices where the screen is smaller and you have less room to list all of your menu items.
When a web designer is talking about a hero or hero section, they are referring to the oversized banner located directly below the top navigation menu at the top of the homepage. It is the first thing users see when they access a website so it is very important.
A hero section typically includes an eye-catching photo or video, the company logo, a short explanation of what the business does and a call to action. This is usually a ‘get in touch’ or ‘find out more’ button.
When we talk about layout in web design, we’re referring to how the different visual and text elements are positioned on the page.
It’s an important part of the process. Showing users the right information at the right point can be the difference between them contacting you or not.
In web design a mockup is a full sized picture of a web page to show you how it will look as part of a live site on the Internet. This is normally shared as an image file and while you aren’t typically able to click from one mockup page to another (as you would on a live website), it should help you visualise how your new site is going to look.
Here at Guidance Digital we offer all perspective clients a complimentary website mockup. It’s a way of seeing the type of website you would get if you decided to work with us.
This is a completely free service and if you don’t want us to build your website after seeing the mockup we create, there’s absolutely no obligation that we do so.
Navigation in web design refers to how people move around your website and navigate from one page to another. It’s important that you make it clear to users visiting your website where you want them to go and which information you want them to see.
As more and more of us use our smartphones and tablets to access the internet, it’s become increasingly important that websites remain accessible and functional across many different screen sizes. This concept is called responsive design.
A social feed is a section on a webpage where you display a number of posts from your social media account. This might be Instagram, Facebook, Twitter, LinkedIn or another social network.
It will typically display your last four to eight posts and is a way of giving potential customers a quick snapshot of what you’ve been up to recently.
In our experience Instagram works best as a website social feed as all posts are either images or videos. But that’s not to say a feed from a different social platform might not work for a certain site.
A user interface or UI can be defined as anything that a user interacts with. When we’re talking about UI in web design, it’s a fancy way of saying the website itself, the pages within the website, or a specific feature on one of the web pages.
User experience or UX is how a user interacts with a user interface. In the context of a website this can refer to where you decide to include certain elements.
As an example, it’s normally best practice to include a prominent ‘get in touch’ or ‘contact us’ somewhere highly visible on your site. This could be described as user experience design.
Alignment refers to how your elements are positioned. If you use varied alignment in web design it typically means that the elements within your site don’t follow a set grid layout.
WYSIWYG is an acronym for ‘what you see is what you get’. In web design it means you can add to or update your site using an editor that looks exactly the same as your web page.
This makes it a lot easier to not only make changes, but also to see how possible changes will look before you make them.
Section 2: WordPress
In the second section of our guide we’ll cover two terms associated with WordPress, the content management system we use for all of our websites.
Where WordPress is the platform that your website is built on, a plugin is an additional piece of software that ‘plugs into’ your site to give it additional functionality.
Plugins can be used to improve the speed of your site, help with SEO, or provide you with a checkout so you can sell products or services directly to your customers online.
Plugins are created by third-party developers and available from within your WordPress dashboard. They typically come with instructions from their creator and reviews from other individuals who have used the plugin.
Once you’ve finished making changes or additions to a blog or web page, ‘publish’ is the big blue button that you press with WordPress to push the new version of your website live.
WordPress is an easy-to-use content management system that was first released in 2003. Initially designed as a blogging platform, it has since grown to become one of the leading website platforms in the world. As of October 2021, WordPress powered just under 43% of the top 10 million websites in the world.
Section 3: Technical Website Terms
While web design gives you the look and feel, there are technologies behind the front of your site that ensure everything functions as it should. This section of our glossary includes 33 terms related to the technical functionality of a website. While there’s no quiz at the end, we wanted to include them for those interested in this part of designing and building a website.
If you’re talking to a website designer and they use a term or phrase you don’t understand, ask them to explain what they’ve said in more detail. Most of the time designers and developers intentionally bamboozle potential clients. And remember, any designer, developer or agency worth their salt will be happy to go into more detail when it comes to explaining the web design process in more detail.
A ‘404 Not Found’ page is usually generated when a user tries to visit a web page that doesn’t exist on a particular website. This can happen for a number of reasons, including the page being moved or deleted.
While you don’t ideally want 100’s of 404 error pages all over your website, there are some clever ways of using the 404 error page to keep potential customers on your website.
An A record is a DNS record that points a domain (yourbusiness.co.uk) to an IP address. The ‘A’ in A record stands for address and is the primary record you’ll use when connecting your domain to your new website.
Or more specifically your ‘website backend’. This is the behind the scenes part of your site and an area that potential customers or other visitors can’t access. It’s here where you can make edits or changes to your site including updating text, uploading new images or videos and changing/editing other elements of your site.
As the number of websites and platforms to design and build sites has ballooned in recent years, so the website backend has developed. Where once you had to be a developer to understand how and where you can make the changes, many behind the scenes areas are now far more user-friendly.
Here at Guidance Digital we use WordPress and a page builder framework called Divi. We do this for two reasons. Firstly, it gives us the flexibility to build (almost) any type of website a client can dream up, and secondly, once the site is built it is very easy for our clients to login to the backend of the website and make changes themselves.
A website backup is a copy of all the files that make up a website that can be downloaded and redeployed if needed.
Bounce rate is a percentage figure typically found in a website analytics platform like Google Analytics. It measures the number of website visitors who visit your website and leave (or bounce) almost immediately.
In a perfect world you’d want everybody who visits your website to stick around, learn more about the products or services you offer and ideally become a customer. Unfortunately, this rarely happens.
So what is a good bounce rate? While there are a number of factors to consider (industry, location, whether or not you’re running marketing campaigns) a typical rule of thumb is that if you have a bounce rate of between 25 – 40%, you’re doing really well. Anything between 41 – 55% is okay and anything more than that needs further investigation.
A web browser is a computer application used to access and browse the internet. The four biggest web browsers (by number of users) are Google Chrome, Microsoft Edge (the artist formerly known as Internet Explorer), Firefox and Apple Safari:
When designing and building a website, it’s important to consider the slight differences between the four main browsers to ensure users get a great experience on your site, whichever browser they’re using.
Caching is the process of storing a copy of a website’s files so when a user accesses said site, they are shown these files and not a freshly accessed version of the site. This improves the experience of the website visitor, as the ‘cached’ or copied website files will load much faster.
CAPTCHA, or Completely Automated Public Turing test to tell Humans and Computers Apart in full, is a security measure often added to a contact form on a website or elsewhere on the web where you, as a user, are being asked for information.
Chances are you’ve come across different CAPTCHA examples while scrolling the web. If not, or if you need a little refresh, here’s the top 16 mostly used CAPTCHA examples.
CSS stands for Cascading Style Sheets and is a programming language that gives a website it’s look and feel.
While we’ve talked about website backends already in this section of our web design glossary, the WordPress dashboard is an area you will likely become familiar with, if you decide you’d like to work with our Bristol designers on your next web design project.
It’s here where you can control everything from the pages on your website to how users navigate around your site, your content and much more.
DNS is an abbreviation for Domain Name System. DNS is an internet protocol and changes domain names that are readable by humans (yourbusiness.co.uk) into IP addresses (191.6..5.34) that can be read by machines.
Following on from the above point, your domain is your website’s online address. Often the name of your business, your domain name is completely unique to your website and your business.
The frontend of your website is the part of your site that visitors see after searching for your business on a search engine, finding you on social media, following a marketing campaign or typing your domain into a web browser.
Where your domain is the online address for your business, hosting is the space on the internet for the files that make up your website.
HyperText Markup Language or HTML for short is the standard markup language used to display the content of a website through a web browser.
HTTP and HTTPs
Hypertext Transfer Protocol (HTTP) and more recently Hypertext Transfer Protocol Secure (HTTPS) is primarily used as communication between a website browser (used by an individual to visit websites on the Internet) and web servers (where websites live).
Image optimisation is the process of ensuring that the images you add to your website are the correct dimensions and file size.
A website doesn’t typically require images as large as those needed for print media. In fact, uploading really big images to a website is likely to slow it down significantly and impact negatively on the experience of individuals visiting the website.
After scaling images for your website, you can go one step further and compress them using a tool like ImageOptim. This helps strike the balance between file size and quality of the image.
When we’re talking about software, open-source refers to software that the creator grants other users the rights to access, study, edit and distribute to anybody and for any purpose.
A permalink is the full URL that users visiting your website see in the address bar of their web browser. While there are different permalink structures, one of the most commonly used permalink structures is ‘page name’ or ‘post name’.
In this format, the permalink is taken directly from the title of the page. As an example the permalink of ‘About Us’ page us the ‘page name’ or ‘post name’ structure would be yourbusiness.co.uk/about-us.
Providing the ‘S’ in HTTPS (covered earlier in this section), an SSL certificate allows encrypted communication between web browsers and web servers. Visually, you can tell whether or not a website has an active SSL certificate by looking in your web browser address bar.
If your domain has a padlock icon next to it in the address bar then it means the site is secure and has an active SSL certificate.
URL stands for Uniform Resource Locator and is used to identify specific websites and web pages on the internet. A URL includes your domain (yourbusiness.co.uk) and other key pieces of information to create a web address.
Section 4: Website Legals
In the fourth section of our web design glossary we’re going to take a look at the legal considerations you need to take a look at when designing and building your new website. Don’t worry, it’s only a short section, but still filled with some useful nuggets.
Terms & Conditions
While it’s not a legal requirement to have a terms & conditions section on your website, it can act as a reference point should you face any legal issues in the future.
Your website terms & conditions should include key pieces of information. For a full list head to this handy do I need terms & conditions on my website article.