People of Twitter, there are douchebags among us.

Gone are the days when Twitter’s own description of the service was accurate:

Twitter is a service for friends, family, and co–workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing?

Now everybody is flocking to Twitter in hopes of answering the questions “How can I sell my product to you?”, “How can I get you to follow me?”, and “OMG Plz RT?”. Yes, we’ve gone from Twitter being a virtual unknown outside the geek circles to hearing Billy Bush, Ashton Kutcher, and (this one opened the floodgates) Oprah gush about our beloved microblogging service.

Once all these newbies flock to Twitter, they immediately have a few questions. Specifically, they want to know (a) how they are supposed to make all this money on Twitter, (b) how they, too, can have 1 million followers, and—this one probably bugs me the most—(c) hey, why can’t the up the character limit? 140 is too small! If not helped, these folks will turn into social media douchebags (or worse, social media sleestacks!).

My goal here is to provide some tips you can point these misguided folks to. Help them avoid becoming douchebags.

1. It’s not all about you. If you’re going to get anything out of Twitter at all, you need to immediately check your ego at the door, listen to people, and build relationships. Talking about the things your or your company are doing will only get you anywhere once you’ve already joined the conversation.
2. Don’t tweet about your number of followers. It’s technically impossible to do that without sounding like a douchebag.
3. Don’t ask for x many more followers so you can reach a “milestone”. Double douchey. You’re better off saying something interesting (so people will retweet it) than asking THE PEOPLE ALREADY FOLLOWING YOU if you can get a few more followers.
4. Don’t retweet Oprah*. Just don’t. She has eleven bajillion followers. We’re all aware she has a Twitter account. If we want to see her tweets, we’ll follow her. By retweeting Oprah, you’re exposing Oprah’s tweets to the millions of people who purposely have avoided them at all costs. (* This also applies for Ashton Kutcher, Mashable, TechCrunch, Robert Scoble, Guy Kawasaki, etc.)
5. Don’t ask for retweets. If something is interesting, it will be retweeted. People already retweet WAY too much anyway. Please don’t encourage them.
6. Don’t break the system. I get it. You’re annoyed that Twitter changed the way @replies work. But don’t go putting extra characters in front of your replies, forcing EVERYONE to see your @replies to EVERYONE. I know some people really liked that feature. But for a lot of us, if we had that feature turned on, Twitter would have been unusable. Don’t ruin Twitter for the rest of us.
7. This ain’t no RSS feed. My stance used to be that you shouldn’t tweet about every single blog post you write. My reasoning was that if people wanted to see every blog post, they’d subcribe to the feed. Well, for many Twitter is replacing the RSS reader. So, my new stance is that it’s fine to tweet about each blog post—as long as that’s not the only thing you’re using Twitter for. Mix them in with actual conversations. While you’re at it, don’t just tweet “[title] [link]“. Give us a teenie bit of context, or at least just make them sound friendlier. I know I’m more apt to click on something if the tweet gives me a little incentive as opposed to just looking like an auto-published tweet.
8. Learn how to @reply. By default (and as of this writing, the only setting) is that people will only see @replies from people they follow ONLY when they’re directed to other people they also follow. I love this default setting. So, here are some ways to use it right:

   • @adarowski wrote this awesome post about CSS. http://tinyurl.com/6×9add

     The problem with this tweet is that it would only be seen by people who follow both you and @adarowski. People who follow @adarowski likely saw him tweet it already. I’m guessing you want this to go to your whole network. @adarowski would appreciate that, too.

   • Check out this awesome post about CSS by @adarowski. http://tinyurl.com/6×9add

     Now this would go to your entire network. Win for you. Win for @adarowski.

   • @mattgillooly Heading to Providence Geeks? I’ll be there in about 30 mins.

     At first glance, you might think this should be a direct message. But for an event like Providence Geeks, the folks that follow both you and @mattgillooly probably would be happy to know you’re arriving soon (unless, of course, you’re a douchebag). What I like about this is that it doesn’t go to your entire network—just the folks that know both of you (and therefore actually care).

   • @adarowski See you soon!

     Something like this is probably best as a direct message. There’s no event context and it’s clearly just for one person to see.

9. Do not—under any circumstances—send an automatic direct message to new followers. Sending an automatic direct message says one of two things:
   • You don’t know me yet, but I feel comfortable enough to send you some spam.
   • I do know you, but I’m the type of douchebag who sends auto-DMs to EVERYONE, so you get the same generic response as everyone else. Feel special?

   Don’t be a douchebag. If you want to DM them, send them a real DM, typed with your own fingers.

10. Fill out your profile. A laundry list of ways to NOT get followed on Twitter:
    • By not using your real name. I’m talking to you, socmed14413 and flygrrl182.
    • By not using an actual photo of you (like your logo or something). Or worse, by not adding a photo at all.
    • By not providing a link. We’re not convinced. We want to find out a bit more about you before following. If you don’t have another link to provide, write a blog or join LinkedIn and come back later.
    • By not providing a “one line bio”. Think of this as your answer to the question “why am I interesting?”. Leaving it blank gives people no reason to follow you back.
    • By calling yourself a “social media expert”. Even if you are one. Everybody on Twitter calls themselves a social media export. After all, they do have a Twitter account.

Let’s help these folks out. What else you got?

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!

(The MacBook on the right, silly.)

So, after the initial WOW! and then the disorientation caused from the multi-touch trackpad, it’s time to move the data. I was a little worried, because I don’t just have data on my computer anymore. There’s Rails, PostgreSQL, SVN… things that are far more complex and I have no idea how they all work together. Surely these won’t migrate seamlessly, right? Au contraire!, Sean tells me. It worked for his white-to-black MacBook migration.

