Main Points

Once we have a concept and a full-fledged layout, it's time to start ramping up the CSS. For designers trained mainly in graphic and print design, this is where you would flesh out a layout in Illustrator or Photoshop. Once finished, this print design would be sliced and unceremoniously shoved into CSS, no matter how unworkable. Modern practice begins building the design concept in HTML & CSS since it is a web design and not in fact a print design at all. This is called HTML prototyping, and you're looking at our first prototype right now.

First Things First

Before I could get started on the CSS, I needed to do "complete" the HTML prototype - OK, technically an ASP.NET prototype since we're building this into our master page architecture. The current master pages loads in the set of style sheets automatically. This undermines a lot of what I want to do in this design section. Most importantly, I want to be able to completely restyle everything, meaning I needed a new nested master. I also want the tests to be as close to "real world" as possible, so I didn't want to make any changes to the content page if possible. With one exception, I managed to accomplish this. The entire point of switching master pages was to apply completely different CSS stylesheets, so I modified the content page to include this. (in the same content element as the meta tags) I had to basically redo the master pages completely to manage this. While doing this HTML prototyping, I merged the nested master pages with the primary master page to create one file strictly for this demo. It shares no code with the larger site, and uses no nested masters, just one primary. This seemed like a more efficient idea for the dozen or so prototypes I expect to create for this demo. I can break the final one out into the changes for the primary master, and the new nested master for Earth Chronicle.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="all" title="eciefixes" href="CSS/DemoMedievalScroll02IeFixes.css" />
 <![endif]-->

I also for the first time inserted an IE specific stylesheet for IE6. The above syntax is the Microsoft approved way to incorporate IE specific styles. It is fairly straightforward. The phrase "lte IE 6" performs the magic; it indicates that browsers "less than or equal to IE 6" should include the XHTML inside the conditional comment. "lt IE 6" would indicate browsers less than IE 6 should be affected, and "IE 6" alone would indicate that it should affect only IE 6. I hope not to use it in the end, but it is a widely used method of last resort in the web standards community. With IE7 & 8 now taking over the IE market, I can build a main stylesheet that supports CSS 2.1 for modern browsers and then deal with odd bits that IE6 just can't handle. So the CSS in my primary stylesheet will now be much more standards friendly, improving the power and robustness of the site. This will also make it easier to ignore IE6 when it falls off the face of the Earth; we simply delete this reference and eliminate that CSS file.

Skip to Main Points

Structure Stylesheet

This is the guts of the new Medieval scroll template. A lot of it is replicating things I did in the Earth Chronicle stylesheets but those have been cobbled together over the years. This gives me a chance to start fresh, refactor from scratch and find cleaner ways to work things out using full CSS2.1. Doing so allowed me to accomplish some things I had trouble with before including the <code> tags for marking up computer code more semantically. I'm not even sure why it works now... or more likely why it didn't work before! Apparently stuff lying around in the main style sheets prevented it from working, and since these stylesheets are streamlined and refactored, it's no longer an issue. Woo Hoo!

/* /////////////////////////////////////////// */
/* /////////////////////////////////////////// */
/* ///
/* /// Medieval Scroll 02 Initial Layout CSS
/* /// Structure
/* ///
/* /////////////////////////////////////////// */
/* /////////////////////////////////////////// */

/*
This file adds the CSS driven structure and positioning of the page.
*/

/* CSS Shorthand */
/*
2 numbers - Top&Bottom Left&Right;
3 numbers - Top Left&Right Bottom;
4 numbers - Top Right Bottom Left;
*/

The header for my file is loaded with comments, first describing the file, then including a cheat sheet for CSS shorthand. When I'm working on a design it becomes second nature, but during maintenance this is handy to have around.

/* ////////////////////////////////// */
/*
/* General Structure
/*
/* ////////////////////////////////// */



/* Basics */

* {
margin: 0;
padding: 0;
}

body {
margin: 2em 1em 0 2em;
}

p, ul, ol { /* Page Width */
width: 85%;
max-width: 1150px;
}

p {
margin: 0.5em 0;
padding: 0.1em;
text-indent: 2.5em;
}

Next I have a nice fat comment block indicating a major section. It's also the most general section so that major and important style rules are near the top with more specific items coming lower down. The first item is three lines of whitespace followed by the "/* Basics */" heading to indicate the topic of these particular styles rules. Organization and whitespace are critical to being able to understand a stylesheet quickly. If you are building a website on your own for fun, this may not be important, but if you're managing and maintaining multiple websites it is critical.

The first and most important style rule in any sheet is the * rule. The number one browser compatibility issue that destroys designs is the different default margins and paddings that each browser applies to every element. This style rule annihilates all margins and paddings so that only the ones you specifically apply take effect in any browser. I apply some margin and / or padding to the main XHTML elements: body and p.

I also define the width of the webpage with a combination of width and max-width properties. Width keeps the content from moving all the way across the browser window, ie it adds whitespace along the right. This prevents text from running across excessively long lines for users with high-resolution monitors, though IE6 doesn't respect max-width. Note that I've applied this width only to content elements - paragraphs and lists - so that I can use the full width of the page for elements that relate to the interface. This is also the first instance in the stylesheet of what I call "Object Oriented CSS". I've grouped all these elements together for this style rule, because they are part of a larger concept (referred to as an object in programming). p, ol, and ul elements are all content items. So even though there is a style rule for p tags right next to it, that is not where I specify the width and max-width for paragraphs. That style rule contains properties that affect paragraphs, while page content (p, ol, and ul elements) have their width defined in a separate style rule. This is Critical for maintainable / reusable style sheets. By grouping the style rules for particular concepts / objects together, I can redefine the page width at a stroke without having to hunt down multiple style rules which are probably spread throughout several style sheets.

I will try not to go into excessive detail. Most elements of the stylesheet are fairly obvious if you crack them open and take a look at them, which I encourage you to do. I've read books and studied websites on CSS, and while that was important groundwork, looking at other people's designs and stylesheets and building your own is really how you learn to use CSS. There's lots of margin and padding style rules to create reasonable whitespace; without them the page would not be readable and it also visually groups semantically related elements. Lots of positioning using text-align and clear properties and even a few displays to change the way that certain elements behave; for example, the recommended page links are each block-level list items. However, I've changed their appearance using a display: inline; declaration to give them the look that I want. Now let's take a look at the forward and back links.

/* Navigation: Forward and Back */

.pageBack {
float: left;
}

.pageForward {
float: right;
}

.jumpBack {
clear:both;
float: left;
}

Given the kind of squirrely way that they behave in the current stylesheets, I was shocked that this was all I needed to do to make the forward and back links work. The problem is IE 6. I've included some additional comments to go into the IE specific stylesheet if I'm not able to work this out as we go. I'm not going to panic at this point though. I believe it was trying to fix IE 6 in the main stylesheet that caused these elements to act strangely. Creating standards compliant code exclusively is saving me significant headaches. This was the step that convinced me to apply a separate stylesheet for IE 6 in the first place, if needed.

/* Page Info Section */

#authorship, #postingDates {
width: 45%;
}

#authorship {
float: left;
}

#postingDates {
margin-top: -1.1em; /* Postion postingDates alongside authorship vertically */
float: right;
}

#pageInfo .spacer { /* Postion postingDates alongside authorship horizontally */
clear:none;
}

This was another shocker for me. I've had trouble off and on struggling with ways to make the authorship and postingDates sections behave. While there are still some things I'm working on, it was just this easy to get the postingDates to align to the right of authorship section with proper vertical and horizontal positioning. I'd set a new clear:both; on the spacers so I had clear it to allow it to fall in line to the right of the authorship. Apparently something in the old stylesheets was creating difficulties, because adjusting the top-margin up was all it took to align it vertically so the tops are even. In the old version, I tried numerous options and hours of alternatives, but couldn't stop the postingDates from displaying one or two pixel lower than the authorship section.

/* Computer Code */

code.computerCode, .computerCode code { /* Create block structure for code blocks */
display:block;
}

.computerCode {
margin: 0.5em 3em;
}

.codeNewIndent {
text-indent: -2em;
margin-left: 3em;
}

.codeNewBlock {
margin-top: 1em;
}

I already mentioned this surprise. Previously, I'd spent about an hour fruitlessly working in the current Beta website stylesheets to get the codeNewBlock class to work with the inline element <code>. Here everything worked beautifully out of the gate. I reset the <code> element to appear with block-level characteristics when used with the computerCode class; this way it behaves normally unless computerCode is specifically invoked. The codeNewBlock works, and I even redid the codeNewIndent class so that the first line is indented by 1em while the others are indented by 3 to make it easier to discern when lines wrap in the code samples.

This worked on some of these short pieces but was not robust enough. I had to wrap every line in it's own div to make this work, which is semantically ridiculous. So I reset .codeNewIndent {margin-left: 1em;} and it no longer distinguishes wrapped lines but at least displays consistent behavior. Hopefully, I will figure out a way to style this so that line wraps distinguish better.

[chroniclemaster1, 2009/06/18]

#contactForm fieldset {
padding-left: 1em;
}

#contactForm input, #contactForm textarea {
margin: 0.1em 0.5em;
padding: 0.2em;
}

#contactForm ol {
list-style-type: none;
}

As you can see I've applied only the most basic of form styling. I won't lie, I played a little, but having spent six webpages trying to work out the contact form the first time, I was prepared for the nightmare that is CSS-based form styling. Accessible form design is not a risk issue, it's just a pain in the @$$. This will probably wind up being a page unto itself at some point, and to be quite honest, I'm postponing the pain for now. I'm also postponing the navbar for now because that will have a lot of CSS on it. It's highly mission critical so I want to explain it in detail, and this page is already heavy enough.

Skip to Main Points

Minimal Styling

I hadn"t really expected to implement a second stylesheet at this point. My structure stylesheet is what I"m trying to put together for creating the layout in CSS. However, there were some items that couldn"t be avoided.

body {
word-spacing: 0.1em;
line-height: 1.618;
}

.heavyEmphasis {
text-transform: uppercase;
}

code {
font: bold 100% "Courier New", Courier, monospace;
}

.betaHeading, .standOut, .ins, .warning {
color: #FF0000;
}

The important item here is the style rule I"m applying to the body. I hate, hate, hate, hate, hate, hate many gorgeous designs because I cannot read a damn thing that is written on them. The number one purpose of good design is to complement the content; a design which distracts from or completely overwhelms the copy can be beautiful, but it Cannot be professional. In ancient Egypt, copies of the Book of the Dead were entombed with the mummies because the pictures drawn on them were thought to have magical properties. While large quantities of frequently sloppy text were included with these scrolls over time it dwindled until only snippets of text were included written around huge drawings; the text frequently cuts off in the middle of a sentence or even a word because there was no more room to squeeze it on the page. While a history website like ours applauds anyone reaching back 5,000 years for your design inspiration, I submit that they have taken away the wrong lesson. It is next to impossible to communicate and / or sell anything once you commit any of these common design errors.

  • Designing a layout to hold a small amount of content in a particular location. A webpage is made to hold content; if you paste War and Peace into a webpage, you should wind up with a ridiculously long webpage. It should not break your design.
  • Using 10 point font or less. Italics is based on a business handwriting from the Renaissance. It became a European standard handwriting taught to all accountants and bankers. For hundreds of years everyone learned italic handwriting, why? Because it was so beautifully readable. People make fun of fine print for a reason - choose to be a designer, not a lawyer; use a pleasantly readable font size.
  • Keeping the CSS text defaults which creates squished text blocks that are visually hard to read. Modify your settings to ensure reasonable whitespace for easy reading - enter my first style rule. ;)

Therefore, even though it should strictly be part of the typography phase, I needed to know the "real" size of my text blocks and the real look of my webpage. So I added my traditional body styling rules. I pushed my words a little further apart with a word-spacing value of 0.1em, and applied more space between lines of text with a line-height value of 1.618. The golden ratio, Φ (phi), is thought to be exceptionally harmonious so you"ll see it pop up now and again in my stylesheet. It is an infinite non-repeating decimal, 1.6180339... etc. I feel 1.618 is a good CSS approximation, and the equivalent percentages 61.73% and 38.26% also show up in my design. This provides more whitespace and makes the text significantly more readable. I"m also applying some other styling from the current Beta site main styles so that I can use the tags and classes in these writeups.

Skip to Main Points
← Back to 1. Design Concept: Medieval Scroll
Continue to 3. Fluid CSS Page Border →
← ← Jump back to Design Demo: Medieval Scroll Index