Last night, my blog post hit the BatchBlue Blog where I announced I’ll be moving on from BatchBlue Software and joining PatientsLikeMe.

Here’s the intro, but I ask you to read the entire post…

After nearly two and a half years, this week was my last at BatchBlue. This is a decision that I couldn’t have imagined making just a few weeks ago. My awesome co-workers have been incredibly understanding and supportive…and I think a big reason is that the decision really has nothing to do with BatchBlue at all.

I mentioned in the post that there are personal reasons for this move that are incredibly important to me—the type of thing that can convince you to move from what is already a great professional situation. I really can’t say enough great things about BatchBlue and the entire BatchBlue team.

Almost two and a half years ago, I was a wee lad working 70 miles away from my wife and little girl (and baby boy on the way). I was with Aptima, another fantastic company that really catered to my inner entrepreneur by essentially allowing me to dynamically define my position as I explored my interests. Unfortunately, it came to a point where I was reaching the limits Aptima could provide. They are an R&D think tank-type organization, and being able to work and collaborate with users during the development process was something I wasn’t able to do and really wanted to try.

Along came BatchBlue. I was able to work from home, eliminating the commute issue. I was able to work with a very small and tight group. I was able to work on a web app at the beginning of the development phase. I was able to work closely with users as we went from alpha to beta to 1.0. I was able to be home for the arrival of my third child. I was able to be around for doctors appointments, preschool performances, and even more serious events like an 11-day hospital stay with our infant. Basically, BatchBlue gave me everything I ever could have asked for.

I actually first talked to PatientsLikeMe while I was still at Aptima. I was blown away by what they were doing. I started talking about them on this blog and on other blogs. I was kind of smitten.

Over the last couple of years, I’ve done a little bit of side work for PatientsLikeMe (that reminds me, I gotta update my portfolio!). In doing that work, I not only gained some insight into what PatientsLikeMe is trying to accomplish, but also met quite a few members of the team. That helped a lot since I know I’m not heading into the unknown on this. I can thank Twitter for cultivating the relationships of some of the folks I met while also giving me some insight into the folks I haven’t met yet.

I’m incredibly proud of the work I’ve done at BatchBlue—on BatchBlue.com, BatchBook, on The Small Business Web and also the work done with our users. I’m also thrilled I got the chance to work with Pam, Michelle, Sean, Keri, Stephanie, Matt, Adam and Melony.

Next week will mark a huge change for me, but it’s time for me to get over that. I have a lot I want to accomplish.

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!

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!

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!

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!

BatchBook Redesign

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

Here’s how it looks:

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

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

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

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

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

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

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

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

BatchBlue.com Redesign

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

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

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

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

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

I recorded them with Screenflick. I also picked us up a license for the JW FLV Media Player. I don’t like the quality of screencasts uploaded on YouTube, Vimeo, and the like, so I like to host them myself. This player finally made this a painless process.

So, what do you think?

This time, I want to talk about a feature I’m super stoked about—and this one I had remarkably little to do with. Our sweet tech team of Riley, Will, and Sean cranked this out out.

Introducing BatchBox Email Forwarding

So, here’s the skinny from the BatchBlue Blog:

We’ve had customers tell us that when they are on the phone with a client, they have their “Log Communication” screen open so they can take notes and easily save them alongside their client’s contact info. That’s great for phone calls and chats, but what about emails? We don’t want to make you copy and paste your emails into BatchBook.

Now, with BatchBox email forwarding, you can send emails directly to BatchBook. BatchBook will automatically store the email as a Communication, attach it to the relevant contacts (and create a new contact, if needed), and retain any attachments.

View a screencast

So, if you haven’t tried out BatchBook yet, you can sign up for free to give it a whirl. I’m kind of in love with it.

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

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

iui

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

iPhoney

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

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

Safari 3.1

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

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

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

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

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

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

Plus, developing for iPhone means no Internet Explorer!

Happy Small Business Week!

That’s right, next week is National Small Business Week. To celebrate, we decided to run a little contest. It’s been all SuperEverything for us since we released the SuperTags feature, so we’re holding a Super Hero contest! Basically, you have to tell us what your Small Business Super Power is and how you use that to benefit your small business.

So, if you’re a small business (or work for one!), please enter here. The prizes rock… we have everything from a “Free for Life” BatchBook account with “unlimited everything” to a Superman lunch box. And of course, tee shirts! SuperTags tee shirts!

Other BatchBlue Blog Posts

I’ve also written a few other posts recently.

