Chapter 1 - Web Design Glossary Flashcards
(37 cards)
Anti-alias
Refers to the appearance of text on a screen. Anti-aliased blends the edges of letters so that it appears smoother to our eyes.
What is AJAX and what is it for?
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.
CMYK vs RGB
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.
Explain the concept of accessibility.
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.
Anchor text
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.
Bandwidth
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.”
Below the Fold
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.
Bit Depth
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
Breadcrumbs
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.
Browser Cache
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.
CSS
Cascading Style Sheets are used to define the look and feel of a website. CSS helps separate content from presentation.
Client-Side
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.
Content Management System
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.
DNS
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).
FTP
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.
Favicon
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.
Typefaces
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.
Gamma
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.
HTML
Hypertext Markup Language. The language of the web, primarily intended to contain content.
Hit
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.
3 Image File Types for Web
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.
Informational Design
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?).
Interaction Design
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.
LAMP
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.
