Blog

Web Design Glossary

Posted on in For Geeks Only

Web Design Glossary

 In this section of our glossary, you can find specific information about the different terms related to web design that we use during the development of a new website.

Accessibility

Simply put, this is the ability of a website to be used by people with disabilities, including visually impaired visitors using screen readers, hearing impaired visitors using no sound, color blind people, or those with other disabilities. A website with low accessibility is Simply put going to be impossible for those with disabilities to use. Accessibility is particularly important for sites providing information to those with disabilities (healthcare sites, government sites, etc.), though it is an important aspect to consider when designing any site.

Automagically

A portmanteau that mixes “automatically” and “magically.” usually, it is when something that has a complex technical process that’s hidden from users, so that something almost appears to work by magic. If you think about it, many modern internet-based technologies could be classified as “automagical.”

Below The Fold

This term is a carry-over from newspaper publishing days. In newspaper terms, “below the fold” means text was on the bottom half of the page (below the physical fold in the paper). In web design terms, “below the fold” is when the text which is usually going to be below the point first viewable to the average website visitor in their browser (That is to say, viewers would have to scroll down to see the text).

Breadcrumb

Breadcrumbs are the bit of navigation elements that usually appear near the top of a give web page that show you the pages and subpages the appear before the page you’re on. For examples, on a blog, the breadcrumbs might look something like: Home > Category > Year > Month > Post (or they might be a lot simpler that that). The breadcrumbs term comes from the fairy tale “Hansel and Gretel.”

Cascading Style Sheets

Sometimes called simply as CSS, Cascading Style Sheets are used to define the look and feel of a web site outside of the actual HTML file(s) of the site. In recent years, CSS has replaced tables and other HTML-based methods for formatting and laying out websites. The benefits to using CSS are many, but some of the most important are the simplification of a site’s HTML files (which can actually increase search engine rankings) and the ability to completely change the style of a site by changing just one file, without having to make changes to text.

Comment

In web design terms, a comment is a piece of information contained in a site’s HTML or XHTML files which is ignored by the browser. Comments are used to identify different parts of the file and as reference notes. Good commenting makes it much easier for a designer (whether the original designer or someone else) to make changes to the site, as it keeps it clear which parts of the code perform which functions. There are different comment formats for different programming and markup languages.

Dither

In GIF and certain other image formats, there is a limited color palette used for each image. Because of this, not all colors in an image are presented. Dither is used to approximate these colors by combining pixels of different colors side by side.

E Commerce Site

Short for electronic commerce. it is the buying and selling of goods online, through websites. Products sold through e-commerce can be physical products that require shipping, or digital products delivered electronically.

Elastic Layout

An elastic layout is one that uses % and ems for widths paired with a max-width style to allow the site layout to stretch when font sizes are changed. it is ability to flex to accommodate the browser width and reader’s font preferences are where it gets its name.

Element

In XML, an element is the central building block of any document. Individual elements can contain text, other elements, or both.

EM

Em is a unit of measurement for sizing fonts and other elements within a web page relative to the item’s parent element. A 1em font is equal to the point size for the font already defined in the parent element (2em would be twice the current size; .5em would be half the current size).

Embedded Style

An embedded style is a CSS style written into the head of an XHTML document. It only effects the elements on that page, instead of site-wide as a separate CSS file does. Style in an embedded style sheet will override styles from the linked CSS file.

EX

Ex is a measurement for font height or size relative to the height of a lowercase “x” in that font family.

External Style Sheet

This is a CSS document which is written in a separate, external document. The biggest advantage to using an external style sheet is that it can be linked to by multiple HTML/XHTML files (which means changes made to the style sheet will effect all the pages linked to it without having to change each page individually).

Favicon

Favicons are tiny (usually 16×16 pixels, though some are 32×32 pixels), customizable icons displayed in the web address bar in most browsers next to the web address. they are either 8-bit or 24-bit in color depth and are saved in either .ico, .gif or .png file formats.

Fixed Width Layout

A fixed width layout has a set width (usually defined in pixels) set by the designer. The width stays the same regardless of screen resolution, monitor size, or browser window size. It allows for minute adjustments to be made to a design that will stay consistent across browsers. Designers have more control over exactly how a site will appear across platforms with this type of layout.

