Web design terms that are “must know”.
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.
- Alias, anti-alias
Refers to the appearance of text on a screen. If the edges appear “jagged”, then the type is aliased. This happens because pixels are square but letters contain curves. When we anti-alias text or a graphic, the creation software (such as Photoshop) blends the edge of the letter with the background color, providing our eyes with a smoother perception of the edge. We do not anti-alias type for documents that are printed.If you are going to anti-alias a graphic, do so on a transparent background. If you use a white background and then later decide that the web page background color will be something other than white, the graphic will have a “halo” around its edges. Very ugly and unprofessional. As monitors become more refined (that is, the pixels get smaller and there are more of them in a fixed size (we don’t really have “inches” on a screen), anti-aliasing could become a relic.
- 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.
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.” Test your bandwidth with Speakeasy.net.
- 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. See Boxes and Arrows on the topic (2007).
- 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
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.
- CMYK versus RGB
When we print a color document – whether on our office printer or at an offset printing house – the printer combines four ink colors, CMYK: cyan, magenta, yellow, and a key color which is usually black. Our eyes interpret the reflected light as continuous tone if the dots are small enough (such as 300 dots per inch rather than 72 dots per inch). But when we prepare images for display on a monitor, we will use a different color palette, RGB: red, green, black. Our eyes interpret the projected light as continuous tone if the pixels are small enough. CMYK is considered “subtractive” color, and RGB is “additive.”
Cascading Style Sheets are used to define the look and feel of a website. CSS helps separate content from presentation.
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. See a discussion on StackExchange.
- 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.
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).
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.
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.
- Fitts’ Law (1954)
Paul Fitts researched pointing tasks, the kind that happen in the real world (because there was no graphical user interface in 1954). He discovered that for discrete tapping tasks, the time it takes to reach a target (think hyperlink today) is a function of the size of the target and the distance travelled to reach it. See Fitts’ Law as a Research and Design Tool in Human-Computer Interaction (pdf, 1992).
- Fonts (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.
- Serif (or Antique)
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. Learn about monitor calibration.
Hypertext Markup Language. The language of the web, primarily intended to contain content.
- Image file types
There are three primary types of web images but many non-web image file types.
- 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.
- Information Design
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.
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.
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.
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.
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.
Not to be confused with legibility, readability is a measurement of how easily text can be read and understood.
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.
- Responsive Design
A web design approach that tries to provide an optimal experience regardless of device (phone, table, computer) used to access the site.
User interface/User experience.
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.
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.
- Visual Design
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,
The World Wide Web Consortium is the international community of organizations that develop web standards; it is led by Tim Berners-Lee.
- Websafe Color
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.
- Web Widget
A design tool, wireframes provide a visual guide to a website framework and pages. See a beginner’s guide to wireframes.