New Evolution website!

I have updated the Evolution website. For those of you reading this who don’t know, Evolution is a groupware client, meaning that it provides mail, addressbook, and calendaring functionality.

See the old versus the new below:

The old Evolution website The new, spiffy Evolution website

It uses simple, structural HTML 4.01 w/ a massive helping of CSS for both style and layout.

Why HTML 4.01 and not XHTML? Good question — I have a good answer too. Basically, it’s not driven by a CMS of any sort and I know that it will be hand-updated over time by a ton of different people, therefore it’s easier to have it validate as HTML 4.x (or come close to validating) versus something stricter like XHTML. (:

Note: It seems that is pulling in the live css file, so what you see isn’t exactly the old web site (it has the new fonts, new h2 treatments, etc. — it’s still pretty close though.)

Tags: , ,

15 Responses to “New Evolution website!”

  1. foobar says:

    Install Opera and you will see what you need to fix.

  2. giz404 says:

    Sleek design, great job !

  3. Jason Hirst says:

    What a gorgeous looking design!

  4. vanRijn says:

    erm, also, I just pulled this up in Opera 7.60 TP2 (Linux) and it displayed fine. Not sure what foobar was referring to…

  5. Garrett says:

    I tested it with Opera a while back, admittedly not the most recent version of the site, but it was pretty much about done. I also looked at it in Konqeuror. No problems in either, from what I saw.

    I’ll look at everything again today though, just to make sure.

    If you could give a clue as what it is, then I’m more likely to fix the problem. Links to screenshots help a lot sometimes too (especially if there is a rendering issue).

  6. Sankarshan says:

    Great job. As usual, your style blends information with lightness making sparse design a virtue.

  7. Brian Crescimanno says:

    Garrett, great job as usual. My only question is: why do you use two different evolution icons on that page? The header icon, and then the icon just after overview are, iirc, the two icons that you and jimmac did for Evo. Why the inconsistency?

    Not sure why this struck me, but it did.

  8. Man. Websites designed by Garrett have such an unfair advantage — they automatically get the coolest little icons for everything 🙂

  9. Garrett says:

    Update: Okay, I added in one extra line in the CSS file to fix Opera (and not break anything else). It seems that if you do absolute positioning in Opera, you need to specify either a width or the rightmost element, else Opera constrains the positioned element, forcing wrapping. It’s lame, but thankfully I could specify the container element’s rightmost position as 0, and that fixed everything (without hurting anything else).

    I’m not sure what to do about the broken wrapping in Opera, however. The wrapping works great in Mozilla, Safari, Konqueror, etc. — it even works perfectly fine in IE. There may be something that could fix it; I’ll look into it more. If anyone has a patch for the css to make it work in Opera (and not break everything else), I’d love to see it. It’s funny that the same technique works everywhere else on the site in Opera, however… The thing that makes it not work in this case is the additional floating object (the screenshot collage).

  10. How did you do the little spinning dots under the selected urls?
    Is this a normal css-behaviour or some evil-hackerish-raping of stylesheets?
    Lovley page btw!

  11. Garrett says:


    I wanted to add some special little (and subtle) touches, so I came up with that idea. Basically, it’s a set of two one line gifs set to the background. The hover image is animated while the standard one is not. Of course, the underline is turned off as this replaces that.

  12. Jim Beam says:

    it looks like all the other websites you’ve created. not to put you down or anything, but it appears all the websites/icons you create all have the same appearance to them. i’m sure you can accept the criticism beings you allow postings.. im not saying it’s not nice, but it’s like bmw creating 50 variations of the same model.

  13. Looks absolutely wonderful! Quite a massive improvement over the old site. I am truly humbled with your skills… again!

    I only have 1 tiny question: on the main page, the “View Screenshots” link does not have one of those spiffy underlines. Even on the screenshots page, the image shots contain the underline. Was this to fit into the Feature Highlights not having the underline as well (only the “read more” link)?

  14. A question: how are your web pages etc licensed? That is: would you allow me to use some of your style files (of course, properly crediting you) for my own pages? Nothing commercial, obviously…