Webdesign vocabulary 190+ terms for "talk webdesign"

ecommerce

Are you planning to design a website?
Have you talked to web designers and obtained some quotes, but many of the terms used remain a mystery to you?
As in any technical field, web design is riddled with very specific words and expressions, and it can be difficult to find your way around.
That’s why it’s important to know the vocabulary of the elements that make up a website, and the process of building one.
Once you’ve mastered website terminology, you’ll be able to speak with confidence to the web designer in charge of creating the website of your dreams! webdesign vocabulary

Key web design vocabulary terms

2FA – two-factor authentication

Two-factor authentication requires a second one-time password on your phone.

Accessibility

Essentially, this refers to a website’s ability to be used by people with disabilities, including visually impaired visitors using screen readers, hearing-impaired visitors using no sound, color-blind visitors or people with other disabilities.
A website with poor accessibility will be fundamentally impossible for disabled people to use.
Accessibility is particularly important for sites providing information to people with disabilities (health sites, government sites, etc.), but it’s an important aspect to consider when designing any site.

Accordions

Sections that users can expand and collapse to show or hide content.

Ajax

Ajax stands for “Asynchronous JavaScript and XML”.
AJAX is generally used to create dynamic web applications, enabling asynchronous data retrieval without having to reload the page the visitor is on.
The JavaScript on a given page handles most of the application’s basic functions, making it function more like a desktop program than a web application.

Progressive improvement

Progressive enhancement is a web design strategy that uses multi-layered technologies to enable everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while offering those with better bandwidth or more advanced browser software an enhanced version of the page.

Anchor

Anchor text is the text a link uses to refer to your site.
It can make a big difference in your site’s search engine results.
See also: Backlink.

API – application programming interface

An API is a list of things that an entity allows you to do when you interact with it.
The buttons on a vending machine are a physical form of an API.
They determine what you can and cannot do with the vending machine.
APIs are used to integrate a website with another website or external software.
This might involve feeding a CRM such as Salesforce with inquiries received via a website, or transmitting order status to a website from an inventory management application, for example.

Call to action

A call-to-action is a visual element asking users to perform an action.
You’ll also find the initials CTA for Call-to-Action.
Common calls-to-action may ask users to subscribe to a newsletter, make a donation, get in touch via a form or download specific educational material.
Other examples of calls-to-action are: “Buy now”, “Call us today”, “Order now”, “Start a free trial”, etc.

Automagically

A term that combines “automatically” and “magically”.
In general, it refers to a complex technical process that is hidden from users, so that something almost seems to work by magic.
If you think about it, many modern Internet-based technologies could be classified as “automagic”.

ARIA

ARIA stands for Accessible Rich Internet Application, and refers to the idea that web applications are used by a range of people with different needs for assistive technologies and layouts.
The term ARIA is generally used to describe the technologies employed to bridge the gap between the user’s needs and a website or web application.
Consequently, it can refer to screen-reading software, structural layout approaches and design methodologies such as user-centered interface design, with the aim of increasing the accessibility of content and functionality.
The W3C sponsors much of the work carried out in this field.

Information architecture – AI

Information architecture (IA) is a generic term used to describe the semantic layout of content and information on a website.
It refers to the organization of information, indicating which pages go where in the structure of a website, what content is contained on each page and how each page interacts with other pages on the site.
As a field, AI aims to make it as easy as possible for users to find information, with the aim of increasing conversion, revenue and/or user satisfaction.

Back-end

The back-end of a website is the part hidden from regular visitors to the site.
The back-end generally comprises the information structure, the applications and the CMS that controls the site’s content.

Backlink

Backlinks are links from other sites to yours.
They are sometimes also called “trackbacks” (especially on blogs).
The French translation is “lien retour”, but the English term backlink is more commonly used.
Backlinks have a huge impact on your site’s search engine ranking.
Numerous backlinks from high-profile sites can dramatically improve your search engine results, especially if these links use keywords in their anchor text.

Semantic markup

Semantic markup is an approach to HTML coding in which the markup tags used to describe content also provide relevant metadata about the content itself.
Basic semantic markup refers to the use of elements such as header and paragraph tags, but semantic markup is also used to provide much more useful context to web pages with the aim of making the web as a whole more semantic.
For example, a piece of information that is relevant to the main content of a page, but is not directly the subject of the page, can be marked up as a <aside>.

Beacon

A tag is a set of markup characters used around an element to indicate its beginning and end.
Tags can also include HTML or other code to specify the element’s appearance or behavior on the page.

HTML tag

Also known as an HTML element, an HTML tag is a piece of code that describes the formatting of a particular part of the web page on which it is found.
Typical tags specify things like headings, paragraphs, links and a variety of other elements.

Meta tag

A meta tag is an HTML tag used to include metadata in the header of your web page.

Banner

Banners are usually found on important pages, such as the home page, and are located immediately below the header.
They are often associated with a company’s main marketing message or an important site feature.
The use of banners has been excessively widespread in web design, with little evidence that they improve site performance or user experience.

Search bar

