Alex Harries's diary

I know I should be doing coursework, but while doing some research on the BBC's Access 2.0 accessibility blog for my final year embarrassment project, I realised that the alternative high-contrast stylesheets I put together to provide a text-only version of the UPSU.net homepage could be very easily rolled out to all the other pages on UPSU.net with a couple of simple code changes.

So, now, if you're a Firefox (or similar browser) user, you can change the stylesheets on-the-fly by going to the "View" menu, and choosing a different page style - 2 or 3. Layout 2 - light text on black - is designed to be easier for partially-sighted and dyslexic visitors to use, while style 3 - dark on white - should make also make viewing easier for visitors with certain requirements.

Naturally, this isn't a complete solution to our commitments to providing greater accessibility on UPSU.net, but it's a short step from here to enabling every page to respect the settings of the homepage's high-contrast choices, and also to allow visitors to choose a different level of accessibility as they browse around the site.

One day, maybe, I'd love to see UPSU.net making use of the accessibility features the BBC are trialling on their homepage layout customisation tool.

As always, I'm keen to hear feedback from everyone who visits the site, although I'd much prefer to read the reasoned and well thought-out criticisms over the ranty, angry comments (but anything's better than the tumbleweed of a quiet blog... ;o), so please let me know your thoughts on accessibility, or UPSU.net in general.

/al - I need to get out just a teeeeeny bit more.... 

I'm busy working out how the new UPSU.net homepage is going to look at the moment. We've been collectively throwing ideas around for a long time now - in fact almost since the first homepage went up last year. The new design is going to address the two main areas of criticism received so far - the prioritisation of content isn't felt to be as good a reflection of the content of UPSU.net as it could be, and there is a little too much reliance on text instead of images. It's also a good time for me to make use of some of the cascading style sheet ("CSS") skills I have improved on over the last year, so the aim is to create a largely CSS-driven homepage.

In other words, it's bye bye to the <TABLE> tag wherever possible.

As I'm concentrating on the design side of the homepage at the moment, I'll briefly cover what I'm planning, and my main concerns. Just so that, should you spot me running around campus tearing my hair out, the perfect image of a gibbering wreck, you'll have some idea what the likely cause is. ;o)

The first concern is how different web browsers handle CSS in their own different way. Internet Explorer, as a key example, likes to interpret CSS commands - which set things like what colour text should be, how large, where it goes on the page, and so on - how it likes. You want a box that's 200 pixels wide, and has a border of 10 pixels around it? In IE, it'll be 200 pixels (box width inclusive of border), while in Firefox, Safari, Gecko, Mozilla, etc, it'll be 220 pixels wide (box width, plus border around the outside). Or is it the other way around...?

So while designing the homepage layout itself will be relatively easy, making a one-size-fits-all layout - which is the ideal since there's nothing worse than having to edit six or seven similar-but-slightly-different CSS files to make one change - will take some time, testing, swearing, and a lot of coffee.

The design itself is largely an evolution of the current homepage: many of the current elements - a big "hero" advert on the top right, search, sign in and quick links on the left, news and Social:Life highlights on the bottom right - will still be there, but more prominence will be given to our ever-increasing range of dynamic content; for example, Sabbs' blog entries, forum posts, and photo galleries.

As for the design itself, here's a sneak preview of an initial idea, laid out in HTML (changing background colours show how the overall page colours might change depending on whether it's night or day. Funky or not?):



And one of those boxes close up:



Right, back to work...

You would have thought web design would be a simple job - you tell a web browser what colour your text and background is going to be, and what size, and you're pretty much sorted, right?

Uhhm, no such luck.

I've just lost a couple of hours of my life trying to fix a problem with the menus right across UPSU.net which I caused when I switched the menu system over from a table-based layout (i.e. bad for screen readers) to a list-based layout (i.e. gooood for screen readers) - 99% of the viewing population won't ever notice this change, or at least that was the plan.

Unfortunately, Internet Explorer - God bless it - had other ideas, and promptly broke the menus across the whole site, leaving double-spaced gaps below every single menu item.

Cack.

So I've just been experimenting with box model hacks (apparently a bit of a bad idea without completely changing the way we import our stylesheets, as most box model hacks have nasty effects on NN), and have ended up modifying a bit of code from A List Apart's excellent Taming Lists tutorial.

Of course, I'm expecting something else on the site to break as a result now...

I think I'm going to start on a re-working of our whole CSS system shortly - while the CSS generator is working well (averaging a 30% cut in stylesheet size), the underlying CSS sheets need some tidying up - after a year of tweaking, extending and redesigning, they're all looking a little the worse for wear. Any requests? Or, even better, anyone fancy helping me tidy up the code?

It was pointed out a couple of days ago that we might be somewhat over-doing it with the amount of comments in our code, especially in our CSS files. I didn't realise just how much until I ran a little test using our new-fangled dynamic CSS thingy; comments make up around 16Kb in the 65Kb of css sent down for the homepage alone.

For a broadband user, that's a whole... one-third of a second to download. Ahh well, at least we're heading in the right direction ;o)

Because of this, we're trialling not sending any comments down, but this means if in the future we decide to use CSS hacks which make use of comment tags to hide code from non-compliant browsers, we're going to run into a whole world of CSS validation fun...

Another trick we're trying is sending the .css files in a compressed format - it's (supposed to be) completely transparent to the person browsing the website; our server asks your browser if it can handle compressed information, and either your browser can or can't - if it can't, the stylesheet is simply sent uncompressed, but if it can then the server packages the css file up on-the-fly and sends it down the wires to your browser, where it's decoded.

Despite the minimal benefit, it's still good that we're paying attention to these things, although I'm fairly certain there are many much more important things to be getting on with. Like answering the support emails I've been hoarding for far too long - oops!

/al - off to do some proper work now

More as a way of helping me remember wot I dun last week than trying to write anything interesting, this week I've mainly been...

• Working on the diaries side bar - the calendar system is up and working, along with "latest diary entries" and "latest comments" - now there's only a couple more things left to do before the diaries are ready to go.
• Working on the RSS system - it's not finished yet (I still have to finish the "comments on this article" and set of forums feeds first, but we're getting there, with the addition of a huge range of feeds - see upsu.net/rss/about for a mini-list).
• Working on the dynamic CSS system - since we began UPSU.net, it's never been 100% possible to tell how your web page is going to look because we typically use two CSS files - the local one, and a site-wide one. When you edit a web page, the WYSIWYG editor only pulls in the local template, so some of the site-wide settings - fonts, some colours, etc - don't show. As of today, each page has a single .css file which is generated by the site each time it's called, and includes the local and site-wide CSS code, as well as any user-inserted CSS (which they can simply type when they are editing their page to save the hassle of uploading a stylesheet). So far, everything seems to be working in hunky-dory fashion. Woot!

I've also been playing catch-up with a backlog of work the dimensions of a small mountain, so the next couple of days will be spent finally clearing that - joyous things like answering the "why doesn't the JobShop work?" e-mails (fixed now - my apologies - hosting co. moved server but I forgot to pencil it in the diary... Duh...) and "why don't you have anything about snowboarding/skating/whatever on the site?" (uhhm, 'cos ... actually I dunno...!).

Over the summer, we have a lot of work to be ploughing on with, but the main jobs over the summer include getting the sportos to update their homepages a lot more, and encouraging the societies, and the various Union departments, to do likewise.

Fraggy's been working on getting to grips with some of the harder aspects of the site - creating templates for the Netball club, for example - and I'm planning the rope him into getting some of the site's more neglected areas polished up over the summer, too.

I've also just finished a few different re-usable homepage layout thingies, the first - "violet" - finding it's way onto the Course Reps homepage. It's one of my first *almost* pure-CSS layouts - the code's still a bit messy, but it's certainly better than opening a dozen tables just to push something one pixel to the side...(!). You can see the other variations on the theme here. Unfortunately, one of my evening jobs is going to be pruning the CSS files down to a sensible size - the CSS for the tester page is 60K, which is bloody silly. Ah well, s'pose we can't all have social lives, eh? ;o)

There are quite a few other tweaks I've been making, but I'll save those for a really rainy/boring day...

Right, I'm off to hoover the house - Jade's moving in tonight 'cos I've got a spare room. Apparently she's "loud and lovely" - so says her profile thingy - but she's been a mate for years so I'm sure it'll all be cool. Or noisy. One or t'other...