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.
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
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).
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.
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, 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 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.
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 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 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.
Front end website anatomy
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.
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.
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.
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.
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.
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 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
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.
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 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.
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.
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
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.
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 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.
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 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.
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 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.
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.
An address that specifies where a particular page or other resource can be found.
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 development terminology
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.
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 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.
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.).
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 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 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 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.
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 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.