Web Design Glossary
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.
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).
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.
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.
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.
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.
In XML, an element is the central building block of any document. Individual elements can contain text, other elements, or both.
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).
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 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).
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.
See Liquid Layout
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.
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 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’).
In CSS, the font style refers solely to whether a font is italic or not.
The font weight is when how thick or thin (bold or light) a font appears.
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.
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.
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 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 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.
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).
Like pseudo-elements, pseudo classes are used to add special effects to certain CSS selectors.
A pseudo-element is an element used to add a special effect to certain selectors.
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.
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 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.
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”.