Simon Harriyott

Site redesign

Well, I have a new-looking website, and not before time. It looks so much better, is strictly XHTML, and is faster than the old one. This post is about why and how this happened.

I decided to have a new site as I'm looking for work, and in a competitive market, my old site was letting me down. It looked dull, the homepage was the blog, and the design started as a free template that I've incrementally hacked about with over the last few years. There was nothing (other than a CV) that actually promoted my services and skills.

If I ran a small agency, or was selling a product, then my website would be promotional, so as I'm selling my services, my site should be promotional too.

Once I decided that I needed a new site, I was quite excited about taking the time to do a good job with it.

So, with that in mind, the requirements for the new site were:
  1. The home page should be promotional - describing my services and how I could help potential clients.
  2. It should be an example of my skills, so XHTML strict, valid CSS and generally high quality.
  3. The site should look good, and have a pleasing design. Not too flashy.

Well, I can have a go at number 1 for the moment. I can write about what I do, and have done. Number 2 would be fine too, as that's part of what I do. Number 3 though...

As is common to developers, my graphic design skills aren't that good. With time and practice, I could improve, but it's not high enough on my list. So I can't trust myself to design my own site. I decided to outsource the graphic design. As an individual, any money I spend is at the expense of, say, a family holiday, so I needed inexpensive but good, which is a rare combination.

Fortunately, I have a friend. I've known Lois for about 10 years, and she's just finishing up her A-levels and then starting an art foundation course in Brighton in September. OK, she's not a professional designer, but she's artistic, motivated and I've seen some posters she designed in the past, which did the job nicely. I figured that whatever she came up with would be way better than what I could do, so I asked if she'd do it, and how much she'd charge.

Lois agreed to do it, and within my budget, so we discussed what I was looking for. She went off and researched other sites for people doing what I do, and worked on with three different rough designs, before we met again. Between the meetings, I swayed between thinking that it might be too much of a gamble employing a teenager, and smugly thinking that she'll do a brilliant job and I'll have a great looking website. Happily, when I saw the designs, it was clearly the latter.

I really liked two of the designs, but couldn't choose between them. It occurred to me that it was more important to chose one there and then than to go away and carefully consider which I preferred. So, I picked one, and Lois could then go and refine the design, and work on the actual pages.

We met again last Thursday, and I was really impressed with the page designs. I excitedly took the .psd files with me, and set to work on marking them up in XHTML and CSS. After 6 months of rather dry C++ work, I thoroughly enjoyed it.

The first page I did was my CV, as I'm sending recruiters to it at the moment. I'd previously marked this up in XHTML, so I just needed to change a couple of things to make the design fit. It didn't take long at all, and I W3C validated it, and uploaded it immediately to the live site; it was well received.

Excitedly, I worked on the homepage, and uploaded it, ousting the blog, which in comparison looked worse than ever. How had I put up with it for so long?!

Next step; the blog. This was always going to be tricker, as part of it is outside my control. I use Google's I log into their site, write a post, hit the publish button, and Google FTPs a new page, updated index and archive pages, and feeds to my site. I have almost total control over the template, which has been fine up to now.

I downloaded a 3-year-old blog post page (that nobody would be reading) in order to mark it up. I then iteratively modified locally, uploaded and W3C validated the page until it looked right and most of the errors had gone, but there were two issues. Firstly, ASP.NET. I use master pages, and the blogger template creates an aspx page that uses the master page. I have a <form runat="server" ... > tag that generated an HTML form element with a "name" attribute, which doesn't validate. Also, the generated URLs weren't encoded. As it was late Friday night, I left it. I was going to WebDD on Saturday and had an early start.

In the bar after an inspiring event, I was talking to Seb, who told me that I just need to set the xhtmlConformance level in web.config

<xhtmlConformance mode="Strict" />

and that will take care of the form tag. Not that I need the form tag, as I wasn't doing post-backs. I rushed home from Reading, even skipping the geek dinner (which is very unlike me), and spent Saturday night working on it, completely in the zone (first time for months). The ASP.NET code was now XHTML strict, but the links weren't. I changed the template to generate <asp:Hyperlink> tags, which I could then modify the URL server-side, with a simple Server.HtmlEncode.

Having seen Phil Pursglove's session on caching at WebDD, I also added caching to the pages, and by 3am, I'd republished the blog, and it all validated. It ran pretty quickly too.

In conclusion, I feel so much happier with the site, and loved the process of updating it. I'm really pleased with how well outsourcing the design went, and I'm much more confident with using XHTML and CSS as a result.
20 April 2009