supersonic feet

As I mentioned in my previous post, at work we’re moving a lot of clients to new hosting. Due to a very silly system at the old hosts, that means we have to transfer the domain names to a new registrar as well as they won’t let us just point at another host’s servers. We’re using 123-Reg to transfer the domains to, and today I logged in to find a new site design.

It’s quite a pleasant design, but what really got me is that it still uses frames. The layout is such that frames aren’t even a natural thing to use. It looks like what’s happened though, is that while their front-end site has been re-designed in nice tableless code with CSS to handle presentation as should be, the back-end domain management area isn’t so easy to re-code/-style. So they stuck it in a frame.

I’m hoping that is the reason and that they’re working on doing the management area properly, because if they’ve actually chosen to use frames on a fresh build, especially with the new layout they’ve used, it’s madness. It does (hopefully) drive home the point about writing semantic, valid code though. If the original site was written semantically, they could just write a new stylesheet and have their new design implemented much more easily and quickly (aside from any actual content/functionality changes of course).

123-Reg have made a good step forward with their new site, the main ’sales’ part being mostly valid HTML, with ’skip to content’ links, etc. so they (or their designers) do seem aware of the need for standards-based coding, let’s just hope the job gets finished

Philipp Lenssen just posted a nice short piece on how Google’s homepage would stack up in filesize when written in XHTML Strict compared to its current invalid HTML, Google Strict vs. Google Deprecated.

I have to second what he says - any argument for keeping deprecated code based on filesize is quite silly. Valid XHTML (almost?) always reduces file size and both download and render times. Philipp’s XHTML version comes in smaller than the current live Google version at 2.86k compared to 3.08k. Not a big difference, but multiple it a few million (billion?) times for all the traffic Google gets and it mounts up.

Where I think you’d see a much bigger difference is on the actual search result pages. With much more data (all in tables, which beef up code size quite a lot), the difference should be much more marked. Aside from that, I imagine that the results pages are seen much more often than the homepage. With more and more browsers having search bars alongside their address bars, people will increasingly not use the actual front page of search engines as they go from a small input box in the browser itself to the results page.
The results page would be harder to code in XHTML with CSS and still degrade properly in very old browsers (something Google has to think about more than most), but I’m sure it could be accomplished. Things are mad at work as we move a couple of hundred websites to a new server, but if I get the time and inspiration before someone else does, I might have a go at it as it’s very interesting.

An interesting link popped up in my Google Reader today: WebKit for Windows (via Vitamin). Someone has seemingly released the first WebKit-based browser for Windows, allowing Windows users to test their sites for Safari without buying a Mac (something I still intend to do if I ever get some money).

Unfortunately, the GetWebKit link is dead for me at the moment, so who knows if the browser’s any good? If/when the site returns I’ll be checking it out and seeing how many of my sites break in Safari

I would have posted this on Friday, but I’ve been having severe trouble with my site going down so here it is now…

Via CSS Beauty, I found .net magazine’s 20 pro tips article online. It’s an article listing 20 tips for writing better HTML/CSS, apparently handed down by professionals. It then goes on to list some helpful tips as well as some unhelpful or plain contradictory ones.

The main one that got me was tip 14: use semantic markup which followed on to the contradictory tip 17 on wrapping textaround images. Tip 14 is sensible - use semantic markup when writing your HTML (though it lacks any info for the uninitiated as to what semantic markup actually is, or links to places to find out).

Tip 17 then provides, as .net describes it (quite accurately), “a quick and dirty way of wrapping text around images”. They suggest using the align=”left” (or “right”, etc.) attribute in the image tag. What happened to semantic markup and doing any kind of presentation in the CSS? Would it have been that hard to provide a CSS class to do the alignment and explaining why that’s a better way of doing things? After all, these are ‘pro tips’, not ‘HTML techniques from the pre-standards era’.

Tip 9 uses the inline style attribute as well. Why? In other tips they provide CSS definitions so they’re obviously assuming their readers can figure out how to use separate stylesheets. Rather than have style=”..”, provide the CSS:

form {
margin:0;
padding:0;
}

It’s no wonder people end up writing poor code when the major magazine in the UK on web development is providing pro tips that are anything but. I actually had to check that CSS Beauty hadn’t accidentally linked to an article from a few years ago, but no - it really was added just this month.

Browsing StyleGala this afternoon, I spotted a link to an article about the rise of awareness in corporate Britain of the need for accessible websites. ‘Great news’ I thought, clicking the link and reading the article.

