web design terminology

Friday Fives: 5 Website Terminologies You Need to Know (or Remember)

John Bialous January 23, 2015

If you’re following the world of web design, you may hear a lot of different terms or jargon being used to describe everything from a website’s design framework to its functionality. While it may not be possible to retain the definition of every term you come across, here are the top five to familiarize yourself with right now:

1. Foundation / Bootstrap

By now you probably know what a responsive site is. (If not, a quick refresher: They are sites that automatically adjust their content depending on the size of the visitor’s browser, whether it’s a desktop, tablet, or smartphone.) Foundation and Bootstrap are two of the more famous frameworks that designers use in front-end design. The class names and the available javascript add-ons vary between the two, but at their most basic, Foundation and Bootstrap provide you with the building blocks necessary to construct a responsive site.


2. Media Queries

Media queries are true-false statements that change the way content is presented to you, as long as the conditions of the query are met. Say you want your website’s background color to change across different devices. In your CSS, you need to create at least three media queries (one for smartphones, tablets, and desktops). Inside each query, a different background color property is defined.

3. Hamburger ()

No, we’re not talking about what you had for lunch today, with fries on the side. A hamburger is a graphical representation of the site’s menu, aptly shown as three parallel horizontal lines. They are employed mostly for smartphone versions of a website, as they do not take up too much precious real estate.


4. Semantic HTML

Semantic HTML connotes the use of meaningful HTML markup in website design. For instance, using the <nav> tag to tell a spider that everything inside this tag constitutes the site’s navigation. Other, simpler examples include using <em> (short for emphasis) to italicize text as opposed to <i>, <strong> for stronger emphasis instead of <b>, and <del> for deleted text.

5. Breadcrumbs

Much like how it was used in the Hansel and Gretel fairy tale, a breadcrumb is a type of navigation that shows the user where they are in relation to the homepage. This is useful for sites that are divided into multiple sections, each with their own set of pages, as they indicate the current location and a quick way to retrace their steps.

These are our top five of the many website terminologies you need to know today. What are some of yours? We’d love to hear your suggestions in the comments below.

Want to learn more about these top five website terms or have questions about what you can do to improve your company’s website? Contact us today to speak with an experienced web design advisor.


Leave Us a Comment

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

Do great things.

Get Started