06 CSS3 Web Fonts


Fonts went from a handful to thousands seemingly overnight back in 2010. That was made possible by the introduction of @font-face in CSS3.

Embedded Web Fonts

The @font-face is a means to of linking to fonts on your server much like you would link to any other resource. The @font-face rule was actually part of CSS version 2.0 back in 1998, but it was dropped in CSS2.1, and is now back in CSS3, and as every browser supports them; its caught on like wildfire.

The real stumbling block was not the technology, but the licensing of fonts. Downloading an embedded font downloads the actual artwork itself, and font foundries were not about to give away their intellectual property. This was not a problem as long as fonts were served by the operating system that took care of the licensing.

CSS Code View

Time’s Up!

The time had come for the type foundries to figure a way out of the legal quagmire, for they were faced with the immanent release of CSS3 and @font-face, which would have opened up the floodgates to competing royalty free font services like Google Web Fonts. They, of course, found a way.

Just’n Time!

The most common manner in which type foundries control access to their font faces is by serving the fonts themselves. They do this in a number of ways. Linotype, the largest type foundry representing many thousands of fonts, runs fonts.com, a clearing house for a number of foundries.

The Good News

Thousands of their fonts are free to use below a certain threshold (25,000 hits per month). Once you set up an account, you create a project and can then select from many of their fonts, designating a selector that will link up the fonts to your document though a line of code that you put into your header. You can see the use of Smuts Clogged. They provide you with a line of code that you put into the header of your document. All that remains to be done is to create elements with an attribute that match the designated selectors, and their server takes care of the rest, in this case, Smutz Clogged for the header type and Century Gothic for the paragraph.

Another benefit is that these fonts are served up fast. After purging my cache in Safari, this page has 1020.61kb worth of fonts (compare that to 25.25kb for the document, 760.15kb for the stylesheets, 884b for the images and 375.62kb for the scripts, for a total page size of a 2.131mb) and yet the fonts took 1.93 seconds to load (compared that with 950ms for the document, 3.04s for the stylesheets. 1.85s for the images and 1.03s for the scripts, for a total of 4.82 seconds). As most of the CSS came from typekit.com, it may have contained a font as a stylesheet, but that speed is still impressive enough to not worry about the overhead of using interesting fonts.

The Bad News

The bad news really isn’t so bad. They place a fonts.com button on the side of your page. If you can live with that, you have world class fonts at your fingertips.

CSS Code View

Google Fonts

And then there is Google Web Fonts. There are only a few hundred fonts, not thousands, but that may get you close enough, and there is no button to put up with.

The library is growing very quickly, so expect that it will be a very robust source of web fonts in a few years. Google has created a very nice interface to try out your fonts and to style them, and it even lets you compile them into projects and you can bookmark them for later reference.

Wouldn’t you know it, but they even have a handy font previewer plugin for Chrome that lets you preview what a web page would look like in any one of their fonts, and generate the required code on the fly, so you can easily drop one of their fonts into your project.

CSS Code View

Adobe Edge Fonts

Adobe Edge Fonts is a free font service that provides access to a large library of fonts for your web site. Check out the useful Adobe Edge Previewer.

To use these fonts, add a JavaScript tag to the of your page, then reference a font-family in your stylesheet. There are currently about 500 font families to choose from. More if you pay.

The only downside is that Edge Fonts use Javascript, and nothing shows up when that’s turned off. Google fonts use CSS. CSS can also be turned off, but that is more rare, and you’d lose all styling.

Choice

There are other type foundries, such as TypeKit, which really pioneered the approach that commercial foundries now use, like Linotype above. They have since been bought up by Adobe. You have access to many of their fonts if you subscribe to the Adobe Cloud. For an additional subscription, you gain more fonts and more page views.

Too Few Fonts?

Some fonts come in many styles. This is an example of the eight different styles: light and light italic, regular and regular italic, medium and medium italic, bold and bold italic.

@font-face

Using @font-face requires two steps.

The first step shows the @font-face rules that connect the style sheet to the resources for three fonts. This is done in the same way that an image is linked. Download the font resource, put them in a folder, and link to them as demonstrated, using the @font property. Use font-family to determine the font name, which you will recall when you apply the font in the second step.

The second CSS Code View applies these fonts using font-family.

CSS Code View

CSS Code View

DIY @Font-Face

FontSquirrel provides the actual font resources so you can serve the fonts yourself using the @font-face. Instead of subscribing and letting the foundry serve your fonts, you download the fonts and make them available just as you would any other resource, like an image, for example. It comes as a package with font resources, a CSS style sheet and an example HTML file, so its easy to use and is pretty self explanatory.

Font Generator

FontSquirrel provides an online font generator as well, allowing you to turn your own hand-crafted fonts into the different web formats. This is a very powerful tool, just make sure that you obay all of the licensing issues so that you don’t step on anyone’s toes. This means that you could turn non-web fonts into web fonts as long as they provide a license for you to do so.

Other Foundries

There are other type foundries offering fonts for free and for a price, usually a yearly subscription fee, and I am sure that the number of fonts will grow: FontSpring, Exljbris, Typotheque, Font Shop, Webfonts.info.

What an embarrassment of riches after the starvation diet we lived on for so many years. Enjoy! The web is just waking up to this possibility, and its your for the taking. Visit Fonts in Use if you need more inspiration.

CSS Font Properties

Font Properties determine what the letterform of the character looks like. There are a number font properties that can be used individually (and many more waiting to be implemented by the browsers): font-style; font-variant; font-weight; font-size; line-height; font-family.

CSS Code View

These values are assigned by multiple individual properties.

The shorthand remains most popular font: , after which come values for the following properties in this exact order: font-style; font-variant; font-weight; font-size; line-height; font-family.

CSS Code View

These values are assigned by a single font shorthand property.

You add the values together with spaces, except for the font size/line height which has a slash, and the font-family, which separates the fonts with commas.

The line-height is to be specified along with the font size with a slash between, as in 1em/120%. Then comes the font family, which goes from the primary font to a backup font should the primary font be missing, to a generic serif or san-serif font if all else fails. Fonts with names of more than one word, like ‘Times New Roman’ require single or double quotations marks.

There are a number of peculiar conventions you have to observe: The family name has to come last, right before the size, and if you include the line height, you need to do that as shown, with a forward slash. Another anomaly is when you use a unit after the line height, it is a fixed value for inherited values. If you use no unit after the line height, the value is multiplied, and goes up and down with the size of the font in the children.

Complications when Sizing Fonts

The absolute way to set the size of a font is to set it in a fixed measurement, like pixels. Relative sizing of fonts is preferred, however, because of the flexibility in changing font sizes, and once upon a time, the ability to change the layout size, when the text and layout were not yet treated as one. Here is a demonstration where this flexible layout measurement based on the em runs into problems.

CSS Code View

A: parent of B.

B: parent of C/child of A.

C: parent of D/child of B.

D: Child of C.

These are four nested divs, with the text in each child being sized by 80%, or .8em, which is the same thing. Notice that this is cumulative, and that can cause problems keeping track of the font size when creating complicated layouts with multiple nested elements. Ideally you have a well defined hierarchy, where all the fonts are related in size, and this feature creates problems. What to do?

Recognizing this problem, CSS3 released the REM, a master flexible width, so to speak. Rem stand for root em, meaning a relative type unit that keeps its size based on the size defined for the root. Where the em unit is relative to its parent, meaning the type and the other elements kept getting smaller, the rem unit is relative to the root element, and keeps the same proportion, as demonstrated below.

CSS Code View

A: parent of B.

B: parent of C/child of A.

C: parent of D/child of B.

D: Child of C.

06 Typographic Resource

Google’s Font Knowledge Base

Google has produced a very thorough Font Knowledge repository as part of their font offerings. Please explore Google’s Font Knowledge Topics as they are comprehensive, organized, and add to the information presented here.

Thinking with Type

Thinking with Type is an in-depth and loving resource that goes well beyond the information contained here. letter (font), text, grid and extras. Get the book .

The Elements of Typographic Style

Robert Bringhurst’s The Elements of Typographic Style is a great resource —particularly the section called “Shaping the Page.” The power of modular scales are explained, how to build them, how they differ from grids, and how their flexibility can help us to strike a natural balance between typographic exactitude and educated improvisation.

Definitions

Students should be familiar with general typographic considerations during this unit. Many of you will have had typography. If not, its best that you go through these definitions and explanations taken from Monotype Imaging. Everyone should watch the the Don’t be Afraid video on Web Typography.

Typographic Checklist

In today’s digital world, most graphic designers find themselves doing their own typesetting. In pre-digital times, typesetting was a totally separate, highly specialized craft worthy of apprenticeship and years of practice in the pursuit of mastery. Modern technology offers robust design software with myriad typesetting features. These enable previously unimaginable ease, flexibility and creativity – but are not in themselves a guarantee of typographic proficiency. Along with the opportunities come complexities, nuances, and, occasionally, frustrations. A typographic checklist is a surprisingly simple and valuable way to ensure that your typesetting is both professional and appealing.

Download this typographic checklist PDF, print it out, and use it before you hand in your assignments.

A Number of Tips for Type on the Web
To be effective on a Web site, typography needs to be: clean, clear, appealing, and readable. Good typography can attract, engage, and keep your viewer on your site. Here are some tips to get you off on the right track.

