On being on the Business Blogs list on Boston.com

For about the past week, my blog has been linked from the Business page of Boston.com. Which is odd, because this isn’t really a business blog. Sometimes I write about technology strategy, occasionally about marketing; frequently about product management. But you’re just as likely to find posts about music, or turning 40, or the history of a 140-year-old singing group here.

So in the interests of truth in advertising: if you want all business writing all the time, better check somewhere else. If you don’t mind coming in on the middle of nine years of my writing about things that catch my attention: welcome.

Obscure HTML element of the day: dfn

I’ve had an opportunity to do a little static HTML + CSS work recently, and have had a few educational and reeducational moments about the joys of doing basic web development–all the stuff that a good CMS like WordPress hides from you.

Today’s educational moment was a question of footnote treatments. My application had footnotes at the very bottom of its page, with nothing beneath them, and did inpage links to the footnotes. But it was linking to the footnotes from a part of the text that was close to the bottom of the page, so the footnote was already visible. As a result, when a user clicked a link to get to the footnotes, nothing happened–the footnote was already there, and there was no more page to scroll up.

There are ways around this. Daring Fireball has a lot of empty space on its pages below its footnotes, meaning that the page can scroll to place the footnote at the top. But the bug got me thinking again about why I was doing the footnotes and how I could change the user experience. What if I moved the footnote text–which was generally some sort of quick definition–into a mouseover? I knew I could do it with acronym, but the text I was footnoting wasn’t an acronym so it wouldn’t have been semantically correct. Was there a semantic way to mark up the word or phrase being footnoted so that when moused over, a definition would show?

Enter dfn. See what that does? The dfn tag is basically tailor made for what I wanted to do, and is even reasonably well supported. FF3 and IE7 even automatically italicize the term.

I made one more change to my stylesheet to make it really explicit that more information was there for the mouseover, and applied the same rule that I had for abbreviations:

dfn {
   border-bottom: 1px dotted #333;
   cursor: help;
}

With that, the user got a dotted underline on the term, and a help cursor when they moused over.

I would probably make one more change if the application was expected to be printed, which would be to introduce some styles or JavaScript in the print stylesheet that would do an inline expansion of the definition. But for what I needed to do, dfn worked pretty well by itself. Yay obscure HTML elements!

CSS fixin’: toward a vertical grid

It should be theoretically possible with CSS to design a page where the type falls on a vertical grid. In reality, you rarely see this happen because multi-column sites make matching the grid values across the columns difficult, and browsers, particularly IE, have awkward ways of inserting inconsistent space around some block elements.

But the basic theory is simple enough. Decide the base unit of height of the page, and go through your stylesheet, making sure that everything there is a multiple of the base unit of height. Your tools are line-height, padding-top and padding-bottom. For example, if your base measurement is 20 pixels between lines of type, and you want space between your paragraphs, you might define a style like p { line-height: 20px; padding-bottom: 20px;} or even p { line-height: 20px; padding: 10px 0;} (where the latter splits the padding above and below the paragraph).

Getting it to work right can be a real bitch, though. What if you have a heading that you want to set larger than 20 points? The naïve approach (which I just implemented) might be to implement a rule like this: h3 { font-size: 24px; line-height: 28px; padding: 8px 0 4px;} where the 28 pixels of line height are padded with a total of 12 pixels to make up 40, or two lines. But this only works if all your h3s are less than one line in height; a heading spanning two lines will take up 66 pixels, or a little more than three lines, messing up the grid. The recipe for success is to avoid setting multi-line headings too closely–or perhaps to use smaller font-sizes for headings.

Here, as in all things related to web typography, a valuable resource is The Elements of Typographic Style Applied to the Web, the brilliant adaptation of Robert Bringhurst’s essential typography rulebook to CSS+HTML+ (occasionally) JavaScript. In this case, the sections on vertical motion (Choose a basic leading that suits the typeface, text and measure and Add and delete vertical space in measured intervals) are invaluable, and I’m going through this theme’s stylesheet and working on applying the principles now. So if things look odd, don’t worry, it’s not just you.

