AMB Album

We love beautiful typography, and we appreciate the efforts of designers who come up with great typographic techniques and tools or who just share their knowledge with fellow designers. We are always looking for such resources. We compile them, carefully select the best ones and then prepare them for our round-ups. And now it’s time to present a beautiful fresh dose of typography-related resources.

To help you improve the typography in your designs, we’re presenting here useful new articles, tools and resources related to typography. You will learn the fundamentals of typography, find out how to combine fonts and know what to keep in mind when choosing a typeface. We also present typography-related slideshows, glossaries, layouts and experiments.

You may be interested in the following related posts:

• 50 Useful Design Tools For Beautiful Web Typography
• 25 New High Quality Free Fonts
• Typographic Design Patterns and Best Practices
• Useful Glossaries For Web Designers and Developers

[By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]

Typography: References and Useful Resources

The Taxonomy of Type
This article’s purpose is to help us as designers to distinguish basic properties of types. It explains the type classification and provides examples of each type. Short, but nice article.

Typedia: A Shared Encyclopedia of Typefaces
Typedia is a resource to classify, categorize, and connect typefaces. It is a community website to classify typefaces and educate people about them, very much like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

Typeface Anatomy and Glossary
Many fonts have abbreviations in their names. Some relate to glyph sets and font formats, others to design traits and foundries, and so on. A comprehensive list of these abbreviations and their explanation can be found in The Abbreviated Typographer from Unzipped.

Typographic Marks Unknown
There are many typographic marks which are familiar to most, but understood by few. Most of these glyphs have interesting histories and evolutions as they survived the beatings given to them through rushed handwriting of scribes and misuses through history. They now mostly live on our keyboards and in our software, and a few are used often, so it seems only fitting to know where they come from and how to correctly use them.

Periodic Table of Typefaces
A reference table for most popular typefaces and their classifications.

Fonts for iPad & iPhone
This reference table features all fonts that are available on iPhone, iPod Touch and iPad.

Font Anatomy (Wallpaper)
A nice overview of all typographic terms and subtleties. Do you know what an ‘arm’ or ‘beak’ is? Time to find out.

Typographic Rules Checklist (PDF)
Useful typographic checklist that contains not only some general typographic rules, heuristics and guidelines, but also reminders for typography in your projects.

Typography Checklist (PDF)
Compiled by Jason DewinetzIf, this list contains some useful typographic checks that you may want to consider for before launching your next project or printing your next brochure or book.

So You Need A Typeface (Infographics)
A nice infographics that can actually help you select a typeface for your design work. You may want to search for the path to Comic Sans.

Finding The Right Type

The Right Font for the Job
A few years ago, you had to make a decision between TrueType or PostScript and Mac or Windows. Today, the choice is usually fairly simple: OpenType is the most convenient and full-featured font format, compatible with all modern screen and print workflows. All the extras that are commonly spread across multiple PostScript or TrueType files can live in one OpenType file. Best of all, OpenType is a truly cross-platform format. You can use the same font on Mac or Windows machines without converting the font or fearing reflow.

Erik Spiekermann’s Typo Tips
With the invention of “desktop publishing”, designers found themselves setting type on their computers for the first time. Until then, they had made type specifications for typesetters and left the job up to the professionals. As a result, you can still see classic inaccuracies in typesetting, even in top-quality printed matter. Here you will find some tips from Erik Spiekermann, designer of FF Meta¨, Meta Design founder, co-author of ’stop Stealing Sheep”, and a FontShop founder, which will prevent some of the more obvious blunders.

Thirteen Ways of Looking at a Typeface
For the first ten years of my career, I worked for Massimo Vignelli, a designer who is legendary for using a very limited number of typefaces. Between 1980 and 1990, most of my projects were set in five fonts: Helvetica (naturally), Futura, Garamond No. 3, Century Expanded, and, of course, Bodoni.

Picking Type for Web
Picking Type for Web As a part of the visual design process for MIX Online’s upcoming redesign, I’ve been experimenting with typography. The task of finding a typeface that’s both aesthetically pleasing and legible, however, is a tricky one.

How To Choose A Font
Have you ever had the problem of not knowing what typeface to use? Well of course you have, everyone has. This is a guide on how to choose a font. These pointers have been gathered from Robin Williams great book “The Non-Designers Type Book” that I recommended in the top 5 typography resources of all time. Have a think about each of these before choosing your next font.

On Choosing Type
Typography is not a science. Typography is an art. There are those who”d like to ’scientificize”; those who believe that a large enough sample of data will somehow elicit good typography. However, this sausage-machine mentality will only ever produce sausages. That typography and choosing type is not a science trammeled by axioms and rules is a cause to rejoice.

Combining Type

Fundamentals: Combining Type With Helvetica
With this issue of FontShop Fundamentals we debut Guest FontLists. Building on our own lists, we asked experts we admire to round up typefaces that share a common use, style, or concept.

Four Ways to Mix Fonts
Is there a way to know what fonts will work together? Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting. Here are four tips for navigating the typographic ocean, all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.

How do I choose paring fonts ?
When I have to chose type for a project, I always rely on my feelings and lots of testing, wating for the love/hate Alchemy to happen and decide for me. This method, mostly based on luck, is often time consuming, and I often found myself needing to ask for help on the forums.

Type Design

Beginner’s Guide to OpenType
OpenType (OT) is a cross-platform type format that includes expert layout features to provide richer linguistic support and advanced typographic control. Using OT technology you can substitute your characters for different glyphs1 using many different methods; Ligatures, Small Caps, Oldstyle Figures, Fractions, Superscript/Subscript, Ordinals, Alternates, Titling Characters and many more. This beginner’s guide will help to illustrate some of the more common features found in OT fonts and when they should be used.

Making Geometric Type Work
For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. This is the same route I took when dissatisfied with the limits of commercial fonts at the time. I twisted and distorted each character to fit into a few simple, incredibly strict rules of construction. Invariably this produced a wide range of exotic letterforms, some more legible that others.

A few things I’ve learned about typeface design
Teaching on a postgraduate course feels very much like a spiral: the annual repetition of projects, each a vehicle for a journey of education and discovery for the student, blurs into cyclical clouds of shapes, paragraphs, and personalities. There seems to be little opportunity for reflection across student cohorts, and yet it is only this process that improves the process from one year to the next. Having passed the tenth anniversary of the MA Typeface Design programme was as good an opportunity as any to reflect, and ILT’s offer to publish the result an ideal environment to get some ideas out in the open. Although my perspective is unavoidably linked to the course at Reading, I think that the points I make have wider relevance.

Case-Study: The Making of Vesper
A nice case-study about the creation process of the Vesper typeface, from its designer Rob Keller. “Vesper was developed over the course of almost three years. For this article, I’ve divided the process into two stages: #1 during my studies at the University of Reading; and #2 After Reading. Hopefully through this highly-condensed-yet-still-rather-wordy account of this project you will learn some interesting bits regarding my first major type family, the design process, and the MATD program.”

Typographic Tools

TypeIt: Type accent marks, diacritics and foreign letters online
The service allows you to add typographic accents and special characters (e.g. punctuation marks) as you’re typing. Instead of clicking on buttons for the accents, you can also use pre-defined shortcuts, like Control + N, to insert the characters: just point your cursor to the desired character and you’ll see a tooltip.

Web Font Specimen
Because web type renders differently with only subtle CSS adjustments, seeing it exercised in a variety of ways can help web designers typesetÑand also help them decide which typefaces to purchase for their projects.

Typograph: Scale & Rhythm
This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.

TextMod 2.1
Unlike dummy text generators, in TextMod you can modify a real text to match your current character set and use it for testing your font. Your TextMod settings are stored in a cookie. By now, TextMod only works with Latin and Armenian.

Readability
Readability is a simple bookmarklet that makes reading on the Web more enjoyable by removing the clutter around what you’re reading.

Free Typographic XHTML/CSS-Layouts For Your Designs
A collection of beautiful typographic (X)HTML+CSS-based layouts created by the design community and released for free.

Typography Keyboard Layout
A simple, yet useful tool that lets you enter characters that are usually unavailable on a keyboard with ease. Hopefully it will help you achieve better typography in your designs.

{ font-family }
A resource for web developers and designers to provide recommendations for alternatives in the font-family CSS style.

EmChart
This tool maps the ratio between your base size and your child elements font size.

MyFontbook, A Browser-Based Free Font Viewer
myFontbook is a free tool for viewing, classifying and organizing fonts installed on your system from your web browser.

Font Finder
FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

Unicode Codepoint Chart
This chart is broken down neatly by type of character and symbol (and by language in many cases), with a visual reference under each category. From there, just click on the symbol or character you want and you’re brought to a page with detailed information about the character, along with a browser test page, an outline (in SVG format) and a variety of encodings and character sets (HTML entity, UTF-8, UTF-16, UTF-32, ISO-8859-8, etc.).

Create Your Own @font-face Kits
An online generator for creating ready-to-use kits for your fonts, using @font-face.

XHTML Character Entity Reference
This page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C.

HTML Entity Character Lookup
Using HTML entities is the right way to ensure all the characters on your page are validated. However, often finding the right entity code requires scanning through 250 rows of characters. This lookup allows you to quickly find the entity based on how it looks, e.g. like an < or the letter c.

CopyPasteCharacter.com
This page allows you to copy one or multiple special characters and paste them in your applications.

Surveys and Research

Typographic Design Patterns and Best Practices
Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and paddingÉ The list goes on and on.

Visual Search and Reading Tasks Using ClearType and Regular Displays
An academic paper exploring the usability performance of ClearType vs. Regular displays. Result: For most users ClearType-enhanced text produces a significant improvement in performance times on tasks involving extended eye-on-text interactions.

‘Font’ vs. ‘Typeface’: font terms survey results
According to this study, the overall opinion is that in today’s world of digital typography “a typeface” means the general design, including all its styles, regardless of how it’s instantiated, while “a font” means a single style of a typeface, such as Myriad bold condensed italic, in a specific file format. However, this is not necessarily true.

Font or Typeface?
As we”re collaborating with multiple authors on the FontFeed, we compiled a list of guidelines for ourselves and guest contributors. One of our concerns is that we should attempt to ’speak the same language” when using typographic and related terms. Because these terms evolved over a considerable period of time and saw several transitions in technology, they can sometimes be interpreted in varying ways. This resulted in a terminology that is often perceived as at best esoteric, at worst plain confusing.

Rules for good and beautiful typography

A Guide to Web Typography
Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.

The Principles of Beautiful Typography
For most people, typography is simply about arranging a familiar set of shapes to make words, sentences, and paragraphs. Having the ability to set type with only a few strokes on a keyboard has allowed us to forget about the creative and artistic possibilities of this medium.

Simple rules for good typography
Here are some basic rules to improve your typography across either web or print. Of course, these rules are only to start with, and rules are meant to be broken. But if you want something to look neat, clean and generally well designed they are a good set to follow.

Typography is the backbone of good web design
An overview of some typographic techniques to keep in mind for your next website design.

A 20 Minute Intro to Typography Basics
“Typography plays a big role in graphic design and can be one of the hardest things to get right. My aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.”

11 Essential Tips for Good Print Typography
Typography is a huge part of design and design is a huge part of type. You can”t just throw text on a page, it has to be laid out and organized in a clean way that adds to the information being presented. Here are 11 typography tips to help you convey information in print the right way.

