My attempts to increase productivity worked very well. However, the result was not what I expected. Instead of writing my university paper more effectively, I created a new design for my homepage and implemented it right away. In my photoshop folder there's around 7 designs for jannis.to sitting around, but I never liked them long enough to acutally imlement them into an accessible, valid and barrier-free s9y template. But this time I did, and I think it turned out pretty nicely. And here it is: The rickjames template (name chosen for no particular reason)!
As you see, you see no sidebar. I decided to have it hidden by default, it scrolls up to the very top of the browser window. It's a topbar, so to speak. When you place your mouse over the little yellow area, the topbar dropdown will drop down and display you secondary content for the current page. To make sure visitors are aware of this feature, the tobbar will drop and roll back up when you visit the page for the first time. Just to say hi. After that, it will only shortly twitch when the page loads. Just so you won't forget it.
The animation is done using the mad phatt very compact mootools. Don't panic. If you do not have JavaScript enabled, the dropdown will still work when you hover over the yellow area. Graceful degrade, baby!
Of course all images and design elements are within the CSS stylesheet and the HTML is valid XHTML. To increase rickjames' HTML semantics a little, it uses microformats where possible (hentry, haddress, hdate, and so on). For good measure, it supplies a different stylesheet when you want to print a page. Here's how the page looks with no stylesheet applied, the full design stylesheed applied, and the print stylesheet applied. From left to right (the HTML code is the same on all three screenshots):
Why supply an extra print stylesheet? Well, if you look at the leftmost screenshot which is the pure interpreted HTML of this homepage, you can see that there's a lot of clutter you don't want printed out:
- Sidebar-items: mostly links and interactive stuff. Won't work on a printout
- Link style: All hyperlinks are blue and underlined. Won't work on a printout
- And so on...
For this reason, my page will work with a screen reader, look nice on a modern browser, play nice with search engines. How about cellphones and PDA's though? Well, instead of supplying an extra stylesheet for the media handheld, I use the Mobile Output Plugin for serendipity. Because bandwidth is low and traffic expensive, the plugin will dramatically decrease the pagesize. I ran a quick test with my archive page for August 2006: 45kb of HTML in the normal version, 5kb when accessed with a cellphone. Also, the plugin resizes images on the fly so that they fit on small displays.
And the people who annoy me by still using internet explorer are annoyed back with a special "use another browser" annoyance greeting (harharhar):
So - how do you like the new design? :-)