Establish – and then follow – good typographic hierarchy.
Use titles and subheads to create emphasis and get your point across before a viewer gets bored and clicks out of a page or a site. Also try using bold and italic versions, color, and case (caps, lowercase, or mixed case) to reinforce/emphasize content priority and maintain good flow.
Beware of small type.
Type size is one of the most important factors when designing with type on the Web. Small type is hard to read at the lower resolution of most screens and monitors. Go larger rather than smaller to ensure optimal reading on all monitors, as well as on smaller screens: laptops, iPads, and hand-held devices.
Be careful when justifying text
Justified text can lead to bad spacing, including the dreaded rivers of white space. There are hyphenation options built inot CSS these days, so if you have to justify your text, make sure you hyphenate it as well. Otheriwse you could end up with some truly awful spacing if text is justified.
Keep rags clean
Do keep the line endings close together. Edit the content to make the rags look nice if you have to. That’s the way we did it in the old days. You can also hyphenate the text, both automatically or by using ­ to hypenate the text manually. Shy hyphens dissapear when line break change. Try to achieve balance without every other line sticking out.
Consider measure
Always put the measure in mind when putting text together. No, you don’t have to hunt for your ruler or tape measure. “Measure” is the term used to define the length of a line. If each line of text is longer than usual, readers will automatically have a hard time processing the message being sent across. Good measure is usually around 40 to 80 characters per line, including the spaces. If it’s just a single column, then 65 characters would be perfect.
A simple formula is to multiply the size of type by 30. Let’s say you’re using a 20-px type. Multiply it by 30, and your ideal measure would be 600px. With a font size of 20, you’ll still end up with just around 65 characters for a 600-px line.
Use smart punctuation
Smart punctuation including smart, or typographer’s quotes, as well as en and em dashes, rather than primes, double hyphens and other “dumb” typography. These professional typographic conventions are as appropriate on the Web as they are in print.
Support your text with images
Of course, you can’t just leave your text alone. Some graphical support will go a long way, especially if you want your readers to truly understand what you’re talking about in your text. Images will help them imagine what you’re explaining. It is a good way for you to bring in some emotion into your content.
You can create visual confusion by going overboard with gradients, shadows, and other special effects. Using them occasionally and wisely will go a long way toward emphasizing your type and creating pages that are engaging/attractive. Similarly, use a light hand with busy or cutesy icons buttons, and starbursts.
Create high contrast
Create high contrast between the color of the type and the background. Achieve this by selecting light, neutral backgrounds for darker type (and the reverse). Avoid placing type on a busy background, which can make it hard to read.
Build in plenty of “white” space
Even when the white space is not white, around your type as well as in the overall design. Crowding type (as well as other elements) can make a Web page less inviting, more difficult to read, and just plain confusing.

Typographic Concepts, Terms and Best Practices

Word Spacing

Determining the appropriate space between words in text type is more of an optical judgment call than an exact science. Several factors influence the decision, such as the overall width of a typestyle, the openness or tightness of the letter fit, the point size and, sometimes, even line spacing. A good starting point with text is to look at the width of the body of the lowercase ‘n’ or ‘o.’ Because word spacing should be proportionate with the typeface, wider designs require more space, and narrower ones require less. But don’t follow this guideline slavishly, as spacing might vary depending on the typeface and setting.

Word spacing in display type As type gets larger, its visual proportions change. Word spacing will occasionally look too open, especially if the typeface is intended for text settings. In addition, the word spacing often looks uneven due to the differing shapes of the characters surrounding the space. The best way to adjust the word spacing in display type is to use the kerning feature (yes, you can kern a space to a character!). This way you can customize each space depending on the characters surrounding it.

Finessing Typographic Details: Positioning Punctuation

Sometimes a subtle adjustment in a character’s position can make a big difference in the visual balance of your typesetting. Case in point: hyphens, en- and em-dashes, parentheses, braces and brackets will often look fine in lowercase settings but can appear too low when set next to caps and lining figures. The larger the setting (in headlines, for example), the more noticeable this will be.

Why is this? During the production process, the position of punctuation marks is determined by the lowercase x-height of the font, since that’s the context in which these characters will most often be used. Unfortunately, this leaves them a little “depressed” when used within ALL CAP settings or with lining figures (keep an eye out for low-riding parentheses and hyphens in phone numbers, for example).

What to do about it? Use the baseline/shift feature of your layout program to slightly raise the offending character until it’s optically centered against the caps or lining figures.

Good Text Face Characteristics
What makes a good text typeface?

What makes a typeface good? With over 45,000 fonts on the market for print, and hundreds for use on the web, every designer should be asking this question – and learning how to answer it. Although some of the identifying characteristics of a good typeface are universal, others vary depending on whether the face is intended for text or display applications. This month we’ll discuss what makes a text typeface worth using.

Consistent design characteristics

A good text typeface will have consistent design characteristics throughout its full complement of characters. Check for consistency in cap and x-heights (including the overhangs of curved characters), character width, stroke width, ascenders, descenders, serif details (if any), as well as the individual nuances and idiosyncrasies of the design. Related fonts in a family should be similar in spirit, if not in actual design.

Legibility

Legibility is especially important in text typefaces, which are usually used at smaller sizes and for greater amounts of copy. Simply put, the legibility of a typeface is the ease with which it can be read. Legibility is a quality of the actual design of the typeface (as opposed to how the type is set). Factors which affect legibility include weight, character shapes, ascender and descender length, size of counters, stroke contrast, and character width.

Spacing

A typeface that is well-spaced looks neither too tight nor too open. Most importantly, it has even spacing overall between characters throughout the design (see kerning below for exceptions). NOTE: Those “free” fonts that you can find on the Internet are notorious for poor spacing, and are generally unsuitable for professional use.

Kerning

Even a typeface that is properly spaced will have specific character combinations that are too open or too tight (although a well-spaced design will have fewer of these than a more carelessly designed one). These awkward pairs can be improved with kerning, which is the addition or reduction of space between a particular combination of characters. High-quality typefaces have built-in kern pairs, which enhance an already well-drawn design.

Even color and texture

Even color and texture is probably the most important quality of a good text typeface. It’s the consequence of all of the above factors (a consistent and legible design, with good letter-spacing and built-in kerning) plus proper word spacing. You can tell that word spacing is correct when the typeface can be read easily, without the words either running together or getting separated by blocks of white space that interrupt the color and overall readability of the design. Clearly, there’s more to type design than the actual shapes of the characters. As you get in the habit of paying attention to these characteristics, your eye will get sharper. Soon, you’ll easily distinguish a well-designed text typeface from one that’s not worth your time and money.

Good Display Face Characteristics
The purpose of display type is first, to attract the reader’s attention, and second, to draw that reader into the text. To pull off this feat you need more than a good typeface – it has to be a good display typeface. Once you’ve chosen your type, you’ll still have to set your display text properly to maximize its effectiveness. The same typeface can have a markedly different “feel” and appearance when set at different sizes. That’s why, before selecting a typeface for display use, you should evaluate it at the size you’ll be using it. Here’s what to look for when choosing a display design. We’ll also discuss what simple adjustments you can make when setting your type that will help your display copy look and function at its best.

Design characteristics

A good display typeface should have a distinct, assertive personality. Whether it’s a decorative design with a flamboyant attitude (the “life of the party”), or a simple bold sans with minimal embellishments (the “strong, silent” type), a good display design makes a powerful and specific first impression. Consistency of design still matters in display faces. However, display applications may only consist of a few words or sentences. What’s more important than overall consistency is that the characters you’ll actually use in the headline look good and work well together to express the tone of the piece.

Legibility

Legibility in a display setting is only as important as your design objectives need it to be. This is a big difference between text and display settings. Think about it, though: smaller amounts of copy set at larger sizes make fewer demands on the reader. When choosing a display type, go for impact and expressiveness, rather than legibility alone.

Letter spacing

As type gets larger, the letter spacing tends to look more open. A typeface that was designed for display sizes might not need much in the way of letter spacing adjustments. However, if you’re working in large sizes with a typeface that was primarily intended for text, the letter spacing will probably appear too open. The solution? Use your design application’s tracking feature to tighten the letter spacing.

Word spacing

Like the space between letters, the space between words gets to be “too much” as type size scales upward. Reducing excess word spacing improves appearance and readability. How much is enough? Leave enough space to create a separation between the words but not enough to create gaping white holes. This can most easily be accomplished by reverse kerning (yes, you can kern a space to a character!). The H&J (or justification) feature of your design software will let you make this adjustment as well.

Kerning

Kerning also changes with scale. A letter pair that seems perfectly kerned at a smaller size might look unbalanced and uneven when set larger. The bad news is that clumsy letter pairs will be all the more obvious at large sizes. The good news is, since there are fewer words in a headline setting, it’s easy to add your own custom kerns. Always look your display text over carefully and adjust any uneven combinations.

By choosing your display face carefully and then making the necessary adjustments to letter spacing, word spacing and kerning, you’ll be on your way to creating strong, effective display copy that will get your piece noticed.

Fine Typography Resource

Twenty-nine articles on Fine Typography. The difference between “just okay” typography and professional-level typography is usually in the details – like hyphenation. From fonts.com.

Hyphenation

Proper hyphenation is essential for optimum readability and getting your message across.

Hyphenated words are sometimes considered a necessary evil in typography but proper hyphenation allows for a better-looking, tighter *rag – or, in the case of justified type, a more natural, even text color. Hyphenation also allows more words to be fit in a line, which saves space. Hyphenation is a CSS3 specification, and it is being implemented, otherwise, there are other solutions like Google’s hyphenator.js automatically hyphenates texts on websites if either the webdeveloper has included the script on the website or you use it as a bookmarklet on any site. It runs on any modern browser that supports JavaScript and the soft hyphen (­). It automatically breaks URLs on any browser that supports the zero width space, and supports CSS3-hyphenation.

