Design Terminology for Website Design

If you’re building your website yourself, or you’re working with a web designer to create the site of your dreams, it’s helpful to know and understand the most commonly used web design terms.

Web design terms & definitions

301 Redirect

A permanent redirect from one URL to another, usually from your old website to the new website. 301 redirects are also used to redirect traffic from old Web pages to the new pages that have taken their place.

404 Page

A page a user sees when they try to reach a non-existent page on your website. Usually this is due to someone reaching a page that has been deleted or they have mistyped the URL.

Above the fold

The fold is a term carried over from newspaper design and pagination (where the fold referred to the physical fold in the paper). The fold in a website is the point on the web page that rests at the bottom of someone’s browser (in other words, to see anything below the fold, they would have to scroll down).

Accessibility

Addresses discriminatory aspects related to equivalent user experience for people with disabilities, including people with age-related impairments. For the web, accessibility means that people with disabilities can perceive, understand, navigate, and interact with websites and tools, and that they can contribute equally without barriers.

Alt-text

Alt text (alternative text), also known as “alt attributes”, “alt descriptions”, or technically incorrectly as “alt tags,” are used within an HTML code to describe the appearance and function of an image on a page. The alt-text may display while an image is loading or replaces a broken image link, it also helps with SEO to understand keywords that describe the image.

API

API stands for Application Programming Interface. An API enables two different programs to communicate with each other by making some parts of the website code available to developers. For example connecting your website to Mailchimp, PayPal, Shopify, etc.

Aspect ratio

Aspect ratio describes the ratio between the width and height of an image or screen. A 1:1 aspect ratio, for example, is a square. If the ratio of an image is different than the ratio of your screen, you may not see the whole image. Images won’t fit properly if the screen is narrower than the image.

Avatar or Gravatar

An image that follows you from site to site appearing beside your name when you do things like comment or post on a blog.

Backend

The back end of your website is where you update software, publish blogs in your CMS and upload new products.

Breadcrumb

A breadcrumb is essentially a trail at the top of any given web page that shows a user where that particular page lives within the site structure. It’s an additional (but optional) way to let users understand where they are located on your site.

Breakpoints

The points at which a website’s content and design will adjust to accommodate various screen sizes to provide the user with the best possible layout to view the content on any device. In responsive design, breakpoints are often defined by common device widths, such as smartphone, tablet, and desktops.

Cache

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

Call To Action (CTA)

A clear place on your website for users to take an action step. Links to other pages on your website, buttons, contact forms, and social icons are common CTAs and are great ways to get visitors involved and engaged with your website and content. A best practice is to include a CTA above the fold since that’s the first thing people see.

Code