A search bar is usually located in the top right-hand corner of the website header.
It is usually indicated by the word “Search” in a form field, or includes some sort of magnifying glass icon.
Here, users can type in a word or phrase about which they’d like more information, and then be directed to a results page listing website pages that may contain related content.
This feature is useful for site visitors who know exactly what information they’re looking for but don’t want to wade through your navigation.

Side bar

A sidebar can be a very diverse element of a website, and usually appears on the majority of a site’s internal pages.
A sidebar is used to house important information that an organization doesn’t want to lose in the body of the text.
It’s essential that this space is used wisely.
If it becomes too cluttered, it’s less and less effective.
In a sidebar, you can find additional navigation, relevant calls to action, upcoming events, or even just additional pieces of highlighted content.

Database

As you might expect, a database is a data storage center.
When visitors browse your website, they enter search queries or personal information.
Your database stores this information.

Radio buttons

Radio buttons are a type of input field that allows you to select just one item from a list.

Branches

A version of something on GIT that is different from the most recent version.

Cover

Cached files are those saved or copied by a web browser so that the next time the user visits the site, the page loads faster.

Checkboxes

Checkboxes are a type of input field that allows users to select multiple items from a list.

CDN – Content Delivery Network

A CDN is a third-party hosting solution, usually for images, media and third-party scripts, served faster/separately from the main site.
It is used to speed up sites or store large quantities of images.

Input fields

Type of HTML element that a user can use to enter information or make a selection.
Field types include text fields, text boxes, checkboxes and radio lists.

Checkout

The multi-step process of completing a purchase or order.

Customer side

Client-side scripts are executed in the surfer’s browser, rather than on a web server (as in the case of server-side scripts).
Client-side scripts are generally faster to use, even if their initial loading may take longer.

Server side

The term “server-side” refers to scripts executed on a web server, as opposed to the user’s browser.
Server-side scripting is a generic term to describe the languages used to program this server-side data manipulation.
Scripting languages such as PHP and ASP.NET offer web developers a simple means of creating sophisticated business logic capable of interacting with a database, performing complex data operations and returning information to the browser.
Server-side scripts often take slightly longer to execute than client-side scripts, as each page must be reloaded when an action is performed.
However, as the processing is carried out at server level, the user’s web browser doesn’t have to work as hard, which improves apparent performance from the user’s point of view.

CMS – Content Management System

Also known as a CMS, a content management system is a back-end tool for managing the content of a site, separating said content from the site’s design and functionality.
Using a CMS generally makes it easier to modify the design or function of a site independently of its content.
It also makes it easier for non-designers to add content to the site.
Popular CMS include WordPress for showcase sites and blogs, and Prestashop or Magento for e-commerce sites.

Hard coding

Hard coding means writing things in code that cannot be modified from the outside.
This is generally bad practice, as it means that any changes must be made by the developers.
A better solution is to be able to define information in a database that can be modified outside the code, via a CMS for example.

Depreciated code

Deprecated code is code that is no longer included in the language specification.
This usually happens because it is replaced by more accessible or more efficient alternatives.

Own code

Code written as cleanly and efficiently as possible, without unnecessary repetition.
Clean code can easily be used to create additional functionality and contributes to a site’s loading speed for users.

Comment

In web design terms, a comment is a piece of information contained in the HTML or XHTML files of a site that is ignored by the browser.
Comments are used to identify different parts of the file and as reference notes.
A good comment makes it much easier for the designer (whether the original designer or someone else) to make changes to the site, as it makes it clear which parts of the code perform which functions.
There are different comment formats for different programming and markup languages.

Compilation

A compilation transforms code in a human-readable format into something more useful for a machine.
It can take a lot of time and processing.

Server configuration

A server’s configuration is the set of rules it follows to process requests.

Growth-oriented design

Growth-oriented design is the practice of building a site with simple web design fundamentals.
The designer will add more complex functionality as the site is built.
This means that, whatever problems are encountered, they are protected by a solid foundation.
You can then update the site regularly, so that it’s always up to date.

All the text, images and videos on a given web page or site.

Version control

System for creating website updates in small fragments, which can be merged, collaborated on, easily undone or switched.
It makes updating a website safer, as errors can be easily corrected.

Conversion

A conversion is the successful completion of a desired action on a website, such as purchasing a product, sending an inquiry, subscribing to a newsletter, etc.

Cookies

Cookies are small text files that contain basic information about the websites you visit.
Cookies help web servers determine preferences by examining the types of sites you visit or what you put in your shopping cart.
In recent years, cookies have received a lot of negative publicity because of the privacy issues they raise.
Take a look at this connection from Amazon.
By enabling automatic log-in, the company leaves a tracking cookie on your browser so you don’t have to log in.

C-Panel

An easy way to modify certain server configuration parameters.
There will be a login.

CRM – Customer Relation Management

CRM stands for Customer Relationship Management.
Companies often use CRM internally to facilitate the running of their business.
Websites often need to integrate with CRMs.

CRO – conversion rate optimization

Conversion rate optimization is the process of making changes to a website to increase its conversion rate.

CSP

This is a simple whitelist of URLs that a web page is allowed to load.
It is a security feature designed to mitigate the effect that malicious code can have on a site.
Malicious code cannot send data to a URL that is not on the whitelist.

