Posts in the CSS Category

I’m trying to find out if there’s a country or other region in this world whose annual, monthly, or daily bandwidth consumption is in the vicinity of 700 terabytes (5.6 petabits).  Searches for this type of information have so far come up empty; I was pointed to the Internet Traffic Report but its figures are too abstract to be useful to me, plus they seem to be based on ping times instead of actual bandwidth.  Anyone have a pointer to freely available information along those lines?

Yesterday’s mail contained a copy of the shiny new book Cascading Style Sheets: The Designer’s Edge by Molly Holzschlag.  It’s very, um, red.  It’s also in full color throughout, chock full o’ information, presents some case studies of CSS-driven design, and talks about CSS and design as if they go together, which of course they do.  I did technical editing and wrote the Foreword, where I said:

…CSS is a visual language, one that was meant to be used by designers from the beginning.  Books aimed at that particular audience are long overdue, frankly, and I’m thrilled to see them emerging at long last.  I’m even more thrilled that we’re getting one from Molly Holzschlag.

Personally I think Molly’s a really truly wonderful person and my wife agrees with me, so if you’re particularly worried about bias, there’s mine.  One of them, at any rate.  I also have a fondness for hot chai drinks, in case anyone’s keeping track.

Dear God, but this is just so wrong.  That damn song they sing is still stuck in my head, which I’m sure was the point, but the visuals are even more vividly seared upon my memory.  Requires Flash to actually see the full extent of the wrongness.  Also requires that you not be at work or some other place of propriety, or in the presence of people who are easily offended, or be easily offended yourself.

Then again, far worse things are looming in the real world, and it won’t be cuddly cartoon characters who pay the price when the storm finally breaks.

• Close to the Edge was published on Wednesday, March 19th, 2003.
• It was assigned to the CSS and Politics categories.
• There have been no replies.

After a great breakfast at El Sol y La Luna and a quick chat with Tantek on der cellphonen, I spent most of the day on planes and arrived back in Cleveland this evening sans Kat; we parted ways in Houston as I flew back home and she flew to San Francisco for a conference of her own.  I miss her already.

A quick SxSW Interactive braindump:

• There was nowhere near enough time for me to talk with everyone I wanted to talk to, let alone spend time on it and really get in-depth.
• WiFi is a particularly sharp sword of the two-edged variety.  It’s great to be able to check mail and IM while you’re sitting in a session, but it’s also kind of rude.  I sat listening to Bruce Sterling talk, and sort of felt like I was the only one doing so as everyone around me typed furiously.
• Speaking of which, Tantek posted this journal entry while sitting on the podium during our panel.  While I was talking, in fact.
• Apparently the panel was very, very well received.  There was a good deal of positive feedback from various people, and I heard a rumor that we scored very high on the audience evaluation cards.
• If you’re going to have live entertainment in a small space, try not to deafen everyone with too much volume and way too much feedback.  (No, I’m not talking about Fray Café, which was very well mixed.)
• Now I am talking about Fray Café: Scott Andrew’s bet-winning song is both a hoot and a holler.  Although it was much funnier when Scott performed it.
• Apparently in Texas they spell it “Austin Geek Party” but pronounce it “Adult Webmasters Party.”  A small group of us found this out by dropping in to talk to the Austin geeks.  Imagine our surprise!
• If there’s one useful thing I’ve learned about Austin, it’s that you need to either stay downtown or rent a car.  We did neither, to the detriment of our overall experience.
• Cory Doctorow is a very high-speed guy.

Possibly I’ll have more to say, upon reflection.  For the moment, I’m going to go get some beauty sleep so I’ll be at my best for tomorrow’s Web Design Meetup.

• Back From SxSW was published on Wednesday, March 12th, 2003.
• It was assigned to the CSS, General, and Speaking categories.
• There have been no replies.

Jeffrey, Tantek, and I finished up our panel about an hour ago.  Apparently the audience enjoyed it, as only one or two people left during the talk and there seems to be some good buzz among attendees.  Maybe we’ll expand it and take it on the road.  (“Hey, gang, let’s put on a Web talk in my Dad’s old barn!”)

Austin is nice, and SxSW Interactive is quite interesting.  Caught some of Fray Café last night but the cigarette smoke drove me elsewhere, unfortunately.  I’ve been meeting a lot of people whose names I know well, but whose faces were new to me.  That’s the great thing about conferences: they help humanize everything we do, and strengthen intellectual respect into personal appreciation.

