Web design has now been around for a while, and it’s wasted no time in developing a complex, jargon-filled language. As soon as you take even the smallest step into the world of web design you start hearing “What CMS do you want to use?”, “Do you want that above the fold or below the fold?”, “Do you want a fixed layout?”, “What web hosting do you want to use?” and you’re left wondering what it all means. We know that it can be pretty overwhelming trying to figure out all the key web design definitions and terms, especially if it’s all new.

Web design covers a large scope of work from web developers who write code, to UI and UX designers who work on interfaces, to web designers who take care of the look and feel of your site. There are many people involved in web design.

Computer screen with a search bar and the text web definitions
Illustration by OrangeCrush

Learning what just a few of the acronyms and jargon words mean in web design can make working with your designer and developer a lot easier, and can also help you to understand how your own website actually works. So whether you are hiring help or doing it yourself, knowing the most commonly used, and most commonly confused, terms in web design and development can come in handy:

Web design definitions

Person sitting with laptop typing and looking up terms
Illustration by OrangeCrush

Accessibility

Accessibility is a big deal in web design nowadays. It means, essentially, how accessible your website is to people, including anyone with hearing or visibility impairment. It’s important to keep this in mind before and as you create your website. Take a look at these six steps to make your web design accessible if you aren’t sure where to start.

Below the fold (and above the fold)

Below the fold and above the fold are two terms that have their origins in newspapers. The “fold” is where the newspaper is folded Above and below describe wether the information appears on the top or lower half of the fold. For web pages, the “fold” is generally defined as the point where you have to start scrolling, but the principle is the same—information that is above the fold (ATF) is more accessible and visible than that below the fold (BTF).

Elastic (layout)

An elastic layout is an approach to designing web pages that describes the relationships between elements and their positions on the page as percentages rather than specifically designed distances and sizes. This means that web pages are more adaptable—both for the preferences set by your visitors in terms of font size and spacing, but also when it comes to optimizing the page for viewing on a smartphone or tablet.

Nowadays, elastic layouts are a key part of responsive design approaches, but before the idea of responsive design was around, elastic layouts provided a simple way to make websites adaptable.

Ex

An Ex is a unit of measurement that uses the lowercase “x” in a font as a standard measure.

Fixed width (layout)

A fixed width layout is a method of designing web pages where a designer will specify how large a web page is and exactly where elements will appear in it. This gives designers much more control over the design of a web page than an elastic layout, but makes pages less adaptive to different screen sizes.

Hexadecimal

Hexadecimal, also known as “hex” numbers, are a base-16 number system, meaning they use 16 symbols to define colours. Hex numbers use numbers from 0 to 9 and letters from A to F. Each color is defined with three pairs of hexadecimal numbers. The first pair of numbers or letters related to red hue, the second pair to green hue and the third pair to blue hue.

Infinite scrolling

Infinite scrolling is when the new content loads as you continue to scroll. This creates an “infinite,” never-ending scroll. Some popular examples of this is Facebook timelines, Pinterest, or Twitter feeds.

Parallax scrolling

This method of scrolling creates a sense of depth in the site design. As the user scrolls, the elements on the website would appear to be at different distances and moving at different speeds as the user scrolls. This creates the illusion of depth and distances on a flat website.

Resolution

Resolution is the number of pixels displayed on a screen. It is the standard method used in web design to specify the size of images. The quality of an image is usually described in terms of pixels per inch, with higher numbers of pixels resulting in a higher-quality image.

Responsive / mobile-friendly / mobile optimized

As of 2020, more than half of web traffic takes place on smartphones. This means that it’s becoming more important for a website to look its best on mobile, as well as desktop. To make websites responsive / mobile-friendly / mobile optimized means to design and develop a website that will adapt to the device or screen they are being viewed on.

Usability

Usability is a concept in web design that describes how usable your site is for the visitors it was designed for. Ideally, a visitor will be able to use your site with ease when they encounter it for the first time, with minimal obstacles, frustrations and need to ask for help. Understanding the principles of usability is a key step in building a great website.

UX (user research) / UI (user interface)

UX and UI design is work that improves the experience for the user. It’s important to know the differences of UX and UI in order to know how they work together.

UX, user research, involves all aspects of the user’s interaction with the website, from start to finish. The goal is to improve the quality of interaction between a user and the website.

UI, user interface, focuses on the visual and interactive elements of a website, such as buttons, icons, typography. The goal is to improve the website’s look and function.

Front end website anatomy

A man in a video with a speech bubble
Illustration by OrangeCrush

Breadcrumb

