Web Design Terminology Explained: A Comprehensive Glossary

Unfortunately in the world of web design it is true that both web designers and businesses can use terms and phrases which either mean different things to each party or which are simply not understood by the clients.

My name is Paul Edwards, I am a web consultant and frontend developer based in Worthing, West Sussex. Today I answer the question “What are the frequently misunderstand niche terms used by a web designer?”

I have provided this glossary with the aim that it may help you understand the wonderful language of web designers. Should you not find the term that you are looking for or would like to discuss a particular communication in a bit more depth you can call me on 0193 527927 and I will be happy to help.

A – B – C – D – E – F – G – H – I – J – K – L – M – N – O – P – Q – R – S – T –U – V – W – X – Y – Z

A

Above/Below the fold

The fold is a term which originated in the newspaper and print industry. The fold was the part of the paper that got folded. And Above the fold refers to the copy which was visible above the folded/hidden portion of the paper. Any content not visible was referred to as Below the fold.

These terms have moved from the print industry into the web industry where the terms now refer to content on a page visible above the bottom of the screen being used and the content not seen without scrolling the page. In the below image the orange line represents the bottom of the screen or what would be the fold in the middle of a newspaper.

Accessibility

Accessibility refers to making website content easy to consume by as many people as possible including those who may have special requirements due to physical or mental impairments or conditions which differ how content may be perceived.

Examples of improving accessibility include high contrast and low contrast colour schemes. Formatting to make it easy for those using screen readers to navigate and listen to page content. There is a law in the UK governing accessibility and you can read more about accessibility at the UK Gov website or at the W3C introduction to accessibility.

Analytics

Data/statistics about your website, how it is viewed, devices used to view the site and demographic information. Analytics data is important in helping decide strategy, what content is successful/unsucessful and in identifying  changing habits of users. Analytics are often viewed in some kind of software interface such as Google Analytics. Analytics are often tied to advertising campaigns, social media content, and can be used to track traffic generated by those campaigns and content.

Back to Top

B

Backend

Although this is a gross simplification, when web designers refer to the frontend they refer to what is seen. When they refer to the backend they refer to what is unseen. Backend developers tend to be directly involved at a server level and working on the software and databases that power the website which displays the frontend. Frontenders design and style the visible content of a website and get involved in building themes and working on front end features and functions. Typical backend languages can include (but are not limited to) Java, PHP, Ruby on Rails, Python, and .Net.

Backlink

A link to your website or content from another website.

Backup

A copy of your website database and/or files. There are lots of different types of backups, some created by plugins in WordPress and others created manually via a PHP admin interface, ftp or software installers like Installatron or Softaculous (on cpanel). Backups should be run before and after any significant change so that your website can be restored should something go wrong and your site or part of your site is lost or defaced. Ideally backups are carried out at frequent intervals as part of a website maintenance plan.

Useful resources:

10 simple steps to bulletproof wordpress backups

Do you do these 10 things during website maintenance?

Why you need a website maintenance plan for your WordPress website

How often should you backup your website?

Bounce

A bounce describes the act of a website visitor arriving at a page and then leaving without interacting with any other links on the page. A high bounce rate can be indicitive of problems with your content and/or usability of your website.

Bounce rate is a key statistic which is measured by analytics packages such as Google Analytics. Google provide more information about bounce rate here.

Breadcrumb

A text device that shows the location of the page you are currently viewing in the site hierarchy.Breadcrumbs are text links often seperated by arrows or some kind of visual device which indicates what level of a website hierarchy the page you are viewing is at. Here is an example:

Homepage>Main Category>Sub Category>Product

Normaly the link farthest to the right is the page you would be looking at with each link to the left being one higher level in the hierarchy of the website.

Back to Top

C

Cache

Websites often have software caching programmes and servers often have both caching hardware and software. Caches temporarily store information for rapid retreival to cut down on the time taken to deliver that information. Caches dramatically speed up the delivery of website and that caching can occur at multiple levels from server, website and the users browser.

Typical WordPress caching plugins in use:

WP Optimize (I use this a lot)

WP Rocket

WP Super Cache (built by the people that make WordPress)

W3 Total Cache