Fluid Layout

See Liquid Layout

Focal Point

The focal point of a web site is the spot on a web page that they eye is naturally drawn to. This could be an image, a banner, text, Flash text, or just about anything else. You want to make sure that whatever is acting as your focal point is the most important part of your site.

Fold

The fold is a term carried over from newspaper design and pagination (where the fold referred to the physical fold in the paper). The fold in a website is the point on the webpage that rests at the bottom of someone’s browser (That is to say, to see anything below the fold, they would have to scroll down). There are varying opinions on how important the fold is in web design.

Font Family

Font family is a set designation for defining the typefaces used in CSS documents. The font family tag usually lists multiple fonts to be used, and usually ends with the generic font category (such as “serif” or “sans-serif’).

Font Style

In CSS, the font style refers solely to whether a font is italic or not.

Font Weight

The font weight is when how thick or thin (bold or light) a font appears.

Graceful Degradation

Graceful degradation is when a website’s ability to have elements that may take advantage of the capabilities of newer browsers done in a way that allows users with older browsers to still view the site in a manner that at least allows access to basic text. It also applies to making sure that if one small portion of your site doesn’t work in someone’s browser, it doesn’t break your entire site for them.

Graphical User Interface

Sometimes called by its acronym: GUI. A graphical user interface uses an input device (like the mouse) and visual representations of how the user is able to interact with a web application. That is to say, it is all the front-end stuff you see on a web application. it is purpose is to allow you to interact with a web application without having to enter code.

HTML TAG

Sometimes called an HTML element, an HTML tag is the bit of code that describes how that particular piece of the web page it is on is formatted. Typical tags specify things like headings, paragraphs, links, and a variety of other items.

Image Map

An image map is used in XHTML to allow different parts of an image to become different clickable elements (and can also allow some portions of the image to have no clickable element).

Navigation

Navigation is when the system that allows visitors to a website to move around that site. Navigation is most often thought of in terms of menus, but links within pages, breadcrumbs, related links, pagination, and any other links that allow a visitor to move from one page to another are included in navigation.

Nesting

Nesting is when putting one HTML element within another element. When this is done, the elements have to be closed in the reverse order from how they were opened.

Non-Breaking Space

A non-breaking space (Sometimes called  ) is a white-space character which is not condensed by HTML. it is primary function is to hold open table cells or add spacing between words (or a the start of paragraphs if an indent is desired).

Pseudo Class

Like pseudo-elements, pseudo classes are used to add special effects to certain CSS selectors.

Pseudo element

A pseudo-element is an element used to add a special effect to certain selectors.

Resolution

is when the physical number of pixels displayed on a screen (such as 800×600). Unlike in print, display resolution does not refer to the number of pixels or dots per inch on a computer screen, as this can be changed by changing the resolution of the screen (which, of course, does not change the physical size of the screen). The resolution of an image, however, is often referred to in terms of pixels per inch, though this has very little effect on how the image is displayed on screen.

Tag

A tag is a set of markup characters that are used around an element to indicate its start and end. Tags can also include HTML or other code to specify how that element should look or behave on the page. See also HTML Tag.

Usability

Usability is when how easy it is for a visitor to use the site as intended. That is to say, are navigation, text, pictures, and any interactive elements easy to use, functioning the way they were intended, and that your intended target visitor will not need any special training in order to use your site.

Walled Garden

Pages which link to each other, but are not linked to by any other pages. A walled garden can still be indexed if it is included in a sitemap, but it will probably have very low Google PageRank, as no external value is passed to it.  Many people refer to a closed ecosystem such as an App Store as a “Walled Garden”.

Leave a Reply

What our clients are saying

I want to thank you for your help with our website development project. Your programming skills, attention to detail, and ability to interact directly with our client were excellent. You have provided tremendous value to my organization. With a project of this magnitude, including the use of web services to push data out to 19 sub-websites, your ability to overcome our unique challenges and coordinate with my IT team was exceptional. I appreciate your help, and I am certain that your expertise was key to the project's success. Thanks again, I look forward to working with you on our next endeavor!

~ John Forgione – Executive Vice President – SFA Marketing, Inc.

Read More