CSS – cascading style sheets

Also known simply as CSS, Cascading Style Sheets are used to define the look and feel of a website outside the site’s HTML file(s).
In recent years, CSS has replaced tables and other HTML-based methods of formatting and presenting websites.
The advantages of using CSS are many, but the most important are the simplification of a site’s HTML files (which can improve search engine rankings) and the ability to completely change a site’s style by modifying a single file, without having to modify the content.

Infinite scrolling

Infinite scrolling is currently a very trendy way of presenting a site.
Rather than loading separate pages to display content, all page content is loaded into a single page that scrolls to show different content areas.
The principle is as follows: as the user scrolls down a page towards the end of the content, new content is loaded and added to the bottom of the page, creating an “infinite” scroll.
Popular examples include Facebook’s timeline view.

Elegant degradation

Elegant degradation refers to a website’s ability to ensure that elements that can take advantage of the capabilities of the latest browsers are implemented in a way that allows users of older browsers to continue viewing the site in a way that at least allows access to the core content.
It’s also about making sure that if a small part of your site doesn’t work in someone’s browser, it doesn’t break the whole site for that person.
The complementary approach is progressive improvement.

UX Design

How does the user feel when visiting your website?
If it’s practical and easy to use, they’ll be more inclined to stay.
If it’s full of broken links, they’ll be disappointed.
It’s essential to put yourself in the user’s shoes and listen to their problems.

DHTML

DHTML stands for “Dynamic HyperText Markup Language”.
DHTML merges XHTML (or any other markup language), DOM, JavaScript (or other scripts) and CSS (or other presentation definition languages) to create interactive web content.

DNS

DNS stands for Domain Name Service (or Domain Name System or Domain Name Server).
Basically, it’s the system that converts IP addresses into domain names.
DNS servers receive the IP address of your web server when you give them your domain name.
When someone types your domain name into their web browser, DNS servers translate the domain name into an IP address and direct the browser to the right web server.

Doctype

The doctype declaration specifies the version of HTML used in a document.
It has a direct effect on the validation of your HTML.

DOM

DOM stands for Document Object Model.
It is a language-independent, cross-platform convention for representing objects in XML, XHTML and HTML documents.
The rules for interacting with and programming the DOM are specified in the DOM API.

Domain

The domain is the name by which a website is identified.
The domain is associated with an IP address.
Domains can be purchased with any combination of letters, hyphens (-) and numbers (but cannot start with a hyphen).
Depending on the extension (.com, .net, .org, etc.), a domain can be up to 63 characters long.

DPI and PPI

Dots per inch and pixels per inch indicate resolution (the degree of detail in an image/print/screen).
Traditional printing is at 300 dpi, while screens were traditionally at 72ppi.
Modern screens are much more detailed than 72 ppi, but images for online use should generally be saved at 72 or 150 ppi.

DTD

DTD stands for “Document Type Definition”.
DTD is one of several SGML and XML schema languages.
It provides a list of attributes, comments, elements, entities and notes in a document, along with their mutual relationships.

E-commerce

Abbreviation for electronic commerce.
It’s the buying and selling of goods online, through websites.
Products sold through e-commerce can be physical products that require shipping, or digital products delivered electronically.

Element

In XML, an element is the central building block of any document.
Individual elements can contain text, other elements or both.

Fixed element

An element whose position is permanently fixed in relation to the browser window, such as a background image that does not leave the frame or a live chat button (which is often fixed at the bottom right of the browser frame).

Em

Em is a unit of measurement used to size fonts and other elements on a web page in relation to the element’s parent element.
A 1em font is equal to the point size of the font already defined in the parent element; 2em is twice the current size, while 0.5em is half the current size.

Header

The header of a website is located at the top of each page of the site.
The header generally has the same appearance from page to page, and contains an organization’s logo and navigation system, creating a central point for navigating elsewhere on the website.

Recording A

A records map a domain name to a server IP address.
They tell the DNS service when to send your request.

Letter spacing

The space between letters, controlled by CSS.
The value ‘0’ is the standard value; anything less brings the letters closer together, while positive values increase the spacing.

Unbreakable space

A non-breaking space is a white space character that is not condensed by HTML.
Its main function is to keep table cells open, or to add space between words or at the beginning of paragraphs if indentation is desired.

Overflight status

Hover status is the slight animation that is triggered when a user hovers over a link.
This ensures that site visitors know what they can and cannot click on throughout the site.
A hover state can be as simple as a button that changes color, or as complex as design elements that move or fade.

Selected state

A selected state is usually displayed in a list of navigation links to show which link is currently selected.
This is a great way to show the user where they are on the site.
For example, if a site visitor is on the Contact page, the “Contact us” link in the header will have some sort of selected state activated.
Text can be bold, underlined, in a different color or all at once.

Ex

Ex is a measure of the height or size of a font relative to the height of a lowercase “x” in that font family.

Extension or Module

An extension is a piece of third-party code that extends the capabilities of a website.
It is most often used in conjunction with a CMS or blog platform.
Extensions are a way of extending a website’s functionality without having to redo the site’s basic coding.
Extensions can also refer to pieces of third-party software installed in a computer program to enhance its functionality.

