Tuesday, December 01, 2009

New design

A week or so ago I started messing around with a test page to learn a few more things about CSS, and to see if I could manage to make a nice-looking, XHTML-compliant page that looked exactly the same in all the popular browsers. After gradually messing with it more and more, I got to liking the simplicity of the page. A few minutes in Photoshop gave it a bit more colour, and I was sold.

And that's what you see here right now.

Technically, I believe the design itself is completely XHTML 1.0 Strict and CSS 2.1 compliant, but the code I use for on the Photos page (Frontbox) seems to throw a CSS error or two, and basically none of my blog posts from Blogger do not comply with XHTML (especially all the embedded Youtube videos). Ideally I'd like to fix that, but it would be too much of a pain. At least this worked as a proof of concept that I may actually be able to make a fully compliant site. :)

Once the design was ready, it still took a few days of work to get it to play nicely with Blogger. In the end, I had to make a Blogger classic template that actually builds a PHP script with the content hard-coded into a few variables. This data file is included when the site is rendered, so that the recent entries etc down the right are always there, and always up to date.

Another change I made was to use the Smarty template engine to keep the data and layout separate. It's the first time I've used Smarty, and it was pretty easy to write all the templates necessary, so it's definitely something I may use again in the future.

The last part of the re-design was to include a Photos page, which pulls data from my Picasaweb albums via RSS. I'd done this over on travellingoakeys.com so it came together pretty quick.

The only thing I still need to sort out is the comments on the blog entries. Hopefully that's not too hard.

I think that's enough tech talk for the night. I hope you like the new design.

Update: I've fixed the CSS validation issues with Frontbox :D Also, you can verify my site is XHTML compliant by validating the Sites page. Just for that, I'm displaying the compliance badges on the right over there -->

2 comments:

aaron said...

Test comment :)

sq2 said...

well done aaron :)