Archive for ‘css’ category

Handcrafted Haiku Winners Announced

Well, we loved them all, and agonized over choosing two winners to receive a ticket to next month’s Handcrafted CSS workshop. But decide we did!

Winner #1 is @wilto, waxing poetic about a place we’ve all been, surely:

IE6 lives on.
Box model—and heart—broken.
position: fetal;

And Winner #2 is @squaregirl , who in three perfectly penned lines reminds us of the importance of validation during development:

Curly braces sound cute.
Until you leave one out. Oops!
I fracked my stylesheet.

Congrats to the winners! And thanks again to the fine folks at Campaign Monitor for sending them to the workshop. Which, by the way, is only a little over two weeks away. Spaces are being filled up, so grab a ticket and join us in Salem, won’t you?

New Charge Tee, New Shop

Charge TeeWe’ve printed up a new version of the popular Charge Tee. This time around, it’s a rusted battery on a Navy Blue, 100% cotton shirt from American Apparel. It’s also the first item in our newly relaunched shop.simplebits.com.

The fine folks at AcmePrints have been printing SimpleBits tees for us for years, and they’re now handling the order fulfillment as well. This will allow us to concentrate on more important stuff, like offering more designs, rather than packing and shipping shirts (even though we enjoyed that).

The shop itself runs on the excellent bigcartel, a simple, hosted shopping cart for independent merchants. We love it, and Meagan was even singing its praises while doing the CSS customization, which all means good things.

Stay tuned for more of the original Charge Tees, and some other new designs as we grow the shop a bit more.

Handcrafted CSS: The Workshop

Now that we’ve announced the book, we can also announce another exciting thing: Handcrafted CSS: A Day of Markup & Style will be a unique, one-day workshop presented by Ethan Marcotte and myself on September 14, 2009 at the Hawthorne Hotel here in Salem, Massachusetts.

You’ll get a copy of the book (the Video Edition, including the DVD), and we’ll present the content live, throughout four takeway-packed sessions, followed by Q&A. Breakfast, lunch and two snack breaks are also provided. And we’ll cap off the day with an after party at an awesome location to be determined.

The Hawthorne Hotel is located in downtown Salem, just 16 miles north of Boston. It’s also just a 10-minute walk from the MBTA Commuter Rail station which connects Salem to Boston in about 25 minutes.

This will be a unique opportunity to buy a book, then have the authors work through it live, with a chance to ask questions along the way. It’s sure to be a fun day — and we’re pretty damned excited about it.

Early-bird and student tickets are now available at a discounted price of $399 per person. Act quick! There’s limited seating for 100 fine people like you.

Oh, and interested in sponsoring the event? We’d love to hear from you.

Announcing: Handcrafted CSS

I wrote another book. It’s called Handcrafted CSS: More Bulletproof Web Design, and it’ll be published by New Riders next month.

I had help this time. The unstoppable Ethan Marcotte contributed an absolute gem of a chapter on the fluid grid. And I think it’s worth the cover price for the pages he authored alone. You might remember Ethan’s recent article on the subject over at A List Apart, and his chapter builds quite a bit on that, while tying it back into the book’s case study. And fellow beverage aficionado and bon vivant, Brian Warren, handled the technical editing.

Handcrafted CSS websiteThe book is largely a culmination of the talks I’ve been giving around the world over the last year or so. In some ways, it’s a continuation of Bulletproof Web Design, in that it was convenient to be able to jump right into examples and the core of what I wanted to write about. There are a lot of CSS books out there, and the last thing I wanted to do was just write another general overview.

So this one gets specific rather quickly. And the timing seemed right. The browser landscape is changing rapidly. Browsers are implementing new and evolving standards faster. It’s an exciting time to be designing for the web. Firefox 3.5 has just been released, and with it came a goodie bag of CSS3 properties that can now be utilized between Mozilla and Webkit-based browsers (as well as Opera). I’m using the term “progressive enrichment” to describe advanced CSS and CSS3 properties that work in forward-thinking browsers today. And that’s a heavy focus of the book.

A single case study for the fictional “Tugboat Coffee Company” was used as a common thread throughout the entire book, where progressive enrichment, reevaluating past methods and best practices and flexible, bulletproof concepts are stressed. Part of being a craftsman of the web is paying attention to the details that matter most, and the book is an attempt to share a collection of those details using current methods.

In addition to the book, I also recorded a DVD. A video crew from Peachpit came and set up here at the BitCave in Salem, and the result is Handcrafted CSS: Bulletproof Essentials. It covers concepts from my previous book and the new one, while relating all of it to the Tugboat design. There was also a ukulele hanging around the office and I managed to put it to good use as a background score. The video acts as a unique bridge between the two books, and either comes bundled in a Video Edition of Handcrafted CSS or by itself.

More info can be found at the book + DVD’s companion website and Twitter account, where Ethan and I will be announcing another exciting aspect of this project in the next day or so. Stay tuned.

Web Standards Solutions, Special Edition

It’s been a long five years since it was orginally published, but last month month a new Web Standards Solutions, Special Edition was released by Friends of ED.
book coverLate last year, I gave the manuscript a little freshening up, mostly reviewing things in the crop of browsers that have been released since the initial version. I’ll stress that this was not a large overhaul of the book (hence Special Edition rather than Second Edition), so if you’ve already read the original, or own it, you’re better off spending your dime on another book.
But while it wasn’t a giant update, it was nice to give it some extra attention, and pass it through through tech editing, copy editing, compositing and proofreading cycles once again. In the end, I’m really happy it just made the book that much more solid for folks that haven’t read it—and hopefully still a good introduction for those getting started with semantic markup and CSS.
In other book news, I’ve been toiling away on something brand new, and look forward to sharing much more about that very soon.

