Website Terms Glossary

Here is our Website Terms Glossary, we find there is a big dictionary-match problem in the industry.
Designers, SEO experts, and Developers all use slightly different definitions for each word.

We can usually clear up any confusion by elaborating on the subject, but when we’re talking to clients we might use some esoteric term for an element on a page, but our client has no idea what we’re talking about.

We’re putting this list together to help clear up confusion with anyone we’re speaking with.
https://developer.mozilla.org/en-US/docs/Glossary

At FunkPd we try our best to use the Mozilla docs glossary whenever possible.

NOTE: This is an ongoing WIP and will be updated as we go. Contact us if you have any requests/changes.

Website Terms Glossary

Address Bar/URL bar

The Address Bar is where you enter a website’s url, or a search phrase to google/bing.

Agile

Here is our Website Terms Glossary, we find there is a big dictionary-match problem in the industry.
Designers, SEO experts, and Developers all use slightly different definitions for each word.

We can usually clear up any confusion by elaborating on the subject, but when we’re talking to clients we might use some esoteric term for an element on a page, but our client has no idea what we’re talking about.

We’re putting this list together to help clear up confusion with anyone we’re speaking with.
https://developer.mozilla.org/en-US/docs/Glossary

At FunkPd we try our best to use the Mozilla docs glossary whenever possible.

NOTE: This is an ongoing WIP and will be updated as we go. Contact us if you have any requests/changes.

Website Terms Glossary

Address Bar/URL bar

The Address Bar is where you enter a website’s url, or a search phrase to google/bing.

Agile

I think this image says it all, Agile dev is about starting small and building/growing in gradual steps, or milestones. This way your product is up and doing its job quicker, payments are easier to manage, and the risk of failure is reduced

Browser

A browser, or web browser, is the application you use to visit web pages or web apps.

On a desktop that’s usually Chrome, Edge, or Safari. On a mobile it’s usually Chrome, Android Browser, Safari, or whatever built-in browser an application is using to open links (like instagram), usually chrome based.

We really only develop/design for chrome as it’s by far the most common browser. In some situations we may fix browser related bugs.

Dynamic / Static pages

Dynamic pages are constantly grabbing information from somewhere and displaying it on page, often in real-time.
Static pages are just simple pages like this one where nothing changes, or changes are done on a schedule.

Database

A database is basically a glorified spreadsheet, we can pick out certain rows and deliver them in many different ways. We focus on websites but data always comes down to a database or spreadsheets.

It often comes in KEY => VALUE pairs, meaning it often looks like a spreadsheet with only two columns. But a database can have as many columns/rows as you want.

So each page in WordPress is just a representation of a row in a database.

The post title, the featured image, the content, and any extra meta-data is stored in a row of a database, and WordPress is the code that puts it all together

A SQL database is a lot quicker than a csv spreadsheet for a number of reasons, mainly there’s little to no overhead running while you’re calling a database, but a spreadsheet requires a heavy application(sheets, excel) and human interaction to query or change data

MYSQL is not a fun language to use, it’s very messy, and if you ever find yourself writing MYSQL it means something has gone horribly wrong.

WordPress is great because it deals with all the tricky MYSQL.
As a developer all we need to write is “the_title();” and the title of the post is written out in html

Wordpress in the backend will take that and ask the database this

“$_post = $wpdb->get_row( $wpdb->prepare( "SELECT * FROM $wpdb->posts WHERE ID = %d LIMIT 1", $post_id ) );“

That’s just a part of it, you can see the rest here

Eww, no thanks. Imagine writing that out every time.

Cache

To Cache! The cause of and the solution to all of web design’s problems.” –Homer Simpson

WordPress without a cache is a bit like a Subway restaurant

Everything WordPress needs is neatly organized and ready to go, but the server must build everything for each customer. This can be preferred if your website has custom features, like ecommerce, or live or dynamic updates

WordPress with Cache is more like buying a pre-made sandwich from a deli or grocery store.

Now you have all your sandwiches pre-made, wrapped, and packaged. Your visitors can just pick one up and go.

We can go one step further with a CDN, that would be basically putting up a 711 in each country for even quicker delivery.

