Posts in the CSS Category

As I write this entry, Cascading Style Sheets: The Definitive Guide, Second Edition is #3 on Amazon’s Computers & Internet Bestsellers list, and the book itself has a sales rank of 144.  Sweeeet.

• Leaping Fish was published on Monday, March 29th, 2004.
• It was assigned to the Books, CSS, and Writing categories.
• There have been no replies.

Jason Fried, one of those savvy 37signals guys, posted recently to express some disappointment about the tone of SXSW04i.

I’d like to think I introduced new and different ways to approach common UI quandaries with  my presentation, but I left the conference looking for more. And not necessarily more presentations, but more conversation in the hallways. All I could hear was CSS CSS CSS.

…which would indicate, to me, that the job of convincing developers to use standards-oriented design is not yet complete… unless of course the “CSS CSS CSS” heard was people saying, “Jeez, I’m sick of hearing about CSS CSS CSS all the time.  We get it already.  Why can’t we hear more about X, Y, or Z?”  Which I didn’t hear, but then perhaps I wouldn’t.  If CSS-driven design still has a lot of buzz, then people are still interested in figuring it out how to better use it.

After all, table-driven design is a tool, and CSS-driven design is another tool.  All the talk about CSS is an outgrowth of the continuing effort to show why the shiny new tool is better in many ways than the old, familiar tool.  (“New” is a relative term there.)  Once you’ve figured out that it’s time to upgrade, it’s tempting to think that there’s no reason to keep promoting the new tool.  After all, you’re using it and it should be intuitively obvious to anyone that it’s the right choice.  Sadly, that’s not so.  And it should be said that the limitations in CSS layout help prolong the conversation.  There are some layouts that don’t work well, or at all, without using table markup.  There needs to be a good CSS-G (Grid) or CSS-L (Layout) defined and widely supported before we can really get on to ending all the talk about what design tool to use.

Still, I basically agree with what Jason has to say:

Web standards are great, but people’s own standards include getting things done (and that’s still too hard to do online).

UI designers are making the same old fundamental “forgetting about the human being on the other side” mistakes — except this time their code looks better. Humans — not code validators — use interfaces.

There needs to be more talk about people and goals and scenarios and tasks and clear communication and clear function. More talk about what it’s like to be a human clicking and pointing and struggling to make sense of all this “stuff” that web sites think we need to know and interfaces think we need to do.

Yes!  I was sorry that I had to miss Jason’s presentation at SXSW04i, because I’d like to learn more about making UIs work better.  I’m no usability expert, as I’m sure anyone at 37signals or UIE would be happy to confirm.  There definitely should be more talk about improving usability and design of sites.  The people who know how to do that stuff therefore need to propose and organize such panels for the next SXSW, or whatever conference they’ll be attending.  Jason did that for SXSW04i, but we need more people to do the same.

Because as long as SXSW keeps approving CSS panels, people are going to be talking about it.  If the majority of proposed design panels are about CSS, then it stands to reason that the majority of approved panels will be the same.  In some sense, I’d love to see a conference where there were so many other and more interesting panel proposals that there wasn’t room for Yet Another CSS Is Cool Panel.  Heck, I’d like to attend a conference like that, because I could really enjoy attending it instead of spending half my time and a couple of late nights worrying about what I can say on my panel without boring or confusing the audience.  (Once you count the discussions, false starts, fine-tuning, rewrites, and reworkings of the material, I spent something like ten hours preparing for my ten-minute panel segment.)

If you want the design discussion to be more about people, as I agree it should be, then it’s time to start writing articles, posting to blogs, making newsgroup posts, and presenting conference sessions about it.  It will probably take a huge heap of time, way too much energy, and a near-infinite amount of patience to get the ball rolling in the direction you want.  Of course, you won’t get paid for any of it; hell, you’ll be lucky if you’re thanked for any of it.  That’s what I and a great many other people went through to get things moving toward using standards instead of allowing sites to continue being as heavy and labrynthine as a shelf of Umberto Eco novels.  At no point did the obvious advantages of standards-oriented design sell themselves, lazy sots that they are.  It all had to be done by a group of scattered, largely uncoordinated, individually driven volunteers who took up the effort because they thought it was The Right Thing To Do.  Is it any wonder that, on occasion, we were perceived as being zealots?