It’s Type O’clock!
“One of the key qualities of a good information designer is attention to details and since typography is the new cool trend we now seem to care more than ever about presenting text online correctly. The following article is based on my personal experience, yet there’s great probability that much of the following has already been said by somebody else. What you’ll find here is a few tricks for setting type on web I’ve learned over the past few months some of which, amazingly enough, I hardly ever see being used.”

What is typography today?
“Most people think Typography is about designing and selecting fonts. This is true as far as architecture is about designing or selecting furniture. In reality neither is a purpose but a means to an end. That end with architecture is (hopefully) accommodating its inhabitants, for typography it is accommodating the human mind, making the reader read, the viewer watch (not only look), drawing and keeping the attention.”

The Ails Of Typographic Anti-Aliasing
As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, we”ll have to rely on software advances to fix these problems.

Type-Inspired Interfaces
One of the things that terrifies me most about a new project is the starting point. How is the content laid out? What colors do I pick? Once things like that are decided, it becomes significantly easier to continue design, but it’s the blank page where I spend the most time. To that end, I often start by choosing type.

CSS and Font Embedding

Revised Font Stack
Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.

Becoming a Font Embedding Master
I’ve spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process.

Web Font User Guide
An extensive reference guide for designers, developers and system administrators. It explains how to get started using Web fonts for display on your website. It also contains information for system administrators about which configuration changes may be necessary to successfully serve webfonts from your web server.

Inspiration: Showcases, Blogs etc.

we love typography
A showcase of type, typography, lettering, and signage.

FINDINGS
Yet another blog featuring beautiful typography.

typo/graphic posters
typo/graphic posters is a directory of typographic and graphic posters.

The Journal of Urban Typography
TJOUT is dedicated to the documentation and study of signs, word fragments, and typography created with utilitarian intent in urban environments.

Pressing Letters: A Collection of Inspirational Letterpress
The project is an effort to catalog work and promote creativity in the letterpress community. Anyone can submit their letterpress work, references, tips and links. The website has many different categories, including business cards, books, calendars, identity design, music sleeves, stationery and posters. A blog definitely worth bookmarking and visiting regularly.

Alltop: Top Typography News
An aggregator of typography-related news, articles and tools.

Last Click: Typography-Related… Games!

FontTrainer
An interesting tool that help to train you pay attention to subtle differences between fonts.

Your Personality, Summarized in a Typeface
If you’ve ever sat down with a type designer, what you quickly realize is that they rarely talk about fonts in purely aesthetic or even functional terms: They talk about assertiveness or calm or friendliness. In short, they talk about personality traits. It makes sense, then, that your personality could be translated into a typeface. And Pentragram has done just that, in this lovely microsite, What Type are You? (Password: Character)

TypePong
TypePong is a retro iPhone gaming with a modern twist. It allows you to play PingPong with your favourite fonts. You can also challenge your friends and the world on our global score board.

Deep Font Challenge
Are you a sharp shootin’ font-master or a no-good calamity who can’t spell Futura? To prove your design know how, shoot the font mounted on a target which is displayed on the banner. Points are scored for each successful round and the speed with which you complete it… but be warned, during the game the tables will turn, so keep on your toes.

Related Posts

You may be interested in the following related posts:

• 50 Useful Design Tools For Beautiful Web Typography
• 25 New High Quality Free Fonts
• Typographic Design Patterns and Best Practices
• Useful Glossaries For Web Designers and Developers

---

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | 5 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: typography

Smashing

In Modern CSS Layouts, Part 1: The Essential Characteristics, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today’s most successful CSS-based web pages.

Just as in the previous article, we’re not going to be talking about design trends and styles; these styles are always changing. Instead, we’re focusing on the specific techniques that you need to know to create modern CSS-based web pages of any style. For each technique or tool, we’ll indicate which of the five characteristics it helps meet. To keep this shorter than an encyclopedia, we’ll also just cover the basics of each technique, then point you to some useful, hand-picked resources to learn the full details.

You can jump straight to:

• CSS3
• HTML5
• IE Filtering
• Flexible Layouts
• Layout Grids
• Efficient CSS Development Practices
• CSS Performance
• Font Embedding and Replacement

CSS3

CSS3, the newest version of CSS that is now being partially supported by most browsers, is the primary thing you need to know in order to create modern CSS web sites, of course. CSS is a styling language, so it’s no surprise that most of what’s new in CSS3 is all about visual effects. But CSS3 is about more than progressive enhancement and pretty typography. It can also aid usability by making content easier to read, as well as improve efficiency in development and page performance.

There are too many CSS3 techniques to cover in a single article, let alone an article that isn’t just about CSS3! So, we’ll go through the basics of the most important or supported CSS3 techniques and point you to some great resources to learn more in-depth.

CSS3 Visual Effects

Semi-transparent Color
Aids in: progressive enhancement, efficiency

RGBA allows you to specify a color by not only setting the values of red, green, and blue that it’s comprised of, but also the level of opacity it should have. An alternative to RGBA is HSLA, which works the same way, but allows you to set values of hue, saturation, and lightness, instead of values of red, green, and blue. The article Color in Opera 10 — HSL, RGB and Alpha Transparency explains how HSLA can be more intuitive to use than RGBA.

The 24 Ways web site makes extensive use of RGBA to layer semi-transparent boxes and text over each other.

RGBA or HSLA isn’t just about making things look cool; it can also improve your web site’s efficiency. You don’t have to take time to make alpha-transparent PNGs to use as backgrounds, since you can just use a color in the CSS, and the user agent doesn’t have to download those images when loading the site.

For more on how to use RGBA and HSLA, including fallback methods for browsers that don’t support it, see:

• Working With RGBA Colour (24 ways)
• RGBa Browser Support (includes a hack for IE, by CSS-Tricks)
• Flexible Color Schemes in Layouts with RGBa (Build Internet!)
• Is CSS3 RGBa ready to rock? (screencast) (For a Beautiful Web)
• Playing Around with CSS3 Colors (Lateral Code)
• Color in Opera 10 — HSL, RGB and Alpha Transparency (Opera Developer Community)
• CSS3 HSL & HSLA (Zen Elements)

Styling Backgrounds and Borders
Aids in: progressive enhancement, efficiency

CSS3 offers a whole host of new ways to style backgrounds and borders, often without having to use images or add extra divs. Most of these new techniques already have good browser support, and since they’re mainly used for purely cosmetic changes, they’re a good way to get some progressive enhancement goodness going in your sites right away.

Here are some of the new things CSS3 lets you do with backgrounds:

• Multiple backgrounds on a single element: You can now add more than one background image to an element by listing each image, separated by commas, in the background-image property. No more nesting extra divs just to have more elements to attach background images onto!
• More control over where backgrounds are placed: The new background-clip and background-origin properties let you control if backgrounds are displayed under borders, padding, or just content, as well as where the origin point for background-position should be.
• Background sizing: You can scale background images using the new background-size property. While scaling won’t look good on many background images, it could be really handy on abstract, grunge-type backgrounds, where tiling can be difficult and where some image distortion would be unnoticeable.
• Gradients: While just part of a CSS3 draft spec, Safari, Chrome and Firefox support declaring multiple color and placement values in the background-image property to create gradients without images. This allows the gradients to scale with their container — unlike image gradients — and eliminates the need for page users to download yet another image while viewing your site.

CSS3 lets you do the following with borders:

• Rounded corners: Use the border-radius-property to get rounded corners on divs, buttons, and whatever else your heart desires — all without using images or JavaScript.
• Images for borders: With CSS 2.1, the only way to create a graphic border was to fake it with background images, often multiple ones pieced together on multiple divs. You can now add unique borders without having to use background images by adding the images to the borders directly, using the new border-image property, which also allows you to control how the images scale and tile.

The border-radius property can be used to round corners and even create circles out of pure CSS, with no images needed. (Stunning CSS3 web site)

These background and border techniques have already been covered well in a lot of great articles and tutorials, so check these out for the details:

• Backgrounds In CSS: Everything You Need To Know
• Take Your Design To The Next Level With CSS3
• CSS3 borders, backgrounds and box-shadows (Opera Developer Community)
• Background images no longer restricted to original size: explore the space with background-size (Mozilla Developer Center)
• Multiple Backgrounds and CSS Gradients (Snook.ca)
• Quick Tip: Understanding CSS3 Gradients (Nettuts+)
• Using gradients (Mozilla Developer Center)
• Speed Up with CSS3 Gradients (CSS-Tricks)
• Gradient syntax generators are available from westciv.com (linear and radial) and glrzad.com
• The CSS3 border-radius property (Blogging CSS)
• CSS: border-radius and -moz-border-radius (The Art of Web)
• Table of CSS3 border-radius Compliance (Muddled Ramblings and Half-Baked Ideas)
• border-image in Firefox (John Resig)
• Meet a ninja living in browsers (on border-image, from lrbabe.com)
• The New Hotness: Using CSS3 Visual Effects (see third tutorial on border-image)

Drop Shadows
Aids in: progressive enhancement, adaptability, efficiency

Drop shadows can provide some visual polish to your design, and now they’re possible to achieve without images, both on boxes and on text.

The box-shadow property has been temporarily removed from the CSS3 spec, but is supposed to be making its re-appearance soon. In the meantime, it’s still possible to get image-free drop shadows on boxes in Firefox and Safari/Chrome using the -moz-box-shadow and -webkit-box-shadow properties, respectively, and in Opera 10.5 using the regular box-shadow property with no prefix. In the property, you set the the shadow’s horizontal and vertical offsets from the box, color, and can optionally set blur radius and/or spread radius.

The Cherry web site uses drop shadows created with box-shadow on many boxes and buttons.

The text-shadow property adds drop shadows on — you guessed it — text. It’s supported by all the major browsers except — you guessed it — Internet Explorer. This makes it the perfect progressive enhancement candidate — it’s simply a visual effect, with no harm done if some users don’t see it. Similarly to box-shadow, it takes a horizontal offset, vertical offset, blur radius and color.

Using text-shadow keeps you from resorting to Flash or images for your text. This can speed up the time it takes you to develop the site, as well as speed up your pages. Avoiding Flash and image text can also aid accessibility and usability; just make sure your text is still legible with the drop shadow behind it, so you don’t inadvertently hurt usability instead!

For more on box and text drop shadows, see:

• Take Your Design To The Next Level With CSS3
• Shadow boxing with -moz-box-shadow (relevant to non-Mozilla browsers to, from hacks.mozilla.org)
• CSS3 Trials: Box-Shadow And More (Chris Casciano’s Place Name Here)
• CSS3 Box Shadow in Internet Explorer [Blur-Shadow] (Chris Casciano’s Place Name Here)
• Mozilla Developer Center text-shadow (includes browser support chart and notes)
• Text-Shadow Exposed: Make cool and clever text effects with css text-shadow (Kremalicious)
• Using Text Shadow in HTML/CSS (includes a hack for IE, by admixWeb)
• Westciv’s box-shadow and text-shadow generators

Transforms
Aids in: progressive enhancement, adaptability, efficiency

CSS3 makes it possible to do things like rotate, scale, and skew the objects in your pages without resorting to images, Flash, or JavaScript. All of these effects are called “transforms.” They’re supported in Firefox, Safari, Chrome, and Opera 10.5.

You apply a transform using the transform property, naturally (though for now you’ll need to use the browser-specific equivalents: -moz-transform, -webkit-transform, and -o-transform). You can also use the transform-origin property to specify the point of origin from which the transform takes place, such as the center or top right corner of the object.