Hyphens, En-dashes and Em-dashes

Hyphens, en-dashes and em-dashes are frequently used punctuation marks that are just as frequently misunderstood. All three marks are essentially horizontal lines, though their lengths vary (as do, occasionally, their designs). However, these three different marks have very different purposes, and using a hyphen to do an m-dash’s job is just as much of a punctuation error as using a question mark in place of a comma.

  • A hyphen is the shortest in length of the three. It is used to divide words that break at the end of a line, or to connect parts of compound words such as go-between, ill-fated and run-of-the-mill. The hyphen is easily found on the keyboard to the right of the zero.
  • An em-dash is the longest of the three, and is used to indicate a break in thought — as illustrated in this sentence. It can also be used to separate a thought within a sentence — such as this one — which would then require an em-dash at the beginning and the end of the phrase.
  • The en-dash, which is shorter than an em-dash and longer than a hyphen, is used to indicate a range of values, such as a span of time or numerical quantities (similar to using the words “to” and “from”); for example, 9 AM – 5 PM, Monday – Friday or ages 5 – 8.
Type Sizes
What’s the point of a point system in which 24 points doesn’t always equal 24 points? It’s not pointless but it does require some explanation!

What are points?

The point system is the standard unit of measurement for type. It originated centuries ago, when points referred to the size of the metal body that accommodated each character. Since each size of a typeface had to be cut individually, point size was determined by the distance from the height of the tallest ascender to the tip of the longest descender, plus a wee bit more.

The point system is still used today, although in digital type the original determining factors (ascenders and descenders) are not strictly adhered to. In print, 72 points equals about an inch. Does it then follow that all fonts set in 72 point look alike in size? Absolutely not! Here’s why: the actual appearance of a typeface at a particular size varies with the size of its ascenders, descenders and x-height. Therefore, a design with a tall x-height and/or short ascenders and descenders will usually look larger than one with opposite traits.

Choosing a point size

Because point size doesn’t tell you everything about how big a particular typeface will actually look, select type size optically. That is, let your eye guide you, not the numerical value of the font. Repeat the optical decision-making process every time you change typefaces, whether it’s for subheads, captions, lengthy quoted passages, or another reason. This is especially important in text sizes, where readability is strongly determined by point size.

Visual Alignment

Designers are used to being detail-oriented and mathematically precise, nudging things a point this way and a pixel that way until technical perfection is achieved. However, when it comes to typographic alignment, the mathematical approach to design doesn’t apply: it’s all in the eye of the beholder.

Visual alignment (also called optical alignment) means exactly that: using that high-tech tool, the human eye, to line up your text until it looks right.

Vertical alignment

Many designers are surprised to discover that using numerically consistent leading (or line spacing) does not assure visually consistent vertical spacing between lines of type. This is typically an issue when setting three or more lines of display type.

For example, if a line of type is all caps, it has no descenders. This creates more white space below it. An all caps line also has a taller height than lines with mostly lowercase characters, creating less white space above it. This is a perfect example of the need for visual alignment: adjust the spacing above and below all cap lines until it looks right, regardless of what the numbers say.

Similarly, in cases where lines with lots of ascenders and/or descenders are preceded or followed by lines with few or no ascenders and descenders, the lines will appear to have varying spacing even if the leading is exactly the same. Use visual alignment to adjust the leading between the lines until they look equidistant from each other.

Horizontal alignment

Visually “off” horizontal alignment can happen in both text and display type and is most easily apparent in flush left, flush right or justified copy. Why? Your computer aligns characters (including punctuation, figures and symbols) by the edge of the character plus its sidebearing (that’s the built-in space that surrounds a letter and is actually part of its design). The spacing of certain characters, such as a cap T or A or the numeral 1, as well as periods, commas, apostrophes, dashes and quotations marks, create a visual hole or indentation in the beginning or end of a line relative to the characters above and below.

This problem is most noticeable in larger settings such as headlines, subheads and initial letters. To solve it, move the line in or out until it visually aligns. (Depending upon your software, there are various ways to do this.) It’s helpful to look at your text from a slight distance when correcting problems, since it can be difficult to know how much of an adjustment is enough. When in doubt, less is more. Don’t try to adjust small-sized type or large blocks of text; it’s too time-consuming and the results are barely visible at text sizes.

Type And Color

When you think of type, what colors come to mind? Black type on white paper, right? It’s true that much of our daily contact with type is in books, newspapers and magazines, in which text is predominantly set in black ink on white (or light-colored) paper. Black type against a light background is the easiest combination to read. It’s also the least expensive to print. But don’t assume color and type don’t mix; on the contrary, color used well can add focus and energy to your message.

Why Use Color?

Color and typography work together in many ways. Color can attract attention to an element, help emphasize, contrast and organize content, reinforce impact and recognition, create a mood, strengthen an identity and even assist readability. Color and type interact dynamically in logos, packaging and product design, movie and video titles and credits, greeting cards, book covers, CDs and posters. Color can be critical in establishing powerful corporate identities and product branding.

The Internet has added another new dimension to the use of color and typography. Web sites aim to attract your attention quickly and keep it as long as possible, and color is a powerful tool for achieving this.

Succeeding With Color

Think of color as an accessory to a basic wardrobe, something to enhance an already strong foundation. Many designers actually design in black and white first, then add color as a separate step.

Readability should be your primary consideration when combining type and color. Contrast is the key: maintaining a high degree of contrast between type and background colors helps keep type readable, while reducing contrast reduces ease of reading.

Here are a few DOs and DON’Ts to help you make successful color choices:

  • DON’T tint type that has thin strokes.
  • DON’T drop out or reverse type that has very thin strokes.
  • DON’T set lengthy amounts of text on colored, tinted, or black backgrounds.
  • DO consider how web color will appear on all monitors.
  • DO maintain high contrast for optimal readability in all media (print and web).

While not a requirement for good typography, color is a fun, eye-catching element that can make a good design even better. The key is to use it tastefully and appropriately – as in all things typographic!

Smart Quotes
Smart quotes are usually curved in shape and have different opening and closing versions for use at the beginning and end of quoted material, respectively. Dumb (or straight) quotes are usually simple tapered vertical or angled marks. These are also referred to as “primes,” and should be used in numerical measurements to indicate inches (a double prime) and feet (a single prime). If you are using ascii to display your page, you need to supply the code, which is “ for the left double quote and ” for the right..

Apostrophes

Last but not least, don’t forget the apostrophes! Typographically speaking, an apostrophe is a closed single smart quote. Make sure to replace straight apostrophes with their smarter, curly cousins, code &risqué;

Rags, Widows & Orphans
Spacing and Kerning, Part 1

What makes a typeface look the way it does? The design of the letter shapes is a primary factor but it’s by no means the only one. The spacing of a font has a large impact on how it looks when set, and should be a consideration when choosing and using a typeface.

Spacing

When we talk about a font’s spacing, or letter fit, we’re referring to the amount of space between the characters, which in turn gives the typeface its relative openness or tightness. A font’s spacing is initially determined by the manufacturer or designer and is somewhat size-dependent. Text designs tend to be spaced more openly than display faces. The reason? The smaller the point size, the more space is needed between letters to keep the characters legible. Conversely, as a typeface is set larger, a snugger fit between letters creates word-shapes that are easier to read.

Although spacing is dictated by personal taste as well as typographic trends (for example, seventies typefaces were fit more tightly than today’s fonts), the goal of good letter fit remains the same: to create even “color,” or visual texture, between all character combinations. It’s more difficult than it might seem, since the irregular shapes of many characters create some problematic letter combinations. This is where kerning comes to the rescue…

Kerning

Kerning refers to the adjustment of space between two specific characters, thus the term kerning pair. Most often, kerning implies a reduction of space but it can also mean the addition of space. Kern pairs are created to improve the spacing between two letters when the normal spacing is less than ideal. A perfect example is the spacing between a cap ‘A’ and ‘V.’ Typically, both ‘A’ and ‘V’ would be spaced so the terminals of their diagonal strokes nearly touch the vertical stroke in the adjacent letter, like an ‘H.’ When a ‘A’ and ‘V’ are set next to each other, however, the spacing looks too open. Kerning adjusts the spacing to be optically correct.

Most fonts have between two hundred and five hundred built-in kern pairs. A high-quality font may have over a thousand kern pairs.

My font needs help!

If you have a favorite font but the spacing or kerning leaves something to be desired, don’t despair: you can do something about it. Today’s robust design programs have advanced type handling features that can make vast improvements to your typography

Spacing and Kerning, Part 2

Spacing (and tracking)

Fonts are spaced and kerned to look their best at certain sizes but you might choose to set type that’s much smaller or larger. If the built-in spacing is not ideal for the way you use the font, try opening or closing the tracking. This will add or reduce the overall letter spacing in a selected block of text.

Tracking can be modified in design programs such as QuarkXPressâ„¢ by changing the “tracking value,” and in Adobe® Illustrator® by changing “desired letter spacing” in the Paragraph palette.

Kerning

The goal of kerning is to adjust the spacing between two characters that appear too open or too tight. Before you make any kerning adjustments in your document, make sure that kerning is turned on in the type preferences menu of your page-layout program. Note: Most word processing programs, as opposed to page-layout or design programs, don’t read kern pairs. If your goal is professional-looking type, invest in one of the more sophisticated page-layout applications.

Any serious design program has the capability of adjusting kerning manually (one pair at a time) in each document. There are often keyboard shortcuts for these functions, which are helpful when you’re making many adjustments.

