This site has now been live for a little over four weeks, and it has been a lot of fun, but many busy days. The design itself I did in a couple of hours (actually two very late hours at night) so that there would be some pictures of Casper and Robin on the Internet, for friends and family to see. That way we don't crash your mailserver with all the pictures we want to share with you! The idea was to do something "quick-and-dirty" and then at a later time do a thorough redesign. But as so often happens with initial designs: you keep playing with it, tweaking it, making sure it looks good in the most common, modern browsers (IE, Moz, Opera). Before you know it the first rough draft has become a completely worked out design, even though I had something very different in mind!
This site incorporates many of the things I've learnt over the years in webdesign. Especially regarding Standards Compliance and Accessibility. I thought that since I'm advocating these principles to my fellow colleagues and in the websites and applications I make, I'd better use these things in the design of this website. And so I've done! Very important is the structure of this site. If you were to see this site without all the fancy colours and dateboxes and navigation (i.e. printing this page), you will see that all the content remains in its logical place, as one would expect. The beauty of it all is that everything is done without the use of layout-tables. CSS (stylesheets) controls the design, from colours to positioning. XHTML is used for structuring the pages and Javascript to offer a different view of the site - the Styleswitcher. This latter element loads a different stylesheet, changing the "look-and-feel" of the website. Cool huh?
The hardest part of the tweaking process was making sure that I structured the pages (with HTML) in such a fashion that it would look similar in different, modern browsers (I haven't tested this site in version 4 browser - my sincerest appologies!). Secondly the design (with CSS) had to be done in such a fashion that this also would be rendered the same in the major browsers. I have tested these webpages in IE 5+ and 6+, Netscape 7+, Mozilla 1.4+, Mozilla Firebird 0.6+ and Opera 7+, all on Windows platforms (Win98, W2K, WinXP). Unfortunately I haven't been able to test it on other platforms (Linux, Apple) or with the typical browsers for these platforms Konqueror, Safari). Anyway, this tweaking process has lasted up until today, and continues as browsers tend to live a life of their own, not adhering to standards or accessibility. Luckily we're living in hopefull times! Most of the accessibility-features on this site work on the tested browsers, only my version of Opera seems NOT to support the provided accesskeys (see the Accessibility statement under the "Navigation" header - hover over the text). I've read some forums about this problem but haven't really found a good solution yet.
Furthermore I was hoping to be able to use Movable Type as CMS but alas, our provider, Cistron, doesn't support this CGI-script. In fact it doesn't support any useable scripts for its customers, as well as not providing the possibilty to use SSI's. All these things would have made the maintenance of this site a lot easier. I could've placed the header and footer information, as well as the navigation in separate files (SHTML) and included these in my pages. And I could've used Javascript to read the CGI-variables of the page to dynamically build the navigation (show/don't show particular menuitems). Now I have to change all my templates if there is a change in any of these elements, as well as having to edit all the entries in HTML. And Marjolijn cannot easily post an entry, and I cannot easily have visitors comment on the posts. So what's the next natural step? Find a hosting provider which supports these wishes of mine without completely wiping out our bankaccount in the process!
Updated 15 November 2003, by Sebastiaan Naafs - van Dijk
I have done some great things with CSS, but what I've just implemented in the stylesheet of this site is really cool. As you might have noticed the menu on your right highlights the section you're in. All done with CSS! Nice huh? Wanna know how I did it? Download the CSS and check it out for yourself! If you don't get it, mail me.
Posted by Sebastiaan Naafs - van Dijk | top
posted:
1... on 04 October 2024 @ 07:40