Why simplicity is essential
The first version of this portfolio was published in 2002 June 29th. After that the World Wide Web as well as my thoughts about it have evolved. The second version was built on the basis of first one in March 2003. Third version in 2004 was a big leap to tableless structure, absolute positioning and better accessibility. However, after 5 years it started to look like a half way house.
So what is this thing about simplicity? Basicly I mean simple markup. Take a look at the body tag of the year 2003 version:
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('images/skibig.gif',
'images/hombig.gif','images/pl2.gif','images/worbig.gif',
'images/arbig.gif','images/infbig.gif',
'images/dembig.gif','images/home2.gif',
'images/main2.gif','images/works2.gif',
'images/demos2.gif','images/arto2.gif')">
...compared to body tag now:
<body>
The same goes with other parts, for example the first link of the main menu, from:
<div><img src="images/navitop.gif" width="150" height="25"></div>
<div><a href="../index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('home','','images/home2.gif',1)" class="menu"><img
name="home" border="0" src="images/home1.gif" width="150"
height="40" alt="Home"></a></div>
...to:
<li><a href="index.html" accesskey="h">Home</a></li>
Still the latter one has more functionality in it! Why use complexive markup that is depended on much more complexive chunk of JavaScript when you can simply use a single image and a bit of CSS. The size of the image is less than one kilobyte and it looks like this:
The 3 state effect needs no preload script, no JavaScript at all, just some CSS to move the background:
#menu a {
background: url(../graf/bgnavi.gif) no-repeat;
}
#menu a:hover {
background: url(../graf/bgnavi.gif) no-repeat 0 -30px;
}
#menu a:active {
background: url(../graf/bgnavi.gif) no-repeat 0 -60px;
}
Of course the first a-tag needs other properties to look right, like font size, but I omitted them for clarity's sake (view CSS if you are interested).
Simple HTML markup has several advantages
- It is easy to maintain and alter when needed
- It is much more accessible to disabled people as well as search engine spiders
- It loads a little bit faster
- It is more adaptive. Web pages may be viewed from low resolution mobile phone screens to large Full HD monitors. Or maybe not viewed at all, but listened: blind people use screen readers to hear the written text. Click the "CL" link at the bottom right corner of this page to change the layout. Then increase and decrease the font size in your browser. As you see, the page looks and behaves differently, but the markup is exactly the same.
- It gives you more freedom, which is fun!
JavaScript libraries and the idea of "remote control"
These days most sites are built on some content management system (CMS). I had in mind to code a simple system with PHP, but soon skipped the idea: because I update contents of this site ridicuously seldom, maybe once a year, there is no idea to use script based CMS for that. Instead I set myself other goals.
- Use as clean and "empty" HTML structure as possible
- Keep the site accessible to all audiences and functional without JavaScript
- But also had fun with animations and surprises. For that I decided to use the JQuery JavaScript library, from which I had no previous experience. Now most of these pages have 4 random events happening in each page load. Not rational, but fun.
The wonderful thing with libraries such as JQuery is that the developers take the pain of coping with the mess of browsers, and therefore give others the fun part of coding, even the less skilled js-coders like me.
So the HTML documents have the content and logical structure, that is "remote controlled" by CSS and JavaScript. I try to illustrate the idea in Flash Presentation and diagram below.
Credits
Like Einstein, I was standing on giants' shoulders ;-)
- The fantastic jQuery library
- jQuery plugin for background animation by Alexander Farkas
- jQuery stylesheet switcher by Kelvin Luck
- Simple jQuery Slideshow Script released by Jon Raasch
- Hyper cool and versatile Shadowbox by Michael J.I. Jackson, which may be used for lightbox effects either standalone of with other libraries (here with jQuery)
- Although it was not the first article I read about moving the background image to make hover effects, David Shea's article in 2004 made me abandon traditional JavaScript rollovers: CSS Sprites: Image Slicing’s Kiss of Death
Helsinki, Finland, April 9th, 2009
What is now proved was once, only imagin'd.