• Fun at SxSW was published on Monday, March 10th, 2003.
• It was assigned to the CSS and Speaking categories.
• There have been no replies.

I’m still wrestling with the entire issue of fonts and font sizing.  A lot of this arises from a meyerweb redesign on which I’ve been occasionally working for the last few weeks.  My last redesign switched font styling from the user default to 11-pixel Verdana.  This is not a choice without its detractors; apparently I’ve earned the nickname “Mr. Microfonts” in some circles.  It’s also a choice I made knowing full well its benefits and drawbacks.

When I decided to go to a sans-serif font, it became almost mandatory to crank down the size.  Take a look at the accompanying image, which shows a comparison of the default-size text in IE5/Mac in Times New Roman, Arial, and Verdana.  To produce the text, all I did was set the font family, not the size.  They’re all effectively at font-size: 1em;, which given the browser’s default setting is the same as if I’d set them all to font-size: 16px;.  The same size value but a changing family means huge differences in the text’s appearance.  This is why font-size-adjust was invented, by the way.  Too bad only Mozilla for Windows supports it.  The lack of cross-browser implementation led to its removal from the CSS 2.1 Working Draft.

Nonetheless, when I started fiddling with the new design—which is more an evolutionary change than a revolutionary makeover, so don’t get too excited—I decided to see if I could go back to the user-default approach and still be happy with the result.  I think I’ve managed it, but what’s been interesting to me has been how that choice has influenced the entire design process.  What I have now is something that I think works well with a serif font, but if I were to switch to a sans-serif font, I’d have to change other things as well.  More proof of the fundamental importance of text styling, as if any more were needed.  Those of you who went to design school have known this for years, I suppose.  Nothing I studied in the pursuit of my B.A. in History really taught me the importance of typography.

Speaking of redesigns, Scott Andrew just launched one, and I really like it.  There are some interesting behaviors at my default window size, which is apparently smaller than his, but overall my thumbs are up.  The warm tones and nice use of sunflowers make a nice antidote to the recent trend of minimalist white-backed redesigns, which are all fine but were starting to get a bit monotonous.

Looking over Scott’s new design, I realized how much I envy people who can come up with attractive color combinations; all my designs tend to be monochromatic variations (gee, really?).  People like me need EasyRGB‘s Color Harmonizer just to get started.

• The Font of Frustration was published on Wednesday, March 5th, 2003.
• It was assigned to the CSS category.
• There have been no replies.

After more than a year of sitting bolt upright in a chair whose back was about 20 degrees from horizontal, Kat finally got me to buy a new chair on Saturday.  I assembled it this morning, which anyone who knows me will tell you is astonishing on two counts:

1. I put it together less than a month after I bought it.  Usually I let a project like that sit for a while, to let it come to the proper sense of fullness.  Or else because I’m lazy.
2. I put it together, period.  I’m not what you would call handy with a toolbox.

I did put the armrests on backwards, but I did that on purpose.  They look cooler this way.

Font and text handling seem to occupy more and more of my attention of late.  Here’s another good example of the problems we face: character encoding.  This morning I dropped by the O’Reilly Network and spotted some badly mangled text.  Apparently that’s supposed to be a “ü” in there, since that’s what the referenced article shows.  How did this happen?  No doubt somebody copy-and-pasted the text from a word processor into a CMS interface, and it looked fine on their machine when they previewed the text.  Unfortunately, in my Web browser, no such luck.  (This was in IE5.1.4/MacOS9.1, but a quick check in a recent Mozilla build showed the same problem.)  It may have gone through some XSLT for extra munging, for all I know.

I have a little experience with the encoding problems that can arise when you’re working with XML and XSLT.  If you want to use HTML-style character entities, you have to write a stylesheet that defines every last entity you might use, which is kind of weighty, although I do it for this journal’s XML files.  For the new DevEdge, we wrote a separate namespaced transform based on the old entities.  In our world, a “u” with an umlaut is <ent:uuml/>; an “A” with a ring is <ent:Aring/>.  Of course we also have documents that are encoded for localization (e.g., DevEdge Japan) by their authors, and nobody else can touch them for fear that we’ll break the encoding.  For that matter, when we had an inline JavaScript alert for our printer-friendly links, the spaces in the value were encoded as %20.  Every browser showed those as spaces in the link, except Opera, which showed the raw text (“This%20page%20is%20already…”).  Is it right to do this?  Is it wrong?  I don’t know.  Do I care?  Not really.