In the transform property, you specify the type of transform (called “transform functions”), and then in parentheses write the measurements needed for that particular transform. For instance, a value of translate(10px, 20px) would move the element 10 pixels to the right and 20 pixels down from its original location in the flow. Other supported transform functions are scale, rotate, and skew.

The BeerCamp SXSW 2010 site scales and rotates the sponsor logos on hover.

For the full syntax on these transform functions, as well as examples of how to use them, see:

• What You Need To Know About Behavioral CSS
• CSS3 transitions and 2D transforms (Opera Developer Community)
• CSS: Animation Using CSS Transforms (The Art of Web)
• Mozilla Developer Center -moz-transform (includes notes and links on using the more complicated matrix function)
• Going Nuts with CSS Transitions (24 Ways)
• Text Rotation with CSS (Snook.ca)
• The New Hotness: Using CSS3 Visual Effects
• 3D Transforms (Surfin’ Safari)
• Westciv’s transforms generator

Animation and Transitions
Aids in: progressive enhancement, efficiency

Animation is now no longer the solely the domain of Flash or JavaScript — you can now create animation in pure HTML and CSS. Unfortunately, CSS3 animation and transitions do not have very good browser support, but as with most of the effects we’ve talked about so far, they’re great for adding a little non-essential flair.

CSS3 transitions are essentially the simplest type of animation. They smoothly ease the change between one CSS value to another over a specified duration of time. They’re triggered by changing element states, such as hovering. They’re supported by Safari, Chrome, and Opera 10.5.

To create a transition, all you have to do is specify which elements you want to apply the transition to and which CSS properties will transition, using the transition-property property. You’ll also need to add a transition-duration value in seconds (“s” is the unit), since the default time a transition takes is 0 seconds. You can add them both in the transition shorthand property. You can also specify a delay or a timing function to more finely tune how the two values switch.

Transitions are easiest to understand with live examples, so check out:

• What You Need To Know About Behavioral CSS
• CSS3 Transitions – Are We There Yet? (hakoniemi)
• CSS3 transitions and 2D transforms (Opera Developer Community)
• CSS Transitions 101 (Webdesigner Depot)
• CSS: Transition Timing Functions (The Art of Web)
• The New Hotness: Using CSS3 Visual Effects

Beyond transitions, full-fledged animations with multiple keyframes are also possible with CSS3 (but currently only supported in Safari/Chrome). First, you give the animation a name and define what the animation will do at different points (keyframes, indicated with percentages) through its duration. Next, you apply this animation to an element using the animation-name, animation-duration, and animation-interation-count properties. You could also set a delay and timing function, just like with transitions. For details, see:

• What You Need To Know About Behavioral CSS
• Pushing Your Buttons With Practical CSS3
• CSS Animations (24 Ways)
• CSS Animation (Surfin’ Safari)
• CSS3 In Transition (a brief article on the usability considerations of animation and transitions, by Trent Walton)
• 50 Awesome Animations made with CSS3 (1stwebdesigner)

CSS3 Usability / Readability Enhancements

Most the CSS3 techniques we’ve gone over so far have been purely cosmetic effects that aid progressive enhancement. But CSS3 can also be used to improve the usability of your pages.

Creating Multiple Columns of Text
Aids in: progressive enhancement, adaptability

Some pieces of text are more readable in narrow, side-by-side columns, similar to traditional newspaper layout. You can tell the browser to arrange your text into columns by either defining a width for each column (the column-width property) or by defining a number of columns (the column-count property). Other new properties let you control gutters/gaps, rule lines, breaking between columns and spanning across columns. (For now, you need to use the browser-specific prefixes of -moz and -webkit.) This is another one of those techniques that can harm instead of aid usability if used improperly, as explained in “CSS3 Multi-column layout considered harmful,” so use it judiciously.

For details, see:

• Remembering: The CSS3 Multi-Column Layout Module (Web Designer Notebook)
• Columns (quirksmode)
• Take Your Design To The Next Level With CSS3

Controlling Text Wrapping and Breaking
Aids in: adaptability

CSS3 gives you more control over how blocks of text and individual words break and wrap if they’re too long to fit in their containers. Setting word-wrap to break-word will break a long word and wrap it onto a new line (particularly handy for long URLs in your text). The text-wrap property gives you a number of options for where breaks may and may not occur between words in your text. The CSS2 white-space property has now in CSS3 become a shorthand property for the new white-space-collapse and text-wrap properties, giving you more control over what spaces and line breaks are preserved from your markup to the rendered page. Another property worth mentioning, even though
it’s not currently in the CSS3 specification, is text-overflow, which allows the browser to add an ellipsis character (…) to the end of a long string of text instead of letting it overflow.

For details, see:

• Mozilla Developer Center’s reference on word-wrap and white-space (relevant to non-Mozilla browsers, and includes notes on browser compatibility)
• How to prevent HTML tables from becoming too wide (using word-wrap and overflow for various browsers, from 456 Berea Street)
• Wrapping Text Inside Pre Tags (using white-space and word-wrap for various browsers, from Unwakeable)
• The ‘white-space’ Property In CSS (Safalra’s Website)
• CSS text-overflow (css3.com)
• Using ellipsis with HTML and CSS (The Electric Toolbox)
• The Future Of CSS Typography

Media Queries
Aids in: adaptability, efficiency

CSS2 let you apply different styles to different media types — screen, print, and so on. CSS3’s media queries take this a step further by letting you customize styles based on the user’s viewport width, display aspect ratio, whether or not his display shows color, and more. For instance, you could detect the user’s viewport width and change a horizontal nav bar into a vertical menu on wide viewports, where there is room for an extra column. Or you could change the colors of your text and backgrounds on non-color displays.

This demo file from Opera uses media queries to rearrange elements and resize text and images based on viewport size.

Media queries couldn’t come at a better time — there is more variety in the devices and settings people use to browse the web than ever before. You can now optimize your designs more precisely for these variations to provide a more usable and attractive design, but without having to write completely separate style sheets, use JavaScript redirects, and other less efficient development practices.

Media queries are supported to some degree by all the major browsers except IE, and there are lots of great articles and tutorials explaining how to use them right now:

• A short introduction to media queries in Firefox 3.5 (applies to other browsers too, from Mozilla Hacks)
• Safe media queries (Opera Developer Community)
• The bleeding edge of web: media queries (Helephant.com)
• Media Queries and CSS3 Experiments — Varying Columns (Unintentionally Blank)
• CSS3 – a big storm is coming (Reinhold Weber) and Using CSS3 media queries to achieve multiple columns on browser resize (mindgarden) show how to use the new multiple columns technique described above in conjunction with media queries
• Take Your Design To The Next Level With CSS3
• Test your browser’s media queries support at Virtuelvis

Media queries are particularly helpful in serving alternate styles to small-screen mobile devices, as these articles and tutorials explain:

• Return of the Mobile Stylesheet (A List Apart)
• Coding for the mobile web (Think Vitamin)
• How to serve the right content to mobile browsers (Opera Developer Community)
• Optimizing Web Content (on iPhone, from Safari Web Content Guide)
• Mobile optimised websites using CSS3 Media Queries (Alex Gibson)
• Determine iPhone orientation using CSS (The CSS Ninja)

For other options on how to deal with mobile devices, see Mobile Web Design Trends For 2009.

Improving Efficiency Through CSS3

Many of the visual effect properties of CSS3 that we’ve gone over have a great bonus in addition to making your design look great: they can improve efficiency, both in your development process and in the performance of the pages themselves.

Any CSS3 property that keeps you from having to create and add extra images is going to reduce the time it takes you to create new pages as well as re-skin existing ones. Less images also mean less stuff for the server to have to send out and less stuff for the users to download, both of which increase page loading speed.

CSS3 properties that keep you from having to add extra divs or extra classes can also reduce your development time as well as file size. We’ve already gone over some great techniques that help with this, but there are a few more worth mentioning.

The box-sizing Property
Aids in: efficiency

In addition to the div-conserving properties we’ve already talked about, the box-sizing property can also help limit your div use in certain situations.

In the traditional W3C box model of CSS 2.1, the value you declare for a width or height controls the width or height of the content area only, and then the padding and border are added onto it. (This is called the content-box model.) If you’ve worked with CSS for a while, you’re probably used to the content-box box model and don’t really think much about it. But, it can lead you to add extra divs from time to time. For instance, if you want to set a box’s width and padding in different units of measurement from each other, like ems for the width and pixels for the padding, it’s often easiest to nest another div and apply the padding to this instead, to make sure you know how much total space the box will take up. In small doses, nesting additional divs simply to add padding or borders is not a great sin. But in complicated designs, the number of extra divs can really add up, which adds to both your development
time and the file size of the HTML and CSS.

Setting the new box-sizing property to border-box instead of content-box solves this problem so you can get rid of all those extra divs. When a box is using the border-box box model, the browser will subtract the padding and border from the width of the box instead of adding it. You always know that the total space the box takes up equals the width value you’ve declared.

In the traditional box model (bottom image), padding and border are added onto the declared width. By setting box-sizing to border-box (top image), the padding and border are subtracted from the declared width.

The box-sizing property has good browser support, with the exception of IE 6 and IE 7. Unlike the more decorative CSS3 properties, however, lack of support for box-sizing could cause your entire layout to fall apart. You’ll have to determine how serious the problem would be in your particular case, whether it’s worth living with or hacking, or whether you should avoid using box-sizing for now.

For details, see:

• CSS3 box-sizing attribute (Helephant.com)
• CSS3 ‘box-sizing’ concept (James Hopkins)

CSS3 Pseudo-Classes and Attribute Selectors
Aids in: progressive enhancement, efficiency, modularity, rich typography

CSS has several really useful selectors that are only now coming into common use. Many of these are new in CSS3, but others have been around since CSS2, just not supported by all browsers (read: IE) until recently, and thus largely ignored. IE still doesn’t support them all, but they can be used to add non-essential visual effects.

Taking advantage of these newer, more advanced selectors can improve your efficiency and make your pages more modular because they can reduce the need for lots of extra classes, divs, and spans to create the effects you want to see. Some selectors even make certain effects possible that you can’t do with classes, such as styling the first line of a block of text differently. These types of visual effects can improve the typography of your site and aid progressive enhancement.

[IMAGE?]

For details, see:

• Take Your Design To The Next Level With CSS3
• Taming Advanced CSS Selectors
• CSS 3 selectors explained (456 Berea Street)
• Browser support charts from kimblim.dk and l-c-n.com
• Keith Clark’s ie-css3.js emulates support for all CSS3 pseudo selectors to IE, via JavaScript

Read these articles and tutorials for examples of how to put advanced selectors to practical use right now:

• Cleaner Code with CSS3 Selectors (24 Ways)
• A Look at Some of the New Selectors Introduced in CSS3 (Inspect Element)
• Image management, naming and attribute selectors (For a Beautiful Web)
• CSS 3 attribute selectors (Opera Developer Community)
• Styling a Poem with Advanced CSS Selectors (Web Designer Notebook)

HTML5

Although this article is focused on modern CSS techniques, you can’t have great CSS-based web pages without great markup behind them. Although HTML5 is still in development, and although debate continues about its strengths and weaknesses, some web developers are already using it in their web pages. While HTML 4.01 and XHTML 1.0 are still great choices for the markup of your pages, it’s a good idea to start learning what HTML5 has to offer so you can work with it comfortably in the future and perhaps start taking advantage of some of its features now. So, here is a brief overview of how HTML5 can help with our five modern CSS-based web design characteristics (progressive enrichment, adaptive to diverse users, modular, efficient, typographically rich).