I will say, standing where we are today, that for me it was all worth it.  If I’d known ahead of time what would be required, I’d never have started; and I’m sure that if I could clearly remember what was required that I’d swear never to do it again.  (I’m told that parenting is much the same.)  I don’t think the effort can be called complete, but we’re past the hardest part.  Major sites are migrating away from the bloated code of yore and reaping the benefit of simplified, semantic markup.  And it’s true that I do get paid by clients to help in that effort, although I’d like to think that the investment pays off many times over in improved page load times, reduced bandwidth consumption, faster and more efficient maintenance, and so on.  That’s true today.  For a little bit more than half a decade, it wasn’t.

To come back to my point: yes, we need to have more of a discussion about making the user’s life easier.  I’ve done and still do my part, in promoting the use of techniques—tools, if you like—that remove technical barriers to that goal (thanks to reduced page weight, et cetera).  That’s the part I know.  I hope that people in other areas of the Web design space will be willing to expend the time and energy needed to explain the parts they know.  I’d love to learn new ways to make my site better, and that can help my clients make their sites better.  I’m all about that.  I’m ready.  Let’s do it!

• Design Direction Dilemma was published on Tuesday, March 23rd, 2004.
• It was assigned to the CSS and Standards categories.
• There have been no replies.

CSS seems to be the theme of late, so I’ll keep running with it and bring back the meyerweb themes of old (as several people had e-mailed to ask if I could do).  They won’t be available for the general site; instead, I’ve set up an example page where you can play with them for yourself.  As noted, some images used in the themes are copyrighted, while others are not.  The thematic styles themselves are now explicitly under a Creative Commons license, so do as you please with the styles, assuming you stay within the license terms.  Which shouldn’t be difficult; it’s a straight NonCommercial license.

Two of my favorite movie-and-music moments happen in the same film: The Matrix (which itself inspired one of the old meyerweb themes).  The first is the sparring program scene, where the upbeat video-game-like music goes along perfectly with the video-game flow of the sequence.  The second is the lobby shootout scene, where the video-game-like music goes along… you know.  The music used for the lobby scene is “Spybreak!” by The Propellerheads, albeit an edited version.  In fact, the version on The Matrix‘s soundtrack CD is edited down from the original Propellerheads version, which is almost twice as long, off of the album “Decksanddrumsandrockandroll”.  A while back, I assembled a personal mix called “Der Funkengrüven”, and it ended with the soundtrack version of “Spybreak!”, the only one I had available.

I’ve always wanted to use the album version instead, but I was never sure if it was worth it to buy the CD just for that song.  So I dropped into the iTunes store, called up the album, listened to the high-quality half-minute excerpts available there, and have decided to buy the album.  My only real dilemma now is whether to buy it via the iTunes store for $9.99, or to spring for a couple of extra bucks to get the physical disc in a jewel case and everything at Buy.com.  It’s my first real experience with the iTunes store, and I have to echo what everyone else has been saying: Apple got it right.  The store just works.  I wish the excerpts were a little longer, say 45 seconds or even a full minute, but that’s just picking a nit.  If I didn’t harbor lingering affection for owning albums in a physical form, I’d already have paid to download it, and I still might.  For an oldster like me, that’s saying something.

Sadly, I can’t use the iTunes store to replace my long-lost copy of “The Bobs“, but maybe I could use the store to acquire some Neil Young music…

• Thematic was published on Sunday, March 21st, 2004.
• It was assigned to the CSS and Mac categories.
• There have been no replies.

I have in my hands a physical copy of the second edition of Cascading Style Sheets: The Definitive Guide, bound with a RepKover lay-flat spine and everything.  So I figure it should be shipping out to folks within the next week or two.  If you’ve pre-ordered, there ought not be long to wait!  (And if you haven’t, then what are you waiting for?)

