Let’s dive into web design terms…
Above the fold (also referred to as Top Fold)
Top Fold is a term from the newspaper industry and refers mostly to broadsheets that were so big they were folded in half on a shop rack. News articles that made it above the fold or in the top fold on the first page were in prime reader space and were often chosen deliberately to make the day’s paper exciting to potential readers.
Today, in web design terms, this is also used to refer to the first section that you see on a website, prior to scrolling. If items are hidden and only revealed upon scrolling, they are ‘below the fold’.
Accordion
An accordion is where content is hidden from immediate view within a web page but the area can be expanded to show the content.
This is a great tool if there is a lot of information to display, as it keeps the view cleaner. It is also useful from an SEO perspective because additional written content within a page can contribute to increases in engagement and event tracking, as well as provide keyword opportunities.
Animations
Animations are added to a website to give more visual interest to the user. They can give a premium feel to a website. There are two types of animation that we tend to focus on; load animations and button animations.
Load animations are animations that happen as you scroll down on a website where elements load in.
Button animations are animations that happen on hover or upon clicking on a button.
Breadcrumbs
Breadcrumbs show where you’ve been on a website to get to your current location. Think of it like a folder system or a tracking device history.
Burger menu
This is a style of menu that looks like an image of a burger (denoted by three stacked horizontal lines at the top of the website window). Press the burger menu and a detailed menu bar appears.
Typically used on mobile websites but sometimes used on desktop designs too, for example here on the Strafe website.
Carousel
Carousels allow multiple pieces of content to occupy a single, coveted space. The information is often displayed by allowing the user to manually click through via arrow keys or similar, or on a timed changeover.
Category page
A category page refers to a gateway page that shows a collection of other pages. For example, a blog category page would show all individual blogs. On an e-commerce site, a category page would list all the product categories available to shop, so a user can browse and find what they want more easily.
Cookies
Cookies are small files that websites send to the viewing device that then allows the website being viewed to monitor and remember certain information. There are many different types of cookies, some are essential for the best user experience on a site and others are for tracking purposes.
Custom Post Type
A custom post type is a WordPress-specific term which relates to a custom content group which can be added to a website. By default, WordPress comes with 2 types of post types: Posts (Blog posts) and Pages.
We can add a new ‘custom post type’ to the website to allow for features such as testimonials, services, vacancies etc.
Once we add a custom post type, it means that a website can now have an area to view specifically for these content pieces. For example, services might be shown as website.com/services/service.
E-commerce
E-commerce is the term used to describe a site that allows items to be purchased directly on the website.
Gateway
A page on a website that makes it as easy as possible for the user to get the information that they’re looking for. It will then link to other pages within that topic. For example ‘Available Jobs’ would be a great gateway for individual job postings and application submissions.
Hard refresh
A hard refresh clears your browser cache (also known as Clearing Cache) for a specific page, which forces it to load the most recent version of that page. This could include new scripts, styles or features.
To do this, follow the below steps:
Windows users: hold down Ctrl and then press F5 on your keyboard
Mac users: hold down Cmd and Shift and then press R on your keyboard
Hello bar
A ‘Hello’ bar can be used as a pop-up banner on websites to indicate some important information, such as free delivery or Covid-19 information.
This is typically a short snippet of content that flashes up on the first visit and that the user can close. This can be added to a site using a plugin.
Hero banner
The hero banner is the very top section of a web page that shows ‘above the fold’.
Read more: What is the difference between SaaS and websites?
Homepage
A homepage is the main page that you reach when visiting a website domain.
Here at Strafe, we typically design the homepage first to decide on a style that will be rolled out across all other pages of the site.
Internal page
Internal pages on a site are all other pages aside from the homepage.
Landing page
A landing page is used to push a single call to action, such as completing a form, booking a place, or signing up for a service. Usually, there will be no menu so the user is ‘forced’ into a single action and doesn’t navigate elsewhere on the site.
A landing page link can be used in marketing communications or from a social post to point the user to a specific uninterrupted page for promotions.
Lazy load
Lazy loading is the practice of delaying load or initialization of objects (content blocks, imagery, etc) until they’re needed to improve performance and save system resources.
Often, additional elements further down the page are only loaded in when the user begins to scroll through. This helps the site speed as the website isn’t attempting to load all content immediately upon the initial view of the page.
Lightbox
A ‘lightbox’ is a popup window that displays images and videos by filling the screen and dimming out the rest of the web page.
Used heavily with video players.
Next Gen images
Next-gen image formats are file formats that often include compression information embedded in modern browsers that allow website images to be loaded faster. We use a plugin called ‘Ewww’ to take care of this on our sites.
Page template
A page template is a set layout/structure to a page. A template can be reproduced many times, for example, a product page template would be reproduced for products within an e-commerce website but the template structure itself remains consistent.
Plugin
A plugin is a piece of software containing a group of functions that can be added to a website to provide additional functionality. For example, the Woo-Commerce plugin can be added to WordPress sites to allow e-commerce functionality.
Single page
A single page refers to an individual page that is navigated to from a category page. For example, a blog article would be a single page.
We hope our web design terms have helped!
Need someone to take the headache out of web design for you? Look no further and tell us all about your website idea in our Project Planner.