I should also point to 8 fonts you probably don’t use in CSS, but should as the inspiration to change my sidebar headers to Gill Sans (though I might pick a different sans in a day or two), and 10 Examples of Beautiful CSS Typography and How They Did It for the specific inspiration to use small, capitalized, letterspaced sans serif for the headings. Both are quite well written posts from the blog at 3.7 Designs.

Ongoing minor site maintenance

I’m putting enough energy into this particular theme that I think I might keep it around a while. Today I addressed a problem with my daily link posts, which come from del.icio.us with some embedded markup. The formatting of that markup was causing some bogus line breaks (on Firefox, the list bullet displayed on a line by itself), which I eliminated with some simple CSS rules. I’m probably not done playing with the formatting of the link posts, but I’ve fixed the immediate problem for now.

I’ve also created some linkage to parts of the site that used to be exposed in my main navigation, and added a few more top navigation links. Enjoy…

Excel theme fix list

I’m writing this working list so that I can keep a record of what I did to the Excel theme to get it the way I like it, as well as for anyone else who’s interested in learning how to hack up WordPress themes.

Issues:

  • The amount of vertical space consumed by the header region (seems to be a common trend among the themes I’ve tried so far)
  • Need to tweak styles — tags and recent comments run into each other, headings in the sidebar are too prominent, need some custom style work for the Delicious widget
  • The dark borders around images and the big blocky links make the top of the page feel too heavy
  • Category and single post pages missing blog title

Fixes to date:

Tags: I replaced the function call for tags that was in the theme to specify the following: the_tags('<ul class="pmeta-tags"><li>Tags: ',',</li> <li>','</li></ul>');. This basically made the tag a true unordered list with a new class, pmeta-tags, and inserted a comma and a space after each item in the list except the last one. Then I edited the stylesheet to define ul.pmeta-tags as display:inline. So the tags now displays as a comma separated list. I tried a different, very handy, css-only approach (example) first, but the browser didn’t pick up the specified commas or spaces as cues to break the line, and so the content disappeared off the right hand side of the box.

Recent comments: I used the CSS-only example cited above to style the comments and provide a semicolon as a separator between comments. Alas, IE doesn’t understand this approach so I’ll have to do something else here.

Blog title on other pages: I edited the header.php file to include the blog title in parens after the title of the object (post, category, etc.)

You might notice something different today…

Today is CSS Naked Day 2007, a day when some thousand-plus web sites have cast off their styling to illustrate their semantically-beautiful bones beneath.

Which is why my site looks, um, weird. All the normal styling has been stripped out.

We do this to illustrate that the Web ain’t all pretty colors; at its root, it’s about markup that is easy to read and portable across multiple devices. It’s all about separating style from content, baby.

Hat tip to Zalm, who turned me on to this concept, and whose markup is just fine.

Georgian revival

International Herald Tribune: Quirky serifs aside, Georgia fonts win on Web. The thesis of the article is that, because of its use in some fairly high profile redesigns (the New York Times website among others), the font Georgia is undergoing a comeback. A slim thread on which to hang an article, particularly when you consider that Georgia has been the font of this blog since at least its redesign in January 2004 (the original custom CSS design used Verdana or Helvetica, depending on availability, as my old stylesheet reveals).

It is sad, as Dave Shea at Mezzoblue notes, that there is practically speaking only a pool of eight or nine fonts through which we can rotate for web typography. In this vein, I have to go back and give Hakon Lie partial credit for at least trying to move the ball forward on web typography, as wrongheaded as he was about the business model implications of what he proposed.

DRM or Free’n’Ugly: why Hakon Lie is wrong about web fonts

As I keep forgetting to prove by posting some old work, I was once an ardent amateur typographer before the web rendered that pastime, as well as most desktop publishing, all but obsolete. As someone who used to code my favorite font family into my stylesheets on the off chance that someone would have Minion installed on their machine, I should be right in the target market for Opera CTO Hakon Lie’s write-up on improving web typography.

And yet, I find myself with some misgivings. Not because there aren’t problems with web typography. To cite one example, several sites that I visit from my home browser used to appear strange to the point of being unreadable because Safari read the type family and found the nearest match—but as you can see, Myriad Wild is no substitute for Adobe’s elegant Myriad sans serif, and when the browser identifies the music-font variant of Minion as the right text in which to set a page of text it’s time to give up.

