Recently in Web Design Category

BMW's German site has been kicked off Google for breaching its webmaster guidelines. There's more detail from Matt Cutts (a Google employee) and Google Blogoscoped.

I don't have an awful lot of sympathy for BMW here. What they did was clearly against Google's guidelines. But it would also have been completely unnecessary had they actually designed their site properly.

BMW Germany makes gratuitous use of JavaScript and frames, tecnhologies which Google's GoogleBot doesn't understand well. The result of this is that BMW's site will not do well in search engine rankings because the GoogleBot cannot crawl and understand its content very well. So, BMW did some black-hat SEO to compensate for it and ended up falling foul of the guidelines.

Had BMW not used these technologies, or used JavaScript in a way that gracefully degrades for those not using it, this situation would never have happened. Furthermore, it would have improved the accessibility of the page for users with disabilities as well.

BMW have made some changes to comply with Google's guidelines but they have not fixed the root cause of the problem, which is the design of the site. Once that is done, BMW should be able to enjoy high search engine rankings without having to resort to dark arts.

It's out. It's the first major new version of Internet Explorer that has been made publicly available in 4 1/2 years, and, if I'm not mistaken, the first publicly available beta version since IE4 Platform Preview in the late nineties.

I haven't yet had chance to install it but I intend to on my laptop to give it a spin. As a web designer, I hope that it'll make my life easier by having better standards support and more consistent rendering with Safari, Firefox and Opera - it'll save me and people like Dave a lot of time and sanity.

Make sure you also install the Microsoft Beta Client Tool for reporting bugs, and be aware that as Internet Explorer is an integral part of Windows, and that this is a beta version that hasn't been fully tested, it may totally break your computer. You should have thorough backups of everything first.

Here's your chance to nominate sites that have had 'failed redesigns' - a new design in the past couple of years that has blatently ignored web standards. To quote:

A failed redesign is a Web page created from scratch, or substantially updated, during the era of Web standards that nonetheless ignores or misuses those standards. A failed redesign pretends that valid code and accessibility guidelines do not exist; it pretends that the 21st century is frozen in the amber of the year 1999. It indicates not merely unprofessional Web-development practices but outright incompetence. For if you are producing tag-soup code and using tables for layout in the 21st century, that’s what you are: Incompetent.

There are many examples, but I'd like to use InformationWeek as one since its redesign only happened quite recently - within the past couple of months, if that. Table-based markup with spacer GIFs, fixed with size that will only work on 1024x768 screens and a ridiculous amount of embedded Flash for adverts that had a noticable effect on my browser's performance (Firefox on OS X). There's no DOCTYPE so it's rendered in Quirks Mode in most browsers, and even when assuming its HTML 4.01 the validator finds 959 errors on the home page alone. And this was a redesign done in late 2005 - 3 years after Wired News converted to a standards-based design. CNet News.com, one of its other big competitors, has been bitten by the standards bug for some time now too - its markup is like a work of art compared to InformationWeek's grotty, trodden-on pile of slurry.

If you want to take part in Failed Redesigns, tag your posts with 'failedredesigns'.

[Via Web Standards Project]

With the rise of Mozilla and now Firefox, it's pleasing to see that many web sites have stopped using alt="" attributes as 'mystery meat tooltips' shown when hovering over an image. Netscape mistakenly adoped this, which lead to Microsoft adopting it in Internet Explorer, however when the Gecko rendering engine was being written for Mozilla it was decided that the HTML specification should be followed to the book and that the contents of any alt="" attributes will not be shown as a tooltip. You can, of course, use the title="" attribute to achieve the same effect if you wish, and it will work on any element - not just images. However, using 'mystery meat' navigation, where images are links and the meaning of the image is not displayed until you hover over it, is not a very good method of navigation as it can be very confusing. Text links, or icons with text, are the best methods.

Microsoft's long-running case with Eolas has taken a worrying turn for the worst recently. Two years ago, Microsoft released a modified version of IE6 which complied with the Eolas patent lawsuit. The issue went away for some time, but with the USPTO upholding Eolas' patent, it looks like IE7 will include the change.

I've held off doing so for some months now, but, alas, the time came to install Internet Explorer 5 for Mac. Before you break down in despair, it's only because I'm working on some PHP to advise people to upgrade to another browser such as Safari, Firefox or Opera, and wanted to know what its user agent was like.

In fact, I'm not the first to do something like this. No, Microsoft's MSN division beat me to it - the MSN.com home page as a message at the top of the screen that says:

Why does MSN look like this? Your browser cannot find our style and presentation information and as a result may not display the page properly. You are welcome to use the page as is, or upgrade your browser to its latest version which may address the problem. [...] If you are using Internet Explorer for Mac, we recommend that you use another browser to have an optimal experience on MSN.

No, really. Alas, there's no link to a site that would let a user download another browser, which is a bit of a shame as the MSN Search results for 'another browser' aren't all that helpful. Google is also a bit of a letdown but Yahoo does have some better results.

As it is, I'm not the only one to notice this. On CNet's Apple News Blog, Scott Ard saw the same thing when searching Google for 'msn explorer mac' - MSN.com's message appears as the second result. There is no MSN Explorer for Mac as the MSN client for OS X was ditched earlier this year, despite only being launched in 2002.

Having used MacIE for a few minutes I'm not surprised that it is falling out of favour. As well as not having been updated in two years and not working properly with a number of sites (especially those employing "Web 2.0" features), the interface is also pretty ugly. It's also immensely slow in comparison with every other browser I have to hand on OS X.

Oh dear. Oh dear oh dear oh dear.

Some time ago, Disney Store UK became one of the UK's biggest online stores to have a standards-compliant, accessible re-design - here's some background information from the designer.

The site has been re-designed again, however, and all that wonderful markup has been chucked out of the window. What we're left with is a mess of tables, spacer GIFs (do a Google search for spacer image) and thoroughly invalid and inaccessible code. Disney has gone from having a clean, modern, efficient site open to all web users, to a slow, clunky site that locks out anyone not using a mainstream browser and who doesn't have good eyesight. Under Firefox on the Mac the tops of all the pages failed to render properly and in print preview it looked even worse.

This beggars belief. Disney had a site they should have been proud of - one that was setting the precedent for their competitors and showing that even large e-commerce sites could be standards-compliant. Now they have the web page equivalent of messy gloop, that contravenes the UK's Disability Discrimination Act. Those responsible for requisitioning this design should be fired.

Molly Holzschlag has written an open letter to Disney after trying to contact them through their contact form (which ironically failed with an internal error message) on behalf of the Web Standards Project.

According to Molly's Web Design & Development Personality Indicators, I'm somehere between a TTLM and a SASS. SACE is close as well but I'm not quite sure I fit into it. What do you think you guys fit into?

Normally I'd welcome a site which has been redesigned to be standards compliant. But the Independent seems to have fouled theirs up big time.

• Firstly, all the article URLs have changed. And there are no redirects.
• If you want to find the article again then you're out of luck because there's no search facility.
• You might be able to find the article if you know when it was published using the 'Day in a Page' function, but at the time of writing it kept returning HTTP 400 (Bad Request) errors.
• The Javascript used for the menus is very slow in Internet Explorer. Yes, I know IE sucks but it's still used by the majority of web users
• Some of the links are barely indisguishable from text. This is very bad design; links should be distinguishable by colour and by some other means - preferably using the standard underline.
• The columns idea is a nice one but it's annoying having to scroll back up to the top of the page half-way through an article, and it breaks the semantics.
• It just generally looks dull - too much white.

Can't say I'm a big fan of the changes, I'm afraid. Apparently I'm not the only one. (Link via Simon Waldman of The Guardian)

In February I mentioned that electronics retailer Powerhouse had an awful web site which didn't work in Firefox. Well the good news is that it now has a reasonably good site which does work.

That link was from this BBC News Online article which mentions how 1 in 10 of the top UK consumer web sites do not work in Firefox. Powerhouse and English Heritage are cited as examples of organisations who have cleaned up their act lately, but Odeon, Job Centre Plus, Lloyds TSB Insurance, British American Tobacco, Companies House and others still have web sites that do not work properly in Firefox.

I recently found that since upgrading to Deer Park Alpha 1 the status pages on the internal web server on our ADSL modem don't work properly (they worked in previous versions). However, I'm unsure whether I'd class this as a regression since the underlying HTML code is bloody awful - here's an excerpt of the code that doesn't work:

<TABLE cellpadding=6 cellspacing=6><TR>
<TD>
<center><img src="/images/binatone.jpg"></center>
<p><FONT color=#33CCFF><B>Quick Start</B></FONT>
<A HREF=loginout.htm target=main><LI>Login Status</A>
<A HREF=elog_idx.htm target=main><font><LI>Login Settings</font></A>
<script language='javascript'>
if (WanType == 1)
document.write("<A HREF=diagtest.htm target=main><LI>Diagnostic Test</A>\n");
</script>
<P><FONT color=#33CCFF><B>Status</B></FONT>
<A HREF=home_idx.htm target=main><LI>Overall Status</a>
</TABLE>

With code like that, I'm impressed that it's worked in Firefox this long, actually. I just can't see any reason for it to be so bad - I'm sure that proper code with CSS for the layout would be much more compact than that, and more compatible, too.

Carrying on the Make Poverty History theme (could probably do with a category for these posts...), if you support the MPH cause and haven't already added a wristband to your site then you may like to consider it.

The code to do so is at the bottom of the Get Involved page but it uses JavaScript's document.write() function which may mean that you can't use it on your strictly XHTML compliant pages. In which case, here's the code you need to do it without JavaScript. First, the HTML:

<div class="mphband">
<img src="http://www.makepovertyhistory.org/
whiteband_mphtranslinkimg.gif" width="163" height="163" usemap="#mphband" class="mphimage" alt="Make Poverty History" />
</div>
<map id="mphband">
<area shape="poly" coords="0,0,163,163,163,133,30,0" href="http://www.makepovertyhistory.org/" alt="Make Poverty History" />
</map>

Next, paste the following CSS in your stylesheet:

.mphband {
position:absolute;
left:100%;
top:0px;
overflow:visible;
height:163px;
width:163px;
background: transparent url(http://www.makepovertyhistory.org/
whiteband_small_right.gif) no-repeat -200px -200px;
margin:0 0 0 -163px;
padding:0;
color:#000;
z-index:1000000000;
border:0;
float:none
}

.mphimage {
border:0
}

And that should do it. Note that this restricts you to the default of a small wristband in the top-right, whereas the JavaScript version lets you have a small or big version on the left or the right. But it does mean that visitors will only request 2 files from makepovertyhistory.org and not 4 like they do with the JavaScript code.

The code posted above is edited slightly from the official code, mainly to ensure XHTML-compliance but also to make it a bit more compact.

Although I haven't used Java in a while, after seeing the tag soup that Apple recommends for QuickTime movies, I thought I'd look again at how to embed Java code into pages using clean, XHTML-compliant code. It's possible in Flash so why not Java?

Well, it isn't possible. You have to use the <object> tag, which IE only has patchy support for. Sun suggests using the following HTML for full browser support:

<object classid="clsid:CAFEEFAC-0015-0000-0000-ABCDEFFEDCBA"> <param name="code" value="Applet1.class"> <comment> <embed code="Applet1.class" type="application/x-java-applet;jpi-version=1.5.0"> <noembed>No Java Support.</noembed> </embed> </comment> </object>

That's a lot more complex than it should be, and uses <embed> and <noembed> which are both deprecated in XHTML, as is the Java-specific <applet> tag. The code highlighted in red should tell the browser to use the Java2 1.5 runtime. In theory, we should be able to just use the following code:

<object type="application/x-java-applet" data="Applet1.class" width="300" height="400"> <param name="code" value="Applet1.class" /> No Java Support. </object>

This works fine in Opera and in Gecko-based browsers, but will display 'No Java Support' in IE. For it to work in IE, you need to add the classid attribute so that it can use ActiveX to display the Java code, as follows:

<object type="application/x-java-applet" classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" data="Applet1.class" width="300" height="400"> <param name="code" value="Applet1.class" /> No Java Support. </object>

That will now work in IE and Opera, but not Gecko - now it will say "No Java Support". You also cannot add the red code because Gecko will think that Java is not installed.

There's probably some workaround to this by using the first example and some DOM to add the classid attribute in IE using JavaScript. Either way, I just wish it were simpler, and this is maybe something that both the IE and Mozilla camps need to look into.

incidentally, QuickTime suffers the same problem.

I think it's quite obvious that whoever redesigned This is Bradford didn't test it out on Firefox.

Either that, or they have some bizarre grudge against Firefox users. But either way it looks comically stupid.

We now have some juicy details from the Internet Explorer 7.0 team. The article details a couple of the improvements that will be in the next release, including:

• Support for alpha-channel transparent PNG images. This is something that every other actively-developed mainstream browser supports so it's about time IE caught up.
• Fixing CSS consistencies. This means that some of the bugs in IE's CSS implementation will be fixed so that their display is more logical and consistent with the standard (and indeed other browsers).

The impression I get from this announcement is that the IE team are only making minor evolutionary improvements to the CSS support instead of making major changes to align it better with the standards. What this will probably mean is that IE's CSS implementation will not be as complete or standards-compliant as other browsers, but that it will at least be consistent and not have silly quirks. This will save web designers from having to create elaborate hacks to get around IE's shortcomings without badly breaking old web pages that have been designed to exploit these bugs. You have to remember that IE does still have a little below 90% of the browser market share and so any major change which breaks web pages would be very unpopular.

For a change, I decided to adopt a look resembling what this site looked like this time in 2002. I say resembling - the colour scheme is the same, as is the masthead, but everything else is different, pretty much. But then the old design was table-based and looked awful so that's largely a good thing.

A cookie for anyone who can actually remember this design in use, bearing in mind the blog was not at this URL and didn't have comments enabled since I was using Blogger.

Have a look at the source code for Kebabish Original's web site, in particular the meta tags.

Really, if you're going to rip off someone else's design, at least have the courtesy to do it properly...

(incidentally here's a photo of the Bradford branch of Kebabish Original shortly before it opened)

Has anyone looked at StopDesign today, by the way? Keep hitting refresh...

Update: never mind, it's back to normal now. Doug Bowman had set it up so that the page appeared using someone else's design every time you hit refresh, from a selection including What Do I Know, Simplebits and Kottke.org. Last year on April Fool's Day he and Dave at Mezzoblue switched designs for the day, which was cool.

Please look at the image below and tell me which font you think would look the best as the header font for this site.

I'm currently using Georgia Italic but Palatino Linotype looks nice - it looks a bit more 'handwritten' than Georgia does. It comes as standard with Windows XP and Office 2003, although it's available to buy for those without it. That said, buying Windows XP might be cheaper than buying the font on its own...

In any case, if I did choose it, it would be preferred over Georgia, but if you didn't have the font Georgia would be used instead. Alternatively, if you have neither, Times or another serif font will be used at your browser's discretion, as happens now.

This is a long and slightly boring essay on the use of uppercase text in web pages and how best to apply semantics to it to convey the reason why the text was made uppercase. It was mostly inspired by the fact that I've added a selection of new abbreviations and acronyms to the database file, which means that a few old posts might show as unread in your newsreaders.

Found Sharp ideas through someone's linklog. The design looks rather like my Bluefade Remix template, however the attribution required by the Creative Commons license is missing and I couldn't find anyone with the name Abe Usher in my PayPal notifications, since a commercial license lets you remove the attribution.

The stylesheet has been reformatted (and in a way that makes it much bigger too) but still declares the #searchbox ID which he doesn't use but exists in Bluefade Remix. The filename for the fade effect is the same ('title-july-2003.jpg'). The HTML templates however appear to be the default ones from MT 2.x, albeit with extra invalid code.

I doubt that this is a co-incidence, but I'm not sure if it is a misunderstanding or a deliberate violation of the Creative Commons license. What do you guys think?

Update (Monday): The site now seems to be using a different stylesheet based on one of the MT defaults.

These screenshots are of BradLog, the weblogging system that I'm developing as part of my final year project. We have a major milestone to achieve by Wednesday so I've spent some time today moving the project on. The point of the project is to develop the application in both PHP and Perl, and then compare the development of the two, in areas like ease of development, speed, performance, code size, availability of reference materials and so on. Currently PHP is winning by a long way as I'm having some real problems with the Perl version and it's nowhere near as advanced as the PHP version, which is what is shown above. Both use the same MySQL database.

At the moment, both versions have a functioning public interface (screenshot 1), with the PHP version also having a backend (screenshots 2 and 3) which currently allows entries to be created and edited. The ability to delete entries, as well as edit the list of categories and display RSS feeds, has yet to be implemented but that shouldn't take too long. I also need to do quite a bit of work on the stylesheets and the general look and feel of the application.

The name 'BradLog' comes from the fact that it's a weblog system developed at the University of Bradford. And it has a nice ring to it. I'd let you browse the test site but there's no security on the admin section yet and the web server is inaccessible to the outside world anyway.

And before you ask, no, I'm not porting this blog to it :) . While I'm impressed with what the system can do so far, I appreciate the reliability and robustness of MT.

Here's something that will please some people - a piece of JavaScript that prevents Google's Autolink feature from working (Autolink is a feature of the new Google Toolbar Beta - see previous discussion). Basically, whenever the user hits the Autolink button, the script removes the link.

I've put an example script with the JavaScript code here. The example includes an ISBN number which is both shown as a link to Amazon.co.uk and unlinked. Normally, when you hit the Autolink button, the unlinked number would become a link, but the JavaScript stops this from happening. The linked ISBN number remains unchanged.

There are two potential pitfalls with this method, however. The first is that a list of found ISBN numbers will still be visible by clicking the arrow next to the Autolink button. Arguably I think this is a good compromise - the toolbar isn't modifying the page but is still helping the user, and perhaps future releases of the toolbar will make do with this compromise. The second is that if the user has disabled JavaScript, the script will become useless and Autolink will work as Google intended.

Jeffrey Zeldman has already rolled this script out on his own site and on A List Apart. I haven't, as I promised in my previous article (other than that test page) and at present have no intention of changing that position. I still think this is a useful feature but Google may need to compromise to protect its integrity amongst webmasters.

Update: Here's a bookmarklet to defeat the Javascript code.

It's been a while since I had a theme that wasn't blue, but with Red Nose Day on the horizon I decided to break with tradition and theme the site up a bit. Don't consider it to be a permanent change though.

I won't be doing a lot for RND this year since I'm likely to be busy with other things that day but I have bought this year's t-shirt and, as you can probably tell from the photo, this year's nose.

Can I just say that Powerhouse's web site is awful?

First of all, it only works in IE - it blocks out other browsers, including Firefox and Opera. And even if you enable user agent cloaking in those browsers it doesn't work because it uses some silly IE-only Javascript for the navigation.

Even when you do get it, it's butt-ugly and uses frames. So not only does the heavy use of Javascript make it inaccessable but there's frames there too.

I'm amazed that such a big company as Powerhouse could have a site that sucked so badly. Compared with the competition (Currys, Comet etc.) it's left in the dust. Powerhouse could have got away with a site like that 4-5 years ago, but not now.

There's going to be design funkiness for the next few hours, since I'm converting the HTML and CSS to be stylistically compatible with Kubrick. This means that deploying the template in Wordpress would mean using Kubrick as a base and then just replacing the stylesheet.

This also means that I could offer Kubrick as an alternative style on here, but, and most importantly for me, it means that I can get rid of the float problems which have prevented me from putting a footer on here until now. :)

