Let me say up front—the gorgeous illustrations were not done by me. They were done by Morgan. I just framed them with a nice new site. The illustrations come from the Gustafer Yellowgold DVDs. They are “moving books” (lightly animated illustrations) set to music recorded by Morgan and his band.

And it’s fantastic.

So, how did I become the new web guy for Gustafer Yellowgold? I was already a huge fan when I recorded my kids singing and dancing to the classic Gustafer track “Getting in a Treetop”. Of course, I YouTubed it:

Who happened to find this little movie on the internet? Why, Gustafer, of course! Actually, it was found by Rachel Loshak, who does booking and management for Gustafer (and also happens to be Morgan’s wife and an amazing singer/songwriter/bassist herself). From my YouTube profile, she ended up on my site, saw that I did web work, and asked me to give Gustafer a hand. It couldn’t have been easier. My kiddos are lead generation machines!

So, what did I do?

• Axe the Flash. This was priority #1. The old site was done completely in Flash, which made it very difficult to maintain.
• Better popups. The Flash pages triggered new windows when you clicked on items in the artwork. I opted for a jQuery-powered lighbox instead. Now you don’t have to leave the page or worry about window management to watch a video/see an image/etc.
• New layout. The old site was optimized for 800×600. I instead optimized for 1024×768, and the stats show that even that is conservative.
• Lots of updated content. With everything now done with HTML/CSS/images, we were able to do a big content overhaul on the site. There are new places to explore (like the Pterodactyl’s cave!), more videos, more music, more games, and more… everything!

There’s plenty more to come, too.

This coming Sunday (October 24), I’ll finally get to meet Morgan and Rachel in person, as they’ll be performing at Club Passim in Cambridge, MA. You should come! (or at least try to win free tickets!)

Lastly, here are a few of our favorite songs:

Getting in a Treetop, the original…

Butterpond Lake, a great one from the most recent album…

Pinecone Lovely, I love hearing my little guy sing this…

And finally, Your Eel, the one we sing before bedtime…

Check out the site, and come on Sunday if you’re nearby!

Yesware is a web-based email application geared towards salespeople. The app is still under development, so I was brought on to create a simple marketing site (okay, really just a page so far) to establish a presence. Today, a screencast I recorded was added to the page.

It’s a simple site that will see more added to it over time. The team—Matthew Bellows and Cashman Andrus—has been great to work with. I’m very excited to see how Yesware evolves.

Okay, first things first.

What is Dribbble?

Dribbble is a site where designers can share small screenshots of what they’re working on. “Shots” (or, individual screenshots) are limited to 400×300 pixels (it’s like 140 characters, but for images). Dribbble also happens to be run by two of the nicest guys I’ve ever met, Rich Thornett and Dan Cederholm. One of Rich’s first tasks when moving to Dribbble full time was to create an awesome API. He certainly succeeded, and Liiikes is just one of many apps to take advantage of the API already. (You can see more examples at Rebbbounds.)

And… What is Liiikes?

I’m a baseball stat geek. Dribbble is full of basketball metaphors, but it’s also full of numbers—shots, followers, likes, pixels, etc. I wanted to see how we could use these numbers to see who was posting the highest quality content to Dribbble.

Also, Dribbble is not a completely open community—you need to be invited, or “drafted”. So, there’s this interesting dynamic that everyone on Dribbble is there because someone else brought them in. I wanted to see who was responsible for bringing in the best talent, so I’m calling those folks Dribbble scouts.

I’ll admit, the scouts idea was inspired by Craig Henry. I drafted Craig into Dribbble (we have some mutual friends and I saw he was seeking an invite). Turns out, he’s a mega-superstar on Dribbble and I was proud that I drafted him.

Both the top players and top scouts are rated by “Likes Above Average”.

What’s Likes Above Average?

From the site:

Likes Above Average (LAA) is the metric used to build the Liiikes leaderboards. Inspired by the Wins Above Replacement model that’s all the rage in the baseball sabermetrics community, LAA calculates how many more likes a Dribbble player receives than the average player.

Craig Henry happened to rate as the #2 player on all of Dribbble, with 49.0 LAA (I’m writing this with pre-launch numbers… LAA totals can and do change daily). This puts the MVP of Dribbble as Anton Zykin (with an LAA of 53.5). Anton has posted 36 shots and received 2,162 likes. That’s a lot of likes.

With the help of Craig, I actually turned out to be the #11 scout (as of 9/23):

It should come as no surprise that the #1 scout is Mr. Dan Cederholm.

Thanks, Jeffrey!

I also wanted to thank my good friend Jeffrey Chupp, my developer partner on Liiikes and the guy who sits to my left at PatientsLikeMe, for helping me take this rather arcane idea and turn it into what I think is a pretty sweet app. I already knew from my day-to-day work that Jeffrey was an awesome developer to work with, and that certainly was true during the development of Liiikes.

Remember, it’s just a number.

I know likes aren’t a true measure of the talent or value on Dribbble. Take baseball statistics—the league leader in home runs isn’t necessarily the best power hitter. He just happens to be the guy who hit the most home runs. Likes aren’t a true measure of talent. It’s merely how many times someone clicked the like button, however you want to interpret that.

So, please enjoy Liiikes! I’d love to know what you think.

Update: Here’s Jeffrey’s blog post about the Liiikes launch.

I wrote a wee bit more about the project on the portfolio page for it. Here’s a full screenshot so you can take a look:

Visit site »

(full size image)

Upon joining PatientsLikeMe, I learned that I’d be shaking up this comfy part of my life as well. PatientsLikeMe is also a Rails app, but the views are built in Haml and the site’s CSS is built with Sass. (We use Git for version control, but that’s a post for another time.)

What the heck are Haml and Sass?

According to Haml’s About page, Haml is:

Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.

And Sass is described on its About page as:

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

While it felt a bit overwhelming to learn a new way to do what I’ve been doing for years, Haml & Sass definitely make sense for me. I’m a designer/developer, but definitely approach things from more of a development side. I get just as excited (if not more) about a clean document structure and re-use of style elements as I do about a gorgeous look and feel. Anything you want to do in HTML & CSS is possible with Haml & Sass—it’s just a more efficient way of getting there. And there’s so much more!

What do Haml and Sass look like?

The best way to get what it’s all about is to take a look at some code. Here’s a codeblock of HTML/ERB, taken directly from the Haml tutorial page:

<div id="content">
  <div class="left column">
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>


Here’s how that block would look in Haml:

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"


Pretty badass, huh? Much cleaner. I thought I’d miss writing full markup. But I’m also a huge fan of nicely indented, properly closed markup. The fact that Haml’s indentation is what defines the document structure is awesome. You don’t have to hunt for closing </div> tags and whatnot. I recommend reading that entire tutorial (it’s quite short).

While Haml is really cool, Sass is what I’m really psyched about. I work in Sass a lot more than I work in anything else now, and I’m still discovering ways that it vastly improves my CSS development.

Here’s what a very simple bit of Sass code looks like:

h1
  height: 118px
  margin-top: 1em
.tagline
  font-size: 26px
  text-align: right


Pretty much expected, this would render as:

h1 {
  height: 118px;
  margin-top: 1em;
}
.tagline {
  font-size: 26px;
  text-align: right;
}

“Huh? What’s the benefit there?” you might ask. I mean, all it does is remove the semi-colons and braces!

Oh, but wait.

Things that make Sass kick ass

Buckle up for this part. Today, I want to tell you about three thing that will blow your CSS-writin’ mind.

1. Nesting
2. Variables
3. Mixins

Nesting