Font family

The font family is a group designation used to define the fonts used in CSS documents.
The font family tag generally lists several fonts to be used, and usually ends with the generic font category such as ‘serif’ or ‘sans-serif’.

Favicon

Favicons are tiny, customizable icons. They are usually 16×16 pixels, although some are 32×32 pixels, and are displayed in the address bar of most browsers next to the web address. They have a color depth of 8 or 24 bits and are saved in .ico, .gif or .png file formats.

Display windows

This is the frame in which the user views a page.
It can be the Safari window on your phone or the Chrome window on your computer.
Nowadays, windows can be of almost any size.

External style sheet

This is a CSS document written in a separate external document.
The greatest advantage of using an external style sheet is that it can be linked to several HTML/XHTML files, meaning that changes made to the style sheet will have an effect on all the pages linked to it without having to modify each page individually.

Breadcrumb trail

The breadcrumb trail is a navigation element that usually appears at the top of a web page, showing you the pages and sub-pages that precede the page you’re on.
For example, on a blog, the breadcrumb trail might look something like: Home > Category > Article.
This is an additional but optional way of helping users understand where they are on your site.

Form

An element for entering user data, consisting of different types of input fields and a means for the user to submit data.

CSS Framework

A CSS framework is a collection of CSS files used as a starting point for creating an XHTML and CSS website quickly and effortlessly.
They generally contain CSS styles for typography and layout.

Front-End

The front-end is basically the opposite of the back-end.
It refers to all the components of a website that a visitor to the site can see (pages, images, content, etc.).
More precisely, it’s the interface visitors use to access site content.
It is also sometimes referred to as the user interface.

Style guide

When designing a website, it’s important to have a consistent style.
Too many colors or shapes can confuse the user, so it’s important to have a complementary mix.
Take a look at Spotiy’s style guide.
A detail as insignificant as poor logo placement can jeopardize a brand’s image.

Line height

CSS attribute that defines the space between lines of text.

Hosting

Web hosts enable us to publish web pages on the Internet.
They use server computers to connect your website to the Internet.
When someone clicks on your site’s page, it sends a request to the server and loads.

Heritage

In CSS, elements that have no predefined style adopt the style of their parent element in the document tree.

Hexadecimal

Also known as “hex”, hex numbers are a base-16 numbering system used to define online colors.
Hexadecimal numbers include the digits 0-9 and the letters A-F.
Hexadecimal numbers are written in three sets of hexadecimal pairs.
Since screen colors are RGB (red, green, blue), the first pair defines the red hue, the second the green hue and the third the blue hue.

Visual hierarchy

This term is not limited to web design, but is increasingly used to refer to the design and layout of a web page, which is why it has been added to our list of key terms.
In simple terms, visual hierarchy refers to the arrangement of design elements on a page so that the most important elements appear to have more prominence.
This is normally achieved through the use of size, color, font and special effects such as drop shadows.
Visual hierarchy is often a conscious decision resulting from an information architecture process.

Hit

Contrary to popular belief, a hit does not represent a single visitor to a website.
A hit is actually a request for a single file on your web server.
This means that a page can in fact generate several hits, as each page usually contains several files (an html or other base file, a css file, several images, etc.) and each of these is requested from the server when the page is loaded.
Some marketers like to quote hits to unsuspecting consumers, as this figure gives the impression that their site receives far more traffic than it actually does.

.htaccess

The .htaccess file is the default directory-level configuration file on Apache servers. They are also known as “distributed configuration files”. The configuration directives contained in the .htaccess file apply to the directory in which the file is placed, as well as to all its sub-directories. The .htaccess file can be used to specify such things as authorization and authentication, URL rewriting, cache control and custom error responses.

HTML

HTML, which stands for HyperText Markup Language, is the language of the web.
Simply put, HTML allows the web designer to tell your web browser how to handle a particular piece of content.
HTML contains a number of different tags that enable the designer to give semantic meaning to content, so that paragraphs are identified as text, while images are imported as pictures, and so on.
It can also be used to determine how this content is displayed.

HTTP

HTTP stands for HyperText Transfer Protocol.
HTTP is a set of rules for transferring hypertext requests between a browser and a web server.

HTTPS

Similar to HTTP, HTTPS stands for HyperText Transfer Protocol over SSL (Secure Socket Layer) or, alternatively, HyperText Transfer Protocol Secure.
Like HTTP, it’s a set of rules for transferring hypertext requests between browsers and servers, but this time over a secure, encrypted connection.

Hyperlink or hypertext link

A hyperlink is a link from one web page to another, either on the same site or on another.
It usually consists of text or images, and is highlighted in some way.
Text is often underlined or set in a different color or font weight.
The inclusion of hypertext links is the “hyper” part of “hypertext”.

Hypertext

Hypertext is any computerized text that includes hyperlinks.
Hypertext can also include presentation devices such as tables or images, in addition to plain text and links.

iframe

Abbreviation for Inline Frame.
An iframe is used to display part of a different page or site on a given page, which is not a frameset page.
It’s like a window that can be placed in a page, and in this window, another page or part of another page is shown.
For example, you can use an iframe to embed a Youtube video on a page of your site.

