Presentation layer

Front-end stack

From bare to flair! The presentation layer is where you set the style for your web site—the look-and-feel of your visitor's experience:

Your web site's presentation provides a first impression to visitors, gives them a sense of your integrity, sets the tone for how they will read your prose, and provides visceral clues in their evaluation of your offering. And different offerings require different presentation styles:

• Professional and trustworthy—for service oriented businesses.
• Commercial and sales oriented—for retail, industry, and consumer businesses.
• Heartfelt and honorable—for non-profit organizations.
• Informative and straightforward—for government agencies.
• Creative and stand-out—for the arts.

Go ahead, design your web site with flair; just make sure it fits your industry norm, because visitors expect government sites, to look like government sites!

CSS: Cascading Style Sheets

CSS is responsible for three distinct aspects of your website: graphic layout, typography, and color palettes.

• Graphic layout. Liquid or fixed layout - two, three or four columns - headers and footers - borders - knockouts.
• Typography. Type families - leading - letter spacing - vertical rhythm - readability - scanability.
• Color palettes. Complementary - analogous - monochromatic - split compound - warm or cool.

Declarative power

CSS is a declarative language: that is, it has no explicit logic or flow-control mechanisms. As such, the language is arguably one of the easiest computer languages to learn. But as your web site grows in complexity, the very simplicity of the language gives way to deceptively complex challenges. Being thoroughly organized from the outside is a requirement for keeping your web site's presentation pliable for as-yet-unspecified future design goals.

The language has three levels of application:

• Tags. Setting up the basic "global" settings for your web site starts with declaring typography, color and spacing for every block element in the HTML language: html, body, div, ul, ol, li, hr, h1, h2, h3, h4, h5, h6, pre, p, img, blockquote, fieldset, form, input; and setting up hyperlink styling for the clickable elements: a, img.
• Classes. When two or more elements share identical styling, a class can be declared and applied to those elements, thus allowing for "single point of change" iterative development, exploratory prototyping, and future maintenance.
• Elements. Individual elements of your web page are styled with just enough variation to make them stand apart from the the global settings.

Any HTML tag can be styled at any of these three declaration levels. When a tag's class name matches a CSS class rule, the underlying tag styles are overridden: the new attributes declared for the class taking precedence. And when a tag's identifier matches a CSS element rule, both the underlying tag styles and the underlying class rules are overridden. These overrides and precedence orders are the "cascading" part of the language.

Typography

One of the secrets to making a web site that holds your attention, is to make it a pleasure to read. "Reading pleasure" means much more than just telling a good story and writing with care; it means paying careful attention to type faces, letter spacing, leading, line width, margins, contrast, and all the other details that help your readers to loose themselves in your words.

Fortunately, the capabilities of CSS is fully up to this challenge, providing all—or nearly all—of the fine typography control you need. Unfortunately, font foundries—the creators and distributors of distinctive font faces—have not yet figured out a way to recapture their intellectual property investment, and as a result their legal copyright restrictions trump all technical considerations for using their beautiful fonts with CSS.

The consequence of this font foundry copyright dilemma, is that your web site visitors are limited to using the type faces that are already installed on their computer. And what are those font faces? Tough question. Every operating system (Windows, Mac, Linux) comes with its own collection of fonts, and every new version of those operating systems come with slightly different collections. On top of this, every application that a user installs (like office suites, creative suites, mapping packages, etc.) have yet another font collection.

With so many variables, your web site developers are seemingly faced with an unsolvable problem: having no guarantee exactly which font will be chosen by each the visitor's browser. And this is the genesis of the solution that has become known as the "font stack."

Font stacks

The idea behind font stacks is to build an if ... then ... else type of solution using the strictly declarative command set of CSS. For example, there are three font stacks employed on this web site—one for body text, one for headers, and one for preformatted code samples—which are defined like this:

body {font-family:Cambria,Georgia,'Times New Roman',serif;}
h1,h2,h3,h4,h5,h6 {font-family:Calibri,Arial,sans-serif;}
pre {font-family:Consolas,'Courier New',Courier,monospace;}                        
					

The first line, for the body would be interpreted by the visitor's browser like this:

If "Cambria" is installed (probably using Windows Vista)
    then use "Cambria"
else if "Georgia" is installed (probably using Windows XP or older)
    then use "Georgia"
else if "Times New Roman" is installed (probably using Mac)
    then use "Times New Roman"
else (probably using Linux)
    use any installed serif font.
					

Setting up font stacks requires careful attention to each typeface's characteristics to ensure that the size and proportion of the chosen fonts are comparable to each other. There are many discussions about this topic, on the Internet, that delve into the nuances and provide sample stacks for you to explore.