In a like vein, I recently found out why recent e-mail message from a certain well-known CSS luminary look like an encoded binary to me, while his responses to other authors’ messages on listservs look just fine: he’s sending out 8-bit text in ISO-8859-1, and something between his fingers and my eyes is munging the text into 7-bit ASCII.  If he sends a message as 7-bit text, there are no problems.  I’m not sure if it’s my aging mail client or a server along the message’s path from him to me.  Again, I don’t care.  I shouldn’t have to care.

It seems that the more powerful our tools become, the more ways we have to break the flow of information.  This to me is exactly opposite of what should be happening.  It’s not that hard to implement character encoding, and it’s not that hard to agree on a character format.  We (as an industry) just haven’t done it to the necessary extent, and there’s really no excuse for this fact.  A character should be a character.  If Unicode is the answer, then great, let’s do it.

As is common for my little technology rants, I don’t have a solution, only questions.  My biggest question is, “How long until we fix this basic problem?”  I don’t even care about how, really.  Just when.

Today is a triple-three, for those of you who care and use two-digit date formatting: 03/03/03.  I wonder if any lotteries will have that number come up tonight.  I still remember when the American Embassy hostages were released by Iran after 444 days in captivity, and that night one state lottery’s Pick 3 came up 444.  Those kinds of coincidences are always fascinating to me.

• Out of Character was published on Monday, March 3rd, 2003.
• It was assigned to the CSS and Standards categories.
• There have been no replies.

The Amaya team has recently said they’re very willing to accept contributions of redesigned icons and color choices for the browser.  So those of you with talent in that area, get to it!  Since the WThRemix contest closes today, you should have plenty of time to devote to Amaya, right?  Right?  Right.

I recently had a very interesting conversation with Ian Hickson about fonts and font-sizing.  Both of us have thought a lot about fonts in CSS and Web typography over the years, but I think we both realized that we had more thinking to do.  When you get right down to it, there is no good solution regarding font sizing on the Web today.  Every authorial choice has a drawback for some visitors, and every choice has a lot of benefits.  Pixels penalize high-resolution visitors who can’t (or won’t) use text zooming.  Percentages and ems can penalize visitors who have changed their default font size.  Leaving the text at user default looks stupidly big for visitors who haven’t changed their default font size.

It doesn’t help matters that there are huge differences in how serif and sans-serif fonts look at the same value of font-size, and that the commonly-available fonts on the Web today are not suitable for really nice typography.  I know some people think typography isn’t something we need to worry about, but it’s critical to good visual design and our current capabilites are laughably crude.  In fiddling with some test pages, I rapidly came to the conclusion that there just isn’t a good answer.  I’m not entirely thrilled with how this site’s typography is handled, for example, but I was even less thrilled by the other approaches I tested.

Is waiting for a downloadable-font mechanism our only hope?  I wish there were another answer, but right now, I don’t see one.  It seems we’ll have to accept and work with what little typographic control we have, and cede the rest of our textual desires to future improvements in both specifications and the browsers that implement them.

• Upgrading Designs was published on Friday, February 28th, 2003.
• It was assigned to the Browsers, CSS, and W3C categories.
• There have been no replies.

Ian Hickson complains that he can’t read meyerweb.com due to his high-resolution display being placed too far away.  Two words, Ian: Text Zoom.  Two more words: user stylesheet.  (Three words, if you prefer “style sheet.”)  You can make the Web more legible with this simple rule:

html, body {font-size: 1em !important;}

That will reset this site’s text to match your browser’s default font size setting, because I do use ems and percentages for all elements that descend from the body element.  On the body, I use a pixel value for font-size, thus establishing the basic size of text for the site, and every other element scales from there.  Reset that element’s size, and you change the baseline from which the rest of the site is sized (which is how the “advanced setup” text-sizing feature works).  The same will happen on the new DevEdge, as it happens, and on any other site that intelligently uses inheritance and CSS to size text.  The tools are there.  Use them to your advantage.

(Aside: I find it weirdly funny that Ian’s complaining about not being able to read my site, which uses valid CSS, when his site is almost completely unreadable in IE5/Mac thanks to his valid CSS.)

