If you’re actually looking at this page on the web, rather than viewing it in Google Reader as my stats say is more likely, you’ll have had a bit of a surprise yesterday. This is why I’ve been so quiet recently: I estimate that I’ve spent something like four man days on this skin and I’ve got to admit I’m quite exhausted. Although Origami is a good professional skin, half of the .NET internet is using it and my customizations probably weren’t noticeable to most of the users of the site.
Let me set out what I wanted to achieve with the redesign:
- I wanted to make the text easier to read.
- I wanted to demonstrate the use of CSS to produce a “designery” look, without using Photoshop.
- I wanted it to look good in all major browsers, but I wasn’t too fussed about pixel accuracy.
- I wanted to try to emphasize engagement. So, comment and feed subscriptions are now more prominent.
How it was done
This was developed in the classic fashion of ripping off the Naked skin. Now, you’ll know from my previous posts that I’m not a designer. However, this time I had help. A lot of help, actually
- Colour Scheme Designer is a god send. Any problems you have with pink are with me, not the tool.
- Equally, Pattern Cooler is a phenomenal site which does something too few “helper” sites do: work with you to produce the effect you’re after.
- Gradient images and the bullet points were generated using the first tool I found on the net. Although it’s basic, many of the others are worse…
- Rounded corners were achieved using Rick Strahl’s CSS3 code. It doesn’t work in IE7. I don’t care.
- Tim Heuer’s original Origami skin was an invaluable resource for figuring out “just how do you achieve that”.
- I don’t have a good reference for the alpha blending, so I’ll write that up separately, but it’s another CSS3 feature
- The menu bar is pure CSS, with a little help from some 1px wide gradient images.
- I don’t think I’d have ever got live comment preview working without this post. Which is ironic, because it’s obvious now.
- Lea Alcantara‘s recent article for a list apart was fascinating. I have to admit, I tried Trebuchet for the main text, but went back to Verdana.
- Highlights are often achieved using CSS text-shadow, which has the advantage over changing the font that it doesn’t affect layout.
- Gareth Slinn solved a particularly nasty and portable bug in dealing with comments. If you want to know about accessibility, he wrote the book.
Thanks should also go to the Finn Brothers and Thelonious Monk, without whom I seriously doubt I’d have stuck at it.
There’s still plenty of bugs and rough edges, but I thought it about time I released:
- It doesn’t look quite right in IE7. I know, I should spend more time with it.
- The code sections should be completely opaque, but they’re not, which is impeding readability.
- The RSS icon doesn’t blend into the background. I suspect that I’ll just live with that: it’s that or learn Photoshop.
All in all, Subtext skinning is an amazing demonstration of just what is possible with ASP.NET data binding if you’re committed. I’d still prefer a pull model where the skin was given an API for rendering the page, though. Certain things, such as customizing the date format, are pretty much impossible given the current code base, which is a pity. I imagine Phil has this planned for version 3…
However, the more time I spend with Subtext, the more impressed I am. It makes writing a blog engine look easy, and the more you learn about it, the more you realize it’s really not. There are far more pages in Subtext than you might think at first. I may still have missed one… or two…
Anyway, I hope you like the new look. I’ll get away from meta and back to content tomorrow, I promise.
Colour Coding 