Note: Many of these techniques are not supported in enough browsers yet to make their benefits really tangible, so think of this section as, perhaps, “here’s how HTML5 can aid these five characteristics in the future.”

New Structural Markup

Aids: adaptability, modularity, efficiency

HTML5 introduces a number of new semantic elements that can add more structure to your markup to increase modularity. For instance, inside your main content div you can have several article elements, each a standalone chunk of content, and each can have its own header, footer, and heading hierarchy (h1 through h6). You can further divide up an article element with section elements, again with their own headers and footers. Having clearer, more semantic markup makes it easier to shuffle independent chunks of content around your site if needed, or syndicate them through RSS on other sites and blogs.

In the future, as user agents build features to take advantage of HTML5, these new elements could also make pages more adaptable to different user scenarios. For instance, web pages or browsers could generate table of contents based on the richer hierarchy provided by HTML5, to assist navigation within a page or across a site. Assistive technology like screen readers could use the elements to help users jump around the page to get straight to the important content without needing “skip nav” links.

Although many of these benefits won’t be realized until some unforeseen time in the future, you can start adding these new elements now, so that as soon as tools pop up that can take full advantage of them, you’ll be ready. Even if your browser doesn’t recognize an element, you can still style it — that’s standard browser behavior. Well, in every browser but IE. Luckily, you can easily trick IE into styling these elements using a very simple piece of JavaScript, handily provided by Remy Sharp.

Of course, you usually can’t depend on all your users having JavaScript enabled, so the very safest and most conservative option is to not use these new structural elements just yet, but use divs with corresponding class names as if they were these new elements. For instance, where you would use an article element, use a div with a class name of “article.” You can still use the HTML5 doctype — HTML5 pages work fine in IE, as long as you don’t use the new elements. You can then later convert to the new HTML5 elements easily if desired, and in the meantime, you can take advantage of the more detailed HTML5 validators. Also, using these standardized class names can make updating the styles easier for both you and others in your team, and having consistent naming conventions across sites makes it easier for users with special needs to set up user style sheets that
can style certain elements in a needed way.

For more on HTML5 markup, see:

• HTML5 and The Future of the Web
• HTML 5 Cheat Sheet (PDF)
• Coding A HTML 5 Layout From Scratch
• HTML5 id/class name cheatsheet (@boblet)
• HTML 5 structure — HTML 4 and XHTML 1 to HTML 5 (@boblet)
• HTML5 Doctor’s articles on header, section, aside, nav, footer
• @boblet’s articles on div, section, and article; nav, aside, figure, and footer; and header, hgroup, and h1-h6
• Bruce Lawson’s articles on converting his blog to HTML5, part 1 and part 2

Reducing JavaScript and Plug-in Dependence

Aids in: adaptability, efficiency

A number of the new elements and features in HTML5 make effects possible with pure markup that used to be possible only with JavaScript or various third-party plug-ins, like Flash or Java. By removing the need for JavaScript and plug-ins, you can make your pages work on a wider variety of devices and for a wider variety of users. You may also make your development process quicker and more efficient, since you don’t have to take the time to find the right script or plug-in and get it all set up. Finally, these techniques may be able to boost the speed of your pages, since extra files don’t have to be downloaded by the users. (On the other hand, some may decrease performance, if the built-in browser version is slower than a third-party version. We’ll have to wait and see how browsers handle each option now and in the future.)

Some of the features that reduce JavaScript and plug-in dependence are:

• New form elements and attributes. HTML5 offers a bunch of new input types, such as email, url, and date, that come with built-in client-side validation without the need for JavaScript. There are also many new form attributes that can accomplish what JavaScript used to be required for, like placeholder to add suggestive placeholder text to a field or autofocus to make the browser jump to a field. The new input types degrade to regular inputs in browsers that don’t support them, and the new attributes are just ignored, so it doesn’t hurt unsupporting browsers to start using them now.

  Of course, you’ll have to put in fallback JavaScript for unsupporting browsers, negating the “no JavaScript” benefits for the time being. (Or, depend on server-side validation—which you always ought to have in place as a backup behind client-side validation anyway—to catch the submissions from unsupporting browsers.) Still, they offer a nice usability boost for users with the most up to date browsers, so they’re good for progressive enhancement.

• The canvas element. The canvas element creates a blank area of the screen that you can create drawings on with JavaScript. So, it does require the use of JavaScript, but it removes the need for Flash or Java plug-ins. It’s supported in every major browser but IE, but you can make it work in IE easily using the ExplorerCanvas script.

• The video and audio elements. HTML5 can embed video and audio files directly, just as easily as you would add an image to a page, without the need for any additional plug-ins.

Some of the new input types in HTML5 will bring up widgets, such as the calendar date picker seen with the datetime input type in Opera, without needing any JavaScript. (HTML5 input types test page)

For more on these features, see:

• Get Ready for HTML 5 (covers forms and canvas, from A List Apart)
• A Form of Madness (Dive Into HTML5)
• Have a Field Day with HTML5 Forms (24 Ways)
• The webforms2 script adds support for the new form elements and attributes to browsers that don’t currently support them.
• How to Draw with HTML 5 Canvas (Carsonified)
• Canvas tutorial (Mozilla Developer Center)
• HTML 5 canvas – the basics (Opera Developer Community)
• The video element (HTML5 Doctor)
• Introduction to HTML5 video (Opera Developer Community)
• Native audio in the browser (HTML5 Doctor)

IE Filtering

Aids in: progressive enhancement

IE 6 doesn’t seem to be going away anytime soon, so if you want to really make sure your pages are progressively enhanced, you’re going to have to learn how to handle it. Beyond ignoring the problem or blocking IE 6 altogether, there are a number of stances you can take:

• Use conditional comments to fix IE’s bugs: You can create separate style sheets for each version of IE you’re having problems with and make sure only that version sees its sheet. The IE sheets contain only a few rules with hacks and workarounds that the browser needs.
• Hide all main styles from IE and feed it very minimal styles only: This is another conditional comment method, but instead of fixing the bugs, it takes the approach of hiding all the complex CSS from IE 6 to begin with, and only feeding it very simple CSS to style text and the like. Andy Clarke calls this Universal Internet Explorer 6 CSS.
• Use JavaScript to “fix” IE: There are a number of scripts out there that can make IE 6 emulate CSS3, alpha-transparent PNGs, and other things that IE 6 doesn’t support. Some of the most popular are ie7-js, Modernizr, and ie-css3.js.

In addition to the resources linked in the text above, you can learn more about how to handle IE at:

• How To Support Internet Explorer and Still Be Cutting Edge
• CSS3 Solutions for Internet Explorer
• How to Handle IE6: Aggressive Graceful Degradation (Monday by Noon)
• Definitive Guide to Taming the IE6 Beast (Six Revisions)
• Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs (Virtuosi Media)
• Conditional comments (quirksmode)
• Wrapping Your Head around Downlevel Conditional Comments (Perishable Press)

Flexible Layouts

Aids in: adaptability

One of the main ways you can make your sites adaptable to your users’ preferences is to create flexible instead of fixed-width layouts. We’ve already gone over how media queries can make your pages more adaptable to different viewport widths, but creating liquid, elastic, or resolution-dependent layouts can be used instead of or in conjunction with media queries to further optimize the design for as large a segment of your users as possible.

• Liquid layouts: Monitor sizes and screen resolutions cover a much larger range than they used to, and mobile devices like the iPhone and iPad let the user switch between portrait and landscape mode, changing their viewport width on the fly. Liquid layouts, also called fluid, change in width based on the user’s viewport (eg, window) width so that the entire design always fits on the screen without horizontal scrollbars appearing. The min-width and max-width properties and/or media queries can and should be used to keep the design from getting too stretched out or too squished at extreme dimensions.
• Elastic layouts: If you want to optimize for a particular number of text characters per line, you can use an elastic layout, which changes in width based on the user’s text size. Again, you can use min- and max-width and/or media queries to limit the degree of elasticity.

• Resolution-dependent layouts: This type of layout, also called adaptive layout, is similar to media queries, but uses JavaScript to switch between different style sheets and rearrange boxes to accommodate different viewport widths.

For details on creating flexible layouts, see:

• 70+ essential resources for creating liquid and elastic layouts (zomigi.com)
• Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
• Adaptive CSS-Layouts: New Era In Fluid Layouts?
• Resolution dependent layout update (The Man in Blue)
• Dynamic Layout (Fortes)
• Create Your Own Sliding Resizable Grid (Hackito Ergo Sum)

Layout Grids

Aids in: modularity, efficiency

Designing on a grid of (usually invisible) consistent horizontal and vertical lines is not new — it goes back for centuries — but its application to web design has gained in popularity in recent years. And for good reason: a layout grid can create visual rhythm to guide the user’s eye, make the design look more clean and ordered, and enforce design consistency.

Grids can also make your designs more modular and your development more efficient because they create a known, consistent structure into which you can easily drop new elements and rearrange existing ones without as much thought and time as it would take in a non-grid layout. For instance, all of your elements must be as wide as your grid’s column measurement, or some multiple of it, so you can easily move an element to another spot on the page or to another page and be assured that it will fit and look consistent with the rest of the design. At worst, you’ll need to adjust the other elements’ widths around it to a different multiple of the column measurements to get the new element to fit, but even this is not too work-intensive, as there is only a handful of pre-determined widths that any element can have.

All of the content of The New York Times site falls into a grid of five columns, plus a thin column on the left for navigation.

To learn how to use grids, see:

• Designing With Grid-Based Approach
• Grid-Based Design: Six Creative Column Techniques
• Grid design basics: Grids for Web page layouts (Opera Developer Community)
• Five simple steps to designing grid systems — Preface (five-part series, with tutorials on how to create fixed-width and fluid grids, by Mark Boulton)
• Fluid Grids (A List Apart)
• Grid-Based Web Design, Simplified (Design Informer)
• The Grid System (portal to articles, tools, templates, forum, and more)
• Ultimate Guide To Grid-Based Web Design: Techniques and Tools (Noupe)
• Roundup of CSS Grid Generators & CSS Grid Layout Generators (also includes list of grid articles, from Web Design Tools)
• Inspiration galleries Design By Grid and Grid Based Designs

Efficient CSS Development Practices

Aids in: modularity, efficiency

Layout grids and many of the CSS3 techniques we’ve gone over have the side benefit of making your CSS more modular and helping you write and maintain CSS more efficiently. There are also a few CSS development practices that you can use with any of the techniques we’ve already covered in order to reduce the time it takes you to write the CSS for those techniques in the first place, as well as save you time reusing components in your pages.

CSS Frameworks

A CSS framework is a library of styles that act as building blocks to create the standard pieces you might need in your site. While CSS frameworks differ greatly in depth and breadth, most popular, publicly-distributed frameworks contain some sort of layout grid, as well as standard styles for text, navigation, forms, images, and more. It’s a good idea to create your own CSS framework, perhaps based on one of the most popular ones; it can be as simple as standardizing the IDs and classes you tend to use on every project and creating a starter style sheet for yourself.

Good CSS frameworks provide you with a solid starting point for your designs, cutting down your time spent developing, testing, tweaking, and updating. They can also reduce the time others (your team members or those who inherit your sites) spend modifying your CSS, as everyone is working from a standard set of conventions. Frameworks can make your designs more modular by giving you a standard set of classes that can be reused from page to page easily, breaking the styles down into separate sheets that can be applied independently to pages on an as-needed basis, or allowing you to plug in various types of content without needing to invent new classes for it.