And as Andy has just reminded me (d'oh!), it's my third bloggiversary today. Three years...

Update: I haven't finished this - unfortunately I heard the call of a public house and had to go and stay in it for a while, so quite a few of the pages will look very odd right now. I'll finish the job tomorrow.

This is for those of you using my IcyBlue template on your weblogs. I've released IcyBlue 1.2 beta, which incorporates a number of evolutionary changes that I've made over time on this weblog, such as the new-style comments and trackbacks. At the moment, this release is only for Movable Typists but Bloggeristas and Wordpressers will have their updates soon hopefully. Head on over to the templates section for more information.

I've found a passable solution to the problem of getting a web server running with PHP and MySQL in as little time as possible - phpdev. It bundles Apache, PHP, MySQL, Perl and phpMyAdmin in one handy package and doesn't need much configuring once installed - all I needed to do was to install the package and then configure my firewall not to accept connections from outside hosts.

I say it's a "passable" solution because the package is 3 years old and as such includes old and insecure versions of Apache and PHP. To use this on a real server would be very unwise, but for testing purposes it's not bad. I am in the process of updating the version of phpMyAdmin to the latest version since I find it easier to use (and its prettier :) ).

(This post was brought to you by Stinking Hangover™)

It's only just occurred to me that the basic design of the site has remained largely unchanged since February. That has to be a record for me. The background is probably the biggest change I've made to the design in 9 months.

Either it's because I've chosen a design I actually like, or because I really don't have the inclination to design something new. I'm guessing it's probably a mixture of the two.

You may vaguely remember me writing about a site review I was doing for a coursework assignment. Well, I promised to make it available for everyone to read at some point, and since the deadline has now passed, here it is. Might be of interest if you're into HCI or web design.

I've just completed an assignment for one of my modules - an assessment of an online clothing store from an HCI perspective. Which, roughly translated into English, means you write about how easy it is to use.

I will make the whole thing available for you after the hand-in date, which is this Friday, but I found the site really interesting because it looked like the company had made an effort to make it more accessible and standards compliant, but had given up after the first few pages. Consequently, the home page and a few of the main sections worked fine in most browsing conditions, but drill down a bit, or attempt to buy something, and the process became very inaccessible (No Javascript? No biscuit for you.).

I think the introduction of DDA and the fact that most businesses have only just realised that this affects their web sites too means that this is probably not an isolated example.

Tesco have recently redesigned their web site. And trust me, it's a world away from their previous design.

Previously the site used lots of images with small text and, horror upon horrors, frames. But now they're serving up XHTML with standards-compliant markup. It doesn't validate but the errors are minor; they're all related to unescaped characters and could be quite easily fixed.

Update: At least it does until you try to buy anything; then the frames rear their ugly heads again. It appears the shopping cart bit hasn't yet been updated, only the frontend of the site.

I'm starting to see a lot more sites in the UK go down the standards route and I have a feeling that the final stage of the Disability Discrimination Act (which came into force on October 1st) had something to do with it. Companies are finding that their sites are grossly inaccessible and rather than shoehorn accessibility into their existing sites they're opting for total redesigns.

Looks like Live Departure Boards has been redesigned, with - shock horror - a standards-compliant and pretty accessible design. Which should please Matthew Somerville who created his own accessible version after growing tired of the old one. Matthew created the Accessible Odeon site only to be ordered it to take it down by Odeon Cinemas.

The site has only 3 minor validation errors, and the only tables used are for tabular data, which are fully marked up. Great news.

Anyway, as you can probably guess, I was checking LDP for train times and indeed I now have to jet off and catch a train. Seeya.

Subway's UK site doesn't work in Firefox. It uses IE-only JavaScript for the navigation menus, which means that users of non-IE browsers can only view a handful of pages. And those pages that you can view use a IE-only JavaScript scrolling system, which apart from being rather inaccessable also means that you can only view the first screenful of a page at any one time.

The whole site is a bit of an accessibility nightmare - the announcement on the front page which describes Subway's launch in the UK is entirely contained within an image with no alt text. The code is a confusing mix of tables and div tags with spacer GIFs (ugh... ) for layout.

I'd boycott them, but, well... their subs just taste so nice...

Having recently re-opened an old Scrapie mailbox (and receiving all the spam that comes with it), I found I was subscribed to a mailing list for CulturalCube.co.uk. It's possible that a predecessor of mine signed up for it, but in any case, I checked out the site.

Firstly, there's a Flash intro - you can skip it but only if you have Flash installed. If you don't then you just see a blank page.

The home page used both Java and Flash. It doesn't really need to use either, never mind both, but oh well. There's also a lot of unnecessary Javascript and a rather rude message shown when you right-click ("You have no reason to use this feature!" - oh really?). Naturally it's been done in FrontPage.

I guess it's another example to add to my "how not to do design a web site" list.

Ignore this. Read Anil's comment - it's been fixed and I really should have checked.

I don't know whether this has been fixed in Movable Type 3.1 (I'm on the beta test list but haven't really had chance to play around with it) but the <MTCommentAuthorIdentity> tag outputs invalid HTML. It's used to display a TypeKey commenter image with a link to that person's TK profile if that person used TK to post a comment.

The offending code is in the image tag, where the image is given an illegal valign="middle" and isn't terminated in the proper XML way, thus making it valid in all forms of XHTML. It also includes a border="0" attribute which would make it invalid XHTML 1.0 Strict and above. Consequently, any article where a TK user has commented becomes invalid :( .

incidentally, I've made a couple of changes which, fingers crossed, will mean that all comments are posted in Unicode, and so any 'funny characters' that are posted shouldn't ruin the validity of the page. That's the theory anyway.

The site for The Saddle Inn in Fulford is the worst I've seen in a long time. To be able to use the site, not only do you need Flash, but also Java and the Windows Media Player plugin. I'm not joking when I say that Firefox needed over 100MB of memory to view that site - if your computer isn't particularly fast or only has a small amount of memory I'd avoid that one as you may well kill your machine.

