Alex Harries's diary

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...