Some slight design tweaks

by
This entry was published at least two years ago (originally posted on December 17, 2003). Since that time the information may have become outdated or my beliefs may have changed (in general, assume a more open and liberal current viewpoint). A fuller disclaimer is available.

I’ve done a little light fiddling with the design here in order to clean up some details that had been bugging me.

I started by adding a light grey background to blockquote elements in order to make them a bit more distinct from my babbling. That ended up making the page feel a bit heavier than I wanted, though, as the lightest grey I could use was the same grey that made up the background color in the lower section of each post’s title bar.

After fiddling with a few different approaches, I finally decided to use a slight gradient rather than a solid grey for the title bar, starting darker on the right and fading to white towards the left. The blockquote elements still felt a bit much, though, so I ended up creating a second, lighter gradient to use for their background as well. I’m not entirely sure I’m satisfied with the end result — while I like each effect individually, I’m not as sure about how they interact with each other on the page. Still, it’ll do for now.

Left and right floating elements (such as pictures and Amazon item links) have been nudged a few pixels outward in order to better align them with the outside borders of the post title bars.

Lastly, I removed the grey background behind the post titles and replaced that with a drop shadow effect behind the title text. The one downside to this approach is that it’s currently only visible in Safari (I believe), as Safari’s currently the only browser (that I know of) that supports that particular CSS attribute. The rest of you just need to upgrade. ;)

10 thoughts on “Some slight design tweaks”

  1. i like the gradient shadow behind the blockquotes, and behind the subheadings as well (posted on, comment, trackback etc). adds a nice bit of shiny-ness that’s not obtrusive or overly flashy.

    i can’t see the drop shadow, but it looks fine to me without it. as for upgrading… i think I can skip a $3000+ upgrade (that’s what those shiny G5s go for now, right?) for a drop shadow effect. :P ;)

  2. ps maybe because of the drop shadow, your dotted underline has disappeared from beneath your title, and restarts at the end of your title – but only on the front page, not on the individual archive page. that’s all. :)

  4. I really like the blockqoute fade and the time/date bar. Overall it looks great. I use IE so I can’t see the title shadow. Even without it, it still looks great.

  6. Great redesign! Even if it is only a few items, it definitely makes a difference. In a good way. It helps the blockquotes stand out a bit more. Very readable and visually appealling.
    Love the site. Always have.
    Keep up the great writing!

  8. Hola! I like how your site runs – smooth handling, easy to use. I have a rather “out of the box” thing going on at my MT powered site at the moment…I’m wondering do you, or any of your readers, know of easy (fun is a ploue) how-to sites specifically for tweaking MT blog layouts and MT tags? Suggestions appreciated…

    m a i l [at] m a h a l i e [dot] c o m

Comments are closed.