Website Terminology

Website Terminology

 
If you are confused by all of the technical jargon and confusing terms that are used in developing your website, you are in the right place. Hence, get yourself ready now and learn some basic web design lingo so you can communicate properly with your design and development team.

 

#1 : Design Brief
 
It is a document with multiple questions about your business. For instance:
 
1. Who makes up your target market?
2. List your main competitors
3. What are your goals for this project?

 
 
 

#2 : The Basics
 
Hosting, Domain, Content, Sitemap, Page Layout
 
Now try 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.

 
 
 

#3 : Design & Development
 
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 Images / Text
 
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. The placeholder text is used to specifies a short hint that describes the expected value of an input field

 
 

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)

 
 

Meta Tag
 
A meta tag is an HTML tag that contains specific information about a web page. Meta tags typically contain an abbreviated description of the page's subject matter and other information. Meta tags are used by search engines to index web pages and filter online content, and do not appear in the user's browser display.

 
 

Spam / Spamming
 
Spam typically refers to unsolicited junk mail and blog comments. Spam can consist of legitimate advertisements for products and services, or may be part of an online scamming operation. Spamming refers to the bulk dissemination of spam posts, or the repetitive posting of spam on public forums.

 
 

Blog / Knowledgebase
 
A blog is a website consisting of articles, or "posts," typically associated with a single person or organization. It is an online journal where people can share opinions and discuss various topics. Blog can also address a wide range of topics from politics to food culture to the arts. They can be the work of a single author or a group of contributors.

 
 

Archive
 
Archiving internet data refers to the collection of information, including files, visit numbers or website "hits," and media files. Individual websites and computers often have archives collected over the life of the site or the device. Larger organizations, such as the Internet Archive, collect data from across the internet to create an all encompassing database of internet activity and information.

 
 

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.

 
 

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

 
 

ALT Text / Tag
 
The ALT text or ALT tag is a bit of HTML code that is added to an image. This is the text that appears when you hold your mouse over an image on a website. Google, in their article about images, has a heading 'Create great alt text'. This is not a coincidence, Google places a relatively high value on alt texts to determine what is on the image but also to determine the topic of surrounding text. Applying images to alt text/tags such as product photos can positively impact an ecommerce store's SEO.

 
 

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.

 
 

Color 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 Optimiztion Engine)
 
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./span>

 
 

Responsive Design
 
It 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 Design
 
User interface refers to the usability of the website and the ease in which a user can find what they are looking for.

 
 

UX Design
 
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 / Plesk
 
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)

 
 
 

#4 : Most Common File Types

 
 

PhotoShop Document
 
( .psd )
 
Adobe Photoshop file format – Often used for photography editing, website designs and various other graphics

 
 

Encapsulated PostScript
 
( .eps )
 
A common vector file format allowing a graphic to be resized without altering the quality or resolution. Designers often request this type of file when needing a business’ logo if used on multiple mediums or large formats.

 
 

Portable Network Graphics
 
( .png )
 
This file type uses lossless compression and is similar to a GIF. The difference is a PNG allows for transparency and can’t be used in a CMYK (print) color space. It’s meant for use on the web. PNG does not support animation.

 
 

Adobe Illustrator
 
( .ai )
 
A vector file format used for Adobe Illustrator. A vector file can be resized to an infinite size without any data loss. This is ideal for large graphics and certain types of printing such as screen printing.

 
 

Joint Photographic Experts Group
 
( .jpg / .jpeg )
 
This file extension is used for JPEG files. A JPEG is created with lossy compression. Lossy compression removes portions of the data of a particular file allowing it to be easily viewable on the web in a smaller file size. Photographs are generally good candidates for this type of compression.

 
 

Graphics Interchange Format
 
( .gif )
 
A simple graphic, typically not a photograph is a good candidate for this type of compressed file. A GIF is created using lossless compression, which reduces the size of the file without removing any of the original data. GIF also supports animation. You might hear the term animated GIF occasionally. Some designers may use an animated GIF in email design or in simple web banner ads.

 
 

Small Web Format
 
( .swf )
 
It is a file format for displaying animations on the web. A SWF is created by the program Adobe Flash and can’t be edited. To edit a flash file, you need the original .fla extension file.

 
 

Leave a Reply

Your email address will not be published. Required fields are marked *