{"id":739,"date":"2008-02-11T00:02:22","date_gmt":"2008-02-11T00:02:22","guid":{"rendered":"http:\/\/www.markwilson.co.uk\/blog\/2008\/02\/website-development-tips-and-tricks.htm"},"modified":"2008-02-11T00:11:42","modified_gmt":"2008-02-11T00:11:42","slug":"website-development-tips-and-tricks","status":"publish","type":"post","link":"https:\/\/www.markwilson.co.uk\/blog\/2008\/02\/website-development-tips-and-tricks.htm","title":{"rendered":"Website development tips and tricks"},"content":{"rendered":"

About a year ago, I started the redevelopment of this site to use WordPress as my CMS, in the process aiming to make the site XHTML and CSS standards-compliant. It was a big job and, as this blog is really just a hobby that I put most of my spare time into, it took some time. For the last year I’ve had a draft post part-written about some of the things I found along the way and now, as I’m about to embark on another facelift (let’s call it markwilson.it v2.5), I thought it was about time I finished that post – or at least published the collection of notes I made during the development of markwilson.it v2.0<\/a>. I hope some of the information here is useful to others setting off on the same route and, of course, if anyone knows better, feel free to leave a comment.<\/p>\n

First of all, sizing my text. No pixel sizing here – I use font-size:medium;<\/code> for the body and then percentages to resize text elsewhere (ems would achieve the same result as percentages but this method was recommended and avoids potential issues with Internet Explorer). Then, in order to keep the text size pretty much consistent across browsers, I set the \tfont-size:76%;<\/code> on the #wrap<\/code><\/a>. Using a font-size of medium as a start point is probably not essential – that’s the default for most browsers anyway but it does at least give me a known start point. I could go further and implement the A List Apart hack for Internet Explorer (IE) 5 on Windows but, as IE5 users accounted for just 0.13% of my visitors in the last month, it really doesn’t justify the effort (I’m waiting for the day I can say the same about IE6 but that’s some time off yet).<\/p>\n

I do most of my development using Mozilla Firefox (on a Mac), then test on Safari (MacOS), IE6\/7 (Windows) and Mozilla (Linux). I’m afraid that I don’t bother about other browsers (except some compatibility testing for mobile browsers<\/a>) but that covers the vast majority of visitors. I also test the site with the page style disabled (to check that document flow is correct and that site is still usable) and repeat (with style applied) to see the effect of the site without images, and without scripting. Basically, if it all degrades well, then I’m happy. The only downside (for me) of browsing without JavaScript support is the absense of Google AdSense or Analytics.<\/p>\n

When trying to work out what is working, and what is not, the accessibility-checking favelets<\/a> can be useful but I actually prefer Chris Pederick’s Web Developer extension for Firefox<\/a>. When I first came across this handy extension, I thought Chris’ name was familiar and from his resume I see that we were both working at ICL at the same time in the late 1990s… maybe that’s it). Incidentally, the Web Accessibility Tools Consortium (WAT-C) has produced toolbars for IE and Opera<\/a>.<\/p>\n

Validating XHTML<\/a> and CSS<\/a> using the W3C tools is good for checking out the quality of your code (but you do need to keep checking back – I’ve just noticed that some of the third-party code I’ve added has broken my XHTML). For blogrolls, an OPML validator is available<\/a>.<\/p>\n

Having moved to a hosting provider<\/a> where I have access to the server logs, the first thing I noticed was the volume of errors like this one:<\/p>\n

[timestamp<\/em>] [error] [client ipaddress<\/em>] File does not exist: \/usr\/home\/username<\/em>\/public_html\/favicon.ico<\/code><\/p>\n

I added a favourites icon<\/a> file to my web server’s root folder and instantly saw a drop in the number of errors (there are plenty of online generators available but I used Favicon Maker<\/a> – largely because the site looked good… I find it remarkable how many people offering web design tips don’t appear to have looked at their own site recently… although I do realise that there is a difference between design and code and I also realise I’m leaving myself open to criticism here too). I also added this line of code because not all browsers will look for the presence of the favicon.ico file:<\/p>\n

<link rel=\"shortcut icon\" href=\"http:\/\/example.com\/favicon.ico\" type=\"image\/vnd.microsoft.icon\"><\/code><\/p>\n

Incidentally, Information Gift has a useful summary of how various browsers treat the favourites icon<\/a>.<\/p>\n

On a similar note, I recently added a 57×57 apple-touch-icon.png file to the site to support webclips on the iPhone<\/a>. It may be a minority platform but it’s one I use!<\/p>\n

A few more resources that I’ve found useful whilst developing the site include:<\/p>\n