Sites like that really do amaze me. There's just so much about it that's bad, not at least that the only text on the homepage is used for linking to other pages (one of which is a dead link) and that the title of the home page is 'Untitled Document'.

From Tim Yang.com:

This website also blocks all attempts to get it from any Malaysian IP. Coming from an online culture based around IRC and ICQ conversations, Malaysians tend to be untrained in cohesive thought and their comments tend to be rather crude and rude, intentionally or unintentionally.

Damn right too. I mean, we wouldn't want those Malaysians to be able to read about web standards and learn how to design web pages properly, now would we? :-/

I said it last week and I'll say it again this week - the world wide web was created for everyone. Just because a dominant minority of people from a particular country can't act their age, it doesn't mean the whole country is like that. It's like saying that Romania is full of gypsies or that Germany is full of people who aren't very good at football (sorry... ;) ).

Thanks to Lim Chee Aun for that. incidentally Lim Chee Aun is a Malaysian who is interested in web standards, and is also a damn good graphic designer - he created the Phoenity theme for Firefox, along with several other applications. I actually use his cursors as my default in Windows and the smileys on this site are designed by him too.

Forget Dave Shea. Forget Jeffrey Zeldman. Forget Douglas Bowman. The sites you really need to be looking at for web design inspiration are Arngren.net and Frnz.de.

Since I personally despise the paper, I really wanted to criticise The Daily Mail's website. But unfortunately for me, it's actually very good.

It uses XHTML 1.0 Transitional and the layout is CSS-controlled (no tables). While a better use of colour could be made to increase separation between content areas, and the links probably should be underlined, it's generally hard to fault.

It doesn't validate, unfortunately. In fact, the home page alone has 884 errors, although they're probably the domino effect of a few small errors. Still, it's nice to see that even the Mail can have a forward-thinking website.

CNet have made a couple of annoying changes lately, and I'm not the only one who noticed.

The first is to do with their RSS feeds. Originally the feeds had a headline and a brief summary of the article as the description. Now, they just have headlines. This is definitely a step backwards as the headlines don't always make it obvious what the story is about. Scoble has already decided to unsubscribe, I'm thinking about it.

The second is to do with their crufty URLs. An example of an URL given in the RSS feed now is http://news.com.com/New+Zone+Alarm+to+warn+of+viruses/
2100-7349_3-5218624.html?part=rss&tag=feed&subj=news . That can be shortened to http://news.com.com/2100-7349_3-5218624.html. I'm guessing they've added the headline so the pages do better on Google, but it makes the URLs unnecessarily longer and no more user-friendly than before. I've also never understood why the parameters are there as they seem to make no difference to the display of the web page.

Finally, they still haven't fixed this design bug.

I've just posted this on my templates blog, but for in case you don't read it, you may be pleased to know that I've ported this design to WordPress. You can see it in action on my WordPress test Blog.

I'll be porting the other templates later on. I'll also look into creating Blogger variants too.

Back in October, I ranted about how bad the BCS website was. So you'll be pleased to know that there's been a re-design which does address some of my criticisms.

Firstly, frames are, at long last, gone - though the layout is still table-driven and not controlled by CSS. Thankfully, stylesheets do take care of most of the formatting so there's less of a tag soup situation.

Validation is still an issue, that could be solved if the <meta> tags were actually in the <head> section and not afterwards. But then, it looks like some MS tool was used to create the page (they didn't even bother to remove the Generator meta tag) so that's not hugely surprising. Most of the other errors are down to not escaping ampersands in URLs. Oddly, the BCS have chosen the obsolete HTML 4.0 for their pages, rather than 4.01 or anything with 'X' in its title.

Accessability is improved - the home page seemed usable in Lynx anyway.

All in all, it's a step in the right direction. But really, I'd expect an organisation like the BCS to lead the way when it comes to standards, not lag behind.

Do you want to know what I consider to be the secret of good web design? Assuming that the user is always right. By that, I mean:

• Allowing the user to use any web browser to view your page, and allowing that page to render properly in whatever browser.
• Not insisting on a specific screen size or colour depth
• If the user wants to use a text-to-speech browser, or wants to be able to print your content out, you should let them
• They should be allowed to use the right-mouse button too.
• If they want to block popups and other advertising, again, you should not try to circumvent common methods of blocking these. Avoid popups if you can though.
• Your pages should load quickly, even on the slowest connections.

This may seem obvious but I still see far too many sites which don't grasp this concept. If you're a business, every user is a potential customer and therefore your site should not annoy them. Doing the above should permit that.

Early morning rant over and out.

Normally I keep news related to my templates to my template blog but I'd just like to announce that the design I'm using here is now available in a convenient downloadable form so that you can use it on your own Movable Type weblog. If you've been using my 'live templates' from the past few weeks you may like to use this instead as it's much more polished and has been sanitised so that it can be used on near-virginial MT installs without loads of plugins or extra configuration.

As ever, the template is released under a Creative Commons Attribution, Non-commercial license, so you are free to modify it and release any changes if you wish.

According to PhotoMatt, Apple's iPod site now complies with web standards. Certainly it renders in Standards Compliance Mode in Firefox. Apparently Jeffrey Zeldman was drafted in by Apple back in September 2003 along with StopDesign, so it's possible that this is a result of their work. Several other parts of the site seem to be moving towards more standards-compliant code too, which can only be welcomed.

It also makes Apple, as a web-browser producing company, look less hypocritical. Apple, on this Developer Connection page for Safari, say:

...your best bet for ensuring your pages render properly in Safari - today's version and beyond - is to follow web standards.

Yet, until very recently, much of Apple's own web site used old-style quirky tag soup HTML. These new pages, while still sticking to the rather liberal HTML 4.01 Transitional standard, are a move in the right direction and should show that Apple practices what it preaches.

Interestingly, immediately after that quote appears on the page, there's a link to this mozilla.org Web Developer page for more information about developing pages with web standards. But then Dave Hyatt, Safari's main programmer, is also a Mozillianite, and Safari has borrowed features like XUL from the Gecko browsers.

Lockergnome has just sent out its first couple of newsletters in its new style, and I have to say I really like them. The extra line spacing makes the text much easier to read, and they're now much more compact in size, thus no longer tripping Thunderbird's truncation barrier which I had set at 50KB. Some of those emails were around the 65KB mark - now they're more like 40KB or so.

The new site also feels nice, and more colourful then before. Thanks Chris and the gang.

Over at Scrapie I've moved the site backend to Movable Type. Although the existing CMS was still working okay, there were some features that it really lacked that would have required much coding on my part. With next term looking awful in coursework terms, and the small matters of exams, holiday jobs and my final year next year, it was probably best that we moved to something that had the features we'll need already implemented.

It'll now allow us to add images to articles much more easily - rather than me having to FTP the files manually (since I'm the only one who knows the FTP password). The site is now much faster too - fewer database calls and less preprocessing mean the pages appear more quickly. And we finally have Google-friendly URLs.

Exporting entries wasn't too difficult - I only had to modify one of the scripts to output entries in a form the MT's Import system understands, and I was away.

Probably the only downside to using MT is that there's currently no separate field for 'author'. In our case, individuals write the articles, but usually only one person (ie me) uploads them to the site, so it wouldn't make sense to have 30-odd user accounts. I actually only set up 2 - an admin account for me and a restricted account for everyone else. I'd like to think that we can now have more people adding content instead of it falling on to me.

The latest issue is partially uploaded - there's just a few final music reviews to go up there.

There's currently a competition to redesign Project Gutenberg, a wonderfully useful but somewhat dated-looking site. The entries for February were posted on Friday, and while some of them are very good, others are not so. Below are my top 5 favourites, based on appearance, how much scrolling is needed to get the information (generally the less, the better) and how much the core functions of the site stand out. These 5 all manage these with a reasonable degree of success, but others were hopelessly over-designed, or made no real improvement over what is already there.

1. Bright Corner (this is my favourite)
2. Dan Hodos
3. Travis Cripps
4. Quang Tang
5. Ben Scofield

These all show what can be acheived with standards-compliant HTML code and CSS. There are some very talented people out there, and I hope one of these designs is picked.

I posted earlier in the week about how Lockergnome was considering a new look, and today they've started to implement the new design.

It does look good (if a little boring due to the dominance of a single shade of blue), and certainly makes content easier to find (although the RSS feeds have almost disappeared into obscurity - no link tags even), however, as I feared, the site now has tag-soup code containing a mixture of CSS and tables. It's a real shame that a technology site like LG felt it had to take this step back, and now I'm worried that some other sites will now not consider switching to more standards-compliant layouts as a result.

