Since the conversion to Movable Type is taking more time than I thought, I wanted to release the design and later make the conversion to Movable Type. The design is created by Arthur Steiner, with whom I have a company. He also did all the wonderful PNGs.
I must say that the design could have been a lot more 'designed', but I didn't want that. I am a minimalist (I think) and I care about Kilobytes :). While the design has changed I also make use of the xml stylesheet Processing Instruction and it works great. I still send my pages as application/xhtml+xml to browsers who have this in their accept header (not to Opera, or the validator (yet)).
If you are a IE user, you will see that my header is 'screwed' in your be loving browser. Please switch to Mozilla if you care about it. My site could have worked in IE if I wanted that. The reason it doesn't work is that I didn't want to limit the markup or use ugly hacks. This is how the site will be and it looks a lot better than the previous design. Even if you browser doesn't support PNG.
I have used object to demonstrate a use for it. If you browser would support the standards correct and it doesn't support PNG, you should see the alternate text within the object element, carefully styled with CSS.
The JavaScript sidebar, which works terrifically in Mozilla can be used on any site, just copy the right function for that. Share you thoughts if you have any.
O, special thanks to Egor Kloos for his comment yesterday. Thanks to his idea with the header, I also wiped a div out at the footer.
I like it. The colours work well together. I'm viewing it in Camino. It gave me quite a surprise to see it in Camino, as I had been using my default browser, Safari. In Safari the main text disappears under the sidebar. I switched browsers merely to get the text and suddenly saw all the colours as well - in Safari the display is monochrome. I just tried to see what it looks like in IE5.2 for Mac, but your site makes that browser quit.
I guess it's Gecko-based browsers or nothing. :-)
Is the header image meant to say "Markub"? Very nice new design.
Michael: I had the same problem. It turned out my browser was caching the old stylesheet, which caused the weird text overlap. Control refresh or loading the style sheets in the browser manually should fix it.
Nice job! Much, much better then the old design... But I think Simon is right about the "Markub" part, since the source code contains the right spelling.
And is your "Skip to the content" link supposed to point to #navigation?
Anyway: congrats on the new design.
I think I'm going to kill someone today... :)
Bas Hamar,
Thanks for the source checking, this will be updated.
Congratulations, very nice design!
I see you set style.display, style.color, etc in the JavaScript function for your menu.
Maybe you agree things will be more maintainable if you just add a classname to the elements so you can style the different states in your style sheet.
To add a classname this will do:
e.className += " " + name;
To remove a classname you have to loop over the different names in the className property, but that's not too difficult either.
Oops, thanks to Simon, I *can* now see the colours in Safari. But I now have you bookmarked in Camino, as that seems to have better PNG support.
How about a favicon, Anne? If it were in your new orange and grey site colours, or used your stylized rose logo, or something like that, it would be an immediate visual reminder of your site for people with a lot of bookmarks.
All you need is a little 16x16 pixel graphic and this in the head:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Apple recommends both: http://developer.apple.com/...
... as some browsers (Gecko-based, for example) apparently look for "icon" and some others for "shortcut icon".
You can even use a PNG rather than an x-icon, as here: http://www.mozilla.org/prod...
But you probably know all this.
Don't like it that much, actually. I prefer your old style :)
The footer, shouldn't that be an unordered list? Since you're only supporting Gecko you can add the [ and | and ] with great ease.
After I refreshed the cache and got the new stylesheet I am now admiring the beautiful new design. Congratulations! The header and the logo are really nice - simple, powerful design.
The only thing I do not like is the colour in the sidebar. You'd do much better to use the light orange from the header there. The yellow is too different, IMHO. Using a colour you use elsewhere will unify the design.
The footer, shouldn't that be an unordered list?
I don't think so. Don't make a list out of something that isn't. Is there any relationship between the links in the footer? I think not.
You'd do much better to use the light orange from the header there. The yellow is too different, IMHO
I disagree ;)
The yellow makes it just a little brighter. If you use the same orange there, I think there's too little color on the site. Just my opinion of course ;)
Hmm, ik... eh... I can't see the orange header in Safari. The new menu works like a dream and is faster in Safari than in firebird. Typography is greatly improved over the last version and the site is now much more usable. H3 headings do look a bit odd in Safari though. "ADD COMMENTSdd Comments", this looks like a bug in Safari. Is anybody else getting this bug, or is it just me?
On the whole I think you have a good job. Well done.
Nice work Anne. I like it. Nice, clean, stylish and very readable. I too am getting the strange h3 bug in Safari and the orange header doesn't show up.
Anyhow - Very nice job.
I think Safari doesn't support styling the root element, but it understands the child-selector. This could be very annoying for other X-Phile sites, but I think I can remove the 'child-selector hack' on my site and have it work fine in every browser.
I don't know why the h3 elements get so weird. I don't have a copy of Safari, but maybe they have a place to file bugs?
The footer will not be an unordered list and the sidebar color isn't going to change either, 'cause that looks ugly (we tried a lot :)). In short, read comment 10 ;).
We are working on a favicon, thanks for all the recourses and explanation. The favicon will be the same as logo.png, but smaller of course and we will not make it a PNG for browser-compatibility (I know I'm irrelevant).
Anne, if you would put an id="www-annevankesteren-nl" on your body tag, I could put the colour of my preference in my user stylesheet :-)
Ben is cursing the designer's curse ;-)
Big improvement, Anne! The esthetics of your design are now more up to the esthetics of your code.
I enjoy reading your weblog very much, and there are certainly some things to learn in here, content- and codewise!
But, being a graphical designer, I can't really help noticing the big chunky logo and post-headers. Maybe the overall design would benefit from a more subtle aproach?
The other thing is that the submit-thingy seems to be placed dead-centre in the page, making it fall off the content-pane. That's in Mozilla 1.5...
I want to sympathize with your troubles getting MT up. I left the sucker alone a few weeks ago, but I stil feel the burning sensation of defeat. grmblll... Hope you will make your way into the light, though! :-)
Nice design! Better than the old one ;)
In IE5 its not perfect. IE5 got scrollbars by the right picture and some letters are too much on the left site.
On the comment form is being worked (working at a 17inch flatpanel screen doesn't have al the advantages you would want).
Everyone who was complaining: Go redesign, I added that damn attribute. I also found the only reason for not using XHTML1.1: it doesn't allow the attribute on the root element! :)
Wouter,
I agree with Jacques Distler.
Very nice redesign Anne.
I myself can always appreciate a minimal design (as is my own site) and I just wished more developers cared about the kilobytes. :)
I don't know why the
h3elements get so weird. I don't have a copy of Safari, but maybe they have a place to file bugs?
Safari seems not to support smallcaps - I've noticed this before. For example, I have a page showing the epitaph on an old tombstone, and Safari just displays the smallcaps as lowercase:
http://www.btinternet.com/~...
I see from your stylesheet you've got h1,h2,h3 set to smallcaps. Your h2 headers - EG, September - come out lowercase. With the h3 headings the browser does a mixture of upper and lowercase, giving first uppercase, then lowercase (except for the initial letter). I've never seen that before.
Your Web site can't be CSS 3.0 Valid... CSS 3.0 is not yet a recommendation.
I know, but I don't care. It's valid with the current draft and it will be valid with the drafts that become a recommendation.