The most recent is a post about my browser workflow and how I’ve installed a site-specific browser (SSB) for the sole purpose of running BatchBook. It’s called Free BatchBook From the Browser with a Site-Specific Browser.

I also wrote a little post about how when you add BatchBook to your iPhone’s home screen, I customized the lil’ icon that shows up. I teach you (the very easy process of) how to do it yourself in a post called BatchBook iPhone Web Clip Icon (and How to Make Your Own).

Finally, going back to February, we launched our Small Business Resource Center. I wrote up the launch and dropped some knowledge about the hCalendar microformat in a post called Introducing the Small Business Resources Center.

Blue Paper: Social Media For Small Business

The Resources Center mentioned above features two Blue Papers (like white papers, only blue). I wrote one of them with Michelle called Social Media for Small Business.

It’s the longest thing I’ve written since school, that’s for sure. It prints to a whopping 18 pages. It was fun to write, but I had more fun with the crafting of the Resource Center’s web pages. In addition to hCalendar, I played with print style sheets in more depth than I had before. So, now if you print anything off the BatchBlue.com site, it prints in a nice, clean, readable format. Check it out with the Blue Paper.

It was interesting writing something with someone else, too. I think it turned out great—Michelle kept me in check when I wrote things like “the beauty of Twitter is…” alongside “the problem with Facebook is…”. Thanks, Michelle.

So, there it is. I’ve been busy. Not all of it has been recorded here, so I wanted to give you all a little recap.

In this 2.0 world, it seems that 1.0 gets the short end of the stick. Well, not for me. At BatchBlue, our flagship product—BatchBook—went 1.0 yesterday. As in… no more beta. As in, the curtain has been pulled off. As in… a lot of hard work paying off.

Never before have I been so intimately involved in a product launch. This was very different from when we launched our beta at DEMOfall07. That was in sunny California with tons of press, bright lights, and on-stage demos. Yesterday’s release, as our President Pam eloquently put it in a blog post:

Oddly, it is a quiet event. It is happening in the wee hours of a cold New England night so that the uploading of new features does not disrupt any beta users’ work. It is happening at the remote sites of BatchBlue programmers, quality assurance contributors, design mavens, and communications savants as each one of us has a huge stake in the product we are sending out to the world.

As exciting as this is, 1.0 is simply a foundation. Now that we have a great baseline in place, we can turn to our users to see how we can make things better, more useful, more powerful. We have ideas for improvements. We have ideas for new features. But now we have more people to please than just ourselves. That is equal parts exciting and intimidating, but ultimately rewarding.

I’ll start with the most recent, a post called “More Disruptive and Category Expanding Technologies from Demofall07” by Jim Forbes (one of the founders of DEMO).

BatchBlue is aimed at what I think is the most exciting part of the emerging market for web-based applications, Small businesses and sole proprietorships that have been slow to adopt technologies but which have viable positions in their markets and communities.

In contemporary terms such entities are called “microbusinesses.” However despite their diminutive title, it’s a huge category (20 million nationwide) and an underserved market. And, while Intuit tries to serve this market with product like QuickBooks there have been few attempts to offer this wide market CRM, sales and task tracking software.

Many have told me it is a crowded market, but I’m glad that Jim can see we’re really going for an underserved portion of that larger market.

It’s always the bloggers that are the most fun. Graeme Thickins was simply one awesome dude. He featured us in a writeup called “DEMOfall 07: Day 2 – BatchBlue Does Contacts…Even Your DEMO Ones!“. He said:

Customization is the key, the company points out, because no two small businesses are the same, and requirements vary widely by industry. The contact management needs of the hundreds of thousands (millions?) of micro-businesses out there (meaning fewer than 25 employees) are all over the map. And most are simply not being served by the usual CRM suspects. BatchBook has a simple address-book interface (a very clean, simple UI) that you tag and categorize, and you also customize it for your unique business needs. What may be the best thing of all is you can “build relationships between these records.” BatchBook is actually a contact manager, a communications manager, and a task manager all in one. This online app is available now on a free trial basis, then it’s only $9.95 per month. Again, I say well worth it — bring it on!

Graeme… you had me at “clean, simple UI”.

Also from the “you get me” file was Marc Orchant’s writeup on Blognation titled “DEMOfall: Taking the “small” out of small business“:

When CRM is too heavy and customer list management is too light, BatchBlue hopes their BatchBook product might be the “just right” solution. BatchBook is a customizable online contact organizer. It allows the user to create records and lists and then add tags to help make the information more useful from an indexing or relational perspective.

Ah, “relational”. The term that may be too techy for our marketing but really explains the contact management in BatchBook perfectly.

