Do what I say, not what I did. Trust me.
Our story begins with a simple yet classic two-column layout for a client: the markup included a
#sidebar div and
#content div. The CSS floated the
#sidebar to the right, and set a width of about 10em. The
#content began its life with a margin-right also set at 10em.
For various reasons (another sad tale involving a disappearing background image), I tried changing margin-right to padding-right. Pay attention now: the page looked the same. And looked correct in both of my test browsers (Firefox + IE).
The problem: the navigation links stopped working in Firefox. Click all day if you wish; they were inert. Dead.
The insult: the links worked fine in IE. Aargh!!
It was as if I had inserted a plate glass window in front of my nav links. I could see them, but couldn’t reach them. Like that Rolex in the store window, just out of reach. Which is exactly what I had done: by changing the
#content div from margin to padding, the
#content div was now invisibly overlapping the links.
IE was just letting me get away with sloppy code, but Firefox was holding me accountable to actually get it correct.
When someone says “You really need to understand the box model to use CSS without hurting yourself,” they’re right.
…it doesn’t validate. It doesn’t even come close. Ugh.
Please consider: that I am focusing on building other people’s sites, including PhotosByKat and Ellen Carroll Designs. They aren’t finished, but at least they validate. And the markup can be called semantic. If you’re generous.
If that doesn’t mollify the shrill, critical voice inside your head, be assured that I’m conducting a Web Standards Reboot. Which simply conjures up a specific deadline of November 1 for a new design that complies with Web Standards. Arbitrary accountability — gotta love it.
Otherwise, just be content with admiring that fetching new badge down there on the right.
I freely admit it: I’m relatively new to web standards. And I’m mostly self-taught. So I’m often surprised to learn that there’s a whole lot to learn about something, especially when I never realized there was anything to it.
Typography is a perfect example. I read and write for a living, so I’m as particular as anyone I know about subjecting myself to awful type. For instance:
- Changing anything out of a monospace font (except code quotes)
- Pasting long articles into a two-column word processor document for printing (avoiding line lengths that are way too long, and saving paper, too)
- Manually inserting line breaks into long e-mails for readability, etc.
Anyway, I read Mark Boulton’s in-depth article series, Five Steps to Understanding Typography. Great stuff. If you don’t already know your ligatures and your measures, your leading and kerning, go read it. Now. And thank Mr. Boulton for the free education.
It made me wonder if there are any good articles on suggested methodology for crafting website typography. Not so much “which fonts should I use?,” but rather “how should I go about selecting fonts and type styles for body text, for h1 and h2, for pull quotes, etc.?” Or for example, “I want a retro, ‘faded jeans’ kind of feel, so how do I make type choices?”
The Boulton articles do provide intel about the measure, leading, kerning, font size, font weight, etc. But I seem to be stuck with bad typography.
My current method is to:
- Read as much as I can find
- Conclude that body text is limited to a few more or less universal core fonts
- Select Geneva and Verdana with a few alternates
- Hope for the best.
If I’m feeling energetic, a parallel path may often include:
- Find an awesome font
- Learn that it costs over $100, and
- Give up.
My impression of a better method would be something like this:
- This will be a (insert adjective here, such as “groovy” or “corporate” or “elegant”) kind of a site, with (insert made-up adjective here, such as “newspaper-ish” or “disarming-charming” or “rustic-esque”) kind of a feel, so I want “?” kinds of fonts, with “?” kinds of styles and colors
- … and that’s where my imagination falters.
The more I learn about web standards, the more I conclude that an indicator of real skill is how few IDs and classes you need in your markup.
If you can style the whole page, while adding only a few divs (header, footer, nav, content-main and maybe content-sub), now you’ve learned something.
For example, I took a look at a friend’s portfolio site recently: Life Light.
My first thought was “Okay, it’s a decent looking site.”
My next thought was “He did all that with such minimal markup? Whoa.”