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.
3 Comments
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.
Looking good, Rachel!
If you wouldn’t mind sharing, I’d be interested in knowing more about your CSS3 decision here against presumably edgeofyourseat.com 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?
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.