Refactor

restructure (the source code of an application or piece of software) so as to improve operation without altering functionality.

Often clients come to us with fully featured websites and request a full rebuild because they’re having troubles with stability, updates and upgrades, performance, etc. However a complete rebuild with all the functions of their current site is prohibitively expensive.

We’ve created a more economic solution where we reuse the majority of the code on the website, but we simply organize everything and restructure their ‘tech stack’. This helps a company build a scalable code-base and deliver pages/applications quickly.

Tech Stack

Code languages all have their strengths and weaknesses, and code often ‘depends’ on other code to function properly.

For example,

PHP creates HTML using information from a database (MYSQL/POSTGRESQL)
MYSQL is necessary for the database code to run

APACHE is the code that serves html/css/js/images to the browser

LINUX is the operating system that the whole stack runs on.

This is called a LAMP stack, while not optimal, it’s the most common.

At FunkPd we use Linux, Lightspeed, MYSQL, PHP

On top of that we use these tools to develop our websites.

Code:
HTML, JS, CSS > PHP > WordPress, Elementor Pro, LSCache, Woocommerce

Design:
GIMP, Inkscape, Figma, Canva

You’ll often hear marketing terms like JAMSTACK, MERN, FLUF and so on, these are often experimental, or designed for supporting billions of monthly users, for most businesses these are just overkill.

Function

A function is a tricky concept to grasp, but a function is any action, object, or element on a page.
PHP functions may be used to create the HTML/CSS of the page, and JS functions may be used to handle interactivity from the user.

Google defines it like this:

Noun: An activity or purpose natural to or intended for a person or thing.
“bridges perform the function of providing access across water”

Mathematics, a relationship or expression involving one or more variables.
“the function (bx + c)”

Both of those definitions work for our use of the word.

The most simple function looks something like this:
function foo($foo) {
    console.log('Hello ' + $foo);
}();

And is called like this:
foo(“Foo”);

And will output this:

Hello Foo

You’ll notice the function we created is using another function ( log() )

A function can be a collection of functions which are all made up from other functions!
It’s ‘functions’ all the way down!

HTTP response status codes

Each time we try to load a http page we will receive a status code, 200 means everything is a-ok, anything in 500 means something has gone wrong. 

Components

(This post is an ongoing work-in-progress, we’ll fill this out soon!)

Button

A button on a website is a graphical element that invites the user to take a specific action, such as submitting a form, navigating to another page, or making a purchase. Buttons should be noticeable, clear, and have a strong purpose to effectively guide the user through the website.

Carousel

A carousel is a rotating display of multiple pieces of content, usually in the form of images or slides. It allows the user to navigate through the content and see multiple pieces in a compact space. Carousels should be visually appealing, easy to navigate, and highlight the most important information to provide a seamless user experience.

Footer

The footer is a section of a website typically located at the bottom of the page. It’s used to provide site navigation, contact information, and links to important pages such as the privacy policy and terms of service. The footer should be organized, helpful, and easy to navigate to provide a complete and seamless user experience.

Form

A form is a set of fields used to collect information from the user, such as their name, email address, or payment information. Forms can be used for a variety of purposes, such as contact requests, surveys, or online purchases. Forms should be user-friendly, intuitive, and secure to ensure a positive user experience.

Header

The header is a section of a website typically located at the top of the page. It’s used to provide a strong first impression and set the tone for the rest of the user’s experience. The header typically includes the site logo, navigation, and any other important information or actions. The header should be clear, concise, and easy to use to provide a seamless user experience.

Hero

The hero section is a prominent area of a website used to showcase the main message or purpose of the site. It’s typically located at the top of the page and includes a large image or background video, a headline, and a call-to-action. The hero section should be bold, exciting, and grab the user’s attention to effectively communicate the site’s purpose.

Icon

Icons are graphical symbols used to convey meaning and information on a website. They can simplify navigation, convey emotions, and make the website more visually appealing. Icons should be recognizable, consistent, and add value to the user experience to effectively communicate information and guide the user through the site.

Modal

A modal is a focused area for displaying important content, such as a form, image, or video. Modals typically appear as a pop-up window over the main content and are used to prioritize the user’s attention. Modals should be attention-grabbing, clear, and easy to close to provide a seamless user experience.

