grids, css, standards, and tomfoolery

Atlanta Web Design Group, July ‘09

Grids, CSS, Standards, and Tomfoolery

Jeff CroftJuly 25th, 2009Atlanta Web Design Group

Atlanta Web Design Group, July ‘09

Introduction

Atlanta Web Design Group, July ‘09

I’m Jeff Croft.

Atlanta Web Design Group, July ‘09

What do I do?

• Design and develop web and mobile sites and applications for Blue Flavor and its clients.

• Support and evangelize Django, an open source, Python-based web application framework that originated at The World Company, my former employer.

• Write about design, web design, Django, Mac nerdery, and whatever else strikes my fancy at jeffcroft.com.

Atlanta Web Design Group, July ‘09

Who are you?

Atlanta Web Design Group, July ‘09

What are grids?

Atlanta Web Design Group, July ‘09

A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. e grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner”

Wikipedia

“

Atlanta Web Design Group, July ‘09

Atlanta Web Design Group, July ‘09

(Very) brief history of the grid

Atlanta Web Design Group, July ‘09

Die neue Typographie• Written by Jan Tschichold in 1928

• Condemned serif typefaces and centered text, and helped to codify other modern design rules.

• By the time it was translated to English in the mid-40s, Tchichold had largely abandoned the modernist principles he helped create.

• However, his ideas were very influential to other designers, such as Josef Müller-Brockmann, Max Bill, and Emil Ruder, who helped create the “International Typographic Style,” or “Swiss Style” in the 1950s.

Atlanta Web Design Group, July ‘09

Atlanta Web Design Group, July ‘09

Atlanta Web Design Group, July ‘09

Atlanta Web Design Group, July ‘09

Atlanta Web Design Group, July ‘09

Why grids?

Atlanta Web Design Group, July ‘09

Order.Structure.Hierarchy.Organization.

Atlanta Web Design Group, July ‘09

Design is all about communication. In order to communicate well, we must bring order to the data we are trying to represent.

Atlanta Web Design Group, July ‘09

Different types of grids

Atlanta Web Design Group, July ‘09

Single-columnFrom Thinking With Typeby Ellen Luptonhttp://www.papress.com/thinkingwithtype/

Atlanta Web Design Group, July ‘09

Single-column grids can work great on the web from a purely functional perspective, but rarely fit into practical web situations.

Atlanta Web Design Group, July ‘09

Multi-columnFrom Thinking With Typeby Ellen Luptonhttp://www.papress.com/thinkingwithtype/

Atlanta Web Design Group, July ‘09

Multi-column grids are the most common kinds of grids we see on the web, and are highly effective.

Atlanta Web Design Group, July ‘09

ModularFrom Thinking With Typeby Ellen Luptonhttp://www.papress.com/thinkingwithtype/

Atlanta Web Design Group, July ‘09

Modular grids are rarely used on the web, because web content tends to be dynamic vertically. However, they can be used to great effect in some situations.

Atlanta Web Design Group, July ‘09

Some examples from ourwork at Blue Flavor

Atlanta Web Design Group, July ‘09

China8 ProjectModular grid

Atlanta Web Design Group, July ‘09

China8 ProjectModular grid

Atlanta Web Design Group, July ‘09

Seed MagazineModified modular grid

Atlanta Web Design Group, July ‘09

Seed MagazineModified modular grid

Atlanta Web Design Group, July ‘09

The New York Review of BooksMulti-column grid

Atlanta Web Design Group, July ‘09

The New York Review of BooksMulti-column grid

Atlanta Web Design Group, July ‘09

BlueFlavor.comMulti-column grid

Atlanta Web Design Group, July ‘09

BlueFlavor.comMulti-column grid

Atlanta Web Design Group, July ‘09

Typographic baseline grids

Atlanta Web Design Group, July ‘09

...the total amount of vertical space consumed by each departure from the main text should be an even multiple of the base leading.”

Robert BringhurstThe Elements of Typographic Style

“

Atlanta Web Design Group, July ‘09

What is a baseline grid?

In most traditional typography, all elements (body text, headers, images, etc.) on the page are set according to an invisible grid of horizontal lines, spaced evenly, running all the way down the page. Usually, the distance between these lines is equal to the line height of the body text.

Atlanta Web Design Group, July ‘09

For example:

If we are using 12 pixel tall text and an 18 pixel tall line height (usually referred to as 12/18), we might:

• Set h1 elements at 24/36 (18 * 2 = 36)

• Set h2 elements at 18/18 with 9px of padding above and below (18 + 9 + 9 = 36)