In one of my recent (and favorite) style sheets, I started using much longer selectors not only to ensure my styles are targeting the right elements, but also to be visually manageable in my style sheet.

Take this block of styles targeted for a specific page on the site:

body#home.partners div#content h1 { margin-bottom: 20px; }
body#home.partners div#content h2 { background: url(../images/press-head-bg.png) repeat-x top left; border-top: 1px solid #4097E5; padding: 8px; }
body#home.partners div#content p { font-size: 90%; }
body#home.partners div#content div#main dl { position: relative; min-height: 160px; }
body#home.partners div#content div#main dt { margin-left: 170px; border-top: 2px solid #4899E9; padding: 4px 0; }
body#home.partners div#content div#main dt a { color: #000; font-weight: bold; }
body#home.partners div#content div#main dd { margin-left: 170px; font-size: 85%; }
body#home.partners div#content div#main dd.logo { position: absolute; top: 0; left: 0; margin: 0; }
body#home.partners div#content div#main dd.logo img { border: 1px solid #999; }

Yeah, I one-lined it. I’ve been into that lately. But Sass doesn’t support it (yet, but it’s coming).

One of the reasons I like one-line CSS is that it’s easy to read the selectors. But why keep typing the same things over and over? The same thing can be accomplished in Sass with this:

body#home.partners
  div#content
    h1
      margin-bottom: 20px
    h2
      background: url(../images/press-head-bg.png) repeat-x top left
      border-top: 1px solid #4097E5
      padding: 8px
    p
      font-size: 90%
    div#main
      dl
        position: relative
        min-height: 160px
        dt
          margin-left: 170px
          border-top: 2px solid #4899E9
          padding: 4px 0
          a
            color: #000
            font-weight: bold
        dd
          margin-left: 170px
          font-size: 85%
          &.logo
            position: absolute
            top: 0
            left: 0
            margin: 0
            img
              border: 1px solid #999

Longer? Yes. Easier to read? Hell yes.

This is pretty straight forward. If you indent an element under another element, you’ll chain them together. The output in CSS can get larger as you nest deeper and deeper, but the Sass file becomes much easier to manage. Your web development brethren may gasp if they peek at your stylesheet, but you’ll be able to write and manage it much faster in the Sass file.

One thing in the above code block that might look unfamiliar is the &.logo. What “&” means is “repeat the parent selector”. In this case, one parent is dd, so the selector becomes dd.logo. You can do many different things with this, such as putting &:hover after an a or even putting * html & nested beneath a selector to target IE6.

Wait, what? Mix IE hacks in with your main CSS? Yes, I realize that this invalidates your CSS and goes against some “best practices”, but trust me—it’s easier to manage. When you keep browser hacks in a separate style sheet, you forget about them until you’re actually thinking about that browser. A seemingly harmless tweak to your main stylesheet might break something in your IE stylesheet. But outta sight, outta mind and you don’t know it until a user complains. By keeping the IE hacks along with the main CSS, you can see how your change might affect other browsers.

If you’re still worried about invalidating your stylesheet, well… that means you haven’t even tried CSS3 yet. So, really, I got nothing for ya here.

In your Sass, I’ve started targeting different versions of IE along with the standard style like this:

h1
  padding: 1em
  *padding: 2em / targets both IE6 and IE7, does not target IE8
  * html &
    padding: 3em / resets IE6 in case it needs to be different from IE7

The * right before the selector will target IE6 and IE7 but leave IE8 alone (well, technically all browsers read that as an invalid line an ignore it… except for IE6 and IE7). The trusty * html hack will only target IE6. A slash, as you probably guessed, starts a comment in Sass. This IE targeting method may not be the prettiest thing in the world, but it keeps everything in one place so you easily manage all browser styling at once. When you change the padding of the h1, it provides you with a reminder to check other browsers where you served targeted tweaks.

Last thing about nesting, you can also use it for properties like font, border, margin, etc. Like so:

h1
  border:
    color: black
    style: solid
    width: 1px

That would produce:

h1 {
  border-color: black;
  border-style: solid;
  border-width: 1px;
}