The other criticism I have is the difference in rendering between the home page (all content in a column down the left-hand side) and the Windows Fanatics channel page (content stretches the full width of the page). I think it would be better if just one layout was adopted. Of the two, I prefer the latter, but I think having all the content in a centered column would be better since this focuses attention on the centre of the screen where visibility is usually better.

In a way, I wish LG had taken some of the ideas behind this new design (as in how the content is displayed) and then applied it to their older design to get a 'best of both worlds' situation, but alas, they didn't.

Last year, Lockergnome went under a radical re-design, moving from its dated tag soup layout to a new, fully standards-compliant, entirely-CSS semantic layout. This newer design looks awesome, and really helped to show the world what could be done with CSS on a large scale.

However, leap forward to today and this issue of Windows Fanatics:

Lockergnome.com is about to become less confusing as it goes back to more a basic code structure. We're going to unbury the menus and options and chalk up the past few months to experience. I'm not saying that we won't employ fancy scripts now and again, but we're refocusing our new(er) layout on the thing that most likely brought you to us: the content.

Is this going to be a step backward? In a way, yes. I'll certainly miss certain aspects of our ultra-hip CSS implementation. However, until 99% of the installed browser / e-mail client base supports the same standards, we're gonna leave the fancy-schmancy stuff to other online resources.

The link has the quote in full - I've removed a couple of sentences for brevity. While Chris is somewhat unclear as to what changes will be made, it may mean a return to the tag soup days, and I really hope this isn't the case. Lockergnome's redesign set a precendent and it should still be leading the pack, not retreating just to satisfy an ever-decreasing minority. Heck, Wired's redesign was many months ago and they've stuck with it.

On the other hand, site navigation does leave a little to be desired and I hope that the re-design does clear this up, and it could be that the CSS is merely streamlined as opposed to being discarded altogether. Let's hope so.

Dave Shea and Photo Matt also have very good entries on the subject.

To co-incide with the launch of WinZip 9.0, which is finally out of beta, Winzip.com has changed its look, and now looks much better. The site has more of a structure and feels more professional - the old site looked very 1998.

Unfortunately, WinZip didn't decide to jump on the standards bandwagon - it uses tables, Javascript text rollovers (!), and has 6 validation errors, even in HTML 4.01 transitional. Considering that almost all web users now use a standards compliant browser or IE (which is nearly there), it's a pity that WinZip decided not to join the trend, particularly as their new design could be recreated using CSS quite easily.

After making a few final alterations to the design, I decided to go ahead and implement it. Currently only 3 pages - the main index, archives and advanced search page - have the new look; the others still have the old appearance for the time being. I really like the new design - I'm particularly proud of the menu mouseovers, which I picked up from the Taming Lists article on A List Apart. When it comes to working with lists, that page is my bible.

The great thing about this new design is that it requires barely any changes to the existing markup - literally an extra <div> tag to envelope the page content and new code for the menu, and, err... that's it. All the other changes are in the stylesheet. This is one reason why I like purely-CSS based designs so much.

Update: The menu now works as it should in IE - I think the problem was something to do with attribute inheritance. I still think the page looks marginally better in Firefox (et al) but the differences are miniscule.

Last week I was moaning that IE simply wouldn't display a design correctly, no matter what I tried. You'll be pleased to know, however, that after starting again and taking a different approach, I was able to get it working, and the new design actually looks quite good. Please take a look at it and then tell me what you think.

I may make the top image a little shorter in height, and try to make the Search box take up a little less space in IE, but other than that I'll start transitioning the site to this design soon.

IE has pissed me off again with the joke that its developers pass off as CSS support. I'm working towards a new look for the site that isn't based on BlueFade, which has been in use on here in some shape or form for the best part of the past 9 months. It looks nice but I want to move onto brighter (literally) things.

The next design uses what I believe is the box model, and basically simulates having a centred <table> element. Now, I know IE can be fussy with the box model, but I used the same principle for Scrapie and that seems to work okay. With this site, however, IE was having none of it.

Everything was fine when I was working in 'testbed' mode, using just the one exported entry. But as soon as I linked it in with the CMS and added 15 entries, the sidebar disappeared off the bottom of the page. And no amount of adjustments that I could make would get it back. And believe me, I've spent well over an hour using code from various sources to get the damn thing working.

As it is, I've given up for now, but if any of you are handy with CSS please take a look at this page and tell me what I'm doing wrong. For the curious, yes, that is a prototype of the forthcoming design - I was hoping to keep it a secret but IE has decided to work against me on that front and short of doing a Ben Goodger I'm going to need help here.

And naturally, the page has been working fine in Firefox all along.

As I said on Tuesday, I'm now the webmaster of Scrapie, and yesterday I got my hands on all of the passwords. Today, I got down and dirty with the source code.

I will apologise for it now but you can have a look at one of my coursework assignments: BradCamping Ltd.. It's supposed to be a web site for a fictional Bradford-based company that sells camping equipment which can be ordered online.

I suppose it isn't too bad but I was limited by having to use nested layout tables (no frames this time, thankfully), and needing an image map on the home page, which looks rather stupid. But, I'd lose a lot of marks if I didn't have it, so it's got to go in.

Fortunately we were required to use style sheets so I've been saved from the evils of the font tag and could do some nice mouse-over effects. It's not totally finished - I still need to do some fine tweaks and check the markup is okay - but if I fall ill for the next few days and recover the day before I demonstrate it (Tuesday next week) at least I'll have something half-decent. One warning though: do not use a real credit card number if you try out the credit card script. There is no encryption there whatsoever.

The Ordance Survey Get-a-Map service has some interesting requirements:

Get-a-map has been fully tested on, and offers full functionality, when used with Netscape 4.79 to 7 across all platforms.

This includes Mozilla. But when it comes to IE:

Internet Explorer for Windows, however, is more problematic owing to its incomplete support for the portable network graphics (PNG) file format used to serve high-resolution map images for printing. The core search and map display functionality of Get-a-map works with Internet Explorer 4.5 and above, but issues such as dark backgrounds may be experienced in printing maps.

IE for Mac is okay, apparently, although Opera isn't. No word on Safari.

I really hope this IE update that is on its way next year will bring full PNG support, without having to use silly hacks to get it working. And they could fix its CSS quirkiness too, while they're at it.

Go over to your left and look at the 'Neil's Smaller World' block on the sidebar. Then, at the bottom of this entry, click on 'Post a comment...' and give me answers to the following questions:

1. How many entries should appear there? 5 or 10? Or more/less? (non-integer or negative numbers not accepted)
2. Is the spacing alright? More/less spacing necessary?
3. Should each entry be bulleted or not?

I can't decide myself, so a bit of help would be most welcome.

Looking over Jakob Nielson's latest AlertBox column, it appears I'm grossly violating item number 3 - making visited links a different colour. Looks like I need to make some more CSS tweaks.

The article is a very good read, however, and I totally agree with him over the use of stock photos. I can't count the number of sites I've seen with photos of enthusiastic people shot from above using a curved lens - I believe they're from Getty Images. What's worse is that a lot of these sites are at least slightly dodgy or misleading, which makes me instantly suspicious of any site that uses them. I feel sorry for any legitimate businesses that I have been scared away from by their use of 'shiny happy people' (to quote Vincent Flanders).

This is a perfect example of how not to do a Flash intro. Takes ages to load, the 'skip intro' link doesn't work and the music that plays is annoying repetitive.

What's worse is that the main site is in HTML anyway.

Something dawned on me today. The design I'm currently using now isn't a million miles away from the design I was for my personal homepage three years ago. Certainly the general colour scheme has remained, although I'm no longer writing pages in tag soup, nor am I using frames. That word makes me shiver.

That design, incidentally, took inspiration from Jordan Russell's site - Jordan was the creator of the very cool Inno Setup install packager, although unlike me the design has remained largely the same over the past 3 years. However, the page is now a valid XHTML 1.0 document, so he's probably made some changes since.

You know, considering the BCS is supposed to be the UK's only professional society for people involved in IT, you'd expect it to have a better site.

Firstly, you'd expect it to validate, which it doesn't. Admittedly there are only a few minor errors when put through the W3C's validator but then it's only using HTML 4.01 and not in a way that would cause Gecko browsers to render it in Standards-compliance mode.

You may also expect it to be accessible. It's not. Okay, so it isn't bad (tables have summaries and all images have alt text) but it would never make the WCAG priority 1.

Then there's the use of frames... frames! How outdated are they? Not to mention an accessibility nightmare.

The code itself is tag soup. There are stylesheets included, but it's a mess of tables and font tags.

