Five Layout Tips For Prettier Posts

Team, you may not hear from him much, but our StateImpact Designer, Danny DeBelius, is always watching your work. He’s noticed some areas for improvement when it comes to our page design and making our posts visually compelling, which he outlines here. Enjoy! -Elise

1. Use logos sparingly, if at all.

Click to enlarge.

While logos are readily available and a tempting target for topics light on visual opportunities, the disappointing truth is that logos do little to draw users into your post. Worse still, a logo recycled from an earlier post can erroneously signal to your reader that they’ve already read the surrounding content; recycled art of any kind runs this risk. A photograph is always preferable, and photos that include human subjects are generally the most effective visual tool to put eyeballs on your post. The same principle holds true for selecting featured image art for your topic buildout pages. Logos are rarely effective, expedient as they may be.

2. Avoid jumping in the middle of a blockquote.

Click to enlarge.

For the sake of consistency in our “Continue Reading” links, avoid jumping your posts in the middle of a block quote as the jump link will adopt the italic and left margin of the blockquote that surrounds it. Jump before or after the quote instead.

3. Float images right when they are near blockquotes.

Click to enlarge.

Blockquotes are visually signaled to the reader two ways: italic text and a 24-pixel left margin. An idiosyncrasy of floated elements in HTML text is that this margin will disappear behind the float. The image at right shows an example of this phenomenon, where the reader loses the left margin cue that text has become a blockquote, leaving only the italic text to provide that signal. The interaction of the cutline text with the indented blockquote text creates a user-hostile experience where the reader’s eye must perform a series of gymnastic maneuvers to follow the flow of the copy. Keep in mind the work the user must do to follow the text and seek to minimize awkward jumps in the text as much as possible.

4. Jump aggressively.

Click to enlarge.

We jump our posts with the hope that our reverse-chronological story-list pages will be quickly scannable by readers. The point of the post text on a story-list page is to provide just enough context to persuade the reader to click through to the permalink page, not to display the entire post. To that end, be aggressive about jumping your posts as soon as your layout permits. Your placement of art in the post will generally dictate the location in the post you can safely place the jump marker. For posts with floated art high in the post, I recommend jumping just after the photo. The post intro at right is approximately twice as long as it needs to be.

5. Don’t fear the 8-column photo.

Click to enlarge.

So long as the art you’ve selected for your post is not a poorly-lit podium shot, consider occasionally running a solid horizontal photo the full 8-columns of our content area. The bar should be higher for strong visuals running full-width, but let’s make sure we haven’t set it so high that 8-column photos never happen on our sites. The screen capture at right from StateImpact Oklahoma is a great example of the 8-column photo in the wild.

2 thoughts on “Five Layout Tips For Prettier Posts