Chapter 1 - Web Design Glossary

Question 0

Anti-alias

Answer 0

Refers to the appearance of text on a screen. Anti-aliased blends the edges of letters so that it appears smoother to our eyes.

Question 1

What is AJAX and what is it for?

Answer 1

Asynchronous JavaScript and XML; used to create dynamic web applications and allows for asynchronous data retrieval without reloading a web page. This means that parts of a web page can be updated without reloading the whole page, which makes AJAX-enhanced pages perform very much like a desktop program. Before AJAX, the entire page must reload in order for the content to change.

Question 2

CMYK vs RGB

Answer 2

Cyan, Magenta, Yellow, Key color(black) is used for printing and our eyes interpret the reflected light as continuous tones if the dots are small enough(300 dpi vs 72). Images for monitor display use RGB. Our eyes interpret the projected light as continuous tone if the pixels are small enough.

Question 3

Explain the concept of accessibility.

Answer 3

The concept that websites should be accessible to all devices and browsers; hardware and software independence. More specifically, accessibility means that websites can be used by people with disabilities. We normally think of visual impairment (voice output browser) but we should also think about link target sizes (fine motor control) and making links accessible via the tab key. Also on the list: type size and contrast and alternative content on images (ALT tag). Websites funded with taxpayer money may be have an accessibility requirement. See accessibility resources from UW and from the federal government.

Question 4

Anchor text

Answer 4

The text that is a hyperlink. May also be a reference to a jump link, a hyperlink that will move you up or down a webpage.

Question 5

Bandwidth

Answer 5

Usually refers to the rate at which data can be transferred across a network; common measurements are bits-per-second (bps) and kilobits per second (kbs). It may also refer to the maximum amount of data a web hosting contract allows per month without overage charges. Slang: a reference to how much time someone has to do something: “I don’t have the bandwidth for that request right now.”

Question 6

Below the Fold

Answer 6

An artifact of newspaper design, where the term means content on the bottom half of the front page. In web design, this references content below the bottom of the viewing area in the browser, which varies by monitor/device.

Question 7

Bit Depth

Answer 7

Bits are parcels of information represented in each pixel.

1 bit = 2 colors
2 bit = 4 colors
3 bit = 8 colors
4 bit = 16 colors
5 bit = 32 colors
6 bit = 64 colors
7 bit = 128 colors
8 bit = 256 colors

Question 8

Breadcrumbs

Answer 8

Navigation element that answers the question: where am I? Breadcrumbs appear near the top of a web page and display a website’s information hierarchy.

Question 9

Browser Cache

Answer 9

Web browsers cache, or store, files to your hard drive so that the next visit (or page) will seem to load faster. From a design perspective, it is important to make sure global images and information (navigation, stylesheets) are in only one directory (folder) so that their website address (URL) is constant. Thus, after the first visit, they will live in cache.

Question 10

CSS

Answer 10

Cascading Style Sheets are used to define the look and feel of a website. CSS helps separate content from presentation.

Question 11

Client-Side

Answer 11

Client-side scripts are run in the web browser rather than on the web server. This is an off-loading of processes not unlike self-serve gas; it enables a web server to handle more visitors.

Question 12

Content Management System

Answer 12

A CMS is a tool or system for managing website content and functionality. It is the opposite for writing each HTML page by hand and uploading it to the web server using FTP. WordPress is an open source CMS, as is Drupal.

Question 13

DNS

Answer 13

Domain Name Service; this database-in-the-sky is what converts an IP address (which is a series of numbers) to a domain name (something.com, for example).

Question 14

FTP

Answer 14

File Transfer Protocol, which is the method used to move (or transfer) files between computers on a network. In the context of websites, FTP is the protocol used to upload HTML, CSS and image files to a web server.

Question 15

Favicon

Answer 15

The icon that appears in the web address bar of most browsers. This is a customizable image, .ico, which is usually 16×16. There are many free favicon generators, or you can create a favicon using Photoshop.

Question 16

Typefaces

Answer 16

Also known as typography. On the web, as in print, our primary concerns are legibility (how easy is a typeface to read) and style (personality, voice). When analyzing differences between typefaces, the x-height is the most variable. The larger the x-height, the more legible the typeface. Because CSS and HTML refer to type families as fonts, it has become the web design word for typeface.

Serif (or Antique)
Type contains feet/tails (serifs) which create a horizontal movement that the eye can follow. Recommended for body copy in print but not on a monitor.

SansSerif (or Grotesque)
Modern sans serifs are characterized by their lack of serifs; recommended for body copy for the screen. Good specification for web text: Geneva, Verdana, Arial (the standard PC system font), Helvetica (the standard MAC system font).

Kerning is the horizontal space between letters. Leading is the vertical space between lines of text.

Historically, Macs and PCs have rendered fonts differently; 72 ppi for Macs and 96 ppi for PCs. As a result, type looked larger on a PC monitor than on a Mac. Most Mac monitors now set the default type size at 96 ppi.

Question 17

Gamma

Answer 17

Gamma is the relationship between the brightness of a pixel as it appears on the screen and its numerical value. In the context of computer monitors, PCs display a darker gamma (2.2) than Macs (1.8). As a result, a photo that looks perfect on a Mac will appear too dark on a PC. Gamma correction is especially important when you are creating color proofs for printing.

Question 18

HTML

Answer 18

Hypertext Markup Language. The language of the web, primarily intended to contain content.

Question 19

Hit

Answer 19

A request for a single file from a web browser to a web server. A hit is not the same as a visit (or pageview). One web page could involve dozens of hits: the HTML page, the stylesheet, the javascript, a half-dozen images. More on clicks, hits, visits and such from Google.

Question 20

3 Image File Types for Web

Answer 20

GIF: Graphic Interchange Format; the first online graphics format, developed by CompuServe. A GIF can contain only 256 colors; reducing an image to 256 colors is called indexing. When an image with millions of colors is reduced to a GIF, dithering must take place. Dithering estimates colors that are not available in the palette. This is a lossless file type; there is no reduction in quality by compression. GIFs are optimal for flat color; supports transparency and animation.

JPEG: Joint Photographic Experts Group; developed to share high quality photographs. Supports 24 bits (millions of colors) unindexed RGB filesSupports 24 bits (millions of colors) unindexed RGB files. This is a lossy file type; there is a reduction in quality when file size is compressed. JPEGs are optimal for photographs or continuous tone art.

PNG: Portable Network Graphics; developed in response to patents involved in the GIF format. A PNG can use palette-indexed color like a GIF and supports transparency; unlike GIFs, it supports 24-bit (8 bits per channel) and 48-bit (16 bits per channel) truecolor. It is a lossless format.

Question 21

Informational Design

Answer 21

The the organization of information, the framework of a website. Reflected in information architecture, which is informed by user profiles/personas and illustrated with storyboards. To be effective, must reflect the mental model of the audience. One danger of intranet sites: the sites are designed along structural lines (org charts) rather than functional ones (how much vacation time do I have left?).

Question 22

Interaction Design

Answer 22

Focus is environmental use; in the case of web design, it’s the interactions with the website. Well-designed interactions enable users to find/to accomplish what they need clearly and intuitively. In the interaction, a well-designed website will provide feedback (so I know my input has been “heard”), let me retain control of the interaction and help me be productive/efficient. More advanced systems are adaptive as well (think sites with preference profiles, Amazon’s suggestions. See Togg on Fitts and his first principles of interaction design. Also, see Don Norman’s Design of Everyday Things.

Question 23

LAMP

Answer 23

The LAMP stack — Linux (operating system), Apache (web server), MySQL (database) and PHP (programming language) — is the set of technologies used primarily by open source projects.

Question 24

Mouseover

Answer 24

An action that happens when a user passes her mouse over an element on a webpage. Some actions may be accomplished by CSS; others rely upon javascript. A mouseover provides user feedback.

Question 25

Navigation

Answer 25

The system that allows a visitor to move about your website. Navigation is more than a global menu; it includes links within pages, pagination (think about the 1..2..3..4..more links at the bottom of search results pages), breadcrumbs and related information links. Jared Spool describes eight types of navigation pages.

Question 26

Permalink

Answer 26

A permalink is a fixed (permanent) URL. The term arose in blogging architecture. In WordPress, for Search Engine Optimization (SEO), you want to make your permalinks human readable rather than a number in the database. See Using Permalinks from WordPress.

Question 27

RSS

Answer 27

Really Simple Syndication. This is a standardized XML format that makes it easy for website content to be syndicated to other sites or to be delivered to an RSS reader. Although it is most commonly used on blogs, because the technology is built into the software, you can create an RSS feed for any web page.

Question 28

Readability

Answer 28

Not to be confused with legibility, readability is a measurement of how easily text can be read and understood.

Question 29

Resolution

Answer 29

Resolution is the number of pixels, which are square, that fill a screen and is measured horizontally and vertically. Pixel size and count determines the monitor size. Today, a low resolution computer monitor would be 800×600. Web design is made complex by the variety of resolutions: a phone or media player may be 320×480; a tablet, 600×1024; and a computer monitor may be 3200×1800. See your screen resolution; see W3C screen resolution trends.

Question 30

Responsive Design

Answer 30

A web design approach designed to provide an optimal experience regardless of device (phone, table, computer) used to access the site.

Question 31

URL

Answer 31

Uniform Resource Locator. A site’s URL is its domain name (http://something.com, for example). A page or image link begins with the domain name and includes directories and its file name, usually with a file extension. It is the address (or link) that allows you to find a piece of information on the internet.

Question 32

Usability

Answer 32

A measurement of ease of use of a website or application. Measurements can include anything from “how long does it take a page to load” to “is this page easy to read”. See a 25-point checklist for usability; see Jakob Nielsen’s book, Homepage Usability, at Amazon.

Question 33

Visual Design

Answer 33

Appearances; the visual presentation of information. Includes both what the website looks like and how it makes you feel (emotional design). Visual elements include color palette, imagery, layout (grid), motion and typography,

Question 34

W3C

Answer 34

The World Wide Web Consortium is the international community of organizations that develop web standards; it is led by Tim Berners-Lee.

Question 35

Websafe Color

Answer 35

In the early days of the web, the subset of 256 colors that were the same on Macs and PCs. Specifying art in these colors ensured that they would appear the same on both platforms (within the constraints of the difference in gamma). As hardware and software improved, the limit was rendered moot.

Question 36

Wireframes

Answer 36

A design tool, wireframes provide a visual guide to a website framework and pages. See a beginner’s guide to wireframes.