Finally, not all pages work in all browsers. I wanted to update my email address, but because the link to update your email address requires some obscure JavaScript function which Mozilla doesn't support, I had to resort to using IE. Since their journal has, in the past, featured articles about how good Linux is, you'd have thought they would have tested the site out in a Linux browser. But no, obviously not.

If this was any other site I wouldn't be so annoyed, but an organisation like this really could be setting a better example.

I'm afraid I'll have to rant about Black Bull Web Design and their web site, since it's so inaccessable it's almost amusing.

Now, last time I checked, to create a link to a page, you would use the following code:

<a href="newpage1.html" style="color:red">New Page 1</a>

I've spiced it up slightly with some CSS to give the red colour as used on the site. However, Black Bull beg to differ. There, they acheive the effect with the following code:

<td class="welcome" onmouseover="this.style.color='red'" onmouseout="this.style.color='006600'"><span id="newpage" onmouseover="this.style.cursor='hand'" title="available options">New Page 1</span></td> <script language="VBScript" type="text/vbscript"> Dim objNewWindow sub newpage_onClick Set objNewWindow = Window.Open("newpage1.html","myWindowOne", "width=560,height=300,toolbar=no, menubar=no, location=no,directories=no,resizable=no,scrollbars=yes,top=120,left=15" ) end sub </script>

Now excuse my ignorance, but I really cannot see why all that is really necessary. Firstly, since it uses VBScript and not the more open JavaScript, any non-IE browser won't have a clue what to do, including screen readers - all they see is plain text. I don't quite understand the need to force the links to open in new windows either - if I wanted the link to open in a new window I'd open one. And I wouldn't mind having my status bar and my toolbar as well, and being able to resize it would be nice.

Furthermore, the code bulks out the page terribly. You could shave at least a kilobyte out of it if you stuck to simple text links like everyone else, and on a site which generates a lot of bandwidth that could be a very useful saving.

Sometimes I dispair at so-called web designers.

While I'm generally impressed at the new design at CNet News.com, there's one thing that bugs me - the links. Although the mouse-over effect, where the links only become underlined when the mouse hovers over them, is quite 'cool', it has a major problem with accessability. Let's take this screenshot from a recent article about VeriSign:

Since you can't order cards online (why not?), I picked up a Nectar card at a branch of Thresher's Wine today, seeing as we were passing it in town today. Basically it's a loyalty card that gets you discounts at various places - the most useful to me being Sainsbury's (where I occasionally shop, although I mostly go to Netto :) ) and Vodafone who I pay my phone bills to. And occasionally I have to get stuff from Debenhams.

Anyway, there was the option to register the card online, which, despite the inclusion of a freepost envolope, I decided to do. It was alright, until I got to the terms and conditions page - and for those reading a suitably equipped RSS reader - here's the reason why this entry is under 'Web Design'. The 'small print' was very small. Very very small, to the point at which I had trouble reading it, even on 17" monitor at quite a low resolution. What's worse, because I'm using my parent's computer I have to use IE, the font wouldn't get bigger if you adjusted the size. To me, that is almost criminal.

Of course, I could have just installed Mozilla, but that's not the point. It almost seems like they've made the font size that small such that no-one will read it and therefore ignore the "By applying for a card you agree that we own your soul" clause. (Okay, so that isn't in it, but you get my point.)

By the way, this may well be my last entry for a while - I'm going to university tomorrow and may well be without internet access for a few days.

The home page validates in the latest beta of the W3C Validator, even when Fussy Parsing is enabled. Yay.

To quote the Validator mailing list:

When the W3C Markup Validator is running in "Fussy Parsing" mode it will complain about all sorts of things that are technically legal in HTML, but which is known to be problematic in practice and probably not what you wanted.

I'd just like to rant about the web site for the UK's Department of Transport. Open it in IE, and apart from looking a little boring, it tends to look alright. Open it in Mozilla, and the font size is so small that it's barely readable.

It gets worse. They claim that the site is compliant to the W3C WAI Priorities 1 and 2, and even have an accessibility statement to prove it. Great. It's accessible to people who are totally blind, but if you happen to use Linux and only have a little trouble seeing you have to increase the font size just so that you can read, well, anything.

It also has a few rendering issues here and there in Mozilla. Someone really needs to do some more site testing over there.

LostLord.com uses my template, except it's in Arabic Persian. A rather cool use that I didn't expect :).

I'm continually impressed by the number of takers for this design and the complimentary feedback I've been getting - thanks ever so much guys. Be assured that when I change the design, if it is one of my own creations I will release it unto the web for you to download and include in your own blogs.

Yesterday, Firda asked her readers to create 2 images and choose 4 colours, and promised a surprise for today. Well, today came (and in her case went), but from it came the Firdamatic! You enter your site's details and the URLs of your images, and it creates a design for you :).

You can see the fruit of my work at http://www.neilturner.me.uk/firdamatic/ (to save on Firda's bandwidth) - I actually really like it and might just implement something like that here, once I've got it hooked properly into Movable Type.

Well done Firda!

In time for the new term, the University of Bradford has redesigned its intranet. It now uses a fully standards-compliant design (even though the standard is only HTML 4.01), with CSS controlling the layout. It also meets all of the WCAG Priority 1 checks, so it's accessible too. And unlike the previous design, there are no issues in Mozilla. Way to go :).

Unfortunately the extranet is still a bit naff, but it's a start.

yeahok.com is another site that is using my templates. If you are using them, let me know and I'll give you some free linkolas :).

I know I've been quieter than normal lately, but to be honest I haven't got much to say - I've spent the past couple of days doing some serious editing and sorting at the ODP. I'm trying to hit 25 000 edits by September 1st (my fourth anniversary of joining) and currently I'm just short of 22 000. By my estimations, I need to do around 100 edits every day until then...

Of course, on a good day, I can do 300+ but that's not that always the case.

Update: And here's another template user, found via my Technorati Link Cosmos.

Update #2: And yet another!

I'd like to present A Cup Of Joe, another site which is now using my templates :). Thanks this time go to Joe Siegler.

It's strange - to be honest I didn't think anyone would be interested my templates...

Fozbaca.org is the first site I've seen that is using my templates. I hadn't realised how uncannily similar it makes the site look compared to mine, but hey, imitation is supposedly the sincerest form of flattery :).

Anyway, I've made 3 minor modifications to the templates, which are as follows:

• Fixed unclosed <div> tag in the Individual Entry Archive (at the end of the Trackback section).
• Fixed minor rendering issue with the stylesheet (the sidebar was made 5 pixels thinner and lost its border so it didn't overlap with the main content panel).
• Fixed clumsy 'This blog has X entries posted to this blog' sentence in the Main Index template.

If, like Fozbaca.org you have already added the templates, you will need to download the zip file and then replace or modify the 3 changed templates in your MT installation. Sorry for the inconvinience.

If you wanted another reason why you should download my Movable Type templates, then here's one: they should all be WCAG AAA and 508 compliant. Which means that they should be viewable by people with impaired vision and who are using a text-to-speech or text-to-braille browser, or who need to adjust font sizes, for example. (If you're wondering about the names of the standards, one is the W3C's Web Content Accessibility Guidelines and the other is Section 508, a US government document which sets out guidelines on how to make government web sites accessible for all its citizens).

The main index has been thoroughly checked with Watchfire's Bobby tool and with Cynthia Says, which Jeffrey Zeldman recommends over Bobby for the reasons given in his article.

The templates are also valid XHTML 1.1 and CSS2, however if you are not the sort of person who gets a buzz whenever the validator says 'no errors' you may want to modify the DocType down to XHTML 1.0 Transitional. That will give you a little more room to breathe, particularly if HTML isn't your forte.

Why is it that major sites still restrict usage to Internet Explorer?

Looks like I won't be buying my music from buymusic.com. Congratulations on alienating a potential customer before I've even stepped through the virtual shop door. Next, they'll be telling you that you aren't allowed in because you like to wear blue trousers instead of black ones.

[Inspiration from The Web Standards Project]

Update #1: According to Breaking News, I'm not missing much. The music you get is a DRM nightmare for the end user. I think I'll wait until Apple iTunes makes its way to the PC platform.

Update #2: More poor reviews from AbsoBlogginLutely and ScriptyGoddess, and StereoBoy warns of servere problems with their privacy policy.

As a gesture of kindness to the weblog community, I have released my Movable Type templates as open source. These are based on the templates which power this site, although I've stripped out anything that is specific to this domain and removed dependency on any external plugins.

Feel free to download them and use them on your own site.

In future, I may do the same with the template I designed for the ODP Weblog, although that will take a bit more work as it isn't a Movable Type template.

Today, I finally invested in a premium BlogRolling.com account, at the expense of £12.75 for the next year. Jason has been suggesting that he may have to restrict the free service even more, and with the US dollar strengthening against the pound I thought I'd better jump on the bandwagon.

One great thing about BlogRolling Gold is that you can create proper lists for the links, rather than using line breaks. This improves accessibility as it means you don't just have a load of white space between links, and it gives you more flexibilty - you can even have them numbered, if you wanted to. If you're interested in doing this yourself, here's a nifty guide.

Been using BrowserCam to see how this page looks in the various browsers. Although I have IE6 and various versions of Mozilla to hand, and Konqueror on my somewhat under-used Linux partition, things like IE for Mac and Safari are somewhat out of reach, so this service is useful in that it allows me to see what my site looks like in these browsers.

Let's face it, it had to happen some day.

Mozilla.org, the home of Mozilla, now has a glorius new design, adding colour, screenshots and icons which make the page much more pleasurable to look at. If anything, it makes Mozilla look more like an end-user product, and not the tool of a few Linux-orientated webheads.

Firebird gets very prominent positioning, along with testimonials from the likes of Joel Spolsky, who became the Mozillian's friend after announcing very publicly that he had switched. Interestingly Joel can also probably claim to be the first person to have a Pie/(n)Echo feed for his site.

Camino also gets more of a mention - while it's lost ground due to the success of Safari (which I hear is a superb browser, if occasionally a little quirky), it's certainly worth considering, partly due to its more mature rendering engine. It's not as fast as Safari though, apparently.

BugZilla also gets a box, and there's a link for Thunderbird. Things like the status update, which, while being useful, isn't the most interesting aspect of the project, gets bumped down to the bottom.

All in all, I'm impressed, but I think the programming behind the page could have been better. It's only HTML 4.01 Transitional, and although it does have a DTD it does not specify a character encoding type so it won't validate. Manually overriding it with the Western European encoding setting leads to 8 errors, which I guess isn't bad, but then it's a pretty slack standard to start with. When you consider the browser is standards-compliant, you'd expect a more standards-compliant page. It also has issues with accessibility, due to the use of tables in the layout instead of pure CSS, and the lack of heading tags to mark headings, particularly in the navigation area.

That said, it's a step in the right direction. Let's hope that the rest of the site follows suit - as it is, only the front page has been spruced up so far.

As I said before, OnlineBlog recently criticised the design of Daring Fireball, and Jack Schofield, the author of the piece, was, in my opinion, a little too harsh in his criticism. Indeed, I would disagree with him on some points, so I've written my own blog entry on the subject.

One of the ODP chatters made a comment that the purple colour of the links made it seem like he'd already clicked on them, as traditionally purple is the colour of visited links. Which is a fair point, and I guess it's an example of bad design.

So I made them orange. And then they were impossible to read.

But since it's been a while since the last redesign, I decided to change the colours, hence this cool blue look. And when you consider it's currently 28 degrees celcius outside, anything cool is good.

I'm starting to learn a lot about gzip.

IE has a 'bug' in its gzip handling. Sort of. It appears that Mozilla can handle a file that has been gzipped more than once, whereas IE will unzip it once and then display the raw garbage. I found this out when Richy emailed me to say that gzipped was already enabled on the server, and since I was using PHP to gzip the files again, they were coming out garbled. Mozilla didn't have a problem, but IE did, apparently. I've removed it from most files on the server but a general absence of free time has meant that I may have missed some. I'll get to those in a bit.

Whether IE's handling can be considered a bug is debatable. gzipping the files twice brings no real advantage, and greatly increases resource usage both on the server and at the client end, so why anyone would do it intentionally is beyond me. But IE is known to be nice to sloppy webmasters, so it's strange that this confuses it. But then, MS didn't create gzip, did they?

(Jake, this is about HTML validity - you may wish to ignore it ;) )

One of my aims was to get the individual archive pages to reach XHTML 1.1 validity. Currently, they're valid XHTML 1.0 Transitional, but, being the demented little web geek I am, I just wanted to go that extra mile.

So I did. Sort of. You'll see that it reports 1 error - the use of the 'name' attribute in the comments form instead of 'id' (name was deprecated in XHTML 1.0 and has been subsequently removed from the spec). So why is this here?

Simple. The 'Remember Me' code won't work without it. It's strange - I'd have expected the 'id' and 'name' attributes to work interchangably - but, for some reason, it doesn't. Maybe it's a JavaScript thing, but either way, it's annoying.

In unrelated news, the amount of spam to my older email address (myrealbox) has gone up quite considerably over the past few days. Until recently it was maybe 2-3 messages a week, now it's that figure per day. Still, it doesn't matter too much - I'm going to retire that address soon anyway. And it's stayed relatively spam free since it was opened in August last year - it's taken 9 months to reach the stage my older hotmail account reached in 3. That, incidentally, is now used for filling out forms on dubious sites, where I suspect my address might get passed on to others.

eBay is previewing its new look, which is due in a month or two. While it looks good, and offers some usability enhancements, it doesn't look like eBay have taken the chance to jump on the standards bandwagon - which is a shame considering high profile sites like Wired News and ESPN have. Of course, I can't be sure - only images are offered at present - but it looks like a tag soup job to me.

(link from Neurotic Fishbowl, courtesy of guest writer Carla)

For some time now, I'd been wondering why the CSS Validator would refuse to validate this site if the root URL is given. It was happy with the style sheet itself, but it kept telling me that my XML document was invalid if I gave it the the HTML file. And that wasn't true because the W3C HTML validator said it was fine. In short, I was stumped.

Then I took a closer look at the error it was returning. Guess what the problem was? The £ character. The CSS validator only understands Unicode, whereas in here I'm using ISO-8859-1 (but I am contemplating a move to Unicode soon), and £ has to be represented by typing & pound ;, instead of just pressing SHIFT and 3 (which is the key combination on British keyboards). Once I'd fixed that, it was fine.

The problem is similar with the € character, so even if we join the Euro we're still stuck. Bah.

I've got myself a copy of AIDA32, which I have to say is superb, especially as it is free. While looking at it, I clicked through to the web site of American Megatrends Inc (AMI), who've had a stunning re-design. And guess what? Not a table in sight :).

The page renders in standards compliant mode in Mozilla, and links to the XHTML and CSS validators are included on all pages. There's even an accessability statement.

Well done to them. Nice to see such a big company setting an example.

I hate layout tables. I hate frames. And I hate projects where they are compulsory. I'll apologise now for the awful design - I'd have loved to use this site but since there layout is all CSS it wouldn't have fitted the requirements.

What was more embarrasing was that I'd actually forgotten the frames HTML syntax, and had to actually look it up in the W3C specs. It shows you how long ago it was since I last used them - probably over 2 years ago by my reckoning.

I did also slide in another enhancement to this site - if an entry has been extended, then the RSS feeds will reflect this and give a link to read the rest of the article. Having looked at some of these extended entries through a feed reader I realised that it wasn't always obvious that an entry had been truncated, so hopefully this will make it easier. All feeds were updated with this, and you can include the modification on your own Movable Type blog by downloading rss20.tmpl and adding it as a template, as always.

It's not often that I would be able to include 'fish' and 'standards compliance' in the same entry, but this is one occasion when I can. MozillaZine reports that The Amazing Netscape Fishcam has been redesigned with a standards-compliant design. Netscape DevEdge reports how it was done.

If, like me, you're into this kind of thing, it's well worth a read, as it explains how the CSS was put together. Unfortunately, due to the header and footer code used in the page, it only makes it to HTML 4.01 Transitional - no Xs to be seen anywhere, sadly. But it's the thought that counts.

As well as its strange implentation of CSS, there's another reason why I want to hit the developers of Internet Explorer - shoddy support for alpha-transparency in the PNG image file format.

For some of you, you'll be thinking: "woah, what the?". Basically, transparency allows you to specify part of the image as 'transparent', so that it will inherit the colour of whatever is behind it. The GIF format has a crude implementation of it - you can specify one of the colours to be 'transparent'.

PNG is, as most web and graphical designers know, a much better format: better compression, support for more than 256 colours, and alpha-transparency. This effectively introduces a fourth colour channel (the other three being red, green and blue), so you can have varying levels of transparency. Sounds great?

Well, there's one problem. Just about every browser under the sun supports it, except for IE for Windows. Not even IE6 likes it. Oh sure, it'll display PNGs with basic transparency, but anything posh and it'll look like the cat's dinner. This wouldn't be a problem if IE were a minority browser, but sadly most of the world is using it.