So, last night, I finally set up to migrate. I pull out my FireWire cable and… look… and look… and… whaaaa? As a loyal Mac user since I wore Superman underoos, I’m used to Apple’s “port Russian roulette”. But I thought Firewire was here to stay. I mean, I’ve got a Firewire camcorder, Firewire hard drive… I thought I was safe.

So, I’m not writing this post to mourn the death of Firewire. I had some data to transfer. Apple’s Migration Assistant recommends I transfer the data over wi-fi. ORLY? 60 or so gigabytes over wireless fidelity. I try it. After a couple hours, the progress bar has filled up exactly one pixel. That ain’t gonna work.

So, I dig out my Ethernet cable (remember those!) and connect the two machines. With an actual cable! I try Migration Assistant and it finds the other computer. It tells me to install something on the old machine—DVD or CD Sharing Setup Update. It came on the Mac OS install DVD that came with the new MacBook. Here’s what the installer says it’s for:

This software is recommended for all users and provides enhanced customization capabilities and improved performance for migration over FireWire, ethernet, and wireless networks.

So, I tried this. It took about four hours to migrate. But when it was done, I opened Coda, it refreshed my SVN status (yay!) and I updated our code without configuring anything at all.

That’d be a win.

So, long story short—don’t try the wifi. Tether those Macs!

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.

However, this auto-detection is a bit overzealous. In addition to phone numbers, I’ve seen it link date ranges (1978-2008), specific dates (3/9/2009), and—for us baseball stat geeks—offensive rate statistics (.312/.418/.515… and I’ll send a BatchBlue tee shirt to the first person to identify that sweet career line).

Tonight, I was building a page and tested it in iPhone. It incorrectly linked some dates. This was problematic because in that specific section, I had all anchors set to display: block;. So, adding these extra links broke the design.

I could have added some extraneous markup and worked around it, but I was curious if there was a way to turn off this auto-detection. Turns out, there is.

In your <head>, add this line:

<meta name="format-detection" content="telephone=no" />

That will turn off ALL phone number auto-detection on that page. Enjoy!

Earlier this month, our family welcomed our third child into the world—Mae Juliana Darowski. We’ve been adjusting to life with a now-larger-than-normal family, but you know me. This meant I also had some online profiles to update.

Because of my anal retentiveness, I like to fill in my “About Me” section of all of my online profiles with the same text. It’s all part of the “brand”. For the last 21 months, that text had been:

A daddy of two and a User Experience Designer for BatchBlue Software.

Yep, that’s pretty much me in a nutshell, sans the baseball geekdom.

My incredibly predictable updated short bio now reads:

A daddy of three and a User Experience Designer for BatchBlue Software.

One minor difference. The problem is, I needed to make this change EVERYWHERE. Specifically:

• Darowski.com meta info, sidebar, about page, etc.
• Twitter
• Last.fm
• Facebook
• Slideshare
• Brightkite
• Chi.mp
• Get Satisfaction
• DandyID
• Plurk
• Flickr
• Upcoming
• LinkedIn
• RINexus
• YouTube

There’s gotta be a better way, right? I ran into this same problem when I updated my profile photo. In a couple places, I was able to simply use my updated Gravatar. That’s the holy grail right there. If you don’t know what Gravatar is, it is a service that provides “globally recognizable avatars”. Basically, you update your image. Other services, instead of asking you to upload a photo, just use your email address to fetch your image. They pull whatever size image they need. If you update your Gravatar, those sites update your image. Everyone is happy.

Many blogs use Gravatar, but the social networking sites don’t. So, that’s the first problem—lack of widespread Gravatar use.

That led me to a desire for globally recognizable bios. Ideally, this could just be part of Gravatar. You provide two bios—a short one-liner and a more expanded bio. Kind of like what I have on my About page. That way, any time I update my globally recognizable bio, my online profiles get updated.

Who’s with me?

I tweeted:

When you place strong emphasis on a link, do you put the <strong> inside the <a> or the <a> inside the <strong>? I think I’m inconsistent.

I had been putting the the <a> outside of the <strong>. Like this:

<a href="http://mailchimp.com/"><strong>MailChimp</strong></a>

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

I love CSS. But I also have always loved markup. With the new redesign here, I’m trying to give plain ol’ semantic HTML (POSH) the recognition it deserves.

Step 1 was the redesign.

Step 2 was the purchase of MarkupIsBeautiful.com.

Step 3 is a new category on the blog—appropriately named Markup.

Step 4… some new content. I look forward to it.

Photo by Steve Ganz. Steve also sees the beauty in markup.

Turns out, the problem is that my friends on Facebook were basically my friends on Twitter. So, by the time I checked out Facebook, everything I was seeing was old news.

Time passed, and something happened. More people joined Facebook. And I’m using it more and more.

The people I’m finding on Facebook now are people from high school… people from college… people from old jobs. As it goes more mainstream (and the early, core users probably hate this), more and more people sign up. And those are the folks that weren’t already on Twitter, Flickr, or FriendFeed.

So, suddenly my Facebook news feed is no longer a list of tweets I’ve already read. It’s updates from people I’ve only recently connected with after (sometimes ten) years of silence.

Some Facebook (re)connections:

• Guy from high school who showed me this band called “Nirvana” about a month before Nevermind was released.
• Girl from college who I ran into outside of Build-a-Bear with our respective batches of children. She still looks the same as in college.
• Guy from a couple jobs ago who felt bad that he kept his job while the rest of us were laid off, so he meticulously edited everyone’s resumes (he was a kickass editor).
• My sister’s friend who asked me to her junior prom. I went and we had a great time. But Facebook is the first time we connected since then.
• Bass player of the band I was in circa 1995ish. He was a huge Toadies fan and had a pet squirrel that just walked in his house one day and decided to hang.
• Girl from high school who I traded mix tapes with. She gave me showtunes and I gave her indie rock. Neither of us changed the others’ taste, but I like to think we enlightened each other a bit.
• Girl from high school who was super cute and… I never told her that.
• Ex-girlfriend of my friend (my friend who I was in a band with for a while, is my wife Erin’s cousin, and is the person who introduced me to Erin). I’ll always remember her “X-Ray Techs Do It in the Dark” bumper sticker.
• Guy from college who’s doing simple, standards-based web design in Providence. Basically, he’s me. But we hadn’t spoken in about eight years until recently meeting up.
• Intern from a couple jobs ago who’s lasting effect on my life is introducing me to The Appleseed Cast.
• Best friend from grade school to high school, who’s house I would ride my bike to every day and we’d play baseball until it was dark. If it was raining, we played computer baseball.
• That guy’s little brother, who I have a hard time picturing older than 12 or so years old.
• Girl I worked at the grocery store with… I tried, but failed. But now we’re Facebook buds, so it’s cool.
• Ooops, another girl I worked with at the grocery store with. Tried. Failed. Was kind of the story of my life in 1996.

I know it’s cool for us “open web” advocates to openly complain about Facebook. But you know what? Without it, these people wouldn’t be in my life at all right now.

So, who have you reconnected with?

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.

Last year, I gave a presentation called “Introduction to Web Standards“. This time, I went a bit more hands-on workshoppy. The presentation was called Turning Your Design into a WordPress Theme. I started with a few slides (embedded below) and then spent the rest of the time (which only ended up being about 15 minutes!) live-building a WordPress theme from an XHTML/CSS one-pager and a Save As from my Tabigail theme.

That was kind of fun. Basically, I duplicated the theme, activated it, and started migrating the markup and combining it with the theme code. I explained what I was doing it all along and fielded a variety of questions about WordPress, design, and CMSs in general. Due to time constraints, I was only able to build the main blog page—header, footer, sidebar, and index.php. The single post, page, archives, search results, and 404 will have to wait a little bit, but it was nice to get the front page working in that short amount of time.

I’m looking forward finishing up the theme—because it’s a brand new design for Darowski.com. I’ve been chipping away at it for a little over a month… just little bits here and there. It’s at a good place now and I look forward to pushing it live soon.

But in the meantime, here are the slides from today…

1. Recording the screencasts
2. Encoding and embedding the screencasts
3. Turning your screencasts into a podcast

In those tutorials, I cover everything from my hardware setup …

… to the software that I use to record …

… to encoding tools …

… to RSS editors …

… to publishing on iTunes.

So, if you’re about to record some screencasts, take a look and see what worked for me. If you have any other techniques, by all means let me know!

Last year’s presentation was Introduction to Web Standards. I talked about (X)HTML, CSS, Microformats, and URL as UI. Now, I need to come up with another idea.

I’ve got a couple I’d like to throw out there. Any feedback would be appreciated. Thanks! Here they are:

Turn Your Design into a WordPress Theme

Turns out, I’ve done a crapload of WordPress themes. I’ve only released one publicly (that’d be Tabigail), but I’ve done a lot of ‘em for folks. It’s almost a game… once I get the design, I try to see how quickly I can turn it into a fully-functional theme. With this presentation, I’d take a very simple one page design (properly built with web standards, of course), break it up, and turn it into a theme.

My Favorite CSS Techniques

Based on the blog post of the same name, this would take some of these examples and actually walk through them, explaining the whats and the whys. Seeing how each CSS declaration affects the rendering could be useful, I think.

Any feedback on which I should do? Thanks!

The Ones with Legs

These three posts seemed to resonate with some and generated the most views…

URL as UI (3/16)
This was the biggest new post of the year (that damn Google Transit one from 2007 still out-pageviewed it, though). Where did the traffic come from? Well, that’d be Dan.

Using Fluid.app to Bring Google Reader for iPhone to your Desktop (8/14)
A couple blogs (like Web Worker Daily and Hackszine) picked up on this little lifehack.

My Favorite CSS Techniques (11/14)
This might have been my favorite post of the year. Most of the traffic for this one came through StumbleUpon, though Web Worker Daily also linked to it. I may follow it up with some more techniques eventually.

Milestones and Releases

Luckily, I documented some of the bigger things that happened this year (no new babies or anything—YET!—so it’s all techy stuff).

BatchBook Goes 1.0 (2/8)
Pretty big moment for me—the single project I’ve ever poured the most of myself into gets released to the world.

NewBCamp08 Presentation: Introduction to Web Standards (2/23)
I haven’t done much speaking before, and this was the start of it. It was a lot of fun and I hope to do it some more. With the second NewBCamp coming up in February, I just may get to do that…

Two Weeks: Two Redesigns (BatchBook & BatchBlue.com) (10/13)
Redesigns can be a major thing. Back-to-back, I worked on the redesigns of our product (BatchBook) and our website (BatchBlue.com).

New BatchBook Screencasts (and How-To Posts Coming Soon) (11/24)
I’ve done screencasts before, but I was really proud of this set. I also documented the process so I could write a series of blog posts about screencasting.

Announcing Tabigail: A simple, gray, one-column, socially savvy WordPress theme (12/15)
Earlier this month, I took the design of this blog and packaged it up as an open source WordPress theme.

BaseballTwit: A New Home for the Baseball Posts & Tweets (12/27)
Over the last few days, I’ve been doing some hardcore baseball research for this new project. If you’re into stats and the old personalities of the game, this is for you. If not, run far far away!

Off-topic (yes, baseball)

I also enjoyed writing these baseball-related posts enough that I just needed to start that separate blog…

Branching Out: Baseball Player Bio Writer? (2/26)
Yes, Pete Incaviglia is using the bio I wrote about him (years ago) on his own site.

“My Guys” Never Win MVP Awards (11/20)
In which I make my Dustin Pedroia mancrush public and reminisce about my favorite players.