I’ve been trying to come up with a name for this font-sizing approach.  “Baseline sizing” is too evocative of the baseline used to lay out lines of text, which has nothing to do with this technique.  “Body sizing” sounds like it’s a weight-loss program.  “Right sizing” probably hits too close to home for a lot of unemployed IT folks.  Something to mull over as I nurse back muscles sore from shoveling wet, heavy snow and ice.

• Try This On For Size was published on Monday, February 24th, 2003.
• It was assigned to the CSS category.
• There have been no replies.

A redesigned Netscape DevEdge has been launched.  Look, ma, no tables.  Well, hardly any, and none in the basic design.  I was a primary project manager for this one, and the design is a from-scratch effort.  It’s nothing visually groundbreaking, and of course using positioning for a major site has been done, but we’ve gone a step further into using positioning to make the design come together.  The site didn’t quite validate at launch thanks to some deeply stupid oversights on my part, but hopefully they’ll have been fixed by the time you read this entry.

As for the design approach we took… that’s a subject for another day, and also the subject of an article I wrote.  I predict that we’ll draw fire for using HTML 4.01 Transitional, for not validating when we launched, for our font sizing approach, and for our dropdown menus.  On the other hand, we’ll probably draw praise for making the markup accessible (once one of my stupid mistakes is fixed), for using CSS in a sophisticated manner, for pushing the envelope in reasonable ways, and for our dropdown menus.  For myself, I’m very much satisfied with and proud of the result, and very grateful for all the effort and help I got from the other members of the team.

On a less important but possibly more amusing front, yesterday I hacked together a color-blending tool after Matt Haughey asked on Webdesign-L how to calculate the midpoint between two colors, and Steve Champeon explained how to do it in some detail.  The JavaScript is no doubt inefficient and clumsy, the tool may not work in your browser, and for all I know it will lock up your computer.  It was just a quick hack.  Well, not quick, actually; I’m not very skilled at JavaScript.  Enjoy it, or don’t, as you like.  Just don’t expect me to fix or add anything unless you mail me the code needed to do whatever you want the tool to do.

Lucas Gonze over the O’Reilly Network mentioned a fascinating paper on “cascade attacks” and how they can be used to take down a distributed network.  So the Internet can suffer cascade failure, eh?  I wonder how much effort would be required to take down the Internet’s starboard power coupling.  Or, worse yet, trigger a coolant leak.

It’s been revealed that the blurry, grainy image of the Space Shuttle Columbia wasn’t taken using any advanced telescopes or military systems after all, but three engineers who used some off-the-shelf parts to put together a personal experiment.  CNN says: ‘Hi-tech’ shuttle pic really low-tech.  Let’s think about that for a second.  Three guys took an eleven-year-old Macintosh, hooked it up to a telescope that probably cost no more than a couple hundred dollars, and took a picture of an object almost 40 miles away moving 18 times the speed of sound.  That’s low-tech?  The fact that you can even recognize the object they imaged is astounding.  Hell, the fact that they imaged anything at all is astounding.  No criticism of the three men intended; I’m sure they’re brilliant guys who know what they’re doing.  But think about it!

I refer to moments like this as “technological vertigo.”  They’re those points where you suddenly come to a dead halt while you realize the incredible complexity of the world, and just how much we take for granted.  For that one moment, you stop taking it for granted.  Here’s an example: a couple of years ago, I was driving south through suburban Columbus.  In the back yard of a house just off the interstate, I spotted an old satellite dish lying on its side, obviously no longer in use.  Then it hit me: whoever lived there once had the ability to receive information from orbit, and decided to throw it away.  Their garbage was so much more advanced than anything their parents had ever even envisioned that the gap was barely comprehensible.  Any general in the Second World War would have given anything, including men’s lives, to have the kind of communication capability that now lay discarded in somebody’s back yard.

The even more remarkable thing about this trashed satellite dish is that there was nothing remarkable about it.  So somebody threw out an old satellite dish—so what?  They can always get another one, and one that’s a lot smaller, better, and more capable than the piece of junk they tossed, right?

And that is perhaps the most incredible part of it all.

• The Nature of Progress was published on Thursday, February 13th, 2003.
• It was assigned to the CSS, Redesign, Technovertigo, and Tools categories.
• There have been no replies.