New site redesign notes

From Amit’s Thoughts

In my last post, I described the new implementation of my web pages and hinted that there was a new design as well. You can compare the old design to the new design to see:

• There's a lot less color. This is probably the biggest change. I like bold colors, but it was too much; it overwhelmed the page and made the headers (which also used the same color) harder to pick out. Section headers are now black (with just a small square of color); the page border is now subdued.
• The text is more tightly packed. (I changed the leading from 1.5 to 1.25.) I have mixed feelings about this; I may change it back.
• Text matches the line spacing of the main text as much as possible. I'm a little skeptical of this rule, as it seems to result from limitations in printing presses, but a friend of mine who really knows his typography recommends it.
• There's a print-friendly version of the style using @media screen style rules to enclose sections designed for regular screens and @media print style rules to enclose sections designed for printing. The navigation bar, sans-serif body font, shadows, and colored backgrounds are removed for printing. I didn't write any rules for other media types.
• There's more whitespace on the left, except to the left of headings.^* This makes headings a little easier to pick out.
• The page contents have a soft shadow around them; preformatted text has a soft shadow inside.^*

The items with a ^* are enabled by the implementation; they were not something I could easily do with CSS alone. Each section is now a container with both a title and contents:

<x:section title="Header">
  <p>
    Paragraph 1.
  </p>
  <p>
    Paragraph 2.
  </p>
</x:section>

In HTML, the sections are implicit—they are whatever occurs between headers. In the my XML content, the sections are explicit. That way I can apply a style to the section, such as adding a margin to the left. This is something I've long wanted through various redesigns. Sometimes I want a border; sometimes I want a horizontal line separating sections; sometimes I want them to be a different color. Now that I have each section marked, I can choose a combination of HTML tags and CSS rules to achieve the effect I want.

I treated the document in the same way as the sections. In HTML, the header and footer are inside the document body. This means any style rules that apply to the body contents (such as margins) also apply to the header and footer. I often want the header and footer to span the entire width of the document, so this makes the HTML messier. With XSLT, I can create a new document body (with <div>) and move the header and footer outside of it. To get the shadow effect, I use three divs, each with a different border color. Preformatted text gets surrounded by three divs as well. XSLT lets me inject new elements that are used purely for formatting.

I tried using serifs for the body font but it was too much of a change for me, and it doesn't work as well on lower dpi screens. There are still a few things to clean up, including the rendering in Internet Explorer, but overall I'm pretty happy with the style.

Labels: project