Free For All

If you haven’t already, I highly suggest taking a look over at Open Source Web Design (OSWD) where you will find a ton of free layouts for your use.

I see a lot of table-less layouts on there. I also see a lot of layouts that have the one thing my layouts lack: simplicity. I’m an instant fan of Blue Leaves which is both table-less and very clean in design. And most important of all (to me) the author has very clean HTML with heavy use of indenting (a practice I very much encourage).

I like Libra for it’s use of color to separate content areas. Although I might rethink how I’d handle the “quick hit” information boxes at the bottom of the layout. On a long content page those won’t be seen until the reader finishes through the content. That might be desirable as it gives the reader immediate options on other areas within the site to visit. But you couldn’t use those boxes for important information that you wanted to get out right away. They’re more along the lines of an “after dinner mint” for web pages. I think some sites could really benefit from a little minty flavor. I might have to steal that idea for some future design. :)

The most downloaded template on the site is autonomous. It uses tables heavily, but it’s a very clean, very simple (visually) layout. I like it. I imagine creating the drop-shadow effect in CSS would be relatively easy. It would only require an extra, wrapping block element (such as a DIV) around the content box. Then use negative margins to pull the content box up and to the left (or whatever direction you want) to create the effect. The only problem I have with it is the colors are very low contrast. Such that even a “regular” guy like me has some trouble picking up the bright orange text on the light grey background. But the lighter colors are much easier on the eyes. It’s a careful balance that must be found between usability and “prettyness”.

I like Gazetteer as well. It’s three columns, fluid, and tableless. The only thing I might change with this layout is work on how the tab area breaks as you narrow the viewport. It breaks because there’s no min-width and that date line on the right gets in the way. The tabs are LI elements, so I’d set them inline and set the white-space on the parent UL element to no-wrap. That’ll force them to stay on a single line and the day will be what wraps around. But be careful! The date line should come first in the source, otherwise when the date line wraps, it’ll stick itself between the tabs and the content area.

Boundaries

Siri Amrit directed me towards OSWD. He also directed me towards a developer he comissioned, Pat Heard at FullAhead. While browsing the portfolio, I came across the softonic layout which got me thinking about a feature that layout has.

The feature is the assumed or perceived boundaries between content elements and between columns. One thing you’ll notice right off the bat is that there are three columns. What you might not immediately notice is the lack of an obvious line or border separating the columns from one another. Another thing you might notice is the lack of bottom borders between content sections in the main column. Just one (of a possible 4) border being defined to provide separation of these content elements. You don’t need all those extra lines. They just busy up your layout. When you take them away you get a layout that’s much softer and much more pleasant to rest your eyes upon. The boundaries are all there; you’ll pick them up instantly. But they aren’t made obvious and thrown in your face. It’s a really nice touch that everyone might consider when developing their next layout (myself included!)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s