Quarter Life Crisis

Redesign¶

797 words on earthlingsoft

Today we launched our redesign for the earthlingsoft main page and the main application pages. We had our old design since 2001 or so. And I still quite like it (guess who came up with it back then…). It’s quite unique in that it accommodates both the German and the English version of a page on the same page. Which I did not only to make editing simpler but also to avoid the all too common problem where a page has lines that are too long for comfortable reading or a lot of horizontal space is wasted on the pages. Another reason was that we didn’t find a good way to automatically show people their preferred language when doing the old design. And thus showing all the languages we had to offer simultaneously seemed like a good compromise.

Of course the old design had quirks as well. While it was strict XHTML (which must have been the hype back then) and a CSS only design affair, every page also consisted of a single large table. For a simple reason: The pages’ layout was essentially tabular – left column German, right column English, middle column Overview. And while this text’s page suggests that I am capable of creating three columns by the magic of div tags with some CSS thrown at them, the old earthlingsoft pages also needed a certain amount of vertical rigidity to align things correctly towards the bottom of the page. For a long time I was convinced that this just isn’t possible to achieve.

Possibly it might be achievable by making repeated and careful use of floats with some clears at the right places. But that wouldn’t have solved the other problem of the table layout – it’s poor accessibility. Not that I actually know much about accessibility but I assume that when using a screen reader or some similar assistive device, having to figure out that you are in such a table where you want to read downwards along a certain column is unnecessarily painful.

In addition, time passed. The second web came along. And managed to drive a design related message home to me. In fact this one of the first messages I ever learned about the web – thinking of ‘the web’ not as an entity to please Sven-S. Porst but as an entity that is read by those mysterious people out there. And that message is: While Sven-S. Porst likes spelling out all the information in detail, nobody actually wants to read it. I learned that lesson for the first time around 1996. We made a site on the Bremer Haus for a school web competition. And some of the remarks we received were that there was too much text in there. WTF?! Back then images were still slow loading low-quality things on the web. And yet people preferred them to actually learning about the topic.

Anyway, I caved in now and our pages now feature nice large icon graphics and little text. And as the post of a few days ago suggests we also looked into content negotiation to make everybody end up at the most appropriate language by default. It seems to work reasonably well now, but doing and checking that was quite a pain. Not just because Apache’s content negotiation has been very correctly described by The internal algorithms in this module are very complex and partly even heuristic, which makes this module really nontrivial – both to understand and to use but also because Safari, which presumably is the main target browser for an OS X software site, isn’t particularly clever when negotiating languages. Indeed, buggy may be a better word to describe that. And thus it took more effort than anticipated to both figure out what’s going wrong and to work around the problems. I shall try to detail that in a later post.

While trying to keep things simple, I of course couldn’t resist a few things to enhance the Internet Explorer incompatibility of the site. Although IE7 actually only failed on the :target pseudo-class which can probably be excused. [This doesn’t mean that IE7 is good – just that I was lucky enough to not get myself into a situation where IE7’s positioning is as broken as IE6’s but you need a different workaround.] And on the back-end, what started out as trying to be clever by splitting the various parts of the application pages and joining them using PHP, of course ended up being a royal mess with many little files existing for each application, leaving a nice mess in their respective folders. On the up-side, that modular approach finally enables us to have nice looking and correctly localised version histories in the Sparkle update windows without any extra effort.

March 16, 2007, 0:42

Tagged as earthlingsoft.