Clickable image

A clickable image (or image map) is used in XHTML to allow different parts of an image to become different clickable elements, and can also allow certain parts of the image to have no clickable element.

Royalty-free image

Image that can be purchased for use online or offline.

Nesting

Nesting involves placing an HTML element inside another element.
When this is done, the elements must be closed in the reverse order in which they were opened.

Inspect

Right-click on a website and select “inspect”.
This allows you, among other things, to see the HTML and CSS page, which is very useful for debugging, etc.
You can also click on the device icon to see how the website looks on different devices.

Graphical User Interface

Also known by its acronym: GUI.
A GUI uses an input device, such as a mouse, and visual representations of how the user can interact with a web application.
In other words, it’s all the front-end elements you see on a web application.
Its aim is to enable you to interact with a web application without having to type in code.

InVision

This application is used to share designs internally and with customers.
It synchronizes with Sketch and allows customers to leave comments.
It also allows the developer to extract assets such as icons and images.

IP

Like a telephone number, a unique number for an Internet connection.
Servers have IP addresses and so do local networks.
My site’s IP is “164.132.235.17”, most IPs are “v4” and look like this, at some point we’ll move to “v6” IPs which look like this: “2003:0zb4:93a2:0000:0000:9a8f:0320:7984”.
Most websites tend to have a single IP.

JavaScript

JavaScript is a scripting language that enables designers to create interactions on a web page.
Historically, JavaScript was mainly used for form validation, providing those annoying alert boxes that appeared when you forgot to enter your phone number in the phone field.
Today, JavaScript has many other viable uses, including special visual effects or the ability to load new content without having to reload the entire page.
It’s important to note that, despite its name, JavaScript has nothing to do with the Java programming language.

LAMP

LAMP stands for Linux, Apache, MySQL and PHP (or sometimes Perl or Python), and refers to the specifications of a web server, defining the operating system, web server, database and scripting language, in that order.
One of the advantages of LAMP configurations is that the software used is all free and open source.

Markup language

This is the coding applied to a text document to transform it into an HTML, XML or other mark-up language.

Bandwidth

Bandwidth can refer to two different things: the rate at which data can be transferred, or the total amount of data allowed to be transferred from a host during a given month (or other term of the hosting service) before overage charges are applied.
It is usually expressed in terms of bits per second (bps), kilobits per second (kbs) or other metric measures.
Low-bandwidth Internet connections, such as dial-up, mean that data loads more slowly than high-bandwidth connections, such as cable or fiber.

Fixed width

A fixed-width layout has a fixed width (usually defined in pixels) set by the designer.
The width remains the same regardless of screen resolution, monitor size or browser window size.
It enables minimal adjustments to be made to a design, which will remain consistent from one browser to another.
With this type of layout, designers have more control over how a site will appear on different platforms.

Screen readers

Screen readers are electronic devices used by blind and partially-sighted people to help them use computers and surf the Internet.

Image license

Copyright means that we cannot legally use images that do not belong to us.
So you can’t use an image found in a Google image search on your site.
Creative Commons licensing is a legal licensing system that dictates which images can and cannot be used.

Link

Links allow users of a website to move from one web page to another.
They can take the form of text or an image.
Text links are usually highlighted in some way, using color to highlight words in static copy, or making the text appear to be inside a button.
Images can be highlighted with a sort of overlay of colors, words or symbols to show that they are clickable.
All links, however visually represented, must have a hover state to indicate that they are clickable for accessibility purposes.

Lightbox

A lightbox is an element that opens at the top of a web page, usually darkening the lower page with an overlay of gray or transparent black, with a top panel displaying the content.
Think of the way image galleries are displayed on Facebook.

Magento

A PHP-based CMS designed for e-commerce sites.
It is extremely powerful in terms of functionality, but can be difficult to use.

Margin

Margin is the CSS attribute that controls the amount of spacing outside an element.

Mega menu

Like a drop-down menu, a mega-menu appears when a user hovers over a main navigation element.
But instead of a simple list of child pages, visitors can see a map of all the child and grandchild pages in that section.
Mega menus also often include additional design elements, such as icons or a call-to-action function.
This type of menu is ideal for organizations with lots of detailed content to share about their programs and services.

Drop-down menu

Drop-down menus are revealed when a user hovers over a main navigation element, in the form of a list of child pages.
Drop-down menus help the user dive deeper into the website’s content to find strategically organized pages.

Metadata

Metadata is data contained in the header that provides information about the web page a visitor is visiting.
The information contained in metadata is not visible on the web page, except in the source code.
Metadata is contained in meta tags.

Database migration

Databases are usually edited by users, but sometimes a programmer needs to restructure or modify them as part of a job.
Instead of taking notes on the changes to be made and carrying them out carefully by hand, it is possible to encode the modifications in a special program that runs only once, called migration.

Page layout

Page layout describes the structure of the page.

Elastic layout

An elastic layout is one that uses percentages and ems for widths, combined with a maximum width style to allow the site layout to stretch when font sizes are changed.
Its name comes from its ability to adapt to the browser’s width and the reader’s font preferences.

Liquid layout

