I could have easily titled this "What I learnt while making this website" (yes, "learnt" – British English, my friends), but it felt a little long.
The website has only been truly complete for a few hours now, because I now believe no more changes are needed (though the past week has been just about tweaking). This means I haven’t yet received any real feedback (except from a couple of friends), and so I cannot say I’ve learnt anything from the potential users.
But as a web designer (an amateur, really), there are so many things I’ve learnt over the past month that I feel it necessary to write down the most important of them.
First of all, the default font.
As I started this website thinking about the design, I soon realised I had no idea what the best fonts should be.
See, when I designed the original Arpia website, I just tried to find information on what fonts would exist on all computers. This means the default fonts were as follows: Verdana, Arial, Helvetica and finally the generic sans-serif (for non-webdesigners, the browser will first check if the first one exists, and if not, move on to the second).
But those aren’t the best. Really. Some people made a movie about Helvetica, because it’s ever-present, but when asked why Helvetica was still so popular 50 years after its creation, type designer Erik Spiekermann asked "Why is bad taste ubiquitous?" (source). I think it’s ugly, but that’s just me.
So in the end, based on lots of research (and notably this webpage), I decided to go as follows: Lucida Grande, Lucida Sans Unicode, Lucida, Verdana, Arial, and the generic sans-serif. Perhaps it’s because I’m on a Mac, but I truly feel Lucida Grande to be the greatest font designed for the screen. I’ve tried to replace my OS X system fonts, but never found one that felt better than Lucida.
Next, the general layout.
Header
I designed the header and background early on, and though I believe I could still make the "R" in the "PETER" logo slightly nicer, I haven’t changed those elements in a while.
What really changed is the whole "buttons" section.
A friend, upon seeing the website, asked why on earth I was using Javascript for the very basic "Hover" effect. If you want to see what kind of effect it was, go to the old Arpia website and hover above the sidebar buttons. It’s an immediate change of status (from "normal" to "hover"), and it’s not really enjoyable. I started looking for "Pure CSS Hover" tutorials, and found none that explained it well enough. Plus, they still looked clunky.
And then I stumbled upon a website whose hover effect I really liked: PixelResort.com, the webpage of an icon designer (with some nice articles & tutorials). I realised that this "fade-in/fade-out" effect was much more powerful and enjoyable than my old "mouseover" technique.
Main body
Until I decided to add a WordPress blog (after a comment by a friend who basically said "Nice website. More content?"), I had a darker colour scheme for the text backgrounds, and it never felt perfect. The text was near-white, and the text background was dark blue (so dark it looked black).
At first, I had a really ugly gradient effect between the text background and the main background, and when a friend suggested I make it more "Web 2.0", I took a look Jonas Rask’s website (another icon designer), because I knew it to be one of the sleekest websites I knew.
The design got much better, but it still wasn’t perfect.
Then came WordPress and a shift of perspective.
The default theme for WordPress is the epitome of "cleanliness" in webpages, and it went so well (in my opinion) with the header and background that I decided to adopt it for the rest of the website.
Finally, browser support.
Back in the old days of designing the Arpia website, Safari for Windows didn’t exist, Safari 3 for Mac wasn’t even an idea, and the same went for Firefox 3. IE6 was still very much the norm in the Windows world, and so I had to take it into account. All the same, there was one thing I still couldn’t make cross-browser compatible (the Arpia logo, if you look at it in IE6, still isn’t well positioned – I can’t remember if it does place it well in IE7 or not).
Today, however, IE6 is nearly seven years old. And after reading a number of articles on the web, I decided that I was not going to support it. Turned out that PixelResort.com didn’t either, so I took a look at the code used.
And here is the result.
However, this webpage does not say why I decided not to support IE6 and older versions.
Reasons for dropping IE6
Over the past seven years, web developers have found and implemented a number of "hacks" to force Internet Explorer to render websites "as they should appear". IE6 has a number of shortcomings in terms of standards support, even image format support, not to mention the security problems for Windows users.
Paradoxically, this continued use of hacks has made users unaware that there are alternatives to IE, and that IE itself is outdated, which means few users moved to better browsers.
However, Microsoft seems to have finally understood that IE6 is a plague, and therefore introduced an automatic upgrade system in early 2008 to get most users on Windows XP to upgrade to IE7.
I therefore believe that it is time for all web developers to start giving some serious thought to dropping IE6 support (among those who visited arpia.be in the past two years, the percentage of IE6 users has dropped significantly – but perhaps this is due to an increase in traffic from students, who usually haven’t even heard of IE6 in years).
There, I believe this is a summary of the most important things I’ve learnt from this experience.
And I’m satisfied with the result.