In most cases, the kern changes you make apply only to the pair of letters you have highlighted, not the entire font. To keep your document consistent, don’t forget to search for all instances of that letter combination and kern them also. This is most important in headlines, where variances are obvious. Due to the difficulty of maintaining consistency, kerning large blocks of text should be kept to a minimum.

Learning to properly space and kern a font takes time, patience, and an experienced eye. A good rule of thumb is the old adage: “less is more.” Be conservative until you get the hang of it.

Emphasis: Italics and Boldface

Italics and Obliques

True-drawn italics (the ones that are an actual font, not just a computer-generated style) are angled typefaces, usually designed as adjuncts to a roman (or straight-up-and-down) design. Italics are usually quite distinct from their companion romans; they may have different design features and character widths, and often appear more calligraphic in style.

True-drawn obliques (again, not to be confused with computer-generated italics) are slanted versions of their roman companions, with few or no design changes. Both obliques and italics are used for emphasis in roman body text but obliques offer much less contrast. While italics speak softly, obliques whisper.

Italics and obliques draw attention without making a major change in the color of the text. They’re ideal for creating subtle emphasis of words or phrases. Italics and obliques are also used to set off the titles of books, films, newspapers and periodicals, as well as foreign phrases. For maximum readability, use the same weight italic and roman (i.e: Book and Book Italic, not Book and Medium Italic). However, if a dramatic contrast is desired, try jumping two weights between roman and italic.

Boldface (or weight contrast) Boldface creates emphasis by contrasting lighter and heavier weights of the same typeface. Boldface is often used for captions, subheads and stand-alone words and phrases. Use boldface sparingly within text, and only where a strong emphasis is desired, because it creates a harsh visual interruption.

When setting boldface text with a typeface family that has gradual weight changes, try to jump at least two weights to create a meaningful contrast. A too-small weight contrast is ineffective and may even look like a mistake.

Justified Type
We’ve all seen newspapers, books, magazine articles and ads which use justified type; that is, type that is flush on both the left and right margins. Used well, justified type can look clean and classy. When it’s carelessly set, however, justified type can make your text look distorted and hard to read. Proper justification is a tricky technique to master but it’s well worth the effort if high quality, professional-looking typography is your goal.

When type is justified, space is inserted between words and letters to expand a short line so that both margins align; conversely, in longer lines the space between words and characters is reduced to make them fit the margins. Some page layout applications have settings that will actually compress or expand the individual characters; don’t use these settings to justify text! This is the ultimate typographic taboo.

Too much additional space can create gaping holes between words, as well as rivers of white space flowing down your text. Too much compression makes type look cramped and squished, especially when compared to adjacent, generously spaced lines. All of this manipulation can severely degrade the color, texture and readability of your type.

With so many potential pitfalls, the wise designer will refrain from using justified type unless there’s a compelling reason to do so, and only when he or she has the time and flexibility to fine-tune the text.

Here are some tips for achieving smooth, readable justification:

  • The more words that fit on a line, the fewer problems you’ll have. Achieve this by making the line length a bit longer, or by reducing the point size of your type, even if only by a fraction.
  • If necessary, edit the text itself to fix lines that are too open or too tight. Try to reduce the number of lines with hyphenated endings, particularly if there are more than two in a row. It’s always possible to substitute short words for longer ones or trim convoluted sentences–your copywriter may welcome the chance to improve the writing, as well as the design!
  • Become familiar with your software’s hyphenation and justification (H&J) settings. You can usually adjust the word and character spacing parameters, as well as hyphenation preferences.
Creative Indents

Indenting the first line of every paragraph is a habit most of us acquired in grammar school. However, for those daring souls who have always insisted on coloring outside the lines, it’s time to consider using a different style paragraph indent. There are more options than you might have realized!

The purpose of an indent is to create a visual separation between paragraphs. The most commonly used indent is the first line indent. There’s no hard-and-fast rule about how much to indent your first lines but make sure the space is proportionate to the size and column width of your text. Feel free to omit the indent from the first paragraph, since there is no need to separate the beginning of the copy from anything else.

If you have lots of space and lots of copy, try a hanging indent, or outdent. This dramatic technique is actually the opposite of an indent, in that the first line extends out to the left of the paragraph. It’s a useful trick to liven up body text, especially when there are few or no graphic elements, such as photographs or illustrations.

For small amounts of copy, try something more decorative: use a dingbat or any simple graphic element to separate the paragraphs. Do this in one of two ways: either run the paragraphs into each other with only the dingbat (and added space around it) separating them, or place a dingbat between two paragraphs which are separated by a line space.

When you have room to spare and want a cleaner, more open look, separate the paragraphs with an extra line space instead of an indent. This style is often used in correspondence, and works well in long blocks of text when saving space is not a consideration.

It’s About Legibility
Typographic clarity comes in two flavors: legibility and readability. What’s the difference? Legibility is a function of typeface design. It’s an informal measure of how easy it is to distinguish one letter from another in a particular typeface. Readability, on the other hand, is dependent upon how the typeface is used. Readability is about typography. It is a gauge of how easily words, phrases and copy can be read.

Type For The Web
Are there fonts which are better than others to overcome the drawbacks of low screen resolution? Are there fonts ideally suited to creating dynamic web graphics? You bet!

Scripts: A Type of Passion
Most typefaces, however beautiful or well-drawn, add merely the subtlest nuance to the words they compose. Scripts, on the other hand, bring something dramatic to typeset copy. Scripts are emotional, lyrical, even passionate communicators. Words that are set in script faces make an impact far greater than their literal meaning could convey.

Typefaces in digital format
With the advent of desktop publishing, type design and manufacturing entered a new era. Learn all about digital type.

WGL Fonts
WGL fonts contain a pan-European character set that supports Western, Central and Eastern European languages.

Font Glossary
An alphabetical glossary of typographic tems.

Anatomy of a Character
How do you tell one typeface from another? If you’re trying to distinguish Helvetica from Times Roman, the difference is obvious. In other cases the differences can be subtle and difficult for the less–experienced eye to see.

Small Caps

This little gem explains the novelties of “true-drawn” small caps and why they’re often a better solution than all caps.

Oldstyle Figures
Oldstyle figures are a style of numeral which approximate lowercase letterforms by having an x-height and varying ascenders and descenders. They are considerably different from the more common “lining” (or “aligning”) figures which are all-cap height and typically monospaced in text faces so that they line up vertically on charts. Oldstyle figures have more of a traditional, classic look. They are only available for certain typefaces, sometimes as the regular numerals in a font but more often within a supplementary or expert font. The figures are proportionately spaced, eliminating the white spaces that result from monospaced lining figures, especially around the numeral one.

Initial Letters
An initial letter (or initial cap, as they are also called) is an enlarged letter that is used as the first character of a paragraph. It can sit above, below, to the left of, or even behind the body text, and can be set in a contrasting weight, style or color.

09 background image strategy

Beyond the standard inclusion of images, few websites rely on illustration or photography to drive the design. That provides illustrators and photographers an opportunity to integrate their art into the design and user experience. Incorporating images will develop a signature look that is unique and stands out.

Designing with Pictures

illustration

The most common approach for a photographer or illustrator is to place one large illustration on a page with a few links. The illustration may attr attention, yes, but the objective here is to sell something other than the artwork.

illustration
illustration
illustration

Good web design has to be much more flexible than one large image. Flexibility is gained by breaking the illustration(s) into modular parts. Use these parts in the background of layout elements.

Take a store front design. This is the kind of illustration that can easily be divided up into a classic three column layout with a header.

Great! Then all you have to do is create areas in each column for the content. The menu could go into the header and the two windows and the door could contain all kinds of products.

Or is it that great? What happens if there’s more text than can easily fit into the required space? Is the design flexible enough to adapt to the additional content?

Is the design responsive? What happens to the design if it is seen on an iPhone or a 30inch monitor?

A single picture quickly feels like it’s not flexible. Being flexible is a key component of web design. Design with this flexibility in mind. Use your illustrations or photographs in a more modular fashion.

Attaching the art to the background

CSS Code View

The first step is to place your image in the background. That’s simple enough! Use the background property and specify the URL() as in the h2 above that’s targeted by this demonstration. It uses the illustration at the top of the page. Change the padding on the top and bottom to show more of the image. Move the image around by changing the x and y positions or use left, center, right, top, center and bottom keywords. Ad in the same image more than one. The second image is positioned so the bottom of the illustration shows up on top of the header.

Careful with how you write the CSS because it’s not tolerant of mistakes. If it turns out that you are not able to see your image, simplify the code till you see it working, and then add in the x and y positioning properties. One misplaced character and the background disappears.

Sprites

Once you become familiar with placing background images, it’s easy to imagine that you’ll do it often, for no other reason that to include all the social media icons.

It turns out that the penalty for initiating the connection that retrieves each image from the server is often greater than the penalty it takes to actually retrieve the image. If you have a lot of images, it’s recommended to turn them all into a sprite. This means to combine them into one file, with enough empty space around each picture, and to call them up by using the x and y coordinates.

This would be a cumbersome if it were not for Sprite Cow (and similar web applications). We used it earlier in the article on Styling the Navigation. It provides you with the coordinates and the size for each picture within the page of pictures, and this is then called a sprite.

If your images are small, you can use the 24bit PNG format, which includes a nice alpha channel that allows you to layer background images on top of one another. The size of 24bit PNG images grow pretty quickly, however, and if you are not going to layer the images, use JPEG compression. The “Pick Background” button in Sprite Cow will isolate the background. Use proper technique to prepare the images.

After placing all of your images in photoshop in separate layers, save each layer as a file for the web. Load it into Sprite Cow. Click on each image. If several images belong to one sprite, drag the pointer to select them all.

