grids, css, standards, and tomfoolery

Atlanta Web Design Group, July ‘09

Grids, CSS, Standards, and Tomfoolery

Jeff CroftJuly 25th, 2009Atlanta Web Design Group


Introduction


I’m Jeff Croft.


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.


Who are you?


What are grids?


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

“


(Very) brief history of the grid


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.


Why grids?


Order.Structure.Hierarchy.Organization.


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


Different types of grids


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

http://www.papress.com/thinkingwithtype/



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


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




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


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




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.


Some examples from ourwork at Blue Flavor


China8 ProjectModular grid


Seed MagazineModified modular grid


The New York Review of BooksMulti-column grid


BlueFlavor.comMulti-column grid


Typographic baseline grids


...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

“


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.


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.


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.

http://www.alistapart.com/articles/settingtypeontheweb















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.


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.


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.














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.

http://www.robgoodlatte.com/2007/07/31/syncotype-your-baselines/





Grids are systems.


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).


Tools that can help


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.


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/

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


http://developer.yahoo.com/yui/grids/


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


http://960.gs

http://960.gs


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.


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/










That’s about it on grids.


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.


Questions? Comments?


Okay, let’s talk standards.


Are we using web standards?


HTML 4? HTML 5? XHTML?


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

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


Do you validate your markup?

Do you validate other people’s markup?


What comes first: the standard or the browser implementation?


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


The new “browser wars”—good or bad?


Anything else?


Thanks, yo. Let’s get drunk.

grids, css, standards, and tomfoolery

Technology

atlanta web design group

web content

practical web situations

modern design rules

typographic grid

consistentbaseline grid

modular grids

multicolumn grids