The 2005 makeover

I’m finally beginning to see the end of the 2005 makeover. While the visuals have changed, most of the changes are those you don’t see: The templates have, unlike with earlier redesigns been almost totally reworked.


h3. Meta information
Every entry now carries an “About” box, conveniently located to the right, showing some information relevant to the entry, such as the number of comments, the posting date, and in which categories an entry is filed. The “Related Entries Plugin”:http://kalsey.com/2002/07/related_entries_plugin/ also provides link to other, hopefully relevant entries.
h3. Links are entries too
Previously, the linkblog on the index page was run by a homegrown, trackback-based system. With this revision of the blog, the custom system has been abandoned; every linkblog entry is now a full-blown entry in the “Bookmarks category”:http://virtuelvis.com/archives/bookmarks/. This provides a number of advantages:
Linkblog entries can now:
* Be found in the site search
* Be commented on
* Be trackbacked
* Send trackbacks
* Have a description longer than 254 characters
* Carry rich markup in the description
* Have additional categories
* Be easily edited and/or deleted
h3. Markup and styles
The HTML(HyperText Markup Language) in earlier versions of this blog has, quite on purpose, been very minimal. This has changed somewhat: There is now a generous use of div elements around the different sections of this site — while they make the source code somewhat more verbose, they offer a few advantages:
First, they serve to classify the different parts of the site, and offer more opportunities for advanced Javascript manipulation of the content. While there is very little use of optional Javascript now, I may add a few Javascript features to adapt the page to the user’s needs
They are excellent markup hooks for CSS. Not only for creating complex CSS designs: The “early preview”:http://virtuelvis.com/archives/2004/10/preview-2005 I presented a few weeks ago made extensive use of “CSS3 Media Queries”:http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708/ – to adapt the site better to both handheld browsers, and browsers on large displays (Large=1100px wide viewport). While this first live incarnation has dropped the media-queries, they will be brought back when the rest of the design has stabilized.
h3. Internet Explorer
Those 30.1% still using Internet Explorer to access this site will notice something: *The site is totally unstyled.*
There are a number of reasons for this:
# The top menu uses 24-bit PNGs with alpha channels. These don’t work in Internet Explorer.
# There is a background on both the body and html element. MSIE doesn’t have terribly good support for this. It has terrible support.
# There are “rounded corners”:http://virtuelvis.com/gallery/css/rounded/ here. MSIE doesn’t support the ::before or ::after pseudo-elements.
# To achieve columns, display: table and related CSS properties are used – Internet Explorer don’t support these. The reason this is used, is that it provides much better control than floats when the width of the page changes.
I was, and am to some extent still is, tempted to give MSIE the “Netscape 4 treatment”, which is a “fully accessible, but no styles”-version. I will, however, create a _graceful degradation stylesheet_ specifically for MSIE. It will provide many, but not all of the visual elements users of modern browsers are getting.
h3. The fractional pixel: A Firefox oddity
When designing the masthead of this site, I encountered a small oddity: The site navigation links, in the upper right corner all had a 1px margin, like this:
bc. .topnav a, .topnav a:link, .topnav a:visited {
margin: 1px;
}
What happened was this: Firefox joined the second and third element of the navigational list, eliminating the wanted margin. Thus, I had to tweak the style, and resort to _fractional pixels:_
bc. .topnav a, .topnav a:link, .topnav a:visited {
margin: 1.3px;
}
h3. Running on caffeine and…
After this redesign, there are a signifant number of plugins and modifications in use – some are new, and some are old:
* “CatEntries”:http://mt-plugins.org/archives/entry/catentries.php
* “Switch”:http://mt-plugins.org/archives/entry/switch.php
* “MT Rebuild type mod”:http://www.seanwillson.com/archives/2003/12/mt_rebuild_type_mod.php
* “SmartyPants”:http://mt-plugins.org/archives/entry/smartypants.php
* “MT-Blacklist”:http://mt-plugins.org/archives/entry/blacklist.php
* “IfEmpty”:http://mt-plugins.org/archives/entry/ifempty.php
* “TextileFormatting”:http://mt-plugins.org/archives/entry/textileformatting.php
* “RelatedEntries”:http://mt-plugins.org/archives/entry/relatedentries.php
* “SetVarBlock”:http://mt-plugins.org/archives/entry/setvarblock.php
* And still running “Movable Type 2.65”:http://movabletype.org/
h3. Visuals
A few words about the masthead. The font used is named “Madrid regular”, and what you see _behind_ the logo is not just a random set of pixels. Neither is it created by hand. The background is generated using the fractal flame editor “Apophysis”:http://www.apophysis.org/.
h3. Final words
As you probably realise: At the time of writing, this design is still not done – In addition to some sections still carrying the old design, there are a number of visual bugs in Firefox, and there are rough edges in all browsers. Due to a big change, job-wise, I had to rush the design by a month – instead of my tentative January 1st release date, it had to be done now.

Next Post

13 Comments

  1. Just plain beautiful, if you ask me. Can’t see any visual Firefox-bugs on this computer, but unfortuneately I haven’t Opera to compare with here.

  2. One of the more glaring bugs was corrected approximately 55 seconds after finishing the post – List items had a negative default margin in Firefox, and so were totally unreadable.

  3. bq. Those 30.1% still using Internet Explorer to access this site will notice something: The site is totally unstyled.
    bq. I was, and am to some extent still is, tempted to give MSIE the “Netscape 4 treatment”, which is a “fully accessible, but no styles”-version. I will, however, create a graceful degradation stylesheet specifically for MSIE. It will provide many, but not all of the visual elements users of modern browsers are getting.
    These two extracts appear to contradict each other. Which is it – slightly styled or no styles at all?
    I find the logo flickers on rollover in Opera. (7.54/XP) Hope you can fix that soon.
    Fractional pixels?! That can’t be valid! 🙂

  4. Apart from the ads, it looks good! You should lowercase the “v” though (s/Van/van/) 😉

  5. Another bug! The menu boxes on the right extend beyond the “content” area in the middle when Firefox is not at exactly 1024×768 (e.g. when I’ve my Sage bar open for reading your RSS feed!). If you gave them a white background it would be a good-enough looking work around.
    I have to say, though, the odd bug aside, it’s a consistentally beautiful site, right down to the source.

  6. Chris Hester wrote:
    bq. These two extracts appear to contradict each other. Which is it – slightly styled or no styles at all?
    I realise I may not have been totally clear about this: _Presently_ this site is unstyled for IE users (not counting the upgrade recommendation). In the _future_ I might give them styles.
    Bryan Feeney wrote:
    bq. The menu boxes on the right extend beyond the “content” area in the middle when Firefox is not at exactly 1024×768.
    I just noticed this myself, it happens when the window is narrower than around 620px in my browser. If only Firefox had supported media queries … In my design draft the site reverted to a one-column display (in Opera) when the browser window became that narrow.

  7. bq. I find the logo flickers on rollover in Opera. (7.54/XP) Hope you can fix that soon.
    I have just used pngcrush on the images to optimize them. Did it help the flickering?
    (I don’t have any flickering at all, running Opera 7.60 preview 4)

  8. bq. Fractional pixels?! That can’t be valid! 🙂
    Oddly enough, “they are”:http://jigsaw.w3.org/css-validator/validator?text=p+%7B++font-size%3A+13.2px%3B%7D&usermedium=all

  9. The logo still flickers in 7.54 on XP, but only on mouseout. It’s annoying because the whole top line triggers it, not just the text.
    Preview 4 on XP for me is even worse – it flickers on mouseover too!

  10. After posting a comment, the logo no longer flickered! But when I went back to the first page, it started flickering again.
    Even weirder – I closed the window down, then reopened it. Now your four links at the top are spread right across the screen under the logo!
    I would call “Opera bugs” here.

  11. I think the flickering might be due to opera reloading the :hover image every time. In Firefox it flickers on the first hover and then doesn’t flicker any more. One way out of it is to use the moving image trick detailed in http://www.alistapart.com.
    Basically, the trick is this: you create a transparent image containing both the plain and the highlighted pictures. This is the background. In normal situations you anchor the background at the bottom, with the top part extendind so high that it disappears behind the browser’s address bar etc. When you hover over it, you anchor it just below the top, so the picture on the top part of the image is displayed, and the bottom disappears behind the content area.
    I could be completely wrong of course!

  12. I have attempted another solution for solving the flickering:
    bc.. h1 {
    height: 94px;
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: bottom;
    font-size: 0;
    width: 80%;
    background-color: transparent;
    background-image: url(images/logo-t.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    }
    h1 a:link, h1 a:visited {
    margin: 0;
    padding: 0;
    display: block;
    height: 0px;
    line-height: 0;
    overflow: hidden;
    padding: 0 0 94px 0;
    }
    h1 a:hover, h1 a:active {
    background-color: transparent;
    background-image: url(images/logoglow.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    }
    p. The idea is this:
    # The @h1@ displays the image.
    # The @a@ uses the zero-height-and-padding trick from the Leahy/Langridge Image Replacement method, but only to _hide_ the text, not display an image.
    # The hover state for the image adds the outer glow.
    I tried this in both Firefox and Opera on a slower machine, and could no longer notice any flicker.

  13. No flickering right now. Looks like you solved it!