The code for the sprite appears at the bottom left-hand side. Copy this code and paste it into your stylesheet, update the location of the image, and you have a background sprite ready to use in the layout. Do this for each sprite. Ganging up many pictures into one image saves on the time it takes to load all of the pictures individually.

Using Background Images

A layout can be thought of as boxes stacked one on the other, and then, however, many to the right of one another. This down and across movement is how to build out the layout of the web page in the word processor-like environment of the default document flow.

Chances are the layout is developed in Photoshop or Illustrator, where it’s easy enough to figure out where the boxes should be to hold the graphics, text and other design elements. Develop those boxes first, and that becomes your wireframe. Plugging in your picture, or multiple pictures are then as easy as assigning the code produced by Sprite Cow to any box.

Adapting Background Images for Responsive Layouts

Working with sprites is all great when working on a single layout, but what about responsive layouts? This can be a little more complicated. Responsive design means that you have to develop several photoshop comps to represent what the web page will look like on the iPhone or Android and tablet, where it can appear either horizontally or vertically, or a small to large computer monitors, which tend to stay horizontal.

The great thing bout background images is that they can change depending on the device targeted. Create a layout for each device. That way the mobile device does not attempt to download huge images.

Changing the background image is easy enough, using the CSS property background-size: 66%; for the vertical and background-size: 100%; for the horizontal layout. But this means that the entire sprite is sized, and the original coordinates need to be multiplied by 1.5 to locate the image on the sprite.

One way to make this easier is to place the images on a grid of even intervals so the coordinates can be easily multiplied. If each image is on a grid of 300 pixels, it’s easier to calculate this difference.

05 Building a Website

Week 5
9/25

Complete the Web Site. Styling navigation, site architecture, optimize site for search engines and implement Google Analytics to track users. Activity: Build website using HTML5 Boilerplate. Activity: Style navigation links. Activity: Open a Google Analytics account and apply the code to your web pages.

Homework

Develop your portfolio website. Read chapter 13. The Midterm Assignment is Due: Next week for review and midterm evaluation. Have it ready for in-class presentation two weeks from now.

Questions from Last Weeks Class or Homework?

QUIZ Next Week testing comprehension of CSS Layout Strategies.

Goals

The goals of this unit are to:

  • Be acquainted with information architecture (AI)
  • Create menus using lists and rollovers
  • Incorporate SEO into web page design.
  • Effectively troubleshoot documents.
  • Extoll the role of typography in communication and design.
  • Understand the basic rules of Typography.
  • Introduce embedded web fonts.
  • Be able to work the text and fonts in CSS.
  • To be inspired to push the Typographic boundaries in creating your own work.

    Outcomes

    At the end of this unit, students will have:

  • Created a menu using lists and image rollovers.
  • Can Optimize a web site for search engines.
  • Use HTML5 Boilerplate for your own website.
  • Troubleshoot a document when you get stuck.
  • A working knowledge of typography for use on the web
  • Access the many web fonts available
  • The ability to set type rather than rely on defaults.
  • Be conscious of what makes type legible.
  • know how to follow the rules, and when to break them for effect.
  • Find inspiration in Carson discussing his work.
  • A working knowledge of typography for use on the web
  • Access the many web fonts available
  • The ability to set type rather than rely on the defaults.
  • Be conscious of what makes type legible.
  • know how to follow the rules, and when to break them for effect.
  • Be inspired by Carson discussing his work.

Materials

Additional materials for this unit can be found by following these links (30 pages):

Step-by-Step

20 Review homework and answer questions.
10 Lecture: Information Architecture (IA)

55 Demo: Styling the Navigation
10 Break
15 Lecture: Search Engine Optimization
15 Demo: Google Analytics
20 Demo: The HTML5 Boilerplate (Watch the Video)
10 Demo: Print Style Sheet and 404 Page.
10 Lecture:Trouble Shooting
10 Demo:Adobe Browser Lab and video explanation (you need to sign up to use it)

Definitions

These are the terms that participants should be familiar with during this unit:

404 Page

The 404 or Not Found error message is aHTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested. The web site hosting server will typically generate “404 – Not Found” web page, when a user attempts to follow a broken or dead link, hence the 404 error is one of the most recognizable errors users can find on the web.

Information Architecture

Information architecture (IA) is the art of expressing a model or concept of information used in activities that require explicit details of complex systems. Among these activities are library systems, Content Management Systems, web development, user interactions, database development, programming, technical writing, enterprise architecture, and critical system software design. Information architecture has somewhat different meanings in these different branches of IS or IT architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling websites, intranets, and online communities, and ways of bringing the principles of design and architecture to the digital landscape.

User Interface design

User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to support its usability. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.

Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design, user research, web design, or industrial design.

Principles of User Interface Design

Principles of User Interface Design are intended to improve the quality of user interface design. These principles are:

  • The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.
  • The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.
  • The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with alternatives or confuse with unneeded information.
  • The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
  • The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.
  • The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

05 Google Analytics

Google Analytics is a free service offered by Google that generates detailed statistics about the visitors to a website. Google Analytics gives you rich insights into your website traffic and marketing effectiveness.

How It Works

You add a JavaScript snippet onto every page of your website. This code collects individual visitor’s publicly available data, like which ISP they use and what kind of machine and browser, how long they stay on your site, which page they landed on, how they got there, etc., and sends it back to Google data collection servers for processing. It also sets a cookie on each visitor’s computer used to store anonymous information such as whether the visitor has been to the site before (new or returning visitor), what is the timestamp of the current visit and what was the referrer site or campaign the visitor came from e.g. search engine, keywords, banner or email.

Google Analytics does not work if the user disables its cookies.

Sign Up

Signup to Google Analytics using your Google account. You will need your Website’s URL to create an account.

Page Tag

Once you sign up, you will receive a javascript snippet to put at the bottom of each page on your site that will do all of the work. Do not copy this one, as each page tag is site specific, and you have to sign up to get your own. You will already have this set up in the HTML5 Boilerplate. All you need is the account number (highlighted in yellow).

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 
    'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 
    'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();

</script>

Paste the code right above the closing </head> tag.

The DashBoard

Once you have signed up, and have inserted the page tag at the bottom of each of your web pages, you can watch how many visitors come your way (there is a 12 hour delay, or so). The program was originally developed to track ads, but it can do a lot more than just look at who is visiting your site. You can use the service to see which pages perform and are catching the users’ attention, and which pages do not, allowing you to optimize the web site according to real world usage feedback.

google analytics pictureTo make it easier, Google Analytics has a dashboard to see the most pertinent statistics like site usage, visitor information and where they came from.

You can track if the visitor is new or returning, how long they spend on each page or the site as a whole, what browser they are using, who their provider is, which page they enter and exit and from where they came from, and if a search engine was used, which one and what the search query was.

You can tell what language does the visitor uses and their country of origin. Check out the list of keywords and drill down to see how effective they are. With the interactive In-Page Analytics, you can see the statistics as they relate to individual pages of your website.

It is possible to isolate and analyze subsets of your traffic, and compare segment performance side by side in reports. You can save reports that present the information you want, and it even tracks changes in usage data patterns, but all of that is beyond the scope of this introduction.

Google Analytics is a great tool and needs to be explored in depth by everyone creating web sites. Though Google is ubiquitous, there are alternatives, like Woopra or Piwik. Microsoft has a somewhat similar service.

05 Search Engine Optimization (SEO)

Your best chance of gaining top honors in google’s site ranking is creating a high quality web site. In a Google Search release for the panda algorithm, Google provided guiding questions that helped them shape how their search engine should work. It’s only logical that these questions also work as a guide to how to built the web site that ranks well in the first place. Here are those questions:

  • Would you trust the information presented in this article?
  • Is this article written by an expert or enthusiast who knows the topic well, or is it more shallow in nature?
  • Does the site have duplicate, overlapping, or redundant articles on the same or similar topics with slightly different keyword variations?
  • Would you be comfortable giving your credit card information to this site?
  • Does this article have spelling, stylistic, or factual errors?
  • Are the topics driven by genuine interests of readers of the site, or does the site generate content by attempting to guess what might rank well in search engines?
  • Does the article provide original content or information, original reporting, original research, or original analysis?
  • Does the page provide substantial value when compared to other pages in search results?
  • How much quality control is done on content?
  • Does the article describe both sides of a story?
  • Is the site a recognized authority on its topic?
  • Is the content mass-produced by or outsourced to a large number of creators, or spread across a large network of sites, so that individual pages or sites don’t get as much attention or care?
  • Was the article edited well, or does it appear sloppy or hastily produced?
  • For a health related query, would you trust information from this site?
  • Would you recognize this site as an authoritative source when mentioned by name?
  • Does this article provide a complete or comprehensive description of the topic?
  • Does this article contain insightful analysis or interesting information that is beyond obvious?
  • Is this the sort of page you’d want to bookmark, share with a friend, or recommend?
  • Does this article have an excessive amount of ads that distract from or interfere with the main content?
  • Would you expect to see this article in a printed magazine, encyclopedia or book?
  • Are the articles short, unsubstantial, or otherwise lacking in helpful specifics?
  • Are the pages produced with great care and attention to detail vs. less attention to detail?
  • Would users complain when they see pages from this site?

Now you know what Google thinks a quality site is. Most of the questions have to do with the copy, and not the pictures. Though search engines are not completely blind to pictures, they do not evaluate your fabulous pictures and designs. Take that into account and judiciously use the alt attribute to translate pictures into words.

