CSS Archives
58 entries
Handcrafted CSS: The Workshop
Posted at 9:22 AM
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
Posted at 1:35 PM
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.
The 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
Posted at 9:25 AM
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.
Late 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
Posted at 11:54 AM
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
Posted at 9:40 PM
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
Posted at 10:14 AM
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">&</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)
Windows XP
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.
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.
Decision or Bug?
Posted at 10:58 AM
I just logged a bug report after doing a little testing with the IE8 Beta. Overall, the progress and standards commitment in the latest effort is fantastic and exciting. Hats off to the Internet Explorer Team.
There’s one lingering decision that appears to have carried over though, and it’s an important one. I say “decision” since, by now, there clearly must be a reason why it’s still there. I’m also reminding myself that this is still a beta release. But the earlier we chime in on things, the better, right?
Here’s what I logged:
As with previous versions of Internet Explorer, the IE8 Beta also fails to resize text using the “Text Size” tool when fonts are sized in pixels. Most would consider this a bug, where the user should be able to trump any size specified by the page author, regardless of the unit specified. I remained boggled as to why this has been a consistent design decision.
It creates an accessibility issue for readers with poor or low vision, while making pixels a less than desirable choice for the page designer. In an ideal world, the designer should be able to specify fonts in any unit he or she desires (px, em, percentage, etc.) while the reader should have ultimate control over the size, using the browser’s controls. IE’s “Text Size” tool would appear to be broken when a reader attempts to adjust fonts on a page where fonts are sized in pixels. Surely confusing.
Thanks for listening, and keep up the excellent progress!
Disagree? I’d love to hear it :)
Safari 3.1 Develop Menu
Posted at 10:54 PM
The just-released Safari 3.1 has a new “Develop” menu (check the Advanced tab in Preferences to activate it). I usually rely on Firefox’s Web Developer Toolbar for testing and diagnostics — but preferring Safari as my general browser of choice, I was happy to see some native tools baked-in.
I often run these “bulletproof integrity tests” after finishing an initial design: disabling styles, javascript and images to check for readability and flexibility. Favlets and Firefox extensions have made this easy for years, and Safari’s new Develop menu has several of these. Excellent, I said.
It also ships with a Web Inspector (think Firebug), which allows you to break down a web page by listing it’s various files, drilling down to see computed styles and DOM info. At first glance this looked exciting and very promising, with “editable CSS” promised in the release notes. Unfortunately, you can’t edit the full CSS file (a feature we’d all love, and one that’s found in other developer extensions), but rather choosing “Inspect Element” by right clicking on a web page’s element will activate a semi-confusing-but-comprehensive status on that particular bit of code selected. I was initally confused by choosing “Inspect Element” on one of the CSS files in the list view in an attempt to edit it, only to find that the Inspector was in fact inspecting itself (which is apparently built with HTML and CSS). Heh, recursive inspection. Recurspection. Inspursive.
It seems I wasn’t the only one confused, with a chorus of Twitterers wondering the same thing: how the heck can I edit the CSS? The answer is by choosing “Inspect Element” from the browser window (a right or ctrl click), then double-clicking a property from the Styles sidebar in the Web Inspector — but not in the “Computed Style” box that’s also in the sidebar.
So, it’s a start. I’d love to see full live editing of CSS and HTML in a future version — but it’s nice to see the beginning of all of this built right into the browser.
Marked Up & Styled
Posted at 12:25 PM
We held the third gathering of the Markup & Style Society last night (a local Boston-area meetup for web geeks that Ethan Marcotte and I started a while back). This one was different and contained more awesomeness, for a variety of reasons.
The kind folks at Filament Group hosted the event at their downtown Boston studio. The incredibly generous Freshview donated 18 pizzas, beer and wine for all 50 attendees. Freshview are makers of Campaign Monitor, the popular email newsletter campaign app, as well as creators of useful tools and resources for newsletter designers. Thank you thank you, Freshview.
Adobe donated two copies of CS3 Web Premium that we raffled off along with a few books at the end of the night. So we knew at least two people would go home happy no matter what happened.
While previous meetups have all been about beer and socializing, we may have surprised people with four short talks. A free, mini conference if you will. Ethan gave a brilliant presentation on some tricks he’s enabled in his freakishly bulletproof, fluid layout (Ethan’s write-up). I rambled on about “Gridlasticness”: taking an em-based approach to a strict grid. Josh Porter talked about craftsmanship as it relates to the web — a topic near and dear to my heart. It was sprinkled with “right on” moments and quotes like this, regarding the Shaker design philosophy:
Don’t make something unless it is both necessary and useful, but if it is both necessary and useful, don’t hesitate to make it beautiful.
Scott Jehl closed the show with an excellent talk on how progressive enhancement plays a big role in the projects he tackles at Filament Group. Read more about Filament’s process over at their newly launched lab (Filament’s Maggie Costello Wachs’ write-up).
All in all, ‘twas a great night, and it made up for seeing just one single panel at SXSW just days earlier. We’ll have to do it again soon. Blatently tooting our own horn here, Patrick Haney dug it, evidenced by his tweet:
Really felt like I got more out of the four short talks tonight at M&SS than I did at a week of SXSW
Thanks to the speakers, sponsors and especially Filament for the venue. We’ve also been planning on adding more formal workshops or full day conference-style events to the mix in the future. New England needs more of this, methinks. Stay tuned.
Update: Jenny Bergman has posted some wonderful photos of the event. Thanks, Jenny!
Markup & Style Society
Posted at 4:53 PM
Ethan and I are pleased to announce another meeting of The Markup & Style Society next month. It’s a semi-regular, casual meetup for New England area web geeks. This time, things are a little more interesting, and even more secretive. Here are the details:
We need to limit the number of guests due to space, and we’ll be keeping track of first 50 people who RSVP via Upcoming. Unfortunately only those folks will be able to attend, so mark your calendars early.
A fun and interesting evening is promised, with after-meetup drinks at a local pub to follow (that’s really the best part, isn’t it?). We’re also looking for a friendly sponsor to cover pizza during the event. Interested? Let us know and you’ll be forever remembered as “that awesome company that gave us pizza that one time at that thing a while back”.
Gridlasticness
Posted at 11:31 AM
After a brief period of unstyledness, we’re back with a realign and overhaul of simplebits.com. Aesthetically, it’s not much of a departure from the previous design — but under the hood is new markup, new stylesheets and a strict grid layout based on ems. After moving into new physical digs last month (more on this later), it only seemed appropriate to spruce up the virtual ones as well.
As usual, the overhaul started innocently enough, with a little tinkering here and there that snowballed into tearing the old CSS out, while the site embarrassingly stood naked for a week. But the challenge of creating a em-based grid was too tantalizing (the second time I’ve used that word in as many days).
A few notes when trying to create a grid layout using ems:
- Using the
62.5%method for sizing text has the advantage of setting gutters, borders, etc. at values of ten (e.g.1em=10px). - Remember to avoid specifying widths and font-size on the same element (or at least be consistent about it).
- Realize that when adjusting text size in Safari, the grid will only stay perfect on a random bump. Firefox seems to stay intact at all times. I assume this is due to a rounding discrepancy.
- Understand that when building an already-wide layout, it’ll get really wide, really fast. That’s OK. Wide is the new drop shadow.
- Have plenty of coffee at hand.
A large motivation for this tinkering had to do with the Notebook entry styling. I’ve tweaked the MovableType templates to enable posting of quotes and photos as well as long entries and QuickBits (links). A “tumblelog” as the kids would call it. That doesn’t mean there’ll be 100 posts a day — but it does mean (I hope) more posting in general.
Now if you’ll excuse me, there are several dusty corners to clean up around here.
A Type In the Right Direction?
Posted at 11:35 AM
We hear news that Webkit now supports the @font-face CSS property, enabling the designer to specify downloadable fonts in their web pages. I can remember getting excited about this back in June after hearing Håkon Lie talk about it during @media London (check out Richard Rutter’s thoughts on this as well). Legal and security issues will prevent us from using most fonts of course, but I like to focus on the positive here. There are some perfectly useable, free fonts out there — and more choice is better than little or no choice, right?
I wholehartedly agree with Jon Hicks, who writes:
Personally, I’m just happy that we’re reaching a point where we’re having this conversation!
Right! What’s important, I think, is that this helps move things along. Perhaps it will stoke the fire in terms of a real conversation between type foundries and browsers on how things could work while protecting the font maker. Then again, maybe it won’t.
Stephen Coles at Typographica writes something I’d like to counterpoint:
In general, web designers aren’t typographers. Their specialty is in the realms of interface, hierarchy, and navigation. Their training does not include making decisions about what typeface to use for long passages of text.
While this certainly could be true for many, it doesn’t mean that web designers can’t become good typographers — especially when given the chance with more of a variety of typefaces to work with. The worry that all web pages will be suddently ruined with crappy free fonts everywhere overshadows the fact that some good can come out of the ability to at least have a choice to use those crappy (and/or potential useful) fonts. Give us all a chance, eh?
For instance, and maybe this is fresh on my mind after releasing a *cough* icon-based pixel font *cough* just days ago, but imagine using a downloadble dingbat font for displaying icons instead of GIF or JPEG images. Suddenly text and icons become truly scalable together. Just a small example — but one I’d love to experiment with.
Markup & Style Reminder
Posted at 11:04 AM
Just a quick reminder of next week’s meet-up of the Markup & Style Society. Ethan and I have occasionally put together these informal gatherings in Boston for the past few years. They’re always a good time, and we’re always amazed by the turnouts.
So join us next Wednesday the 26th at Boston Beer Works on Canal. The format of these meetings is pretty simple: we meet and enjoy beverages for a few hours. That’s it. Perhaps we need a secret handshake or other ceremonial traditions. Those will evolve in time. We do have plans to expand this a bit in the future, and would love any ideas on a venue around town to hold a more structured meeting.
Lastly, there are a few more pinſ available if you don’t have one yet. Hope to see you fellow New Englanders there.
Middle West
Posted at 9:59 AM
I’ve been meaning to write up some thoughts on last week’s An Event Apart Chicago. It was my first trip to the city in the middle west that sits on a big lake. Hot dogs were eaten. Cheezborgers were inhaled. Deep dish pizza was shoveled. I was inflated. Chicago is without a doubt a food city — but how the heck does anyone stay under 300 lbs. there?
The event itself was excellent. Of course it was excellent. Whenever you get a bunch of great speakers and cool attendees under one roof for a few days, that’s the way it’s going to go. But there are other reasons why this particular show was a success.
In my opinion: one track continues to rule. It rules because you don’t have to decide where to go and what to miss. But it also rules because the conversations in the hallways and pubs can be centered around the same sessions. There’s no “ah, I missed that one because I saw ______ instead”. There’s a complete shared experience between all attendees, and that’s a very good thing.
On the opposite end of the spectrum is SXSW, which will have approximately 23,867 panel sessions next year. Maybe we’ll be able to talk about one of them together. Maybe we’ll also bump into each other at that party on Sixth. Or more likely, we’ll leave feeling like we’ve missed the real conference.
Another key to the single track at AEA: breaks. And a lot of them. An hour is a long time to sit, and a nice break after every session really helps. It also helps in that it gives more opportunity to chat with people. And you can chat about the session that just happened while it’s fresh. It seems obvious, but not every event is structured like this.
I’m bummed I missed Liz Danzico’s The Seven Lies of Information Architecture talk. But I was busy freaking out about my session that immediately followed, going over slides up to the last minute, as usual.
Derek Featherstone wowed us with a semantically rich crossword puzzle styled with CSS.
A highlight was Coudal’s closing keynote, where he talked about the balance between work that pays the bills and the personal projects that are exciting, fun and if you’re lucky can also pay the bills. A lot of what he was saying hit close to home — the idea that maybe we all don’t have short attention spans. We get inspired and have those moments of sheer excitement when diving into something new. I liked that Jim said this was OK. See the hilarious aforelinked film that supplements this.
It was a quick trip, but luckily was able to squeeze in a river boat tour of downtown Chicago with friends old and new. The architecture is incredible, and sitting on a boat floating through the city is my kind of sightseeing. From the river, one can take in the hundreds of skyscrapers that pepper the riverside. Just amazing.
Photos were taken by me and by many others.
Bulletproof Web Design, Second Edition
Posted at 10:04 AM
On bookstore shelves today (I hope) is something I’ve been toiling over for the past few months. Bulletproof Web Design, Second Edition is a refresh of the book I wrote for New Riders in 2005. I’ve been humbled by the response of the first edition, and have enjoyed talking about the principles described in the book at conferences and workshops over the last few years. So it was only fitting to give this little blue book a tune-up under the hood.
This isn’t a giant update nor a new book entirely. Rather, it brings the examples in line with Internet Explorer 7 (which wasn’t released when the first ed. was published) and adds several more examples based on ems (which were sorely lacking from the original book). There are of course errata fixes and nips and tucks throughout as well, and about 30 additional pages were added in total. All in all, I’m happy to have the book be all the more solid and relevant.
On the surface, writing a second edition of a book seems like an easy little project. One that won’t be too much work, won’t take long, and can easily fit in between other activities. But it’s not like that. It’s like writing another book all over again (even though it’s not another book and a large portion of the text is the same).
I find the actual writing of a book the easiest of all stages. It’s the editing, the back-and-forth, the endless checking and double-checking of Word docs (Word!) and then PDF files. Reading comments, checking comments, adding your own comments. “Should this be bold or code font?”. All of this is necessary of course. But my goodness it’s just as time consuming as the first go-around.
But like anything that takes time and effort in life, you quickly forget the pain and maybe even someday agree to do it all over again.
While today is the official publication date, Amazon is still taking pre-orders only. I’ve yet to see an actual copy myself, so there could very well be a slight delay.
An Event Apart Boston
Posted at 12:37 PM
Don’t wait for An Event Apart to come to your city — just make plans to catch the next one wherever it is (Seattle is next). AEA Boston was probably the first two-day, single-track conference where I felt like every session was extremely valuable. I came away from each presentation either inspired or educated (or both). The easy, 20 mile commute to Boston didn’t hurt either, and having Kerry and Jack see me speak for the first time was fantastic (at one point up on stage, I could hear “Dada!” from the back, and I’ll tell you … that calms the nerves).
I had fun talking about “Interface Design Juggling” — a potpourri of color, typography, favicons (yes, favicons!), microformats and bulletproofness. This was the first run through of this particular set of ideas, but I think it went pretty smoothly. I was relieved to hear several people thank me for devoting time to favicons — a fun topic that I think deserves more attention. And I’m looking forward to expanding that segment in the future.
The latest updated versions of the slide deck can be found here (in PDF form) for those that were in attendance. As usual, they might not make sense without the commentary — and more importantly some of the transitions are muddled into a single slide (Keynote kept crashing when I tried to export each transition into its own slide).
Thank you to Jeffrey and Eric for inviting me to speak — it was quite an honor to share the bill with such an amazing group.
AIGA Redesign
Posted at 11:09 AM
This morning, AIGA (the professional association for design) relaunched with a shiny new design by Happy Cog. I had the pleasure of taking Jason Santa Maria’s brilliant designs and turning them into semantic XHTML and CSS templates that could be plugged into a custom CMS built by Thirdwave (AIGA’s technical partner). Magic and fun ensued.
Every project is a learning experience. But working with Jeffrey and Jason for a client like AIGA, well that’s a whole new level of awesomeness. One could (and should) study Jason’s molecule-level of detail in typography (using just two web fonts and a splash of Interstate via the venerable sIFR). It was a fun challenge getting things right using CSS. I hope I’ve come close.
Congrats to AIGA for renewing their digs with a smart, readable, beautiful design — and a big thank you to Jeffrey, Jason and Happy Cog for allowing me to pitch in and help with this.
Read more about the redesign:
- Jeffrey Zeldman: Happy Cog redesigns AIGA
- Jason Santa Maria: AIGA Redesign
- Happy Cog: AIGA Website Redesign
And a special geek note: events listed on AIGA’s homepage are marked up with hCalendar.
Do the Collapse
Posted at 1:44 PM
“Pretty soon you’ll be using your iPhone”, said the attorney in the elevator just five minutes ago. He’d glanced at me checking things on my (now terribly outdated) Blackberry Pearl. Everyone’s talking about the iPhone. No, everyone is talking about it. Just goes to show how big an announcement it really was.
There are so many thoughts about this thing, but rather than add to the noise, here’s one I hadn’t yet seen mentioned: with a reliable browser on the iPhone (Safari) and all that it brings in terms of standards support, JS, DOM, etc., will we start looking closer at resolution dependent layouts (or other methods) for sites that would or could function as well as their larger screen counterparts?
We’re essentially talking about a fully-browsable web and everything that comes along with that in Safari. Just on a smaller screen. I realize that already exists to a certain extent with Webkit on the Nokia, Opera, and probably others, but the typical screen dimensions on a mobile phone are tiny. Seeing Steve Jobs turn the device and browse “widescreen” was eye-opening. That extra horizontal space could really increase the readability of non-mobile-specific sites as is.
The vulcan-death-pinch-squeezy thing for zooming looks great, mind you. Fluid layout for screens this small isn’t optimal, while multiple columns could just get too narrow (in the absence of min-width) — but I could see where leveraging the browser to adjust layout based on screen resolution could make things interesting in certain situations. And it’ll of course be fun to find out what this all means.
Free vintage SimpleBits sticker to the first person who names (without Googling) the band for which the title of this post is named after.
Way #24
Posted at 9:23 AM
For the second year in-a-row, Drew McLellan has put together another excellent 24 Ways — an advent calendar of helpful web articles written by fine folks from all over the web.
To cap off this year’s set, I’ve contributed Gravity-Defying Page Corners, a simple little trick for adding dimension to a plain ol’ box. It also might the first (and after reading you’ll probably be thinking “hopefully last”) web tutorial written in verse. It’s corny for sure, but fun to write and hopefully read. Many thanks to Drew for wrapping up 48 presents to us all.
Microformats for Designers
Posted at 10:57 PM
In a little less than two months, I’ll be heading to Vancouver to speak about “microformats for designers” at Web Directions North. It’ll be a fun topic, and I’m starting to put together the material. I’m looking forward to talking about microformats from a designer’s perspective, including a little bit about the logo development, the implementations over at Cork’d (and the unexpected cool things that came out of that), as well as applying CSS to microformats.
But I’m also looking for help. What are some interesting things happening with microformats and design? Know of any great examples, visual experiments, etc.? Here are a few to get started:
I know there’s a lot happening out there, so let’s hear about it. And thanks!
Re-Brand New
Posted at 8:41 PM
For the first time ever, SimpleBits has a logo! Roughly six years ago, I took a stab at creating an isometric set of three boxes (cardboard, to be specific). It was really an icon — and one that sat in the header alongside my personal site at the time, the now-defunct cederholm.org. Over the years, it’s always been there, and I’ve probably overdone it in terms of branding: I put the boxes everywhere. It became the brand. But it was always awkward, and highly inflexible. It worked terrible in print, where at small sizes, the pixelated blocks looked more like botched clip art.
Several months ago, I finally started on a new logo design — something I’d been meaning to do for years. It went rather quickly, playing with four curly brackets set in Avenir that created a frame around a hand-drawn cube (vector this time!). I finally had something I didn’t hate the next day. I’m excited to have a mark that’ll be flexible going forward, and it was crucial for me to create one that could be any size, or color (even looking intact using a single color).
I owe Greg Storey thanks for suggesting Whitney for the logo’s type, after I realized that the previously-utilized Triplex just wasn’t working.
It was the logo refresh that forced me to rework the site design as well. I’m not one to change things for the sake of changing things, but the new logo was a good excuse to update the templates as well. And what you see now is the result of several weeks of tinkering.
Much of the structure and layout of the site remain the same. Nothing earth-shattering here. This time around, I’m trying out an elastic em-based layout. If you’re unfamiliar, try resizing the text in your browser to see what happens. For this particular site, I think it works well. If I had the need/desire/requirement for an additional column, then I would’ve explored other fluid or variable fixed-width options. But for this simple, two-column set-up, I thought it’d be interesting to try something with ems.
I’m hoping the revised logo will help swing the rest of the company forward. I have a lot of ideas and things in mind for the future, and this is merely step #1. Here goes nothing. But first, new business cards need ordering.
Educated
Posted at 10:43 AM
There’s a myth that colleges and universities are teaching antiquated web design skills: table-and -spacer-gif-ness, FrontPage 98, etc. Actually, I don’t think it’s a myth — it’s actually happening out there. So after touring Boston University’s Center for Digital Imaging Arts yesterday, I was completely surprised. CDIA offers an interactive design program with an emphasis on CSS, web standards and hand-coding — and it’s right in my own backyard.
Jeremy Osborn, the program’s Director, mentioned that, while BU offers the resources and infastructure of a large university, CDIA is largely independent and run much like a startup — adapting and changing the curriculum as the techniques and methods out in the real world do. I found this approach pretty fascinating, and it’ll be interesting to see how their program evolves along with the web itself.
I’m hopeful there are other programs out there in other states and countries that are offering modern skills for budding designers of the web. Leave a comment if you know of any.
Also, if you’re in (or planning to be in) the Boston area, have an interest in teaching web design, and have the skills to guide the next generation of standardistas, contact jeremy [at] cdiabu dot com. They’re expanding fast.
London(e)
Posted at 9:47 PM
About an hour into the flight to London from Boston, I spilled a full glass of cranberry juice in my lap. There are several reasons why this was unpleasant, and they all include the words “embarrassed”, “sticky” and “no, I didn’t just pee my pants”.
I’ve now returned from @media on Father’s Day. It was a great trip despite the soggy flight out, and it’s really good to be back home with the family.
Many thanks to Patrick for inviting me to speak. I think it went just fine, and I especially enjoyed the questions at the end of the talk. We watched England win the World Cup match the previous night, so I knew there’d at least be smiling faces in the audience. For those that attended the session, I’ve posted the presentation slides (20MB PDF). Warning: they won’t be of much use without the commentary.
It’s always fun meeting new faces for the first time at these conferences, and @media was no exception. It’s the genuine friendliness of the people in this community that never seems to wear out. Fun times are a given. Wish I had the time/energy to list them all here, but it’s late. I also wish I had taken more photos, but what I did take are now up on Flickr.
Update: I forgot to mention, I successfully spent the torn note at a hotel pub after the @media party. Either my taping job was superb, or it was dark enough to go unnoticeable. Whew.
Pairing Wine and Microformats
Posted at 3:34 PM
While working on Cork’d, I realized this was a perfectly fine excuse to implement some microformats. What goes great with a nice 2003 Pinot Noir? Meaningful markup, naturally.
We’re currently using three microformats on Cork’d:
- hCard (for member profiles)
- hReview (for wine reviews or “tasting notes”)
- rel-tag (for indicating tag links)
Our implementations aren’t perfect, but it’s a start. The rest of this article will talk about how we implemented hReview for member-entered tasting notes (example) and specifically how I used CSS to style the markup.
Inside the Net Interview
Posted at 11:55 AM
Chatted with Amber Mac and Leo Laporte last evening, and the resulting conversation (roughly 40 minutes) is now up and ready for consumption in the form of Inside the Net Episode 19.
It was an honor to be on the show, where topics included SimpleBits, web standards, books, current stuff that’s happening, iterative app building and other hopefully interesting things.
Fence Riding Once Again
Posted at 2:07 PM
Apparently the fixed/fluid-width toggle feature here at SimpleBits was a popular one. The latest realign bid farewell to the option, instead settling on a centered, fluid-width layout with a conservative max-width applied. For those that requested it, the ability to toggle between fixed and fluid is now back. There are a few reasons I decided to add it back in:
- Well, you asked. Actually, I don’t usually cave in to reader demands, hence my recent useless-but-riveting articles regarding oatmeal cookies and (of all things) the weather.
- It’s so dead-simple to implement. Well, after reading this it should be.
- Choice can be nice. Since
max-widthisn’t currently supported by all browsers, giving those readers an easy option for readable line-length seems to me a Good Thing. - It’s fun to play with. Along the same lines as twirling a pencil in your fingers like the drumstick of a spandex-wearing drummer from the 80s.
Seven
Posted at 9:22 PM
I have yet to download and install an IE7 beta, but it sounds like it’s actually time to start paying attention to the latest release (Beta 2 Preview). We’re hearing reports from MIX 06 that the browser is essentially done in terms of CSS implementation:
Really interesting stuff from the above links. I’m impressed with what we’ve heard regarding the now-standards-aware IE team. On the flip-side, Roger Johansson brings up an excellent point: whether we’ll need a new way to self-clear floats in IE7.
Wow, this is a bit frightening, as I’ve been using the easy clearing method extensively, finding it to be pretty rock solid and predictable. It’s especially handy to use this to group components that use complicated floats and most importantly keeping them independent as self-contained, bulletproof “modules”. Being self-contained means they’re not dependent on subsequent elements in order to clear, and can then be moved around at will. Handy stuff.
So, it appears we’ll need a way to self-clear floats in IE7 that doesn’t use the still unsupported :after pseudo-element and the now fixed height: 1%; trick that previous versions of IE/Win so lovingly accepted. Here’s hoping there’s an alternative out there (aside from floating the container among others). I’m sure there will be, but even then this particular method would now feature 3 different declarations in order to work across browsers (actually add a few more in if you’d like IE5/Mac to work).
Update: Roger has posted an update, where a solution using display: inline-block; instead of display: inline-table; seems to do the trick for IE7. It’s a tad more complicated as to why this works, so be sure to read Claire Campbell’s informative write-up.
Arkanoid Edition
Posted at 6:05 PM
Another year, another realignment. What started out as a long-term desire to take better advantage of the footer (putting content chunks that were previously in the sidebar down near the bottom) quickly turned into more of a CSS refresh. This version is dubbed “Arkanoid Edition” (coined by Ethan and will make sense to anyone that spent their afternoons at the arcade in the 80s).
There are too many dusty corners to clean up, and so there very well might be some areas that still need attention. But somehow this feels more comfortable right now. The colors are toned down a bit, columns feel a bit more readable, etc. Surely not everyone will be a fan, but such is the life of a web site. Change is good. But it can also be disorienting.
Boxy, but Nice
One of the struggles with the SimpleBits logo is that it’s not a logo at all. It’s an icon. And works terribly in print unless it’s enlarged properly. I’ve debated changing the logo, always settling on maintaining the brand, and instead embracing its pixellated charm. Hence the square, blocky treatments that will likely warm the hearts of 8-bit fans and yet turn away the warm-and-fuzzy brigade.
Fluidity
I’m no longer straddling the fixed/fluid fence! Previous versions of this site featured a little toggle up in the top right corner enabling you to switch between a fixed or fluid width by means of a little Javasript and an alternate stylesheet. How diplomatic. With this new design, I thought I’d try a centered, fluid layout, using left and right padding on the body using a percentage value. That coupled with a conservative max-width set at 900px makes for a wider-but-not-too-wide solution. If only max-width (and min-width) worked in IE (aside from the Javascript fixes that exist).
Hiding from IE/Mac
I’ve also decided to intentionally hide all CSS from IE/Mac this time around. It’s not that it would be impossible (or even that difficult) to get this particular design working. It’s just that, for this site, it’s time to move on and have one less set of hacks to worry about.
What’s great, is that it’s dead simple to hide CSS from IE/Mac using the commented backslash hack just before importing your styles. Here’s my main stylesheet, screen.css, which imports the master styles as well patches for IE/Win.
/* import stylesheets and hide from ie/mac \*/
@import url("master.css");
@import url("ie.css");
/* end import/hide */
IE/Mac won’t get any of it because of that backslash at the end of the opening comment. And this is certainly OK for SimpleBits. Your site’s statistics may vary.
Posterity
Archived for posterity, and a comparison for those arriving here today for the first time, is a screenshot of the previous design.
A Tiny, Subtle Shift
Posted at 8:49 PM
As with anything that you do frequently, patterns emerge. Certain choices become comfortable, unrequired of a second thought. Such is the case for me when choosing colors for the web. There have been certain hex values that I’ll gravitate toward: #eee, #ddd, #ccc, #999, in the grey family, for example. I know what each of these will accomplish for me and how they play with each other before a stylesheet is created. I’m sure you have your favorites and old standbys as well. I fall into using and reusing these values because they work like a trusty wrench.
But it’s fun to cast those aside (at least temporarily), changing things by an extremely small measure. At times, it can mean all the difference in devising something fresh, new and different.
This happened while working on a recent project. Instead of combining my usual #eee, #ddd, and #ccc, I instead settled on combining #f5f5f5, #e5e5e5, and #d5d5d5. I know, this sounds completely trivial, doesn’t it? I mean, the difference is so damn subtle, it’s liable to go unnoticed by the average user, not to mention indistinguishable on varying screen types. And on top of that, they’re all far from being web-safe hues. But all that aside, for me at that moment, the slightest change made all the difference in making this particular project stand on its own. A temporary step outside the familiar — even if that step is purely the benefit of me, as the designer.
The main point here being: sometimes a tiny, subtle shift in the way you do things can be all it takes for things to seem new, exciting and right again (perhaps a micro-realignment?). This same philosophy can of course be applied to the non-web world. Just a few hours ago, Kerry and I were tossing around statements like, “we need a new house” or “we need to put on an addition”. Later, we started hypothetically shifting furniture around in our minds, and suddenly there was this renewed excitement in making something old, new again. A tiny adjustment that (for the time being anyway) quenches an urge for broad, sweeping changes.
Next week? I’ll be back to #eee. Maybe.
CSS Patches
Posted at 10:47 PM
The term “hack” implies that a legitimate solution to the problem exists. Yet, in order to save time, or perhaps due to lack of knowledge, a sloppy fix is applied to just get the job done. “Let’s hack at it, ‘till it works”. But is this the case in terms of CSS hacks? Sure, we call them “hacks”, when in reality they’re really patches. Patches that fix known, documented problems in certain browsers.
I know it’s really just a term, but the problem is this: by using “hack” to describe often necessary code, a negative connotation can be attached, even if what we’re really doing is compensating for a browser’s shortcomings. When you hear someone say: “I avoid all hacks”, you’ve witnessed this negative connotation. Heck, we’d all love to avoid hacks — but we’re also realistic, living in the real world, and designing in 2005.
Now think about the term “patch”. It brings to mind, mending something that’s broken. It’s rip or tear is clearly visible — we know it’s broken, and we know what we need to do to make it look better. We’re not cutting corners, we’re applying a fix.
Perhaps from now on, I’ll refer to fixes for gems like the double float margin bug, or the three-pixel text jog as, well… patches.
Bulletproof Logos
Posted at 10:38 AM
There are a few browsers (Firefox, Opera) that treat image alt text as if it were normal text on the page, when the image isn’t present. If the reader turns images off to save bandwidth, we can still visually treat the images by styling the alt text, and this could be especially handy in regards to site logos.
Been There, Done That
Posted at 11:19 AM
For whatever reason, I often struggle with visited link treatments, perhaps because (for me) it’s often an afterthought. A color palette is selected, the page is designed — now it’s time to figure out how best to show that a link has been visited. For most sites, it’s important to visually signify where the reader has been, and not everyone handles it in the same manner.
Odeo Opens its Doors
Posted at 10:55 AM
Discover, create, and subscribe to original audio content for your iPod or MP3 player. Earlier this month, Odeo opended its doors to the public, with a site design from SimpleBits.
When Floated Figures Attack!
Posted at 8:45 AM
I recently began publishing full entries in the RSS feed for SimpleBits, figuring that if people would rather read the entire Notebook post in the comfort of their aggregator, they could go ahead and do so. Personally, I enjoy reading content in its intended environment, with all the site design around it, and find myself skimming NetNewsWire for interesting articles to pull up in a browser later on.
New Book: Bulletproof Web Design
Posted at 10:11 AM
I’m happy to finally announce my new book, Bulletproof Web Design, to be published by New Riders this summer. It’s now completely written and heading to the printers this weekend. If all goes well, it should hit bookshelves in early August.
Exceptionally Negative
Posted at 10:39 AM
There are situations when using negative margins on an element can be the easiest way to “nudge” it out from the rest, treating the exception to the rule in order to simplifiy code.
Image Siphoning Fun
Posted at 1:42 PM
Image siphoning seems rather common. That is, people referencing images on your server via an absolute URL. Using your bandwidth. Often, a referrer check shows the culprit. Ah yes. They’ve used a CSS example I posted a long time ago. That’s cool — but they’ve changed the relative URLs in the example to absolute URLs instead of copying the images to their own servers. Not cool at all.
There are several ways to prevent this, or deal with it after the fact. There are times when I like to have fun with it, swapping the image being siphoned with something a little more humorous (Figure 1). The fun part is seeing how long it takes for the offending site owners to notice and make the change.
Depending on the size of the image being “borrowed”, you could get even more malicious with the image that you replace. I’m not advocating that, but encourage something harmless, yet funny to get the point across.
This technique is nothing new, just something I was (unfortunately) reminded of this morning while checking a referrer gone wild. If in fact the culprit likes your modified image, then well… you haven’t solved the bandwidth issue at all.
Update: To avoid confusion, my solution of just replacing the image with a new one would probably not be optimal for most (for instance, if you’d like to still use the same image by the same filename). Be sure to check the comments for “hotlinking” fixes that don’t require replacing the image.
Clarification Regarding IE5/Win
Posted at 11:45 AM
Last month, I had posed the question: When can we hide from IE5/Win?. In retrospect, I probably should’ve titled the entry: When can I hide from IE5/Win?. Because, as others have rightfully pointed out, what matters most are the statistics from your own site, not others.
But the reason for that entry hasn’t changed. I wanted to take the pulse of IE5/Win in a very non-scientific, general way. And there were some good numbers throughout the comments. Essentially, IE5/Win users make up an average of 4% in the stats that were collected. Some less, some more, of course. So, my curiosity has been cured. IE5/Win numbers are (not surprisingly) dwindling — what that means for you and your site can vary.
But catering to IE5/Win isn’t that hard
Sure, this is true is most cases. For someone who already knows the pitfalls to avoid when authoring CSS for IE5/Win, that is. On this site, for instance, I’ve pulled out the necessary hacks (the obvious ones, anyway) that make IE play nice into their own separate stylesheet. There’s really only a handful of them, so on the surface it appears that I’m not doing much to make IE5/Win look like everyone else. But what about CSS newbies, those that are trying to grasp the basics? What I was trying to get at in the initial entry was that it would make learning this stuff much easier without having to explain box model problems, etc.
It’s not impossible to bend IE5/Win into the same designs that more standards-compliant browsers render, but it can’t hurt to take a look at your site’s statistics, getting a handle on what your audience is. It could help in deciding how much bending you want to do.
CSS Bug of the Day
Posted at 5:37 PM
You know those desk calendars where you tear off a page for each day of the year? Typically, each day comes with a little nugget of useless info to start your day. Someone should create one based on CSS bugs, where each day talks about a different bug and its workaround. Perhaps even more nerdy than the “365 Days of Dragons, Merlins and Magical Stones” that I’ve been meaning to covertly purchase.
Until then, perhaps I’ll start posting reminders here as I rediscover old favorites. While there are some bugs that we run into every day, immediately knowing their remedies, there are others that pop up here and there, only to be looked up again and again to be reminded of their workarounds. It never hurts to publicize these suckers now and again.
Today’s bug is the IE Doubled Float-Margin Bug: When floating a block-level element and adding a margin on the same side as the float direction, IE/Win can double the margin width that is specified. Luckily, there is a simple workaround offered (at Position is Everything, of course).
Are there enough CSS bugs to fill a 365-day calendar? Probably.
CSS Centering 101
Posted at 10:04 AM
The following is documented in order to provide a neat and tidy way of responding to a frequently asked question here at SimpleBits:
How do I center a fixed-width layout using CSS?
For those that know, it’s simple. For those that don’t, finding the two necessary rules to complete the job can be frustrating. So here it goes.
In the markup, we’ll need a container to hold everything. In this container will sit the entire layout that we’d like to center on the page. We’ll suspiciously name this container: “container”:
<body>
<div id="container">
...entire layout goes here...
</div>
</body>
Using CSS, the following two rules force whatever is contained within #container to be centered:
body {
text-align: center;
}
#container {
margin: 0 auto;
width: xxxpx;
}
We’re aligning everything within body to be centered, while giving the #container a specific width (whatever you’d like). The margin: 0 auto; is the second piece which makes it all work. We’re specifying 0 pixels on top and bottom, with auto margins on the left and right.
That’s it. The only problem we’ll run into now is that, because we haven’t specfied otherwise, everything on the page will be centered. We’ll want to override that from the container level down with the addition of the following rule:
#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}
With that single declaration, everything within #container will be left-aligned, yet leaving our centered layout unhindered. The same principle could be applied not only in centering entire layouts, but other block-level elements and page components.
Now I’ll just need to keep the URL for this entry handy the next time the question is posed, helping me respond to emails that inquire about this seemingly simple goal. And these days, anything that helps me respond to email is a true asset, as I’ve been absolutely terrible at the task lately.
Update: Several people have written in, either to ask why text-align: center; is necessary, or that using that rule is plain wrong. The reason it’s used, is for the benefit of IE5/Win users. Without the rule, most browsers will still center the layout just fine using auto left and right margins — but not IE5/Win.
3 Pixels of Frustration
Posted at 11:04 AM
The context: You’re designing a multi-column layout with CSS using float. The frustration: There is a mysterious, tiny gap between columns or content when viewed in Internet Expolorer for Windows, versions 5 and 6. You try everything. Nothing works.
Upon further investigation, you find that the mysterious number of pixels added is exactly “3”. There is hope.
If you hadn’t already found it, Holly Bergevin and Big John not only document this bug (thank you, thank you), but also offer a workaround. (One that I’ve had mixed results with. Sometimes works like a charm—other times, when more complex styles are added, the gap still remains an issue. But just knowing of the problem can at least offer some solace.)
Over the past year or so, I’ve run into this problem numerous times, luckily stumbling onto the aforementioned writeup at just the right time. For those first trying to discover what’s causing it—it can be nightmarish and impossible to try and solve. So, spreading the word on this bug can only be beneficial.
If you’re struggling with tiny gaps or seemingly inconsistent width and spacing issues in IE/Win only—be sure to read about this one. Even if the problem turns out to be something else, the 3px gap could easily be the culprit in the future.
Clickable Link Backgrounds
Posted at 1:11 AM
Is there any harm in documenting a seemingly rudimentary and obvious CSS technique? I tend to think not, and so the following may (or may not) turn out to be enlightening for you, depending on the level of your CSS-ness.
The Goal
A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS — but that is also clickable.
Often I’ll use a background-image on unordered list items to create unique bullets. Applying the background to the <li> element usually gets the job done. But what if our list contains links, where we’d like the image to be clickable as well?
Bulletproof Slants
Posted at 10:27 AM
While working on the navigation for a project recently, I had the want/need to do something like this:
Nothing ground-breaking or cutting edge here (and certainly not meant to solicit ooohs and ahhhs from the gallery), yet when faced with a little challenge such as the design above, I do my best to make things as bulletproof as possible.
Humor me, while I elaborate.
A Better Blogger
Posted at 10:09 AM
The big news today is the rebirth of Blogger — not only a new version of the application, with tons of new features, but also an undeniably friendly, pleasing and rock-solid redesign of Blogger.com by Doug Bowman and Adaptive Path.
Be sure to read Doug’s informative write-up on the entire project over at Stopdesign.
In a very small way, I was fortunate to have taken part in the project, by designing a template that can be selected by the thousands of the Blogger users.
TicTac (also available in blue flavor) was my contribution to an all-star cast of web designers who, collectively created over 20 free templates. The design was inspired by a pattern that I see each and every day — on my shower curtain, and coincidentally, works well with the new “rounded” theme of the new Blogger.
Extra care was taken to ensure the design would be flexible enough for any amount of content at any text size. For example, the header uses a vertical version of the Sliding Doors technique (sliding windows?), where if the Blogger user has a long site title, or if the user bumps up the text size, the header graphic (separated into two pieces) willl “spread apart” to accomodate it.
It was fun adding to the relaunch in a tiny way — and just think, Blogger users can also choose their site to be designed by Jeffrey Zeldman, Dave Shea, Todd Dominey, Dan Rubin — and not to mention Douglas Bowman himself. All standards-compliant, 100% CSS — and free. Very cool!
So, hats off to Doug, Adaptive Path and the Blogger team for pulling together a great relaunch. And with Google behind it, there’s no telling how many new users will be turned on by the value of weblogs.
Mountaintop Corners
Posted at 12:24 AM
A new article I’ve written for A List Apart has been published today. Mountaintop Corners discusses the simple (yet bulletproof) technique of shaving off pixels to form rounded boxes. By creating round corners this way, it enables us to use CSS to create flexible containers that can also change in shape and color with quick and easy edits.
Sometimes, A House of Cards
Posted at 5:49 PM
Two hours go by and I still couldn’t figure out why the navigation links weren’t clickable in IE/Mac. This was one of those times I find myself cursing, putting off lunch and cranking Journey until I figure it out.
Process of elimination got me nowhere. Remove one rule, they work — but the layout is off. Remove the same rule, along with 10 others and they don’t work — but the layout remains stable. Repeat.
Another hour passes. Journey’s Greatest Hits is on shuffle (there is something about the combination of Steve Perry and CSS. I can’t quite put my finger on it). Aha! If I remove position: relative; from the element that follows the navigation — everything works. Of course.
The preceding scenario doesn’t happen every day, but when it does, it’s a roller-coaster ride of sheer anger, followed by the greatest elation one could possibly receive from writing code. Don’t take this the wrong way — I love CSS. I couldn’t get by without it, but on those rare (or sometimes not-so-rare) occurrences when a complex CSS layout becomes a “house of cards”, it can sometimes be enough to scare you into realizing, “whoa, I just spent three hours trying to figure out this one small problem for one browser”.
You may be wondering about the specifics of my aforementioned troubles. But I couldn’t begin to document the 4,723 steps it took me to get to where I was and the equal number of steps to get back only to fix the problem with a single rule deletion. *Sigh*.
Doug waxed poetic on this subject back in January. That it’s wise to factor in extra time when planning for cross-browser CSS debugging.
What’s amazing to me is that changing one rule, that by all obvious appearances has nothing to do with the problem, can sometimes be all it takes to fix the entire issue. The lesson here? When something doesn’t work, try the obvious — but don’t forget the unobvious.
Flicker-Free PGA.com
Posted at 11:51 PM
The uncomparable Todd Dominey has recently implemented the accessible image-tab rollovers technique for the main navigation of PGA.com — and it’s probably the best example to date.
First, it successfully solves the IE/Win flicker problem that surfaced for those employing Pixy’s single image rollover trick (IE/Win flicker has also been thoroughly documented by Ryan Carver).
One way of getting rid of IE/Win’s flicker (an issue when background images are hovered) when using Pixy’s rollover method with an unordered list, is to assign the background-image to both the <li> and <a> elements.
In addition to eliminating the flicker, Todd also made a few tweaks to please IE Mac OS9/Classic users — and of course the navigation also looks stellar. Nice work!
If you’ve tried using image-based CSS navigation in the past and have run into IE flicker and/or IE OS9 problems — be sure to check this design out.
Go tabs, go.
The Coast is Clear
Posted at 11:43 AM
Not long after I updated my CSS, a reader pointed out that when resizing text, the content column would “jump” to the right, overlapping the sidebar. Not good.
The problem: I needed to clear the floats that enable the navigation to be horizontal. This didn’t seem to be a problem in my old, positioned layout. But when floats are used to lay out the columns that follow the navigation, not clearing can cause bizarre issues.
The solution: Adding a simple clear: left; to the #content declaration (since this <div> follows the navigation) solved the text resizing issue.
Something to keep in mind if you’re using a floating layout, along with an unordered navigation list that also uses float.
So… clear, clear, clear.
Also see Containing Floats from Eric Meyer for more ways to… you guessed it, contain floats.
Firefox Tabs
Posted at 11:37 AM
It’s been brought to my attention that the Accessible Image-Tab Rollovers do not work properly in the latest version of Firefox (0.8). I’m inclined to think it’s a small bug in this latest build and will see if the next one catches up. Other :hover problems are apparently being reported as well.
Jeremy Flint was kind enough to try and get the tabs to work in Firefox, and by doing so may have uncovered a duplicate overflow: hidden; rule. He finds that by removing the duplicate rule, the tabs work fine in Firefox (and others).
I can’t remember why the overflow: hidden; rule was assigned to both declarations, nor can I remember when my last oil change was. Either there was a good reason at the time, or it was just duplicated by accident. Regardless, more testing is in order — as well as finding out if there is indeed a small bug in Firefox (which by the way looks to be a great version of a great browser).
Faux Columns at A List Apart
Posted at 7:29 PM
In response to the most frequently asked question that I receive here, I’ve written up my first article for A List Apart. Faux Columns intends to let everyone in on the little trick: to extend positioned or floated columns to full browser heights using CSS — regardless of each column’s contents.
It’s dead-simple to implement, yet it works like a charm. There is already some great discussion brewing on the article, which at one point starts to sway toward a CSS vs. tables for layout debate. That is certainly not the intention of the article.
It’s merely a way to achieve a certain design using structured markup. I won’t go into all the benefits of using structured markup over tables, but here is one reason for you: non table-based layouts can be viewed easily and more predictably by text browers, screenreaders, PDAs, phones and other devices.
Would you like to present full-length columns for modern, visual browsers — while still making your content easily accessible to the aforementioned list? Then this is (one) solution.
Styling Nested Lists
Posted at 7:47 PM
Recently, I was building a site map and realized that it is basically an outline of sorts. So how should I go about marking it up? I settled on a series of nested tables — ha! gotcha — nested unordered lists.
The Raw Markup
At their very basic — nested, unstyled lists deliver the exact hierarchy I was looking for. I could feel good about the structure that all browsers and devices would read, while easily styling it with CSS later on.
A simple version might look something like this:
<ul>
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
Figure 1 below shows us how the markup above will render in most browsers. Woilla. A site map or outline. But let’s kick it up a notch (apologies to Emeril).
Figure 1
Adding Style
Let’s say that we’d like some definition for certain levels of the site map. All we really need to add to the markup is an id so that we may style this particular list differently from any other lists that may be on the same page, without any additional markup:
<ul id="sitemap">
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
Using descendant selectors, we can give a unique style to each separate level of the list. For instance, if we’d like the higher levels to be large and bold and the inner levels progressively smaller, we’d first set the size and weight for entire list:
#sitemap {
font-size: 140%;
font-weight: bold;
}
That will make the entire list big and bold. So next we’ll reduce the size and turn off bolding for li elements that are nested at any level below:
#sitemap {
font-size: 140%;
font-weight: bold;
}
#sitemap li ul {
font-size: 90%;
font-weight: normal;
}
Figure 2
This means that all top level items will be big and bold, while all lists that are nested within will have a normal weight and font-size of 90% (which in this case is 140% of whatever the page default is). Figure 2 above shows the result.
We don’t even need to assign a smaller size for the third level, as it’ll automatically apply 90% of 90% (a little confusing, but it works!):
Now we have a descending font-size for each level of the list.
Custom Bullets
Let’s turn off default styling, and add a decorative bullet for only third level items by using the background property. We’ll first turn off list styling in general for all li elements, then we’ll specifically assign a background image for third level items:
#sitemap {
font-size: 140%;
}
#sitemap li {
list-style: none;
}
#sitemap li ul {
font-size: 90%;
}
#sitemap li ul li ul li {
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}
Figure 3
Figure 3 shows the resulting list with a custom bullet applied only to third level li elements. We’ve added 16 pixels of padding on the left to account for the width of the decorative bullet image we’re using (plus a bit of whitespace). We’re also telling the browser to align the image 0 pixels from the left and 50% from the top, which essentially aligns the bullet to the left and center of the text. While we could’ve used a pixel value here, using a percentage allows for similar bullet placement if text is resized.
Conclusion
For building outline-like lists, nesting uls makes for a structurally sound — and easily styled solution. By assigning a single id to the top-level ul, we can let CSS do all the hard work of styling each level separately — without the need for extraneous presentational markup. And possibilities for creative styling go way beyond this simple example.
Mid Pass Filter: Toward a Hackless Future
Posted at 7:33 PM
Just recently, Tantek revealed his Mid Pass Filter — a handy way of sending IE5.x/Win external CSS styles that all other browsers will ignore. Pretty neat.
I’ve read a few comments regarding the method, which complain of its somewhat messy syntax. My first reply would be “isn’t any hack is somewhat messy?”, but more important is the concept — keeping all IE5.x hacks in one file makes for a nice tidy cleanup when these browsers reach the Netscape 4.x threshold.
This of course could be years down the road, but I like the idea of keeping standards-compliant CSS completely separate from the various hacks that are often necessary to render a design in 2003.
The more methods that use this separation, the better. Imagine a time when getting your CSS 100% hackless is only a matter of removing the import of a single file that’s merely filled with all those old hacks. It’s a nice idea, anyway.
Accessible Image-Tab Rollovers
Posted at 11:40 AM
I recently implemented a new navigation system for Fast Company and thought it’d be useful to document the process.
The Problem
We needed to fit more items into FC’s top navigation. We ran out of room. Previously, this was handled by a simple, styled unordered list. But at a window resolution of 800x600 there wasn’t enough additional horizontal space to add even one more item using the current design.
The Solution
I choose to combine and modify Pixy’s brilliant Fast Rollovers and Stuart Langridge’s accessible image replacement technique to create accessible, Javascript free, image-tab rollovers.
How does it work?
The XHTML: One List to Rule Them All
I wanted to continue to use a simple unordered list for the navigation in the markup. Much has already been said about using lists for navigation, here and elsewhere. They’re compact, lightweight and accessible to text browsers, screenreaders, PDAs, phones, etc.
Here’s what the list looked like originally (I’ve deleted some of the actual items to make it more convenient to demonstrate):
<ul id="nav">
<li><a href="/" class="selected">Home</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/magazine/">Magazine</a></li>
<li><a href="/articles/">Archives</a></li>
</ul>
Nice and simple. Now let’s add a unique id to each li so that we can do some fancy stuff with it (namely, replace the boring text with stylized tabs):
<ul id="nav">
<li id="thome"><a href="/" class="selected">Home</a></li>
<li id="tguides"><a href="/guides/">Guides</a></li>
<li id="tmag"><a href="/magazine/">Magazine</a></li>
<li id="tarchives"><a href="/articles/">Archives</a></li>
</ul>
Now we’re ready to create some tab images.
One Image, 3 States
The essence of Pixy’s Fast Rollovers involves creating one image for each navigation item that includes normal, hover and active states stacked on top of each other. Later, we’ll use CSS to change the background-position to reveal each state at the appropriate time.
Figure 1.1
Figure 1.1 on the right shows an example image that I’ve created and used for Fast Company’s new navigation. Each state is 20px tall with a total image height of 60px. The top 20px is the normal state, the next 20px shows the hover state and final 20px shows the active state (which is also used for the “you are here” effect). There are similar images for each tab we’d like to use.
Using one image for each state allows us to toss out ugly Javascript and instead make use of simple CSS rules for hover effects. This is good. It also eliminates the “flicker” effect that other CSS methods suffer from, where separate on/off images are used. This is good. We also don’t have to pre-load any additional images. Again… this is good.
The CSS: This is Where the Magic Happens
First we’ll set up the rules that all navigation items will need. This will save us from writing duplicate rules for each tab. Then we’ll add a separate rule for each list item id, giving the li it’s own background-image and width — the only two variables that will be different for each tab.
The CSS goes something like this:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -20px;
}
#nav a:active, #nav a.selected {
background-position: 0 -40px;
}This essentially turns off padding and list styles, makes the list horizontal and hides the text that’s between each hyperlink in the list. Notice the :hover and :active rules. These are generic for every a element within #nav so that we don’t have to repeat those particular rules for each item.
I’ve also assigned a “selected” class to a tab that I wish to highlight permanently, signifying which section of the site you are currently on. This is shared with the :active state.
You may also notice that list-style: none; and display: inline; are repeated in both the #nav and #nav li selectors. This was to keep IE5/Win happy. In a perfect world, declaring this once for #nav would be perfectly sufficient. That’s not the case, of course.
Next, we’ll add the rule for each id and assign it’s background-image and width. Here’s an example:
#thome a {
width: 40px;
background: url(home.gif) top left no-repeat;
}There’s a similar declaration for each tab needed.
The Results
Figure 1.2
Figure 1.2 shows the resulting tabs in normal, hover and selected state. To see it all working in action, check out the working example with sourcecode, or better yet, the real-world implementation at fastcompany.com.
Why use it?
- It’s lightweight: Just an unordered list in the markup.
- It’s accessible: Using Stuart’s method, we can insure screenreaders will read the text links.
- No Javascript: We don’t need to pre-load or create multiple images for each state. We also don’t need extra Javascript to control hover effects. Thanks, Pixy.
- It’s stylized: Fitting hypertext into defined areas can be tricky, this allows for using stylized images.
But Wait, the Text Doesn’t Scale!
Following a great suggestion from Doug Bowman, and in response to legibility issues and the inability to resize image text, I went a step further and created second set of tab images with larger text labels. I could then override rules on the exisiting “medium” and “large” alternate stylesheets. The alternate styles are activated using Paul Sowden’s Stylesheet switcher.
An example of the overriden rule looks almost identical to the original, with a new width and image path:
#thome a {
width: 46px;
background: url(guides_lg.gif) top left no-repeat;
}
Figure 1.3
Figure 1.3 shows the larger tabs as they appear on Fast Company, where you’ll notice that the horizontal spacing is tighter while the vertical size remains the same as the original. But, by adding the ability to increase the size of hypertext as well as the tab images we’ve helped out low vision users, while still working with our certain design constraints. Thanks to Doug for this solution.
Compatibility
Tested and working in Windows: Mozilla, Netscape7, IE5.0+; Mac: Mozilla, Camino, IE5, Safari.
Specifically for Fast Company, I choose to position: absolute the #nav in order to make things line up perfectly, letting the background color of the header area show through underneath. This works fine and dandy — except in Opera7/Win where specifying a width is necessary for absolutely positioned elements (ugh). That’s OK though, we’ll just add the total width of the images (added up) to the #nav:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
width: 201px;
}Now we can sleep at night, and Opera fans rejoice.
Special thanks to Paul Maiorana for letting me bounce ideas off of him (repeatedly) at the office.
List-o-matic: It's Just Too Easy Now
Posted at 9:55 AM
Ian Lloyd over at Accessify.com just made creating CSS-based navigation lists incredibly simple.
List-o-matic (not to be confused with it’s excellent inspiration, Listamatic) is a wizard for quickly creating unordered navigation lists, while allowing you to choose from a few different CSS styles, such as my Mini-Tabs and others.
Enter a few link names and URLs, choose a style and … bingo. You have yourself some styled navigation. It doesn’t get any easier than this.
Oh, and YARRR!
This Validates!
Posted at 7:51 AM
… The charge a designer gets when running a site through the W3C’s validation tool. Great, now this site is squeaky clean and there’s not a thing wrong with it! This is probably never true.
Jason Kottke has written up some very interesting thoughts on web standards and semantically rich documents. He has many valid points (sorry). But seriously, it’s a problem.
When designers see using valid XHTML as a religious activity, there’s bound to be little or no semantic structure to the document. That said, I can agree with Doug that creating pure semantic structure while at the same time making it look great is a challange that’s nearly impossible. Given the current state of CSS support anyhow.
But that’s where the balance comes in, and I’m reminded of Tantek’s A Touch of Class post from way back when. I’ve found that one of the biggest problems with newly authored XHTML is the overuse of the class attribute. The document might validate just fine, but there’s a class assigned to just about every element in there. Not to mention the possibility of table and font tags for presentation that Jason rightly points out will still validate despite the fact that they may be littering the code all over the place. I also attempted to comment on the subject back in April.
The validator is dumb (literally), and unfortunately is sometimes used to validate the designer first and the code second. We don’t have a semantic validator and probably never will, but the smarter we get about structure, the closer we’ll get to seeing improvements.
Like Dave, the best thing I could recommend to any designer/developer looking to really understand that balance is to pick up a copy of Jeffrey Zeldman’s new book Designing With Web Standards. Read it. Live it. The guy knows what he’s talking about.
CSS Photo Zoom
Posted at 6:58 PM
After reading Pixy’s clever Fast rollovers, no preload needed method for using a single background image for multiple hover states, it got me thinking. What if the concept was used to offer a zoomed view of a thumbnail image, right inline on the page, again using a single image?
Here’s the example, where I’ve created a single JPG image that contains both the thumbnail and zoomed photo below it. I then use Pixy’s idea of changing the background-position as well as the width and height for the :hover state to hide the thumbnail, but reveal the larger zoomed photo.
I’m not entirely sure that this is even a practical application of the concept — but it seems like it could work pretty well in certain circumstances, so I thought I’d throw the idea out there.
What to do with un-styled viewers? I thought that making a “View image” link that points directly to the thumbnail/zoomed photo would be acceptable, then hiding the link text with recently discovered text-indent: -1000em; trick. I’m sure there are other, more elegant things to do with a non-styled view, but this seemed the easiest, without creating an additional separate image.
I’ve only tested this on Mac: Camino, IE5.2 and Safari.
Mini-Tab Shapes
Posted at 10:53 PM
And you thought that there was nothing more to be said about CSS tabs… In exploring navigation ideas for a new project, I wanted a mini-tab effect, but something different than the default, border-bottom that the method utilizes.
The nice thing about the original mini-tabs is that the border will always be the exact width of the text above it — but you are stuck with a square tab. I started thinking of ways that I could simplistically style the tab portion differently. So I came up with Mini-Tab Shapes. Each style uses a single, small GIF for hovering and active tabs. The answer to my width dillemma (the fact that the width would change depending on the length of the word) was to make the tab image small enough and then center it using:
background: url(tab_rounded.gif) no-repeat bottom center;Now, if your navigation only contains a few items, you could easily create the tab graphics to fit the entire width of the word — however if you’d like the text to be resizable, the effect would break. The possibilities for shapes go far beyond the four examples, and I’m sure would work well in a vertical list as well. Update: They do.
Tested in Mac: Safari, Camino, IE5; PC: IE5.0, IE5.5, IE6, Opera7
Dot Dot Dash
Posted at 2:45 PM
I was just checking something in Internet Explorer 6 for the Microsoft Windows XP Home Operating System. Something I often forget is the fact that it renders dotted borders as dashed. I’m aware of the hack that was revealed not too long ago — and a good hack it is, but what kills me is that it is a bug so obviously noticed.
Wouldn’t that be something that’s easily fixed when going from version 5 to version 6? Maybe there’s a good reason for it. I can understand obscure bugs being replicated from version to version, but man… a dotted border should look different than a dashed one.
My apologies to IE6 users out there — I think my dashed links look horrible, but dashed they will be.
IconShoppe Icons to go
FoameeWho do you owe?
