This is version 3 of The Matrix my website. After four years of development
the site has changed a lot, and I want to share some of my ideas and techniques with you.
I tried to creat an attractive design combined with valid code and
the latest techniques.
XHTML
Every single page of this site is XHTML 1.1 valid, at least when requested by a browser that supports it (this excludes Internet Explorer). If not, please let me know so I can fix it. I respect the web standards and try to follow them as much as possible. This means that not only my site is XHTML valid, it also doesn't use tables for markup, separates the content from the layout, doesn't use pictures for text and includes meta information for machines to understand everything.
To have full control over all pages, I wrote every single line of code (except for the jQuery library) myself. I do not use a WYSIWYG editor, nor split view with code editor. I write code only, and test directly in different browsers. This leads to optimal quality of my code. It does not contain unnecessary strange code that tools would generate, but it is valid code. This way I can also immediately make sure everything works in every browser. (IE made this really difficult for me, but I got the biggest part working in IE 8.)
According to the XHTML 1.1 standard, pages must be sent with the application/xhtml+xml MIME-type. When you send this to IE however, I thinks you are trying to download the file instead of viewing it. If Internet Explorer is incapable of even loading a standards-compliant page, how is it ever going to render it correctly? It clearly lacks support for standards. That's why pages for IE 8 are sent as plain HTML.
The site runs on PHP. This is a server-side language wich generates most of the content you see here. I heavily use XML and XPath to generate pages from the data. Every page on this website is dynamically generated with PHP.
Design
One of the hardest things—if not the hardest thing—about creating this site was the design. I had so many great ideas that I wanted to implement, but this is simply impossible. Some things look great on their own, but not nice when combined. I had to make decisions. In the end, I am quite pleased with the design as it turned out, though I still think everything looks too much like a ‘page’, and less like a modern, interactive, web 2.0 website. I used interactive techniques; I added animations, I used new techniques like web fonts, but still everything looks like a static page with interactive elements. But like I said, I had to make decisions. This was one of them. I couln't use every idea I had, so I used a few and it turned out like this.
Though I designed everything myself, I used some great sites as inspiration.
I like the Blender website very much.
Especially the orange page headers. My headers are based on the same idea,
but I don't use pictures for text as this is generally a bad idea.
Instead, I used web fonts, a new feature in CSS3, to display a nice header.
There are only a few fonts that are free to use on websites, but
Carto Gothic
looks nice. It slightly resembles the beautiful typeface Myriad Pro.
To make it look even nicer and better readable, I added a slight shadow,
also a new CSS3 feature. Of course, Internet Explorer supports none of these features so
it looks a bit flat and boring when using IE. This, again, is a choice I made.
Replacing text with images is an even worse solution and not very dynamic.
Flash isn't any better than images, as it is still not readable to machines,
and not selectable (at least, together with the page content).
By the way, the backgrounds for the headers are all
strange attractors rendered with
Chaoscope, post-processed with
Photoshop.
Apple has a gorgeous website, one of the best if you ask me. (They are the masters of design anyway.) I especially like the arrow-style navigation bar, though Apple is not the only one that has one, and I am not even sure if they were the first. What's special about my navigation bar is that it changes colour entirely when you hover it, not just the link. It was hard to get this working with overlapping arrows, but I got it working!
For the ‘news’ section on the homepage I used a kind of blog-style calendars to indicate the data. I've seen several ones on different blogs and there are probably thousand different templates for blogs that include this. I make mine myself, which was also quite hard to get it right. It often worked in Firefox, Safari, Chrome and Opera, but then Internet Explorer screwed it up and I had to find a different way. This problem occured not only when designing the news headers though. It was a quite common problem. I decided to drop support for IE 7 altogether as it renders the page completely wrong.
One of the things that made designing this site so hard was that I chose a fluid layout. This means that the page fills your entire screen, independant of your resolution. Fluid layouts were quite common some years ago but are more and more being replaced with fixed-with layout. Most websites just waste my 1920×1200 screen. The disadvantage of using a fluid layout is that there is a large difference in how the page looks at low and high resolutions. A paragraph may take up six lines at a low resoltion, but only one at high resolutions. Long lines of text are also less readable. I tried to reduce this problem by adding margins at the left and right.
User-friendliness
This website is multilingual. If you are using a Dutch browser, you'll automatically see the Dutch version of the site. You can always switch language at the top-right corner of the page. The website also includes a version optimised for devices with small screens, like iPhone and iPod touch. Though those two devices are perfectly capable of rendering the full site (including advanced effects like text shadow), the optimised version reads easier and is easier to navigate with your fingers. If you are using a mobile browser (like Mobile Safari or Opera Mobile), you will automatically see the small screen version. As with languages, you can switch version in the top-right corner of the page.
When there are multiple versions of a download, the site will automatically select the appropriate download for you based on the information your browser sends with the request. This includes operating system and sometimes 32/64-bit information. Information about mobile browsers is also taken into account. Stable versions are always preferred over beta versions. Of course you can still select the right version manually if my advanced algoritm got it wrong.
To make the page mor interesting and dynamic I wanted to add some animation. This is perfectly possible with Javascript these days, and I use jQuery to achieve this. I wanted to move away from Flash, because it is not supported everywhere (like on an iPhone), and because Flash content is separated from the rest of the page. This means you cannot select text on the page and in the Flash movie simultaneously. Also, Flash content is not visible to machines.
Though the pages are perfectly readable for humans, machines sometimes have difficulties understanding the meaning of certain things. That's why this site also includes extensive metadata like Microformats. This helps machines understand the content and allows browsers and search engines to do extra things with the content.
To make the URLs less cryptical, I made better URLs with URL-rewriting. An address now contains only lowercase letters, digits, hyphens and slashes. It was a choice to omit the slash at the end of the address. This is because it points to a file, not a directory.