It basically seemed to be a bit of PR for some company called Tridion (can’t say I’d ever heard of them), who make content management software for large corporations and have partnered with Reading Room, who are going to use Tridion’s latest stuff to make accessible sites.

That’s all spiffy, but I searched for Tridion’s site to see what it was they were doing to make these marvelous accessible websites and found a website done partially in tables, that fails the Section 508 and WAI accessibility tests. I can only hope it’s Reading Room that have the accessibility expertise and that they’re just relying on Tridion for the back-end stuff.

Why am I picking on these people? I realise this post might seem a bit harsh, singling out a company when there are plenty doing far worse, but from what I can see they’ve decided to put themselves out there as people making these great accessible websites for organisations like Christian Aid. That’s fine - PR is PR and I have no problem getting a bit of free publicity by providing comments on new regulation/standards (the apparent initial point of the article) - but if you’re going to do it, at least cover the bases. If you’re going to announce to the world this great new partnership making accessible websites, make damn sure your own website passes basic accessibility tests (working properly in more than Internet Explorer would help too).

There seem to be plenty of people claiming standards-compliant, accessible design these days while not actually quite living up to it. Just yesterday I read a post on 456 Berea Street about how 71.8% of CSS Reboot participants failed XHTML or CSS validation (or both). For an event meant to showcase standards-based design that’s pretty poor (though to be fair to the organisers, it’s not something they canreally control until the launches happen and even then it’d be a LOT of work to go weeding out any and all non-compliant sites).

It’s not always possible to adhere 100% to standards, especially as the standards aren’t always cut and dried, but stuff like avoiding table-based layout and providing alt tags for images are a seriously low entry point that many still aren’t managing.

Rant over

Last time I was re-aligning but I think this time it has to count as a re-design. After feeling the urge to re-design the site a few times in recent months but never actually being able to come up with any decent ideas (why is it so much harder to design for yourself?), I’ve eventually plumped for ripping and modifiying the back-end design from the Rails content management system I’m working on.

The previous design (above) was very much on the minimal side, with no images in the design (unless you count the strip of photos from flickr), even getting listed on Design Melt Down’s Super Clean section. I’ve tried to keep the new design quite simple still, but added a little bit of graphical interest to help things along so there are now four images in the layout (background, the flickr arrow link and rounded box top and bottom).

This new design hopefully has more focus, especially with a move to fixed width (the old liquid layout didn’t always look great at high-res). The content area is cleanly defined in the white box and I think the new placement of the photos works better, especially on the black background.

While the last re-design (re-align) was done with only a very minimal change to the HTML (i.e. the stylesheet did all the work, as is the ideal), this time I have shifted it about a bit, largely to sort out the semantics. The code order now has a nice title-content-menu-footer flow, with the CSS shifting the menu back up to the top for visual placement. As such, people using screen-readers shouldn’t have to listen to a load of junk before getting to the content they’re after, although there’s a link to the menu at the top of the page incase that’s what they’re after first.

More of the site pages should actually look OK with the new design right from the off this time (I never got round to sorting some in the old design) and it seems to work just about correctly across browsers, although there’s an odd right-float-clearing problem in IE (both 6 and 7) that I’ll need to sort out. In the meantime, apologies for the post info boxes on the right not lining up properly if you’re using Internet Explorer.

While I’m on the subjct of Internet Explorer (in a round-about kind of way), last week we had our ADSL connection re-graded. We were on a 1mbps line but with ADSL MAX we were now promised 3.5mbps. Well I’ve had a week of at most downloading at 200KB/s (which is roughly 2mbps), but often all the way back down to 70KB/s and with plenty of connection failures, all of which I half-heartedly hoped was just the line settling down and BT playing with things. Until tonight, when I downloaded the Internet Explorer 7 beta 3 and noticed a silly number.

After watching the silly number for a few seconds and my download suddenly being done, it turns out I’d averaged about 450KB/s. As a vague check, I downloaded an album from emusic and got similar speeds, so I now really hope this connection keeps up at this speed (and not just at 3am!).

And finally… I’d love to hear any feedback on the new design, so please do leave (constructive) comments. I know there’ll be problems (already mentioned the right-float thing), but let me know whether you like it or not!

The past few weeks our office (all three of us hehe) have been going along to a course at North East NTI at Teesside University on Web Optimisation. The course finished yesterday and it was actually pretty good. Although there was a reasonable amount I already knew, there were some interesting new bits, as well as nice techniques for building linking strategies, etc.

The guy who runs the course is Barry Hebbron and he struck a nice balance between casual banter and the hard information you’re meant to learn, with some good real-world examples too.

