The following checklist serves to summarize the major points and to help you ensure you’ve done all you should before finalizing any web site you are creating.

Use this navigation and jump directly to content :

{Layout} {Typefaces and Formatting} {Content} {Graphic Text}

Layout—Did you:

1. Chunk content with headers, small paragraphs, bulleted lists, sidebars, indenting an entire a paragraph of text, or pull quotes?

2. Limit line length to 350–550 pixels by splitting wide pages into two or more columns?

3. Increase leading to improve readability on longer lines of text and to lighten the overall “color” of a page?

4. Increase spacing between letters or words for emphasis?

5. Use either an indent at the beginning of a paragraph, or double spacing between paragraphs, but not both?

6. Avoid indenting the first paragraph following a header?

7. Use double spacing before headings but single spacing between the heading and the content it introduces?

Typefaces and Formatting—Did you:

1. Use a non-decorative, screen-optimized typeface at a legible size for body copy?

2. Use looser leading appropriately for longer lines of text, for emphasis, or to lighten the density of the page?

3. Use wider letter and word spacing for emphasis?

4. Set body copy as justified left, ragged right?

5. Employ contrasting elements like different typefaces, size, weight, color, form, structure, bold, italic, reversing the type and background colors, all caps, texture, direction, rhythm, spacing, and embellishment to emphasize special areas of type?

6. Use restraint on those elements just listed?

7. Make use of CSS to set special capitalization rules (all uppercase, all lowercase, title case) automatically?

8. Avoid using all caps in body text?

9. Apply underlining only for links?

10. Test the site in grayscale to make sure that foreground text contrasts sufficiently in value with background text?

11. If using light text on a dark background, consider making the text bolder or choosing a typeface with inherently thicker strokes?

12. Avoid strikethrough like this unless you are attempting to display edited versions of documents?

13. Consider using CSS to style the first-letter or first-line of text for decorative effect?

Content—Did you:

1. Check spelling, grammar, and sentence structure?

2. Limit the use of exclamation points?

3. Specify proper typographic characters, including en dash, em dash, curly quotes, true ellipse, and upper and lowercase numerals?

Graphic Text—Did you:

1. Make use of graphic text only when absolutely necessary, to avoid excessive download times?

2. Choose appropriate embellishment, anti-aliasing, and kerning?

3. For very small text, use typefaces designed for a specific size and turn off anti-aliasing?

Don’t forget to look at “All In One Design Checklist” after this article.

In a broad sense, digital data can be defined as anything recorded using a symbol-based code on a medium. Such a code uses a finite set, S , of Symbols—for example the Latin alphabet, Egyptian hieroglyphics, etc.

S = {S1,S2,.....Sn}, n ≥ 2

If n = 2 and thus the code uses only two symbols, it would be called a binary code. Binary codes are the simplest codes; they can be implemented easily by computing machinery (e.g., S = {0,1}, S = {true, false}, S = {+5V,-5V} or S = {?,?}).

The meaning of a symbol often depends on its position within the sequence of symbols. Frequently symbols are combined in groups to form new symbols (commonly known as “words”) which themselves are combined into higher units (“sentences”).

Reading and understanding a digital code requires two distinct steps:

1. The file format has to be identified.

2. The appropriate syntactic and semantic rules of the file format have to be applied to interpret the digital code.

If a data file is identified as being a TIFF image file, but the specification of the TIFF format is not known, the image represented by the data cannot be extracted. Therefore, if the semantic system of a digital code cannot be identified or is not known, the information contained in the digital data cannot be extracted.

This leads to the following prerequisites for retrieving digital data:

1. The physical property used to create the marks has to be known. For current media types the physical property used to create the marks is usually known. We know that a floppy disk has magnetic marks and that a compact disc has optically detectable marks. However, future digital archeologists might have problems determining which physical property has been used to create the marks, especially for new, emerging recording technologies.

2. The physical marks on the medium must be detectable and convertible into symbols. If, as a result of damage and aging, this is no longer possible, the medium has to be considered “destroyed” and unreadable.

3. The syntactic and semantic system (file format) has to be identified and known.

If any of these tasks cannot be accomplished, the digital data will no longer be readable and the recorded information is lost.

Digital data is independent of the medium it is recorded on as long as the symbols can be deciphered. For example, a binary computer file representing an image using the JPEG format could be engraved into a stone—it would be not very handy to work with, but nevertheless feasible. Thus, digital data can be copied from one medium to any other medium without loss.