Code are commands that tell websites how to function and appear. Some of the most common coding languages we work with in WordPress are:

  • HTML: (Hypertext Markup Language) tells a web browser how to display text, images and other multimedia on a webpage
  • CSS: (Cascading Style Sheets) describes how HTML elements should be displayed (it saves a lot of work by controlling multiple webpages at once)
  • PHP: (PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development for ecommerce, content management, blogs, and forums
  • JavaScript: used to create interactive effects on a webpage, for example a countdown clock, sticky headers, animation, etc.

Color code

Color codes are alpha-numerical descriptors that specify specific colors in a way that a computer can interpret and display. Some of the most common color code formats include:

  • Hex: 6 digits representing the intensity of red, green and blue respectively (black, the absence of color on a screen, is #000000)
  • RGB: Similar to Hex codes, but displayed as RGB(0, 0, 0)
  • HSL: Composed of three values representing (Hue, Saturation, Lightness)

Content Management System (CMS)

Software systems used to edit content on your website. Some examples include WordPress, Blogspot, SquareSpace, Joomla, Drupal, etc.

Cookies

Cookies are small text files which contain basic information about the websites you visit. Cookies help web servers determine preferences by looking at the types of site you visit, or what you put in your shopping cart.

Design Brief

Also sometimes called a creative brief, this is a document that outlines all the essential project details: scope and goals of the project, website audience, pages, design elements and tone, etc. The purpose of the design brief is to set deliverables and timelines for the project, as well as to ensure the designer(s) and client(s) are on the same page about what’s being produced. Many designers will not move forward until all parties have signed off on the design brief.

DNS

Stands for Domain Name Service (alternately Domain Name System or Domain Name Server). Basically, it’s the thing that converts IP addresses into domain names. DNS servers are provided with the IP address of your web server when you assign your domain name to those servers. In turn, when someone types your domain name into their web browser, those DNS servers translate the domain name to the IP address and point the browser to the correct web server.

Domain Name & Registrar

The domain is the name by which a website is identified, for example mine is carrieloves.com. A domain is associated with an IP address.

Websites need to be registered with the ICANN (Internet Corporation for Assigned Names and Numbers), and agencies provide the registration service for a fee.

The company used to register your domain name is called the Registrar. Some examples include GoDaddy, Name, and NameCheap.

eCommerce

Short 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.

Favicon

This is the small icon that appears in your browser tab, specific to your website. Favicons also show up in your browser’s bookmarks bar, browsing history and other places across the web.

File format

Website images are stored in different file formats, each of which has its own benefits and drawbacks. Though there are plenty of other image file formats as well, Squarespace image blocks only upload .png, .jpg, or .gif files. Here’s the difference between them:

  • GIF: (Graphical Interchange Format) are a series of images or soundless video that will loop continuously and doesn’t require anyone to press play
  • JPG: (Joint Photographic Experts Group) the most common file format for use in web design, because it has a fairly small file size, which results in faster loading but a little bit of quality loss – commonly used for storing digital photos
  • MOV and MP4: (QuickTime Movie and Moving Picture Experts Group Layer 4) are digital container files for videos and other multimedia
  • PDF: (Portable Document Format) PDF documents can contain links and buttons, form fields, audio, video, and business logic. They can be signed electronically, and you can easily view PDF files on Windows or Mac OS using the free Acrobat Reader DC software
  • PNG: (Portable Graphics Format) larger file size than .jpg, but allows for transparent backgrounds; also doesn’t lose image quality, so is best for screenshots
  • SVG: (Scalable Vector Graphics) an image format for vector graphics – look crisp at all screen resolutions & can have super small file sizes

Font (& typeface)

Technically, font & typeface are two separate terms with distinct meanings, but they’re often used interchangeably these days. For most purposes in web design, we use “font.”

There are three types of font families:

  • Sans serif: don’t have small lines at the end of their characters
  • Serif: have small lines at the end of their characters
  • Script: (handwriting or cursive) are based on handwriting, and can be casual or formal

There are a few other terms you may come across in describing font:

  • Helvetica is a font family
  • Italic is a font style
  • 16px is a font size
  • 400 is a font weight

Font – Units of Measurement

  • %: Percentage defines a measurement as a percentage relative to another value, typically an enclosing element.
  • EM: A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each “em” unit would be 12pt; thus, 2em would be 24pt.
  • PT: Fonts can be measured in point as a standard unit of measurement. It’s important to understand that the pt size of a font is based on the height of the font, and not the width.
  • PX: Pixels are the most commonly used unit of measure because there are many standards in web design based around the pixel. A px maps to one pixel on your screen.
  • REM: This unit of measure is really similar to the em unit of measure except it is easier to understand. The rem unit of measure is based off of the font-size of the root element.

Footer

The footer is the bottom part of your website that doesn’t change as you click on different pages. A number of items can be displayed here, such as contact information, a social media feed, or a subscription form.

Frontend

Remember how the backend is everything that goes on behind the scenes, and powers what goes on at the frontend? The frontend of a website, also known as client-side, is what the end user sees and interacts with.

GDPR

GDPR is short for General Data Protection Regulation, an EU law that went into effect in 2018 and governs how you collect, use and process personal information from people living in the EU.

Google Analytics

A detailed web analytics service offered by Google that tracks and reports website traffic. In order to use Google Analytics, a website must have a tracking code on the server or in the code of the website, as well as a Google Analytics account to access the tracking results/reports.

Google Search Console

A free web service by Google for webmasters and website owners which allows webmasters to check indexing status and optimize visibility of their websites.

Header

The top part of your website that doesn’t change as you venture to different pages. The header usually displays your navigation bar and may incorporate items such as your logo/name, social media icons, your phone number, and a search bar.

Headings

Web design is typically built off of three heading styles: Heading 1 (h1), Heading 2 (h2) and Heading 3 (h3), these can be used to improve both readability and SEO on your website (H4 – H6 tags can be used, but may be stretching it a bit, unless the page is really text heavy.)

High Resolution Image

High resolution (or “high-res”) images are at least 300 pixels per inch (ppi). Typically, images used in web design can be of a lower resolution (72px) than images used for printing, but new retina displays necessitate high resolution images on websites as well.

Hosting

A host stores and serves web pages over the Web. Most people rent web space for their website from specialist ‘Hosting’ providers, such as SiteGround, Bluehost, WPEngine, Liquid Web and Flywheel. A web server has software installed and networking capabilities that allow it to host web sites and pages and make them available to internet users located elsewhere.

Hover

Any kind of action that occurs when users place their cursor (that arrow you move around your screen) over a button, but before anything is clicked. The action can be anything from a simple change in color to an intricate animation.

HTTP

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

HTTPS

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

Internal Linking

Linking to your own content throughout your site. Links on a page or post that link to another page or post on your website.

IP Address

Internet Protocol address. Every computer that accesses the Internet must have a unique identifying number.

Landing Page

A Landing Page is NOT the Home Page. A special landing page is created to elicit a specific action from the new visitor (usually in connection with an advertising or marketing campaign).

Links or Hyperlinks

A hyperlink is a link from one web page to another, either on the same site or another one. Generally these are text or images, and are highlighted in some way.

Metadata

Metadata is information about your content. For example, blog post metadata includes the post title, publication date, author, categories and tags.

Navigation or Menu (not tabs)

The “menu” on your website, where visitors can navigate to other pages across your site. The primary menu is usually at the top of the website either above, below or inline with your logo. There are also instances where you may include a footer menu, or sidebar menu on your website for additional navigation options.

Opt-in

An offer on your website for visitors to “opt in” to your mailing list by providing their email address. Opt-ins can include newsletter subscribe boxes, free gifts (like ebooks, etc.), and more.

Parallax Scrolling

A visual effect in which a background image on your website moves slower than the content in the foreground (typically text), creating a sense of depth and layering.

Permalink

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. Since most blogs have constantly-changing content, the permalink offers a way for readers to bookmark or link to specific posts even after those posts have moved off the home page or primary category page.

Plugin

A plugin is third party code that extends the capabilities of a website. It’s most often used in conjunction with a CMS or blogging platform like WordPress. Plug-ins are a way to extend the functionality of a website without having to redo the core coding of the site.

Privacy Policy

If you collect any personal information on your website (such as email addresses on your opt-in form), you’ll need to have a privacy policy posted in a visible location (we suggest linking to it in the footer), letting your website visitors know how you collect and use their information.

Propagation

DNS propagation is a term used to describe the time period required for changes to your domain name server’s settings to take effect. It may take as long as 48 hours for internet service provider nodes across the world to update their caches with your updated DNS information.

Really Simple Syndication (RSS)

Also referred to as RSS. RSS is a standardized XML format that allows content to be syndicated from one site to another. It’s most commonly used on blogs. RSS allows visitors to subscribe to a blog or other site and receive updates via a feed reader.

Responsive Design

Mobile responsive design refers to web design that adapts to the size of the screen it’s being viewed on. A multitude of different screen sizes exist across phones, “phablets,” tablets, desktops, game consoles, TVs, and even wearables. Screen sizes are always changing, so it’s important that your site can adapt to any screen size, today or in the future.

Search Engine Optimization (SEO)

Search engine optimization is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.

Sidebar

A repeating section on the side of certain or all web pages within a website. Sidebars display information that may need or be desired to be accessed from all or certain pages on a site, such as a mailing list sign up form, special navigation, or a list of recent blog posts.

Site Map

A document that shows a hierarchical blueprint of a website’s pages and content.

Slider

A rotating banner of images that is usually placed on the homepage of a website. It is a “slide show” type format that can highlight different content and include images or video.

SSL Certificate

An SSL certificate provides secure, encrypted communications between a website and an internet browser. SSL stands for Secure Sockets Layer, the protocol which provides the encryption. Some hosting companies offer a free SSL (Let’s Encrypt.) Many companies offer SSL Certificates for an annual fee.

Theme

In WordPress themes are the underlying structure of your site, governing the basic functionality and appearance of your site.

Uniform Resource Locator (URL)

A site’s URL is its address, the item that specifies where on the Internet it can the found.

Website Terms & Conditions

Just like your Privacy Policy, your Website Terms & Conditions is a legal document that outlines the specific terms visitors must abide by when visiting and using your website or downloadable materials that can be accessed through your website.

Widget

Widgets are various repeatable components that can be added to a site without having to write the code or enter it on multiple pages.

WordPress

An open-source and free Web publishing application, content management system (CMS) and blogging tool built by a community of developers and contributors.

“Self hosted” WordPress websites are built with the WordPress.org version of the software. 

WordPress.com is a blogging and website service owned by a company called Automattic. WordPress.com uses the open source WordPress software. However, the .com version of WordPress is less flexible than websites built with the self-hosted .org version of the software.

Share this post:

Share on facebook
Share on twitter
Share on pinterest
Share on email