Fortunately, A List Apart comes to the rescue. All it takes is a little proprietary CSS and IE is happy as a kid with candy. Of course, the very fact you have to resort to this is more evidence of Microsoft's disregard for standards, and even more shocking when you consider that it works in IE for Mac, and that MS implemented alpha transparency for the icon format to make their XP icons look nice.

If you want to see what I'm talking about, compare this PNG Alpha Mask Demo in IE with it in, well, take you pick: Netscape 6+, Opera 6+, Mozilla 1+, IE 5+ for Mac, OmniWeb 3.1, ICab 1.9, WebTV, and even the Sega Dreamcast.

A List Apart is a very nice resource, and is something that I'm going to have to bury my head in at some point. Even after reading just a few articles I'm learning a lot more about CSS and standards than I knew before.

I spent last night creating this lame effort for my IWT lab. Okay, so it's better than the real thing (which is only viewable from behind The Great Firewall of Bradford or with a user name/password), but still, I think it looks ugly. But then, when you can't use stylesheets and have to stick with HTML 4.01. what do you expect?

But anyway, it was marked today, and I got 100% :D :D. That's 20% of my module passed, or 2% of the year :).

I've been browsing a few blogs today, and I thought I'd share some of the things which have annoyed me about their design. Okay, so maybe I'm not the best deisgner out there, but as a DMOZ editor I've probably browsed more crap than most people.

• Firstly, please don't use target="blank" anywhere. If I want to open a new window, then I'd open one myself. If you want to signify that's it an off-side link, make it a different colour or something.
• You don't have to add every damn site icon and 'Im listed in whatever' image, but if you do, please put them either on your own server or one that is reasonably fast
• Big title images - why? I'm here to read your blog, not wait for some huge image to download. We're not all on broadband, you know!
• Make sure your content loads first, instead of your links - that's what I'm here to read!

That feels better.

I just opened the blog in IE to see what it looks like. And it looks completely different to Mozilla, which is the browser I designed it for (based on the assumption that if it works fine in Mozilla then it'll be alright in IE, and that Mozilla doesn't suck, unlike IE).

Just in case you can't be bothered to switch browsers (or you're in a situation where you can't), here are two screenshots - the top one is Mozilla 1.2.1 and the bottom one is IE6.

I personally prefer how it comes out in Mozilla, but I don't see any real problem with how IE does it. I just wish it had centered everything, like it's supposed to.

Mark Pilgrim, aka Dive Into Mark, is somewhat annoyed by W3C's latest draft for XHTML 2.0.

Apple have launched the first public beta of their new browser, Safari. It looks interesting - it has a native OSX interface, and is built on the Konqueror rendering engine. It also claims to be open source.

That's not all. Apple claims it is the fastest browser on the platform, comparing it with IE for Mac, Netscape 7.01 and Chimera, a Gecko-based OSX-native browser. Apparently, it is also fully standards-compliant, and even has a popup stopper.

It is certainly a bold move for Apple to make, but not a bad one - more competition is just what the browser market needs. It also looks like Apple is sticking the middle finger up at MS, whose OSX offering of IE is known for being fussy. The move towards Konqueror rather than Gecko as the rendering engine is probably down to Konqueror being native to Unix-based OSes and its lighter weight - remember Mozilla supports a whole variety of formats that the typical web user won't use (but geeks just might). Certainly Apple seem to be aiming it at Joe User, rather than the usual geeky individuals who use Mozilla.

[added]
Looks like this has been making the blog rounds, with contributions from Ben, Mark and Mena. It apparently has severe problems with Mark's site - not good, as it works on most other major browsers. Still, it's beta, and if Apple are going to take this seriously then improvements will be made I'm sure. And if what Apple says on their home page is true, then these improvements will go back into Konqueror, which can only be good.

I'm not personally gay, but happened upon the Gay.com UK site today from Google News, after trying to to find a story about a laptop user burning his genetalia. The site is notable, because unlike other news sites, it provides its own RSS feed, and, if you visit it from a search results page (such as this one), it will highlight the search terms you were looking for. It also makes heavy use of >link< tags - if you visit the site in Mozilla with the Site Navigation Bar enabled, you'll be able to use it to navigate the site, as you can with this site and many other Movable Type weblogs. It's quite a nifty feature, actually - pity it isn't enabled by default, or included in Phoenix.

The site also uses XHTML 1.0 Transitional, though a quick run through the validator throws 390 errors. Eww.

And as for burning your genitalia with a laptop... that guy must have one very warm laptop, or a very long attention span. I use a laptop on my lap all the time, and my genitalia is still fully functional, to the best of my knowledge.

Over the Crimbo break, I had a great idea for how I could redesign this blog. The design would be similar to WannabeGirl.org (whose new design is great), but different enough not to look too alike.

So, I spent this afternoon getting my ideas from my head onto the web. Two and a half hours later, I gave up. The new design looked worse than this one.

You see, Firda has quite a sparse home page; I don't. And I really couldn't bare to see some things go, to be frank.

I have, however, tweaked this design to make it a little more accessable. Those of you with Mozilla 1.2.1 or above will be able to access a third stylesheet, which is designed for those with impaired vision (the text is made larger and the colours are negated to give higher contrast). The post titles now use <h3> tags and the headings on the sidebar are now specified by <h4> ; the text is now in sentence case in the HTML source but is made lowercase by the stylesheet. This all means that the site should look much better in older or text-based browsers.

And at the request of mwaf a 'skip to navigation' link is provided for those in text browsers, so that they can skip the main page content and jump to the links that would normally be on the sidebar.

Just noticed that the W3C Validator has been updated. It now suuports XHTML 1.0 and XHTML Basic, and has a more useful interface. And, what's more, this page only has 2 errors in XHTML 1.1 so updating it to that shouldn't be too difficult :).

It seems that ezBoard is now playing the web standards tune, having updated many of its pages to XHTML/CSS and done away with tables. It's great to see such a high profile site take such a move towards the standards (with the home page validating without any errors), but judging by the number of people still using Netscape 4.x, it's maybe a little premature. The furoure surrounding NS6.x really knocked Netscape's image, despite the fact that NS7.x is a very capable browser. I personally prefer Mozilla, but that's only because I don't need the extras that NS7.x comes with.

Talking of which, Mozilla 1.2 Beta is now out, adding better support for Windows XP's visual styles - one of the features I miss from IE. Also expect a spellchecker and Type Ahead Find, a better implementation of the standard 'Find on this page' feature. Phoenix, Mozilla's cut-down, speeded-up counterpart is about to hit version 0.4 too, with the emphasis on bug fixing. I've yet to install it, mainly because I'm unsure if it will coexist with Mozilla - a quick visit to the Phoenix forums is therefore in order.

I'll have a 'life' update later today, since I'm about to set off home. See you soon.

I've just been dabbling in PHP. Ciaran finally got back to me over an email I sent him a few days ago asking how to make the Apache web server treat .html files as PHP files (I knew it was possible, it's just I didn't know the MIME type and couldn't be bothered to find it out). The reason? Mainly because I wanted the BlogRolling links to be included in the page source and not appear as tag-on scripts; that way the page loads faster (particularly on slow connections like mine).

The problem is that there's an incompatibility between PHP and XHTML. The PHP Apache modules sees the XML declaration and thinks it's a line of PHP markup. So it tries to execute it, but falls flat on its face in the process. So, instead of seeing this weblog, you would have seen a nasty PHP error...

The next thing I tried was changing < to & #60 ; , but this meant that the XML declaration was displayed with the code. Grrr.

Just when I was losing patience, I came across The PHP Manual. This explains what to do (add the XML declaration as a piece of PHP code), which finally worked. Phew.

So, the BlogRolling links are now included in the source HTML, which will hopefully raise the PageRanks of those sites that I link to. Isn't that kind of me? :)

Ugh... don't you just hate it when you make one slight mistake in the HTML and it messes up the whole page? I removed some redundant HTML from the template, but forgot to remove a < character, which whacked out the 'posted at' text and turned the 'permalink' link into plain text. Oops.

One thing I have done this week is make some progress with the site for XS WebMedia, my forthcoming web design business. The latest incarnation of the site is at http://totalxs.dbpoweramp.com/xswebmedia/, though currently only the home and company profile pages are working at present. The design, which has changed quite a bit since the last attempt, is now staying, and the two pages use totally valid XHTML 1.0 and CSS (yes, I've checked). Which, unfortunately, is more than can be said for this site, due to the wat Blogger works. I'll have to use less paragraphs or something...