Navigation

Navigation refers to the menu or links on a website that allow the user to find and access different pages or content on the site. Navigation should be clear, intuitive, and easy to use to provide a seamless user experience and help the user find what they’re looking for.

Popover

A popover is a secondary window that appears over the main content to provide additional information or context. Popovers are typically triggered by a user action, such as hovering over a piece of content or clicking a button. Popovers should be informative and not get in the way of the main content to provide a positive user experience.

Section

Sections are the building blocks of a website, used to break up the content and make it easier to navigate. Sections typically contain specific pieces of information or content, such as images, text, or forms. Sections should be organized and easy to navigate to provide a seamless user experience.

Top Bar

The top bar is a reserved area of a website typically located at the top of the page, just below the header. It’s used to display important information and navigation, such as the site logo, search bar, and user account information. The top bar should be accessible and easy to use to provide a seamless user experience.

Idioms

Crash

“My website crashed!” doesn’t actually make sense. Usually it’s actually still running fine, but the code it’s trying to run is just too heavy so it seems like everything stops, or the server sends us a 500 error or other http code

Best Practice

Best practice is a set of standards for web design/development, such as keeping elements consistent and DRY, using correct DOM attributes,

Backend / Frontend

Backend is a commonly confused term, often people will mislabel the wordpress dashboard/cms/admin as a ‘backend’

Frontend is what you see on a page, any line of text, image, button, etc comes from html in the backend.

The Backend is what you don’t see, these are all the files that make up WordPress and it’s plugins, and the files that instruct your server on what to do and when.

Code / No-code

No-code is a funny term. You can’t do anything on a computer without code, so a no-code designer is basically programming a VCR, they’re just pushing buttons till things ‘look right’. And you get stuck with a bloated website that is impossible to edit and takes 10 seconds to load.

Responsive / Mobile Design

“Responsive” was a terrible choice of words, but we’re kind of stuck with it.
Mozilla defines it like this “Responsive Web Design (RWD) is a Web development concept focusing on making sites look and behave optimally on all personal computing devices, from desktop to mobile.”

The word “Responsive” to a human means something else though, a ‘responsive web design’ sounds like it loads quickly, is interactive, and responds to the user. Unfortunately the term just means it looks good on desktop+mobile, which is not just a feature anymore, it’s a necessity.

Acronyms

AJAX

Asynchronous JavaScript And XML
We use AJAX to make the website interactive and dynamic.
AJAX is using JS to trigger/activate certain PHP scripts, and inject them into the current page, so the user/visitor doesn’t need to reload the entire page for each button press.
It’s most commonly used in contact forms, where the data is sent to the server via JS with xml/json, the contact form will then update to say ‘thank you’ without needing to reload the page.

API

Application Programming Interface
A set of rules and specifications that software programs can follow to communicate with each other. It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, and the conventions to be followed.

An API can be used to access data or functionality from another application or service. For example, the Google Maps API allows developers to access the Google Maps platform within their own applications. A lot of companies today are shifting from their traditional roles into API/data companies, with 3pl shipping fulfillment for example, your data is more valuable to them than your product.

CDN

Content Delivery Network
A system of distributed servers that deliver content to users based on their geographic location. The content is delivered from the server closest to the user’s location, which reduces latency and makes the content more responsive. CDNs are often used to improve the performance of websites and apps by reducing the load on the origin server and increasing the speed of content delivery.

CMS

Content Management System
A software application or set of tools that enables you to create, edit, organize, and publish content. A CMS may serve as a central repository for all digital content associated with a website or it may be used to manage only a portion of the content on a site. For example, you might use a CMS to manage only the blog posts or articles on your site, while the rest of the content is static and managed through other means. You might even use multiple CMS’s together, such as Shopify + WordPress.

CSS

Cascading Style Sheets
A style sheet language used for designing the presentation of a document written in HTML. CSS is mainly just for looks, but it has some limited interactive features such as detecting the mouse hovering over an element, or if a button was clicked.

DNS

Domain Name System
A system that converts human-readable website names (such as www.example.com) into machine-readable IP addresses (such as 192.0.2.1).

