Have you ever received an email or gotten off a call with your website designer and thought to yourself “What the heck were they talking about?!”

I feel you! When Matt and I first started working on websites, I was clueless about website jargon. It sounded like jibberish to me and I had no clue what he was talking about. I’m a writer, not a developer!

This made it extremely difficult to communicate about the websites we were working on, so I made it my goal to learn the lingo as soon as possible.

I knew before I learned all the design and technical terms, I needed to have a solid grasp on the basics. I was constantly confusing a few of the terms until someone used the metaphor of a house and it finally clicked for me.

So without further ado, the basics…

The Basics (Hosting, Domain, Content, Sitemap, Page Layout)

The best explanation I’ve heard for the basics is to imagine your website as a home. The land your house sits on is equivalent to your hosting. Your domain is your address which shows people where to find you. Your sitemap is your house’s blueprint which shows which rooms are where and how they are connected. Your content is the home’s furnishings and the page layout is how the furnishings are arranged for the overall look of the home.

Make sense? Ok, now onto the heavy lifting.

 

Design & Development Terms

 

WIREFRAME

A wireframe is a simplistic drawing of the layout of a webpage. Many designers create a wireframe before a mockup to avoid missing any critical elements or pieces of information. They allow designers to focus on the UI and layout without the distracting elements of design.

 

MOCK-UP

A mockup is a graphic representation of a website a designer builds to help the client see what the design will look like (a lot of people have difficulty imagining the site from only the wireframe). Mockups are built in a design program which makes it easier (read: cheaper) to make changes at this stage compared to after the web project is completed.

 

LOREM IPSUM

This is latin placeholder or dummy text that most designers use to see how a design would look filled with text if the copy isn’t ready.

 

PLACEHOLDER

These are often images used in the design or early development stages. It is used to fill the space of an image on a mock-up or early stage of design until the final image is ready.

 

NAVIGATION

Navigation is the system that allows visitors to move around a website. Navigation can include menus, links within pages, breadcrumbs, or anything else that allows a visitor to move from one page to another.

 

PAGE LAYOUT

The layout is the arrangement of the elements on a page. The layout is used to guide the user through the page. Text, images, and navigation links are all important pieces of the layout.

 

HYPERLINK

A hyperlink is a link from one web page to another. Hyperlinks can link to pages on the same site (internal links) or other sites (external links). Hyperlinks can be text or images and are often highlighted in some way (underlined, put in a different colour, etc)

 

LANDING PAGE

A landing page is the page where a user first enters a website. It may or may not be the home page. Often, a special landing page is created to elicit a specific action from the new visitor.

 

HEADER

The header is at the top of your website. It usually houses your logo, navigation menu and sometimes a search bar or social media links.

 

FOOTER

The bootom portion of the website that contains links. These vary widely, but can contain links to contact page, privacy policy, terms and conditions, social media links, search bar, etc.

 

THE FOLD (ABOVE THE FOLD/BELOW THE FOLD)

The “fold” is a carry-over from newspaper publishing days. In web design terms, anything above the fold refers to content you see when you first

 

HERO IMAGE

Hero image is a term used to describe the main image on a homepage or landing page. It may be a large static image, a rotating image slider, or even a video clip.

 

BRANDING

Your branding is not just your logo. It encompasses all messages, promotions, actions, and offerings of your business. It describes what your business is and what it stands for.

 

COLOUR SCHEME

A selection of colours that will be used in your website design. Generally, 2-4 colours that are appealing together can create a cohesive design. The colour scheme of your website should match the colour scheme of your branding.

 

WHITE SPACE

sometimes referred to as “negative space” is the space around your design elements. White space provides a clean, professional look and can bring emphasis to certain elements of your design like images, text or call-to-actions (CTAs)

 

SEO – SEARCH ENGINE OPTIMIZATION

Copy that is search engine optimized has been written in a way to improve the likelihood of it showing up in search results for relevant keywords. Images, layout, formatting and links can all help SEO.

 

RESPONSIVE DESIGN

refers to websites that use fluid-width layouts that can adjust to different sized screens and display properly on any device. This means your website will look great whether a user is on a computer, tablet or mobile device

 

UI – USER INTERFACE

User interface refers to the usability  of the website and the ease in which a user can find what they are looking for.

 

UX – USER EXPERIENCE

User Experience includes UI as well as all of the emotions and feelings a user has when interacting with a website.

 

BACK END

A part of the website hidden from view of regular website visitors. It is used by developers and authorized users and is where the code, content and files are managed for a website.

 

FRONT END

The part of the website that is visible to users and refers to the look of the website (pages, images, content, etc).

 

CMS – CONTENT MANAGEMENT SYSTEM

A content management system is a software program used to create and link your website content together. It allows users to edit, delete and manage the content of a website from a visual interface. Most CMSs don’t require knowledge of programming languages, CSS or HTML to update a website. Examples: WordPress, Squarespace, Joomla, and Drupal.

 

CSS – CASCADING STYLE SHEET

A group of files that contain the colours, fonts, layout and overall appearance of your website. Unlike HTML, a style sheet may only need to be altered once to have an affect on multiple pages of a website, hence “cascading”.

 

CPANEL

A control panel that acts as the administrative backend of a web host.

 

BROWSER

The software a website visitor is using to access the internet and view the website. Examples include Safari, Google Chrome, Firefox, Opera and Internet Explorer.

 

CACHE/CACHING

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

 

FAVICON

A tiny customizable icon which is usually adapted from your logo; it appears on browser tabs and bookmarks (see ours in your browser tab above)

 

HTML – HYPERTEXT MARKUP LANGUAGE

It is the primary language used to write web pages.