New look for boyet.com

published: Mon, 24-Jul-2006   |   updated: Sat, 6-Aug-2016

UPDATE: Of course, things have changed again. The theme you are seeing now is different than that described here in this post.

After a few late nights last week, together with a push this weekend, I've completed the redesign of my website to commemorate completing the third year of my blogging (I started July 1, 2003). What you're seeing took a lot of playing around with TopStyle, a lot of googling for hacks to make IE6 behave, and a lot of browsing The Zen of CSS Design.

My overriding issue was to make the website look good in both Firefox and IE6 since the vast majority of my visitors use one of those two browsers.

At first I tried not to change the individual articles' HTML. I just wanted to change the CSS file and have everything just work, but prettier. Unfortunately, the Julian of three years ago didn't understand the implications of design that could change with its CSS file. I should have broken up the HTML more into div sections and built a better block hierarchy. In the end, I had to bite the bullet and change the template through which the text I write gets transformed into the web page you see.

I was also determined to use more images this time, more creatively. The image uses as the page header is a view of the cliffs at Etretat (les falaises d'Aval) in the late evening, including the famous arch, la Porte d'Aval. (The inset picture is of the same cliffs, Etretat: The End of the Day, painted by Cluade Monet.) The cliffs are lit up by spotlights, some colored, but even so I had to use a pretty long exposure. I wanted the picture for the header because it's horizontal and it naturally fades to black to the right, leading to a black background for the pages.

Next up, I took the color of the rock on the right (it's known as L'Aiguille, the needle) and created a blend of four colors around it using the ColorBlender site. This blend split up into two pairs of colors, a yellow and brown pair and a blue and cyan pair, and from these I created two gradient images to use at the top of the colored text blocks.

The yellow blocks I thought would be too much for the main column of text, so I made the right hand column the yellow one and the main column the blue one.

A fun little side project I did yesterday was to design the block quote look to have large open and close quotation marks. Here's an example:

[Claude Monet] arrived [in Etretat] in January 1883, after having spent the previous few months in nearby Poissy and Varengeville, and was immediately impressed by the spectacular coastal landscape. "I am truly very happy to have come here," he wrote to Alice Hoschedé from Etretat on January 31, 1883, "it's really pleasant and I believe that I am going to do some good things...I have my motifs right outside the hotel."

This use of images brought up a well-known IE6 quirk: it doesn't do PNG transparency and I originally had the quotation mark images with a transparent background. (I've now forced the background to yellow, but it means I'll have to change it the next time I tweak the color of the background for blockquotes.)

Talking of IE6 quirks, these are the ones I ran into. The blockquote with the nifty graphics threw up one: IE6 doesn't understand the min-height keyword. The reason I needed min-height here was that, for very small quotations, the images were getting cut off top and bottom. The block had to be a minimum height so that to cut-off didn't occur. That one took a few gyrations because IE6 treats the height keyword as min-height, and yet I couldn't just use height because Firefox would have done the right thing with it. So I used one of the standard IE6 hacks to get it into a CSS block that only IE6 would obey (I used the * html body hack).

The next was the margin-doubling effect when you use the float keyword on a block. This one was easy to solve: you add display:inline; to the block, despite the CSS standard stating that the only display attribute you can use with a float is none.

Another one was annoying because I had some buggy CSS and IE6 was displaying it correctly (or so I thought) but Firefox wasn't, so it looked like a bug in Firefox. I did some googling, but naturally I didn't have any hits. It turned out that I had misunderstood the CSS box model and Firefox was getting it right and the developer who'd written that part of IE6 made the same mistake I had. (Essentially I had a block with decorated with both width and padding statements and I'd assumed the width included the padding. No, it doesn't.)

Anyway, all in all, I'm rather pleased with how it's turned out. There are a few tweaks to do, which I'll complete over the next few days, but overall it's pretty and readable.

From the Sheer Coincidence Department

(Added: Mon 31-Jul-2006)

It seems that exactly the same day I updated the look of boyet.com that Newsgator Online uploaded a new parser for RSS feeds, one which had a bug that slightly messed up my RSS feed (the Email me link at the bottom of every RSS item was removed when it shouldn't have been). The problem shows up in FeedDemon if you have a synced subscription like I do, and that's where I saw the problem first.

Of course, I was convinced that I'd broken my RSS feed generation with all the messing around that I'd had to do to update the look of the site. Well, it's standard policy: bugs are always your fault, at least initially. So, I spent some time trying to work out where the problem was. Trouble was my RSS feed validated. The HTML in each published RSS item validated. In the end, I was forced to accept that Newsgator was at fault, and this was confirmed this morning: there's a bug that was introduced just before the weekend I updated everything. Phew!

So hang in there if you use Newsgator Online, or you sync your subscriptions through it. The half sentence at the bottom of my feeds should be fixed any day now.