Skip to Navigation

Your Web Site Needs a Chiropractor: Alignment in Web Design

skeleton

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)
1. Arrangement or position in a straight line or in parallel lines.
a. The process of adjusting parts so that they are in proper relative position: A set of gears needs periodic alignment.
b. The condition of having parts so adjusted: Binocular lenses that are out of alignment will yield a double image.
2. A ground plan: Blueprints for the building included an alignment and a profile.

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

As time progressed, budding typographers introduced new fonts and new printing techniques. Eventually people were printing on the diagonal. The Modernist movement kept strict grids, limited type sizes, and subtle horizontal and vertical alignments. Students of the Bauhaus, particularly Jan Tschichold, helped spread Modernist graphic design around the world and is considered to be the basis of typography. 
“The trend in modern typography is definitely toward simplicity and legibility, employing forms that comply with the natural inclination of the human eye to seek harmony and ease.” 

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

CNN in columns
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
I'm telling you that alignment in design will either help or hurt you with regards to legibility, credibility, and overall satisfaction of a user's experience on your website.

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

grid example

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.

David Carsons book - Trek
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!

green traffic light

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

Here are some resources for your journey: