Alex Harries's diary

Today's been spent tweaking pixels and changing transparency settings. Smutty as that might sound to the younger-minded among us (errm, me then), I now have a basic working layout collection which - I think - kinda, sorta, maybe works.

Click a colour below to see the page layouts. Before any smart-arses comment that it's table based, this is only because that's how Photoshop spits them out (and it's a damned site quicker that individually working on the images). And, for the other smart-arses that know 50 much faster ways of doing what I've done here... Do let me know so I can spend more time in bed please!

• Light purple
• Dark purple
• Light blue
• Dark blue
• Light desert
• Dark desert
• Light green
• Dark green
• Light light blue (odd name, I know)
• Dark light blue (even odder...)
• Light orange
• Dark orange
• Light pink
• Dark pink
• Light red
• Dark red
• Light yellow
• Dark yellow

... and the award for dullest template design yet goes to...

• Light grey
• Dark grey

The Conservative party don't have a patch on my dullness ;o)

The "light" versions of each colour will be selected during daylight hours (in Portsmouth), with the "dark" version displayed after dark, and varying shades of grey/blue/orange/something used as a backdrop during dawn/dusk (although that might have to wait until later in the term when I have a bit more free time). There are a couple more tweaks in that area planned, but it all depends on time - I've still got to make sure the page content works before the site can go live.

You'll probably have noticed the grey box in the top-right of each page. This is where the buttons to change the homepage's colour will live. The colour changer will store your preferences in your profile, so you'll need to be signed in to see your custom homepage colour. Yes, I know, it's a very small thing, but the "for" argument comes from the same camp that reckons different coloured iPods are cool - being able to change the colour of UPSU.net's homepage is just anoth...

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