But, frameworks have their share of problems too. For instance, publicly-distributed (as opposed to your own private) frameworks tend to have large file sizes, as they need to work for any type of site with any type of content; if they’re separated into multiple sheets, they can further damage page speed since every HTTP request takes time. We won’t get into the full list of pros and cons here, but there are ways to work around many of them, so check out the following articles for the details. You’ll also find links to the most popular CSS frameworks.

• CSS Frameworks + CSS Reset: Design From Scratch
• Jump-start Your Development With CSS Frameworks (CSS Newbie)
• What Are The Benefits of Using a CSS Framework? (CSS-Tricks)
• CSS Frameworks (presentation from Web Directions South 2009)
• 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started (Noupe)
• Frameworks for Designers (considerations when making your own framework, from A List Apart)
• Guidelines for Developing Your Own CSS Framework (W3Avenue)
• Creating a Time Saving CSS Template (Arbenting)
• Why I don’t use CSS Frameworks (Warpspire)
• Please do not Use CSS Frameworks (Monday by Noon)
• What’s not to love about CSS frameworks? (JeffCroft.com)
• Making Modular Layout Systems (24 Ways)
• Definitive List of CSS Frameworks – Pick Your Style (W3Avenue)
• Compare CSS frameworks at bestwebframeworks.com

Object-oriented CSS (OOCSS)

Nicole Sullivan coined the term object-oriented CSS (OOCSS) for her method of creating self-contained chunks of HTML (modules) that can be reused anywhere in the page or site and that any class can be applied to. Some of the main principles of OOCSS are:

• using primarily classes instead of IDs
• creating default classes with multiple, more specific classes added on to elements
• avoiding dependent selectors and class names that are location-specific
• leaving dimensions off module styles so the modules can be moved anywhere and fit
• styling containers separately from content

OOCSS aims to make your CSS development more efficient, as well as to make the CSS itself more modular and less redundant, which reduces file sizes and loading speed.

• Object Oriented CSS (the original blog post, presentation, and framework, at stubbornella.com)
• Object Oriented CSS (OOCSS): The Lowdown (TYPESETT)
• Object-Oriented CSS: What, How, and Why (Nettuts)

CSS Generation

When it comes to writing CSS quickly, what could be quicker than having some piece of software write it for you? Now, please don’t think that I’m advocating not learning CSS and having a tool write a complete style sheet for you. That is a bad, bad idea. But, there are some quality tools out there that can give you a headstart with your CSS, just to shave a little time off the front of your CSS development process. Most good CSS generators are focused on creating styles for one particular area of your design, such as the layout structure or type styles, not the whole style sheet.

There are far too many tools to link to individually here, so remember when you’re finding your own tools to carefully review the CSS it outputs. If it’s invalid, bloated, or just plain ugly, don’t use the tool! Here are some articles that include lists of and links to CSS generators:

• 50 Extremely Useful And Powerful CSS Tools
• 35 CSS-Lifesavers For Efficient Web Design
• 50 Useful Design Tools For Beautiful Web Typography
• Zen Coding: A Speedy Way To Write HTML/CSS Code
• 50 Useful Tools and Generators for Easy CSS Development (speckyboy)
• List of Really Useful Tools for CSS Developers (W3Avenue)

CSS Performance

Aids in: efficiency

Your efficiently created CSS-based web sites also need to perform as efficiently as possible for your users. Many of the CSS3 techniques we’ve covered can reduce file sizes and HTTP requests to increase the speed of your pages. There are some additional CSS techniques you can use to boost performance.

CSS Compression

Writing clean CSS that takes advantage of shorthand properties, grouped selectors, and other efficient syntax is nothing new, but it remains very important for improving performance. There are also tricks some CSS developers employ to further reduce CSS file sizes, such as writing each rule on one line to reduce all the line breaks. Although you can do some of this manually, there are a number of tools that can optimize and compress your CSS for you.

For more on methods and tools to optimize and compress your CSS, see:

• 7 Principles Of Clean And Optimized CSS Code
• How To Automate Optimization and Deployment Of Static Content
• 10 Online Tools and Apps to Help Optimize and Format CSS (Speckyboy)
• 23 Resources for Clean and Compressed CSS (Vandelay Design Blog)
• Tools for concatenating and minifying CSS and JavaScript files in different development environments (Robert’s talk)
• Make your pages load faster by combining and compressing javascript and css files (rakaz)
• Single Line CSS (Ordered List)

CSS Sprites

CSS Sprites is a CSS technique named by Dave Shea of combining many (or all) of your site’s images into one big master image and then using background-position to shift the image around to show only a single image at a time. This greatly improves your pages’ performance because it greatly reduces the number of HTTP requests to your server. This is not a new technique, but it’s becoming increasingly important in modern CSS-based web sites as page performance becomes more and more important.

The Apple site uses CSS sprites for various states of its navigation bar.

For details, see:

• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them (CSS-Tricks)
• Case Study: The Power of CSS Sprites (Project83 Blog)

Not everyone is a fan of CSS sprites, however. For some opposing arguments, as well as alternative methods of reducing image HTTP requests, see:

• CSS Sprites: Useful Technique, or Potential Nuisance?
• CSS Sprites are Stupid – Let’s Use Archives Instead! (Firefox Demo) (kaioa.com)
• How to reduce the number of HTTP requests (Robert’s talk)

Font Embedding and Replacement

Aids in: progressive enhancement, rich typography

Until recently, web designers were limited to working with the fonts on their end users’ machines. We now have a number of techniques and technologies that make unique but still readable and accessible text possible.

The @font-face Rule

The @font-face rule, part of CSS3, allows you to link to a font on your server, called a “web font,” just as you can link to images, and displays text on your site in this font. You can now make use of your beautiful, unique fonts instead of just the fonts that most people already have installed on their machines. Fortunately, @font-face has good browser support. But alas, it’s not as simple as that. Different browsers support different types of fonts, different platforms and browsers anti-alias very differently, you can get a flash of unstyled text before the font loads, your font may not allow @font-face embedding in its license, and on and on it goes. To break through the confusion, see these articles:

• Beautiful fonts with @font-face (Mozilla Hacks)
• @font-face in Depth (User Agent Man)
• How to use CSS @font-face (includes links to articles on performance, from Nice Web Type)
• Mo’ Bulletproofer @Font-Face CSS Syntax (Readable Web)
• Becoming a Font Embedding Master (Snook.ca)
• Font Squirrel’s @font-face kits contain multiple versions of free fonts to accommodate different browsers, plus the CSS to make it work. They also have an @font-face generator to create your own kit.

Sam Howat’s site uses @font-face to get attractive non-standard fonts into the headings and intro blocks of text.

Blue Sky Resumes uses @font-face extensively in headings, feature copy, and the main nav bar of the site.

Other Font Embedding and Replacement Techniques

If the pure CSS solution of @font-face is making your head spin, you can use a font embedding service or font replacement technique.

• Font embedding services: There are a number of third-party font embedding services available that make use of @font-face, such as Typekit and Kernest, but make implementation easier by helping you work around the browser differences. They also all get around the legal issue of font embedding by providing you with a set of fonts that are licensed for this type of use and impossible or difficult for end users to steal. Most of these services are not free, but some have free options that give you access to a limited set of fonts.
• Font replacement techniques: These free techniques, such as sIFR and Cufón, do not make use of @font-face, but instead use scripting and/or Flash to display fonts that are not on the user’s machine. None of them directly address the licensing issue, but none of them link directly to ready-to-use fonts, so copyright legality is not clear-cut.

For links to these services and techniques, see:

• Rich Typography On The Web: Techniques and Tools
• Roundup of Font Embedding and Replacement Techniques (zomigi.com)

Conclusion

You’re now equipped with the basic knowledge and a slew of links to create modern CSS-based web pages that are progressively enriched, adaptive to diverse users, modular, efficient, and typographically rich. Go out and create great, modern work!

---

© Zoe Mickley Gillenwater for Smashing Magazine, 2010. | Permalink | 13 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3

Smashing

There is little doubt that WordPress is one of the most popular blogging and content management platforms out there today. This is not an article about WordPress, though, but rather a more general musing on one of its thought-provoking taglines: “Code Is Poetry.”

That’s an interesting metaphor. Recently, I’ve written about the different languages used by designers and developers, and also about the relationship between these coding languages and proper human language (specifically, English). As someone who graduated from university with a degree in English Literature and came to Web design in a roundabout way, this kind of thinking has always interested me.

As has this apparent connection between code and poetry. What does the metaphor mean? I took some time to really think about this relationship and discovered that the people at WordPress got it right (again). Code really is similar to poetry!

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

A Superficial Similarity

To start off, code and poetry have a somewhat obvious and entirely superficial similarity, and we may as well begin there. Here is a poem I wrote a few years ago:

A man in a suit,
standing on an old stone bridge,
sees the reflection
of himself in the water
flowing, unhindered, below.

I promise this will be the only work of mine that I include here, but let’s compare it to some snippets of simple code, starting with HTML:

<body>
  <div id=”content”>
    <h1>The Title</h1>
    <p>Some content</p>
  </div>
</body>

Now look at some CSS:

div {
  border: 1em 0px;
  background-color: #444
  border: 1px solid #222;
}

And finally some JavaScript:

function cubeMe(x){
  var answer = x*x*x;
  alert(answer);
}

I want to highlight two key elements: the short lengths and the prominent indentation. These are both common elements of poetry and code (though not absolutely necessary to either).

This comparison is superficial at best, and there is a much stronger connection to explore. Still, this basic similarity reveals a certain visual relationship between code and poetry, which gives us an interesting entry point to discuses the subject.

A Master’s Art

This code-is-poetry metaphor comes at least partly from a perception of poetry as the master’s craft. Whether you love or hate it (and I know a lot of people hate it), there has always been a general sense that poetry sits at the apex of the written word, as though poets sit in an ivory tower, composing lines with a golden pen.

Of course, the reality is strikingly different. A lot of really bad poetry is out there, written by people who call themselves poets just because they can rhyme words at the end of two lines.

Does that sound familiar?

How similar is this to the proverbial “nephew”? You know the one: that kid who read the introduction to a high-school textbook about the Web, figured out a few HTML tags and is now driving you crazy with his offer of a “Web design” for $100 and a six-pack of beer. Makes you want to tear your hair out, doesn’t he?

Anyone who has been at this Web design thing for a while (or at least anyone who takes themselves seriously) would agree that there’s more to the job than hacking out content wrapped in a bunch of poorly structured and entirely non-semantic HTML. For those of us who strive to be masters of our craft, code is so much more.

Code has purpose and meaning. It requires structure. It should be lightweight and elegant, not bogged down with lines and lines of garbage. Writing great code isn’t something that just happens. It takes discipline and work! It’s an art unto itself.

Feeling impassioned yet? If so, you might have the heart of a poet. I’ll tell you why.

Of Pen And Purpose

Every good poem has a purpose. The purpose need not be so lofty as to change the world or to establish a new school of thinking, but every good poem needs a purpose. Of course, nothing is surprising about this. Many mediocre and poor poems are written with a purpose. The difference is in execution.