Digital data can be copied without any loss by reproducing the same sequence of symbols from the “original” sequence. The two copies will be indistinguishable from each other and therefore it is not possible to determine which one is the “original.” However, since the physical representation of a digital code always has an analog nature that may result in errors, the digital copy process is only completed if the two copies have been verified to be identical either by a symbol-wise (or, in case of binary data, bit-wise) comparison or by using checksums. Therefore, digital data can be copied without limits and there will be no generational loss.

Digital data can be transported through space with the speed of light without the need for moving atoms or matter. This property allows digital data to be tele-copied without loss at the speed of light.

Table of common image file formats with “magic numbers”

One fear organizations often have when they consider moving to a CSS-based approach is whether doing so will alienate these users. The reality, though, is that a properly implemented web-standards method of web development will actually make your site more accessible to users with older browsers. You see, in the first era of web development (which lasted throughout the ’90s), we were forced to make hard choices about which browsers we would support. The vast differences between browsers meant we needed to rewrite most aspects of each site for each one, and this was only practical to do for a few choice browsers.

Modern web development (using web standards), on the other hand, allows us to support all browsers at least in some capacity. And when we refer to all browsers, we mean all. This includes the version of Mosaic released in the early ’90s all the way up to today’s browsers, browsers on alternative devices (cell phones, PDAs, game consoles, etc.), and even browsers that haven’t been imagined yet and that will show up on the devices that reach the public in 2009. Whether to exclude a browser is not a choice we have to make.

Instead, we need to consider what “support” actually means. In the past, people have taken “support” to mean “everybody gets the same thing.” Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. In fact, requiring the same experience for all users creates an artificial barrier to participation. Availability and accessibility of content should be our key priority.

If we support Internet Explorer 6 and Netscape 4, then the site will look virtually identical in both browsers—and so on. Thus, web designers and developers learned to use a “lowest common denominator” approach, using only the features of XHTML, CSS, JavaScript, and so forth that worked well in the oldest, poorest browser they’d chosen to support. But this thinking is flawed in that it offers benefits to no one.

Consider television. At the core: TV distributes information. A hand-cranked emergency radio is capable of receiving television audio transmissions. It would be counterproductive to prevent access to this content, even though it’s a fringe experience.

Some viewers still have black-and-white televisions. Broadcasting only in black-and-white the “lowest common denominator” approach—ensures a shared experience but benefits no one. Excluding the black-and-white television owners—the “you must be this tall to ride” approach—provides no benefit either.

An appropriate support strategy allows every user to consume as much visual and interactive richness as their environment can support. This approach—commonly referred to as progressive enhancement—builds a rich experience on top of an accessible core, without compromising that core.

Nate Koechley — A Senior Web Developer at Yahoo!

Broadcast television offers full color. It offers Dolby Pro Logic surround sound. It offers high-definition resolution and clarity. If your television supports these technologies, you get the richest TV experience possible. If it doesn’t, your experience will not be enhanced—but you will still get the core content of the television program. This is very much the same approach the web standards movement applies to the Web.

All browsers, no matter what device they’re on, how old they are, or how technologically inferior they are, ought to get the core content of the page (in most cases, this means text, images, etc.). The latest and greatest browser will get the richest experience. Everything else will be somewhere in between.

Development Browser

Deciding which web browser you will use as you develop CSS-based sites is a significant choice. Although different schools of thought exist, most web designers agree that developing in a solid, reliable, standards-compliant browser (such as Firefox or Safari) is best. This lets you focus on doing things the “right” way through most of your development. Then, you can go back after the fact and provide workarounds for less-ideal browsers (such as Internet Explorer). Trying to develop to the lesser browsers as you go tends to result in more workarounds than necessary and code that is less clean.

Your mileage may vary, but we recommend using Firefox as your primary development browser, not only because of its great standards support, but also because of the many great extensions available for web developers.

1. Best Typeface: GeoGrotesque by Eduardo Manso, Em Type

2. Best Actor: Mr Eaves by Zuzana Licko, Émigré

3. Best Actress: Liza Pro by Underware

4. Best Sans: Alright Sans by Jackson Cavanaugh, Okay Type

5. Best Serif: Calluna by Jos Buivenga

6. Best Superfamily: Trilogy by Jeremy Tankard, Jeremy Tankard Typography

7. Best Actor in a Supporting Role: Giorgio Sans by Christian Schwartz

8. Best Revival: Burgundica by Gerrit Noordzij, The Enschedé Type Foundry

9. Best Foreign Language Font: Nara by Andrej Krátky with Nikola Djurek and Peter Bilak, Typotheque