How I Might Deal with IE6

Eight years ago (almost to the day), Jeffrey Zeldman wrote, To Hell With Bad Browsers, signaling the dawning of “The CSS Age”. Explaining how the use of @import for referencing stylesheets is ignored by Netscape 4, was an important step in shedding away the problems related to supporting an ancient browser. Eight. Years.

Completely ignoring a browser in terms of CSS is a wonderfully freeing thing. It certainly can’t be done on every site. The important thing to remember is that it’s a site’s statistics that should determine what level of support you decide to offer.

Later, IE5/Mac became a problem. I began giving it the same “talk to the hand” treatment that NN4 was receiving by using the backslash comment hack years ago:

/* import stylesheets and hide from ie/mac \*/
@import url("screen.css");
/* end import and hide */

Now, in 2009, IE6 has become the source of our frustrations — and for certain sites, giving it an unstyled, naked view is exactly what I want to do. Alpha-channel PNGs, min-width, max-width, rendering bugs galore — there are plenty of sites I’ve designed and maintain where the IE6 stats are low enough to drop the axe and move on. Now is the time!

So what’s the easiest solution? I was chatting with Ethan about using conditional comments to hide styles from IE6 only, and after a bit of Googling, we found Simon Clayson’s article, where he cleverly does the following:


<!--[if !IE]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css" />
<![endif]-->

This hides all styles (assuming they’re all contained within screen.css) from all versions of IE, but then re-applies them for IE versions 7 and greater. Lucky visitors that are using IE6 or lower will get an unstyled view of the site, just like the lucky visitors using NN4 have been getting for close to a decade.

Simon’s method also serves up a bare-bones CSS file specifically for IE6, but I think that’s being too polite :) Another real-world example of this method in practice, is The Rissington Podcast, which cleverly serves an IE6 stylesheet complete with Comic Sans.

What’s nice about this approach is that you’re not having IE6 import all your styles, having to worry about overriding them later. You could serve IE6 with a minimal stylesheet starting completely from scratch. Or none at all.

Is it a bit hacky? Sure. But in certain situations, not having the burden to worry about IE6 seems well worth it.

Have a better solution? Let us know in the comments.

Update: Commenter Daniel James might’ve simplified things down to a single conditional comment, like so:


<!--[if gte IE 7]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css" />
<!--<![endif]-->

I’ve tested in Mac: Safari, FF3, Opera and PC: IE6, IE7, IE8beta, FF2. More testing required, but this looks very promising.

Build Society, February 2nd

Clear your schedules, Boston-area web geeks! An extra-special joint event with fellow North Shore pals, Build Guild and the Markup & Style Society (new site coming soon) are co-hosting a meetup here in Salem on February 2nd. Special guest Eric “Rock Horns” Meyer will be in town—and when Mr. Meyer is in town, you gather up the troops and celebrate with frosty beverages and good times. You just do.

As usual, my M&SS cohort Mr. Marcotte has written up a far better summary of the night’s events. As has Mr. Meyer.

Hope to see you here in the Witch City for what is sure to be a wonderful night of markup, style and guilding. If that makes sense.

Use the Best Available Ampersand

I love ampersands. And interest in this quirky character seems to be on the rise as of late. Case in point: Just last week, I purchased not one, but two t-shirts adorned with nothing more than an ampersand. That’s telling, no?

For much of last year, I had a little portion of a presentation dedicated to using CSS to serve up alternate, compelling ampersands. It’s also something I’ve done here on SimpleBits for quite awhile in our tagline. The simple little concept comes from one of Robert Bringhurst’s guidelines in his seminal typographic bible, The Elements of Typographic Style.

Guideline 5.1.3 offers this little tidbit regarding ampersands:

In heads and titles, use the best available ampersand.

Bringhurst explains that frequently the italic version of an ampersand is more decorative and interesting than its roman counterpart, and goes on to suggest:

Since the ampersand is more often used in display work than in ordinary text, the more creative versions are often the more useful. There is rarely any reason not to borrow the italic ampersand for use with roman text.

So why not apply this to the web? We can use CSS to cleverly specify a list of our favorite ampersands, with the reader getting the best one available. We’ll first apply a class wrapped around the ampersand we’d like to beautify like so:

<span class="amp">&amp;</span>

And we’ll build a list of cool italic ampersands that readers might have installed by default, while also specifying the italic version:

span.amp {
  font-family: Baskerville, Palatino, "Book Antiqua", serif;
  font-style: italic;
  }

We can weight our list, putting our favorites near the front, understanding that the reader may get one or none, depending on which operating system they’re on, and if they have the font installed.

Thanks to the excellent efforts of our newly-hired help, here are some charts showing some of the more interesting italic ampersands available as default fonts on Mac and Windows. These’ll help get you started building your own awesompersand list.

These charts are by no means comprehensive, but were created from the default lists from each operating system. Pre-bundled or third-party applications may install other cool fonts that could be common enough to use as well. If you have a favorite that’s not listed, let us know in the comments.

Mac OS X (10.5)

OSX ampersands

Windows XP

Windows XP ampersands

Windows Vista

Vista added several new fonts, all beginning with the letter ‘C’. What’s nice is that Constantia nicely matches Palatino on the Mac and Palatino Linotype on Windows XP.

Windows Vista ampersands

For more Bringhurst-to-CSS goodness, see Richard Rutter‘s The Elements of Typographic Style Applied to the Web project. And be sure to grab Meagan’s wallpapers to ampersandify your desktop.