SG Optimiser (requires Siteground hosting)

CMS

CMS stands for Content Management System, a software platform that allows easy management of website content. Often ‘drag and drop’ in nature, CMS’s are easy for non-web professionals to use without specialist knowledge.

WordPress is one of the most popular content management systems on the planet and it is responsible for delivering about a third of all websites in existence. Originally starting out as a blogging platform, WordPress is one of the easiest CMS for clients to use as it has an easy to navigate dashboard and content creation interface.  Because WordPress is quick to setup and easy to work on it tends to be popular with small to medium enterprises that have limited marketing budgets. Find out more about WordPress here.

Drupal is often called a content management system but to be honest it is more of a framework for building bespoke content management systems. Drupal can literally do anything but can have a steep learning curve although that is improving. Very suitable for large data sets or large numbers of users. Find out more about Drupal here.

There are many other CMS’s available but in my opinion these are the main two worth your consideration and which have the best community support and a wide number of agencies and freelancers available to support you.

Content

The words, images, branding and files included on a web page for consumption by visitors.

Content marketing

This term relates to the creation and sharing of content online in order to build awareness of a brand. Content marketing can include the following activities:

• Building and optmising landing pages
• Guest blogging
• A/B testing
• Searching for broken links in articles and offering your own content as replacement
• Social media posts
• Webinars
• Paid advertising
• Live video
• Mapping content to pain points

Copyright-free images

Images which are provided for use by others although the copyright for the image may remain with the original owner. Copyright-free images are often free to use but may require some kind of credit for the image displayed.

I really enjoy using a website called Pexels.com as they have some really high quality images which are all free to use.

CSS

Your web designer may refer to stylesheets or CSS. CSS or Cascading Style Sheets contain the code which applies visual styling to the content on a web page. CSS uses classes and id’s which are added to HTML to style how the content in the HTML appears. An example of a simple bit of CSS:

.text-large {

font-size: 30px;

}

The above code will make any text which has the class ‘text-large’ applied to it 30 pixels high.

The HTML end applied to a paragraph of text would look like this:

<p class=”text-large”>Content text goes here</p>

Back to Top

D

Deliverable

A deliverable is an item which is ‘delivered’ to a client as part of a contract. Typical deliverables may include:

• Wireframes
• Static visuals
• Responsive mockups viewable in a browser
• Strategy documents
• Statistics
• Branding guide
• Logo pack

Digital format

Often a term used to describe the fact that an image has been taken, created or converted to a digital format via a digital process. Digital cameras produce digital format images. A pdf document of terms and conditions would be a digital format document.

Typical digital image types are:

• GIF
• JPG or JPEG
• PNG
• BMP
• TIFF
• RAW
• SVG

Typical digital file types are:

• PDF
• XML
• HTML
• RTF
• TXT
• DOC
• XLS

Typical digital video file types:

• AVI
• FLV
• WMV
• MOV
• MP4

Discovery (discovery phase)

Discovery is one of the first stages of a new website project with a client. The discovery phase is scaled to the needs of the project but broadly, includes:

• Research
• Analysis
• Technical audits
• Competitor research
• Strategy
• User journeys
• Customer research
• Site mapping
• Content planning

Downloading

The act of transferring a file from a website or online source to a local device such as a computer or phone. Files can be downloaded from a website by clicking on a link, right clicking on an image or file or by downloading directly from a server using FTP and an FTP client.

Drupal

Drupal is an opensource content management system which is used to build, manage and maintain websites. Find out more about Drupal here.

Back to Top

F

Favicon

The small image displayed in a browser tab which represents/identifies what website is being viewed in that tab. Favicons can also be used and displayed as shortcuts.

The favicon for this website can be seen in the tab you have open now. It should look something like this:

Frontend

Frontend refers to the visible part of a website and the files and technology that contributes towards showing that website.
A frontend developer gets involved in coding templates and working on stylesheets and functions using languages such as HTML, CSS, JAVA and JQuery and PHP.

FTP

FTP stands for File Transfer Protocol and is the most common way of transfering files to and from remote devices such as servers and computers.

FTP Client

