Terminology
Which content goes where, and why does it look that way? Ensuring clients can identify different aspects of a web design lets you more effectively explain your decisions. It also helps clients avoid feeling like they’re not involved in the process when it’s their money on the line.
Help them (and yourself) smoothy get through the build process with these basic terms related to web design.
Above the fold
We place a website’s most important content or above the fold, where visitors will see it without having to scroll down the page. For example, if submitting a form is desired, give that form a place high on the page, along with content encouraging visitors to interact with it.
It’s kinda like
This expression comes from the days of printed newspapers. Readers wanted to see the day’s most important news without flipping open the broadsheet. It’s why lead stories were printed above the crease where the paper was folded in half.
You also might hear
user experience (UX), placement
Accessibility
Design decisions that make your website easier to use by anyone, regardless of impairments or disabilities, fall under the broader category of accessibility. For example, text might enlarge to be more easily read by people with visual impairments. Or that text could be broken into smaller sections and written in a simpler fashion to accommodate visitors with difficulty reading.
It’s kinda like
In some areas, buildings are required to have ramps and handrails to make them more accessible to disabled individuals. Those features are like brick-and-mortar versions of a website’s accessibility design elements.
You also might hear
ALT tag, user experience (UI), a11y
ALT Tag
To help the visually impaired experience a website, images can be tagged with descriptive text that a browser reads aloud. This text is referred to as an ALT tag, and not only helps visitors, but can also improve the website’s search engine ranking.
It’s kinda like
A personal assistant to the visually impaired might describe objects or situations to their client. ALT tags are those descriptions, delivered by a web browser instead of another person.
You also might hear
image description, image title, image search engine optimization (SEO)
Breakpoints
Breakpoints determine when the layout of website content will shift to accommodate devices of different sizes. Modern websites are able to detect the size of devices that visitors are using. Breakpoints can be added through a default setting or manually by the designer.
It’s kinda like
A basic if-then argument uses conditions like, If you give me a dollar, then I will give you an apple. With breakpoints, the argument becomes, If a device is that size, then we use this layout.
You also might hear
responsive design
Call to action (CTA)
CTAs are text on a website button encouraging visitors to take a desired action. For example, if you wanted visitors to schedule a call, the CTA placed near the contact form might read, Schedule Now or Let’s Connect. Because CTAs are such important parts of a website, much thought should be given to their writing and placement.
It’s kinda like
Imagine you were allowed to use only a few words to convince someone to take an important action. Those few words would be your CTA.
You also might hear
button, conversion, click-through rate, clicks to submissions, views to submissions
Column
Containers on a web page that display content like text and images vertically, or one atop another, are columns. A wider column positioned in the center of the page might display important text. A narrower column placed on one side of that page might be used to conveniently place contact information, a map or a contact form.
It’s kinda like
Did you ever play the game Battleship as a kid? When you lined up that aircraft carrier vertically, it was like placing web content in a column on the page.
You also might hear
user experience (UI), row
CSS
The visual appearance of features on a web page is usually specified by a cascading style sheet (CSS). Your CSS can determine things like fonts, the drop shadow beneath an image or text, or animation effects. Once you set up CSS, it can be used across multiple pages of a website.
It’s kinda like
When you’re building a house, a general contractor takes care of stuff like framing and electricity. Once they’re done, an interior decorator handles finer details throughout the home like carpet and wallpaper. CSS is like the interior design of a home.
You also might hear
styles, user experience (UI), attribute, parent, child
Favicon
Have you every opened a website and seen on the tab of your browser the company logo or another small image? Those are called favicons and can be uploaded to your website so they display in visitors’ browsers. Many marketing experts today will insist that favicons are essential to building a brand online.
It’s kinda like
In an office building, individual businesses might place signs outside to help visitors know where they’re going. Amid a bunch of open browser tabs, favicons can provide the same experience.
You also might hear
browser, tab, logo
Footer
The section at the very bottom of a web page is called the footer. Usually it contains content that’s universal to the website, like links to other pages, or contact information. However, a footer can usually be customized page by page, if desired.
It’s kinda like
The very bottom of news releases display general information about the organization, in a section called the boilerplate. Footers are like boilerplates for website pages.
You also might hear
module, blade, section, below the fold
Hamburger
In streamlined web design, such as mobile layouts, visitors click on a stack of horizontal lines to open the website menu. This “hamburger” has become a universal symbol to let people know where to start navigating a website.
It’s kinda like
The unique shapes of stop and yield traffic signs let motorists know, at a glance, how to proceed on the road ahead. The hamburger gives website visitors the same kind of heads-up.
You also might hear
navigation, menu, mobile design, responsive design
Hypertext markup language (HTML)
HTML is a language in website design that determines structure and layout. In the past, it was commonly used for the appearance of website content, but today has been mostly replaced by other languages. When the layout of a page appears “broken,” it’s often due to an error in the HTML.
It’s kinda like
Before you add paint to the walls of a building, you first must put studs in place to build a framework. HTML creates that basic framework for web pages.
You also might hear
markup, Adobe Dreamweaver, text editor, cascading style sheet (CSS), JavaScript, broken html
Landing page
Online marketing content like emails or social media ads usually encourage the audience to click a button for more information. Those buttons take them to landing pages, which include content specific to the offer. Landing pages also let marketers measure the effectiveness of their ads, as they’re directly connected.
It’s kinda like
If you watch daytime TV, you’ll eventually see an infomercial urging you to call a toll-free number. It’s likely that number is dedicated to that ad campaign and not for general use — a verbal landing page of sorts.
You also might hear
call to action (CTA), email marketing, click-through rate (CTR), display advertising
Marquee
The section on a web page placed above all the other page content is the marquee. It generally displays content that’s easier for visitors to take in, such as images, headlines and sometimes buttons. Most designers will agree we should avoid using lots of text in a marquee.
It’s kinda like
As we speed along a highway, billboards display content designed to leave an impression in those fleeting seconds. Website marquees provide a similar experience.
You also might hear
header, hero, above the fold
Module
The layout of modern web pages is generally divided into sections called modules. It’s advantageous when content needs to be added or moved to a page in later stages of development. Modules can usually be added or moved quite easily.
It’s kinda like
If you made a sandwich but realized it wasn’t going to satisfy your craving, you might add another piece of bread with more lettuce and tomatoes. That type of “add-on” ability makes the module essential in web design.
You also might hear
blade, section, page element
Navigation
Usually located at the very top of each page on a site, the navigation is made up of links to the various places on the website. It typically looks the same from page to page, with the only difference sometimes being an indicator of what the page a visitor is on. On mobile devices, the navigation often displays as horizontal lines stacked on top of one another.
It’s kinda like
Large malls and shopping centers place maps throughout the property showing where the various stores are located and where the shopper is in relation to them. Website navigation works the same way.
You also might hear
nav, hamburger, menu, drop-down
Orphan
When text gets added to a web page, space limitations can cause the first sentence of a paragraph to break with only a single, longer word in it. These orphans — so called because they have a future but no past — make text difficult to read and clutter a design. If your page displays an orphan, it’s wise to choose a shorter word or adjust the overall length of text.
It’s kinda like
If you build a brick wall, chances are bricks on the ends will be too long and need to be cut to fit. Orphans are like those bricks.
You also might hear
user experience (UI), widow
Responsive design
Modern web design tools let designers create multiple versions of a page. They can detect a device used to view it, and then serve up the version of the design that best fits. It’s common to have responsive designs accommodating desktop view, as well as tablets and smartphones of various sizes.
It’s kinda like
Professional photographers usually carry several lenses to ensure an idea field of view for different types of images. Responsive design ensures your website is always viewed through the most appropriate lens.
You also might hear
user experience (UI), mobile view, desktop view, breakpoints
Row
Containers on a web page that display content like text and images horizontally, or side by side, are rows. In web design, placing rows above or below vertically placed content can enhance the layout by avoiding a sense of repetition.
It’s kinda like
Did you ever play the game Battleship as a kid? When you lined up that cruiser horizontally it was like placing web content in a row on the page.
You also might hear
user experience (UI), column
Sidebar
Located at the far left or right on a web page, sidebars let you emphasize content by isolating it from other stuff on the page. For example, if a page described cleaning services, a sidebar could be added with a contact form to book a sales call. Sidebars can also display content like contact info, which is relevant for every page of a site.
It’s kinda like
During performances, speakers sometimes pause the action to address the audience. Sidebars are like a digital version of this.
You also might hear
module, blade, marquee, footer
White space
White space refers to areas of a web page that don’t display any content at all. Because it makes viewing content much easier, it’s important not to overlook white space when creating web pages. Otherwise, content packed densely on a page tends to deter visitors.
It’s kinda like
White space is also a key design element in publishing. If you expected a magazine to provide a breezy read but instead found each page packed with thousands of words, you’d probably put it down without reading.
You also might hear
user experience (UX)
Resourced from: