2005 Preview

I’m currently in the process of doing the “2005 makeover of virtuelvis.com”:http://virtuelvis.com/download/207/index.html and I have chosen to reveal it at an early stage. There are a number of new features in the 2005 makeover:


* The normal display is a two-column design, as viewed by Mozilla/Firefox, and Opera at certain browser window sizes.
* Handheld styles. Ok, they’re actually not specific to handhelds, but using “CSS3 Media Queries”:http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708/ the display will collapse to a one-column design when the viewport becomes too narrow for sensible multi-column display.
* When the viewport exceeds a certain width (around 1100 pixels at the moment), the display will expand to a three-column display, saving some vertical space.
* Ok, there is no print stylesheet at the moment, but there will be one, hiding everything but actual content.
* I’m back to using display: table again – something I used in the very first incarnation of this blog. Much nicer than battling with floats or other positioning schemes.
* _Internet Explorer: You can take this CSS and shove it._ The preview is hiding the CSS from MSIE. While the final version might actually show some styles, specifically crafted for IE, the current version features only a notice telling users they will benefit from browsing the world wide web with a modern browser.
* While the preview uses XHTML 1.0, that might not be the case when the final incarnation is released.
Love it? Hate it? Tell me.

Previous Post

3 Comments

  1. I like it, but it’s still a bit dull. Looking forward to seeing some more colours and visual widgets in the design. As of now, there’s not very much to rest your eyes on.

  2. I am especially fascinated with your decision to use Media Queries for serving different styling and not using specific media styles (e.g. handheld). The recent redesign on Opera.com also does something similar btw.
    The main drawback of that approach is that the only browser that currently implements it (Opera 7+) only calculates the media query values at parse time. In other words, the design won’t change dynamically when resizing the window: you have to reload the page to see the effect. That is a real pity…
    And because the page will be illegible to IE users, you might even consider serving it as application/xhtml+xml to ward off IE entirely. Or is that a bit too much of a good thing? 😀

  3. Mark: If I started using application/xhtml+xml, nobody would see anything. IE users could download the source, and view it with their favourite Notepad, and users of newer browsers could enjoy the all-too fascinating xml error messages.