FTP clients are software designed to help users connect their computer to a server by providing an easy to use interface that stores login credentials for accounts and creates a visual bridge between local storage and online storage. Often a client will provide syncing tools and more. You should be aware that you need to use SFTP if you require secure transfer of files.

Commonly used FTP clients available are:

• Filezilla
• WinSCP
• CoffeCup

Back to Top

H

Heavy (that page is heavy)

A webpage can be described as heavy if it is bulky and takes up a higher than expected amount of server space. An image can also be described as heavy if it has not been optimised for viewing online and is many megabytes in size.

The average web pages size in 2019 is 3.29MB which is in my opinion huge. I try to ensure any page is below 1MB and I would describe any page over 1MB as heavy.

In terms of images on a page, I try to have any regular image below 50k and any banner image below 150kb. Anthing above 200kb is ‘heavy’ using my frame of reference.

Avoiding heavy pages and images is really important not only so that visitors have a page load quickly in their browsers or on their mobile phones but also because page speed is now a factor in where a site ranks in search engine results. As a rule, pages with a smaller overal size load faster and rank higher.

Hit

A hit is a request recieved by a server to display an item on a webpage such as an image. One page may generate many hits but still only be classed as one visit.

HTML

Hypertext markup language. It is the language used to present content in a webpage. For more information about HTML please have a look at this Wikipedia entry.

Back to Top

L

Landing page

A landing page is a page on a website which is designed to be presented to people who may be clicking on an advert elsewhere or be part of a sales funnel. A landing page is normally crafted to have minimal distraction and links away from it to encourage a visitor to carry out a particular task.

Landing pages can be hand crafted in code or by using plugins in WordPress such as:

• Beaver builder
• Leadpages
• Elementor

Most plugins that create landing pages are premium in nature and this means that you will have to pay a subscription or license fee to use them.

Back to Top

M

Meta tags

Meta tags describe something about a webpage such as what it is about, when it was created, and what keywords might be relevant. Commonly used meta tags are:

• Title tag
  The title of your page displayed to visitors and search engines. The visible number of charactors in Google is between 55 and 64.
• Meta descritpion
  The summary of a web page. The visible number of characters in Google is up to 160.
• Alt tag
  Text which explains what an image is so that screen readers can understand and those that view sites as text only know what content should be in that place. Search engines also use Alt tags as they cannot ‘see’ images.
• Robots meta tag
  Tells search engines and other crawlers whether it should index or follow a page.

Mobile First

A method of designing a website for mobile phones first, and then adding extra layers of styling and function for other devices with larger screens later.

Mockup

A mockup can sometimes be a static visualisation of how a website is proposed to look. Sometimes a mockup can be interactive and created using specialist software tools or even be a live (but limited) website viewable in a browser.

Back to Top

N

NDA

An NDA is an abbreviation of Non-Disclosure Agreement. An NDA is normally an agreement that dictates what and when both parties in a contract can and cannot disclose certain information about the agreement to third parties.

Often when an agency sub-contracts work to a freelancer they use an NDA to restrict the freelancer from telling third-parties about the project unless there is a genuine need to do so such as employing another third-party to complete a task. This means that freelancers often cannot use work they completed under NDA in their portfolios.

NDA’s often include some kind of penalty that may be imposed should and NDA be ‘broken’ by either side.

Back to Top

P

PDF

Portable document format created by Adobe Corporation. PDF’s have commonly been used for creating small file size documents with limited editing ability or some kind of password enabled security feature. PDF’s have been used online for downloadable documents for many years but their popularity has perhaps started to dwindle in recent years.

Pen testing

An abbreviation of Penetration Testing. Ethical hackers can try to penetrate your website and/or server with the intention of uncovering security flaws so that they can be removed/fixed.

Plugin

The blogging platform WordPress which has morphed over time into a Content Management system allows the use of additional small bits of software called plugins to extend functionality. Other CMS’s like Drupal also use similar software extensions but call them Modules.

Prod (short for production)

Prod refers to the live website available to the public. Developers and designers often repeat the mantra “dont edit prod”. Instead of making edits to a production site, we can do those edits on a development or staging website. Staging sites are copies of the live site which can be worked on and then the changes can be ‘sent live’ once they are approved.