Is There a Doctor in the Hall? (10/16)
I actually entered a contest to be a sports blogger for WEEI. I didn’t win, but this was my submission.

Misc

Here’s some more posts I’d like to highlight for various reasons:

SXSWi 2008: A Recap(3/13)
SXSW was a ton of fun. It’s also where I met Ira.

1000 Tweets (1/23)
I just thought it was funny that this year I hit the 1000 tweet milestone. Apparently, tweet #2000 or #3000 weren’t worth blog posts. I currently sit at 3,896.

Full-Time Designers Should Do (SOME) Side Work (11/3)
I thought this was an interesting topic that fetched a couple good comments. I would have loved to see more though. It’s not too late!

Some General Stats

Here are some stats I was interested in for the year…

Top Posts by Pageviews

1. Google Transit Comes Through: Best Customer Service EVER (63,927)
2. URL as UI (14,916)
3. My Favorite CSS Techniques (4,602)
4. The Blog is the New Resume (2,009)
5. Using Fluid.app to Bring Google Reader for iPhone to your Desktop (1,563)

Browser Usage

1. Firefox (82.32%)
2. Internet Explorer (9.60%)
3. Safari (5.18%)
4. Mozilla (0.88%)
5. Opera (0.72%)
6. Chrome (0.55%)

Looks like Chrome still has a way to go? IE is less than 10%, but what’s the version breakdown?

1. IE 7.0 (71.13%)
2. IE 6.0 (26.44%)
3. IE 8.0 (2.25%)

4 visits each from IE 5.0 and IE 5.5. They deserve whatever the heck they saw.

OS Usage