When web pages show users how they have navigated through a web page, and how to get back to the main page, it’s often done through a breadcrumb. This is generally shown as a series of nested categories, like Home > Category > Year > Month > Post.

Favicon

A favicon is a tiny icon that is displayed in the tab bar of your browser. They are generally 16×16 pixels (which is really very small), and are saved as an .ico, .gif, or.png image. You can use almost any image you like as a favicon, as long as it is the right size and is saved in the correct format.

Focal point

A focal point on a web page is the part of a page that your eye is drawn towards. Designers will spend a lot of time ensuring that they design a focal point that genuinely attracts the viewer’s attention, and will then place the most important thing on the page at the focal point. This ensures that it is seen by the most people possible.

Front end

These are all the elements like images, text, pages that people will see when they first visit your site. It’s essentially what people will interact and engage with on a website.

Hamburger icon

A hamburger icon refers to the menu icon commonly found in more recent programs. It has three horizontal bars (hence “hamburger”) and hides the traditional navigation menu behind a single icon.

Landing page

This is the very first page that visitors to your site will see. On many websites, a special landing page is used in order to elicit something from a visitor (sharing their email address, or a page specialized for a product for instance). Your landing page is one of the most important pages on your website, and you should spend a good deal of time optimizing it.

Navigation

Navigation is the system that is used for moving between elements of your web page, and is one of the most important elements of any web page. That’s why it’s important to know the key principles of website navigation. The clearest example of navigation are the menus that appear on most web pages. But also pay close attention to how pages are organized and the links between them. These can also make navigating around a web page much easier for visitors.

Back end website anatomy

A laptop screen with icons about back end websites
Illustration by OrangeCrush

Back end

This is the part of your system that effectively runs your website, but is hidden from visitors. There are many different back ends available, but they all generally contain the same things—applications, information structure, and your CMS.

CMS

Content Management System—this is a back end tool to run your site’s content, adding users, managing comments and potentially far more. If you’ve ever used WordPress to build a website, you’ve used a CMS. A CMS makes designing and building a web page much easier because it hides much of the raw code that the website runs on.

Ecommerce

Ecommerce stands for “electronic commerce.” in the same way that “email” stands for “electronic mail.” You will typically add an ecommerce store to your website that will handle product descriptions, buying and selling, and also customer data.

HTTP / HTTPS

This is the system that handles data exchange between browsers, servers and web apps. It defines how data must be packaged and sent.

HTTPS is an extension of HTTP that is able to make connections over SSL (Secure Socket Layer). This is a much more secure way of exchanging data online. Many modern web browsers will warn you if a website is using standard HTTP rather than HTTPS.

As a website owner, you can purchase SSL certificates—needed to use HTTPS—from a variety of providers. Once added, this will make your site more secure and build trust with your customers.

Plug-in

A small piece of software that sits on top of your basic site to provide added functionality of security. Plug-ins are available for most popular CMS platforms and can be used for a huge variety of functions, from automating blog posts to managing customer leads.

Template

Templates are used in web design in much the same way they are used for documents and images—to provide a consistency of design across many different pages. Most CMS platforms will provide you with a set of templates for your website that will help to keep your pages and your design consistent across them.

Technical web and internet terms

Two individuals sitting with their back facing point at various icons for uploading, links, URLs
Illustration by OrangeCrush

Anchor text

Anchor text is a phrase, or a few words, that contains a hyperlink. Like this one: Anchor Text Explained. Using the right anchor text can make a huge difference to how well your page does in search engine rankings.

Backlink

These are links to your website from other websites. When another site links to yours in order to direct their readers to a resource, for instance, you have received a backlink. Backlinks are very important when it comes to improving your search rankings, because several backlinks from trusted sites will boost your site’s visibility.

Bandwidth

Bandwidth is a term used in many different contexts, but it essentially means the amount of data that is sent or received over a given period. It can be used to describe your internet speed, for instance, where it is usually quoted in kilobits per second (kbs). Sometimes, though, it is used to describe how much data you can use per month as part of your web hosting package.

Cache

A cache is a collection of data that is saved by a web browser. This means that the next time a user visits the site the page will load faster because it is being loaded from local memory.

DNS

DNS stand for “Domain Name Service.” This is the system through which your web browser looks up where web pages are. When you type 99designs.com, your browser will look at a “DNS table,” which converts this human-friendly address into a computer-friendly address (i.e. made of numbers). The DNS system keeps track of where all the web pages in the world are, so your browser can find them.

Domain

This is the name of your website. You can purchase domains from many companies. They can be 63 characters long at the most. For instance, 99designs.com is our domain name.