Back to Top

R

Responsive

The ability of a web page to change size and shape to fit the screen size and orientation of the device being used to view it. An analogy is often used of pouring water into different shape containers. The water adopts the shape of the vessel into which it is poured. Responsive web design attempts to achieve the same with a web page being viewed on screens of varying sizes and proportions.

Back to Top

S

Scope Creep

Scope creep describes when additional requirements are added into the project that were not in the project brief. If not handled efficiently and appropriately, scope creep can cause a project to exceed budget and deadline.

Proper pre-project discovery and discussion with the client to inform the brief can help avoid scope creep. Where despite best efforts it does occur, it should be addressed early and where appropriate schedule the additional works to be completed after the main contract or cancel the existing contract and start a new one with the new features included with amendments made to timeline and budget.

SEO

Search engine optimisation. A method of altering the structure and content of web pages to improve their chances of being found higher up in the search engine results pages for a chosen set of keywords relevant to those pages. SEO is based upon a combination of information made public by search engines such as Google and experimentation. If anyone gaurantees to put you on page one of Google, be sceptical. There are no gaurantees.

SSL

Secure socket layer. A security method for creating an encrypted link between a web server and a browser. You will often hear web designers talking about SSL certificates which you can purchase to create a secure connection to your website. SSL certificates are essential if you recieve or send any important, personal or sensitive information via your website.

Once only found on websites taking payments online, SSL certificates are fast becoming the norm for all new websites as visitors have more trust in sites that use them. Google has also revealed that sites with SSL certificates may get a small bump in the search engine listings.

I recommend that all websites use an SSL certificate. Some common SSL certificate vendors are:

• Lets Encrypt (free)
• Digicert
• Comodo (paid and free)
• Verisign

Staging (edited)

A live but restricted access copy of your website on which changes and edits can be made and tested prior to pushing those changes to your live (production) site. Cheap hosting packages dont often come with staging sites but these are easily created on a subdomain or alternatively if you purchase a more fully featured hosting package you may find that a staging site function comes built into the management dashboard.

Static layout

A static layout is a mockup which uses a fixed-width page size which does not respond/change to screen size. Static layouts are reducing in practicallity since the rise the use of mobile devices because they do not show the responsive nature of content. It is possible however to create multiple static visuals for each likely screen size and type that will be in use. Personally I find this takes longer than to create a basic responsive mockup in the browser for clients to view. As such, I dont generate static layouts for projects anymore.

Back to Top

U

UX

Short for User Experience. If you want to learn about user experience I suggest you have a look at the website of Paul Boag, a User Experience Consultant who has worked for many large and well known brands. Paul has lots of articles and guides on his site and frequently runs courses about user experience related topics.

Back to Top

W

Website Maintenance

The ongoing work that is required to keep a website current. Modern websites that run on a CMS such as WordPress require ongoing updates to the core software and the additional extensions (called plugins) to fix security flaws and bugs that are identified by users and developers. I recommend monthly website maintenance to keep your website resilient to hackers and bug/error-free.

White label

When a freelancer, contractor or agency carry out work for another party and remain invisible to the client. The work is then presented as work completed by the person employing the sub-contractor. Many small agencies sub-contract work to freelancers on a white-lable basis and in most of these instances, the sub-contractor is not allowed to show that work in portfolios. Such activity is often goverend by an NDA (non-disclosure agreement).

White space

The empty space around content on a web page. White space is a good thing! White space helps bring focus to elements on the page and can be used to help create visual hierarchy and a sense of priority.

Widget

An editable and reusable block of content on a WordPress website which shows up in ‘sidebars’. Sidebars can be added to areas of a page such as footers, headers etc. giving the site owner the ability to easily edit information that can be found in more than one place. Sidebards do not have to be displayed in the ‘side’ of a page but can be added anywhere by the web designer.

Wireframe

A very quick and often rough line drawing of a web page and its content areas to help clients and themes visualise how a webpage should look.
Often those that build web pages are given a set of wireframes and/or static visuals to base their designs upon.

WordPress

WordPress is a content management system. Approximately 30% of the world’s websites are built and managed using WordPress.

Back to Top