10. Best Visual Effects: Klimax by Ondrej Jób, Typotheque

11. Best Free Font: League Gothic by the League of Moveable Type; revival of Morris Fuller Benton’s Alternate Gothic No.1

12. Lifetime Achievement: Wim Crouwel

    About Video: For the occasion of the Gerrit Noordzij Prize 2009, Tobias Frere-Jones introduces the work of Wim Crouwel.

    The GNp is an initiative of the master course Type and Media and is organised by the Royal Academy of Art and the Meermanno Museum, under the auspices of the Dr. P.A.Tiele Trust in The Hague.

http://www.printmag.com/article/oscars-of-type

Designer as Typographer as Interpreter

The designer is not just the obedient deliverer of a message but,

1. An interpreter where interpretation is central to the idea of communication.

2. A visual communicator

   1. to make information more attractive, more noticed, more read

   2. to enhance the tone of a message

   3. to make the message more legible, more readable

   4. to improve comprehension, retention

   5. to achieve emphasis of key points in a message

3. A problem solver

   1. employing the appropriate typeface and weaving it into a design well suited for the message, media, and audience

Use this navigation and jump directly to content :

{JPG} {GIF} {PNG} {Combination and Acquiring Images} {Creating and Editing Images with Effects and Filters} {Background Images} {General}

JPG—Did you:

1. Save photographs and other continuous tone images as JPGs, unless the images need transparency or animation?

2. Export JPGs at the lowest compression that still looks reasonably good on a web page?

3. Minimize JPG file size by adding a small amount of blur?

4. Avoid saving over the original (master) JPG?

GIF—Did you:

1. Save line-based images with areas of solid color (such as cartoons, line art, and graphic text) as GIFs?

2. Select an appropriate GIF palette, either a web-snap or a non-safe adaptive palette?

3. Explore transparent image backgrounds so that images no longer appear to be rectangles?

4. Turn on dithering if there are more than 256 colors in an image?

5. Specify interlacing, when appropriate?

6. Keep in mind the file size implications of excessive colors, vertical stripes, anti-aliasing, gradients, dithering, and textures?

7. Store a photograph as a GIF only if it needs transparency or animation, and then use a 256-color adaptive palette with dithering turned on?

PNG Images—Did you:

1. Use PNG format if you have a flat color image that needs more than 256 colors?

2. Remember that alpha transparency increases fi le sizes and may not be supported by all browsers?

3. Specify interlacing, when appropriate?

4. Store a photograph as a PNG only if it needs transparency or animation, and then use an appropriate palette with dithering turned on?

5. Use only compressed PNG files (not native Fireworks PNG files) on the web?

Combination and Acquiring Images—Did you:

1. Avoid combining GIF-appropriate and JPG-appropriate art in a single image?

2. Use stock photos and clip art when appropriate?

3. Scrupulously obey copyright laws?

4. Use screen capture software to acquire screen prints?

5. Scan photos at the appropriate resolution?

6. When possible, convert scanned images to vector format before resizing?

7. Use a digital camera rather than a fi lm-based camera, as appropriate?

Creating and Editing Images with Effects and Filters—Did you:

1. Use anti-aliasing correctly, to avoid halos?

2. Match colors across software packages?

3. Use dingbat typefaces for ornaments, bullets, and icons, and for smoother small shapes?

4. Use effects and filters appropriately to embellish the page while avoiding effect overkill?

5. Make sure that the light source for all 3-D elements on the page is at the same angle?

6. Test your effects on a lower-end computer system?

7. Contemplate using posterization, feathering, rounding, or putting an edge of some sort on a photo?

Background Images—Did you:

1. Create background images that are subtle and of low contrast, so that foreground elements are the focus and are legible?

2. Plan foreground elements so that they show up well, even with a high-contrast background, either by locking them on appropriate areas of the background or by outlining them?

3. Create a background tile of appropriate dimensions so that seams don’t show?

4. Use full-screen background images judiciously, and plan them to be relatively small files?

5. Create a large background image so that it looks complete on small screens while, at the same time, avoids tiling on the larger ones?

6. Specify the image as scrolling or fixed, depending upon which effect you want?

7. Consider wrapping the “background” image in a table or <div> so that it is positioned where you want it on the page, without tiling?

8. Consider using table cell background colors to mask the background image in content areas?

9. Think about using table cell and <div> background colors to provide a colorblocked look without the use of background pattern at all?

General—Did you:

1. Avoid gratuitous graphics?

2. Use an appropriate format: GIF, JPG, or PNG?

3. Reuse graphics throughout the site, whenever possible?

4. Crop or downsize images so that they display at the smallest reasonable size on the screen?

5. Use height and width attributes appropriately?

6. Use an alt attribute on each image?

7. Use visual echoes by repeating shapes, colors, and mood?

8. Avoid web clichés?

9. Think about the alternatives for image borders?

10. Name images by function, rather than by visual attributes?

11. Avoid animation unless to draw attention to the area you want to be the focus for your visitors?

12. Choose an appropriate animation format?

Don’t forget to look at if you already didn’t see “All In One Design Checklist” and “Checklist for Better Forms” after this article.

Rich Typography Options for the Web or Why sIFR is Dead in 2009 by Paul Irish

http://paulirish.com/type/

Some of the “nondesigned” typography will have been made with commercial or political intent, some will be serendipitous, or simply caused by neglect. In older districts, the pedestrian can often find ad hoc remnants of businesses from previous generations, providing clues of past political and/or industrial upheaval. Most urban communication will have been the result of optimism: “a good idea,” something new, exciting, and worth shouting about.

In all towns and cities a range of wayfinding signs, locational identity signs, and situational, ad hoc messages can be seen. Some of the signs are rule-governed brandings: corporate logo, name, and associated livery. Other signs are bespoke, one-off signs on fascias and vans, hand-chalked menus, and sale offers.

The amateurs hand-drawn notice or sign attracts attention because we seem to be naturally drawn to anything different or unexpected. However, signs must attract for the right reason and certainly, in the urban commercial environment, the public are highly attuned to the way messages are relayed to them. A hurriedly drawn (informal) price sign on a market stall will not be perceived to represent a lack of concern by the stallholder for the quality of his fresh fruit, quite the opposite, because immediacy and impermanence are both qualities appropriately associated with fresh food. However, if a permanent (formal) sign, displaying the stallholder’s name for example, is hurriedly (and ineptly) done, its informality will be perceived to be inappropriate. Typography, when bad, is easy to recognize, but difficult to get right.

The long-established department store generally offers a more formal persona (even if it prides itself on friendly service). A less formal method of conveying information can still be initiated for short-term events such as a sale, but this material must be disposed of the moment the event is over, so as to enable the formal presence of the business to be restored.

People understand the effort involved (if not the process) in the production of notices and signs. Something that requires time to plan and then paint or carve, print or build, will generally be considered more formal because it has gone through a process of design, making, and/or manufacture, and is already clearly intended to be in place for a considerable time. The materials chosen are very important in reflecting this. Letterforms bought “off the shelf” and fixed DIY style, either by authoritative organizations or by the individual business entrepreneur, are notorious disasters: M and W mixed up, S upside down, but more commonly, poor spacing.

In the context of hand-lettered signs, newsbills are an anomaly. Until very recently, newsbills were a hand-drawn form of public advertisement for daily newspapers sold on the city streets. It is remarkable that hand-drawn newsbills should have remained in existence for so long, especially because their function was to advertise the products of a highly sophisticated, technology driven, newspaper media industry.

The point, of course, is that the newsbill offers urgent and topical information. The earliest specimens, dating from the beginning of the nineteenth century, contained more than 20 lines of closely printed type in various styles and sizes. Over the years, however, the tendency developed toward shorter, ever more dramatic handwritten headlines that were attention grabbing and readable at a glance. Contemporary newsbills, although printed, have retained the underline and are, in this way, reminiscent of the earlier, hand drawn newsbills.

The need for semi-permanent information, often hurriedly improvised in urban streets, is generally considered to be visual clutter. In an emergency, we are reassured to see order reestablished, usually in the form of standard temporary signs, access inhibited by tape, vehicles with flashing roof lights, and uniformed personnel. Coordination in all these elements is important in providing a sense of order and authority. Disorder is stressful because change to our daily routine forces us to think about activities that we can normally take for granted. It makes us think about what we are doing! Order allows us to form our lives into patterns, to make assumptions, to plan ahead, and use our time efficiently. When a book is opened, the reader is looking for patterns for the very same reasons.

Traffic diversion signs are unpopular because they inevitably represent a disruption or breakdown of a planned journey. However, if such signs are coordinated in their appearance and placement, then they will be perceived to represent a coordinated response to a scheduled event. The driver will assume that this is a planned reroute, rather than an ad hoc, hurried, and perhaps illconceived emergency-induced event. Ad hoc signage is both celebrated and despised, depending on the viewers’ circumstances.