Submit Your Site To Google, Yahoo and Bing

    Submit it to search engine tool:

  • Google with 90% market share in 2020.
  • Bing with 7% market share in 2020.
  • Yahoo with 2% market share in 2020..
  • Yandex in Russia.
  • Baidu in China.

Current Web Analytics (world)

How Search Engines Work

The search bots crawl links, essentially discovering the link structure of the web that binds all pages. The search engine then analyses the code and stores selected pieces of the pages in massive hard drives, to be recalled when you make a search.

The search engine does two things for the user: it returns only those results that are relevant or useful and ranks those results in order of importance, usually according to popularity.

Search Engine Optimization

The best advice that Google gives is to build the web page in a standards complient and semantically correct way. Search Engine optimization, or SEO means to build web pages so they are optimally structured for search engines.

Indexable content: Search Robots used to only read text. IT is still a good idea for non-text items to have detailed descriptions, as in alt attribute for pictures, descriptions for Flash and Java plug-ins and video files should have transcripts between the audio and video tags. Search engines also need to access the crawlable link structure to find all of the pages on a website.

Video Ranking Factors

Keywords

Keywords used to be the building blocks of SEO. Iit is no longer the case that all search is based on keywords. As the engines crawl and index the contents of pages around the web, they keep track of those pages in keyword-based indices. Search engines have millions and millions of small databases, each centered on a particular keyword term or phrase. This makes it possible for the engines to retrieve the data they need in a mere fraction of a second.

Though keyword usage and targeting are only part of the search engines’ ranking algorithms, effective keyword usage will go far to make pages SEO “optimized.”

  1. The keyword, ideally, it should be in the URL.
  2. Use the keyword in the title, twice if possible, and at the beginning is better. Keywords in the title is the most important place to achieve high rankings.
  3. Use the keywords in the h1 header tag.
  4. Use the keywords least three times in the body copy of the page.
  5. Use bold or strong to place emphasis on the keywords (the bots like that).
  6. Use the keyword in the alt tag of pictures (good for image searches).
  7. Use it at least twice in the meta tags.

Meta tags

Meta tags provide information about a website’s content. You can use the following meta tags: index/noIndex, follow/noFollow and noArchive if you want to talk to the bots directly. The meta description tag draws readers to your site from the results and is an important part of search marketing. This is what gets posted in the description.

The meta keywords tag had value at one time but is no longer valuable or important to search engine optimization.

URL Structures:

Your universal resource locator, or web address, is of great importance from a search perspective.

No Follow

If you do not want a bot to follow a link, you can include the attribute: rel=”nofollow” after the href, <a href="#" rel="nofollow">link</a>.

Banning Bots All Together

If you do not want to be in the search engines, you can place the robots.txt file with the content: User-agent: * Disallow: /in your directory. The * means all user agents, and applies to all bots that search engines use to comb the net. All major search engines respect this convention.

The Landing Page Optimization Guide You Wish You’ve Always Had

Follow the link to an extensive list of resources that can be applied specifically to landing page optimization.

Step Zero – Really Understand Your Target Market

Step 1 – Set Up Actionable Analytics

Step 2 – Make Sure Your Ad’s Message Matches The Landing Page

Step 3 – Evaluate Your Landing Page’s First Impression

Step 4 – Does Your Page Have Emotional Resonance?

Step 5 – Craft A Clear & Compelling Value Proposition

Step 6 – How Will Images Reinforce The Message?

Step 7 – Should We Create an Explainer Video?

Step 8 – The Importance of Social Proof, Authority & Testimonials

Step 9 – Does The Copywriting Make You Want To Read More?

Step 10 – Does Your Call To Action Communicate Clearly?

Step 11 – Start A/B Testing

So much of a visitor’s landing page experience happens in less than a second & most of focus on the entirely wrong side of that experience.

If you think of your landing page as a way to tell the story of how your prospect’s life gets better, and use what you know about how the brain processes text and images, you can create a “hook” that gets them wanting more.

In that case, Landing page optimization is just a way to make the story better every time it’s told.

SEO resources

Much of this information has come from SEOMOZ, Google’s SEO Starter guide (pdf), Google’s webmaster tools and help and Search Engine Land web site. Visit these to learn perfecting keyword targeting on-page optimization..

Another great resource is the SEO plugin for WordPress Yoast and the site itself has lots of information as well. With all of these resources, there is no reason that your site is not SEO friendly.

Google’s Publisher’s Plugin for WordPress

Visit the Google search algorithm changes chart for 2013 to give you an idea of how a search engine remains a moving target.

05 Print Stylesheets

We take for granted that we are styling the web site for the screen, but we should not forget that its also important to create a style sheet for when a user prints the web site. You can imagine that a potential client can print out a page from your portfolio to show to someone else at a meeting for a potential treatment of whatever project they are working on.

Clean It Up

The most useful thing is to remove some of the clutter. When a user prints a page, they do so for the content. Do them the favor and hide all that is not necessary. The footer, navigation and other unnecessary elements can be set to display: none; . The remaining elements often need their screen styles neutered, and the properties have to be rewritten to clean up the print style. The browser itself applies a print style to the page, removing the background, etc, and the HTML5 Boilerplate has print stylesheet, but you still may need to tweak it yourself.

Add your additions to the print styles at the bottom of the page in the boilerplate:

/* ================================================
   Print styles.
   
   ================================================ */

Fonts are often larger on the screen than in print, so set the font to serif 12points in size: p { background: white; font: 12pt/14pt "Times New Roman",Georgia,Serif; } and h1, h2, h3, h4, h5, h6 to appropriate sizes.

Rearrange It

It is likely that the page is horizontally laid out for a screen. You may want to rearrange the elements vertically for the printed page.

Adding Information Using CSS

Information can be added by using the content attribute before the header, for example, so you can customize the printed page: header:before { content: "Contact artist for more info, telephone number, email and website, etc"; } or anything else you want the printout to have.

It’s possible to print out the actual link address after the links using a:link:after, a:visited:after { content: " (" attr(href) ") "; } but that prints out all links, so you may want to limit that to to the article tag. This is already taken care of for you in the boilerplate.

Check to see how your page prints out, and add styles to the print section of your CSS style sheet if needed.

05 Styling the Navigation

Anchors make the Word Wide Web. These hyperlinks are the essence of the web, and styling them is no small matter.

The anchor element <a >contains the href attribute that specifies the hyper reference (address). It can also contain a target atribute, which can target the link so it opens in a new window: target="_blank". The link text comes next. This could just as well be a picture. The link element is closed with a </a>.

The link element plays a central roll in information architecture and user experience design; everything depends on the navigation and what it looks like, and that’s what we look at here.

Styling the <a> Pseudo Classes

Pseudo-classes affect the document as if — and this is what makes them pseudo — they add a class to the document. The document will display that whether or not a a:link has been a:visited or not, based on the browser history.

The other three pseudo links indicate interactive feedback. The a:hover link applies while the user is over the element with the cursor, the a:active pseudo-class applies while an element is being clicked on by the user.

Notice that a:hover and a:activehave be placed after a:link and a:visited otherwise the cascade can hide their color property. To avoid that, make sure to write them in the order you see here, for it makes a difference.

CSS Code View

<a href="#key" accesskey="a">Click Me or press Control-Option-a</a> anywhere in the document.

 

Keyboard Focus

The a:focus pseudo-class applies to an element that accepts a keyboard event. It is not widely used. There is no feedback in Safari, but Firefox and Opera show that you have pressed the key before executing the link. In Safari you hold down both control and option and the key, in Firefox, just the control button and the key, in Opera, you press shift escape and then select the key and in Internet Explorer, the alt key. In case you want to include keyboard access, you need to add the attribute and the key to the link element, like this: accesskey="a".

Using Lists for Navigation

It was decided a long time ago that menus are really lists, and should be wrapped in a list to be semantically correct. The code for most of these demonstrations use the following code:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
<li><a href="#">Topic 4</a></li>
</ul>

Which, when it has no CSS styling, takes the default look:

  • Home
  • Topic 1
  • Topic 2
  • Topic 3
  • Topic 4

The remaining sections will use CSS to style what are otherwise lists of menu choices.
     

Using Display: Block and Inline-Block

The most obvious CSS changes to the menu are to give it a color (color: white;), to remove the underline (text-decoration: none;), to give it a background (background: orange;), a border (border-left: 5px solid a00;), padding (padding: 42px 0px;), and margins (margin: 5px 5px;). You can use the pseudo classes to target the hover, active and visited states with different attributes, so that the user gets feedback when they go over, click or have visited that link.

You can change the list item li that creates the menu to be either vertical or horizontal by changing its display from display: block which is the default and renders the list vertical to display: inline-block;. This creates a horizontal menu.

CSS Code View

     

Using Display: Table to Make Horizontal or Vertical Menus

If the <ul> is displayed as a table, then the <li> can be displayed as a table-cell. That also creates a horizontal menu. Changing the display to table-row makes the menu vertical.

CSS Code View

     

Using Floats to Layout the List

Floats can also be used to layout the list. Just float all of the <li>s left. You have to remember to clear: left the element that follows the list, but otherwise it works well. To make this horizontal, reduce the width of the <ul> to 100px. If you want two rows going down, change the width to 185px.

CSS Code View

Image Rollovers

Now buttons with the CS3 goodness have come a long way, but when the menu needs more pizzaz than even CSS3 can provide, you turn to pictures, so when you hover over a link, the picture changes. This is easily accomplished in CSS using a single image divided into three, where the first part is what you see as a link, the second part is what you see when you hover over, and the third part is what you see when you click the link. The picture looks like this:    