But the biggest problem with fonts online for me is the same as the biggest problem offline: quality and readability. And for this cause I think Hakon’s suggestion that free fonts should be accessible by browsers to render web pages is not the best idea. The best example I can think of is the one Hakon used: Goodfish. I may be a font snob, but I can’t help but think a web page set in this font would drive me to turn off font downloading—or stop visiting the page. It’s not a bad font, it’s just not a good font for setting text. In fact, it was the general unavailability of good fonts for reading text on screen that drove Microsoft to commission Verdana, Georgia and the other fonts in their Web type set in the first place. Display faces are a dime a dozen, and I happily use freely available ones where necessary—but good fonts for setting text are worth their weight in gold, and the odds of them being released for free use without some sort of DRM are minimal. (That I can name only two exceptions, the highly useful Gentium and Bitstream’s Vera, proves the rule.)

And speaking of DRM and free, there are two unattractive possibilities that would come from the institution of standards for downloading Web fonts. First, there is a long history of ripping off and undercompensating font designers (think of all those collections of 1001 free fonts that consist entirely of cheap knock offs of gold standard fonts that cost money) that can only get worse if the pressure to provide free fonts for Web use grows. I think that a flood of even more cheap knock-off fonts falls in the category of really bad unintended consequences. At the same time, the last thing I want to see is an even more restrictive set of DRM schemes around font technologies. And think of the challenges of enforcing “web only” font licenses through DRM when more and more of the user’s desktop applications are migrating to the Web.

I also think the point that is made on Big Patterns about the difference between free-as-in-beer and free-as-in-speech fonts is well made. But at the end of the day what I want is good fonts that can be used online without resorting to PDF, Flash, or various CSS image replacement techniques—and without paying an ASCAP-style yearly license for the right to do so. I don’t see this happening under Hakon’s suggestion without some extremely creative thinking on the part of the font foundries and software engineers.

The elements of (online) Typographic Style

I’ve meant to blog The Elements of Typographic Style Applied to the Web for quite a while but now (thanks to a sick day while I fight off the remnants of this cold) am finally getting around to it. The site is just what it says, a work in progress that takes each of the lessons of good typography in Robert Bringhurst’s classic Elements of Typographic Style and shows how to address them online. Some fairly advanced topics like kerning with CSS are covered, and the whole thing is pretty darned cool—and a beautiful site, as you would expect.

Redesigns 2: CNet’s News.com: ho-hum design, good blogs

The second notable redesign today is at News.com. Reviewing this design is a little more difficult, because it’s harder to spot what has changed. The yellow is still there, now actually looking a little orange. The front page is still a total mess, and it’s still impossible to find an individual headline there. The URLs are still impossibly long and impossible to remember.

But there are three killer features. The treemap view of the hottest stories on News.com is brilliant, as is its placement as a sidebar on every story. It’s interesting to watch popularity change in real time, too, as the current hottest story (Network feud leads to Net blackout) gets hotter. I hope that CNet thought about the effect that this treemap has on their most viewed statistics, or they might just be getting into a self reinforcing loop here.

The Big Picture is even cooler, at least at first. This moving relationship map between stories is fun to use to explore the Related Stories that CNet has long featured at the bottom of every article. Two things are keeping me from being hyper-enthusiastic about the feature, though. I don’t always understand why the connections are drawn the way they are, or what popularity has to do with the relationship between the stories. Second, like all such spider graphs, the relationships are really hard to read once too many of them appear on screen.

The third feature has the potential to be the most controversial among bloggers. That’s because it’s yet another Top 100 list of blogs that are “worth reading.” The results are interesting, especially the Blog 100 Stream (recent posts from all 100 blogs in river of news format). Even if Fark.com is flooding that river right now. I’d like to see more interactivity though. Agree or disagree? What would have been cool would be if CNet partnered with Bloglines or Kinja to allow readers to build their own lists, not just talk about them.

Final note: I wholeheartedly approve of News.com’s shift in focus from Tech News First to News of Change. In 2005, focusing on technology means focusing on law, politics, and the sciences as well.

In fact, the only obviously dumb move I see from this redesign is the My News feature. I’m not going to take the time to customize my view of News.com, folks. I’m putting that time into my RSS reader instead, because the payback is better.

