Suggestions for Layout

[Matt_DiGeronimo]

Hey guys,

I'm having trouble with my homepage layout. Here is a link to my front page: http://www.smithfloyd.com

 

I think once you scroll down past the slider you'll see what I'm talking about. The blog column and the YouTube column just seem too intrusive to one another and the title text is poorly formatted. Any solutions?

Thanks in advance for any and all help.

[marybaum]

I agree - everything is as big as possible in the column space, so everything's fighting for attention.

I would take the two widgets in the right column and put them in the footer, then make the content area two columns, with the video column wider than the post column.

Then, use excerpts in the post column, which will strip out the styles from the posts, use more subtle styling for the home page - smaller type sizes for the headlines and subheads. Your text is actually a little weak for the big and bold heads you have now, but when you lighten up the heads, it will be in better balance. You might want to close up the line height a tiny bit to keep the paragraphs hanging together.

I would also add some space between the columns - maybe more to the right margin of the left-hand column.

There are some good articles about typographic scale. If you're interested in pursuing the subject, Google the term. You don't have to follow the type sizes every default style sheet recommends for basic headlines - I've been blowing those away forever (including in print, where I started 30 years ago) but they do follow a mathematical formula known as the golden mean - roughly a proportion of 1.6ish.

 

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[Matt_DiGeronimo]

Hey thanks a lot for the quick reply, Mary! I'll give that a try when I get in front of my work computer later today and I'll bump this thread when I implement the changes.

Thanks again!

[marybaum]

You're welcome!

One more thing: I'd add some vertical space between the video posts when you make that column wider, and add some vertical padding to the top of your headlines in general. There's a formula I started using fairly recently - about three years ago - in print and online - that goes like this:

Body copy (p) = x

Line height = xl (can be any number - generally somewhere between x+2 and 1.5x, depending mostly on the x-height of the typeface) (number is constant and always based on body copy, even when we apply it to headline spacing)

First paragraph after a head of subhead never indents.

Second paragraph and following, if indented: first-line indent = line height, or xl. If not indented, space after all paragraphs =  xl/2.

Headlines:

h1 = somewhere between 2x and 3x, depending on page size.

Line height/h1 - h3 = type size * 0.9 at most.

h2, h3, h4 = previous size * some integer value between .6 and .8 of the previous value, that makes sense and looks appropriate.

h4 linespacing = 1.0* type size.

h5, h6: As headline type gets smaller, it tends to get bolder. These small values may become all-uppercase and have some letterspacing values, and wider linespacing, perhaps as much as 1.3 to 1.5 of the type size.

Space before h1-h3: xl/2.

Space after h1-h3: 0.

Space before h4-h6: 0.

Space after h4-h6: xl/2.

Hope this makes some sense.

 

Mary Baum

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[Author]

Posts