“Typographic detritus or chance art” is the way that improvised urban information… The interference by people making alternative, spontaneous additions or alterations (disregarding the best intentions of the designer) is both inevitable and a necessary aspect of urban life. Such ephemera may sometimes be ugly, but its purpose is generally to provide a valid source of information, even if it is only for a select few. Small, entirely insignificant information, the detritus of urban life, is just as valuable—more valuable some would argue—to social historians than the results of grand-scale city planning.

It is a very good idea to consider how a text will be perceived (and read) in 10, 20, or 100 years’ time.

Decay is the most powerful medium for the improvement of cities… Decay, not architects, adds the last touches, blackens and peels the stone, applies lichens and cracks, softens the edges, elaborates elaboration, and the hand of man works even better than the forces of nature…

Similarly, a scuffed, well-thumbed book with creased page corners is the consequence of a well-used and truly useful document.

Now the reason why the browser vendors have made this assumption is fairly obvious: printing light text on what is almost always white paper is largely unreadable, and it is sadly very rare that web authors will take the time to style their pages for print using an alternate print style sheet (if they ever style it for print at all). Furthermore, printing in pure black, devoid of any complex color mixing, can make printing much faster, because the printer doesn’t have to mix in any red, green, or blue ink and can focus on getting the task done. But what is maddening to the designer trying to achieve accurate color representation in print from their web pages is that all of the major browsers assume that they are smarter than you, and recolor the text based on their own inconsistent algorithms. If you wanted a string of text to appear very light gray in Firefox, too bad. You are getting black whether you like it or not. Let’s look at some of the problems you might encounter.

In Safari 3 (on the left-side), gray colors print fine up until rgb(107, 107, 107). After that point there will be a strange conversion to a light gray shade, arguably the lightest gray you can get in text on Safari, between rgb(108, 108, 108) and rgb(127, 127, 127). At rgb(128, 128, 128), the text color then jumps to black and as you ascend the values toward an expected white color, Safari yields a progressive amount of additional lightness to the text until it finally winds up at around rgb(171, 171, 171), where it should be 255 for all values.

This problem also occurs in the red, green, and blue colorspaces. If we fix red at 127, about halfway between the minimum value of 0 and the maximum value of 255, we get a dead zone between rgb(127, 100, 100) and rgb(127, 127, 127). The same ratios happen starting at rgb(100, 127, 100) and at rgb(100, 100, 127). Finally, Safari renders rgb(0, 255, 255), rgb(255, 0, 255) and rgb(255, 255, 0) inconsistently from their adjacent color values.

Gecko browsers such as Firefox (before version 3), Camino, and Flock print the entire gray space in black. You cannot specify a light gray such as rgb(127, 127, 127) or anything else. It will always default to pure black whether you like it or not. If you fix a color bucket at 0, you will get semi-accurate color for the rest of the gamut, but the other color combinations will trend toward black text the lighter it gets. The exception here is Firefox 3, which will print your color exactly as specified. As of this writing, Firefox 3 is the only browser I’ve tested that gets the color matching between screen and print relatively correct.

Interestingly, the marker (the little bullet to the left of each list item) will display the correct color value in print for Firefox and Safari, even though the text itself won’t match! So at least here you can use the markers to see what the color was supposed to be…

In Opera 9, gray shades render accurately up until rgb(185, 185, 185), and then higher values default to black. In the points tested, the same conversion to black happens in various other colorspaces at different points. For instance, color values higher than rgb(127, 211, 211), rgb(255, 156, 156), rgb(87, 255, 255), rgb(209, 209, 0), rgb(193, 193, 127) and rgb(177, 177, 255) will stop rendering their expected colors and just print black instead, thank you very much.

IE7 never gets any lighter than rgb(108, 104, 102) for grayscale, and the rest of the color spaces don’t seem to allow anything lighter than a midrange hue equivalent in any given color range.

Since all the major browsers have made the assumption that you’ve neglected to pay appropriate attention to your print output with regard to color and contrast, you have to live with that and deal with some fairly tricky constraints. One argument is to give in and just go for all black text on all white paper, and certainly there’s an argument for that in terms of readability and performance. But for that argument we should all be designing white web pages with black text too and just toss out all our assumptions about color theory, design, and inspiration. We know clearly that the primary function and goal for printing a page is for reading purposes, but what if you wanted to do something else. Something more artistic, perhaps? For truly accurate printing from the Web, you may want to stick with PDF or similar output. But there’s still plenty we can do with print using plain-old HTML and CSS, and it can be an interesting academic exercise to try to design within these constraints. Think of it as a challenge that will make your professional world that much more interesting!