Of course, you may prefer to write this out in shorthand (h1 { border: 1px solid black;), but there are times when doing it this way can come in handy.

Anyway, let’s move on to some more awesome.

Variables

There was a time when I thought variables in CSS might be the only thing that could make it any better. And variables are indeed awesome. Variables are a great way to store values that you’ll use over and over again, such as colors, fonts, graphics, or anything else reusable in your project.

Here are some variables we set for colors that indicate severity:

!severity_normal = #CCC
!severity_none = #1DAE49
!severity_mild = #FEDC32
!severity_moderate = #FF8F02
!severity_severe = #D93019

To call one of these values, simply do this:

a
  &:hover
    background-color = !severity_mild

Huzzah!

Now try this—it’ll blow your mind: Just set your target page width. Then use that variable and perform simple operations on it to calculate the widths of your layout’s columns!

!page_width = 1000px
…
#main
  width: !page_width * .7
#sidebar
  width: !page_width * .3

This turns into:

#main
  width: 700px;
#sidebar
  width: 300px;

Looks simple, but IMAGINE THE POSSIBILITIES! But there’s actually one more thing that will really rock your world…

Mixins

If Sass mixins were a rock band, I’d have the tee shirt. What are they? The description from the Sass tutorial says:

Mixins are one of the most powerful aspects of Sass. They allow re-use of styling – properties or even entire rules – without having to re-write them or move them into a non-semantic class.

To define a mixin, just write =mixin-name with some Sass nested underneath. To use it, write +mixin-name where you want it to be expanded.

Mixins can be incredibly simple or very complex. Here’s a pretty simple one:

=alternate_font
  font-family: 'Lucida Grande', 'Lucida Sans Unicode'
  letter-spacing: -.03em

Say you’ve set a default font on your body, but want to apply an alternate font here and there. Instead of adding those fonts every time, just put it as a mixin. This could also be done as a variable, but since we’re also tweaking the letter-spacing, it is better to do it with a mixin. The best part of mixins like this one is that they eliminate the need to add frivolous class names that are only used for style targeting.

Let’s apply it:

h1
  +alternate_header_font

And that will render as:

h1 {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode';
  letter-spacing: -.03em;
}

You can also pass arguments within mixins. If you’re into rounded corners, ever get tired of defining the -moz and -webkit properties every single time?

Try this instead:

=border_radius(!radius)
  :border-radius = "#{!radius}px"
  :-moz-border-radius = "#{!radius}px"
  :-webkit-border-radius = "#{!radius}px"

Then when you want to round the corners of an element, just add this:

#sidebar
  border: 2px solid #666
  background-color: #CCC
  +border_radius(8)

That will add 8-pixel rounded corners for all (supported) browsers. I recently worked on a design that was so well-rounded you could call it Alan Trammell. This mixin alone would have been a breeze to use and very much welcomed.

Okay, one more example because this was a very handy one I used the other day. I had a couple links I wanted to place a divider pipe between. You know, the type of treatment you often see in footers. I saw that Cris had already written a mixin for it called “divider_pipe”, and it looked something like this:

=divider_pipe(!x_position=0, !y_position=50%)
  background:
    image = "url(/images/divider.gif)"
    repeat: no-repeat
  position = !x_position !y_position
  &.first
    background-image: none

You catch that? Awesome! Basically, you just apply it to the li in Sass, like this:

#footer
  ul
    li
      +divider_pipe

What that will do is place the divider on the left side of each li, but also look for an li with a class of “first” and turn off the background image for that one. Perfect! Once all our target browsers support pseudo-elements, we’ll be able to simply use a :first-child, but until then, this worked like a charm. You’ll notice you can also pass in some arguments here to alter the x- and y-positioning of the pipe on the fly.

Sass mixins can be as simple or as complex as you’d like. They can be used for just one rule you want to add over and over (without adding frivolous class names). They can be used for content boxes you use over and over that you need to receive arguments, variables, and all sorts of custom rules. Mixins are as powerful as you want to make them.

And what do I think?

Haml is pretty simple. I like it because it leads to a clean document structure, proper indenting, proper tag closing, etc. But Sass is the real life-changer, here.

I’ve gotten used to Sass enough that I keep forgetting to put semicolons in my plain ol’ CSS. While the nesting makes Sass incredibly easy to manage for the developer, it does lead to some less than beautiful output. But I think that is a fair tradeoff because it makes things so much easier to manage.

The same can be said for managing targeted browser tweaks inline with the standard Sass. It’s not the traditional way of doing things in CSS, but keeping it all together ensures less conflicts in the end.

In a way, I’ve needed to let go of some of the artificial “best practices” instilled in me while learning CSS. But the reality is that Sass comes with a whole new set of “best practices” that, in my opinion, lead to better results.

And that’s what matters most.

@font-face in Internet Explorer

Internet Explorer, somewhat shockingly, supports @font-face. I did most of my testing with the Open Type Format (.otf). Microsoft actually developed this with Adobe, yet doesn’t even support it in their @font-face implementation. Lame, I know. However, they do provide a free tool to convert your .otf fonts into a format Internet Explorer can use.

@font-face in Chrome

Since Google Chrome is essentially WebKit, I was surprised to see that @font-face isn’t supported. But in a great post by Paul Irish called Bulletproof @font-face syntax, I saw that Chrome will work with an SVG implementation. I didn’t try it, but it sure sounds cool.

There are a lot of web fonts out there

Font Squirrel has released hundreds of @font-face kits for free download. These kits include four font formats (making them compatible in Internet Explorer and Chrome) and the HTML and CSS to drop into your web site. Easy, breezy, beautiful web fonts. Well, except for the many, many ugly fonts on that page…

Typekit flashes the fallback fonts briefly while your pretty fonts download

Not really Typekit’s fault, but as the Javascript loads your custom fonts, your users will briefly see the fallback fonts (the fonts you told Typekit to use in the event that the user’s browser doesn’t support Typekit). In some cases, this could actually cause new linebreaks and other jarring shifts. Usually it won’t be anything serious, but it will likely be noticable. Kind of a bummer. Looks like they’re working on a solution, though.

Have you played with web fonts? Anything you ran into you’d like to share?

I increase the font size of at least 1/3 of the web sites I visit.

You can joke about my declining eyesight all you want. But you can’t ignore this:

What 12px Text Used To Look Like

On a 14.1″ PowerBook G3 (Pismo)

What 12px Looks Like Now

On a 15.4″ MacBook Pro

Why?

Pretty shocking huh? Why is the text getting smaller? Because notebook screens are staying the same size (or getting smaller) while screen resolution gets sharper.

My beloved PowerBook G3 Pismo had a 14.1″ (diagonal) screen. It had a 4:3 aspect ratio and maxed out at 1024x768. The actual height and width of the screen was 8.44″ tall and 11.25″ wide.

My new MacBook Pro has a 15.6″ screen. It has a 16:9 aspect ratio and maxes out at 1440x900. The actual height and width of the screen is 8.16″ tall and 13.06″ wide.

So, the new MacBook is wider, but actually shorter (over a quarter of an inch shorter, in fact). Despite the screen being shorter, it still vertically displays 132 extra pixels. So…

The pixels are getting smaller.

12 pixels on the new MacBook Pro translates to 0.109 inches. On the Pismo, 12 pixels measured at 0.132 inches. Doesn’t sound like much, but when you start stacking line of text upon line of text, it adds up. And I start page zooming.

For more on this topic, visit the Large Font Coalition.

BatchBook

First was the refresh of BatchBook. We had a few goals in mind that I wrote about on the BatchBlue Blog post. Among them:

• Making the primary column stand out a bit more. The two columns had too similar a look before and lacked visual hierarchy.
• Removing some redundant headers and other extraneous markup.
• Creating a more useful footer with a context-sensitive help section (FAQs and Screencasts depending on where you are in the app).
• Moving the search to the header, allowing us to bring up the sidebar content some.
• Making it less blue—there was a lot of it. The colors are toned down a ton.
• Getting a bit more of “me” in there—make the full transition to a Georgia/Lucida Grande font deck and getting some serious gray action in there.

And the results. Here’s the contacts page:

(full size image)

And here’s what an individual contact page looks like:

(full size image)

If you haven’t noticed how cool that social media integration is, I encourage you to look hard. Or, sign up even.

BatchBlue.com

And while I’m on the redesign kick, why stop with the app? Off to the marketing site I went. Here I worked with some great design concepts by the lovely and talented Mikey Hougland to do a home page/footer refresh. Again, a goals list:

• Getting a screen shot front and center. If you’ve got it, flaunt it.
• Getting the screencasts more publicity. Despite the fact that the screencasts lived on the third level navigation, people were finding them like crazy. The people want it, so we bubbled them up to the top. Of course, now I gotta do a new set post-refresh!
• Removing the sidebar to let the design breathe a bit better.
• Building out the footer (similar to BatchBook) and reducing some navigation into footer links.
• Getting rid of what I affectionately call “the goddamn starburst” and replacing it with the client login.
• Going full-out Georgia/Lucida Grande.

And the results:

(full size image)

And there we have it. I’m curious to hear what you think!

I figured I’d share some markup & style for a couple of page elements. Hopefully you’ll find it useful.

“Tweet this page” button

In this day and age, “Tweet it” buttons are becoming more and more important. Not only does a Tweet it button give users the ability to quickly post a page to Twitter, it reminds them to do so. There are online services out there that will make Tweet it buttons for you. Might as well roll your own. Here, clicking the “Tweet this page” button will send you to Twitter (if you’re logged in) and prepare a message that says “Small businesses are taking over the Internet! The Small Business Web is here. http://thesmallbusinessweb.com”. That’s actually super easy to do. The markup:

<p id="tweet-it"><a href="http://twitter.com/home?status=
  Small+businesses+are+taking+over+the+Internet!+The+Small+Business+Web+is+here.+
  http://thesmallbusinessweb.com">Tweet this page</a></p>

(I’ve added line breaks for cleanliness.) Basically, the hardest part is typing a “+” instead of a space.

Here’s how I styled it:

p#tweet-it a { display: block; position: absolute; top: 0; left: 20px; background: #004A8D url(logos/tweet-it.png) no-repeat 4px 50%; color: #FFF; margin: 0; padding: 3px 10px 5px 44px; text-decoration: none; }
p#tweet-it a:hover { background-color: #333; }

I wanted the whole blue box to be a link instead of just the text. So, I applied display:block to the link. Next, I absolutely positioned the link to it sticks to the top of the page. That’s where the top: 0 comes in. I added some space to the left, hence the left: 20px.

Next is the background. This encompasses the color (#004A8D), the birdie graphic [url(logos/tweet-it.png)] and the positioning (4px from the right of the box, 50% vertical positioning within the box). And of course, we don’t want the bird to repeat, so no-repeat. Then, I set text color and padding and yanked the underline from the link. The hover state simply changes the background from blue to gray. Pow, yer done.

“Business card” footer

Seriously, aren’t they cute? Here’s the markup on one of those little guys:

<dl id="shah" class="vcard">
  <dt class="fn">Sunir Shah</dt>
  <dd class="title">Chief Handshaker</dd>
  <dd><a class="url org" href="http://freshbooks.com">FreshBooks</a></dd>
  <dd><a class="email" href="mailto:sunir@freshbooks.com">sunir@freshbooks.com</a></dd>
</dl>

Yes, Microformats! This is the perfect case to use hCard—and it’s so easy. Each business card gets it’s own “vcard” class (that’s the class that says “hey, everything inside this element is one set of contact information”).

If you’re not familiar building an hCard, it’s all about applying the right class names to certain bits of data. Definition lists are great for this because you can basically throw a class on any single definition. The “fn” class means “full name”. The “title” class means “job title” while “org” means “organization”, or company that the person works for. I doubled up “org” and “url”, applying both classes to a link. That’s because the text that is hyperlinked is the org and the href is the url for that org. A two-fer!

Finally, the “email” applies to “email address”. I could have hyperlinked Sunir’s name with his email address using the same process above (<a class="fn email" href="mailto:sunir@freshbooks.com">Sunir Shah</a>), but in this case I wanted the email address visible (like a business card!).

That was fun. Let’s style it:

div#contacts dl { border-top: 1px solid #CCC; border-left: 2px solid #CCC; border-right: 2px solid #CCC; border-bottom: 6px solid #CCC; float: left; padding: 5px 5px 5px 52px; margin: 0 1% 0 0; }
div#contacts dt { font-weight: bold; }
div#contacts dd { font-size: 85%; margin: 0; padding-top: 2px; }
div#contacts dl#shah { width: 11%; background: #FFF url(photos/shah.jpg) no-repeat 5px 7px; }

Each definition list (each business card) gets these fancy borders set, is floated left (so they all line up nicely), and gets some internal padding. The padding-left is set to 52px to accommodate our 40px thumbnail images. There’s a 1% margin-right to give them a bit of breathing room.

Next, we simply bold the definition term (in this case the person’s name). Each definition (bit of contact info) is set to 85% with a bit of padding on top. Finally, each definition list is given it’s own thumbnail image thanks to the unique ID. I also gave each list a unique width (since some names are short and others are much longer).

So, there you have it—a new portfolio piece and a couple little markup & style examples. I’m curious what you think of the page.

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>&lt;h1&gt;Portfolio&lt;/h1&gt;<h1>. I wanted the nice, clean <h1>Portfolio<h1>. 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:

<dl id="active-projects">
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/batchbook/">BatchBook</a></dt>
    <dd>Small Business <abbr title="customer relationship manager">CRM</abbr></dd>
    <dd>For <a href="http://batchblue.com/">BatchBlue Software</a></dd>
    <dd>May 2007&ndash;Present</dd>
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/batchblue/">BatchBlue.com</a></dt>
    <dd>Corporate Website &amp; Weblog</dd>
    <dd>For <a href="http://batchblue.com/">BatchBlue Software</a></dd>
    <dd>May 2007&ndash;Present</dd>
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/tabigail/">Tabigail</a></dt>
    <dd>A simple, gray, one-column, socially savvy WordPress theme</dd>
    <dd>For the WordPress community</dd>
    <dd>December 2008&ndash;Present</dd>
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/baseballtwit/">BaseballTwit</a></dt>
    <dd>Blog posts and Twitter tweets about baseball stats and history</dd>
    <dd>For the sabermetric community</dd>
    <dd>December 2008&ndash;Present</dd>
</dl>

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 <dl> tags.

dl#active-projects:before { content: '<dl id="active-projects">'; }
dl#active-projects:after { content: '</dl> <!-- close #active-projects -->'; }

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 </dl> was appearing after the first <dt>. So, instead, I needed to wrap the <dl> in a <div> (giving the <div> the id of “active-projects” instead). This tricked Safari into putting the closing </dl> at the end of the <dl> where it belongs. If you know why Safari does this, please let me know!

Here’s the CSS for the <dt>:

dt { margin: 10px 0 10px 24px; font-size: 125%; }
dt a { font-weight: bold; }
dt:before { content: '<dt>'; font-size: 80%; }
dt:after { content: '</dt>'; 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 <dt> 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>:

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

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 <dd> 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.

Things look a little different around here today.

In December, when I launched the Tabigail theme, I wrote:

Since [March 2007], I’ve tweaked and refined [this site] endlessly, but still kept the basic feel of that design I did in a day over twenty months ago. While I really like the design, it’s time for a change. So, what better way to archive the design than releasing it as a WordPress theme?

So, I had publicly tasked myself with a redesign. Today, I’m launching it. I dig it. So, what do I want to talk about?

1. Markup is beautiful: I love markup. Like, a lot. I love it so much that I wanted to work it into the redesign. It serves many purposes. Markup is beautiful, so I think it looks good. Also, there’s a new portfolio that takes the markup-as-design-element to a new level. Not only does exposing markup on my portfolio show what’s important to me and shows I know what I’m talking about, it also weeds out prospective clients that just don’t “get it”.
2. Finally, a portfolio: I’ve been told that I’m a rare designer that doesn’t have a portfolio. Now I do. I’ve only got the most recent/current projects on there right now (as you can tell by the class of the <dl>!), but I do love the design.
3. Ignores IE6. Well, and IE7, too: Would you believe that IE7 still doesn’t support the :before and :after pseudo-elements? The markup in the design relies heavily on this (look carefully, it’s not in the source). The design degrades well in IE, of course. They just don’t get the markup at all.
4. A sidebar!: The Tabigail theme had no sidebar. What I love about the sidebar in the new design is that it essentially contains a Microformats tutorial.
5. Non-web fonts: I’m into Georgia. It’s very pretty, for a web font. But I wanted to reward the folks that may have nicer fonts installed. If you’ve got Garamond, you’ll get Garamond. If you’ve got Baskerville, you’ll get Baskerville. If you’ve got nothing, you still get Georgia.
6. Gray: Yeah. I can’t help it. At least I used red for the first time!

Please let me know what you think. I’m sure it’ll keep getting tweaked. So, this is far from final. It’s just a first release.

Same thing with my Twitter stream. If I’m watching a Sox playoff game with many other folks in my stream, I have no problem tweeting about it. But every once in a while I find a random stat or fact and I want to tweet it. Sometimes I do. Sometimes I choose not to bore the vast majority of my stream with it. Again, I don’t want to tweet less about baseball than I already do, I figured I’d tweet more. Elsewhere.

Introducing BaseballTwit: Blog posts and Twitter tweets about baseball stats and history by Adam Darowski

Not only is BaseballTwit the new home for my stat-and-history-related baseball blog posts and tweets, it also marks the first blog powered by my recently-released Tabigail WordPress theme.

So, if you’re into this sort of thing, please subscribe to the blog feed and follow @baseballtwit on Twitter.

Like most beginners, when I first started using WordPress (in May of 2006) I used a downloadable theme. I eventually outgrew it and in March 2007 I stripped down the blog’s design to just raw HTML. Little by little, I started styling—purposely NOT working from an established design… I wanted to see where playing with the CSS took me. I captured how it looked less than 24 hours into the design.

Since then, I’ve tweaked and refined endlessly, but still kept the basic feel of that design I did in a day over twenty months ago. While I really like the design, it’s time for a change. So, what better way to archive the design than releasing it as a WordPress theme?

I’m calling it Tabigail.

Why Tabigail? One of the features of the design was a rotating Polaroid-style photo in the header. I’d change it every so often. However, the last time I changed it was December 15, 2007—one year ago today. That was the day we had to put our beloved kitty, Abby (or Abigail the Tabigail), to sleep. I never could make myself swap out the image of Abby.

I’ve built a new page specifically for the Tabigail theme. You download the theme there and I’ve also posted setup and customization tips that allow you to make the theme more “you”. On that page, I briefly wrote about what makes Tabigail a compelling WordPress theme:

1. So super simple. A quick peek at the CSS will show you that there’s really not a ton here beyond plain HTML.
2. No sidebar. You know those annoying over-crowded sidebars so many blogs have? This theme has NO sidebar.
3. Socially savvy. The footer features a list of links to your social networking profiles. Because, really… it’s not all about your blog anymore. Plus, these links are marked up in an hCard with rel=me (just planning for the future!).

Just a note on that last one… what’s cool about that hCard with all those rel=me links? Well, as far as I know, nothing yet. But as the need to consolidate web identities becomes more mainstream, Tabigail will be ready to tell any service provider where all your social media identities are located.

Dude, you’re future-proof!

So, please… take a look, download the theme, and leave a comment letting me know what you think. This is my very first WordPress theme (well, publicly available one anyway… I’ve done a ton)… I’m hoping somebody finds value in it!

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:

<h1><a href="http://www.darowski.com/tracesofinspiration">Adam Darowski’s Traces of Inspiration</a></h1>

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.

<a href="mailto:adarowski@gmail.com">adarowski@gmail.com</a>

becomes:

<a class="email" href="mailto:adarowski@gmail.com">adarowski@gmail.com</a>

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:

<p>Work Info:</p>
<ul>
  <li>Website: <a href="http://batchblue.com/" class="url">http://batchblue.com/</a></li>
  <li>Blog: <a href="http://darowski.com/" class="url">http://blog.batchblue.com/</a></li>
  <li class="email"><span class="type hidetext">Work</span> Email: <a href="mailto:adarowski@batchblue.com" class="value">adarowski@batchblue.com</a></li>
  <li class="tel"><span class="type hidetext">Work</span> Phone: <span class="value">(888) 402-2824</span></li>
</ul>


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:

<h2>Bloggers</h2>
<ul id="bloggers">
  <li id="calhoun"><a href="http://blog.batchblue.com/?author=6" title="Archive for Keri Calhoun">Keri Calhoun</a></li>
  <li id="darowski"><a href="http://blog.batchblue.com/?author=5" title="Archive for Adam Darowski">Adam Darowski</a></li>
  <li id="larson"><a href="http://blog.batchblue.com/?author=8" title="Archive for Will Larson">Will Larson</a></li>
  <li id="ohara"><a href="http://blog.batchblue.com//?author=4" title="Archive for Pamela O'Hara">Pamela O'Hara</a></li>
  <li id="ransom"><a href="http://blog.batchblue.com/?author=1" title="Archive for Sean Ransom">Sean Ransom</a></li>
  <li id="riggen"><a href="http://blog.batchblue.com/?author=2" title="Archive for Michelle Riggen-Ransom">Michelle Riggen-Ransom</a></li>
  <li id="sweeney"><a href="http://blog.batchblue.com/?author=7" title="Archive for Stephanie Sweeney">Stephanie Sweeney</a></li>
</ul>


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:

<h3 class="persona-header">Who needs a CRM anyway?</h3>
<div id="personas" class="clearfix">
  <dl class="sales">
    <dt>Sales professionals</dt>
    <dd class="photo"><a title="Peter Caputa" href="http://www.linkedin.com/in/pc4media" target="_blank">PC4Media.net</a></dd>
    <dd class="track">Customers, <span>leads,</span> conversions…</dd>
  </dl>
  <dl class="freelancers">
    <dt>Freelancers</dt>
    <dd class="photo"><a title="Alex Taylor" href="http://bigringdesign.com/" target="_blank">Big Ring Design</a></dd>
    <dd class="track">Clients, <span>partnerships,</span> invoices …</dd>
  </dl>
  <dl class="virtalassistants">
    <dt>Virtual assistants</dt>
    <dd class="photo"><a title="Michelle Wolverton" href="http://chelpixie.com/" target="_blank">ChelPixie</a></dd>
    <dd class="track">To-dos, <span>schedules,</span> executives…</dd>
  </dl>
  <dl class="entrepreneurs">
    <dt>Entrepreneurs</dt>
    <dd class="photo"><a title="Jack Templin" href="http://thoughtcap.com/" target="_blank">ThoughtCap</a></dd>
    <dd class="track">Opportunities, <span>partners,</span> VCs…</dd>
  </dl>
  <dl class="editors">
    <dt>Editors</dt>
    <dd class="photo"><a title="Anisa Raoof" href="http://kidoinfo.com" target="_blank">KidoInfo</a></dd>
    <dd class="track">Writers, <span>deadlines,</span> articles…</dd>
  </dl>
  <dl class="consultants">
    <dt>Consultants</dt>
    <dd class="photo"><a title="Brent Leary" href="http://www.brentleary.com/" target="_blank">CRM Essentials</a></dd>
    <dd class="track">Clients, <span>vendors,</span> proposals…</dd>
  </dl>
  <dl class="eventorganizers">
    <dt>Event organizers</dt>
    <dd class="photo"><a title="Chris Brogan" href="http://chrisbrogan.com/" target="_blank">Chris Brogan</a></dd>
    <dd class="track">Speakers, <span>attendees,</span> sponsors…</dd>
  </dl>
  <dl class="nonprofits">
    <dt>Non-Profits</dt>
    <dd class="photo"><a title="Danielle Brigida" href="http://www.nwf.org/wildlife/" target="_blank">National Wildlife Federation</a></dd>
    <dd class="track">Donors, <span>fundraisers,</span> volunteers…</dd>
  </dl>
  <dl class="realestateagents">
    <dt>Real estate agents</dt>
    <dd class="photo"><a title="Gerry Bourgeois" href="http://realtyman.com/" target="_blank">RealtyMan.com</a></dd>
    <dd class="track">Buyers, <span>sellers,</span> referrals…</dd>
    <dd class="custom"><a href="realestate/">Custom version available</a></dd>
  </dl>
  <dl class="designers">
    <dt>Designers</dt>
    <dd class="photo"><a title="Mikey Hougland" href="http://lamikey.com/" target="_blank">lamikey.com</a></dd>
    <dd class="track">Projects, <span>clients,</span> deliverables…</dd>
    <dd class="custom"><a href="designer/">Custom version available</a></dd>
  </dl>
  <dl class="marketers">
    <dt>Marketers</dt>
    <dd class="photo"><a title="Saul Colt" href="http://saulcolt.com" target="_blank">Saul Colt</a></dd>
    <dd class="track">Press, <span>bloggers,</span> social media…</dd>
  </dl>
  <dl class="superheroes">
    <dt>Super Heroes</dt>
    <dd class="photo"><a title="Small Business Super Heroes" href="super-heroes.html">Super Heroes</a></dd>
    <dd class="track">We know <span>you’re out</span> there!</dd>
  </dl>
</div> <!-- close #personas -->


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: <body style=”-webkit-text-size-adjust:none”>
• auto: <table style=”-webkit-text-size-adjust:auto”>
• multiplier percentages: <div style=”-webkit-text-size-adjust:200%”>

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)?

THE PROCRASTINATE BUTTON!

So, some background… on our Browse Contacts and Browse Communications pages, we allow you to select a bunch of each and perform batch actions (such as tagging, deleting, merging, etc.). Well, for quite a while I’ve been meaning to add batch actions to the To-Do List.

The obvious choices were “mark as done”, “tag them”, and “delete them”. But there was one more I wanted. I have a *lot* of To-Dos. It’s how I remember everything. We even allow you to email stuff to your To-Do List.

I basically record everything there and sift through it repeatedly. So, I’ll mark a ton of To-Dos as due Friday because I take time every Friday to go through the To-Dos, see what’s still relevant, turn some stuff into tickets, mock some stuff up, etc. I also move a bunch of due dates to the next Monday (if it is something I want to talk about at our weekly staff meeting), Wednesday (if it something for my weekly day with Michelle) or the next Friday (if it’s just not ready to be processed yet). I had to do all of these one at a time. And that was a bit of a bummer.

Not anymore!

Here it is in action:

Just select a few To-Dos, and hit that “procrastinate” button. You’ll get this:

The default is “Next Week” (gotta love natural language processing!), but you can enter whatever date you’d like. I love being able to type “Monday”, “Wednesday”, or “Friday” without even needing to think about the dates.

I could have named the button something like “change due date”, but really… that’s a snoozer. I have looked around and haven’t found a “procrastinate” button in any other web apps, so there. That’s my tiny contribution to the field of user interface design!

Do these companies have a problem with their employees watching TV in their downtime? Reading a book? Taking a class? No? Wouldn’t that time also be better spent working on the company’s projects?

I’m fortunate enough to be with a wonderful organization that realizes—even appreciates—that employees have interests outside of work. What some companies seem to struggle with is when your interests outside of work are similar to what you actually do for work.

I design for work. I design as a hobby. I tinker with techy stuff for work. I tinker with techy stuff as a hobby. I blog, tweet, and consume media for work. And also in my free time.

The truth is, you can’t work on the same projects all day, every day. Not only can it get monotonous, you can slip into a comfortable routine, repeating the same solutions and employing the same techniques. Sometimes building a site for a friend can give you that little burst of excitement that makes you remember why you love what you do in the first place.

This past summer, I picked up a bit of freelance work. It started as a “right thing at the right time” thing. A couple people I knew needed work done the same week I was planning to take a week off. Both clients (and I) were extremely pleased with the results, so I’ve done a little bit here and there since then. Not much (time is always tight lately), but just enough to benefit me in a number of ways. Such as:

Using different techniques

For one project, I was asked to mark up & style some layouts that are nothing like what I do for BatchBook. Not better, not worse, just a completely different domain. I like how simple BatchBook’s CSS is, but in this case I needed to bust out some new techniques. I even used CSS properties I had never used before. Of course, some of these new techniques were used for the BatchBook redesign. I call that education. I just happened to get a bit of money while essentially training for the day job.

A different development environment

When you work on the same product every day like I do, after a while it might feel like “the way you do things” is set in stone. It’s probably not.

When you pick up freelance work, you’re either starting things completely from scratch or working within somebody else’s development environment. In the first case, you have a clean slate and can do things in the most efficient way possible. Likely, you’ll make decisions that you want to bring back to your other work, whether it is how you set up your CSS, name your files, whatever. When working with somebody else’s code, it shows you how other people do things. There will be some “wow, we should totally do it that way” moments mixed in with “wow, I’m glad we don’t do that like they did”.

Expanding your network

Just through the little bit of side work I’ve done, I now have some additional contacts that I could call in for a number of reasons. And I’m not just talking about if either one of you needs a job down the line. I’m talking about sharing ideas and feedback, too. For example, I’ve now got a new technique to try and trick FireFox 2 into accepting inline-block. And I got a nice message from a developer that received my markup:

I just wanted to thank you for doing such a great job with the markup for the forum page you did for us. It was really easy to integrate it into the views we have…you did some very nice work.

At BatchBlue, there is certainly no shortage of “awesome job on this” notes. But to hear it from someone you don’t work with every day is always nice.

Extra money

Well… there’s that, too.

And perhaps that’s where some companies get uncomfortable. You’re essentially shopping the same services they’re paying you for to other companies. But the way I look at it, the more you do it, the better you’ll get at it. And as long as you’re getting your work done on time and at high quality, what’s the problem?

BatchBook Redesign

A week and a half ago, I announced over at the BatchBlue Blog that we finished a redesign of BatchBook, our small business CRM.

Here’s how it looks:

In the blog post, I talked about the main goals of the redesign, such as a better use of space, lightening up the design, making the app faster, and setting up for some more future improvements.

The redesign was an incredibly fun process, with the majority of the redesign happening over five days. The rest was just tweaks, special cases, and browser compatibility stuff. The first step when I started redesigning was to DELETE. I deleted a LOT of code.

I love CSS, but I’ve always tended to be a play-it-safe kind of guy. I use simple styles that won’t run into cross-browser issues and tend to stick with what works. Well, this was an opportunity to try some new things. First came the buttons.

The buttons use CSS sprites. So, I have one file called buttons.png (a nice 32-bit transparent png) that contains every button in the app. All buttons in the application call that same file (but since it’s already cached, it’s much faster!) and then only show a part of the image (as defined with background-position).

I ran into some issues and learned a decent amount while playing with the buttons. Here are some takeaways:

• A <button> will inherit styles differently than an <a> link. The <a> will inherit font-family, font-size and others from styles applied to the <body> tag. The <button> tag, however, needs those properties defined specifically using button in the selector.
• border-radius works like a dream in FireFox 3. It doesn’t work at all in Internet Explorer (of course). In Firefox 2, it works, but looks like poo. And Safari… it looks awesome, except that strangely it won’t apply to a <button> (I found that odd since FF2 and FF3 will do that).
• display: inline-block; is a wonderful thing—and it works in Firefox 3, Safari, AND Internet Explorer 7. We don’t support IE6, so it doesn’t matter that it doesn’t work. But, go figure, the problematic browser in this case was Firefox 2. It doesn’t support inline-block. Very frustrating. I tried some hacks, but none worked well enough. So, I had to resort to unnecessary floating.

Another favorite part of this redesign was preporation for allowing user skinning. I went through the styles and commented what colors would be user definable. I set those up in a separate override style sheet. We haven’t hooked up the feature yet, but just playing with it locally has me very excited about allowing people to conform the product to their company color scheme.

If you haven’t checked out the slideshow of the redesign on Flickr, please take a look. I’d love to hear what you think!

BatchBlue.com Redesign

Instead of taking a rest after a major redesign, I embarked on another. This one wasn’t quite as big—and it also isn’t completely done yet. But on Sunday afternoon (right after we hit Mashable), we launched the redesign of BatchBlue.com.

We ran the old design through some user testing—both via Twitter and in person. We noticed some trends emerge and worked quickly to fix them. A lot changed, but here are the highlights:

• It’s wider! I now have 200 extra pixels to work with. This makes me very happy.
• The rounded corners in the header and footer (and some within the page) are long gone.
• We’ve got a new header that more clearly talks about key benefits of the application.
• The bulleted lists (which were far more popular than I would have guessed according to our tests) have shifted from the five tabs of BatchBook to the three main tasks you accomplish with BatchBook
• We added personas, so you can get an idea of who BatchBook is for and what they’d use it for. But not too much info to digest.
• We’ve written some fantastic and comprehensive Blue Papers (like a white paper, but blue!). it was time to bubble these free resources to the home page. (I worked on the Social Media for Small Business one.)

A lot of other things changed inside the app, but all the really cool stuff is on the home page. We, of course, have more updates coming up that I can’t wait to talk about.

So, that’s it! That’s what I’ve been up to! I’d love to hear your feedback.

On Monday, I announced the release of BatchBook for iPhone over at the BatchBlue Blog. Check out the post for the details of what features we launched with and what’s coming next. Don’t have a BatchBook account yet? You can sign up for free.

But what I wanted to talk about here is how I set up the development environment. Obviously, designing for a phone is much different than for a desktop or laptop. Luckily, there are plenty of tools available to make developing for the iPhone both a breeze and—quite frankly—incredibly enjoyable.

iui

I highly recommend starting with Joe Hewitt’s wonderful iui framework for iPhone-optimized web apps. The framework has a very small footprint, can be heavily customized, and is downright fun to experiment with.

iPhoney

Testing can be interesting… you don’t want to keep pushing code live and firing up your phone, so what’s the best approach to take?

First, I tried iPhoney. iPhoney is your own gorgeous iPhone sitting your desktop. You can tell iPhoney what User Agent to behave as—the iPhone, standard Safari/WebKit, or more.

Safari 3.1

Once you get to a certain point, though, you need to use some developer tools to fine tune your code. Safari 3.1 came with a bunch of developer tools. Among them are an element inspector so you can see the cascade of styles attached to an element (think a prettier version of Firebug that isn’t quite as powerful). Also, you can choose from a huge list a of user agents.

Using the iPhone user agent with the element inspector lets you troubleshoot any display issues you may be having.

To turn on the iPhone Developer Tools, head to Safari’s preferences:

Once you quit Safari and open it back up, you’ll see the Develop menu.

From there, just choose iPhone from the User Agents list and you’re in action!

So, have fun! I’m personally looking forward to updating the BatchBook iPhone app and am tempted to play with some other ideas for creating iPhone apps. I have found that working with a totally different canvas (a phone as opposed to a desktop browser) after all these years can actually be quite thrilling.

Plus, developing for iPhone means no Internet Explorer!

There’s no list-head (<lh>) element.

Let’s say I’m marking up a list of my top three Last.fm artists. It would look something like:

<ol>
  <li>Teenage Fanclub</li>
  <li>Mogwai</li>
  <li>Yo La Tengo</li>
</ol>

Which, of course, would then render like:

1. Teenage Fanclub
2. Mogwai
3. 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 (<p>) tag. But a random paragraph doesn’t really semantically relate it to the list. I could put it in a header tag (<h1>, <h2>, 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 (<th>). 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.

<table>
  <tr>
    <th>My Top 3 Artists on Last.fm</th>
    <th>Play Count</th>
  </tr>
  <tr>
    <td>Teenage Fanclub</td>
    <td>855</td>
  </tr>
  <tr>
    <td>Mogwai</td>
    <td>755</td>
  </tr>
  <tr>
    <td>Yo La Tengo</td>
    <td>705</td>
  </tr>
</table>

And that would render like this:

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

Best of all, though, the <th> is nested inside the <table>, meaning that it is explicitly a part of that table. Simply adding a <p> or <h3> above the <table> wouldn’t have the same semantic value.

Really all I’m wondering is… why don’t we have a <lh> to use when marking up ordered and unordered lists?

Photo by tallcj

I don’t use Photoshop. Like, ever. I can’t remember the last time I even launched it, but I do remember it was just to convert a CMYK color into a hex value.

How is it possible that I don’t use Photoshop despite the fact that I’m a designer? No, I’m not just a contrarian. It’s because there are alternatives. And no, I’m not talking about GIMP.

The tool that I use for all of my graphics creation is Macromedia, er… *cough*… Adobe Fireworks.

When I was in college, I worked for Apple as a “Campus Representative”. The gig had a lot of perks. One of them was a crudload of free software. One sweet score was Macromedia giving us anything not named “Director” (my main weapon of choice at the time). This package included two pieces of software I had never used—Fireworks 2 and Dreamweaver 2. Macromedia also gave us a Lynda.com video (yes, VHS!) that showed how to use the software.

Another perk was that I got to spend a week on Apple Campus in Cupertino. While killing some time between activities one day, I popped in the Fireworks video. I was like… damn. That’s sweet.

From that day on, I’ve been a Fireworks user. I’ve gone from version 2 up to the weird-ass MX version numbers, to the Adobe sale, to the equally weird-ass CS version numbers. It is the one piece of non-Apple commercial software I could not get by without.

Recently I was asked why I’m a Fireworks fan. So, I figured I’d take the time to write up a few reasons.

The perfect mix of rasters and vectors

Fireworks had vector tools long before Photoshop did. And they mix the vector tools with the bitmap editing tools in a way that feels natural. Photoshop eventually did include vectors (was it version 5?), but the first iteration was horrid and completely unusable compared to Fireworks—and I haven’t touched them since then. I like to say that Fireworks perfectly blends the features of Photoshop and Illustrator that pertain most to web designers.

Precision

I’ve said more than a couple times that I like to “design by mathematics”. Photoshop, to me, feels like a paint canvas. It is organic. It is inexact. You establish pixel heights and widths for the document, but everything inside the canvas feels—to me—inexact.

I don’t design with a tablet. I design with a calculator. I wish I could pull something off like Web Designer Wall or Carsonified, but that’s just not in my DNA. I think that’s what made me gravitate towards interface design and application design more than traditional web design in an agency environment.

In Fireworks, if I select any object I get the exact height and width and x/y coordinates. That’s on an object level. And personally, I need to know that when I select an object and tap the left arrow it is going to move one pixel the left. With Illustrator, who knows? This is extremely valuable when prototyping. Which leads me to:

Rapid Prototyping

Prototyping has been my #1 task for Fireworks over the years. I have always done a lot of application interface design, so there’s a lot of sharing of elements and layouts that go on. I systematically choose what goes on what layer so I don’t have to maintain multiple instances of an on-screen element. That way, when it is time to export, I just turn on what layers are needed for that screen.

The pixel precision helps greatly with prototyping because I don’t want to see things shifting—even slightly—as I’m turning layers on and off.

You Down with P-N-G?

Fireworks saves in the open PNG format. PNG is small (compared to PSD, anyway) and can be displayed in web browsers. Nathan Smith writes about being able to share native Fireworks source files with clients over the web, being able to make modifications and save, and then having the client see those changes on a refresh. No exporting necessary.

Personally, I love that I can take a screen shot on the Mac (saves natively to PNG as well), mock up some proposed changes, and just send the original PNG via email. I don’t have to worry about compressing because it’s really not much bigger than the original screen shot.

It’s About Comfort

A longtime Photoshop user to switching to Fireworks would be about as absurd as me switching to Photoshop. It’s all about what you’re comfortable using. Every person is productive in different ways. For me? It’s Fireworks. For you? Maybe not. But this is why I love Fireworks.

One of my favorite parts of my NewBCamp talk last month was something I had never really talked about (either in person or on this blog) but wanted to take the chance to share: The idea of the URL as UI. So, what is URL as UI?

Computer users have gotten so used to the graphical user interface (GUI) that it is easy to forget that computers basically operate via a series of commands. The web has not only brought the command line back to the surface (with the web browser’s address bar), it has exposed the concept to an entire generation of users that has never seen a command line.

When you access a web site, you are generally typing in a URL (unless, of course, you are selecting a bookmark or following a link from an email, IM, other site, etc.). The URL is essentially a command to go fetch that content. We take components of the URL such as “http://”, “www”, and “.com” for granted now, these are rather arcane expressions that would be nonsensical to non-web user. But since most sites we access start with an “http” (perhaps an “https”) and end with a “.com” (or “.net”, “.org”, etc.), we get used to these conventions.

Many developers take the time to learn the command line instead of using the graphical user interface because it can be faster and more efficient. For example, if I wanted to add a graphic called “button.png” to code base for BatchBook (the web-based contact organizer I’m working on for BatchBlue), I’d have two options. I could:

1. Open a Finder window.
2. Open the folder “svn” in my home folder.
3. Open the folder “batchbook”
4. Open the folder “public”
5. Open the folder “images”
6. Find the file “button.png”
7. Right click on “button.png” and choose “Add” from the contextual menu (I was using SCPlugin for Subversion)

Or, I could do it via the command line like this:

1. Open the Terminal
2. Type “svn add svn/batchbook/public/images/button.png”

Once I learned the conventions, it was an easy choice for me.

Similarly, navigating a web site simply by the URL can be much faster and more efficient than relying on the site’s information architecture and navigation menus.

Unusable URLs

If I visit Amazon.com and search for the album Rock Action by Mogwai, I am directed to a page with this URL (line break mine):

http://www.amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/
ref=pd_bbs_sr_1?ie=UTF8&s=music&qid=1203311335&sr=8-1

My first question was “how much of this is needed to access the page and how much is session information Amazon is capturing?” Well, turns out that the URL really is:

http://amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/

What’s good about this is that it has the artist and title of the album in the URL. What isn’t so nice is the extra stuff that means nothing to me, the user. I’m sure it means something to Amazon, but that doesn’t mean it needs to be exposed on the front end. If I want to look up a different CD or different artist, I need to rely on the search functions or Amazon’s site architecture, even though I already know exactly what I want.

Is this just Amazon? No. Here’s the URL that Barnes & Noble gives me (again, line break mine):

http://music.barnesandnoble.com/search/
product.asp?z=y&EAN=744861049029&itm=1

To me, this is far worse… there is no human readable component here at all.

URL as UI Done Right

So, what’s a good example of URL as UI? Last.fm, of course. Here is the URL for information about Rock Action:

http://last.fm/music/Mogwai/Rock+Action

Now, let’s compare the three showing human usable vs. machine usable data:

(click for larger version)

With Last.fm, if I want to look at the main Mogwai page, I can just delete the “/Rock+Action” part. If I want to look at a different artist page, I simply swap out the “Mogwai” with, say, “Orbit”. If I want to look at a particular Orbit album, I can just add it after the “/Orbit”, such as “/Orbit/Libido+Speedway”.

Notice that everywhere there would be a space, you use a “+”. Once you learn this simple convention, you can keep using it to speed up your interactions with the site.

Another example of a convention you need to learn is the individual track convention. It is possible for an artist to have the same song appear on many albums (such as the standard release, live album, greatest hits, etc.). Last.fm could track these separately but instead chooses to treat these all as one song. So, this is how you would access a single track’s page:

http://last.fm/music/Arcade+Fire/_/Intervention

Notice the “/_/” between the band name and the track name. The underscore in the directory where the album name would normally go signifies that we’re no longer looking at an album—we’re looking at individual tracks. If you were on the page for Arcade Fire’s “Intervention” and wanted to look at a different track by them, you’d have to hunt around the page and try to find a link to that track, or more likely go back to the main artist or album page and find it there. Using the URL, you can jump right to “/Ocean+Of+Noise”.

Of course, you can use this technique elsewhere on the site. For example, every artist has a wiki-based bio page, with a URL like http://www.last.fm/music/Mogwai/+wiki. If you wanted to read a few band bios, you’d have type the artist’s name into the search field, land on the artist’s page, and click the “Bio” tab to see each bio (and repeat the process for each artist). Why not just type the artist’s name and that’s it (via the URL)? Same thing goes with photo pages for each artist, video pages, etc.

Also, Last.fm is not the only site doing this right. Another example is Flickr. To see my photos, you go to this URL:

http://www.flickr.com/photos/darowskidotcom/

If you want to go switch to another user’s photos, as long as you know their username you can replace mine with theirs. It works well for tags, too. If you want to see all my photos I have tagged as “redsox”, you can go to:

http://www.flickr.com/photos/darowskidotcom/tags/redsox/

If you want to see someone else’s photos tagged “redsox”, simply swap in that user’s username. If you’d rather see everyone’s photos tagged “redsox”, just take out the username altogether.

If people use your site enough, they’ll want an even faster way to reach the content they want. They’re not browsing anymore. They are power users. They know what they want. Give them a nicely hackable URL to do this.

Update: A translation to Belorussian has been provided by fatcow.

| 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.

Whenever we want to complain about the limited amount of fonts we can use on the web…

Whenever we want to complain about the limitations of clean CSS design (thanks to Internet Explorer)…

Whenever we want to complain about designing the same site for both 180-pixel wide cell phones and 2560-pixel wide Cinema Displays…

Whenever we want to complain about needing to be compatible with browser limitations and bandwidth prices for the ever-exploding mobile web…

Whenever we want to complain about accessibility compromising art…

… just remember what Interpol can do with a C chord and an F chord. Your constraints become your baseline. You then work to complement those constraints with dynamics, consonance, and dissonance.

I just upped a post over at the BatchBlog called “Step Outside the Code: Be Your Own User.” Let me tease it a bit, then I’ll elaborate a bit more here about the process I followed.

As soon as I joined BatchBlue in May, I was thrown into the fire—we had a beta to get out, after all. There were lots of bugs to be fixed, display issues to be resolved, cranky browsers to accommodate, and architectures to learn. A lot of things initially impressed me about BatchBook, but it seemed like all I was doing was fixing issues. It becomes easy to lose a sense of the whole when you’re arm wrestling with tiny pieces of code day after day.

Then, a wonderful thing (on so many levels) happened—I took a couple weeks off to welcome our second child. For two weeks, I didn’t fix any bugs… I fixed makeshift dinners. I didn’t clean up code… I cleaned up belly button regions. I didn’t change class names, I changed diapers. Yet, I still used BatchBook. But I finally used it as a real live user.

It was very interesting finally jumping into BatchBook head first as a user. I had a lot of “hey, this works but if only it did this” moments. I jotted those down in a notebook. I kept the notebook open for the entire two weeks. Nolan has a knack for being wide awake between 11 pm and 2 am and requiring me to pace around the house with him, listening to music.

I brainstormed. A lot. Every time I passed the notebook, I would jot down the idea. I kept building my vision of how this thing should work. Then, the Sunday before I returned, I cranked out a bunch of mockups based on what I was thinking about. And hell if they weren’t some of the best work I’ve ever produced.

So, why is it that when I’m at my most tired, I’m feeling my most invigorated with my work? It could be a lot of things. I think one main reason is that since I didn’t design the first iteration of BatchBook, I felt very overwhelmed by the amount of areas I felted needed to be changed. Well, I’ve now mocked up a totally revamped Contacts section, which is really the backbone of the app. So, maybe it is because I can finally feel the application getting a sense of… me.

I honestly think another reason is that I just backed off of the development for two weeks and just used the thing. I organized my own contacts, made edits that weren’t just dummy data, and actually started recording new information in it as it came, leaving my other applications behind. I like the app, but I love what the app can be. And I think I’m just pumped because I finally have an idea of what that is.

I’ve only been with BatchBlue about four weeks, but I’m already lucky enough to do something I’ve never done—see a product go beta. BatchBook, our web-based contact management application for small businesses, had done just that.

When I came on board, BatchBook was very close to beta already. My role involved fixing presentation bugs, ensuring cross-browser compatability, testing, and some design and brainstorming for future features.

All along the way, we have been working closely with our Blue By You user group to make sure the product is versatile enough to fit the needs of a variety of small businesses. Now that we are welcoming beta users, we look forward to incorporating even more excellent feedback.

I invite you, dear reader, to sign up for a beta account. We are borderline obsessed with receiving feedback from our users, so please let us know what you think. We have extensive FAQs if you would like to learn more.