• Craft images that are exactly 360px tall, and give them 8px of padding and a 1px border on the top and bottom (360 + 8 + 8 + 1 + 1 = 378)

• Set callouts and sidebars at 10/18.

• Add 18px of margin both above and below bulleted lists.

Atlanta Web Design Group, July ‘09

An Article Aparthttp://www.alistapart.com/articles/settingtypeontheweb

Wilson Miner’s A List Apart article Setting Type on the Web to a Baseline Grid is a well-written, concise, and complete description of how to achieve a consistent baseline grid on the Web.

Atlanta Web Design Group, July ‘09

Baseline grid example from Wilson Miner’s A List Apart article on the topic.

Note that all text aligns to the grid lines, even that which follows interruptions such as images and headers, and even that which has a smaller font size, such as the callouts.

Atlanta Web Design Group, July ‘09

Incremental leading

There are cases in which you may not be able to stick to the baseline grid on a line-by-line basis. For example, imagine your line height is 18 pixels and your base text size is 12 pixels. You may set a callout or sidebar with smaller text, like 10 pixels. Here, you may find that 18 pixels is too much line-height.

In this case, you can make the line-height smaller, but in such a way that it lines up with the baseline grid every x number of lines, rather than every single line.

For example, you can arrange your smaller text such that five lines of it are exactly the same height as four lines of base text.

Atlanta Web Design Group, July ‘09

Mark Boulton’s incremental leading lesson

http://www.markboulton.co.uk/journal/comments/incremental_leading/

Mark Boulton wrote the seminal piece on using incremental leading with CSS, as a response to Wilson’s A List Apart article.

Atlanta Web Design Group, July ‘09

A few more points on baseline grids

• Baseline grids can be crafted with relatively-sized text, too—but the math is a bit more complicated.

• Creating a background image with your grid lines to be used during development can be a big help.

• So can Syncotype, a bookmarklet from Rob Goodlatte.http://www.robgoodlatte.com/2007/07/31/syncotype-your-baselines/

• Not always 100% achievable when dealing with images coming out of CMSes that aren’t of predictable size—but it’s still an admirable goal, and getting most of the way there will still be a dramatic improvement to your page.

Atlanta Web Design Group, July ‘09

Grids are systems.

Atlanta Web Design Group, July ‘09

While a grid can be useful for laying out a single page, they’re most effective when thought of as a system for use over an entire work (such as a website).

Atlanta Web Design Group, July ‘09

Tools that can help

Atlanta Web Design Group, July ‘09

Many CSS frameworks include a grid component that makes crafting complex multi-column grids on the web quite simple.

They also usually include a basic baseline grid setup.

Atlanta Web Design Group, July ‘09

CSS frameworks with grid components

• Blueprint: http://code.google.com/p/blueprintcss/

• Yahoo UI: http://developer.yahoo.com/yui/grids/

• YAML: http://www.yaml.de/en/

• 960.gs: http://960.gs/

Atlanta Web Design Group, July ‘09

More recent CSS generating tools create a syntax on top of CSS that gives you advanced features, and a complier than “dumbs down” your code to a standard CSS file.

Features include variables, mixins, nesting rules, and mathematical operations.

Atlanta Web Design Group, July ‘09

CSS generation tools

• Less (Ruby): http://lesscss.org/

• Sass (Ruby): http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html

• CleverCSS (Python): http://sandbox.pocoo.org/clevercss/

Atlanta Web Design Group, July ‘09

That’s about it on grids.

Atlanta Web Design Group, July ‘09

Takeaway: Grids help provide structure, organization, and order to the data we present on our sites. A little grid love will go along way in the overall elegance of your site.

Atlanta Web Design Group, July ‘09

Questions? Comments?

Atlanta Web Design Group, July ‘09

Okay, let’s talk standards.

Atlanta Web Design Group, July ‘09

Are we using web standards?

Atlanta Web Design Group, July ‘09

HTML 4? HTML 5? XHTML?

Atlanta Web Design Group, July ‘09

What about CSS3 that isn’t supported in all browsers?

How do we feel about -moz and -webkit namespaces?

Atlanta Web Design Group, July ‘09

Do you validate your markup?

Do you validate other people’s markup?

Atlanta Web Design Group, July ‘09

What comes first: the standard or the browser implementation?

Atlanta Web Design Group, July ‘09

How are we handling browser support? What do you “support?”

Atlanta Web Design Group, July ‘09

The new “browser wars”—good or bad?

Atlanta Web Design Group, July ‘09

Anything else?

Atlanta Web Design Group, July ‘09

Thanks, yo. Let’s get drunk.