Know something you shouldn't? Tell us, using our quick, 100% anonymous tip-off form!
News from the Frontline
It's that time again… Just slightly more than a year after the last major revamp, Imperial College Union gets a brand new website
the font is c**p. it makes the whole thing unreadable.
Looks better. I'm dubious about it looking *good* though. From a design point of view, I'd decrease the font size in the main section, increase the line spacing, increase the margin around the splash image, decrease the opacity of the watermark, use a colour other than peach (I mean really..) on the events section, add a custom selector for the events section to decrease the font weight on event links, and move the whole thing into the center of the page.
Better, but could be a lot better still :)
Looks fine on my system, the machines at work and in fact every other site I've ever seen that uses it.
Do you have a specific, well thought out, direct criticism of the typography? Or are you just blowing your mouth off because you haven't got anything more intellectual to say?
Which typeface would you prefer?
"I'd decrease the font size in the main section."
Fine - decrease it then. It's your browser settings that control this, and the reason it's left to the user is so that people who don't have 20/20 vision can make it bigger.
"increase the line spacing"
Question of preference.. i like the text close (but not too close) together.
"increase the margin around the splash image"
could probably do with a little more spacing - but the frontpage is subject to change. I don't think it will be staying like that in the foreseeable future because it is simply too boring. For those of you who care, that page is a homage to the original Union frontpage (circa 1996)
"decrease the opacity of the watermark"
Most people won't see this; I can tell from the fact you noticed that you are a respectable user who doesn't like Internet Explorer. I agree that the image needs lightening, however it's a tradeoff between light and washed out - I was striving for a balance where you could still see the colors and details in Herbert.
"use a colour other than peach (I mean really..)"
Shutit. I like Peach - It goes well with the blue.
"on the events section, add a custom selector for the events section to decrease the font weight on event links"
Nope, nothing doing. Links are clearly visually marked on the site as both BOLD and BLUE. To remove the font-weight (and there is already a CSS selector for this) would serve to not distinguish them to the visitor as links. There is a recommendation from the w3c that links should be visually different and consistent sitewide.
"and move the whole thing into the center of the page"
No. To make it centered is annoying, because the page will move about on the screen as you resize your browser window - again, while it may look visually more appealing, it just makes it harder for people who don't have overdeveloped wrists to keep up with where everything is.
FWIW, I agree with some of your rebuttals. I tend to prefer smaller font sizes because of the horrific default behaviour of Windows with font sizes (ie. sudden antialiasing at certain levels), but can appreciate that for accessibility reasons alone it's important for the Union to use larger font sizes.
If you're going to use largish text in the middle though, the links to the left look crowded. A touch more vertical padding could help matters.
Finally, don't get me wrong, I think orange is nice. Just not that shade. I know colour discussions tend to get a bit abstract, but I normally think it needs to be in there strong. Quite a nice effect can be had on the date field in events (which looks a bit out of place at the moment) by mirroring the blue colouring on the event box itself; make the border a punchier orange (FF8040), and the interior a weaker peach (FFCEB9). This makes the blue text stand out more clearly, and doesn't seem to act as such a massive visual draw - seems to make it more comfortable to read the main text.
god revision is boring...
the text overlaps the piccie... as shown here
System Windows XP
very nice otherwise, specially when you follow the links :)
That's just the point - the site doesn't use *any* font size - it should pick whatever your default font size is in the browser (mine is 10pt - YMMV) The menu links (on both sides) do have a defined font size for layout reasons - but the center text deliberately does not.
As to the shade of orange, I believe it depends very much on the colour matching of your monitor - on mine it looks quite a deep orange. I'm getting some printouts done on a properly color matched Apple G4, which should enable me to see what the colour *really* is - but i'm not a professional designer so i can't afford to buy proper displays and kit just to get colours right ;o)
And if you think revision is boring, you should try my job!
I didn't test 0pera - there's always one isn't there!
I'm not sure why that is - I'll have to install *yet another* browser and have a play (yeah, I must be the only person on earth who has IE installed on Linux...)
Cheers for the bug report - very complete - I hope that it's fixed for you now (certainly is for me with Opera 7.1 and Linux)
It appears that Opera wasn't picking up the width of that picture - once I had defined it in the tags and the CSS opera picks it up perfectly ;o)
On a related note... I now have 4 Web Browsers installed...
Web development is a very picky subject...
Oooh oooh oooh, let me guess.
Opera, IE, Konqueror and a gecko based on (maybe Firefox)
As for the site. It should make it easier to use and I'm sure it'll start looking even better after a bit of tweaking
The only problem is that IE5.5 and IE6 render differently from each other and slightly different on Linux than IE (no anti-aliasing, no OBJECT extensions)
wooo :) its working... on opera 6 though. theres even a fancy background :)
but still no luck on opera 7... maybe its just my pc... maybe its telling me its time to reformat soon ;)
unless someone else reports the same bug, i'd leave it cos its probs just my lapthing...
I'd try refreshing the browser cache in your lapthing, because it definitely works now on Opera 7.23 on windows ... It wasn't working before i fixed it last night, so i suspect you are still caching the old version of the page.
i am big bad wolf, sam. the font is c**p. just that. i can't find a single redeeming feature:
1. it looks as if the characters have been spaced out
2. it is too big (not technically the fault of the font, admittedly, just of the two-bit amateur who designed the site)
3. it is boring
4. notwithstanding 3, it isn't arial (different for the sake of it?)
5. links aren't highlighted enough
6. type runs too close to illustrations
7. the title is too far down the page (again, admittedly, not the font; arghghg, you really got me there, didn't you?)
There are multiple things about the new page that are truly abominable, mostly relating to the type and body text. whoever did it should be ashamed of themselves. thank god it was free.
and another thing:
why do important things like this (ie which might actually affect the way that people see the union) ever discussed BEFORE they are implemented?
oh bugger, my grammar has gone, hasn't it?
Why do people have to complain? What I'd like to say is:
a)I imagine the style is to be improved in the near future in relation to these coments. The main point of a Content Management System is to allow the data to be entered easily. The style is separate and can be easily adjusted. I'd rather have a useful up to date website rather than one that looked pretty but that's it- is everyone else both shallow and impatient.
b) Is the pretty-ness of the union website _that_ important. If so why did we spend god-knows how many hours bickering (and I do mean bickering) about elections if the website is sooooo important.
"1. it looks as if the characters have been spaced out"
Fair enough, it's designed that way. It's supposed to be more readable - i guess professional font designers differ from you.
"2. it is too big"
That's your browser settings, not mine - if you have your defaut font size set at 14pt, that's what you are getting - i have mine at 10pt and it looks fine
"3. it is boring"
The page or the Font? I'll presume you're talking font - who gives a flying f**k if it's boring - you're supposed to be reading the content, not admiring the typeface.
"4. notwithstanding 3, it isn't arial"
No, you're right here - it isn't. And i'll tell you why. Arial is a standard font on Microsoft operating systems. However because it's copyrighted, it doesn't exist on every system (and here at Imperial College we have a fair number of users clueful enough to no use Windows) Verdana however is free (and installed on Windows, Linux/Unix and even OS/2), and therefore is best to make a page look the same on all systems. You'll be ecstatic to hear that this page isn't Arial either - it's Tahoma, or if your system doesn't have Tahoma, it's Arial - my system has neither so it defaults to my default sans-serif font.
"5. links aren't highlighted enough"
Links are different from standard text in both colour and weight - yes there isn't much between black and the blue the links are rendered in, but that's by they are also distiguished by weight.
"6. type runs too close to illustrations"
On the frontpage yes, the frontpage won't stay like that for ever. It's a bit of a "we don't have anything, what can we knock up just for now" thing.
"7. the title is too far down the page"
Hmmm, not a criticism i've heard before. However for the sake of pedantry, I will point out that the Title is actually also in the Window Title of your browser, so it's technically way above the rest of the page. As to it being too far down the main page - go figure - that's a design thing, i see no convincing reason for it to be higher.
"There are multiple things about the new page that are truly abominable, mostly relating to the type and body text."
Really Idris... in your opinion... and you're what a Medical Student? Have many courses on information presentation, human computer interaction and etc. in your degree? To me, the content is readable, the typeface is readable and unobtrusive, frankly if you want another typeface i suggest you deinstall the Verdana font from your system, and define Arial as your default San-Serif font - then you can have your way.
"whoever did it should be ashamed of themselves. thank god it was free."
Next time you think you can do better - please step forward earlier - it's a little late to criticise when you weren't there earlier.
Looks great until you get to the bottom of the page. If the 3 columns finished in a level line this could make the site look a lot better like the 'site menu' and 'events' line. You'll probably just want white space to fill the gap.
I think it looks fine:-)
Much better than the rubbish at the ULU website which requires flash, bells, whistles and selling your soul to evil to get it to work:-/
I know exactly what you mean Zack, but it is not easily achievable using pure CSS for layout. The height of each column changes in response to the content, and there is no easy way to work out which column is the longest and pad the others.
Sites such as Live! use tables to achieve this look, but tables are not supposed to be used for layout, they are to present tabular information. I haven't yet seen a reliable foolproof CSS layout that implements columns properly.
However when i do, changing the entire site look is a matter of adjusting one template file ;o)
It may well be possible to get the page looking sort of half decent by mucking around with my dfault settings and that sort of rubbish but I don't want to. In common with the vast majority of web users I want to have information presented in a pretty, easily understandable format.
Criticising people for not volunteering to do stuff is no basis for a defence of a bad job. If a job needs doing, thwen the best person should be sought. If the need to redo the website was not sufficient for anyone to be prepared to pay, then might I suggest that it didn't need doing at all?
Yeah, well ULUcube is on the way out, I understand. It's horifically silly, as well as being non-DDA compliant...
Sam, I've seen some interesting techniques for achieving 'footer' style content using min-height, and various workarounds for IE browsers at the URL below. Might be worth a play ;)
I absolutely hate the box model hack.
If I had my way, the page would render perfectly in a w3c standards compliant browser (Mozilla for example) and people using c**p browsers on s**te operating systems would have to live with badly presented content.
Unfortunately they (and Idris) would blame me for their browsers shortcomings, which is why a layout that works in all browsers is what I have been aiming for.
There are already features that don't work in IE (Page backgrounds, fancy menu headings etc.) For each one of these hacks that I have to add, the template gets an order of magnitude more complicated.
I have simply never seen a layout that I like that does this well without using CSS hacks.
It'd be nice to have a small gap at the top of the page (say one line's worth) and a horizontal center. :-)
Looks good and works well with Safari on MACOSX....
While i have 4 browsers installed on this computer, I also have the benefit of looking (from a safe distance) at MACOSX and Safari.
On a related note: I hate you for having a Mac. I now want one. And I don't have the money. Hate Hate Hate
Sam, I understand your hate but just be glad that you have more than one mouse button.
I would feel more aggrieved about the whole x98 situation,
Do what I did. Take out a loan.
Just bought a PowerBook. Sexiest little thing I ever laid my hands on.
I can certainly vouch for that as a course of action.
My powerBook is indeed deeply sexy... as is the iSight camera i just bought for it.
And don't get me started on my lustful thoughts about the DP 2Ghz G5s in my office. =)
Stop! You're turning me on...
Maybe it's time for a *second* loan ;-)
In CSS you can get a footer like this:
The basic formula is float the left column left and the right column right, leaving margins on the central content column to avoid annoying wrapping. Then just avoid the use of borders to hide the actual block size and have the footer placed across the whole page with clear: both; before it.
It's not the neatest effect - but it is pure CSS.
Two minutes with Firefox creates this (some messing with the DOM to get objects in the right order was needed).
Which looks nicer is subjective, and changes with page length - you'd also need to do something about the background being clipped in shorter pages.
Live! is a City & Guilds Media Group Publication and editorially independent of City & Guilds College Union.
© 1999-2008 C&G Media Group