It's always fun to see what webdesigners / frontenders do when they have to make their own site. Now we have free hands and no deadlines. Do we ourselves live up to all the accessibility, usability, compatibility and “content is king” that we have been preaching?
In this web-project I've gone for broke. Sharkmeat.dk is like my own little CMS system. It's build around an XML file, like some sort of database. When you navigate on to my website, I've got a .html file that push the XML file forward. Then on top of that I use Javascript to apply XSLT and CSS. When you click an internal link, a new XSLT file is applied to the XML file, transforming it into XHTML, and the site appears in a different way with different content.
It's generated on the fly, at client level, and all I really need to do, to update the website, is to edit the XML file. The XSLT will discover the new content and pull it out with the rest. So I've not only separated the content from layout. I've also made it possible to juggle around with CSS files.
But I've also had to make compromises. Because I'm using javascript, the in-browser navigation, (back and forth) won't work, as it's the same file being show, differently, generated on the fly. Deep-linking to my website is an issue. And when you refresh, the site jumps back to the beginning. It's the same issues that flash websites has been facing for many years. But since it's my personal site, I figured that these things were acceptable.
When it came to the graphics of the website, I wanted to limit myself. And that may sound strange. But the thought behind that was, that if I limited myself in some direction, I would have to find new ways of being creative by taking it in different directions.
I limited myself, by telling myself, that I had to stick to the tools that could be found in MS paint. And so I developed a pixel style, using only a few different colors. That allowed me to stop thinking about all kinds of graphic features I could use, and instead channel all my creativity into making all sort of weird shapes and features, that I would draw pixel by pixel.
When you look at it, it may seem a bit chaotic at first. But hopefully you can see that there's an order to it. That the design is governed by certain laws. Chaotic in an orderly fashion.
When I'm working, I like to listen to music. So when I was doing the pixel graphics for the website, I got a bit carried away. By that I mean, making a winamp-skin and several background images, stopped just short of making a full windows theme.
When I did most of the websites graphics I didn't have a complete picture of the sitemap. And I was still figuring out how I wanted to make it all come together. So I ended up drawing many things that I did not use in the end. Or changed things in such a way, that I had to redraw them. But it all helped me define the style I was looking to achieve.
The different CSS files I've got now, only change the path to the images, belonging to the layout, making the website change color. But because I'm swapping out CSS files, I could also radically changed the layout of the site along with the color, if I wanted and had the time. Maybe I'll do something like that in a future update.
Making different color versions of the layout images was rather easy. It was just a matter of picking a color and replacing it with another color. And because of the simple graphic style, the images would be compressed to next to nothing, in gif format. An entire color-scheme of gif pictures is about 220kb.
So this was a little article about all the thoughts, or the few thoughts, that went into making Sharkmeat.dk. I must say that I'm rather pleased with it myself. Both because I feel like it is something rather personal, that took a long time to draw. And because I've finally got a good place to showcase my 3d projects. But also because I managed to do, what I set out to do, in terms of building my website around a XML file.