A liquid layout is a layout based on percentages of the browser window size.
The layout of the site changes according to the width of the browser, even if the visitor changes the size of his or her browser while viewing the page.
Liquid layouts take full advantage of a person’s browser width, optimizing the amount of content you can display on screen at once.

Static page layout

This type of layout is easier to design, but is not as flexible for the user.
If a page is the same width for every visitor, it can be unpredictable on different devices.
Most companies switched to responsive design with the rise of mobile, but you may find a few still using it.

Model or Theme

A template is a file used to create a consistent design for a website.
Templates are often used in conjunction with a CMS, and contain both structural information on how a site should be configured, and stylistic information on how the site should look.

Browser

The browser refers to the program used by a site visitor to view the website.
Examples include Safari, Firefox, Google Chrome, Opera and Internet Explorer.

Navigation

Navigation refers to the system that enables visitors to a website to move around the site.
We most often think of navigation in terms of menus, but links within pages, breadcrumb trails, related links, pagination and any other link enabling a visitor to move from one page to another are all part of navigation.

Footer navigation

The footer navigation generally contains links to pages that are less important, commercially speaking, but legally required, such as general terms of use, privacy policy, etc.

Primary navigation

All websites should have a primary or main navigation.
This is usually a list of important links at the top of the page, with headings that help users determine where they want to go.
The main navigation presents the parent pages of a website, which are usually general topics leading users to related, more detailed daughter pages.

Secondary navigation

Secondary navigation is usually found in the website header, above the main navigation.
While the primary navigation is considered the main navigation, the secondary navigation can include useful elements for users that you wish to highlight.
Often, you’ll find action items such as Login, My Account or Shopping Cart.

Web standards

Standards are specifications recommended by the World Wide Web Consortium to standardize web design.
The main aim of Web standards is to make it easier for designers and web browser developers to create sites that will appear consistent on all platforms.

Open Source

The term “open source” refers to the source code of a computer program made available to the general public.
Open source software includes both web and desktop applications.
Open source programs are generally free or very inexpensive, and are developed by teams of people, sometimes consisting mainly of volunteers.

Home page

The home page is essentially the cover of your website.
It’s usually the most unique page on your site, giving visitors an immediate idea of your organization.
The home page also guides them to other important information on your site’s internal pages.

Landing Page

A landing page is the page on which a visitor first enters a website.
Often, a special landing page is created to elicit a specific action from the new visitor, usually as part of an advertising or marketing campaign.

Page View

A page view is a request for an entire web page document from a server by a visitor’s browser.
In other words, for every page viewed on your site, someone or some search engine has looked at that page.

Web page

A web page is a single document, usually written in HTML/XHTML, designed to be viewed in a web browser.
In many cases, web pages also include other coding and programming such as PHP, Ruby on Rails or ASP.
Websites are generally constructed from a number of linked web pages.

Pagination

Pagination is the use of page numbers to navigate through the pages of blog posts or product catalogs.

Basket

The page where users can see all the items they have selected for purchase.

Parallax

Parallax is the effect observed when elements close to your point of view appear to move faster than elements further away.
This effect is particularly noticeable from a moving car, where trees close to the vehicle appear to pass more quickly, while mountains in the distance appear to move more slowly.
On the Web, this same effect is used to create a sense of depth in site designs, often providing movement in response to the user’s scrolling.

Payment gateway

This is a digital gateway between a website and the third party used to process payments.
This gateway enables secure communication between the two to exchange transactional information.

Permalink

permalink is short for “permanent link”.
Generally used only on blogs, a permalink is a link that is the permanent web address of a given blog post.

PHP

PHP for Hypertext Preprocessor is a server-side programming language used to develop fluid web sites and connect to databases.
For example, you might have a login button on your website with an e-mail address and a password box above it.
When you enter and send this information, PHP sends it to a database and checks that it’s correct.

Footer

The footer is the bottom area of a web page, containing links to internal pages, such as legal information, copyright information, etc.
Like the header, the footer remains the same from one page to the next.
The footer is usually a highly structured section of the site that serves as a final opportunity to convey various information to your site’s visitors.

Site map

Schematic representation of all the sections and pages of a website, showing page locations and navigation structures.

Font weight

Font weight refers to the thickness or thinness (bold or light) of a font.

Focal point

The focal point of a website is the place on the web page to which the eye is naturally drawn.
This can be an image, a banner, text, Flash content or any other element.
You need to make sure that what serves as the focal point is the most important part of your site.
Where do you want the eye to focus?
A logo?
A product?
If your site is too cluttered or you don’t know where you want the user to go, they’re likely to leave.
Amazon uses the top banner as a focal point, but not every company can play on seasonal events to generate business, so think about what sets you apart.

Breaking points

Breakpoints are specific display window sizes, beyond which the structure, layout or content of a site is modified to optimize the user experience.
They are defined by CSS multimedia queries, and a typical responsive site has several breakpoints.
Normal breakpoints tend to follow standard device resolutions, i.e. 320, 375, 550, 768, 1024, 1200 pixels wide.

ProcessWire

A modern, open-source, API-driven CMS, ideal for websites that don’t require e-commerce functionality.
It’s a CMS for any kind of showcase site.
It’s easy to use and intuitive for administrators.

