Two Weeks: Two Redesigns (BatchBook & BatchBlue.com)
As a designer, I probably should be writing more here about the design I’ve been doing. Well, it’s time to give you an update.
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 inheritfont-family,font-sizeand others from styles applied to the<body>tag. The<button>tag, however, needs those properties defined specifically usingbuttonin the selector. border-radiusworks 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 supportinline-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.
Both designs, in my humble opinion, are vast improvements. Awesome job, Adam!
Thanks for the heads up on CSS Sprites – and great job with the redesign!