And Steve Linnin is a total fan. He also provides excellent advice through his title: “A Contact Management Solution for the Small Business Owner. Be Smart – Sign Up!“.

This golden nugget came to me, today, as I was searching for new and unique content. I have seen a lot of CMS [contact management solutions] projects in the past and very few have caught my eye. This one does! It’s visually pleasant, simple to use and has the features and functions needed for any person or small business owner. This company is currently in beta [beta = testing period]. I am certain that I will be “gratefully” surprised when they add modules and plug-ins, which, I can imagine that they are “working on” in coding rooms over at Batchbook.

I envision that this company will be purchased by a “big player” in the Internet space; that is, if they are not, already! If you are smart, you will sign up for this CMS software provider.

…

This website software is a perfect solution for the small business owner or individual starting out in business. Batchbook is brilliant to go after the small business owner in the CMS internet space. Consider yourself lucky to have seen this one.

Mom? Is that you?

Seriously. I feel the same was as Steve. Some of the best feedback we received at DEMO was from sole proprietors that were interested in BatchBook for their own personal use. I’m using it now for my contact management (which provides me great insight on what features to add, UIs to change, etc.).

And last but not least, the morning we were set BatchBook out into the real world the Providence Business News published a piece called “A coming-out party in San Diego” by David Ortiz (no, not that one). I won’t quote that one here… I’ll stop now before drowning you with BatchBook praise.

So, I’ll apologize if this post was a bit on the “Go me!” side. I’m just really excited about where we are headed and needed to tell someone.

Oh, and if it made you want to sign up, that’d be cool too.

CashView kicks off the list for three reasons. First, they were one of the winners of the coveted DEMOgod awards. Second, they offer a slick product that addresses an area that we don’t directly target, but could conceivably hook into via APIs and whatnot: small business finance. They exuded the same passion for solving real-world small business problems that we do, so it really hit home.

Lastly, and perhaps most importantly, they are great people. We had the pleasure of demoing right after them and the feeling was one of definite camaraderie in a situation where it could have been all about competition. We exchanged a bunch of our BatchBrew coffee for some of the exquisite chocolates they were handing out.

PlanHQ allows you to take your business plan out of the dusty, static Word format and make it a collaborative work of everyone in the team. Certainly tailored for small businesses, each user sees the main company goals but also the tangible tasks that need to be executed to reach those goals.

Two things stand out for me. I think the collaborative creation of a tangible object (on this case, the printed business plan) is interesting. I have an idea (that I’ll never get to) for a similar approach to a vastly different product. Also, I like the idea that a company’s newer employees can still view a relevant business plan, not an already-expired snapshot of what the company wanted to be 15 months ago.

Yuuguu was one of a couple products (Propel’s Personal Bamdwidth Manager being the other) that I would rather see as Skype features than stand alone products. Yugguu, to me, is Skype with desktop sharing. The sharing can also be done over a temporary website when both parties are not Yuugu users. VERY slick.

Dear Skype: please purchase Yuuguu. kthanksbye.

Tubes is something I won’t personally use, but I can see it being a great product for those who prefer to bypass Flickr, YouTube, Google Docs and the like when sharing files with small teams. Essentially, you create a dropbox of files that you share with whatever users you wish. Your Tubes can even be public. This is even how the Tubes folks update their own web site.

MyVello was my choice for DEMOgod. I was floored that they didn’t get it, but it must be because they just barely went over the six minute limit (by six seconds). MyVello solves a very real problem—conference calls always start late. So, the site allows you to set up the contacts for a conference call and hit one button when it is ready to start. Everyone’s phone rings at once and the call starts right away. Nobody hangs out on hold… no codes to enter… no problem.

In the words of Steve Jobs, there’s “one more thing.” There was one presentation—that wasn’t done by a demonstrator—that simply blew everyone away. I had the pleasure of speaking with Michael Callahan, CEO of Ambient, at the opening reception. Michael, 24, is the inventor of the Audeo.

The Audeo allows people unable to speak (think diseases such as ALS here) to utilize their thoughts to create speech. It sounds like science fiction, but Michael demonstrated it all week. Unbelievable.

There were certainly a few other cool products, but that’s my Top 5 (+1) and I’m sticking to it.

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

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

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

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

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

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

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

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

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

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

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

This morning I upped a post over at the BatchBlog about Apple’s decision to not offer an SDK for the iPhone (and how that affects us at BatchBlue). We’re making a web app, so it’s not really rattling our plans any. But others are less than thrilled.

Our Own Video from the Providence Geek Dinner

Brian Jepson Interviews Pamela at Providence Geek Dinner