Metafluence

Web design best practices

While many of us celebrate web standards and the positive impact they have had on modern web design, true professionals will admit there are some discrepencies about how to handle some design situations. For my benefit and yours, I have compiled a list of scenarios to prompt conversation about how y’all handle them.

IE’s broken box model

Do you make a separate style sheet or do you use a hack?

Gutter spacing

If you have a few elements that are essentially columns of text set to a specific width and floated, how do you handle the gutter spacing? Do you set an equal value on left and right and call it done? What if you want the bookend items to be flush? Do you set a value for the right margin and make an overriding style for the first item? What if you’re using a CMS, how do you create an exception for the first item?

Two items in a row with opposite text alignment

If you have two elements that are in the same row, but need to be set to opposing text alignments, how do you make it happen?

Bullet alignment

Doesn’t it seem like bullets don’t align vertically if you use a custom bullet image? Do you put extra spacing in the bullet graphic, or is there another answer?

Clearing a div when all of the elements in it are floating

Do you use a div set to clear filled with a non-breakable space? Do you use a
tag and style it to clear? Do you try to avoid the situation all together thinking it makes your designs more solid?

Columns of list data

When you want to separate a list of data into multiple columns, how do you do it? Given that inline and float techniques divide the data left to right and people are used to consuming columnular data in top to bottom and then left to right, how do you stylize the data. This is particularly in question for CMS applications. In static data, you could use complex class labeling conventions, but how do you handle it in a CMS? A List Apart does multi-column lists in a fairly complex way. What do you think of their solution?

Variable width anchor tags that are displayed as a block to take advantage of hover states

Let’s say you want a link in your main navigation to change background colors when you hover over it. You’d need to stylize it so that it displayed as a block element. That also means you are now forced to set a width for it and float it if you want to display it horizontally. Is there a way to have a width be auto set depending on the content and maintain a block like hover state for a link?

What are some of the situations you run into over and over for which you are curious if there is a “best practice”?