Main Points

OK, I've fought through all the hard parts, right? Now I can get down to the painting and Photoshop fun, right? If there's any page that's teaching me a new level of respect for designers, this is the one. I had to rewrite portions of the HTML to get this to work, and every time I thought I was making progress, I'd find a new way in which the image borders would break, or a feature I hadn't really finished the layout for, or something else. Getting down to painting and making everything look good requires an extra level of concentration that starts to show you things you didn't finish during the earlier portions of the layout. I'm sending special thanks to Trascending CSS by Andy Clarke. A fantastic book for mastering best practices in semantic coding (which I was familiar with) and applying high-level CSS2.1 (which I was not). Clarke marks everything up as a list, which is something the POSH movement had already accustomed me to. But my skills in using CSS to achieve new effects got a significant makeover... even if I don't have an example of his favorite structure, highlighting images and text from the same list item in different portions of the page. That's definitely a trick I will use someplace, it just didn't work into this design.

This was also the page where I really debugged the cross-browser, cross-platform, cross-monitor behavior. Not behavior in the sense of Javascripting, but just as Javascript causes elements to change dynamically, grab the bottom right corner of your browser and watch everything dance in concert as you resize the viewport. Depending on the resolution and color depth of the monitor, the platform and the browser, your design will come out looking remarkably different. I've been able to work out all the issues with poor behavior and even stripped a lot out of the IE specific stylesheet as the CSS evolved. That's why browser sniffing can be so insidious, because you can become lazy and accept bad code. I was hoping that a lot of the IE specific stuff would be replaced as development continued and that proved to be exactly what happened; this is the page that did it. There were significant portions continuing to work at fixes for IE6 that helped pin point weaknesses in the CSS stylesheets. The result is that mostly I'm only feeding IE6 special rules to make up for very specific and relatively minor failings.

I will take a look at the behind the scenes changes later, for now, I'll stay focused on the original purpose of this page, applying the color palette to this design.

The "Styles" Stylesheet

After reading Clarke's book, I decided to break the typography out into its own stylesheet, which lightened things up, though there are some basic bits still here.

/* ////////////////////////////////// */
/*
/* General Page Styles
/*
/* ////////////////////////////////// */

html {
background-color: #FFF0CD;
color: #260003;
}

a:hover {
background-color: #FFDFAC;
}

As always, each section in the stylesheet has it's own heading, though this is the only one I'll include here. There's also a section for form styles, navigation styles, etc. Here I'm specifying my Bright Ivory, #FFF0CD, as the main background color for the entire page and my Deep Brown shade, #260003, as the text color. To make them stand out more, I've also incorporated the Ayer Beige color, #FFDFAC, as a subtle highlight to help make links easier to click, when someone mouses over any link, not just the menus. The solution has proven so robust even in IE6 that it's now easy to tell when you can click the link successfully or not.

/* Navbar */

.navButton, .navMenu, #mainPoints {
border: 0.1em solid #700008;
background: #FFDFAC;
}

.navMenu li {
border: 0.05em solid #700008;
}

#siteWideNavbar a:hover, #specificNavbar a:hover {
background-color: #FFF0CD;
}

/* :hover eliminates top border; thicken */
.subjectMenu li {
border-top: 0.1em solid #700008;
}

I'm applying a lot of rich chocolate brown borders for the navigation. There's a thin chocolate border around the navButtons, the navMenus, and the heading, mainPoints. I also apply the Ayer Beige background to make these elements stand out a little. This is one technique I'm trying to look at; it may not be object oriented exactly, but if I'm applying the same CSS to the same selectors, why have different style rules. This can make for selector soup, but the stylesheet is much more highly optimized by including the #mainPoints here even though it's not part of the navbar. Obviously, I'm still working out how to handle these in live CSS. To divide the menu items, .navMenu li, I apply an extra thin border to each one. I like this border as a subtle division, but there is a problem in the Chronicle Subjects menu. The borders can vanish when a hover background-color is applied. Thickening this border a smidge for them took care of the problem. I also specified a hover color, Bright Ivory, for the navbar links. In the current template I was going with a dark hover color that caused problems; the declared text color became unreadable or I had to change it which threw off my carefully assigned text colors. So here I went with a lighter hover color; it doesn't provide as much contrast, but it's fairly clear and requires no modifications to the text color.

/* Main Points */

#mainPointsBoxout ul {
border-left: 0.1em solid #700008;
margin-left: 0.5em;
padding-left: 0.5em;
}

In contrast to boxing everything in my current Beta layout, I tried to put a little more sophistication into separating sections. Here, I'm using a single, relatively thin left border to separate the Main Points from the content. You can see in the Main Points how I'm trying to feel my way through object oriented CSS. To some extent, I want the different style sheets to compartmentalize the relevant portions of CSS. borders and backgrounds here, color in the typography sheet, margins, padding, and positioning in the structure sheet. However, there are two other factors I'm trying to deal with. One, website optimization demands that you have as few objects as possible. Most current browsers are overly cautious about overtaxing the server and wait patiently when requesting items which increases download time. Therefore, the fewer objects you have (images, script files, stylesheets, etc.), the faster your page downloads. For production, website optimization encourages you to condense all your stylesheets down to one. For design, I think multiple stylesheets are much easier to deal and also for maintainability. Clarke recommends multiple stylesheets during design, and Beaird breaks up his creative process into the identical stylesheets that Clarke recommends. So for now the stylesheets will remain separate. For the production site, we'll see. I think each stylesheet should be pasted into the main master stylesheet by replacing each @import with the respective file. That will allow me to maintain multiple stylesheets for development but have one stylesheet for production, a good compromise.

I've already discussed the need for reusability, to have CSS components that perform a unified function; these can be easily copied and pasted into stylesheets to copy appearance into a completely different website. This is not the best example, but the margins and padding between the main points and the content were fine... until I added the left border. Since it was the border in the "Styles" stylesheet that requires the extra whitespace, I've attached the margin and padding to it, even though strictly I've kept margin and padding in the structure document. I get the feeling, if I went looking to change the whitespace, I'd head for the "Structure" stylesheet, so that's most likely where this will wind up. However, there will undoubtedly be similar but more appropriate cases where I'll have different kinds of declarations together in one style rule to maximize reusability.

/* Page Info */

.creditTitle, .postingType {
border-bottom: 1px solid #700008;
}

.editor, .researchers, .firstPosted, .lastMajorRevision {
background-color: #FFDFAC;
}

/* Highlight credits and posting info; too intrusive */
/* .credit:hover, .posting:hover {
background-color: #700008;
color: #FFF0CD;
} */

The Page Info section is one that I reworked pretty substantially. Instead of referring to it as authorship, I think "credits" is a better semantic name for it, so I've changed a number of classes along these lines. I'm applying a thin bottom border which masquerades as underlining but with a behavior that is closer to what I want cross-browser and cross-platform. I mention the authors, editors, first posting date, etc. and this style rule underlines them to assist with visually distinguishing them from the people's names and dates. This is much more subtle than the full borders I had placed around all these elements. I also applied a new set of classes that uniquely identify set of divs. The editor class, researchers class, etc. are some of the new classes I applied and this allows me to apply the Ayer Beige to achieve a striped background for this section. As you can see I also played with applying a hover-based style rule to these rows, however, I don't like any of the effects I've achieved with it. It's staying in the stylesheet as food for thought, but I've commented it out.

/* Other Structures */

#clockBox, #subjects {
background-color: #FFDFAC;
border-width: 0.15em;
border-style: solid;
border-color: #700008 #FFFFFF #FFFFFF #700008;
}

#subjects a:hover {
background-color: #FFF0CD;
}

These are the last styles for the main layout currently in this stylesheet. I'm styling the clockBox and subjects divs are both being styled with the same style rule. This represents good optimized code where the structures are even semantically listed together (even if it's only under "Other Structures"). I've reset the background to Ayer Beige so it stands out, and then applied a border. Typically I prefer to condense the border values under the general border property. However, I'm trying to achieve the 3D inset effect, so that doesn't work. I can either specify the borders like normal for top, bottom, left, and right, or I can do it like this. Since this requires less code, I specified the width and style for all borders and then set the border colors in this order to accomplish the 3D effect. Finally, the links in the subjects section take the general hover style rule for all links which applies the Ayer Beige hover color when someone mouses over the link. Since the subjects section already has an Ayer Beige background this doesn't even show up. Oops. So I redefine these links to change to Bright Ivory on hover (just like the hover color for the navbar links)

Skip to Main Points

Applying Real Border Images

To get a view of what the design will really look like, I've taken some wood grain and used it as a background for the scroll to lay against. I also cobbled together the paper edges and corners for the complete page border. I wanted placeholder background images so I could start seeing what the design is really going to look like. The "illustrated" nature of the paper scroll really stands out against the realistic wood grain and will be one of the things I try to address, probably when I look at applying texture to the page. I'd like the paper texture and the wood grain juxtaposed in the page border to look more unified, if possible. I'd originally thought to start with images of real paper, but it photographs very badly. So far all the pictures I've taken have come out too blurry to use.

I've also found the placeholders valuable for starting to get the feel for how to actually implement it. I haven't bothered to get all the seams to work since it will be a very delicate task, and any changes between now and the end of the design process could force me to do it all over again. So I'm waiting to do that last. However, I'm very pleased with the way that the wood grain vanishes pretty well at the where the background images tile or meet. Only the lighting variation from light to dark can really give it away, so that will be something I have to work on. I'd also planned to use long sections for the sides to prevent repeats, however, the pattern of the grain is so beautifully random that I think I could use much shorter images than I am now. Shorter top / bottom / side images will help me control the lighting much better. The seams in repeated images appear to be pretty easy to manage, but getting the sides to mesh nicely with the corners requires some pretty careful work. Tiled background images only meet at the seams, the corners meet the edges of the image border, anywhere.

Skip to Main Points