Property

Property is a CSS term roughly equivalent to an HTML tag.
Properties are what define how a style should appear on a given Web page.

Pseudo-element

A pseudo-element is an element used to add a special effect to certain selectors.

Pseudo-class

Like pseudo-elements, pseudo-classes are used to add special effects to certain CSS selectors.

Python

Python is a Web development framework that has been around since the 1980s.
It is known for its ease of use and readability.
Beginners often use Python as a springboard to other development tools.
What’s more, it’s free.

Search

Standard website function consisting of a text field and a search button.
More advanced searches include additional fields.

Filling

CSS attribute that controls the amount of spacing around the inside of an element.

Multimedia queries

Media queries are used in CSS to check elements such as browser width and height, in order to modify the CSS of a page according to its size.
This is the basis of Responsive Website Design.

Resolution

Refers to the physical number of pixels displayed on a screen, e.g. 1280×1024.
Unlike printing, display resolution does not refer to the number of pixels or dots per inch on a computer screen, as this can be altered by changing the screen resolution.
However, image resolution is often expressed in terms of pixels per inch, although this has very little effect on how the image is displayed on screen.

Responsive design

You can’t fail to have heard of the concept of responsive design.
It’s been a real buzzword on the web for several years now, and shows no signs of letting up.
Simply put, a responsive design is one that adapts to the user’s device and ideally to the user’s context, in order to display the required content in the most appropriate and accessible way, regardless of the type of web-connected device used to view it.
In practice, this means that a web page will re-paginate itself as the screen size decreases or increases, displaying in multiple columns when viewed on a desktop computer, but in a single column when viewed on a smartphone.
This means users don’t need to zoom in on a phone to read a site properly.
This usually means that site text changes size, pages are narrower and menus change layout to suit smaller screens.

RGPD

The “General Data Protection Regulation” is a set of data privacy laws that came into force in 2018, dictating how companies store, share, acquire and dispose of customer data.
This means directly requesting permissions for certain activities when capturing user data.

RSS – Really Simple Syndication

RSS is a standardized XML format for syndicating content from one site to another.
It is most often used on blogs.
RSS also enables visitors to subscribe to a blog or other site and receive updates via a feed reader.

SaaS – software as a service

Not to be confused with SASS, SaaS stands for Software as a Service.
Simply put, it’s any service that provides a software platform, delivered from or via the cloud.
The latest versions of Microsoft Office Online, Google Docs and Photoshop Express are popular examples of SaaS in action.
Each of these services offers the user a desktop-like experience, but are delivered directly from the web without the need to install additional software on the user’s computer.

Schema

In general, a schema is an XML document used instead of a DTD to describe other XML documents.

Script

A script generally refers to a part of the code on an HTML page that makes the page more dynamic and interactive.
Scripts can be written in a variety of languages, including JavaScript.

Section

Sections are elements on a page that are not the header, footer or banner.
They are generally the width of the page and contain more than one element, for example a box with text and a button inside.

Selector

In CSS, the selector is the element to which a style will be applied.

Web server

A web server is a computer with software and networking capabilities that enable it to host web sites and pages and make them available to Internet users elsewhere.
They store huge amounts of data, such as CSS sheets, and connect to other servers via Internet connections.
Web servers store web information such as URLs, and when a browser requests a page, it communicates with the server.
There are several different configurations that can be used for a web server, including the LAMP configuration mentioned above.

Session

A session is a record of the current activity of a computer connected to a website.
The session is generally identified by a long string of characters.
Thanks to this string, the website can keep track of your identity between requests, without having to log you in every time you go to a different page.

SGML

SGML stands for “Standard Generalized Markup Language”.
It is a markup language used to define the structure of a document.
SGML isn’t often mentioned, but it’s the markup language on which XML and HTML are based.

Showcase site

This term is used to describe a website without complex functionality, which serves as an online brochure for a company.
These sites typically have pages such as Services, News, Contact Us, and have no e-commerce functionality.

XML Sitemap

Text file on a website that lists all the pages on that site to help search engines find and index the entire site.

Sketch

Sketch is a very useful design application for web design.

SOAP

SOAP stands for “Simple Object Access Protocol”.
It is an XML-based protocol that exchanges information over the Internet to enable an application on one site to access an application or database on another site.

Subdomain

Projet.gregorychartier.fr is a secondary domain that does not need to be purchased, as it is a child of the main domain.
It can be used to host a website totally different from the main domain.
But for SEO reasons, it will be considered by Google as a totally different site, and will therefore not benefit from the domain authority of the main domain.

Subdirectory

A directory inside another directory, in web terms this means a section of the site that lives inside the root domain, such as gregorychartier.fr/en.

Below the waterline

The term comes from the days of newspaper publishing.
In newspaper terms, “below the waterline” means that the content is in the lower half of the page (below the physical fold of the paper).
In web design, “below the waterline” refers to content that is generally below the lowest point visible to a website visitor in their browser.
In other words, visitors have to scroll down the page to see the content.

Specification

A specification is a document that offers an explicit definition and requirements for a web service or technology, and usually includes how the technology is intended to be used, as well as tags, elements and dependencies.