If a poem is written for a particular purpose, then the composition should reflect that purpose. The structure, word choice, subject and tone should all work together to support the primary purpose. For example, the purpose of Coleridge’s “Kubla Khan” is to capture the imagery of one of the poet’s (opium-induced) dreams. It famously opens:

In Xanadu did Kubla Khan
A stately pleasure-dome decree:
Where Alph, the sacred river, ran
Through caverns measureless to man
Down to a sunless sea.

The poem continues on in much the same tone, fully of lyrical and Romantic language by which Coleridge captures the essence of his dream. His word choice and form help the poem achieve its purpose.

A limerick is a different kind of poem altogether, one generally intended to be witty or humorous (and sometimes just plain crude). Here is one of the limericks I remember best:

There was an old man from the Cape,
Who made himself garments of crepe.
When asked if they tear
he replied, “Here and there,
But they keep such a beautiful shape!”

All limericks follow this structure and share this cadence, which contribute to the overall effect. The rhythm makes the text sound silly and light-hearted, whatever the actual words. While the poem is vastly different from Coleridge’s Romantic vision, it too demonstrates a keen understanding of its purpose.

Our code should be much the same. Different kinds of code serve different purposes and should be used accordingly. In Web design, the most cliched example is using tables for layout purposes. The HTML table tags were intended to present information in tabular format, not to structure an entire document. Using it in the latter way is a misappropriation of its purpose.

Any experienced coder would attest that tabular layouts are far more inflexible than CSS. They really limit you to the confines of the table itself. Styles, however, give you a great deal more flexibility and allow you to do a lot more. We may harp on about it a lot, to the point of being annoying, but it’s a perfect example of how failing to understand purpose can render code less effective!

CSS also provides a great example of the difference between inline, embedded and external styles. Each has a different purpose, and using it the wrong way can really weigh down your code. The external style sheet is used to implement universal styles that can be applied to an entire website (or, in some cases, multiple websites). The embedded style sheet, which is less frequently used, overwrites external styles. This is great for custom artistic posts. Inline styles can be used to overwrite the styling of a single element.

It’s all pretty straightforward for a seasoned Web designer. For the uninitiated, though, mixing up these purposes is all too easy, and it potentially results in bloated code, full of unnecessary inline styling and redundant elements, all from a lack of understanding CSS’ rules of precedence.

So, whether you code HTML or CSS, if you believe in the importance of understanding your purpose, then you certainly have something in common with the great poets.

Meaning

Another important aspect of poetry is meaning. Like any text, a poem means something on the surface: it literally means what it says, even if what it says is sometimes difficult to understand (especially with some archaic works). However, a good poem always has a secondary meaning, hidden beneath the surface.

The incomparable Robert Frost demonstrates this, in a stanza from his popular “Stopping by Woods on a Snowy Evening:”

The woods are lovely, dark, and deep,
But I have promises to keep.
And miles to go before I sleep,
And miles to go before I sleep.

On the surface, the poem’s closing lines simply state that the narrator thinks the woods are lovely but that he has promises to keep and a long journey before he gets to bed. But there is also critical discussion about the meaning that lurks below the surface of these lines. Not to go into too much analysis here, but it has been suggested that these lines indicate a deep yearning in the narrator to abandon the responsibilities of society and retreat to the embrace of nature, possibly even to death.

Again, code can be very similar, though in a different way. Instead of having a surface meaning and an underlying meaning, code (and specifically HTML) creates meaning through both its semantics and its structure. For example, consider these two lines:

<p>The Wasteland</p>

<h1>The Wasteland</h1>

The content is identical, but the context created by the mark-up is entirely different. In the first instance, the content is a paragraph (or simple body text). In the second, it is a first-level heading. The two are very different. Here’s another example:

<p>This is a paragraph.</p>

<p>This <em>is</em> a paragraph.</p>

The first sentence is a simple statement. But the emphasis in the second sentence on the word “is” changes the meaning. Now it becomes more of an affirmation against the (quite legitimate) claim that a single sentence does not really constitute a paragraph. Also, notice the choice of tag, using the semantic em tag for emphasis, instead of the simple italics tag.

Similarly, a language such as PHP provides contextual meaning through conditional logic. For example, here is a snippet of WordPress code that I often use to generate the content of the title tag:

<?php
  if(is_home()){
  echo "Home :: ";
}
elseif(is_single()){
  echo the_title() . " :: ";
}
elseif(is_page()){
  echo the_title() . " :: ";
}
elseif(is_category()){
  echo single_cat_title() . " :: ";
}
elseif(is_tag()){
  echo "Articles tagged as \"";
  echo single_tag_title() . "\" :: ";
}
elseif(is_date()){
  echo "Articles posted in ";
  echo the_time('F, Y') . " :: ";
}
?>

In this case, the code produces a different title, based on the type of content being generated. It’s much different than our HTML example, but it still demonstrates the ability of a block of code to provide extra meaning to content—the same way that a poem’s subtext adds a layer of meaning below the surface.

The Importance Of Being Structured

A key similarity in the code-as-poetry metaphor is the need for structure. Poetry is traditionally a very structured form of writing. Take the sonnet, which was once widely considered one of the most elevated forms of poetry and is quite difficult to write (trust me, I’ve tried). Here is Elizabeth Barret-Browning’s famous “How Do I Love Thee”:

How do I love thee? Let me count the ways.
I love thee to the depth and breadth and height
My soul can reach, when feeling out of sight
For the ends of Being and ideal Grace.
I love thee to the level of everyday’s
Most quiet need, by sun and candlelight.
I love thee freely, as men might strive for Right;
I love thee purely, as they turn from Praise.
I love thee with the passion put to use
In my old griefs, and with my childhood’s faith.
I love thee with a love I seemed to lose
With my lost saints,–I love thee with the breath,
Smiles, tears, of all my life!–and, if God choose,
I shall but love thee better after death.

This poem, which appears on so much sentimental merchandise these days, follows the sonnet structure very closely. It has the standard 14 lines, with a specific rhyming structure. For the most part, it also follows the traditional meter, called iambic pentameter. I won’t break down the sonnet’s adherence to and deviation from traditional structure (because I would probably lose your interest). Suffice it to say, this poem is constructed on a very strict and rigid scheme.

There are other types of poetic structures, too, such as the brief haiku and the silly limerick (which we looked at). Some might suggest that much modern poetry is even more “free” and unstructured. This may be the case with lesser poems, but not with the best modern works. While these poems may appear not to follow a pattern, they are always structured in some way. You just have to look harder to find it.

The structure of code, though, is very obvious—in fact, probably more so than the rigid sonnet form. Let’s look at a basic HTML document:

<html>
  <head>
    <title>A Simple Document</title>
  </head>
  <body>
    <h1>A Simple Document</h1>
    <p>This is just a simple document.</p>
  </body>
</html>

As with the sonnet, a clear structure is at work here, one that is significantly different. The html, head and body tags all give form to the document as a whole, while the title, h1 and p tags wrap and semantically define different bits of content. For every opening tag, there is a closing tag, appearing at the appropriate place in the document’s hierarchy. It’s all basic HTML.

It’s also highly structured, and without this structure, the code degrades. In some cases, it could be a semantic issue, which often goes unnoticed, because browsers will usually correct these issues. For instance, we all know that the title tag should appear between the head tags, right? Well, if the title tag is placed somewhere else, most modern browsers will still understand the tag and render it properly. Semantically and structurally, though, it’s all wrong.

The same is true of improperly nested tags. Something like the following would likely render properly in the browser:

<p>A link to <em><strong><a href="http://www.smashingmagazine.com">Smashing Magazine</em></strong></a></p>

And yet, it is structurally flawed, because tags should always be closed in the order that they were opened. Of course, things get really dicey when tags are unbalanced or when block-level elements intersect. I can’t be the only one who has been hijacked by a rogue div tag!

The point here is not to dig into the structural semantics of HTML, but to emphasize the importance of the structure in both code and poetry. If you’re nodding along with me here and agree on the importance of properly structured documents, then that’s another trait you share with poets and another bit of support for our code-is-poetry metaphor.

Trim And Efficient

Finally, in a well-crafted poem, every single word has meaning and purpose. Despite what may appear to be overly complex words or flowery lines, the entire piece is meticulously crafted. A poet can spend hours struggling for just the right word, or set aside a poem for days before coming back to it for a fresh perspective.

Let’s look at another of Robert Frost’s shorter works, this one entitled “Fire and Ice”:

Some say the world will end in fire,
Some say in ice.
From what I’ve tasted of desire
I hold with those who favor fire.
But if it had to perish twice,
I think I know enough of hate
To say that for destruction ice
Is also great
And would suffice.

It may be somewhat grim, but it is also exceptionally well crafted. Each word here is so carefully placed that not a single one could be removed without detracting from the meaning of the poem.

Ezra Pound’s “In The Station of the Metro” is even more succinct:

The apparition of these faces in the crowd;
Petals on a wet, black bough.

In just two lines and fourteen simple words, Pound paints a striking image, ripe with meaning and begging to be devoured by scholars and critics. Now, that’s efficiency.

Would you not agree that the same should hold true for code? Shouldn’t every tag, selector, rule and line of PHP have an explicit purpose? Unfortunately, making HTML and CSS bloated with unnecessary tags and styles is all too easy. Take this code:

<div>
  <p><span>This is a paragraph.</span></p>
</div>

div{margin: 1em 20px}
div p {font-family: sans-serif; font-size: 14px}
div p span {color: blue}

Now, compare it to this:

<p>This is a paragraph</p>

p{margin: 1em 20px; font-family: sans-serif; font-size: 14px; color: blue}

Assuming no extra margins or padding are applied to the original div, the second bit of code will render exactly the same as the first—a more economical way to achieve the same result.

As we mentioned in the section on purpose, code can also become bloated by unnecessary inline styles, where an external or even embedded style sheet would be more efficient (depending on the purpose, of course). Yet another example would be to use the onmouseover event to execute simple JavaScript effects that could be achieved more efficiently by CSS.

For the master craftsperson, great code and great poetry are lean and trim, with no excess of words or other unnecessary elements.

Conclusion

Part of the beauty of metaphor is its ability to highlight meaningful similarities between two seemingly unrelated ideas. Still, I have to admit that when I really considered this code-is-poetry metaphor, I was surprised by just how deep the similarities run. In some ways, the metaphor almost blurs into reality.

Perhaps code really is a form of poetry, and the coder a new kind of poet.

What does it all mean? I can’t answer that entirely, at least not here and now. But if more people regarded code as its own kind of poetry or at the very least put the two on more even footing, it would raise the bar and lead to higher-quality work. And that would only be a good thing!

(al)

---

© Matt Ward for Smashing Magazine, 2010. | Permalink | 76 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, javascript, poetry, styleguide

Smashing

Web design is a fickle industry. Just like every other form of artistic expression, Web design has undergone a continuous and surprisingly fast evolution. Once a playground for enthusiasts, it has now become a mature rich medium with strong aesthetic and functional appeal. In fact, we are experiencing what could be the golden era of Web design — or at least the best period thus far. We have powerful new tools at our disposal (CSS3, HTML5, font-embedding, etc.), a plethora of freely available resources, a strong design community and also (if you needed any more!) reliable support of Web standards in the major browsers.

We’re seeing better interaction design and more aesthetically pleasing designs. And we’re seeing more personal, engaging and memorable sites, too. But what exactly is making the difference? What new directions is Web design heading in today? What new techniques, concepts and ideas are becoming important? In this article, we present some observations on the current state of Web design. We describe existing and upcoming trends and explain how Web design might evolve in the coming months and years. We’ll also touch on what we as Web designers should be ready for to keep abreast of new challenges and opportunities.

