Adam Darowski » Web Standards

Selective Degradation of Modern CSS for Internet Explorer

Adam Darowski — Tue, 01 Dec 2009 02:46:59 +0000

Progressive enhancement. Graceful degradation. Progressive enrichment.

There are a lot of terms out there for “making sure things work nicely in every browser, even if it doesn’t work or look exactly the same in all of them”. I was thinking about the approach I took on a recent project, the Criminal Justice School Guide. I suppose it is kind of like progressive enrichment… but with a bit of graceful degradation thrown in.

What does that mean? Well, first of all the case for this approach was an easy one to make when working with a client (Avenue100, and directly with an old friend and colleague Tracy Shaw) who gets web standards. What I did was take a mockup and build the design in CSS using the very latest CSS techniques. Only then did I take a look at the design in other browsers.

The difference between what I did on this project and some others is that I only fixed major design elements. If it wasn’t a big deal, I shrugged it off. LET ME TELL YOU it was a great feeling. “Does that corner really need to be rounded? Nope!” This way the browser hacks are kept to a minimum (and quarantined in separate style sheets) and the site is ready to play ball when Internet Explorer finally is.

Let’s call it… “selective degradation”.

Today I want to look at four areas of the design, see how they look in Internet Explorer vs. a real browser, and show the markup and style examples.

1. Search field

The first task was to create a search form that sits over a partially transparent rounded box that also sits on top of some other geometric shapes. It’s easy enough to cram all of that in a background image and let the form sit on top of it, but why do that when you can produce a more bulletproof approach that allows the rounded box to grow with the form (if need be). Here’s how I styled the form:

form#search { float: right; background-color: rgba(183,180,170,.4); padding: 10px 20px; margin: 16px 12px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

The floating, padding, and margins are all standard stuff. The background-color and border-radius, however, are not. border-radius, of course, will round the corners of the box. Only it doesn’t work in Internet Explorer (even IE8!). How about the background-color? That’s RGBa, which allows you to define a background color WITH a transparency level. Of course, IE8 can’t figure that out either.

So, what should we do? Well, just like I said right away. Cram it all in a background image. So, here’s the fix:

div#header { background: url(../images/ie/header.png) no-repeat right top; }

All versions of IE are served a header that has the rounded, semi-transparent box as part of the background image. It’s not as bulletproof, but do users of Internet Explorer really care about that? Nope. Problem solved.

2. Rounded content window

See that rounded top of the content box? That’s a pretty important design element, so let’s keep it rounded for everyone. Easy enough to do in Firefox:

div#content { clear: left; background-color: #FFF; border: 2px solid #EAEAEA; margin: 0 12px; padding: 12px; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; }

The part that rounds the corners, again, is the border-radius. Notice that -webkit-border-radius doesn’t adhere to the nice shorthand that -moz-border-radius and border-radius do. That’s why you get nice long attribute names like -webkit-border-top-right-radius. That’s a mouthful!

So, what has to happen to get these corners in IE? It’s actually a little bit complex, to be honest. Here’s what I did:

div#content { padding: 0 12px 12px; border-width: 0 2px; }

So, here we removed the padding and border from the top of the content box. Then:

ul#navigation { overflow: hidden; background: url(../images/ie/content-rounded-top.png) no-repeat left bottom; margin: 0 12px; padding: 10px 0 0 14px; }

We instead added the rounded corners as a background-image on the bottom of the navigation menu above the content box. We added some extra padding to make up for it.

ul#navigation li { padding-bottom: 12px; }

Finally we added some padding to the bottom of the list items themselves. And that did the trick!

3. Rounding of inner content boxes

You see how some boxes inside of the content box have rounded corners, too? You know what I decided to do about these? Nothing. Not an important design element. NEXT!

4. Partially transparent stripe

The stripe that goes over the photograph is a pretty major design element as well. Once again, RGBa comes to the rescue:

div#home-banner div#title { float: left; margin-top: 172px; padding: 8px; width: 625px; color: #FFF; background-color: rgba(0,54,99,.6); }

RGBawesome, indeed.

Et tu, IE? You guessed it. Just put the blue stripe in the image itself and serve that one to IE.

div#home-banner { background-image: url(../images/ie/law-and-justice-ie.jpg);

Note that this approach doesn’t make sense if the image changes often. This one, luckily for me, does not.

There you have it. It was a great feeling to build the site with only modern browsers in mind. This allows you to structure the markup and style in the best, most semantic way possible. Then, you can fill in only the necessary gaps, improving the user experience in lesser browsers.

Emphasized Links: What comes first, the a or the strong?

Adam Darowski — Sat, 07 Mar 2009 03:13:22 +0000

It all started quite harmlessly. I was working on a couple new pages and realized I’d never given much thought to how I handled the occasional bold link. Now, these isn’t presentational bold. I actually wanted to use emphasis on the words that are linked. We’re talking , not , folks.

I tweeted:

When you place strong emphasis on a link, do you put the inside the or the inside the ? I think I’m inconsistent.
I had been putting the the outside of the . Like this:
MailChimp

My reasoning was that if you take away the link, I would still want the phrase to be emphasized.

However, Matt brought up some good points. His first was that I’m linking the phrase, not the emphasis. I can buy that. Also, he brought up the point that putting the outside is cleaner for semantic web scraping stuff.

I assumed this was minor and no big deal. But I’m happy to see that there are others who also care about this stuff. So, what do you do? What’s your reasoning?

The Heart of the Redesign: CSS Pseudo-elements

Adam Darowski — Sun, 22 Feb 2009 17:50:01 +0000

One of my favorite parts of my site’s recent redesign—and the page that I started the redesign with—is the new Portfolio page. This is where the whole “exposed markup” thing came from. Here’s what I’m talking about:

What was I trying to do?

I have a full-time gig as the User Experience Designer for BatchBlue. That affords me the ability to be a little creative with my portfoio—it isn’t my source of income. However, I do believe that all full-time designers should do a little freelance to stay fresh. So, I’d still like to show what I’m about.

The design traits I want to convey to prospective clients and readers are simplicity, elegance, cleanliness, and a sharp attention to detail. I also want to communicate that markup and style are at the heart of what I do. I do a lot of different things, but I’m always happiest with a text editor, a web browser, and a refresh button.

Given all this background, my goal was to work the underlying markup into the visual design.

How’d I do it?

Since the “exposed markup” is merely presentational, I wanted to keep it out of the “real” markup. Basically, when you “View Source”, I don’t want you to see
<h1>Portfolio</h1>
. I wanted the nice, clean Portfolio
. The best way I could come up with to pull this off was with the :before and :after CSS pseudo-elements.

Huh, pseudo-elements? Pseudo-elements are added to CSS selectors to give you a bit more selection control. The four pseudo-elements are :first-letter (allows you to style the first letter of the content contained within that tag), :first-line (allows you to style the first line), :before (allows you to add content before the tag), and :after (content after the tag).

The :before and :after pseudo-elements are great—except for one problem. You guessed it. IE. But not just IE6. IE7 still doesn’t support them. The additional content just doesn’t show up. For my portfolio, I decided that was a fine tradeoff. I’m really not targeting the type of users who would surf the web with IE (present company excluded, of course!). Besides, this approach actually well. If you use IE, you just don’t get the “exposed markup” tags.

Here’s how it looks in IE7:

The markup

The pseudo-elements allow me to use a pretty standard definition list:

  BatchBook     Small Business CRM     For BatchBlue Software     May 2007–Present   BatchBlue.com     Corporate Website & Weblog     For BatchBlue Software     May 2007–Present   Tabigail     A simple, gray, one-column, socially savvy WordPress theme     For the WordPress community     December 2008–Present   BaseballTwit     Blog posts and Twitter tweets about baseball stats and history     For the sabermetric community     December 2008–Present

The CSS

First, we know we want the :before and :after content to always appear italicized and (my favorite color) gray. So, let’s use the global selector with the pseudo-elements. This way we don’t have to reapply the color and style over and over again.