SSL – Secure Sockets Layer

SSL is a way of encrypting information transmitted over a network so that others cannot see it.
A website needs an SSL certificate to use the SSL protocol.
The little padlock you see in your browser’s address bar indicates that a site uses SSL and is therefore secure.

Font style

In CSS, font style refers only to whether a font is italicized or not.

Online styling

Elements whose CSS is written directly around the element it affects, instead of in a separate style sheet or header style.

Integrated styling

An embedded style is a CSS style written into the header of an XHTML document.
It affects only the elements on that page, not the whole site as a separate CSS file does.
The styles in an embedded style sheet replace the styles in the linked CSS file.

Conversion rates

The conversion rate is the number of successful conversions expressed as a percentage of the total number of visitors during the same period.
For example, if your site received 1000 visitors last week and you received 15 inquiries, your conversion rate is 1.5% ((15/1000)*100).

Bounce rate

A website’s bounce rate is the percentage of people who leave the site from the same page they entered, without clicking on any other pages.
This rate can be a good indicator of the quality of a website’s navigation, as well as an indicator of the quality of the site’s content (a very high bounce rate doesn’t bode well for either of these things).

A/B test

A/B testing is a methodology for trying out different ways of achieving the same end result, with the aim of establishing, through experimentation, which solution is the most effective.
Typically, A/B testing is used to test different web page layouts, checking how many users convert to paying customers using the alternative layouts.
By continuing an iterative process of prototyping, evaluating and adapting, A/B testing can significantly increase the conversion rate of certain pages.
It’s a useful tool to use: better conversion means a better bottom line!

Toggle

A toggle is a user interface control that has two mutually exclusive states, such as ON and OFF.
The design and functionality of this control is based on a switch that allows users to activate or deactivate features.

Tramage

In GIF and some other image formats, a limited color palette is used for each image.
As a result, not all the colors in an image are presented.
Screening is used to approximate these colors by combining pixels of different colors side by side.

TTFB – Time to first byte

This is the time elapsed between the browser sending the request and the server responding.
This time does not include the time needed for the browser to load the page.

TTL – Time to Live

This is the time it takes for your browser to start displaying a new result when the DNS is modified, for example when a web domain is directed to a new server.
This comes into play when changing hosting providers or launching a new website.

Image file types

JPGs and PNGs are the most widely used image types online.
PNGs have the advantage of supporting transparent pixels and not losing quality, whereas JPGs don’t support transparency.

UI – user interface

It’s what the user sees and interacts with.
In the web domain, this generally means all aspects of a website that the user can see.

URL

URL stands for “Uniform Resource Locator”.
A site’s URL is its address, the element that specifies where it can be found on the Internet.

Usability

Usability is the ease with which a user can use a site.
It’s a scale, not a binary element.
It’s a very broad notion, covering text size and contrast, copywriting and functional handling, such as the way errors are handled in a form.

UX – user experience

This refers to the user’s experience when accessing and using the website.
It’s about how easy and pleasant it is to use a website.

Valid

Valid web pages are those that return no errors based on the type of HTML/XHTML specified in the doctype declaration at the beginning of the file.
In other words, the code used on the page conforms to the specifications of that version of HTML/XHTML.
This can be verified by various validation services, most often the W3C.

Vector

JPG, PNG and GIF are raster files, i.e. they are composed of pixels and lose quality when enlarged (they become blurred).
Vector files (svg, ai, pdf) are not composed of pixels and can be resized ad infinitum without loss of quality, but they cannot contain detailed color information, like a photo.
Vector file types are most often used online for icons and logos.

Loading speed

The speed at which a web page is displayed in the browser.

VPN – Virtual Private Network

A VPN is a network created to preserve the confidentiality of information for people outside the network.
It’s a way of accessing hidden services and encrypting information on public networks.

WAF – Web Application Firewall

A WAF inspects the traffic arriving on your website to make sure it contains nothing malicious.

Wireframe

An online, boxed representation of a Web page, which serves as a record or blueprint for the content and functionality that will exist on a given page.

WordPress

The most widely used CMS in the world.
It’s an excellent all-round CMS, ideal for basic publishing, easy to use and highly adaptable in terms of adding features such as e-commerce.
It is also the most targeted by malicious actors…

XHTML

XHTML stands for “Extensible Hypertext Markup Language”.
Basically, XHTML is HTML 4.0 that has been rewritten to conform to XML rules.

XML – Extensible Markup Language

XML stands for “Extensible Markup Language”.
XML is a markup language used to write custom markup languages.
In other words, XML describes how to write new languages.
It is sometimes called a “meta-language” for this reason.
It also serves as a basic syntax enabling different types of computers and applications to share information without having to go through multiple layers of conversion.

To conclude on webdesign vocabulary

Creating a website can be a daunting task.
Choosing a web design partner and deciding how you want to present your organization on the web is no easy task.
I hope that with this list of webdesign vocabulary, you’ll feel more at ease in your discussions with potential partners.
As a web developer myself with over 10 years’ experience, I’d be delighted to help you with your website design project.
Please contact me today to discuss your requirements.