Working with a web designer to bring your online vision to life? We know that the world of web design can sometimes feel like stepping into a maze of unfamiliar terms and technical jargon. And, if we’re being honest, we know it can be really overwhelming as a business owner. But don’t worry! We’ve created a guide to help you through the process so that you feel confident that you’ll understand — most of — what your website designer is talking about when they start dropping terms like URL and back end.
Whether you’re a small business owner, an entrepreneur, a franchisee or a tradesperson, we want to make finding your way through the online world easier for you to understand.
What Are The Basic Web Design Terms That You Should Understand?
Collectively the list is nearly endless but these are a few of the most commonly used web design terms that you should understand if you’re not a designer but you do have a website. And, taking the time to learn these terms will make it easier for you to actually know what they are talking about instead of just nodding your head as if you do.
Above the Fold
A website’s most important content is usually placed above the fold where visitors will see it immediately without having to scroll down the page. Sometimes this is as far as a viewer will go so it’s key that they get the information they want right away.
Back End
The back end of a website is the part hidden from view of regular website visitors. The back end generally includes the information structure, applications, and the CMS that controls content on the site. You don’t need to see it, you just need to know that it’s there supporting your website.
Back Link
Backlinks are links from other sites back to your own. Backlinks have a huge impact on your site’s search engine rankings. Lots of backlinks from high-ranking sites can improve your search engine results, especially if those links use keywords in their anchor text.
Breadcrumbs
Breadcrumbs are the bit of navigation elements that generally appear near the top of a web page that show you the pages and subpages that appear before the page you’re on. For example, on a blog, the breadcrumbs might look something like: Home > Category > Year > Month > Post. Fun fact, this term comes from the fairy tale “Hansel and Gretel.”
CMS (Content Management System)
Some websites run purely on the code that a developer writes. But if you’re not a developer, creating content for the web might seem impossible unless you have a Content Management System, or CMS. Think WordPress, Drupal, Joomla, Wix.com, Shopify, Squarespace and similar platforms that let you update content easily.
Compression
Compression is about your files and how they’re managed. Every website has a size, and the bigger the size, the slower it is to load. A lot of images can slow down your load times, so “compression” squishes those files down to a reasonable size to speed things up. Lossy compression downgrades the detail in the image as the file size goes down, and lossless compression does not.
CSS (Cascading Style Sheets)
If your website is built on HTML, then the look and feel of it is done through CSS. Before CSS, if you had multiple blocks of text and wanted to change them all to the same font or colour, you would have to change the code on each individual block. CSS allows you to change it in one place that affects everything. That’s efficiency in action. In short, it defines the style of your website.
CTA (Call to Action)
This is more of a marketing term, but it’s one that a lot of web designers talk about. Any button that is asking you to do something is a CTA point. For example, on your product pages you might see a button that says, “Buy Now”. That’s a direct call to action (CTA).
Domain
There are three parts to the way a website is stored . First, the domain, which is the address people will type when they try to access your website like: www.3sixtymarketingsolutions.com. The second is your host, the company that delivers your website when someone types in your domain name. Your host is like a storage room that holds all the files for your website. The third is the website itself, which is stored on the host. When all the files are combined, this gives you what the public actually sees when they visit your site. You need all three to have a website that functions properly.
DPI/PPI
These two terms are similar and both of them have to do with how your designs are rendered. In the print world, DPI is Dots per Inch, and it’s the resolution of your printed image. PPI is Pixels per Inch, which is the resolution on the screen. So why is DPI included in an article about web terms? Because a lot of times people confuse DPI with PPI but you know the difference, right?
Favicon
When you go to a website, you’ll see a little image just to the left of the address in the tab of your browser. That’s a Favicon. They’re either 16X16 or 32X32, and have to fit a variety of criteria to make the site identifiable with a visual icon.
Font
We know you know what a font is but let’s just go through it one more time. A font designates a style of text that you use in your design. Helvetica is a font, for example.
Hex Code
Every colour displayed on a monitor that’s rendered through HTML and CSS has a hex code. It’s a six-digit code that starts with a #, then ranges from black — #000000 — to white — #ffffff. Every colour and number in between designates what colour you’ll get.
HTML
HTML stands for Hyper Text Markup Language, and it’s the language of code that runs the world wide web. HTML is what web browsers (or robots) read to render a webpage. And while websites can include other technologies and languages, HTML is the basis of everything.
Infinite and Parallax scrolling
Similar concepts, different applications. Infinite scrolling web pages show lots of content, but the page doesn’t actually move. So you scroll up and down through the page and the content comes to you infinitely. You know how your Facebook page works? That’s an infinite scroll. Parallax scrolling is similar, but objects scroll at different rates. For example, if you scroll down a page and there’s an image that stays in the background but still scrolls with the content but slower, that’s parallax scrolling.
JPEG (or JPG)
JPEGS are the web’s best friend and you’ve probably seen them a million times. One problem is that they’re a lossy compression, so the more you shrink the file size, the more detail you lose. Have you ever seen a photo on the web that looks horrible because of pixelization? That can happen when you save a JPEG, then re-save it with more compression to decrease the file size.
Marquee
This is the section on a web page that’s like a movie marquee. It’s placed above all the other page content and generally displays content that’s easy for visitors to absorb, such as images, headlines and sometimes buttons. A marquee should have a minimum amount of text to make it eye-catching.
Navigation (you know, the nav)
This refers to the menu bar that lets you navigate through a website. There are three navigation bars on this page. At the top there’s the main nav and that’s the first one. The breadcrumb nav that appears below the image is the second (you remember breadcrumbs, right), then the last is to the right of the content in this article, which is the blog nav, that helps to organize the content on our resources page.
Pixel
Every image on your screen is made up of pixels. A pixel is the smallest element of an image that can be individually processed in a video display. It’s also a unit of measurement in many design programs and the web itself.
PNG
PNGs are images that use a lossless form of compression which means that the detail in the image stays sharp no matter how small you shrink the file.
Responsive Design
What kind of device are you reading this on? Your phone? Your PC? Or, your tablet? A website with a responsive design will render the same content in different ways to fit on each screen properly. To see if a website has a responsive design, go to your PC and launch a website. Drag the corner of the browser window up to resize it and see if the content adjusts. If it does, that’s a responsive design.
RGB
RGB stands for Red, Green, Blue – the three colours that every monitor or TV uses to render anything in colour. Website are all designed in RGB, otherwise the colours won’t look right. A printed image uses CMYK composition made up of cyan, magenta, yellow, and black.
SEO (Search Engine Optimization)
SEO is the process, or technical side, of how websites are optimized to be discovered on search engines for their chosen keywords. The SEO rabbit hole is pretty deep, but to simplify it, you can split it into two basic categories: content and metadata. The phrasing of your text and the keywords you use affect the content portion of your SEO, while optimizing the metadata on the backend helps with the other. It’s like the Dewy Decimal System for books in a library except it’s for websites on Google.
Visual Hierarchy
When you’re designing a website, you need to decide what’s important to your customers or clients to put the most relevant information first (or above the fold). To do that, designers create a visual hierarchy, making sure the most Important components are represented by larger, brighter, more colourful graphics and text. This is the basic structure of the page’s design, and makes sure the message gets across effectively so your readers get the information they’re looking for quickly.
Wireframe
When web designers are visualizing the overall design of a website, they often start with a wireframe. This is a draft to see how the page is structured, without using high definition graphics or images. This is a good way to get ideas onto the screen, and a standard workflow practice for many web designers.
Are You Ready To Design Your Website Or Does Your Website Need A Facelift?
Now that you have a basic guide to website design jargon, it’s time to get started on your next website project! If you’re still feeling a bit lost, it’s best to give the experts a call. (That’s us, wink, wink.) We’ll be happy to walk you through our design process, assist you in writing your website content, and build you the website you need to attract your key client or customer. To get started give us a call at 647-250-1494, or book a free consultation today.