rollover folder icon

    
The picture is simple enough, with a folder in three colors. The strategy is to show only the first icon, and with each state, move the picture so that it shows a different icon. That way, its blue, red when rolled over and green when clicked. If you want to tell the audience that they have clicked the link before, you can add a forth icon. The HTML is an empty anchor tag <li><a href="0"></a></li>.

CSS Code View

    

Making the Links Accessible

Because screen-readers cannot read anything from a picture, it’s necessary to put in a title. You get a popup after a second or so of hovering, with the title on it. <li><a title="link to Home" href="#"></a></li>

CSS Code View

Image Sprites

To have three pictures on an image and to seamlessly move between them is called an image sprite. It works very well for one link, and it works even better when there are more links, as in the following example with three variations per link for four links on one image file. Each pseudo class calls up the same image but at a different position, using the background-position: no-repeat 0 0 property to easily indicate where the pictures are on the image. The first number after no-repeat is the horizontal (x) offset, and the second is the vertical (y) offset. You can easily get this information from PhotoShop or Illustrator, but that still quite a chore.

To make this process even easier is Sprite Cow, which can take an image with lots of sprites on it, and easily provide you with the code containing the coordinates that makes this process a snap. Take the following image, load it into Sprite Cow, click on each image and copy and paste the coordinates into your stylesheet. Once you get the idea, you’ll never go back.

rollover sprites for menu

Since it is necessary to target each link individually, every link gets its own id.     

CSS Code View

Sprites Save Time

Every time that the browser has to request an image from the server, it takes time, not only for the image to download, but for the server-request. In fact, the server request can take more time than the downloading of the image. The ability to gang up all of your web pictures into one image is for that reason, a real time saver and significantly speeds up the loading of a web page.

As the process for doing so is exactly the same, using Sprite Cow, we do not need to go into a sprite / background image demonstration, as we have covered a lot of ground already, but be prepared to combine all of the smaller pictures into one large image like this for your final web site.

Pseudo Classes: not

A collapsable guide to the layout modes. All of the work is being done by the last CSS rule using the pseudo class not, as in not target or hover li:not(:target):not(:hover) .

CSS Code View

Live Demo

Here you will find links to the layout modes article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties.

HTML

  <nav>
    <ul>
      <li id="nav-about"><a href="#nav-about">Layout Modes</a>
        <ul>
          <li><a href="#layoutModes" target="_blank">Layout Modes</a>
          <li><a href="#block" target="_blank">Block Display</a>
          <li><a href="#inline" target="_blank">Inline Display</a>
        </ul>
      <li id="nav-projects"><a href="#nav-projects">Positioning</a>
        <ul>
          <li><a href="#positioning" target="_blank">Normal</a>
          <li><a href="#relative" target="_blank">Relative</a>
          <li><a href="#absolute" target="_blank">Absolute</a>
          <li><a href="#fixed" target="_blank">Fixed</a>
          <li><a href="#floats" target="_blank">Floats</a> 
          <li><a href="#tables" target="_blank">Tables</a>
        </ul>
      <li id="nav-interact"><a href="#nav-interact">Other</a>
        <ul>
          <li><a href="#display" target="_blank">Display</a>
          <li><a href="#zindex" target="_blank">Z Index</a>
          <li><a href="#over-flow" target="_blank">Overflow</a>
        </ul>
    </ul>
  </nav>
  <div>
   Here you will find links to the <a href="http://b.parsons.edu/~dejongo/04-the-layout-modes" target="_blank">layout modes</a> article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties. 
  </div>
</div>

Drop Down Menus

While drop down menus are not really appropriate for small web sites of the kind that you will build here, I include a demonstration of a CSS only drop down menu just in case you do not feel complete if you do not have one, or better yet, build a really big site.

CSS Code View

The HTML Code

<ul id="nav"> 
	<li class="current"><a href="#">Home</a></li> 
	<li><a href="#">Menu_A</a> 
		<ul> 
			<li><a href="#">Menu_A-1</a> 
				<ul> 
					<li><a href="#">Menu_A-1-a</a></li> 
					<li><a href="#">Menu_A-1-b</a></li> 
					<li><a href="#">Menu_A-1-c</a></li> 
					<li><a href="#">Menu_A-1-d</a></li> 
				</ul> 
			</li> 
			<li><a href="#">Menu_A-2</a> 
				<ul> 
					<li><a href="#">Menu_A-2-a</a></li> 
					<li><a href="#">Menu_A-2-b</a></li> 
				</ul> 
			</li> 
			<li><a href="#">Menu_A-3</a> 
			<li><a href="#">Menu_A-4</a> 
		</ul> 
	</li> 
	<li><a href="#">Menu_B</a> 
		<ul> 
			<li><a href="#">Menu_B-1</a> 
				<ul> 
					<li><a href="#">Menu_B-1-a</a></li> 
					<li><a href="#">Menu_B-1-b</a></li>
					<li><a href="#">Menu_B-1-c</a></li>
				</ul> 
			</li> 
			<li><a href="#">Menu_B-2</a> 
			<li><a href="#">Menu_B-3</a> 
			<li><a href="#">Menu_B-4</a> 
				<ul> 
					<li><a href="#">Menu_B-4-a</a></li> 
					<li><a href="#">Menu_B-4-b</a></li>
					<li><a href="#">Menu_B-4-a</a></li> 
					<li><a href="#">Menu_B-4-b</a></li>
				</ul> 
			</li> 
		</ul> 
	</li> 
	<li><a href="#">Menu_C</a> 
		<ul> 
			<li><a href="#">Menu_C-1</a> 
			<li><a href="#">Menu_C-2</a> 
			<li><a href="#">Menu_C-3</a> 
				<ul> 
					<li><a href="#">Menu_C-3-a</a></li> 
					<li><a href="#">Menu_C-3-b</a></li>
				</ul> 
			</li> 
			<li><a href="#">Menu_C-4</a> 
			<li><a href="#">Menu_C-4</a> 
				<ul> 
					<li><a href="#">Menu_C-4-a</a></li> 
					<li><a href="#">Menu_C-4-b</a></li>
					<li><a href="#">Menu_C-4-a</a></li> 
					<li><a href="#">Menu_C-4-b</a></li>
				</ul> 
			</li> 
		</ul> 
	</li> 
</ul> 

05 Troubleshooting

Everyone of you will run into problems, and more than likely, lots of problems, and you have to tackle them one by one, for usually becomes a mess if there are too many problems all at once. The solution, then, is to solve the problems one by one, until they’re all gone. In part 1 of this document shows how to isolate the problem so that you can solve it, and in part 2 provides some clarification on confusing issues in CSS.

Creating a Problem Free Document

The first step is to copy and paste the basic HTML5 code into your text editor and to give it a page a name that contains no spaces and ends with .html. You add a link to an external CSS style sheet in the header of the document and include the CSS reset at the top of your external CSS style sheet.

In an ideal world, you add code and validate every few minutes, staying on the strait and narrow path. This is a lot better than running into a problem and finding out that you have 153 errors because you forgot to validate regularly. Yes, using HTML and CSS is really problem solving. You follow the rules, and each one of them is very simple, but add them all together to create a complicated layout, and that is were the trouble begins.

One way to keep trouble from your door is to organize your document into regions, like a wireframe, diving up your page into independent locales. That way, if there is a problem you know where it is.

It is a good idea to use comments <!-- comments --> or inside of the external style sheet /* comments */ to identify what the code is doing. It is amazing how much we forget when asked to redo something on a job that was done a year ago.

It is also possible to “comment out” parts of the code you temporarily want to suppress, which means that you use this comment code to remove the HTMl markup and CSS rules that you want the browser to ignore.

Troubleshooting When You Have Problems

There are times when you have been busy coding and whatever you are trying to do just does not work. When a document becomes complicated enough, fining an unclosed div can be a problem. That’s when you have to troubleshoot the document.

Troubleshooting comes into play when you have trouble but you do not know the cause of that problem, so you have to figure out where in the code the trouble is, and then fix the problem.

Unfortunately the problem is not blinking on and off so as to attract your attention. Instead, you have to hunt it down.

This becomes more difficult if you have not been validating regularly. It can even happen with pages that do validate, though that is much less likely, so I ask you to validate your documents regularly.

Tools like Firebug, Web Developer and the Inspect Element in the Safari and Chrome browsers can be very helpful. In the last two browsers, right-click on an element and inspect element is the last item in the popup menu. You can activate this inspection and debugging tool in the preferences.

These tools allow you to inspect your CSS, but that does not always indicate what is causing the problem. You might have written the HTML markup or CSS rule incorrectly somewhere else.

Process of Elimination

If you think that your problem is with one or another CSS definition, start testing them by adding something obvious, like background-color: red;, outline: 1px solid green or something like that.

If you still cannot locate the problem, start removing the rules one at a time, until you find where the problem is. The same is true of the HTML, in case you cannot find the tag that’s not closed, misspelled, etc. You sometimes have to remove a lot, and you can speed up the process by eliminating half, testing it, and if the problem goes away, test the other half, and so on.

Once you have found what causes the problem, you can fix it, circumvent it, etc.

Validate!

Key to working on the web, especially as you are starting out, is to validate often, as it will let you know as soon as you have gone off track, so please use this service often!

Unicorn Validator for HTML5 and CSS3 and the Regular Validator

Clearing Up a Number of Confusing Issues in CSS

This is taken from CSS-tricks.com, one of the great websites to go to.

If you’re a pro, it’s easy to forget the confusion you felt when you just started learning CSS. Just for fun, let’s try and remember some of those little weird confusing moments. I’ll start us out by listing some random ones I remember and have picked up on while helping others recently. Then you folks take it from there in the comments.