Please note: this article is the first in our series on the current state of web design. To make sure you don’t miss the second part, subscribe to our RSS feed and follow us on Twitter.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

1. Design For Delight

As designers, our job is to communicate ideas effectively. For every particular message, we create a context in which the message would work best, guiding users to achieving their tasks, gaining their trust or convincing them of whatever we’re communicating. Of course, there are endless ways to create this context. One of them is to design for visual aesthetics, surprise, joy, happiness — design for delight; design to be memorable and remarkable.

Attractive things work better and help focus and keep the user’s attention. Memorable design increases excitement for products and brands, leading to increased engagement. In fact, a strong, reliable emotional relationship between your clients and their audience could be the best thing that ever happens to your career.

Brizk design studio has an aesthetically stunning design, with subtle animations, beautiful typography and a clean layout. When you hover over the red bird in the footer, a small Twitter box is revealed. First-class design that is a pure delight.

Although the vast majority of brands are still silent, passive and impersonal, we’ve observed more websites trying hard to engage our senses, whether through a strong aesthetic appeal, through witty animations in the content block or simply through a little extra attention to small design elements on the “About” page. Such designs are beautiful to look at, fun to navigate but, most importantly, memorable — for the simple reason that they are different. By adding delightful personal touches to your designs, you stand out from the crowd and give visitors something to talk about and share with friends and colleagues. And that’s a good start.

You can elicit delight in a variety of settings: on your maintenance mode page, on the 404 error page, in your pre-loader, and everywhere else. The idea is to surprise visitors by giving them something pleasant to talk about.

Bounty Bev
Bounty Bev is a beverage company with a beautiful one-page design. Apart from its subtle hover effects and animations, the website has some nice extras: if you scroll down the page manually with the mouse wheel, a small pop-up appears asking you if you need a lift. The typography is strong and memorable, and the design is playful. Simple, clear and personal, the website leaves a strong positive impression.

Analog.coop
Analog provides a very personal experience to visitors. When you visit the page, it displays where you are located and tells you the members of the team who are closest to you (in our case, Alan and Jon, who are about 500 miles away in Bristol). The website has a couple of nice Easter eggs that are not visible at first glance. You might want to play around with the header and the photos of team. The page is just fun to explore.

Forrst
Beautiful design with attractive visual elements and original navigation — a design that manages to make a good lasting impression. Notice how the background of the upper area of the page changes when the browser window is resized (Parallax-effect). The “log in”-box is quite cool, too. Surprisingly, the form is built with tables for some reason.

Billy Tamplin
On his blog, Billy Tamplin focuses on the small victories in his life. Each post records a personal achievement, displaying a custom-designed merit badge and an explanation of the conquest. Billy uses this metaphor throughout the website, speaking of “super Web abilities” (Agile CSS, PHP-prepared, IE6-reinforced, etc.) and “heroic design strengths” (human-friendly aim, keen creative detail, etc.). He also has a personal portfolio on the website. Notice how well the color scheme fits the theme. The design is simple and beautiful, and the “achievement” twist is unusual and memorable.

MIX
MIX labs, a community blog for designers and Web developers, doesn’t have hidden features, appealing animations or striking hover effects. Instead, it has a consistent, visually appealing design: can you spot where and how often colorful circles are repeated throughout the website? The design emphasizes the content and has a personal touch. Simply beautiful.

Blue Sky Resumes
This website of a small team of resume writers has a couple of nice unusual extras in the design: the header contains a Flash-based cloud animation that perfectly fits the branding of the company. The website also has subtle animations and soft hover effects. And the “About” page introduces each co-worker in a quite original and memorable way.

Mailchimp
MailChimp heavily incorporates the monkey metaphor in all aspects of its design. To inform customers of recent updates, Mailchimp present an ASCII animation that tells the user something is happening in the background; this nice detail is surprising yet unobtrusive. The company also uses personal, friendly and perhaps occasionally geeky language when addressing user needs. This is the part of the image that MailChimp thoughtfully preserves in its Web application.

Large version

Further Reading

• 52 Weeks of UX: Design for Delight
  This article explains the importance of designing for delight and features some websites that try to engage the user’s senses.
• In Defense of Eye Candy
  Research proves that attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client or co-worker scoffs at the notion that beauty is important to interface design, point their peepers here.
• Looks Matter Because We All Have Feelings
  Discusses the importance of emotions and aesthetics in design.

2. Keypress Navigation

As designers try to make their designs more intuitive, it is no surprise that websites are becoming more responsive. Not only does this apply to user interfaces in modern Web applications (which are becoming as robust as desktop applications — and often smarter), but with the wide adoption of JavaScript libraries, “classic” websites are becoming more robust and interactive, too. One way to make websites more responsive is through “keypress navigation,” which hasn’t been widely adopted so far. But lately we’ve observed more designs implementing this effectively. The most popular setting for such navigation is on photo websites such as Flickr or FFFFound.

The general idea is to give users keyboard shortcuts that help them perform tedious tasks, such as navigating between blog posts, moving through images in a slideshow, changing the current view (e.g. from a horizontal to vertical grid), liking articles and navigating between sections of a website. Keypress navigation is common in Flash-based designs, but we are now seeing it applied to CSS-based designs, too. Google Reader is a prime example of advanced keypress navigation, but other websites have good implementations, too.

They Make Apps
A couple of months ago, They Make Apps began offering users smooth and advanced keyboard navigation as an alternative to classic scrolling. Users could switch between both modes using a drop-down menu in the main navigation of the page. In “keyboard navigation mode,” users used the arrow keys to navigate between content blocks; the “Return” key triggered the detailed view and “Escape” returned to the main page. For some reason, this navigation isn’t available any longer.

Image source

Mad-ar.ch
Marc Anton Dahmen’s website is Flash-based, and its navigation is quite advanced: users can jump to the contact form with “c,” scale images with “-” and “+,” and then navigate and sort images and scroll through text with the vertical arrow keys.

Image source

9GAG
9GAG is a social image bookmarking website. Users can navigate to the next and previous image using “j” and “k,” respectively. The current image can be voted up using “l” (for love): no mouse scrolling necessary. In this case, a shortcut to the grid view would be useful, too.

FFFFound!
One of the first social image bookmarking websites, FFFFound offers shortcuts to jump to the top of the page (“h”), change the view of the images (“v”), browse images (“k” and “j”) and skip to the next page (“l”).

Feta
Yet another Flash-based website that lets you use the left and right arrow keys to browse items of a section, the down key to select and the up key to go back.

NY Times: Times Skimmer
The New York Times’ quick overview page has very advanced keypress navigation. Users can use the arrows to navigate sections, zoom in using “Shift,” return to the top with “t,” refresh the current section with “r” and select article using “a” and the arrows. Learning the keys is a bit time-consuming, but once you’ve got them, navigating the page is much easier.

Pictory
PictoryMag, a magazine dedicated to photo stories, also has “j” and “k” navigation to browse images.

CrushLovely
CrushLovely, a single-page portfolio, lets you use the arrow keys to navigate sections of the page.

Thinking for a Living
Thinking for a Living lets users use the left and right arrows to navigate between featured quotes.

Picnic Extraterrestre
Aside from being one of the most unusual designs we’ve seen so far, Iván Ferreiro’s Picnic Extraterrestre has quite advanced keypress navigation. The design imitates Teletext and does a pretty good job. All navigation items can be loaded using the digits shortcuts. Now that’s fun!

Coding Techniques and Tutorials

Note that when implementing keypress navigation in your design, make sure that the shortcuts you define do not conflict with common browser shortcuts, OS shortcuts, screen-reader shortcuts or user-defined shortcuts. This may sound simpler than it is. As usual, extensive testing (with savvy and novice users) before implementation will help you find issues with your shortcuts. It’s safe to assume that the arrow keys, the “j” and “k” combination and the “Escape” key are safe. On the other hand, using the “Control,” “Alt” and “Shift” keys is not recommended.

Also, regard keypress navigation as an additional (and therefore optional) feature that will not be available to users who have disabled JavaScript in their browsers. Therefore, it is highly recommended that you offer keyboard navigation as a secondary, not primary, layer of navigation. Below, you’ll find some helpful techniques, tutorials and references for implementing keypress navigation in your designs.

• Adding Keyboard Navigation with jQuery
  This screencast describes how to implement keyboard navigation to move a slider backwards and forwards. The demo and code are available as well.
• How to Create Keypress Navigation Using jQuery
  This tutorial describes how to implement keypress navigation to browse sections of the website.
• Advanced Keypress Navigation with jQuery
  You could use your mouse to select links, but you can also use the arrow keys (i.e. up and down) to navigate the list. This script is a bit advanced because of the extra functionality when the user combines the mouse hover and key presses.
• Using Keyboard Shortcuts in JavaScript
  In this article, you’ll learn how to use JavaScript keyboard shortcuts, with and without the JQuery framework.
• How to Build a Site With Keyboard Navigation: PSD to HTML
  This article looks at how to add keyboard navigation to a website using a few simple lines of JavaScript. First, you’ll create a simple theme in Photoshop and then transform it into a working website that offers keyboard functions to jump pages.

Plug-Ins and Useful Resources

• js-hotkeys: Cross-Browser Javascript jQuery Plug-In for Hooking Keyboard Events
  The jQuery.Hotkeys plug-in lets you easily add and remove handlers for keyboard events anywhere in your code, and it supports almost any key combination. Binding and unbinding a hot-key combination takes one line of code.
• jQuery Keyboard Navigation Plug-In
  The jQuery Keyboard Navigation plug-in provides the capability for page elements to be navigated and activated via the keyboard’s arrow keys.
• HotKey: Programmable Keyboard Shortcuts with Prototype JS Library
  HotKey provides functionality similar to that of the access key attribute but has many enhancements that allow for more granular control of keyboard-driven interfaces.
• Detecting Key Strokes: Reference Table
  Detecting the user’s key strokes turns out to be a specialized branch of event handling. This page details some of the more annoying problems and includes the obligatory compatibility table.

3. Print Design Influence

While designing for delight is primarily about impressing visitors with unexpected and pleasing touches to a design, modern Web designers often go one step further and experiment with the underlying details of their work, producing more creative and unique layouts. In fact, one doesn’t have to be an expert to see the growing influence of traditional print design techniques on the Web. They are often manifested in so-called “art-directed” blog posts (or “blogazines”), whereby every blog post has a unique and carefully crafted design.

The layouts of these websites often resemble those of print magazines or posters, with striking headlines, multi-column text, highlighted quotations, indented text, supporting imagery, sidenotes and footnotes. The designs usually adhere to grids and have strong, vivid typography.

Design Informer: Grid-Based Web Design, Simplified has a simple clean two-column layout that clearly separates text from illustrations. Notice the capital letters in the author’s name under the header, also visible in the quote design on the page. The content here dictates the layout.

In most cases, art-directed designs are fueled purely by the ambition and determination of their creators. Such designs are predominantly found on freelance websites (being the fruit of personal projects) and rarely found in corporate settings. The main obstacle to wider adoption of these techniques is that the creation of such designs (or rather their implementation with (X)HTML and CSS) is time-consuming. Art-directed layouts are quite difficult to code and maintain, and they often require inline CSS styling, or else designers would end up with dozens of un-semantic classes in their style sheets. Also, integrating advertisements on these pages is difficult because they put constraints on the designer’s layout. So, at the moment, these designs are more appropriate for less frequently updated websites because of the overhead.