Overall score: Intentions A, execution B+. Great features, but the basic page design, particularly on the home page, could still improve to make finding information easier.

Redesigns Part 1: Salon misses an opportunity

Two big sites unveiled new designs today. Salon (as pointed to by BoingBoing) and CNET’s News.com both rolled out new user interfaces. I’m a little mixed on the design effectiveness of both, but there are a few interesting corners in the mix too. I’ll write a quick post on CNET but want to focus on Salon’s moves now, because frankly they annoy me more.

First the graphic identity. It’s cleaner, but some of the elements, particularly on the front page, appear unanchored and somehow floating—as though the former black boxes of the design were containing the content and it’s now just kind of drifting around the page. There’s not a good sense of an underlying grid. Take a look at the community sidebar for an example—it seems to bear little relation to what’s going on around it. I’m also getting lost in the headlines on the left—too much bold text, not enough visual separation or something. It’s hard to scan. Finally, the new design and branding doesn’t carry through to all the content, particularly Audiofile. Visual design: A for intentions, B- for execution.

I also don’t appreciate the “ghetto-ization” of Salon’s blogs, which are now (especially Audiofile and War Room) the major daily draw for me. While they’ve moved into the main column and feature updated headlines, they’re only small text links in a mass of illustrated spots and thus easy to overlook. Don’t get me wrong, I enjoy Salon’s other articles. I still click through on the RSS feed for some other articles, such as today’s Fall of the Rovean Empire by Sidney Blumenthal and last week’s article on the implications of the Vatican’s crackdown on homosexuality in seminaries. But for me Salon’s steady, unglamorous RSS feed (OK, it’s actually RDF) is much better at making their content findable than the redesign. And the link to the RSS feed is now gone from the front page! It’s not even in the meta tags, so you can’t use autodiscovery. This is brain dead. Discoverability: intentions A, execution D.

Finally, functionality. I like the addition of the font size controls and the print and email links. But they aren’t on pages that don’t have the new design. Intention B+ (page tools are ok but not revolutionary, really. How about telling us about your most emailed articles with those stats you’re collecting through Hotbox?) and execution A-.

Overall score: intentions A, execution C-. Not a good way to start your next ten years, folks.

CSS bonanza

A trifecta of interesting CSS links in my aggregator this morning. First, Luke Melia points to an interesting post about maintainable CSS, and proposes modular CSS and Dave Hyatt’s rules for CSS use in Mozilla skins as possible solutions. For myself, I lean toward the former approach; I separated structural markup (the definition of header and sidebar boxes) from presentation markup (type and colors) within different sections of my stylesheet when I was doing the first round of design improvements. Other interesting solutions in the comments to Simon’s post, including this article from Digital Web Magazine about Architecting CSS.

Second, A List Apart provides six methods, of varying degrees of semantic correctness and coolness, for achieving multi-column lists with various combinations of XHTML, CSS, and JavaScript.

Third, ALA also talks about the multi-column module in CSS3, and introduces a Javascript parser for the CSS syntax that helps bootstrap the new capabilities in browsers that don’t yet support the extensions. You have to see some of the examples, particularly numbers 2 and 5, to get why this is so cool, but once you do it’ll make you swear off long scrolling layouts forever.

Open source testing: CSS test suite for IE 7

Alex Barnett blog: IE7 and CSS: the Acid2 test – Microsoft has now been challenged. This is a smart way to put the pressure on Microsoft to fix CSS support in their (aging, broken) browser: get a community effort going early in the development process to put together a comprehensive CSS test suite. This would be a good thing for all browsers, btw, including Safari, to work against. Let’s hope that Microsoft jumps on it.

Mezzoblue on color

mezzoblue: CMYK (for Those Who Do RGB). The post is actually a fantastic primer on all sorts of color related issues for those who grew up with RGB. When I was doing page layout for various independent and student magazines, it took me a long time to try to do anything in color for precisely the issues outlined in the article: what you see isn’t necessarily what you’ll get in process; there are also spot colors to worry about; and of course type (where I spent my formative time) is complex enough without adding the additional dimension and expense of color. The Mezzoblue article is an excellent demystification of the technologies involved; bravo.