supersonic feet

Following a recent trend for ‘live re-designs’, I’ve rashly (it’s 1.15am) decided to start re-designing this website in its live state.

What that means for tonight is that I’ve replaced the stylesheet with a super-basic one, including the reset.css and typography.css files from the Blueprint CSS framework for a quick-start on the whole vertical rhythm thing. I couldn’t quite bare to quite leave it at that though, so I’ve quickly made sure the flickr ‘badge’ at least displays back up at the top of the page where it was along with the main links. Totally untested in anything but Firefox 2 for now though.

The idea (or at least part of it) is that by having your live website showing all the progress (or lack thereof) while re-designing encourages you to get a move on and get something done.

We’ll see

At Gottabet we’re looking for a ‘web application designer’ to join the team. The job entails a range of web dev, from helping design various sections/features of the website to implementing them in HTML and CSS.

There’s a full job spec on the website, so if you’re a developer who’s big on web standards looking for an exciting, fast-paced job working on a big social website, check out the job spec and get in touch with Wim and Bertrand (email addresses on the linked page).

The most useful developer tool for Firefox has just hit it’s first version 1.0 beta and has added some great new features.

Firebug gives you all kinds of javascript and CSS debugging tools that help you track down where errors are coming from. For example, you can inspect a single HTML element and see the CSS that’s being applied to it, as well as where that CSS is coming from (filename and line number). With 1.0 beta it even shows you any CSS that would have been applied, but is getting overridden by other style definitions.

If you develop websites, you need this plugin.

Vitamin does link to some good stuff. Latest in the list is an article on Digital Web Magazine by Aaron Gustafson about the poor, neglected button form element. I have to admit I am one who’d seen the dodgy uses years ago and ended up ignoring it well before I got into standards and CSS, so the article is a mini-revelation in terms of form styling.

Basically, if you can think of an instance (and I can think of many) when you wish submit buttons weren’t so bloody hard to style (or differentiate from other inputs without adding classes), read the article.

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

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.

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!

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.