FTP

FTP stands for “file transfer protocol,” and is a system for transferring files and data from local storage (on, say, your computer) to your web server. In order to use FTP, you will need to download a small piece of software called an FTP client.

Permalink

A permanent link that allows you to specify an address that will always point toward a particular blog post or page, no matter how you change the structure of your site around it. This is very useful if you are using blog posts to improve traffic to your site because you don’t have to manually change dozens (or hundreds) of links if you decide to redesign your site or change your domain name.

URL

An address that specifies where a particular page or other resource can be found.

Web hosting

A web host is a company who runs the servers on which your website is stored. As we explain in our article on what is web hosting, web hosts can vary widely in the level of service they offer. A good web host will be able to assure you that your site will be accessible 99.9% of the time, and will also provide you with tools for keeping it safe and effective.

Web Server

A web server is the computer on which your web page is actually stored. It is likely located in a server installation owned by your web host, though it’s also possible to run your own servers.

Web development terminology

Laptop with lines of code and man sitting on the floor coding
Illustration by OrangeCrush

CSS

CSS stands for Cascading Style Sheets, and alongside HTML, these sheets are the most fundamental part of any web page. A decade ago, the formatting used on a webpage, for something like how large titles were or whether pictures had borders, were defined within the HTML code itself. This meant that changing the formatting was a laborious process of going through each element of a page and changing the code.

With CSS, things are much easier. The style of a page is contained in one (or more) CSS files, which define how titles look, how images are displayed and many other elements. These tell a browser how to render a website. In this way, the format of whole websites can be adjusted by switching just a single piece of code.

DHTML

DHTML stands for Dynamic HyperText Markup Language. This is a term for a language that fuses a number of web design languages—HTML, JavaScript, and CSS—into one super language for web development. This is generally what a modern web developers will use to create a website for you.

Doctype

In HTML, a doctype is a description of what kind of HTML and which version is being used by a web page. It is used by browsers to check the integrity of a page and can throw security errors if it is wrong.

EM

Em is used to describe the size of a font in relation to the “parent” font used on a page. 1Em means that a font (or sometimes other elements) are the same size as their parent element, 2em means they are double the size, and so on.

Embedded style

Though CSS (see above) can be used to describe the format of entire pages at once, sometimes you need to change a style on just one page. This is when an embedded style is used. An embedded style is a piece of CSS code written into the header of a webpage that affects only the elements on that page rather than across your entire website.

Font family / style / weight

Web designers and developers often don’t work with specific fonts, because different browsers don’t always share exactly the same fonts. That’s why in a CSS document you will see that the font to be used is defined as a font family—a group of fonts that can be used, rather than one in particular. Alongside this definition, the CSS document will also define the font style (italic, underlined, etc.) and the weight (bold, light, etc.).

HTML

Hypertext Markup Language—this is the foundation of the internet. All web pages are written, at least to some extent, in HTML, which was developed to be as easy to write as possible. It can be very rewarding, in fact, try out an HTML Code Tutorial to see if it’s easy to write—you’ll be surprised at what you can achieve within a few hours!

MetaData

MetaData is data contained in the header of web pages. These data are available to your browser, but are not displayed as part of the web page you are viewing—you will have to look at the source code in order to access them.

Open Source

Open source software is maintained by users, and is free to use and modify. This contrasts with proprietary software, which is owned and maintained by a particular company. Most web developers will use open source software, at least some of the time, because it is not only less expensive, it can also be more secure. Nowadays, most web developers will minimize security breaches by using containers that are coded in open source languages.

Staging

Staging a website is the process of making an almost-final copy of it, and then testing this, before rolling out the live version of the site. Most web developers will “stage” a website before it is released in order to check that everything is working correctly. And often times major changes to a website will happen on the staging site rather than the live site.

Valid

In web design, valid web pages are those that contain no errors. In practice, this means web pages that conform to the standards set out in the HTML specifications published by W3C, the community that sets standards for web development.

XML

XML stands for Extensible Markup Language. XML is a fundamental part of web design, because it acts as a “meta language” that translates the elements of one language into another. This means that webpages can be built using many different languages, each communicating via XML.

A final word

Of course, it’s not necessary to know all of these web design definitions and terms to start designing a website—either on your own or with the help. Ultimately, web design is a learning process, and the best designs are iterative works of art that are constantly being improved as you learn new things.

That said, it can be very helpful to have a guide to the sometimes complex world of web design, particularly when you first start out. Our professional web designers can help you get started in the exciting world of web design.

Want to get the perfect website for your business?
Work with our talented designers to make it happen.