v4.0 and some senses.
And now that this design is almost a year, and a few other reasons, I’m guessing it’s time for a new layout and perhaps a new markup, read on to find out why. Be warned that this is a lot of technical and web standards, you should skip the rest of this entry if you’re not entirely interested in the mentioned stuffs.
Technically, I hadn’t touched any CSS-related codes in my dumpsite ever since I last fixed the problem with viewing in Opera two months ago despite the fact that the last real final work on making this site look the way I want in both MSIE6 and Firefox ended almost five months ago when I rolled out v3.2 of the dumpsite. Let’s go further back.
Before 3.0, 2.0 was a site that was designed with tables for content positionings. It was bad to use tables because it was (and still is) breaking web standards and makes modifications to the layout a royal pain in the ass. So I had to start a new era of web designing, by using CSS/XHTML.
Hence 3.0 was done based on the goal that I wanted to seperate presentation and content through the use of CSS and XHTML respectively, even if it were only to meet web standards. And if it isn’t too boastful, I think I’d succeeded with my mission.
But it wasn’t the end, because web designing isn’t just about the presentation and content seperation. It’s also about user experience. That means even the (slightly) handicapped should be able to enjoy your site, to a certain extend. The goal is that the site’s design may be crippled by the different kinds of user agents but the content must still be readily readable even when stripped of its stylings or a blind may not be able to see your design but can still make out your content with an aural browser.
Solution? We have to make sure our HTML tags not only validates, but are also semantically planned out. Semantic means that every tag is used correctly for its purpose. <h1> is used for the most top-level header in the site, such as the site’s name. And then subsequent <h2>, <h3> are used for headers with less weight.
A list should be enclosed in <ul>s and each item in the list should be enclosed with <li>s and this becomes a list, not abused with some <br>s tag. Example of such abuse can be seen in most people’s sites when they link to others in the side menu. Full of <br> hacks instead of maintaining an <ul> list and then styled with CSS to make it look like they did it with <br>.
Granted, I’ve made some non-obvious mistakes in my markups for this 3.0 design too. I’ve abused <fieldset> too much even when not using a form and that I should really use <dl> instead. I used <p> and some <br> in pages where I can really use an <ul> list. And probably one of the biggest mistake is that, the most top-level header of this site is not enclosed with <h1> but <p> tag, interesting?
To add meanings to words, I’ve also added some not-so-important tags like <kbd>, <var> and <q> whenever they are needed. All in an effort to try to make things more accessible and more semantic.
That said, about 90% of the markup for 3.2 has been modified for 4.0 in hopes of making future re-design easier. Though I had to make more changes that I expected to, but it was much more easier than when I did the transition from 2.0 to 3.0 because 3.0’s markup validates and most formatted nicely already.
I wouldn’t say I’ve done a very good job but what I can say is that I’ve done a job that is best to my knowledge already — perhaps there could be a better alternative of tags I could use for some elements that I hadn’t thought of. If so, let me know please when this site is officially updated.
You should expect 4.0 design to have the same feeling as you do with this current layout. I’m not doing anything fanciful with beautiful artworks, I’m just doing one that’s easy on the eye.
I’m not slacking but I am not done with 4.0 only because I haven’t got any idea how to integrate blogging materials into the layout so that it will look the same as all other pages. Oh well, takes time and I’m not rushing. Besides, there are alot more stylings and testings to do so we’ll see.