*:before, *:after { color: #CECECE; font-style: italic; }

First, we’ll expose the opening and closing
tags.

dl#active-projects:before { content: '
'; } dl#active-projects:after { content: '
'; }

For the content property, you can either use a string (like I did), an image (via url(image.png)), or any of the following: open-quote, close-quote, no-open-quote, or no-close-quote.

Update: For some reason, this wasn’t rendering properly in Safari. The closing
was appearing after the first
. So, instead, I needed to wrap the
in a
(giving the
the id of “active-projects” instead). This tricked Safari into putting the closing
at the end of the
where it belongs. If you know why Safari does this, please let me know!

Here’s the CSS for the
:

dt { margin: 10px 0 10px 24px; font-size: 125%; } dt a { font-weight: bold; } dt:before { content: '
'; font-size: 80%; } dt:after { content: '
'; font-size: 80%; }

In the first line, the margin gives a little space on the top and bottom, plus a proper indenting for our markup. Since the
is used for the project name, I bumped the size up a bit. I also made the links bold to stand out a bit more. Then, of course, comes the :before and :after. In this case, I also dropped the font size for the tags a bit (to offset the increase in size of the links).

And now, the
:

dd { text-indent: -38px; margin-bottom: 4px; padding-left: 56px; } dd:before { content: '
'; } dd:after { content: '
'; }

In addition to a little bit of a margin, I added a bunch of padding on the left and then used a negative text-indent. In the event that the
goes to two lines, this will cause it to indent quite nicely.

And there you have it… pretty bits of markup used as a design element without muddying your “real” markup.

My Favorite CSS Techniques

Adam Darowski — Fri, 14 Nov 2008 18:11:55 +0000

I’ve been creating websites for 12 years. I started using CSS many years ago, but for a long time (like many designers) I only used it for text formatting. It wasn’t until 2006 that I took the plunge into pure CSS for layout. Since then, I’ve developed some favorite techniques that I use over and over again. Here, I’m finally putting them in one place.

These techniques don’t require any acrobatic wizardry or anything. They mirror my design approach—simple, clear, minimal, and (hopefully) easy to follow. It is because of this approach that my cross-browser fixes are usually quite minimal. That’s why you won’t see many IE tweaks here.

Before I start…

How did I learn CSS?

I’ve only picked up a few CSS books over the years, but I’ve leaned on those books heavily. They are:

Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm

Bulletproof Web Design (1st edition) by Dan Cederholm

HTML Mastery by Paul Haine

CSS Mastery by Andy Budd

What? No Zeldman? I know, I know. I started with the local protégé, Mr. Cederholm. He’s taken me far.

Of course, I also read a ton of web design blogs and online publications. The key ones (for me) are:

SimpleBits (Dan Cederholm)

456 Berea Street (Roger Johansson)

A List Apart

Vitamin

Email list from the Web Standards Group

Now that you know how I learned to do this, here’s what I find myself using over and over again:

Image Replacement on Headers

Headers (h1, h2, etc.) are very, very important. For starters, search engines love them. When Google crawls your page, it first asks “Okay, where’s the h1? That will tell me what this page is.” If you don’t include headers, then you’re making Google guess. Why make Google guess?

This is what the h1 of Darowski.com looks like:

Adam Darowski’s Traces of Inspiration

And here’s how it renders with no CSS:

Of course, that just ain’t gonna do. Here’s how it renders with the rest of the design:

So, how do you do that? With image replacement. We’re taking the h1, then giving it a background image and height & weight (using the dimensions from the background image). For the text itself, we give it a negative indent so that the text doesn’t appear on the page. It’s still there for screen readers and search engines, but the typical user won’t see it.

Here’s the CSS:

h1 {   margin: 0; } h1 a {   display: block;   background: url(darowski.png) no-repeat 0 0;   height: 103px;   width: 449px;   text-indent: -9999px; }

Why is most of the code applied to the link inside the h1? Because if you apply the negative indent to the text inside the h1, the clickable link actually appears off the page. If you indent the text inside the clickable link, the link itself still appears on the page—only the text inside is hidden. I know, weird. But it works!

Implementing types and values using Microformats

Using Microformats to mark up an email address is pretty easy.

adarowski@gmail.com

becomes:

adarowski@gmail.com

And that’s it.

But what if you want to add more information to that email address, like if it is a home or work email address? In that case, inside of the object with the class of “email”, you need two more objects: one with the class name of “type” and another with the class name of “value”. The “type” is where you define home or work while “value” is the actual email address.

Here’s an example from my About page:

Work Info:
  Website: http://batchblue.com/   Blog: http://blog.batchblue.com/   Work Email: adarowski@batchblue.com   Work Phone: (888) 402-2824

So, inside the li (which has the “email” class) lives two spans—one “type” and one “value”. The HTML renders like so with no CSS:

But you’ll notice that in this case, I have a “hidetext” style on the “type”. That’s because I only want to display it as “Email”. I simply add this style:

span.hidetext {   display: none; }

and I’m done. It renders like so:

I don’t always hide the types, though. On BatchBook’s contact detail pages, the type works very well into the layout:

Custom icons on list items

Here’s one I use A LOT. Unordered lists are wonderful. I use them all the time. But that bullet that denotes an unordered list by default can be a bit boring. Here’s what I did to spruce up the bloggers list on the BatchBlue Blog:

And here’s the markup:

Bloggers
  Keri Calhoun   Adam Darowski   Will Larson   Pamela O'Hara   Sean Ransom   Michelle Riggen-Ransom   Stephanie Sweeney

As you can see, we gave the list an id of “bloggers” and each list item an id of the blogger’s last name. That allows us to apply a different icon to each blogger’s list item.

But first, here’s the CSS to get the list looking the way we want (correct padding, left indenting, removing the default bullet):

ul#bloggers {   margin: 0;   list-style: none; } ul#bloggers li {   padding: 4px 0;   margin: 1px;   padding-left: 24px; } ul#bloggers li a {   text-decoration: none; }

Next, here is the CSS for each of the individual line items:

#calhoun { background: url(../images/keri-calhoun-icon.jpg) no-repeat left 2px; } #darowski { background: url(../images/adam-darowski-icon.jpg) no-repeat left 2px; } #larson { background: url(../images/will-larson-icon.jpg) no-repeat left 2px; } #ohara { background: url(../images/pamela-ohara-icon.jpg) no-repeat left 2px; } #ransom { background: url(../images/sean-ransom-icon.jpg) no-repeat left 2px; } #riggen { background: url(../images/michelle-riggen-ransom-icon.jpg) no-repeat left 2px; } #sweeney { background: url(../images/stephanie-sweeney-icon.jpg) no-repeat left 2px; }

If you look around any site I’ve created, you’ll probably see a lot of these. The footer at Darowski.com uses it:

Creative use of definition lists

As much as I love unordered lists, there’s one thing I love more. Definition lists!

I admit, I had never even used one before reading Web Standards Solutions, but now I use them all the time. All contact info within BatchBook is laid out in definition lists. Think about it… what better defines the home email than the email address itself? The definition list is an unordered list with even more semantic meaning.

When we launched the new personas section of BatchBlue.com, I went with a definition list. The names of the personas are the definition terms (dt) and the person used in the persona as well as the information that person is likely to track help define it (dd).

Here’s the complete markup:

Who needs a CRM anyway?
       Sales professionals     PC4Media.net     Customers, leads, conversions…           Freelancers     Big Ring Design     Clients, partnerships, invoices …           Virtual assistants     ChelPixie     To-dos, schedules, executives…           Entrepreneurs     ThoughtCap     Opportunities, partners, VCs…           Editors     KidoInfo     Writers, deadlines, articles…           Consultants     CRM Essentials     Clients, vendors, proposals…           Event organizers     Chris Brogan     Speakers, attendees, sponsors…           Non-Profits     National Wildlife Federation     Donors, fundraisers, volunteers…           Real estate agents     RealtyMan.com     Buyers, sellers, referrals…     Custom version available           Designers     lamikey.com     Projects, clients, deliverables…     Custom version available           Marketers     Saul Colt     Press, bloggers, social media…           Super Heroes     Super Heroes     We know you’re out there!

An abbreviated version of how that looks unstyled:

And here’s how I got that to look:

I’ll admit… I’m a bit proud of that one.

So, the CSS. There’s a lot of it. Let’s start with the basic definition list:

#personas {   border-top: 1px solid #CACACA;   border-left: 1px solid #CACACA;   margin-bottom: 10px;   width: 688px; } #personas dl {   float: left;   width: 163px;   padding: 4px;   border-bottom: 1px solid #CACACA;   border-right: 1px solid #CACACA;   margin: 0; } #personas dt {   font-family: Georgia,serif;   font-size: 120%;   color: #004A8D;   padding-bottom: 2px; } #personas dd {   margin: 0; }

So, the whole thing is in a div (with an id of “personas”) that has a top and left 1-pixel border. The reason I did this is the individual definition lists inside the div will have bottom and right borders. That means we don’t have any double borders on any side.

Above, I’ve also set the width for each dl and floated it. The dt simply has some text formatting while the dd has its margin eliminated.

Here’s some more styling done to the definitions:

#personas dd.track {   color: #666;   font-family: Georgia, serif;   font-style: italic;   font-size: 110%;   line-height: 120%; } #personas dd.track span {   display: block; } #personas dd.custom {   font-size: 80%;   margin-top: 3px;   padding-left: 22px;   background-position: left 50%; } #personas dd.custom a:link, #personas dd.custom a:visited, #personas dd.custom a:hover, #personas dd.custom a:active {   color: #F88C17;   text-decoration: none; } #personas dd.custom a:hover {   color: #F88C17;   text-decoration: underline; } #personas dl.realestateagents dd.custom {   background: url(../images/icon-realestate.png) no-repeat; } #personas dl.designers dd.custom {   background: url(../images/icon-designer.png) no-repeat; } #personas dl.designers, #personas dl.realestateagents, #personas dl.marketers, #personas dl.superheroes {   min-height: 95px; }

First, we are styling the text of the “track” definition (that’s the one we use to explain what each persona will track). I threw a very non-semantic span on the middle item in each of those. The reason I did that is so I could make it display as block (force it to a new line) to make sure they all line up the same.

A couple items in the bottom row have another definition with the class “custom”. This is to denote we have a custom version of BatchBook for this persona. First, I adjust the font size, margin, and padding. Then, I set the background position of the icons (in the same manner as explained above). Next, I set the link styles. Then, I set the background images for the Real Estate and Designers version. If you’re a designer, you just may find BatchBook for Designers handy.

Finally, I set the minimum height of the bottom row to make room for that “custom” style, even if it isn’t there. That way the boxes all line up on the bottom. (I realize this isn’t completely bulletproof, but these boxes will all have the exact same text in them so box height is easier to plan for.)

Finally, we have the thumbnail photos, which I’m actually going to cover in the next technique.

CSS sprites

I’ve recently been turned on to the wonder that is CSS Sprites. What are they? Well, for examples like the personas box above, I’d need to call 12 graphics. Instead of creating twelve graphics, I’ve created one that looks like this:

Now, I just call the same graphic and only expose part of it, depending which persona it is. Sure, the file is bigger, but calling one image and caching it is a LOT easier on the server than fetching twelve smaller images.

And this is only a small example. Every button in BatchBook is now in one single graphic file (it’s pretty darn big). I just call that one graphic and adjust the background position.

So, here’s how the CSS works for the personas table. First, here’s how we style each photo:

#personas dd.photo a {   float: left;   display: block;   height: 45px;   width: 45px;   text-indent: -9999px;   background: url(../images/personas.jpg) no-repeat;   margin-top: 3px;   margin-right: 8px; }

So, we float it, set a height & width, indent the text (like covered earlier), set a background image, and give it some margins. Right now, we’re calling the same image and position for each. Here’s how we adjust the positioning for each photo:

#personas dl.sales dd.photo a { background-position: 0 0; } #personas dl.freelancers dd.photo a { background-position: -45px 0; } #personas dl.virtalassistants dd.photo a { background-position: -90px 0; } #personas dl.entrepreneurs dd.photo a { background-position: -135px 0; } #personas dl.editors dd.photo a { background-position: -180px 0; } #personas dl.consultants dd.photo a { background-position: -225px 0; } #personas dl.eventorganizers dd.photo a { background-position: -270px 0; } #personas dl.nonprofits dd.photo a { background-position: -315px 0; } #personas dl.designers dd.photo a { background-position: -360px 0; } #personas dl.realestateagents dd.photo a { background-position: -405px 0; } #personas dl.marketers dd.photo a { background-position: -450px 0; } #personas dl.superheroes dd.photo a { background-position: -495px 0; }

So, with each dl, we change the horizontal position by 45 pixels (which makes sense, since the photos are 45 pixels wide!). If I need to add more personas, I just add them to the image, save it again, and add a few lines to the CSS. Done!

Auto-clearing with .clearfix

I use this one all the time, too—including in the personas example above. Say you’ve got a div and you put two elements in it. You float one left and float the other right. You need to clear that div so everything lines up correctly under it and nothing crashes together.

You could make sure the element after it uses a clear: both; style. But, you’d have to remember to put that in every single time. And what if you insert something in between them? It breaks. It is much cleaner to get the divs to clear themselves.

You can do with using the clearfix class. Here’s how it looks:

.clearfix:after {   content: ".";   display: block;   height: 0;   clear: both;   visibility: hidden; }

Now, “after” the element with the class “clearfix”, it will render a “.”, display it as block (forcing a new line), set the height to “0″ (I believe this is to make Firefox behave), hide it, and—of course—clear both!

In your IE6 and IE7 stylesheets, you’ll just have to add this:

.clearfix { height: 1%; }

That will trigger “hasLayout”. I’m not even going to try to explain hasLayout. I’ll leave it to this guy.

Font sizing: keywords & percentages

One of the first things you need to decide when you design a site with CSS is how you’re going to size your text. You’ve got (essentially) three options:

Pixels (px)

Ems (em)

Keywords (small, medium, large, etc.)

Pixels are fine for sizing text. It’s probably what you’re used to. But, there’s a problem.

It is quite common for users to increase the size of text on web pages. Let’s face it, a lot of sites are built by 20somethings with perfect eyesight. I wouldn’t be able to read many sites I created in college. I’m among those that will bump up the font size on sites occasionally.

But, as always, the problem is Internet Explorer. IE won’t adjust the size of text rendered in pixels. Kind of kills the #1 accessibility feature right there.

Ems are a perfectly usable workaround. But as you can see, they can be a bit difficult to grasp. I’ll be honest… I never bothered. I always thought it would be neat to create a completely em-based design so that the entire site zoomed in and out along with the text size. But now that modern browsers are replacing the text sizing option with a full-page zoom, that type of functionality is being handled by the browser. So, it’s a lot of extra work that, quite honestly, I’m glad I didn’t do.

So, what do I use? I use those silly keywords that come with HTML. You know… small, medium, large, etc. That’s me. Well, I actually only really use small. Because I use that as the baseline for my entire site. I then use percentages to adjust sizes accordingly.

First, what does it look like? I start off by establishing small as my baseline.

body { font-size: small; }

Then, in BatchBook I drop that down to 95% right off the bat to shrink it ever so slightly.

div#content { font-size: 95%; }

I actually leave this step out on BatchBlue.com. I guess that’s because when you’re actually inside the app, every pixel is roughly 5% more valuable.

This becomes the default font size. I then use percentages to scale headings up and supplemental text down. So, for example, if I’m adding a little note to a section that I want to appear a bit smaller, I’d mark it up as:

p.note { font-size: 90%; }

Then, to style my headings I scale it up:

h1 { font-size: 180%; } h2 { font-size: 140%; } h3 {font-size: 110%; }

With the increase in prominence of full-page zoom, I’ve considered going back to pixels. I still wouldn’t do a completely em-based design, though. I just don’t have the urge to show off my math skills that much.

Override iPhone text adjustment

I’ll finish with a very simple one. I like to make sure things look good on my iPhone, so I was delighted to find this on the Apple site:

Safari on iPhone adjusts the text size so it’s more readable after the user double taps. After a double-tap, Safari on iPhone gets the width of the block of text and determines the width after a double-tap. Safari on iPhone then determines an appropriate multiplier that is applied to the layout.

Sometimes you might find that automatic text size adjustment doesn’t produce ideal results. For example, text in absolute-positioned elements might overflow the viewport after adjustment. Other pages might need a few minor adjustments to make them look their best. In these cases, you can override the text size adjustment.

Use the -webkit-text-size-adjust CSS property to override Safari’s default text size adjustment. The values for -webkit-text-size-adjust are:

none:

auto:
multiplier percentages:
Only thing is… I find the results from -webkit-text-size-adjust can make things look weird. You just never know. Sometimes a paragraph will appear half the size of an unordered list for no apparent reason. So, on BatchBlue.com and BatchBook, I’ve added this:
html {-webkit-text-size-adjust: none}
And we’re in business! Everything looks like it does on regular ol’ Safari.
Dassit!
So, there you have it. That’s certainly not everything I use. And I’ve certainly used more complex solutions than those. But, the more complex something is, the less likely I am to use it again.
So, tell me dear reader, what are your favorite CSS techniques?
Or, what are you having a hard time wrapping your brain around (in regards to CSS)?

Multi-Author Comment Styling in WordPress

Adam Darowski — Sun, 08 Jun 2008 02:54:19 +0000

It always kind of bugged me a bit that comments I made on my own posts looked exactly like everyone else’s. It took me a long time to dig into how to make them look different, but I finally did. So, here’s how I styled author comments differently on this blog and on the BatchBlue Blog.

First of all, so you can get an idea of what I’m talking about, here’s how comments I leave on this blog look:

And on the BatchBlue Blog, here’s how a comment I leave looks:

First thing I did was find this great blog post by Matt Cutts (now with Google). His solution involved taking this:

from the comments.php page and replacing it with:
echo $oddcomment; ?> Basically, what that is doing is taking any comments left by a logged in user with the user_id of 1 and applying the class “authcomment” to it. That works great if you have only one author. But the BatchBlue Blog has eight authors, with user_id from 1 to 8. Because I wanted to show a photo of the author next to his/her comment, I needed to give each author their own class name. So, instead I used:
if (2 == $comment->user_id) $oddcomment = "comment-riggen"; if (3 == $comment->user_id) $oddcomment = "comment-lynch"; if (4 == $comment->user_id) $oddcomment = "comment-ohara"; if (5 == $comment->user_id) $oddcomment = "comment-darowski"; if (6 == $comment->user_id) $oddcomment = "comment-calhoun"; if (7 == $comment->user_id) $oddcomment = "comment-sweeney"; if (8 == $comment->user_id) $oddcomment = "comment-larson"; echo $oddcomment; ?>" This way, comments I left would get the class “comment-darowski”, comments Michelle left would get “comment-riggen”, etc. And the CSS to make it look like the image above… li.comment-darowski {   background: transparent url(../images/5-thumb.jpg) no-repeat left top;   padding-left: 100px; } And repeat that for each author, swapping out a different photo file name. For this blog, I used a mild variation on the original code by Matt, just naming the style “comment-darowski”. The CSS: li.comment-darowski {   background: #FFC url(images/adam.png) no-repeat 14px 14px;   border: 1px dotted #999999;   padding: 10px 10px 10px 50px; } So, there you are. Have fun!
Why Isn’t There a lh in (X)HTML? Adam Darowski — Thu, 01 May 2008 18:13:19 +0000 Something bugs me just about every time I mark up a list in (X)HTML. There’s no list-head () element. Let’s say I’m marking up a list of my top three Last.fm artists. It would look something like:   Teenage Fanclub   Mogwai   Yo La Tengo Which, of course, would then render like: Teenage Fanclub Mogwai Yo La Tengo But what if I wanted to label that list something like “My Top 3 Artists on Last.fm”. What are my options? I could throw it in a paragraph ( ) tag. But a random paragraph doesn’t really semantically relate it to the list. I could put it in a header tag ( , , etc.). That would at least tell me it is a header to something and not just an arbitrary paragraph. But still, that header isn’t associated with the list itself in any meaningful way (beyond proximity). If I marked this up in a table, I have the option to add a table header (

). Tables are for tabular data, so for this example, I’ll show what the markup would look like if I wanted to make a table of my top three artists with the number of times I played them.


My Top 3 Artists on Last.fm Play Count
Teenage Fanclub 855
Mogwai 755
Yo La Tengo 705

And that would render like this:

My Top 3 Artists on Last.fm Play Count

Teenage Fanclub 855

Mogwai 755

Yo La Tengo 705

Like the header tags and tag, most (if not all) user agents will show the
in bold. Also, since the is a different element than the standard , it is really easy to style headers differently from other table cells.

Best of all, though, the
is nested inside the , meaning that it is explicitly a part of that table. Simply adding a or above the wouldn’t have the same semantic value. Really all I’m wondering is… why don’t we have a to use when marking up ordered and unordered lists? NewBCamp08 Presentation: Introduction to Web Standards Adam Darowski — Sat, 23 Feb 2008 19:22:04 +0000 | View | Upload your own Today (a couple of hours ago, actually) I gave a presentation called “Introduction to Web Standards” at NewBCamp08, a new unconference in Providence. I’m pleasantly surprised by the turnout, considering it was a first time event with minimal marketing used to spread the word (Twitter played a hand, I bet). Here’s my talk about Web Standards, microformat goodness, and some URL as UI craziness. The talk seemed to be pretty well received and had a decent turnout with some excellent questions asked. Presenting at NewBCamp Adam Darowski — Mon, 18 Feb 2008 05:19:57 +0000 Last week, I met up with a bunch of my Providence tech peeps for a breakfast with superblogger Jeff Pulver. While there, he shot this video of Sara Streeter talking about NewBCamp, an unconference happening in Providence this coming weekend (February 23rd, 9am–4pm). I’ll be on the “speaker list” for the event (since it is a first time event, we’re pre-populating as many speaker slots as we can… usually not done for an unconference). I’ll be speaking about web standards, microformats, hackable URLs and all sorts of fun goodies. I’m putting my talk together now (hoping it is more of a “conversation” than a “talk”) and I’m looking forward to it. This will actually be my first time presenting outside of companies I’ve worked for. If you’re in the area, please register and come on down. There’s just a lil’ $10 fee to help cover things like lunch. There are still open presentation slots, so please come and share your wisdom! The Burdens of Being Semantically Sound Adam Darowski — Sun, 16 Sep 2007 05:13:43 +0000 I love semantic HTML. When I see things marked up in paragraph tags that should be marked up in unordered lists, it bugs me. So, I’ve been trying to style a long list of contact information… a pretty prominent piece of code that’s going to get used over and over. While some might do: Email: adarowski@gmail.com or even: Email: adarowski@gmail.com … that just feels wrong. Why? We are defining field types here. This is the dictionary definition usage of a definition list. So, the ideal is:   Email   adarowski@gmail.com So, for not HTML geeks, dl=definition list, dt=definition term, and dd=defintion… um… definition. So, makes much more sense than saying “This is a paragraph.” Using generic tags like paragraph ( ) to describe specific data when more specific tags are available is kind of like walking around pointing at things and referring to them all as “that thing”. It’s not just a thing—it’s a bird, it’s a car, it’s a river. This isn’t a paragraph. it’s a definition list. So, back to my issue. To get this series of definition lists to look right, we had to do a lot of CSS floating. But dammit, I couldn’t nail the design. Things were still overlapping, padding wasn’t rendering, etc. I finally figured out why. When we didn’t have any data, we were returning nothing. So, it would be:   Email    But, when I floated the , the styling wouldn’t render correctly because it was empty. So, here’s the fix: When a field has no data, return a non-breaking space ( ) instead of just nothing. I’ll tell you what, though. Even that feels a bit dirty. I mean, my email address is not “(space)”. But the other two options involved either changing the design (seemed drastic) or ditching the semantically superior definition lists (definitely drastic). I’m happy with our little solution. Ah, the burdens of giving a crap about semantics. A Few Things I Learned About the vCard Spec Tonight Adam Darowski — Thu, 19 Jul 2007 03:12:57 +0000 Today I spent some time coding my most complicated hCard (yeah, I know—it’s not supposed to be hard). Well, I wanted to create an hCard that had EVERYTHING in it—this hCard needed multiple locations, which I haven’t done. So, enter the “type” parameters of the hCard. Actually, it goes back a bit further. hCard is essentially just an XHTML markup version of the vCard format, so I spent some time reading the vCard spec so I could understand it better. So, I’m trying to code this hCard so I can run it through Operator or the hCard parser on Technorati and then pull that vCard into Address Book. So, I code it, but I notice that I’m having issues with the mobile phone number, websites, and email addresses. Mobile was importing as “Other”, websites were all importing simply as “home page” (not part of the spec), and all email addresses were importing as “work”. This was frustrating because I could then edit them in Address Book to be home, work, mobile, whatever. But I wanted it to happen automatically when converted. So, after digging deeper, I am happy (or maybe not) to report these tidbits I found out about the vCard format: It’s not “mobile”, it’s “cell”. This was the easiest fix. Just change “mobile” to “cell”. Blizam. Fixed. There is no “type” for web pages. You can’t denote in a vCard that at web page is someone’s personal site or their work site. Kind of a bummer. Would be nice to be able to list batchblue.com as my work web site and then a few as personal ones, like this one, my Flickr, the TWML maybe. I don’t want those mixed up with work accounts. However, no way to do it—with keeping with the standard. I guess in development, we’ll allow them to set those types in the application, but when the data is exported it will have to revert to the type-less general web page. There is a type for email, but it’s useless. So, email does have a type. But they are INTERNET, x400, pref, and “other IANA registered address types”. Wowee, internet. That helps. So, there’s no work or home, so it’s no good to me. The “pref” means “preferred”, so that could be of some use. But I’m planning to have a primary contact set on the work/home level, not for each individual contact means. So there you have it. A few things I ran into that you may at some point. Naked As We Came Adam Darowski — Thu, 05 Apr 2007 03:44:36 +0000 Whoa, why does this site look so bland (if you happen to be looking at it when this post went live)? That’s because April 5 is the Annual CSS Naked Day! As Dustin says: The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your . This is my first time taking part. I have to say, a year ago I would not have felt comfortable “stripping down” like this. But, I guess you could say… I’ve been working out (on the code front, at least). I’m very proud to get naked this time around. CogBlog Live! Adam Darowski — Thu, 01 Mar 2007 21:00:17 +0000 Today, at a company-wide Brown Bag lunch presentation, I officially launched the CogBlog: The Cognitive Science Weblog. Ever since returning from Webvisions 2006, I pushed for my company to establish a blog. And now it has happened. One nice thing is that it isn’t just a corporate blog for Aptima. Aptima is simply hosting a cognitive science blog for our company, customers, partners, competitors, and other members of the community of interest. I’ve got two posts on the blog as we kick off. First, I provided a Hello World! post to kick things off. A sample: I’d like to brag that I fought a gallant battle to convince Aptima to host a weblog in order to better have a pulse on the human-centered engineering community—but I’m proud to say that there was no “fight” involved at all. Aptima’s line of work (new and exciting technological solutions to mission-critical problems) is a breeding ground for great ideas that should be shared with our customers, partners, competitors, and other interested members of the field. I also provided a more research-based article titled “Distributed Learning for the Army: Cost Effective or Just Plain Effective?” In this post, I talk about how distributed learning might not be simply more cost and logistically effective for the Army, but but also far more effective because it will be using technological means that new recruits will already be familiar with. A snippet: I’d suggest that the benefits are not just about efficiency, flexibility, and frugality. In the not-too-distant future, distance learning could actually be a preferred method of training for new soldiers. Why? Because we’ll be seeing more and more enlistments from the MySpace generation. I would really like to send a big thank you to Brian Oberkirch and Jeremiah Owyang for their indirect support during the planning stages. And of course, Dan Cederholm was very inspiring for the development stage. I recorded the audio of my presentation to the company kicking off the CogBlog, so I’ll see if I can mash it up with my slides to make a compelling archive. So, check out the CogBlog if you get a shot. It’s also semantically marked up, designed to be bulletproof, and kinda pretty if you ask me. Coming Soon: CogBlog Adam Darowski — Sat, 23 Dec 2006 06:17:12 +0000 A while back I mentioned that I was kickstarting the initiative to start a corporate blog for my company, Aptima. There are a few reasons why I haven’t posted here in a while, but one of them is that every spare moment over the last couple of weeks I have spent designing and implementing the blog for my company. Well, today I launched the blog internally on our secure server. It was a very fast development process for a few reasons—the biggest being that I didn’t have a budget for it, so I did it on my own time. I consider it my Christmas gift to the company. We even had a bit of a contest to name the blog. Luckily, I was still allowed to take part. My lone submission ended up winning: CogBlog. We have a large number of Cognitive Scientists at Aptima, so it seemed to be a good fit. So, what are some notes on the development so far?: Multiple Authors: We will have quite a few folks contributing to the blog, and I wanted each blogger to have an identity. One design decision I made right away that seemed to help this was adding a thumbnail photo for each blogger. Also, each author will have an archive page that will also contain a short bio. Excerpt vs. Full Content: On the home page I’m showing just an excerpt of each article. Why? Since we have many bloggers, there is bound to be many different topics on the front page (more so than if it was just one blogger). So, for that reason not every reader will be interested in every topic. Just posting the excerpt will allow readers to see more posts than just the most recent. Popular Posts: I found and installed Alex King’s excellent Popularity Contest plugin. It uses an algorithm to calculate the most popular posts based on views, comments, trackbacks, etc. Should be interesting to see how this plays out over time. Also, (of course) the blog is done with 100% standards. I’ll be looking out for places to add Microformats, but I’m not seeing any obvious choices yet. More to come as we inch closer to launch. We’re anticipating sending the blog live sometime in January. So, stay tuned. I’ll post more info here. NEATTA.org: High Tech for the Low Tech Adam Darowski — Mon, 27 Nov 2006 16:23:26 +0000 Today I launched the latest collaboration with my brother: The New England Antique Tractor and Truck Association web site. Some background. My father’s latest obsession has been acquiring and restoring antique tractors. I was raised in pretty rural Rehoboth, MA (where he still lives) and he and many of his contacts have formed NEATTA, the new England Antique Tractor and Truck Association. At a meeting, my brother and I were “nominated” to design the web site (“Hey Ed, your sons do that ca-raaazy web stuff, right?”). While my time has been pretty thin lately, I took it as a challenge. My portion of the site (design, XHTML, and CSS) took about a grand total of ten hours—very important since I was paid the going rate of zero dollars per hour. (Hey, it’s a dot org.) But in that amount of time, I was able to use the site as a sandbox for some cool technologies. You might say a little too cool for the target audience. I mean, how many blind tractor operators are there? If there are some, though, they will be greeted at NEATTA.org with open arms. Some highlights: Microformats: Yes, an antique tractor site has Microformats. I microformatted the upcoming event in the sidebar as well as the contact information on the Contacts/Links page. I don’t have much contact information yet, though, so all you get are titles and phone numbers. Web Standards: It is a 100% CSS-based design. Semantic Markup: All the underlying code is very easy to understand. We use H’s 1-4, a bunch of definition lists (loving these lately), and of course the unordered list for navigation. Accessible and Usable: Links have semantic title attributes (and warn you when a new window will open), images have their alts, none of that “click here” junk, you are warned with a file format and size when opening a PDF, abbreviation tags are complete, etc. Bulletproof: This was the biggest for me. It’s bulletproof in a few different areas: Content areas: It will expand just fine as the text expands. The DigDug test: Blowing up the text will expose more of the banner. None of the layout breaks. Images off: Alt tags are shown with images off. The banner disappears and is not replaced by text (though you will see an h1 and h2 in the unstyled version). Is this an issue? I think not because the first sentence of text tells you exactly where you are in the event that the banner is not visible. Pretty: Simple, but pretty (at least I think so). I don’t ever use red, so that was another nice challenge. There will be more features added over time, such as: A Style Switcher: Right now, the look mimics the old school red Farmall tractors. I’d like to throw in a style switcher that will change the look to green and yellow for the John Deere fans. Classifieds: We’re going to implement some lo-fi classifieds soon (no backend). If it is popular enough, we will automate it. Message Board: If they think they want one, I’ll put one in. Blog?: Heck, I think we’re pushing it with the user base already. Give ‘em time to digest! I’m very pleased with how it turned out. I’m looking forward to seeing member feedback. Their old site was just a sliced up image, so this should improve things big time. Amazon Using Semantic URLs? Or… Not. Adam Darowski — Mon, 13 Nov 2006 15:43:21 +0000 So, I was on Amazon this weekend. I was looking at an item and noticed the URL had more than a whole bunch of meaningless letters and numbers. A URL actually was looking like this! (line breaks are mine) http://www.amazon.com/Bulletproof-Ajax-Voices-That-Matter/ dp/0321472667/sr=8-1/qid=1163432376/ref=sr_1_1/ 002-5462670-3965612?ie=UTF8&s=books I was like… wow! The title’s actually in there! The rest of the URL is probably some sort of session-related junk. I bet you can type the below URL in and go right to the page, right? http://www.amazon.com/Bulletproof-Ajax-Voices-That-Matter/ AAAAAANNNNTTTT! Wrong. Man, they *almost* had it… CSSEdit: A Thing of Beauty Adam Darowski — Tue, 07 Nov 2006 16:23:10 +0000 So weird… I don’t generally see an app get released that I’m so psyched about that I blog about it. Okay, I’ve never done that. But CSSEdit looks absolutely sweet. Now, will I use it? I’m not sure. My company has bought me Dreamweaver. Dreamweaver is great, but for CSS stuff there’s a bit of overkill there. CSSEdit seems to have everything Dreamweaver offers that is CSS-related (except maybe FTP, don’t think it has that). But apps like this have to be the #1 reason I love the Mac. You just can’t get anything this pretty on Windows. And I’m sorry, but if I’m going to be using something for eight… er, ten… er… I dunno, fourteen hours a day, I don’t want it to make me throw up. It’s not about rounded edges and drop shadows. It’s not about gradients. It’s about gorgeous design—visual design and interaction design. It looks like this guy nailed it. Congrats to MacRabbit. Update: Even the disk image is beautiful. Can’t wait to play with this. Bulletproof Notes (A Day with Dan Cederholm) Adam Darowski — Fri, 03 Nov 2006 02:59:53 +0000 Today, I spent the day at a small 40-person class with Dan Cederholm, titled “Bulletproof Design with XHTML and CSS”. My notes: Reception: It was raining in Boston today, so I headed into the Museum of Science and wiped my glasses clean. As I looked up, there was Dan Cederholm getting coffee. So, I went over to say hello, and to my surprise, he said “Hey Adam.” Now, I met Dan once, in late July. Apparently remember names is a skill much needed in this business. So, it’s always nice when your “web design superhero” knows you by name. I guess if I was a kid and walked up to Nolan Ryan and he said “Hey Adam”, it would be a similar type of thing. Okay, maybe not quite… but still… For those wondering, Dan’s son Jack was a monkey for Halloween. With Dan was Ryan Carson of Carson Systems (they’re puttin’ on the show). So, I was able to meet him as well. I got to thank him for making the Future of Web Apps podcasts available for us that were not able to go. I rode the elevator with the two of them until we got to the conference room, and then I realized I was the first one there. Not bad… got to lay claim to a spot on one of the few power adapters. Also got to meet Gillian Carson, Ryan’s wife and partner in Carson Systems. Carson Systems also runs the wonderful web design resource, Vitamin. I also had coffee and muffins (or for me, tea and a gooey cinnamon bun thingie) with Scott and Justin of Dealer.com. They’re from Burlington, VT and are applying CSS designs to the automotive industry. Kind of a similar situation to me, I suppose—implementing modern web technologies in an industry that generally isn’t associated with them. Part 1: Introducing the Bulletproof Concept Timeline: W3C, Web Standards Project, Box Model Hack, Zeldman’s Designing with Web Standards, Wired News redesign (with all CSS), CSS Zen Garden, Blogs/Corporate Sites/etc. using standards. Bul•let•proof (adj.) Worse-case scenarios Embracing flexibility Design that is difficult to “break” Future-proofing Making it easier to hand off templates to teams and clients Accessibility from semantic markup “Working yourself out of a job” You can hand it off and not have as much follow-up work Bulletproof vest is not 100% protection. Guideline #1: Turn off images. Turn off images to ensure the page is still readable in the absence of graphics. Bulletproof Paths: Content Text size Content amount Editing Content changes Maintenence Environment Device/browser Scenarios Guideline #2: Let go of pixel precision. Take a deep breath. Realize you’re not in complete control. This is OK. Using pixels for font sizes: IE6 and below, users cannot resize. font-size keywords body {font-size: small} h1 {font-size: 130%} setting a base in ems body {font-size: 62.5%} sets a base of 10px Guideline #3: Provide a flexible base for text. Try using keywords or ems for sizing text. Allow users to adjust as needed. IE7 allows pixel resizing. So, pixels should be fine for sites that don’t rely on IE6 and older very much. However, keywords do add a semantic quality to it (“small” on whatever device). Ems just seems like a hack for px. Guideline #4: Use the ‘DigDug Text Test’: Resize text a few notches to see what happens. (get actual text from Dan’s slides) Vitamin uses em based layout. The entire site adjusts when you increase text size. Everything in the entire site is scalable. Dan then went through many specific examples: The bulletproof arrow, the tabs from Cork’d, the NetFlix expanding box. They are examples I’ve seen before, but always good to see again. Guideline #5: Accept the box. Look for simplistic ways (get rest of text) More examples: ClearLeft, Hicksdesign, Odeo, Cameron Moll… Guideline #6: Reuse/recycle. Plan for multiple instances and uses for a particular style. Cork’d ornamentation, Tundro… Microformats.org: hover (doesn’t work in IE6 and below) Break #1: Sat with the guys from Dealer.com again. They’re looking to hire HTML/CSS designers, BUT in the Burlington, Vermont area. So, if you know anyone… Dan started the second session with an indepth look at redesigning the navigation of Lance Armstrong’s site navigation with an unordered list and CSS instead of images. {display: block} is something I hadn’t used. That makes the entire tab clickable instead of just the link. I’ll have to look into this some more because I didn’t use it on my last site but the whole box seems to still be a link. Internationalization: using more code and less images makes translation much easier. Great design does not always equal great web design. Part 2: A Design Uncork’d (Markup) Styleframing (Wireframing with CSS): Saves time if IA and designer are the same person Clickable, usable A head-start on template code Realistic Environment Don’t need to worry about cross-browser CSS issues Worry more about markup structure than optimal CSS Iterative Prototyping: Sculpting an Interface Combination of CSS and image editing Semantic markup: Choose HTML elements based on meaning Separating presentation and content Search engines love it greater importance to headings, etc. Understood by a wider variety of browsers and devices Markup once, redesign more Describe what something is, rather than what it should look like “left” or “right” are not semantic for class names Leverage inheritance Use link title attributes to further explain divs and spans = empty calories Now it’s time for a closer look at the markup of Cork’d. We just combed through the site, also discussing things like Derek Powazek’s site. Some nice semantic discussion ensued. Break #2 (Lunch): Had a very good lunch just now, setting with folks from a bunch of different companies. The bunch included Carson Systems’ own Gillian Carson, who educated us all on the UK and gave us some dirt on Ryan (of course). “Post lunch… it’s always ‘that time’, you know…” Dan says… Microformats for Designers Dan’s definition of Microformats: Person 1: “I’m going to mark up a contact like this. Person 2: “Cool. I’ll do it that way too.” Man, some of Dan’s logos for Microformats that weren’t used are simply gorgeous. I do like what the final logo conveys, though. The three parts are XML, XHTML, and Microformats (gradually from larger to smaller). Dan then show the different tools for identifying and using Microformats (using Technorati’s converter, John Hicks’ user style sheet, and LeftLogic’s bookmarklet). I then asked a question I’ve had about Microformats for quite some time… Dan seemed to think it was a valid concern. However, I think that’s a blog post for another time. Part 3: A Design Uncork’d: (Style) Style property order: I haven’t worried about this much. Maybe I should… Guideline #7: Build for moder browsers first. Future-proof your designs by developing and testing in modern browsers. Later, adjust with patches for others. Multiple style sheets: Markup calls screen.css screen.css calls master.css and ie.css (for all the damn hacks) Article by Molly about management of hacks Filtering CSS by Doug Bowman Guideline #8: Master floats. They can be tricky—but critical for creating independent modules. Containing Floats by Eric Meyer Self-clearing floats: Using div.box:after, can self-clear the float Position is Everything bug fix for IE6 and older IE7 requires “*:first-child+html div.box”… ugh. Think modular CSS Typography Core fonts: Verdana, Arial, Georgia, Times, etc. Lucida Sans, Trebuchet, Helvetica Good for headlines: Georgia Trebuchet Helvetica Arial Next, we went step-by-step through styling the Cork’d layout. For the h1: Dan put an image in the header that would look good if the site was unstyled. In CSS, he positioned that 9999 px off the screen. He then served up a background image (that blended with the background color of the header) within the tag. For the wine table on the home page: For the wine’s region, Dan used an with the class “region” that he could then style and display as block (forcing it to a new line). Also, he used to alternate the row color. He uses to remove the final border to the last item in the table. (this part added in the Rails portion by the developer) Part 4: Beyond Template Design Fixed vs. Fluid When executed well, fluid layouts can be betterproof Can have drastic effects on page design. Each has their place Framing by percentage can give you a manageable line width (along with max-width) Sliding Faux Columns: 70% column, 30% column anchor at 70% from left, 0 from top can’t have one pixel frames (will slide off screen) might want to set max width for over 2000px. What about 3 columns? Uses two background images with Sliding Faux columns technique Attach background images to two divs (#wrap, #wrap-inner) wrap image is orange (right column) and white wrap-inner image is green (left column) and transparent (so they don’t cross over each other) Variable fixed-width layouts: Wider layout for wider browser windows. Javascript swaps class or serves alternate stylesheet when window is narrowed. Predictability for designers, increased flexibility for readers. an example from collylogic.com Em-based layout (elastic): Based on text size (not window size) Guideline #9: The 10-second usability test. Routinely check your pages with CSS turned off, quickly gaugeing its semantic structure. Guideline #10: Validate. Validate markup and stylesheets as you’re building to avoid baffling display issues. Bulletproof dashboard: Disable styles Turn off images Validate your markup and stylesheets DigDug Text Test In Conclusion: Fantastic. The full-day session and interactivity provided a level of detail you can’t get elsewhere. Dan is a great presenter… modest, quietly humorous, and extremely knowledgeable. I’m glad I built on his WebVisions session with this full day crash course. Meeting Ryan and Gillian was also damn cool. Ryan was very excited to talk about what’s in store for Carson Systems—and rightly so. I agree that it is very exciting. I hope to meet up with him at an event in the future. And of course, the other attendees were really cool. I talked quite a bit with Scott and Justin of dealer.com—very cool guys. They picked the right place to look for help on the XHTML/CSS front. I hope they find their designer. So, in a word… awesome. I am now bulletproof. Here are some photos taken from the balcony… Thursday I Shall Be Bulletproof Adam Darowski — Tue, 31 Oct 2006 13:13:09 +0000 Photo by Friedcell Thursday, I’ll be spending the day learning how to be bulletproof from the bulletproof master himself, Dan Cederholm. I met Dan and attended a short session with him at WebVisions in July, but this is an ALL DAY session put on by Carson Systems. For those that don’t know what the heck I’m talking about, Bulletproof Web Design is the title of one of Dan’s books. Bulletproof web design is the philosophy of creating flexible designs that survive in worst case scenarios. It essentially covers three areas in which you can be bulletproof: Content: Flexible at different text sizes and with different amounts of content. Editing: Content changes and maintenance must be simple. Environment: The design must survive different devices (any browser, handheld device, cell phone) and scenarios (images off, printing instead of viewing on screen, no javascript/CSS, etc.) There are best practice and then there’s bulletproof. It takes things to a whole new level. Microformats vs. The Semantic Web (Big S, Big W) Adam Darowski — Wed, 25 Oct 2006 12:15:30 +0000 Dan Cederholm recently linked to an article called Can Your Website be Your API? by Drew McLellan. In that article, Drew linked to his presentation of the same name that he gave at the Web Standards Group London Meetup (podcast feed linked on that page) on October 19. Naturally, I downloaded all of the podcasts and listened to just about all of them on my way home last night and way in this morning. Drew’s talk was one of three related to Microformats. The first was by Mark Norman Francis (of Yahoo) and the second was by Jeremy Keith. Drew’s came third. The theme of the three was a past, present, and future of Microformats and the applications of Microformats. Drew talked about how simply adding Microformats (the formal name for adding semantic, standardized class names to your HTML, essentially) could open your site up to many of the benefits an API gives. Your plain HTML content then becomes machine readable and agents can use your data with very little difficulty. I have explained Microformats to colleagues as somewhat of a “band aid” between “semantic markup” and “The Semantic Web” (the latter being Tim Berners-Lee’s vision of a machine-readable and -usable web). But Microformats seems to be encroaching on some of the ground established by the Semantic Web. The first speaker, Mark Norman Francis, gave a compelling and provocative case for adopting Microformats as a replacement for much of what the Semantic Web is trying to accomplish. First, Mark quoted the Semantic Web’s entry on Wikipedia: For example, with HTML and a tool to render it (perhaps Web browser software, perhaps another user agent), one can create and present a page that lists items for sale. The HTML of this catalog page can make simple, document-level assertions such as “this document’s title is ‘Widget Superstore’”. But there is no capability within the HTML itself to unambiguously assert that, say, item number X586172 is an Acme Gizmo with a retail price of ‚Ç¨199, or that it is a consumer product. Rather, HTML can only say that the span of text “X586172″ is something that should be positioned near “Acme Gizmo” and “‚Ç¨199″, etc. There is no way to say “this is a catalog” or even to establish that “Acme Gizmo” is a kind of title or that “‚Ç¨199″ is a price. There is also no way to express that these pieces of information are bound together in describing a discrete item, distinct from other items perhaps listed on the page. Mark immediately follows with: Those people have never heard of the hListing microformat, which does pretty much exactly that. This is the problem we have—visible metadata. All of the information on the web should be visible to you as a human. The moment you take this information, whether it is already on the web page or about the web page and put it somewhere else, it becomes invisible to you. You then have to go and use other software to extract it. This is bad, from my point of view anyway. Mark then continues to go on to slap around the Semantic Web some more, as well as things like XML namespaces. He certainly makes a case. I’m not going to pretend I know enough about the Semantic Web to say all of the associated technologies can be replaced by Microformats, but it seems that some aspects of both the Semantic Web and APIs are simplified by Microformats. I highly recommend listening to the podcasts. Mark’s is quick—just 21 minutes. Here are the links: Mark Norman Francis | audio | slides Jeremy Keith | audio | slides Drew McLellan | audio | slides More Microformats resources: Official Microformats site and wiki Their post on the WSG meetup Microformatique, a blog about Microformats started by John Allsop Microformats Primer by Garrett Dimon on Digital Web Microformats Search Engine @ Technorati Microformats @ Wikipedia Dan Cederholm’s use of microformats on Cork’d WHOIS?: Brian Oberkirch Adam Darowski — Wed, 18 Oct 2006 18:56:28 +0000 It says a lot when Brian Oberkirch interviews a successful entrepreneur like Ted Rheingold of Dogster and Catster and Ted seems just excited about hearing what Brian has to say. Brian is that good. So, who is Brian Oberkirch? The About portion of Brian’s website describes him as “Social media consultant. Writer. Marketer. Dreamer & tinkerer.” Basically, to me, he is an idea factory. Forget about just social media and marketing, he has great ideas on tech subjects such as microformats and mashups, too. Brian does a series of interviews under the name “Edgework” and he recently rattled off three good ones in a row. In the most recent episode, as I mentioned, he interviewed Ted Rheingold of Dogster and Catster. Dogster and Catster allow people to make web pages for their beloved pets. So, quite the community has grown around these pages. They talk about how the sites fill niche, passion-centric markets. General social networking sites don’t tend to do so well. It helps to have a common interest that the users rally around. Flickr revolves around photo sharing, for example. MySpace started off as a site where users discussed unsigned bands that they were fans of. Now MySpace is far more general, but it is sustaining itself—probably because it is so damn ubiquitous. Facebook is now trying to do the same. They were a community that were bonded together by academia. You needed a .edu email address to be admitted. So, there was a sense of community because everyone had something in common. Now Facebook is letting more users in, and some existing users don’t like it. It will be interesting to see what happens there. Before Dogster, Brian covered Kiva, a nonprofit founded by Matt Flannery. What is Kiva? Let me just let the site explain it: Kiva lets you connect with and loan money to unique small businesses in the developing world. By choosing a business on Kiva.org, you can “sponsor a business” and help the world’s working poor make great strides towards economic independence. Throughout the course of the loan (usually 6-12 months), you can receive email journal updates from the business you’ve sponsored. As loans are repaid, you get your loan money back. There just aren’t many sites out there like Kiva… it’s a great idea. Not only community marketing, but community financing—for a cause. Kudos to Matt. Finally, before those two episodes Brian talked to Chad Dickerson of the Yahoo Developer Network. The main topic was Yahoo’s Open Hack Day. Yahoo used to hold internal contests to see what types of cool hacks and mashups their developers could come up with. Recently, they opened it up to the outside world. Check out the winners here. Brian provides a lot of great ideas about the mashup culture, which is nothing short of fascinating. To see more examples of mashups, check out ProgrammableWeb. To find out more about Brian, check out an interview by Shel Israel on Naked Conversations. I recommend checking it out. One quote from that interview that stuck out to me was when he was talking about how old school marketers will need to be cognizant of the new school “unmarketing” techniques, though it will be a gradual process: I know we talk a lot about dinosaurs and how everything is changing, etc., but I think it will be gradual. If you don’t eat well, keep smoking, never exercise, eventually that will catch up to you. Same thing will apply. You’ll be able to get away with it for a while, but there will be a tremendous opportunity cost. I thought this exact quote could relate very well to what will happen if old school table-based web designers don’t pay attention to web standards. Not to be bandwagonesque, but Jeremiah Owyang also recently had a post about Brian. So, lastly… I need to ask a question. Brian… when are you going to write a book on all of this? Personally, I can’t wait. Boag on Web Standards Adam Darowski — Wed, 18 Oct 2006 12:14:06 +0000 Web Standards are funny. In some circles, it seems that everyone knows about them. In others, it seems like a foreign language. In some environments, it’s starting to make inroads. I’ve actually taken part in conversation with all three groups. In the blogosphere, standards are a way of life. At work, people are starting to wrap their heads around it more completely (myself included… I certainly haven’t been working this way for too long). Among friends and family outside of my direct professional life, standards are a bit of scary wizardry. But they’re not. They’re simpler. They’re easier. And they’re better. There’s just no way around it anymore. Paul Boag does a great podcast called Boagworld that I’ve talked about a couple times. He’s very passionate about standards and decided to do an entire podcast episode (with a slide presentation) devoted just to web standards and how they help business. It’s called The Business Benefits of Web Standards. What’s different about what Paul does is that he tries not to be too tech-heavy. In fact, this presentation was painfully NON-techie for me. But what it does do is really explain the history and benefits of web standards in ways that directly make sense for business. You need not need to code any HTML or anything to understand this podcast. It’s really for everyone involved in any type of management aspect for a website. Enjoy. A Day with Dan Cederholm… And How to Pimp Yourself out to Your Company Adam Darowski — Fri, 29 Sep 2006 20:36:26 +0000 Ah, to remember the excitement when I was alerted via my feedreader that Dan Cederholm was giving a daylong session in Boston… Okay, everyone knows that Dan is my “web design superhero”, but I’ve been dying to get to a Carson Workshop for like… ever. They have a ton of them overseas and in San Francisco, but the combination of a Carson Workshop… In Boston… featuring Dan Cederholm was too much to pass up. So, I immediately wrote an email to my entire company telling them about the session and what the benefits would be of me going. And then I asked for money. See, I need to find projects to fund me to go to such things (like WebVisions). Luckily, the funding came through, because I had gone ahead and booked it anyway (hey, there’s only 40 seats at this thing). I offered project managers whatever they needed in return—a report, code samples, and even eight hours of clapping erasers. This brings me to another topic that is related. I have started sending out emails with “Adam the Aptima Scout” in the subject line. My company likes to see everyone go to a conference or a seminar every year for professional development. But with everything that’s going on in the web community, one is just not enough. So, I’ve been aggressively persuing funding to go to more. Call it personal marketing. I’ve already identified at least three conferences I want to go to next year (SXSW, @media, and WebVisions). A month or so ago, I sent out my first scouting offer, for Refresh ‘06. I was interested in that one because Paul Boag, Andy Budd, Cameron Moll, Jeremy Keith, and many others I’d love to see are going to be there. There was a bit of interest in sending me to that one, but whereas it is pretty much all Web Standards, it was a pretty small group of project candidates. Luckily, Cederholm’s session is just one day (no hotel stays needed), in Boston (can take the T, no planes), and is relatively inexpensive ($495). So, this has been my first success in my “Adam the Aptima Scout” approach. I’ll try it again next with SXSW. That’s a bigger conference with much more diverse panels, so hopefully that will help me get multiple projects interested in order to cover costs like flight and hotel. Anyway, you can expect me to blog all about the session with Dan. It’s November 2… and I can’t wait! WebVisions 2006 Recap: My Presentation Adam Darowski — Thu, 24 Aug 2006 18:12:07 +0000 Two days ago, I gave my brown bag presentation titled WebVisions 2006 Recap. It was an internal Aptima presentation shared over video conference (Woburn, MA and Washington, DC). The talk lasted about 38 minutes and included topics such as web standards, semantic markup, microformats, community marketing, corporate blogging, decentralized living, bulletproof web design, and social information architecture (all related back to the sessions I attended). The feedback from the presentation has been quite good—it was my first presentation while flying solo (did one as a duo before… another as a quartet). To give you an idea of the audience, most of these technologies were absolutely brand new to folks within Aptima. So, some of it may be a little high level. But I find all of it very interesting and it was a pleasure to make the presentation. View the Presentation (audio with slides… 18.7 MB Flash file) Listen to the Presentation (audio only… 17.4 MB mp3 file) I wanted to throw some thanks to Brian Oberkirch, Erin Julian, Nick Finck, and Will Pate for the use of their photos in the presentation. Also, big thanks to Aptima for sending me to the conference! Lunchtime Consultation: How Do I Get Started With CSS? Adam Darowski — Mon, 21 Aug 2006 16:42:07 +0000 A friend of mine just IMed me asking how to get started with CSS. Now there’s a loaded question if there ever was one. Sometimes when you become so immersed with something, you just have no idea how to begin to explain it to someone. Luckily, my friend (we’ll call him John, because his name is John) did have a specific example to start with. He wanted to get all the fonts on his site to be 12pt. He’s using the default font sizes, but on modern browsers (to John, a modern browser is anything beyond 1.0) the text was looking too big (like, 16pt). After a “but 16pt font sizes are soooo Web 2.0″ joke, I figured his example would be a good place to start. I told him the quickest way to get his fonts at 12px would be to put this in his document’s : What that would do is take everything on the page that’s in a tag and make it 12 pixels tall. Mission accomplished, no? Well, John has tags everywhere. And nothing is in a paragraph tag. And this needs to span across multiple files. Okay, that’s a few things. So, first things first: let’s get this style in an external style sheet. Within the of each page, John will need to place: What that does is link to an external style sheet that all pages can share called css.css. Unfortunately for John, I’m gonna make him change his tags to header tags (remember them? to ?) John’s web site title is currently an image. We’ll work on changing that in the future, but let’s reserve the for that. He has a nice green header that is a perfect . I see some bold text that is just saying to me. Beyond that, we have paragraphs. Oh, and a sidebar. We’ll get to that in a bit, though. So, for John’s external stylesheet, I’m seeing this: h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #338866; } h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000000; } The paragraphs are 12pt Verdana with the being just a bold version of the paragraph. The is a bit bigger and… greener. Now, this will also make his code much cleaner and easier to understand. I understand some consolidation can be done with the styles here. But this is just for example’s sake. This isn’t bad for a lunchbreak consultation. John has a sidebar with some smaller gray text. He can handle this a couple of different ways. He could set these as paragraphs that have a “class” style associated with them. So, this would override our default 12px black Verdana paragraphs. Or, we could make it a bit more semantic by adding a tag for the sidebar and then putting the text in another (for the bold header) and for the remainder of the text. I like this because it will allow us to visually differentiate the sidebar content (you’ll see) but it makes the markup structure consistent. So, around the sidebar content, let’s put: (sidebar content goes here) Now, if we set the code in and tags, we’ll be all set. Well, actually what will happen is we’ll inherit the styles that we already set for those tags. What we can do is set new styles for and that only appear in the “sidebar” div. This is how: #sidebar h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #666666; } #sidebar p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #666666; } And there it is. So, John’s site still needs updating in other areas to make it more standards compliant. First of all, the table layout has to go in place of floats. That, and the image-based navigation can be easily recreated with an unordered list and some styling. But this is a good first step. Everybody should be using CSS for text formatting. CSS layout is a little trickier (especially if you are a table whiz), so I’ll cut him some slack there. For now. CSS: Now 10 Years Old Adam Darowski — Mon, 31 Jul 2006 12:39:58 +0000 As we are now in 2006, the Cascading Style Sheet is now ten years old. Eric Meyer, widely considered to be the #1 guru in CSS design, recently gave a keynote at the @media 2006 conference in London titled “A Decade of Style” to commemorate the history of CSS. The folks at @media have been kind enough to start releasing the seminars as podcasts this month. It’s a good listen if you want to go beyond the standard tutorials and how-tos and really get a look at the history of the technology. Podcast available here. I’m still waiting for the WebVisions podcasts to go up. You’ll be alerted here when they are available. Update: Again, as soon as I post something, something cool hits my RSS reader. Vitamin just send out this list of conference podcast feeds. I love this trend of releasing conference sessions for those who could not attend (or those that want to save a reference).