As I mentioned yesterday, the ‘diagnosis’ favelets I used during my SXSW04i presentation generated a lot of comment, so I now have the underlying style sheets on a “Favelets” page in my “Tools” section.  For those of you who know how favelets work, just grab any or all of the style sheets you want and go for it.  For those who need some assistance, I wrote a “Favelet Creator.”  You plug in the URL of a style sheet you want to have applied to whatever page you’re viewing and the name of the favelet as you want it to appear in your toolbar.  Then you drag the resulting link into your favorites toolbar.

All this really does is create a javascript: link that, when invoked, will dynamically write a link element into the head of whatever document you’re viewing.  That link points to a style sheet, and so the styles are applied.  As an example, you could point it to a style sheet that sets borders for tables and table cells.  When you click on the favelet, all of the tables and table cells in the currently-viewed page become visible.  Figuring out exactly how a table-based page is laid out thus becomes a snap.

So if you don’t like the styles I created, you can write your own (or modify the ones I provided) and create your own diagnostic style sheets.  The favelet creator should make it even simpler.  Either way, I hope these will be helpful.

• Return of the Fish was published on Friday, March 19th, 2004.
• It was assigned to the Books, CSS, Tools, and Writing categories.
• There have been no replies.

Having taken some time to decompress, play with Carolyn, and generally recover from the trip, I present some thoughts, impressions, and memories gathered at SXSW04 Interactive.

• There’s still a lot of interest in social networking, and as much interest in doing it right.  The attention XFN gathered (see D. Keith Robinson’s comments about hallway buzz) indicates that people want to make assertions about their social connections, and that they aren’t satisfied with the currently popular mechanisms for doing so.
• The interest in favelets/bookmarklets caught me totally off-guard; apparently, of everything I said in my ten minutes, the use of favelets for diagnostic purposes was the things that fascinated people the most.  It’s easy to forget that such a simple thing can be unknown.  I’ll be posting some of the ones I used in the near future, but in the meantime, you can’t go wrong with Tantek‘s favelets.com or Jesse Ruderman‘s Bookmarklets (“ancestors” is flat-out brilliant).
• Once I managed to pry him away from his fans , I chatted with Scott Andrew about the latest goings-on in the CSS world.  I mentioned that Dave Shea and Doug Bowman are (deservedly) getting a lot of invitations to speak these days to cool events in other countries with travel expenses paid and everything.  “That’s the rock star treatment,” said Scott.  I groused a bit that I didn’t get that kind of treatment.  He looked at me for a second and said, “Yeah, but you know, you’re the guy who’s been around forever and inspired all the new up-and-comers.  You always get credited as an influence but you never get to the top of the charts.  You’re basically the Neil Young of CSS.”
• I got a picture of Photo Matt as he was taking this picture.  This fact amuses me completely out of proportion to its actual significance.
• The ratio of Mac laptops to everything else at the conference was about 10:1, maybe higher.  I say “everything else” because I know of at least a couple of Intel-based laptops that were running Linux, not Windows.  Brian Alvey came up with the idea of inventing a glowing Apple-logo sticker that non-Mac users could stick on their laptop lids in order to blend in.
• While standing outside the Webmonkey party, I saw a guy ride up on a bike with what looked like a heavy metal pole over his shoulder.  He pulled to a stop, dismounted, and put his burden down while he locked up the bike.  I was completely floored when I realized that he’d brought his own bar stool.  Now that’s a self-sufficient man.
• I ended up at the Iron Cactus two nights in a row, and both nights I found myself shaking my head over the sign outside advertising low-carb margaritas. That’s right, folks, they take out the alcohol and pass the inflated profit margin on to you!  It’s kind of a brilliant sales tactic, really, and I applaud them for overcharging customers in an honest yet sneaky way.

