Posts Tagged ‘design’

DailyDev: Fixing Orphans With CSS

June 6, 2010

DailyDev series thumbnail logo -- day fourFor my next DailyDev, I’m working on cloning ProPublica’s ChangeTracker mashup to track changes to the campaign websites of Maryland’s governor and his challenger.

To make sure it works and to have something to show, I’m waiting for the pages I’m monitoring to be updated. So, I’m in a holding pattern on that.

In the meantime, here’s a simple CSS technique I used to get rid of orphans in a blog post on my portfolio site.

If you don’t know what orphans are, have a look at the screengrab below:

Screengrab of blog post with orphans at the end of list items.

You got it, the orphans are the last lines of each list item. Not pretty, right? Fortunately, I happened upon this CSS tutorial showing how to use the overflow property to get rid of them.

Following the tutorial, I wrapped each of the problem list items in a new div with the id “noOrphans,” like this:

<div id="noOrphans">
<li class="blogItem">
<strong>Here's the scoop: You can't scoop yourself:</strong>
Stop thinking in terms of print versus Web, us versus them. Start thinking in terms of one multi-platform news organization. To promote this culture, get your print/broadcast and Web staff interacting and crossing over into each other's roles.
</li>
</div>

I then created a new CSS rule for that div setting the overflow property to hidden, like this:

#noOrphans {
	overflow: hidden;
}

See, I said it was simple. Here’s the

Finished Product

Screengrab showing blog post with orphans corrected.

  • I could have accomplished the same thing with a class rule, but, as you can see from the HTML, I already had a class applied to the list items.

Pros

  • Really simple to do.
  • Can be accomplished with minimal extra markup.

Cons

  • If every other list item or paragraph requires an orphan-canceling div or class, your markup will start to get cluttered.

Tip

  • If you have lots of orphans, tweak your design and leverage the CSS cascade to keep your markup clean. In my example, for instance, if most of my list items had orphans, I might consider increasing or decreasing the padding or margins of their parent elements, or just forget about having the text wrap so each list item automatically squares off.

Recommend?

  • Yes.

Designers’ Invisibility Cloak

October 28, 2009

I blogged previously about how computer engineers are out to make their product invisible. So are information designers.

Well, they want users to notice their design, of course. But they don’t want it to be obvious it’s been designed.

Users who easily find what they’re looking for don’t think about design. They move on to the next thing they’re looking for. Users who get confused or overwhelmed notice design. So, designers want their product to be invisible.

No wonder people think designing is easy. The harder designers work, the less obvious that work is. Kind of thankless, I suppose. Perhaps that’s why there are so many design contests. Designers can at least pat each other on the back if no one else will.

As a former copy editor, I can relate. If a copy editor does his job and stories are readable, thorough and free of mistakes, readers aren’t going to say, “Wow, what great copy editing.” But if an editor misses an error, or, God forbid, adds one, one can see readers saying, “Where was the copy desk?”

I edited this post. Did you notice? I hope not.