Change all to accommodate one?

Question

Sometimes a layout doesn't look great for all the different variations in data it will have.

For example:

Say you have a style set for the headings on a particular type of page, like a product page.

For almost all products, it looks great the way you have it.

But theres one product page where the heading is too long and causes an ugly line-break to occur. You cannot rename it to something smaller either.

At this point you have 3 options:

1. Do nothing, just deal with it.

2. Change the font-size for all product page headings.

3. Change the font-size on a case by case bases when its too long for one line.

The bad thing about option 1 is most look great but some look awkward.

The bad thing about option 2 is you are degrading the look of all the pages (granted marginally, but still degrading) just to accomadate a few, seems like there should be a better way?

The bad thing about option 3 is the font size is not consistent, creating a less uniform look. Also this can get out of hand, like using inline styles, if you do this too much (or at all) it can lead to a real maintenance nightmare.

So whats the ideal choice? Is there an option I left out?

Answer 1

Option 4: Customize the display of long headings

You might not be able to rename the product(s) with long names - but you can change the way that long names display.

Possible approaches include:

• Truncate long product names at 60 characters, adding an elipsis (...)
  Variations: After how many characters should you truncate? do you look for a word break? Do you show a tooltip with the full product name?
• Detect long product names and switch to an explicit style
  Variations: Use a smaller font size; insert a line break and force a two line heading

Answer 2

I don't think that there is an ideal solution. All involve some form of compromise. You just have to decide what you are prepared to compromise.

I think option 2 is the least worst solution as it retains consistency across the site/application which is probably the most important thing. Your users will expect the various parts of the page to be in the same place on every page.

Option 3 might work if you can ensure that the heading occupies the same "physical" space on each page. This might require having slightly more white space on the "normal" pages.

Option 1 is probably the worst option as it could give the impression that the page is broken in some way.