These aren’t huge big things like broken layouts in IE or which vendor prefixes should you be using. It’s the little fundamental stuff, like tiny differences in syntax that change meaning in a big way.

Tag qualifying

What’s the difference between these two things?

.class { }

p.class { }

The first one will select any element with that class name. The second one will only select paragraph elements with that class name.

The first is more generically useful. The styling you apply with that class may be useful to multiple types of elements. Even if it’s not today, it might be tomorrow. It’s also faster for the browser to understand and apply.

It’s a fairly rare case that you’d want to use the second example. It would only be if you wanted to re-use the same class name for multiple elements but have them to different things.

p.stand-out { background: yellow; }

span.stand-out { font-weight: bold; }

Selector order matters

Why are these so different?

.class div { color: red; }
div.class { color: green; }

The first example there is very different because of the space character between .class and div. The stuff before the space and the stuff after the space select different elements. The first part is “select any element with this class name” and the second part is “select any div”. Put them together with a space and you get “select any div that is a descendant of any element with this class name”.

The second doesn’t involve any of that descendant business. It’s a tag-qualified selector like discussed above.

If the above CSS was the only CSS on the page, the results would be like this:

<div class="class">

<h2>

<div>Would be red</div>

</h2>

<div>Would be red</div>

Would be green

<div>

<div>Would be black</div>

Why use ID’s at all?

It seems like as far as CSS is concerned, using classes and using ID’s is the exact same thing.

#id { color: red; }

.class { color: green; }

It’s just an attribute and it’s a seemingly arbitrary difference in syntax depending on which one you use. The results are predictable:

<div id="id">Would be red</div>

<span id="id">Would be red</div>



<div class="class">Would be green</div>

<span class="class">Would be green</div>

You might have learned ID’s are “supposed” to be unique, as in, only have one element per page that uses it. But you’ve slipped up before and it doesn’t seem to matter, the CSS applies just fine.

Then you start getting conflicting information. Some tools and philosophy) teach that ID’s aren’t good for styling. Some articles tell you they are the most efficient. Perhaps you work with a JavaScript developer who tells you they need ID’s on everything because it makes their job way easier.

Confusion abound here. Turns out, everybody is kinda right. Here are the facts:

  • CSS doesn’t care much which you use, as far as actually applying styling. ID’s are technically faster for a browser rendering engine, but other than the most extreme of circumstances you’ll probably never notice a speed difference.
  • JavaScript cares very much about ID’s. It can be noticeably faster for JavaScript to find an element by an ID. And this is where the “uniqueness” is very important. JavaScript will only find the “first” element with that ID, so if you have multiple on the page, confusion may ensue.
  • ID’s have an infinitely higher specificity value than classes. If there is an element with an ID and a class and they both apply styles, the styles applied by the ID will take precedence over the styles applied by the class. This can be useful, this can be a hindrance.

My personal philosophy is to use ID’s on stuff that I absolutely know there will only ever be one of and will not benefit from properties from a class name shared with other elements.

Buried hovers

What’s going on here?

div { color: red; }

div:hover div { color: green; }

:hover is a selector which only applies itself when the mouse is over a particular element. What is weird here is that you don’t necessarily have to apply styles to that element being hovered over. In this case, we are applying styling only to descendant divs when the parent div is hovered. So:

<div>



I will be red all the time



<div>

I will be red, unless that top

div is hovered (but not necessarily me)

and then I'll be green.

</div>



I will be red all the time



</div>

Whitespace doesn’t matter

This:

div{color:red}

Is the exact same as:

div {

color : red



}

You do need spaces in selectors to make decendent selectors (e.g. ulli { } is absolutely not the same as ul li { }) but other than that you should use whitespace however makes looking and working with your CSS comfortable.

Notice the missing semicolon on that property in the example above. You can omit that if it’s the last property in the group. Personally I never do as if you add more property/values later and forget to add the semicolon to the previous line, that’s a problem. Because whitespace is so free, it will continue to read the next line as part of the value of the previous line.

Example of the problem:

div {

-webkit-border-radius: 10px

-moz-border-radius: 10px

border-radius: 10px

}

The whitespace is fine. The no-semicolon on the last one is fine. But the first two property/value pairs don’t have semicolons and will totally screw up and not work.

Property overrides

What font-size is the div going to have?

div {

font-family: Sans-Serif;

font-size: 18px;

font-weight: bold;

font-style: italic;

color: red;

margin: 0 0 20px 0;

font-size: 21px;

padding: 10px;

}

It’s going to be 21px. You’ve accidentally listed it twice and the second one is going to win.

Order in CSS file matters

If you have two selectors that have the exact same specificity like this:

.red { color: red; }

.green { color: green; }

And then they apply to the same element, the selector later in the CSS will always win. Class name order in HTML doesn’t matter:

<div class="red green">Will be green</div>


05 HTML5 BoilerPlate

We started out the semester with a plain HTML5 template. It used to be that not all browsers would interpret HTML or CSS the same way, and there was a need for a boilerplate that normalized all the differences, but those days are gone. Google’s rendering engine Chromium split from Apple’s Webkit, and the only other rendering engine is Firefox’s Mozilla, and its future does not always look secure, which is unfortunate. Slim pickings compared to the way it used to be. Competition and diversity are good, but no one misses Explorer’s many exceptions.

Using a boilerplate will make your life a little more complicated, but it takes care of any contingencies that make building a professional website more challenging.

The HTML5 Boilerplate

The HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

We are using the most recent HTML5 boilerplate. I expect everyone to use it as the basis for the midterm and final. Head on over to the Support Documents

The boilerplate is everything for everybody, from the novice to the professional, so it’s stacked with goodies that you would not be able to incorporate on your own at the level you are at.

Features

  • HTML5 ready. Use the new elements with confidence.
  • Cross-browser compatible (Chrome, Safari, Firefox).
  • Designed with progressive enhancement in mind.
  • Includes [Normalize.css](http://necolas.github.com/normalize.css/) for CSS normalizations and common bug fixes.
  • The latest [jQuery](http://jquery.com/) via CDN, with a local fallback.
  • The latest [Modernizr](http://modernizr.com/) build for feature detection.
  • Placeholder CSS Media Queries.
  • Useful CSS helpers.
  • Default print CSS, performance optimized.
  • An optimized Google Analytics snippet.
  • Apache server caching, compression, and other configuration defaults for Grade-A performance.
  • Cross-domain Ajax and Flash.
  • “Delete-key friendly.” Easy to strip out parts you don’t need.
  • Extensive inline and accompanying documentation.

Documentation

Take a look at the table of contents. This documentation is bundled with the project, which makes it readily available for offline reading.

If You Want To Know More

There is comprehensive documentation. Learn more about HTML5, browser compatibility, javascript libraries and all the other goodies that make up this boilerplate.

Instructions in a Nutshell

Implementing the HTLM5 Boilerplate is easy. Transfer your CSS to the external CSS style sheet provided, and the HTML markup to the index.html file where indicated.

Where to put the CSS

Enter your CSS code on the external style sheet provided. It is already linked to the index.html page.

The CSS style sheet normalizes the browser in a more nuanced way than the browser reset. These have to come before your own user styles, which are entered in the middle of the document after these instructions:

/* ==========================================================
   Primary styles
   Author: 
   ============================================================ */

If you put your declarations in these commented-out instructions, your code will also be commented-out. I’ve seen that happen before, and the student came up to tell me that the template does not work. I’ve also seen students use the index.html page by itself. That also does not work. Keep the folder intact.

After the user styles there are a number of preset styles that can be called to perform a number of tasks. You want these to remain intact after your styles.

All you have to do is create your styles in this middle Primary Styles Author section. and ignore the rest of the style sheet if you do not understand what it does.

Where to put the HTML

Once again, ignore everything that you do not understand.

put the title of the page between the title tags:

<title></title>

Next enter a description of the page/site:

<meta name="description" content="">

Fill in the author:

<meta name="author" content="">

As long as you did not change this name of the style sheet, the default link should work.

<link rel="stylesheet" href="css/style.css">

Enter all of your HTML replacing the code below

Ignore everything else that you do not yet understand.


        

Hello world! This is HTML5 Boilerplate.

Google Analytics code is already in place. You already have an id if you signed up and followed the instructions . You need to replace “UA-XXXXX-X” with your account number. This way the page is tracked by google’s analytic software, and you can check up on who visits you, how long they stayed, which pages they navigated and more.

            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];

Turning a Single Page Into a Website

Work on the index file till you have made it just like your Photoshop comp / wireframe, with everything as you want it.

Include in this file a styled navigation with links to all of the files that you wish to target. Examples are about.html or bio.html, drawing.html, etc.

When you feel you have achieved this to the point of perfection, duplicate the index.html file and rename each copy to the appropriate page name that you specified in the navigation. This way the site is almost already build as soon as you finish the first page.

The Boilerplate is for Your Own Good

This is not much more complicated than before, as long as you can ignore some of the extra code.

Just know that your HTML5 and CSS3 will be more compatible with other browsers than if you did not use this template. That said, if anyone wants to learn this stuff, I recommend going through this boiler plate carefully, read the documentation, and follow all of the links, for you will learn a lot.

Adding Google Analytics and SEO

Follow the instructions in Google Analytics to get a google analytics account number. Place that number in the index.html file.

Building a standards compliant website with good content is best for search engine optimization. The problem many of you will face is that all your work is composed up of pictures. Search engines prefer words. Make sure that you describe your pictures will in accompanying text or use the alt tag to let the people who use search engines reach your pictures.