Frankly, the whole low-carb mania is starting to seriously tick me off, as it did Nick Bradbury; and yes, I know people for whom it’s worked.  A cousin dropped 70 pounds and halved his cholesterol on Atkins, and my father has been very happy with the related South Beach Diet.  That’s no excuse for the herd mentality I keep encountering.  For example, Schlotzsky’s, whose sandwiches I love, now has low-carb options.  How’s that work?  They take away the distinctive sourdough bread (to use their own marketing phrase) and put the sandwich contents on a bed of lettuce.  Um, isn’t that just a drastically overloaded salad?

• SXSW04i Wrap-Up was published on Thursday, March 18th, 2004.
• It was assigned to the CSS and Speaking categories.
• There have been no replies.

As a followup to yesterday’s entry, I thought I’d share some details on what will be in Cascading Style Sheets: The Definitive Guide, 2nd Edition (now available for pre-order!).  Here’s the Table of Contents, or at least a core subset of it:

1. CSS and Documents
2. Selectors
3. Structure and the Cascade
4. Values and Units
5. Fonts
6. Text Properties
7. Basic Visual Formatting
8. Padding, Borders, and Margins
9. Colors and Backgrounds
10. Floating and Positioning
11. Table Layout
12. Lists and Generated Content
13. User Interface Styles
14. Non-Screen Media

1. Property Reference
2. Selector, Pseudo-Class, and Pseudo-Element Reference
3. Sample HTML 4 Style Sheet

Owners of the first edition will notice that the chapters have been rearranged a bit.  Thanks to the expansion of selectors in CSS2, it made sense to rearrange things so that they got their own chapter (which you can read in beta form from O’Reilly), and the parts about how CSS relates to document structure were folded into the chapter about specificity and the cascade.  The consolidation of floating and positioning into one chapter really helped cut down on redundancies, although that is the longest and most-enfigured chapter in the book.  (In second place, “Basic Visual Formatting.”)  “Table Layout” talks about how tables are laid out and styled, not how to do layout with tables.  The last two chapters are basically overviews with some detail, since user interface styles are almost certainly going to change radically in CSS3 and non-screen media support is limited or largely theoretical at this stage.  There’s still enough detail to satisfy, I think.

As for the other chapters, they’re largely the same as in the first edition in terms of topical coverage.  They’ve just been updated and expanded to match what’s in CSS2.1.  As an example, “Text Properties” covers everything that it did in the first edition, now updated for 2004; plus it adds information on text-shadow, direction, and unicode-bidi.

The technical reviewers for the second edition were Tantek Çelik and Ian Hickson, who were just as tough and thorough as I’d hoped.  Ian’s one of the people who pounded the inline layout model into my head until I got it when writing the first edition, actually.  I got similar treatment from both reviewers over the interaction of generated content with non-generated elements this time around, not to mention when I tried to figure out the value syntax for text-decoration.  It used to be simple, but oh no… they had to go makin’ it all fancy.

Anyway, I hope that will give some idea of what lies ahead for those of you who do me the honor of purchasing the book.

I occasionally toy with the idea of setting up a Cafépress store with CSS-related merchandise.  If anyone out there has bought stuff (particularly T-shirts and other articles of clothing) from Cafépress, kindly let me know what you thought of it in terms of quality and durability.

• Fishing For Style was published on Tuesday, March 9th, 2004.
• It was assigned to the Books, CSS, and Writing categories.
• There have been no replies.

This past weekend, the folks at O’Reilly and I wrapped up the final edits and adjustments to Cascading Style Sheets: The Definitive Guide, 2nd Edition.  The in-stock date is near the end of this month, so it ought to be physically sitting on shelves by the beginning of April, maybe sooner.  The page count listed on the O’Reilly page (as I write this) is an early estimate and too high; the actual page count will be closer to 550 pages.  There are a few reasons for this drop in pages:

• The support charts have been dropped.  When the first edition came out, it made sense to include that kind of information in an appendix, so we did.  As I recently wrote on www-style, the world is much different now, and the day of nifty support charts may well have passed.  In the CSS realm, anyway.  To even present a simple yes/no support chart for CSS2 would have been a dozen pages long, and a nuanced chart with notes would easily have run five times that long.  I still have notes and warnings about particularly egregious problems sprinkled through the text, though.
• The “CSS In Action” and “Look Ahead” chapters were also dropped.  There is plenty information available these days on how to actually use CSS, so we decided not to be redundant.  As for looking ahead, even a high-level overview of where CSS3 is headed could be a hundred pages long, and out of date the minute we printed it.  Better to wait and see where things end up than make a lot of ill-informed guesses.
• By rearranging the way information was presented, I was able to cut a lot of redundancies that bedeviled the first edition.  I also cut out some material that seemed important back in 1999, but has long since become irrelevant (like notes about what IE3 does or doesn’t do).
• The figure count has been scaled back.  There are still a few hundred figures throughout the book, but I went to some effort to combine several points into a single figure when I could, and not illustrate every little point I made.  You really only need to see so many examples of “boldface text,” you know?
• The text doesn’t spend time on things that were in CSS2 but aren’t in CSS2.1, and that nobody will likely ever support.  This means that some paged-media properties like marks weren’t described, and I didn’t waste time on the CSS2 marker-styling features since they will almost certainly die out and be replaced by a different approach in CSS3.  I did cover properties like font-size-adjust and text-shadow, but not in major detail.

So the second edition is an update of about 380 pages of the first edition, once you subtract out the stuff that was cut.  Every chapter of the first edition was reviewed and, in most cases, significantly overhauled even if it wasn’t expanded (for example, the Fonts chapter didn’t gain a lot, but it was still reworked to reduce the number of figures needed and to clarify some points).  There are four all-new chapters, five chapters with significant additions or revisions, and five more that were lightly to moderately revised.  So it’s practically a whole new book.

That’s even more true of the book I have coming out in mid- to late April from New Riders: More Eric Meyer on CSS, a sequel to Eric Meyer on CSS.  And when I say “sequel,” I really mean it: this is a collection of ten entirely new projects, so it is not a new edition of the older book.  You can own one without the other, although of course you should buy both!  Baby needs a new pair of shoes, after all.  (Okay, that’s a lie; she’s too little to be wearing shoes.  But you know what I mean.)  I’ll have more details as they become available.

• Making Book was published on Monday, March 8th, 2004.
• It was assigned to the Books, CSS, and Writing categories.
• There has been one reply.

I freely admit that I’m kind of a zealot when it comes to words and text—heck, this quiz classified me as a “grammar fuhrer.” (Note: the rating of “M” for the linked quiz may be too weak; “A” might be better.  The results you get may well offend you terribly.  Consider yourself warned.)  I love to read, and wish I could do it more often.  I enjoy writing, for that matter, because there’s a sublime joy in crafting the right sequence of words and creating the right tone as a result.  (Speaking of writing, I’ll have some things to say about that tomorrow.)  In what I regard as an exceedingly rare moment of lucidity on Rush Limbaugh’s part—perhaps he’d been off the drugs for a few days—he once said, “Words mean things.”  I absolutely agree, and not just in the narrow sense.  To me, the right words mean something far more than a string of communicative markers.  They create a meaning that is much greater than the sum of the parts.  The right words at the right time can literally change a life.

I say all that to frame what I’m going to say next.  The Man In Blue recently posted some thoughts on the use of text in Web design—or, more precisely, his opposition to its use for branding purposes.

By utilising run-of-the-mill text to render your identity, it makes it very hard to distinguish yourself from anyone else  delivering a message.  Granted, usage of plain text can itself be an identity, but I think that  Eric Meyer has pretty much cornered the market on that one.

I’m not sure if that’s meant as a compliment or a criticism, but it actually doesn’t matter.  I took it as a compliment, and I think the things I said above help explain why.  Still, I’m going to speak in some defense of using “plain” text for design.  Not a full defense, because Mr. Blue (a.k.a. Cameron Adams) is quite correct: branding is important, and visual identity is an important part of that branding.  As he says, Coca-Cola spends millions every year on branding.  I’m sure Pepsi does the same, as do a great many other companies.  As they should.  He goes on to say:

Although it might pain the purists, sometimes only an image will do.

He couldn’t be more right.  It makes a lot more sense for me to share a picture of Carolyn smiling at her mommy than it does to try to describe the same thing.    If I were in charge of Amazon.com or Wired or some other branded organization, there’s no way I’d replace the logo with plain text.  Besides, an img with alt text is as accessible as plain text—a little longer to download, but not enough to make a significant difference.

For me, I stick to text because I’m not a visual designer.  I don’t have a CD full of fonts that I can use to make my text look different, graphically or otherwise, and I don’t have the patience to search free font resources to find one.  It doesn’t make sense for me to spend time flailing toward what would probably be an amateurish result when I  can just style some text and move on.

But that doesn’t mean that I settle for the default presentation of text, either.  An example is the “Cut your costs…” text at the top of Complex Spiral Consulting’s main page.  The relevant bits of its CSS are:

font: bold 166% Arial;
letter-spacing: -1px;

Yep, just boldfaced largish Arial—but the negative letter-spacing pulls the letters together just a touch, and significantly alters the visual impact of the text, making it seem weightier than normal.  Conversely, a positive letter-spacing would spread text apart, giving it a more open feel.  Most visual designers grit their teeth over this kind of thing, because it’s the crudest form of kerning imaginable.  True enough, but it still has a desirable effect, and typically one that’s underexploited.

The other reason I stick to text is that it’s almost infinitely more flexible than raster graphics like GIF and JPEG.  If I decide to resize the “meyerweb.com” in the masthead, all I have to do is fiddle with a line of CSS.  For that matter, I do change the size of that text on sub-pages, just as I do the masthead itself.  I can also change the text color to suit the masthead graphic.  For every one of the 26 mastheads I’ve created (this week’s is #6), I’ve changed the text color to blend better with the background.  Doing this was, again, a change of a couple of lines of text.  It would be even better if RGBA color values were widely supported, so I could make the text colored and translucent, but never mind that now.  (Side note to Dean Edwards: how about adding RGBA support to IE7?)

And, of course, the user can resize text, which I regard as a benefit, although a lot of designers regard it with pure horror.  If I had the name of this site as a graphic, then in any browser except Opera, resizing the content display would leave the graphic text unchanged.  That bugs me.  If there were universal vector-graphic support, say for SVG, then I could use it to create any font-and-logo combination I was able to dream up (or hire someone to create for me).  Even with the widespread availability of the Adobe SVG plugin, it’s still not enough.  I know, beyond any doubt, that a Web browser will support text rendering.  I don’t have the same confidence about SVG or even Flash, both of which can be scaled.

So I stick with text.  Realize that this is not what I would tell a corporate client to do.  When I worked with Macromedia, I didn’t tell them that they should replace their logo graphic with plain text stating “Macromedia,” and it wouldn’t even have occured to me.  If I were to work with Adobe or Microsoft or Apple or Red Hat or anyone who’d established a visual identity based around an image, I wouldn’t even consider telling them to replace it with plain text.  I’d agitate for sensible alt text, of course.

But for this site, or for Peter‘s site—both of which are personal sites—I don’t see anything wrong with using text.  (Then again, I guess I wouldn’t, having a corner on this particular market and all.)  In a lot of ways, I think it’s preferable, reducing bandwidth consumption and server hits.

And, y’know… it’s text.  C’mon, everybody, sing it with me:

Text is natural, text is good Not everybody loves it But everybody should

Or, if you groove to an older, smoother beat:

I can tell you, darling, that it’s textual healing Mark up, mark up, mark up, mark up, let’s design tonight Wake up, wake up, wake up, wake up, text will do it right

Thankyew!  Try the veal.

• Textual Healing was published on Sunday, March 7th, 2004.
• It was assigned to the CSS category.
• There have been no replies.