Your Web Site Needs a Chiropractor: Alignment in Web Design

I woke up this morning with a kink in my neck. The kind of kink that can't be cured. No amount of massaging, twisting, or rolling will get it back in line. And so my head is tilting slightly to the left today. I figure if I rest my chin on my hand, I'll just look like I'm in deep thought, like I'm really considering what you just said. But in fact, I am too distracted by the discomfort of my unaligned vertebrate. Alignment is one of those things that you don't notice until it's out of whack. Alignment makes the structure sound, whether we're talking about alignment of my spine or the alignment in your design. Let's start with definitions.

What is Alignment?

a·lign·ment  (-lnmnt)

You were probably expecting the first couple of definitions. Position, straight line, blah blah blah. "Ground plan" caught my eye though. Alignment provides the structural framework of a design. It's the starting place. It's what makes the pieces fit together. Alignment promotes a good flow, keeps things consistent, and sets the stage for your content to neatly fall in place. Alignment makes things look finished.

History of Alignment in Design

Composing stick for letterpress

Back in the days of Gutenburg and the printing press, every letter and every space had to be aligned and accounted for. Once the letters and spaces are arranged on the composing stick, the lines are placed on the printing press, the space between the lines is increased by inserting rows of lead (hence the name "leading"), and the area surrounding all columns is blocked in using pieces of wood and locked into place. For anyone whose worked on a letterpress, you know it can be bit difficult to get the right size blocks to fit when lines are not aligned. Early on alignment and a grid were necessary. Without them, your book page would not print properly.

Thank you for the art history lesson. Why should I care?

CNN's website is based on a grid.

It took 500 years to get from Gutenburg to Tschichold. And now we have the internets! Legibility and readability are as much of a concern today as they were back in 1440. So answer me this:

• Do you want your audiences to read your content? 
• Do you want your audiences to think you have a credible website? 
• Do you want your audiences to have an easy and enjoyable time? 

Yes, I want all of those things! Where do I start?

If you're the one doing the designing:

• Start with a grid. Feel free to experiment with varying grids. Try ones with larger columns and shorter rows. Or do the opposite, but do lots of them. 
• Make sure your content aligns with the lines on your grid. I learned this to lo-fi way by cutting and pasting text and images on to grids. With actual scissors. It will be good for you. Give it a try.
• Create patterns in alignment. Maybe the all titles are aligned to the first left line and all descriptions are aligned to the third left line. 
• Continue to experiment!

 If you are reviewing or implementing the design:

• Ask about the use of a grid and alignments. Solid designers can explain their choices. You'll learn something when you ask too.
• Mark the vertical and horizontal alignments. See if they establish a pattern and make sense. This will help you assess the flow of the page. 
• Pay attention to the details. This is probably the most painstaking piece of advice. With alignment, a few pixels will make a difference. Consistent alignment makes your design look finished and credible. It looks refined and complete. Taking the time to get things as close to perfect as possible is invaluable. 

That sounds rigid and inflexible.

Trek, David Carson's latest book

Consider this:

• Every project has unique requirements. Maybe your design goal is to look spontaneous and grid-free. Maybe you're the next David Carson. Power to you!
• Learn the rules and then break them. Most designers are taught some basic rules about alignment, grids, and typography. Generally, you should break those rules to draw attention to an element. So the one headline that doesn't align, that one will stand out as different. The goal is to break the rules to promote attention.
• There are trade-offs in web design and implementation. On the web, there's no such thing as pixel-perfect (unless you are just posting a huge jpg of your site). With a printed page, the designer controls how the user interacts with the final product. That is not true on the web. Once implemented, your design may look fine in Firefox, but in IE6 it looks like death. It may look great on a giant monitor, but on your Netbook it's a little large. There are many user-controlled circumstances that can destroy the presentation of your website (operating systems, screen resolution, browsers, number of toolbars, the list goes on and on). So I say, work toward the majority using browser stats and best practices to reach the majority of your users. Work toward the ideal by discussing options and solutions with your team, while keeping the original design in mind. Be ready to make adjustments, because unfortunately you cannot control the interwebs. 

Go!

CRACK, twwwwist, and sssNAP your web site into alignment. It's the little, finishing touches that make a design magnificent.

• Making and Breaking the Grid 
• Stop Stealing Sheep & Find Out How Type Works 
• Form Design
• Grid-based Design: Six Creative Column Techniques