Just a little note for posterity. I only change my design about once a year now, so I like to mark it with a post for later. And if you look down the page, I’ll show you how to do some of it!

Here’s what it looks like now:

A little about the new layout

The primary focus of a blog is the content, that stuff you write about. I’ve put too much focus in my header, nav, and sidebar elements. I really wanted to cut back and bring posts forward.

1. posts in the center – i put the posts in the center again to make things more symmetrical.
2. sidebars slightly lower – lowering the sidebars helps add to the focus of the center column.
3. fewer graphics – the only graphics in the design now are the background image and a few little flowers still sprinkling the bottom of posts and comments area.
4. no “header” – there is really not a header anymore, just a simple horizontal nav across the top. The site title is now at the top of the left sidebar, visible but unobtrusive.
5. Blocks – sections of the page are separated now, a little easier to differentiate. For those paying attention, I took a cue from paper ‘n’ stitch for that!

The Nav

The first thing people have noticed since I put up the new design late last night is the navigation menu at the top. It was funny to me because I actually didn’t change anything about the menu. It is exactly as it was. The difference is everything around it.

As much as I liked the clean white look of the old site, there was little to break up sections and draw the eye to important areas of the page.

Design isn’t about making things look pretty; it’s more about making things work and the old nav wasn’t quite working. No one really seemed to notice the secondary nav at all (which you’ll now see on any single post page). Pretty is just icing.

The Comments

I also wanted to make the comments easier to break down by visitor, so I separated each comment into its own block and made the names a little bigger/bolder, but still subtle enough to make your actual comment the most important thing.

I added the time as well as the date so you can tell more closely how old a comment is. Sometimes a few hours does make a difference. The trick here was making it look good with short name (the name and date lining up with the gravatar image), or with a long name (the full name lining up with the image). This took about 15 minutes.

Then, to separate my own comments, rather than make them bold or another color, I decided to remove them from the flow of the conversation because most of the time, when I chime in, it’s just to say, “hey thanks for the comment, please go on.”

And in this particular case, with a giveaway, it helps tremendously to quickly count out my own comments.

And, the Archives

Finally, I’ve been wanting to change the archives for ages, make it easier to browse visually. So I added a calendar so you can see dates better and added images to posts that have them and excerpts for posts that don’t.

A Little How-To

Overlapping Elements

For those of you who know a bit about designing for the web, the trick to this is two things:

1. Put a negative margin on the left and right, with padding to compensate. This will “stretch” it out and cover the containing block.
2. And for the “cut away look like with my comments”, give it a background exactly the same as your page background so it appears to cut out.

I did something similar with the h2, post meta and a few other places. It’s mostly the negative margins with a thicker border left and right.

If you’d like to try it, here’s the code for that!

h2 {
    margin: 30px -24px 10px;
    padding: 10px 20px;
    border-style: solid;
    border-color: beige;
    border-width: 1px 4px;
}

You’re welcome to copy/paste this code into your own website. Change the margins and padding to match your layout. But of course, you can’t use all of my design, that would be stealing. ;)

Picture Archives (Wordpress)

I use wordpress, so I can’t show you how to do this any other way. In your theme folder there should be a file called functions.php. Open this and add the following code to this file, somewhere between <?php and ?>.

function get_first_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
        $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
        $first_img = '<img src="' . $matches [1] [0] . '" />';
    if($first_img == '<img src="" />'){ // if there is no image, post the excerpt instead
        the_excerpt();
    }
    return $first_img;
}

Then, wherever you want the image/excerpt to appear, use this code:

<?php echo get_first_image(); ?>

This will snag the very first image in your post, so make it a good one!

As for the grid…

…that would take another post all by itself to talk about floating lists. But if you want to peek at my stylesheet, do a search for ul#archives and you’ll see the nearly 50 lines of code it takes to make that happen!

If you notice anything broken on the site, not working quite right, please feel free to let me know via email! nataliejost@gmail.com THANKS!