1. Windows (74.30%)
2. Macintosh (20.06%
3. Linux (4.99%)
4. iPhone (0.42%)

I guess nearly half a percent of all visits from iPhone isn’t that bad. What’s with just 20% Mac? Come on people! Also, the 5% from Linux was MUCH higher than I thought.

And the music

On my previous “End of Year” posts, I’ve picked an album of the year. Before I do that, let’s take a look at last.fm and see what the stats show I was listening to this year (yes, I have a thing for stats…):

Most Listened-To Artists of the 2008

1. Teenage Fanclub (They’ve always been my #1, so it makes sense.)
2. Mogwai (My all-time #2, and I have a thing for Glasgow bands, too)
3. Yo La Tengo (Yes, this is my all-time #3, too. The best US band in history)
4. Band of Horses (I was late to the party on them, but made up for it)
5. Rogue Wave (Liked them a while now, but just keeps growing)

Top song of the year according to Last.fm? That’d be “Our Swords” by Band of Horses.

This year’s choice

My best new album of the year? Well, that’d be Mogwai’s The Hawk is Howling.

Happy New Year!

In October, I wrote about Twalala, a new Twitter client. Twalala bills itself as “Twitter with a mute button”, but muting is only half of what makes Twalala a worthwhile Twitter client.

First, I have a few personal requirements in a Twitter client. I know not everybody’s requirements list is the same, but mine are important. They are:

1. Web-based: The majority of my Twitter usage is actually done on the iPhone. But I don’t want a native iPhone app because I like to maintain the same Twitter workflow whether I’m mobile or not.
2. Mobile: This goes along with the first, but the app needs to be usable in both desktop and mobile formats. Preferably, it would be the same interface for both.
3. Full-featured: The mobile version of Twitter.com is decent, but lacks some important features (like DMs, which you need to switch to the full twitter.com to access).

So, the only app that has filled these requirements is Hahlo. I love Hahlo. Like, a lot. I really have no complaints about it (recent downtime troubles aside). My newest pain point has nothing to do with Hahlo, but has everything to do with my growing Twitter network. When I’m online and working, I have no problem skimming the tweets from my entire stream, seeing what’s going on in tech and the world. But the problem is if I’ve been offline for a while and I want to catch up. I just can’t catch up on everything I’ve missed.

This is why some people use Twitter as a real-time thing and don’t worry about catching up. But I have a large number of people in my stream that I want to see EVERY tweet from. It’s not everybody, and that’s the problem. With Hahlo (and every single other web-based Twitter app), I either catch up on everyone or nobody.

I tried some hacks, such as subscribing to some people (via a FriendFeed list) in Google Reader. But that’s delayed and it mixes in what I’ve already read with what I’ve missed. It was just more trouble than it was worth. So, I turned to Twalala. And it worked.

When it was first released, I used Twalala as a bit of a novelty, muting a few phrases so I’d never see them in my Twitter stream (like those damn Qik.com links). I hadn’t gone as far a muting people. That has changed.

A couple weeks ago, I opened Twalala, took a deep breath, and started muting the crap out of my follower list. Who made the cut? People I know personally and industry folks I REEEEALLY want to see everything from. I believe I muted 150 or so people. Sounds shady, right? But no. The thing is, Twalala is my “catch-up” app. I don’t use it all the time. In fact, I still might use Hahlo a bit more than Twalala.

Remember when I said that muting was only half of what makes Twalala cool? The other half is the complete opposite—white listing. If you “white list” certain terms, they will always be highlighted (in yellow) in your stream… even if you’ve muted the person that said it. This is perfect for @replies and brand monitoring.

How can Twalala become my full-time Twitter client?

I’m still using multiple clients (Twalala, Hahlo, and twitter.com), but how far away is Twalala from being a one-stop solution for me? Here’s what I’d need:

• An unfiltered stream: It’s great that I can mute people and phrases. But that means I’m locked into those settings (unless I remove the filters one by one). It would be nice to have a view that shows my friend stream unfiltered along with one that shows it filtered. Right now, the main tabs in Twalala are “home | @replies | direct messages”. I’d recommend “all | filtered | @replies | DMs”. That way I could see my entire list in one tab, but also see the list filtered a click away.
• The ability to follow/unfollow: I’d love to be able to follow someone from within Twalala. Right now I have to hop to a different client to do that.
• The ability to favorite: Because sometimes @wrycoder is so good that I need to jump to twitter.com to fave that ish.
• Profile data: Right now, I need to click out of Twalala to see a user’s basic profile info. On their page, I’d like to see bio, number of followers, number of following, and URL.
• Remember me: A remember me button would be nice, especially with mobile. Sometimes I open up Hahlo when I’d rather open Twalala because I need one click to get to my stream on Hahlo and (lemme count…) about 20 to do the same in Twalala.
• iPhone-optimized input: Not sure why, but posting a tweet has gotten pretty slow. You need to punch a bunch of letters on the iPhone and wait for Twalala to catch up. I admit sometimes I read in Twalala and jump to Hahlo to tweet.

That’s it! Not to much, right?

So, give Twalala a look. I might just be what you need to make Twitter work better for you.

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!

I rescued this post from an old blog that I’m not updating anymore. It has become a handy piece to point folks to when I try to tell them about my baseball simulation league. This post was originally published June 16, 2006.

I never understood fantasy baseball.

I have all the symptoms of a fantasy baseball addict. I love baseball. I love baseball statistics. I love tracking how my favorite players are doing. I love putting myself into the shoes of Major League general managers, debating what I would have done in a particular trade or signing situation. I love drafts. I’m web savvy and online a good chunk of the day. I enjoy making a deal.

But I have picked a different kind of poison. My drug is not fantasy baseball. Instead, I am addicted to baseball simulation.

There are very important differences between fantasy baseball and baseball simulation. One of my problems with fantasy can be summed up in an example that I often use.

Let’s say my brother in law is sitting at a bar with his friend, watching the Red Sox game. Their fantasy teams are facing each other this week. Jason Varitek lifts a sacrifice fly. David Ortiz tags up and scores. The friend shouts, “Ha! There’s a point for me! I have Varitek!” My brother in law replies, “Yeah, but I have Ortiz. We’re even.”

I have three very big problems with this scenario. The first is “this week.” A baseball game that is one week long? What is this, football?

Secondly, in fantasy baseball when your player drives somebody in, he’s (usually) not driving in a fantasy teammate. In simulation, when my player drives someone in, he is actually driving in a teammate and I am watching that run add to my score.

And finally, say I don’t have Jason Varitek on my fantasy team. Say I do have Kevin Millwood and he’s facing Varitek. I’m a big Jason Varitek fan. I could never root against him. It would just feel wrong. So, I’d find myself not rooting, just sitting there… torn.

Baseball simulation is, at the very least, a great way to avoid these problems. The games are not dependent on the Major League Baseball season. It is all run in a software program. In simulation, Jason Varitek is not the real “Jason Varitek”. He is a software model of Jason Varitek at one point in is career. From that point on, the simulated Jason Varitek can evolve differently than he does in Major League Baseball.

At this point, I’ll invoke the Back to the Future comparison. Remember when 2015 Biff finds the sports facts book in an antique shop, hops into a time machine, and gives the book to 1955 Biff? (Don’t lose me, now.) That action ended up creating an “alternate 1985″ in which all events after young Biff received the book deviate from the original history.

I am the Commissioner of a baseball simulation league. For my league, The Ted Williams Memorial League, our “1955″ (the point where the alternate history deviates from the original) is 2000. The league begins with the 2000 season and the players are generated from a database of all players and prospects from 2000. From the point that our league begins, however, players can evolve differently than they do in Major League Baseball.

Here are three examples:

In 2000, Rick Ankiel was the hottest prospect in all the land. He ran into post-2000 problems in Major League Baseball and has since given up pitching. In my league, he is looking like one of the best pitchers in history (certainly the best in our young league).

In 2000, Barry Zito was not a highly regarded prospect. So, in my league he never really panned out and recently retired with just three career wins.

Mark Teixeira was drafted in 2001. Therefore, he does not even exist in my league.

Trading is far different (and far more rewarding) in simulation. In fantasy, if you need a player, you trade for him, and his points are added to your totals. In simulation, you must find a player that appropriately fits into your lineup, into your payroll, and into your future. Many baseball simulation leagues span over multiple seasons (think “Career Mode” in console games). For example, in the TWML we are about to start 2013, our fourteenth season. Trading for a 37 year old star is great for the short term, but doesn’t make much sense if you’re not going for it all this year. With the exception of keeper leagues, In fantasy your roster is refreshed from scratch from year to year. Even keeper leagues only allow you to keep a few players.

Drafts are far more rewarding in simulation as well. In fact, this is the favorite aspect of many simulation owners. In fantasy, you draft a team of major leaguers from a pool of the top talent. In simulation, you have a very similar draft at the very inception of the league (in order to fill the rosters). Then, each year you have an amateur draft, just like Major League Baseball.

These drafts allow players to choose from a rookie crop of youngsters generated by the software model each season. Some rookie classes are better than others. Some prospects are studs while some are mediocre. Some will develop better than you thought—others worse. Where simulation drafts are really rewarding is when you draft a player, develop him in your minor leagues, and then watch him succeed. In fact, this one aspect of simulation is what I will base the rest of my article on.

After I took over a team in our simulated year 2000 (my original plans were to just act as Commissioner, but I adopted a team with an AWOL owner and dismantled it), I was inline for the third overall pick in 2001, our first rookie draft (our rookie drafts occur in the offseason). Right away, I knew who I wanted, and I got him.

Jack Gonzalez was a 21 year old catcher who was pretty much average in most aspects of the game. But Jack possessed two unique skills: a rifle of an arm and a bat with brilliant power potential.

Jack was sent to my Class A team to start the 2001 season (we have three minor league levels in my sim league). In 88 games, he hit 24 homers and drove in 58 runs while hitting .264 with a .873 OPS. He earned a promotion to AA. While in AA, he again hit 24 homers, this time in only 68 games. His average dropped to .250, but his slugging percentage skyrocketed to .617. His OPS was .934. He drove in 53 runs. For the two days of the season, he went to AAA, where he was 3-for-9 with a homer.

After hitting 49 homers at all three levels in his first minor league season, I wanted to see how my boy did with a full season at AAA. At this point, he was my top prospect and I had a very capable starter in Ben Petrick (.289, 12 homers, 61 RBI in 2001). There was no need to rush Jack.

My big league catching tandem of Petrick and Javier Valentiin was very good in 2002, allowing Jack to stay in AAA all year long. He showed he had nothing left to prove and blasted 57 home runs while driving in 138 in 159 games. He hit .269 with a .338 OBP and .596 slugging percentage (.934 OPS). Jack was ready.

At age 23, Jack was called up for the start of the 2003 season. Valentin departed as a free agent and Petrick would spell Jack and provide a solid bat off the bench, all while trying out some third base. Gonzalez, as expected, had some trouble with contact hitting, batting .230. He showed power potential, though, hitting 24 homers with 87 RBI. He even showed an element that wasn’t expected, stealing 11 bases. It was all a good start, but just a .285 OBP needed improvement and the low average brought his slugging percentage to just .399. Still, Jack ranked second in Rookie of the Year voting, collecting four of fifteen first place votes.

We hoped 2004 would build on 2003, but it didn’t. My team moved to our equivalent of the National League and the team average dipped from .272 to .247. Jack was one of the biggest offenders, dipping to just .193 with a .252 OBP and .373 slugging percentage. He did hit 20 homers and drive in 62 runs, but those averages were unacceptable. It was sad to see my homegrown “star” struggling like this. Alas, he was just 24.

The next season, Jack seemed to wake up a bit, getting his career highs in batting average (.234), homers (25), OBP (.309), and slugging percentage (.439). In a truly proud moment for me, he was selected as an All Star. At that point, he was just the second player ever created by the software to be an All Star.

In 2006, Jack gave me the type of season that makes a general manager proud. He hit .254—not stellar, but a career high again—and bashed 34 home runs. He slugged a robust .535 with a .312 OBP. His 26 doubles were a career high and his 82 runs batted in were his most since his rookie season. It is worth noting that Jack turned 27 in July of this season, essentially hitting his prime.

The team underwent a big change in 2007. After 2006, the team’s eventual Hall of Famer and franchise cornerstone Mo Vaughn opted for an early retirement at age 38. (It’s worth noting that MY Mo Vaughn had 2510 hits, a .295 career average, and 521 homers in his illustrious career). Vaughn homered 31 times and drove in 119 in his final season. His retirement sent the team into a tailspin and, eventually, a rebuilding phase.

During 2007, Gonzalez appeared to regress. He tied a career low with 20 homers and drove in a career low 53 runs as we fell from an 89 win team to a 72 win team. He hit just .224. Topping it all off, this was a contract year for Gonzalez. He was resigned at the beginning of the season for $1.6 million per season for six years. One thing to keep in mind is that the software’s financials look a little different than MLB’s. A good rule of thumb is that the software’s figures are about a third of what MLB’s would be, so Gonzalez was to be paid about $4.8 million per season—a bargain for a 34 homer hitting catcher, but a 20 homer, .224 hitter?

In 2008, he went from a .224 hitter to a .214 hitter, but he raised his home run total back to 25, making it a bit more acceptable. But still, it wasn’t enough. I was starting to wonder if Jack would get better. I was getting defensive of cracks on Jack’s hitting made on our league’s forums. One thing I did have was a great pitching staff all along, and Jack was one of the reasons. He was an excellent defensive catcher and always threw out a lot of runners.

2009 was an important season for Jack, as he turned 30 years old that July. The Battle Cats were a struggling franchise, but we got a boost when Jack got off to a huge first half. He was an All Star again for the second time. Unfortunately, his second half started off miserably. As we slipped even further, I did a lot of studying of our box scores and game logs. I found some interesting patterns.

I noticed that though I was resting Jack because his hitting was slumping, we were still losing. We actually seemed to do better when he was in there, whether he was producing or not. So I put him back in, and I put him in every day. He finished a bit better and posted a career high .255 average with 25 homers and 74 RBI. He slugged .459, his second best mark yet. And we won more.

It’s one of those things where you really don’t know how much goes into the software model. Astros pitchers love throwing to Brad Ausmus, so he always plays even if he’s not the best hitter. Could my digital pitchers feel the same for Jack? He seemed to have built the trust of my star pitchers. So, I decided to never take Jack out again.

In 2010, Jack started all 162 games of the season. He hit just .230, but he belted a career high 35 home runs and drove in a new career high of 103 runs. The season included his 200th home run.

We went from an 80 win team to a 93 win team. We won our first division title since leaving the old DH league. Though we were smacked around in the first round of the playoffs, it was a great step.

2011 was more of the same. Jack started all 162 games and we improved to 96 wins (winning the division again). Jack hit .234 with 34 homers and 100 RBI. We made it all the way to our very first World Series. Unfortunately, we lost both our top starters to injury in a dramatic 7-game LCS, so we were stuck calling upon a reliever, Billy Koch, to join the rotation. We went six games, but fell short. However, it was another big step for the franchise.

Gonzalez received one lone third place vote for Most Valuable Player. It’s not much, but it was another owner recognizing that while Jack didn’t post the average and OBP of some stars, he provided plenty that was valuable to his club. Teammate Billy Marty, a computer-generated star teammate of Jack’s, took the MVP award. The Battle Cats swept the awards that season (a league first).

I was starting to realize something. Jack hadn’t missed a game since August 25th, 2009 and we were about to start 2012. He had started every game since 8/31/09, as well. And we were winning like the old days. It was fun.

Then came 2012.

Jack was even better.

I’m the father of a toddler, so I’m not going to go overboard and say that watching what Jack did in 2012 is like watching your baby grow up, but man… I’ve experienced the sim baseball equivalent.

Jack was off and running right out of the gate in 2012. He had nine homers and 23 RBI by the end of April. Nice start, but I’d seen this before. He had just a .250 average in June (even that’s not terrible for Jack), but he gave us eight more homers and (get this) 29 RBI for the month. That’s 17 home runs and 52 RBI by the end of May. That’s okay… he’ll slow down at the All Star break, right?

Wrong. June came and Jack had his biggest month, hitting .309 with ten homers and slugging .778 for the month. He became an All Star for the third time. At about the statistical mid-way point of the season, Gonzalez had 27 home runs and 75 RBI. July came and so did ten more home runs and 22 more RBI. This was starting to get a bit crazy. Jack, with 37 homers, had already eclipsed his career high in homers. And there were two months left of the season.

In August, Jack “dipped” to eight homers, but hit .316. During the month, I decided to go ahead and extend him even though he was not due for a contract until the end of 2013. For $2.3 million per season (remember, about $6.9 million in MLB money), I had Jack signed up for five more years (six including 2013). He would be a Battle Cat through age 39.

Finally, in September, Jack showed signs of slowing down. He hit five homrers, giving him a grand total of 50 on the year. He hit just .238, but that only brought his average down to .275, still a career high. He still drove in 21 (meaning that in all six months, he drove in 20+ runs), giving him 141 on the year. He posted a .338 OBP and .590 slugging percentage, both career highs, and also reached new highs in hits (167), doubles (34), runs (97), and triples (4), while tying his high in walks (53).

In September, he also passed the 500 consecutive games started mark, simply remarkable for a catcher. His current totals are 515 consecutive games played, 511 consecutive starts. This season was also his tenth straight 20 homer season from the start of his career, a feat no other computer-generated player in the league can boast.

In addition to his gaudy numbers, Gonzalez posted numbers with runners in scoring position of .301/.343/.613 with 12 homers in 163 at bats. His Close/Late numbers were .311/.373/.622 with 6 homers in 74 at bats. These numbers, and his league leading home run and RBI totals, helped him win his first Most Valuable Player award. Gonzalez was named first on twelve of the twenty ballots. Needless to say, I was ecstatic.

We won our third straight division title and tied our club win record of 98 (originally set back in 2003). After dropping the first two games of the LDS, we unfortunately found ourselves with our backs against the wall in the playoffs. Jack had enough in him for one more dramatic showing. We pulled off Game 3 on a 2-run ninth inning homer by Jack’s teammate, Billy Marty. In Game 4, with our season still hanging by a thread, Jack hit a pair of two run homers to power us to an 8-0 win. However, we dropped Game 5, 3-0, ending what should have been a much better season.

As we’re heading into 2013, Jack’s 11th season with the club, he is 33 years old and is starting to build some impressive career totals. He is only batting .235, but with 1229 hits so far, he seems to have a good shot at 2000 (especially with playing every day now). He has 292 homers, making 400 for his career seem very likely. If he keeps hitting homers at a 50 homer pace, of course he could get more. He is under contract for six more seasons. If he averages 30 in those years (a dropoff of 20 from last season), that would put him at 472. Can’t complain about that.

This article was not meant to be a biography of Jack Gonzalez. But I think his story really illustrates my point about baseball simulation. In fantasy baseball, there certainly is some sense of pride if you draft a Justin Verlander and he dominates. But how much pride can you take? It was the scouting director that found him and the general manager that drafted him to the pros, not you. With simulation, you can take more pride in this because you did it yourself. Nobody did the dirty work of getting the player to the big leagues besides you.

There are many reasons why I prefer baseball simulation over fantasy baseball. But I have to say that #1 on the list is definitely Jack Gonzalez, and all that goes along with him. He’s my baseball pride and joy—the guy I’ve brought up. Can you get these types of feelings in fantasy baseball?

I never did.

My BatchBlue staff photo, December 1, 2008.

I blame the kids.

Customize your data with SuperTags

The Flash Video runs 4:20 and is 24.5MB. (Download iPod compatible version, 11.1MB)

That’s just one of them. The whole set is on the screencasts page.

I also created a feed for the screencasts, therefore turning them into a video podcast. I went ahead and registered the video podcast with iTunes. So, yeah… it’s on iTunes!

I’ve found myself super into writing lately, so I’m going to write a series of How-To posts over at the BatchBlue Blog in the coming weeks. Last time I recorded screencasts, a few folks asked me about my process. So, I’m going to document it in three steps:

1. Recording the screencasts
2. Encoding the sreencasts and embedding them
3. Creating the podcast feed and submitting to iTunes

I’ll be sure to update you here when I publish them there. In the meantime, Happy Organizing!

This week, Red Sox second baseman Dustin Pedroia won the American League Most Valuable Player award.

This is big for me. You can see a history of my Pedroia infatuation by looking at Twitter’s archives or even seeing who I use as subject matter when unveiling redesigns.

So, why do I care? From the time I was ten, there was a certain player I gravitated towards certain types of players. One of those was the Pedroia mold. The bust-yer-ass dirt dog. These guys never had the raw talent, but always made the most of it. For this reason, they never really won awards. They just get pats on the ass when they do their job. And they’re fine with that. And I’ve always been fine with that.

But today, one of them (Pedroia) received a major award. I can’t help but feel like part of it.

Who else fits the bill of “My Guys”? Why, I’m glad you (might have) asked!

In the Pedroia “dirt dog” mold, the Red Sox have had quite a few. But let’s start with my favorite baseball player of all time.

My favorite baseball player of all time is Pete Incaviglia. I’ve always said that I love strikeouts—I love pitchers to get ‘em and hitters to get ‘em. Pete had mammoth power. He jumped directly to the major leagues after hitting (in three seasons) an NCAA record 100 home runs (a record that still stands… think about that) and being named the Collegiate Baseball Player of the Century. He crushed home runs with great frequency, but also piled up majestic strikeouts with even greater frequency.

My favorite Pete Incaviglia stories revolve around his hustle. Defensively, the guy was just a train wreck. But that didn’t stop him from trying. I like this tidbit from Baseball Library:

He showed that desire with the Phils in 1994 when he injured his shoulder crashing into the outfield wall on a ball he had almost no chance on.

That shows the type of guy he was. And… he always wanted to play. He may have skipped the minor leagues the first time around, but he certainly didn’t at the end of his career. During the strike in 1994, he went to play in Japan for his old manager (Bobby Valentine). In 1999, his AAA team loaned him to a team in the Mexican league. In 2000, he couldn’t get a job in affiliated baseball, so he played for three years in the Independent Leagues, the last season doubling as hitting coach (for his friend, manager Mitch Williams).

After three years as a minor league hitting coach in the Detroit system, he took a gig as a manager in 2008—also in the independent leagues. He reached the playoffs in his first year, though, and I’m quite proud of him.

Years and years and years ago, I even built a site for Pete. I was contacted by his personal assistant and the biography I wrote is even used on Pete’s own site.

Before there was Pedroia, there was Christopher Trotman Nixon. Trot Nixon is the original Red Sox dirt dog. He’s also the reason I will never, ever like J.D. Drew. Not just because he signed for big money and took Trot’s roster spot. But he had the nerve… the AUDACITY… to take his #7. Unforgivable, and I’ll never be comfortable with Drew in a Red Sox uniform because of it.

If you hear me say crazy things about how much money the Red Sox should give Jason Varitek this offseason, remember I’m just a panicked man in love. If I could have been a major league baseball player, I would have wanted to be just like Jason Varitek. Tek has something Inky and Trot don’t—appearances on MVP ballots. He ranked between 21st and 30th in the voting in the three years from 2003 to 2005.

Alas, Varitek and his agent (Scott Boras) are asking for a four year deal worth $52 million. What do I think he should get? I think he should get a two year deal worth $24 million. Also, he should have an option of a third year (at $12 million) that will be automatically triggered if he reaches certain stats. Like what? I’ll throw out 850 at bats between the two seasons. And if he is named to an All Star team or finishes Top 15 or so in the MVP voting (either year), it is automatically triggered.

Pedroia isn’t the only 5′9″ second baseman in Red Sox history that fits the scrappy dirt dog bill. A couple decades ago, I would tell you my favorite Red Sox player was Jody Reed (Also was a big Greenwell fan). Reed was awesome. Think Pedroia with a bushy mustache and less power. In 1990, Reed finished 18th in the MVP voting thanks to a .289 average and 45 doubles.

Sweet tidbit from Wikipedia:

An amusing sidelight to Reed’s career was his description on the back of one of his baseball cards: “Jody is a dangerous bunter.”

Dirt dogs aren’t the only type of player I gravitate towards.

Like I said, I’ve always liked the fireball pitchers. For that reason, my favorite major league pitcher today is Kerry Wood. I know he has not lived up to his MASSIVE potential (he’s never received a single Cy Young vote, but was a Rookie of the Year), but I’m a huge fan nonetheless. I’d love to see him in a Boston uniform.

One reason I immediately latched onto Kerry was because he was supposed to be the second coming of my favorite pitcher of ALL TIME—Nolan Ryan. While he was a crafty veteran (who could still bring it) later in his career, Ryan spent the early part of his career defining another “type” of player I’ve always loved—the pitcher who could throw a million miles an hour but had no idea where it was going. For a season emblematic of that, look at 1977. Ryan threw 299 innings and fanned 341 batters. He also walked 204 batters (second most all time to a 19-year old Bob Feller). Funny thing is… he only allowed 198 hits.

Many people remember Ryan for being the all-time AND single-season strikeout record holder. Some may know he’s first all time in fewest hits allowed per nine innings. But not many realize he is the all time walk record holder and the all time wild pitch record holder. And for good measure, he’s 11th all time in hit batsmen.

Ryan never did win a Cy Young Award, though he finished second once, third twice, fourth once, fifth twice, eighth once, and ninth once. He placed in the MVP voting seven times, peaking at 14th place.

Of course, what relief pitcher do I like? Well, it would have to be the “Wild Thing” himself, right? It’s Mitch Williams. Mitch, a teammate of Inky in both Texas and Philly, has the most career innings pitched (691) for any pitcher that has allowed more walks (544) than hits (537) in a career. I love his 1987 numbers—in 109 innings, he allowed just 63 hits and struck out 129 batters. But… he also walked 94 guys. Get this though… Mitch Williams finished Top 10 in the Cy Young voting twice, and even finished 10th in the MVP voting once.

We could go on and on. I used to feverishly collect baseball cards of Ozzie Guillen and Benito Santiago. Ozzie? Well, he just got no love. He was a wizard on defense… just happened to be the second best shortstop named Ozzie. Of course, now he’s a headline-grabbing manager. And Benito? Well, I was a catcher. Santiago could throw guys out from his knees. That’s pretty much awesome.

So, who were your guys?

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!

We pushed it overnight. I checked the forums this morning, and before we even posted anything about it this message came in:

Oh, WOW!

You guys are AMAZING! Logged in this morning, totally crabby about needing to work and watching SNOW fall, and I see that you’ve completely pimped the dashboard in fabulous ways! I can now batch-tag, procrastinate, batch complete and a whole lot more.

Thanks for turning my gloom into today!

-Robin

Never before have I worked anywhere that I had direct contact with users like this. It is, by far, the best part of the job. I love it!