If you decide to experiment with art-directed design, be aware that the layout of an article should be secondary and always support the content itself, not dominate it. The problem is that once you start designing a blog post, it’s easy to overdesign page elements just because you can, not because the content dictates it. In fact, the design community is having an ongoing debate on whether art-directed designs are merely “over-Photoshopped articles,” designed purely for the sake of design.

Good design is about effective communication, not decoration at the expense of legibility. As Francisco Inchauste puts it, “I think it’s a ‘pick two’ sort of scenario. The choices are: great content, great art direction and regular schedule. If you try to hit all three, one of those will begin to fall short.” Bottom line: Web designs that are heavily influenced by print design are beautiful, but only when the techniques support your article.

A Lesson on How to Be a Villain
A colorful and nicely illustrated article in a unique layout. Notice something unusual? The design has a table-based layout. The design has a CSS-layout with tabular data for the actual info-graphic bits. Sometimes that’s necessary for art-directed designs.

Evan Dinsmore: 21
A poster design for the Web. This blog post is simple, and it replaces tired plain text with vivid images. But that can be a disadvantage, too: a text-based version would be more user-friendly here.

The Bold Italic: Dr. Feel Good
A very impressive magazine-like layout, with multiple columns, imagery, headlines and a sidebar. If you had only seen this page printed out, you wouldn’t have recognized it as a Web design. The page has 40 div containers.

A Way Back: Revised Font Stack
A very long, detailed and elaborate design. In art-directed designs, including this one, large images are often used to push the boundaries of the layout. Such images are often 800 to 1000 pixels wide, filling the width of the entire layout.

Chris Coyier: The Safari Challenge
Here is a subtler design, with big margins, multiple columns of text, footnotes and indented headings. From an aesthetic point of view, it could be a page from a book.

Kyle Fielder: Keeping Curious
A classic. Do you remember those old magazines that used big quotes and visuals to create text flow? Notice how well this headline and colophone are positioned in the question mark. A nice, simple, original design.

Sleepover: A Critical Analysis of my Shoes
A simple grid-based design with justified text, serif typography and nice shoe illustrations. Unfortunately, justified text still doesn’t look very good on the Web.

Yaron Schoen: Too Many Buttons
Sometimes art-directed blog posts require something slightly more: like a background image and bakground color, as well as a bit of CSS styling. This examples demonstrates exactly that.

The Bold Italic: Keep Off the Grass
Another remarkable example of multi-column-layouts…

The Bold Italic: Cinderella Story
… and another one. Print-design inspiration at its best.

Travis Neilson: Default Switch
A calm, simple, clean design with custom headings.

Further Reading

• The Super Freaking Amazing Future Trend of Blogs
• The Death of the Boring Blog Post?
  An article about art-directed designs from here on Smashing Magazine.
• Jason Santa Maria Talks About His Rethinking
• WordPress Art Direction Plug-In
• WordPress Post Styling Plug-In
• WordPress Designate Plug-in
• Jason Santa Maria: The Influence of Print Design
• HeartDirected
  A gallery of art-directed designs.
• Unique Article Designs
  Another gallery of art-directed designs.

4. Horizontalism

Over the last year, we’ve observed a slow transformation in the orientation of text-heavy Web designs. Not only are designs gaining depth and realism, but navigation is changing as well. Some designers are augmenting traditional vertical scrolling with sliding navigation (like here), which usually scrolls in both a vertical and horizontal direction, or even pure horizontal scrolling. This is called “horizontalism.”

Websites with horizontal scroll bars have been more difficult to navigate because the mouse was designed for vertical scrolling. But the emergence of multi-touch devices forces us to rethink the usability concerns of such designs. After all, whether the user browses vertically or horizontally on such a device doesn’t really make a difference. And some plug-ins (like Scrollable and jScrollHorizontalPane) simplify the action by enabling users to navigate horizontally by using the standard vertical scroll wheel on the mouse, thus shrinking the learning curve.

Horizontal scroll bars have been out there for a decade, but today it feels that they are gaining a new context. The move to horizontal scroll bars is probably an attempt among some designers to provide a more distinct user experience. Such designs are usually carefully crafted and found primarily on portfolio websites and elaborate e-commmerce websites. Whether horizontalism will expand to more types of websites remains to be seen in the months to come.

Thinking for a Living
Not only does this article discuss the advantages and disadvantages of horizontalism with regard to readability, but it also has a nice horizontal layout itself, with multiple text columns. While the orientation is unusual at the first sight, reading the post is quite pleasing and comfortable.

OurType
A belgian type foundry with horizontal Flash-based navigation. Content blocks slide horizontally.

Jung v. Matt
This website has a horizontal timeline for navigation. Notice that there is no horizontal scroll bar; visitors use the vertical scroll wheel to navigate horizontally.

Your Auxillary
One of many so-called “single-page layouts.” The full content of these websites is on a single page, which is navigated using either the keyboard, the mouse or a menu (this website uses the third option). Here we have a good (and common) combination of vertical and horizontal navigation (showing the jQuery ScrollTo plug-in in action).

One Twenty Six
This portfolio has a different kind of horizontal navigation. Apart from “Previous” and “Next” buttons, the user also gets an overview of selected content in a drop-down menu. Once they select an option, the page scrolls horizontally. Horizontal navigation with the mouse wheel would probably improve this design’s usability.

Jax Vineyards
This wine store website has interesting and unique horizontal navigation, which is triggered when you browse the wine catalogue. Both the background image and description of the wine slide horizontally. Simple CSS and JavaScript are used. A beautiful and impressive design.

C. L. Holloway
Candice Holloway’s portfolio has a nice take of horizontal layout. Her artwork is placed on a “wall”; horizontal navigation is used as a metaphor for strolling an art gallery. Also interesting: scrolling is triggered when your mouse hovers over the horizontal arrows; no clicking necessary.

Yamaha Ginza
You’ll find that designers experiment with perspective. Sometimes the orientation is diagonal…

Edpeixoto
… and sometimes the layout just hangs in the air…

ASOS
… and sometimes it’s slanted. Notice how none of the elements have perpendicular lines.

Further Reading

• Horizontalism and Readability
• Friday Focus: Slanted Web Design
  A showcase of designs that tilt to one side and avoid perpendicular lines.
• Horizontally Scrolling Websites: Showcase and Tutorials
• jQuery ScrollTo Plug-In
  This plug-in lets users scroll through overflowing elements and the screen itself. You get many different customization options and various ways to specify the direction in which to scroll.

5. Rich, Strong Typography

Typography has played a major role in Web design for years now. Bold, strong, heavy headlines can effectively convey the purpose of an e-commerce website or portfolio, while subtler headings help structure content and improve legibility. Obviously, the big change we’re seeing today is richer, more versatile typography, partly made possible by the @font-face attribute and the emergence of font-embedding services such as TypeKit. Rich typographic elements can now be selected and copied from the browser, which wasn’t that easy a couple of years ago.

The future is big, bold and typographic. Rich font families will be used not only for headlines but for body copy, bringing typographic practices from print over to the Web. Also, designers will experiment more with rich, sophisticated serif fonts and bold, imposing slab fonts, supported by subtle imagery. Web designers are also adding more depth to typography with the text-shadow attribute in CSS3. Naturally, such subtleties are closely tied to the choice of layout. These typographic designs are often grid-based and borrow techniqes from print design, such as sidenotes and footnotes.

We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation.

Kilian Muster
Kilian Muster uses quite an extended serif font stack for his design: font-family: Palatino, "Palatino Linotype", "Book Antiqua", Constantia, Times, "Times New Roman", serif;. The posts in Kilian’s blog also have sidenotes.

extrapolish
Notice that the text on this website of a Polish Web design agency is set mostly in capitals: the navigation menu, introductory text and even contact address are in full capitals. Yet the design is calm, clean and polished.

DNA to Darwin
This website has only serif fonts throughout its design: font-family: "skolar-1","skolar-2", Georgia, Times, serif;. Notice that the text is split into columns; we didn’t see this last year.

COG’AOKE
Again, huge, bold slab typography that makes a strong impression and engages the audience.

TRÜF
This design agency combines a bold color choice with concise, equally bold sans-serif typography.

Pioneers
This website combines vivid imagery and playful typography. The design looks more like a brochure or poster than a “classic” Web page.

Colly
Simon Collison’s subtle attention to the tiniest details make the typography literally stand out. No bold, screaming typography here; just legible, aesthetically pleasing design.

The Saint John’s Bible
This website shows serif fonts at their best. The fonts complement the theme and fit the layout perfectly. Notice how well a beautiful visual design and classic typography can work together.

Brewhouse
A nice combination of type and visuals make this page remarkable. But it’s not clear why the page has three different typefaces for the headings; two would be enough.

Tick Talk
Can this get any bolder? Big bold typography, with capital letters spread across the whole page. When scrolling the page, notice the nice background effect. A very simple and strong design.

The Sew Weekly
This blog has very playful, inviting typography (Proxima Nova for the body copy and Coquette for headlines), and all of it can be easily selected and copied. This is the power of embedded fonts (TypeKit is used here). Only serif fonts are used: font-family: "skolar-1","skolar-2", Georgia, Times, serif;. Notice the text is split into columns — again, a trend we’ve seen only this year.

Neiman Group
The Neiman Group incorporates its brand colors into the navigation and headline of the front page. The typography is light and classic and gives the page a certain atmosphere.

Conclusion

Modern Web design is better, richer and more user-friendly. We’re seeing better use of visual design for the sake of aesthetics and a pleasing user experience. Traditional techniques from print design are increasingly being applied to the Web, be they layout techniques or rich versatile typography. Horizontal and even diagonal orientations bring a fresh perspective to the flat 2-D designs we’ve seen for years (with their text-heavy, Flash-based pages).

These developments are a sign of the upcoming era of Web design, in which designers can use new tools and techniques to their fullest potential. Web designers should look forward to the exciting and promising years to come.

Stay Tuned!

This article is the first in our series on the current state of web design. Next time, we’ll discuss other developments, such as adaptive and interactive layouts, CSS3 adoption, beauty in chaos, subtle interactivity, context-sensitive navigation and over-designed design. To make sure that you don’t miss the second part, subscribe to our RSS feed and follow us on Twitter.

(al)

---

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | 69 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: 2010, trends

Smashing

We’ve been releasing many icon sets and WordPress themes on Smashing Magazine, yet today we are glad to announce the release of a bit different freebie. This post features a VI Help Sheet, a cheat sheet for the VI Editor, for all web-developers out there who are working on Linux. The help sheet was designed by GoSquared and released for Smashing Magazine and its readers.

The cheat sheet contains terminal commands for modes and controls, inserting text, cursor navigation, deleting text, searching and replacing. Download it. Print it. Stick it on the wall and get commanding.

Download the cheat sheet for free!

• large preview
• download the PDF-file (0.5 Mb)
• release post on the designers’ page

Behind the design

As always, here are some insights from the designers:

We created the VI Editor cheat sheet because of the amount of time members of our team spend working in the Linux Terminal. Working on our web app is a full time occupation and for the developers, using the command line 24/7 can be exhausting. Forgetting a command here or there can really break up their workflow. So we put together the VI cheat sheet that can be used for quick reference as and when you need!

Thank you, guys. We really appreciate your work and your good intentions.

---

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 16 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Smashing