Blog redesign

I have been posting more frequently lately, and felt that the longer entries were not very readable. This led me to spend some time last weekend attempting a bit of a redesign of this site. I’m not a designer, but I’m hoping this is an improvement over the previous templates. As this is my own site I made the decision to use some CSS3 for elements of the design leaving non-supporting browsers to just render these elements without the detail of rounded corners and opacity and so on. I wouldn’t take this approach in many places, but for this site I’m happy with that decision and the site is perfectly usable without rounded corners!

I also took the chance to have a play with Typekit to render a font for the heading. I haven’t used Typekit before and clients have been asking me about it so I thought this was a chance to see how well it works and how tricky it is to implement. I was really impressed with the ease in which I could implement Typekit, it really is as simple as choosing a font, adding a couple of lines of JavaScript and then assigning which bits of text will be rendered. After battling with sIFR on a number of projects this was a breeze.

To try and make my text more readable I read through and implemented some tips from The Elements of Typographic Style Applied to the Web, the background image is from istockphoto member smilewithjul and I found COLOURlovers helpful in coming up with a neutral colour scheme. I thought I might use some different background images in future so I wanted to have a colour scheme that would work with different backgrounds. I used the Starkers theme by Elliot Jay Stocks as a starting point to save me having to clean up Wordpress templates myself.

This was a very quick attempt to tidy up the site over the weekend, and if I get chance I’d like to add some things to it. Your comments are very welcome, especially with regard to the readability of the blog posts as that was something I wanted to sort out.

Francis on the 22 Feb 2010:

Hi Nice Design! The type is also very neat, and it has a lovely “woman’s touch” I’m at home here :)

I’m however wondering how the translucent right column text will turn out on a darker background, since you intend to vary the background image.

Pete on the 22 Feb 2010:

Looking good, Rachel!

If you wouldn’t mind sharing, I’d be interested in knowing more about your CSS3 decision here against presumably thinking when you say:

“As this is my own site I made the decision to use some CSS3 […] I wouldn’t take this approach in many places […]”

There’s a lot of ‘let’s use CSS3 regardless’ bravado at the moment, giving clients a site that will look better in ‘modern’ browsers and somewhat lesser an experience in IE. Is this not a notion you adhere to? Is there a foreseeable tipping point in time/technology when you would take a CSS3 approach in more places?

Els on the 22 Feb 2010:

Hi :-)
I love this new design, especially the background.
There’s also a downside, and I generally don’t like to give negative feedback, but then in your last paragraph you asked for comments on readability, so now I just have to say it ;-)

Maybe it’s just on my Windows system, and it may depend on the fonts I have or have not installed, but the font I’m seeing, has a strange way of spacing the letters. For example where you wrote “some different background images”, I see that written as “som e different background im ages”.
“implemented”, I see as “im plem ented”.

Now that I’m looking at the examples I just picked, I realise the problem is only with the letter ‘m’. It is crunched to the left of its space, leaving disproportionate space to the right of it. If I bump up the font-size 2 steps (Firefox on Windows XP), then the problem disappears.

Other than that, it’s very easy to read, and I like the clear layout of the content.

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.