When you enter a website name into your browser, your computer will first contact a DNS server to obtain the IP address for that website. It will then connect to the website’s server using that IP address.

The DNS system is an essential part of the Internet, as it allows us to use easy-to-remember website names instead of hard-to-remember IP addresses.

DOM

Document Object Model
A tree-like structure that represents the HTML document as a node system, with each node representing a part of the document. The DOM can be used to change the document structure, style, and content. We like to keep the DOM as light-weight as possible to ensure performance.

FTP

File Transfer Protocol
A standard network protocol used for the transfer of computer files between a client and server on a computer network. FTP is a commonly used protocol for transferring website files from a local computer to a web server. These days we usually use SSH or simply HTTPS protocol to transfer files.

GUI

Graphical User Interface
A type of user interface that allows users to interact with electronic devices in a graphical way, usually using a mouse or a touchpad. GUIs are common on desktop computers, laptops, and mobile devices, and can be found on nearly every type of electronic device today.

One of the most popular examples of a GUI is a web browser. Web browsers allow users to navigate the internet and view web pages by clicking on graphical icons and menus. Other common examples of GUIs include the operating systems for desktop computers, such as Windows and macOS, and the apps for mobile devices, such as iOS and Android.

HTML

Hypertext Markup Language.
HTML is used to create structure on a web page. Generally CSS is used to style the HTML elements on a web page, and JavaScript is used to add interactivity to a web page. If a website was a car, the HTML would be the chassis, the CSS is the body kit, and the JS is the wiring harness.

IDE

Integrated Development Environment
An IDE is a piece of software that allows developers to create and manage code. IDEs typically provide a code editor, a compiler, and a debugging tool. Some IDEs also provide a source control management system, which allows developers to track changes to their code and share their code with others.

JS

JavaScript
A programming language that enables you to create interactive web applications. It is widely used and supported by all major web browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. JavaScript is a versatile language that can be used to create complex web applications.

JSON

JavaScript Object Notation
A format for storing and transporting data. It is often used when data is being exchanged between a server and a web application. JSON is a popular alternative to XML, and it is often used in Ajax applications.

MYSQL

My Structured Query Language
A database that stores data for websites. MYSQL is used by many large websites, including Facebook, Twitter, and YouTube. MYSQL is free and open source software, and we use it with WordPress for storing all our company data.

SQL

Structured Query Language
A programming language designed for managing data in relational database management systems (RDBMS). SQL is used to query, insert, update, and delete data in databases. SQL is also used to create and modify database structures, such as tables, indexes, and views.

SEO

Search Engine Optimization
A long-term marketing strategy employed in order to improve a websites’ visibility and organic search results in google and other search engines.

There are two main types of SEO: on-page SEO and off-page SEO. On-page SEO refers to the optimization of a website’s content and code, while off-page SEO refers to the promotion of a website through link building and other digital marketing tactics.

SVG

Scalable Vector Graphics
A type of image format used on websites that allows images to be scaled up or down without losing quality. Unlike raster images, which are made up of pixels, SVGs are made up of mathematical equations, making them a flexible and efficient option for web graphics.

URL

A URL, or Uniform Resource Locator, is the unique address or location of a web page on the internet. It’s what you type into your browser’s address bar to access a website, like “https://funkpd.com“.

UX/UI

User Experience/User Interface,
UX/UI refers to the design and overall user experience of a website. It encompasses everything from the visual design and layout of the site, to the way users interact with it and navigate through the content. A good UX/UI design should make the website easy to use and provide a positive experience for the user.

WWW

The World Wide Web
WWW, is a system of interlinked hypertext documents accessed through the internet. It’s the primary platform for accessing and sharing information and content on the internet, and is what most people think of when they hear the term “internet”.

WYSIWYG

What You See Is What You Get
WYSIWYG is a term used to describe a type of website or software interface that allows the user to see exactly what the final result will look like as they work on it, without having to code or preview the final product.

XML

XML is a markup language used to encode and store data in a format that is both human-readable and machine-readable. It’s used to store and transfer data between different software systems, and is often used in web development for storing and exchanging data.