Posts in the CSS Category

Through Another Pair of Eyes

Published 22 years, 3 weeks past

This week on Netscape DevEdge is part one of a two-part interview with Mike Davidson of ESPN, who talks in depth about their curent redesign efforts.  On the ESPN home page they’re currently using CSS positioning to lay everything out.  That means they’ve dropped tables as a layout mechanism and, in the process, about 50KB of page weight.  Mike has some very strong opinions, and I imagine they’ll be controversial in certain circles, but he speaks from the perspective of a designer in charge of a commercial site that serves close to a billion page views every month.  His is a thoroughly practical point of view, and he’s not shy about it.  I highly recommend it, and not just because I wrote the questions.

Through the O’Reilly Network, I came across a link to an English-language blog called Where Is Raed?, written by a resident of Baghdad.  This past Sunday, he posted a rant against war and for democracy that should be read by anyone who wants to get insight into how the events of the past year and decade are viewed by those who had to pay the price.  A tiny exceprt:

how could “support democracy in Iraq” become to mean “bomb the hell out of Iraq”? why did it end up that democracy won’t happen unless we go thru war? Nobody minded an un-democratic Iraq for a very long time, now people have decided to bomb us to democracy? Well, thank you! how thoughtful.

Before you dismiss this as obvious propaganda, go read the piece in its entirety.

Note to those in the San Francisco area: I’ll be hanging out with some very cool people (like Doug and Tantek) at Rockin’ Java this Sunday at 2:00pm.  All are welcome for discussion, open wifi, and caffeinated drinks.  Be there or be, um, elsewhere.


AAAAA! My Eyes!

Published 22 years, 3 weeks past

Thanks to Tantek, I found out that Christine accused CSS of making her eyes bleed while at SxSW.  I can’t say that’s ever happened to me, although maybe it has to Joshua Davis.  (After all, we only have his word about the red food coloring.)  Also thanks to Tantek, I read that the subtle evilness of CSS gives Natalie headaches, and in surfing further onward I found that it apparently also makes Dave’s head explode.  I’m sure there are similarly colorful stories of CSS-inspired pain and suffering out there.  I wonder if anyone’s accused it of giving them some horrible disease.

Between amused chuckles, I feel a touch of concern.  There seems to have been a real failure to communicate with developers the benefits and perils of CSS; or at least, that’s what I assume is causing all the pain.  After all, from my point of view, it’s font tags and nested tables with three hundred shim GIFs that inspire eye-bleeding.  If there’s evil in design, it’s needing more markup than content to create a layout, as was the case for years.  Compared to all that old-school HTML design crap, CSS is like the breeze off a mountain pasture filled with blossoming wild flowers on the first warm day of spring.

It does require something of a conceptual leap to use CSS well, there’s no question.  But it seems that there’s a more important question, which is this: why do people find working with CSS to be so painful?  Is it simply because it’s new, or is there something more critical happening here?

I’ll freely admit that I’ve had times where trying to understand aspects of CSS made the veins in my forehead throb.  In fact, the worst such period was when I was trying (with a great deal of help) to decipher the line box model.  I spent a week of evenings wanting to drive my head through the monitor because it just didn’t make sense—but then, when I finally got it, everything seemed very clear.  (Not that my summary document does anything to reflect that clarity.)  I still think the line box model is flawed in certain important ways, largely because it works well to replicate legacy behaviors, and of course I’ve already complained about the deplorable state of typographic styling.

There are also certain behaviors which CSS does not make easy, although that’s more the fault of CSS still being young in terms of development than anything else.  It’s true that the box model doesn’t allow you to make an element stretch around a floated descendant, but that’s because in most cases you don’t want such stretching.  When you do, of course, it becomes very frustrating that there’s no simple solution.  There’s been a property proposed for CSS3 that would give the author the power to choose how such situations are handled.  There are also proposed properties that would let authors choose how line boxes are laid out, how element boxes are sized, and more.

That’s where my concern starts to grow into a certain species of dread.  People are already complaining that CSS is too difficult for them to grasp.  What will happen when, in the name of giving designers the layout control they want, CSS becomes so complex that nobody can learn the whole thing?  What good will it do to have a compact, human-readable styling language if nobody actually understands what it says?  I mean, it would still be an improvement over XSL:FO, which almost nobody can fully understand or read, thanks to its incredibly clumsy syntax.  But not much of an improvement; if you know all the words but can’t speak complete sentences, it’s still hard to ask for directions to the nearest coffee shop with an open wireless network and a customers-only bathroom.  If you catch my drift.

Problem is, I don’t see a way to avoid this over the long term.  It seems like any layout language will, eventually, become too complex to fully grasp.  Perhaps the best we can hope for is to have a language that humans can read, and let people specialize in different areas—Joe becomes an expert in typographic styling, Jane in element layout, Jerry in font descriptors, Jolene in selector construction, and so on.  It saddens me to think this, but there it is anyway.

In the meantime, I wonder what authors most need to know about CSS right now, and how that knowledge can be communicated to them.  How can the pain be eased, if not completely removed?


Close to the Edge

Published 22 years, 3 weeks past

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.


Back From SxSW

Published 22 years, 1 month past

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.


Fun at SxSW

Published 22 years, 1 month past

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.


The Font of Frustration

Published 22 years, 1 month past

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.

An image showing 'lorem ipsum' text in three different fonts (Times New Roman, Arial, and Verdana) at the browser's default font size, which works out to be 16 pixels.

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.


Out of Character

Published 22 years, 1 month past

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.

A screenshot of text on the O'Reilly Network which has some severe character-encoding problems.

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.


Upgrading Designs

Published 22 years, 1 month past

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.


Browse the Archive

Earlier Entries

Later Entries