For anyone in the North East of England who fancies a bit of (free at the moment!) training, get in touch with NTI - there are courses on Flash and DreamWeaver as well.

On my daily browsing of the CSS galleries today, I clicked on a thumbnail for a site that looked like it had a nice, clean layout, not looking at the name of the site.

As the page loaded, it turned out to be the new website of Senator Edward M. Kennedy and rather nice it looks too. It’s not flashy, it just looks very clean and professional which is nice to see of an American politician when the outside world sees a lot of US politicians as brash and showy (I should point out that I have no idea whether this website actually reflects Sen. Kennedy’s personality as I live in the UK, but it’s the impression given from the website).

The site is even coded well, with a good tableless, CSS-based design. It also has some ‘constituent services’ (often termed eGov by the UK government websites) to provide services online to the senator’s constituency. They’re not earth-shattering offerings to be honest, but it’s at least nice to see a move in the direction of opening services up online. I was particularly amused by the form to request a congratulatory letter from the Senator if you’ve done something special or for a special occasion such as birthday or anniversary.

An idea of how good this website is for a politician can be gained by having a look at Kennedy’s fellow Massachusetts Democratic senator, John Kerry’s website. This a guy who ran for president not long ago and his website looks like it was made in 1997 (maybe it was?). The site doesn’t have valid code, has a table-based layout and send disabled users off to a text-only version of the site. At least they’ve made some effort for disabled users, but how about just making the one site accessible instead of segregating people?

So kudos to Sen. Kennedy for having a pretty smooth, accessible website. I’d go and look for an equivalent Republican senator’s site, but this post isn’t about political ideologies so I won’t bother.

Since I went on the MASER MIGLIA 8 last year, I’ve been getting a bit more involved with The Maserati Club (TMC) by helping redevelop their aging website. Through this, Seymour Pond (outgoing club president and editor of the club’s award-winning magazine, iL TRIDENTE) saw my photos from MM8 on flickr and decided to use a couple in the iL TRIDENTE article on the event.

I’m honoured that any of my photos were deemed worthy of printing in the magazine and last night I got a copy of the new issue from my Dad with the two photos in it. The first is a small one of the landscape surrounding the Grand Canyon framed with the doorframe of the Maserati Bora Paul Muizelaar kindly loaned my Dad for the trip.

The second was printed full-page and is the one I actually posted on this blog when I returned from the trip. It’s great to see one of your own photos printed full-page in a glossy magazine, so I’m quite proud of myself hehe.

I’ll try to post a picture of the magazine itself at some point.

On the website front, development of the spiffy new TMC site is still ongoing. The design is pretty much finalized now and club members at the dinner in the Panini Collection in Modena last month got a look at a recent revision. I’ve been working on the design with Andy Katz, with Seymour providing creative input as well and it’s been a great process to get such good suggestions and feedback from two guys with plenty of experience in design.

We’re now waiting for the structure and functionality of the website to be completed before I get to start building a system to run it all. I’ll refrain from posting a sneak-peek of the new design as I’d like to keep it a surprise for most of the members, so anyone who wasn’t in Modena gets to wait a month or two (or three looking at the list of great features to be developed!) for the site to launch.

At work we’re just about to launch a new disability products shop, Disability Warehouse, and so I did a quick run through Silktide Sitescore as it gives a good overview of any major problems with a website. Obviously it got an abysmal 3.2/10 for marketing as we haven’t actually told anyone it exists yet, but I was surprised to see that it though the site didn’t have valid HTML.I ran the site through the actual w3c validator, which complained about two inputs not being inside a suitable container such as a div or fieldset. Looking at my code, the two inputs were indeed inside fieldsets (and the first was inside a div as well), so why is the validator deciding otherwise?

The one thing I did notice in the error is a PHPSESSID - it turns out that with PHP’s session.use_trans_sid set to 1, it adds the PHPSESSID as a hidden input right after the form tag, breaking validity. I’d come across the problems with it adding the PHPSESSID in links before, which can usually be gotten around with php_value arg_separator.output “&” (although again not on this site as we use friendly URLs so the PHPSESSID is after a ?), but not this hidden field.

In the end I’ve just turned use_trans_sid to 0 as it’s not really necessary these days anyway. People will just need to have cookies on to log in. Being a disability products site though, we’ll have to see if that causes problems with some screen readers down the line, in which case we’ll need another solution or to just make do with invalid PHPSESSID references when the validator looks at the site.

The joys of making sites both valid and accessible eh? While many would talk as though accessibility and valid code are one and the same, there’s so much more to it and irritating little things like this, where the programming language hasn’t quite handled it in a modern, accessible fashion, a compromise is required.