Media Monday: A more effective blog design!

If you're a regular visitor you might notice a few changes to my blog today, or perhaps you came by at the weekend and saw the blog during one of its many stages of undress. I put this new header together live, and there were a few ugly moments, including when I realized I'd deleted the entire "Header" widget from Blogger and couldn't get it back…eek!

I hope you like the new style, please let me know if it doesn't work on your browser!

I've been working on building and redesigning this blog template for a while. I had hoped to do a big fantastic "relaunch" but then decided that designing a blog is a little bit like writing one - the process is always a little unfinished, so why not tweak and tinker it live rather than roll out huge changes in one swoop?

And this way, I can talk you through some of the changes as I've made them. It's been really satisfying to get into the anatomy of the blogger platform and exercise my HTML and CSS skills, which as I explained recently, I've been trying to do more and more.

As promised, I'll explain some of the things I've learned, and also how I learned them. This will include:

• Why I did certain things, and what they mean.
• What I did to (re)learn how to do everything, and which resources were the most useful.
• Explaining why I'm sticking with the Blogger platform (for now) and not migrating to Wordpress…even though I'm very tempted.

Today, I'll keep it simple and show you the difference between the old design and the new one.

I'm a big fan of clean design - simple but a little bit fun. The original heading did that, with just the name, headings…

…and a play on the Philadelphia Love Park statue to tie in my theme! Here it is:

But it was a cheat. Okay, it wasn't really a cheat. But it was just one large graphic made into an image map. I didn't even create the image map myself, I used a free website to do it for me.

What was great about it was that I could create the exact design I wanted for my header really simply and quickly, and just plug it into the Blogger template. To do that I had to delete Blogger's Header widget and replace it with an HTML widget, but otherwise it was very easy to do. If anyone would like to know how to create an image map header for their blog, let me know, and I'll be happy to make a tutorial.

However, it was just a quick fix for me. It has some serious downsides, including absolutely killing SEO, and meaning that if I wanted to change any wording in the header, I'd have to change the whole image and re-do the image map. 

So what I really wanted was a fully functional text-based header that looked as much like the image map as possible. And this is the result:

The only image in this header is the design on the right (and its border) - you can test it by highlighting all the text in the real thing up above.

Now I have fully customizable text and headings, along with a clean, simple design. The design on the right is supposed to be a slightly art deco motif inspired by Philadelphia's Art Institutes building, including a keystone, to represent the Keystone State. My husband says it also looks a bit like an Amish/Mennonite quilt, which is no bad thing seeing as we live somewhere in that space between Philadelphia and Amish country!

On my image map design, I had used two beautiful typefaces, Pistilli and Balham. But for the text-based version I've used two of Google's free web fonts, Abril Fat Face and Antic. 

You might also noticed I dropped "glad blog" - there are a few other blogs with that name, and I'd never realized before I moved to the States that I'd be comparing myself to trash bags: 

Life as an expat. It's a cultural minefield, every day.

So that's that, and I hope you like it! Next week I'll talk about how I went about re(learning) web design so I could get this header pulled together. As always, any comments and suggestions are forever welcome!