Feb 15, 2010

Refining the MailChimp Interface with CSS3

It’s a really great time to be a web designer. HTML5 and CSS3 – the latest versions of the core technologies behind a majority of web pages – are finding greater support in contemporary browsers (Firefox, Safari, and Chrome to name a few). It’s now so much easier to design elegant interfaces that load faster, and that means a better user experience on web apps like MailChimp.

In addition to the fancy new features we introduced in Version 5, you may have also noticed a few changes to the interface of MailChimp. Over the Christmas holiday while things were quiet, we started to roll in a number of subtle refinements to the interface that not only make it look better, but they actually speed it up a bit too. In the pre-CSS3 days web designers often had to create a series of images to create simple things like rounded buttons or content boxes with drop shadows. All of the little images required for this sort of design elegance add some extra trips to the web server when a page loads to get all of the stuff required to display it. That was then.

Through the magic of CSS3, the stuff we designers have pined for and gone to great lengths to achieve is now as simple as adding a tiny bit of code to a style sheet – no extra images required. Let’s take a look at a few of the places in MailChimp where you can see the CSS TLC in action:

Buttons

MailChimp has a defined series of buttons used throughout the app (see figure 1). The button color varies to communicate its priority and place in the page information hierarchy.

standard button styles in MailChimp

figure 1. Some standard button styles in MailChimp

Each button used to require two images for each color to create the left and right curved ends using a clever design technique called "Sliding Doors". Figure 2 illustrates how the two button images sandwiched the label the old school way.

figure 2. Sliding doors technique used on buttons

figure 2. Sliding doors technique once used on buttons.

Do the math on the buttons shown in figure 1. If it takes two images per button with 3 different types of buttons on the page – that’s a total of 6 images that have to be fetched (plus the icons), which slows the page load. Those images also add a little bit of file weight too.

With CSS3, we can create the exact same looking button with code instead of images, which means less stuff to load and a lighter page weight without compromising the original design. Here’s the CSS that makes the same sort of button sans-images:


.button {height:32px; 
   line-height:30px; 
   padding:0 22px; 
   text-decoration:none; 
   font-weight:bold; 
   font-size:120%; 
   cursor:pointer; 
   border:0; 
   -moz-border-radius:14px; 
   border-radius:14px; 
   -webkit-border-radius:14px;}

.p1 {background-color:#296998; color:#fff;}
.p2 {background-color:#94CFFE; color:#666;}
.p3 {background-color:#D7CDB0; color:#754c24;}


Every button gets a base CSS class called button then a modifier class (p1, p2, or p3) is added to adjust the color and visual contrast in the page. The CSS3 part that circumvents the need for images is border-radius, which simply rounds the corners of the colored box behind the button text. Viola! You’ve got buttons with no images.

You can enhance the button further with some more CSS3. When the user mouses over the element, you can create the illusion of the button lifting off of the page with box-shadow.

.button:hover {-moz-box-shadow:2px 2px 2px #999; 
   box-shadow:2px 2px 2px #999; 
   -webkit-box-shadow:2px 2px 2px #999;}


Click figure 1 above to see a detailed look at the button hover state.

Clear User Feedback

figure 3. The pre-delivery checklist with CSS3 is full effect.

figure 3. The pre-delivery checklist with CSS3 is full effect.

You’ll notice that border-radius and box-shadow make appearances throughout the app these days. Essential user feedback like warnings, errors and success messages make use of these same CSS3 properties to not only refine their look, but also to improve their visibility a bit. If you’ve ever sent a MailChimp email campaign, you are more than familiar with the pre-delivery checklist (figure 3) you’ll see right before you click that send button.

Each message box and the corresponding edit button within employs CSS3 to create a soft, elegant look. Even the new Delivery Doctory follows these design conventions – figure 4.

The Caveat

figure 4. The new Delivery Doctor feature.

figure 4. The new Delivery Doctor feature.

CSS3 opens up so many exciting design possibilities, but as is often the case with most revolutionary advancements, there is a caveat. Internet Explorer users will not be able to enjoy these new enhancements just yet, as Microsoft has yet to provide support in their browsers. Internet Explorer 9 (release date yet unknown as of release of this post) will support border radius, and some other more advanced CSS features. Until then, IE users are still relegated to an Internet Junior experience. If you are not strapped down by corporate limitations on your computer, you may want to consider switching to a more sophisticated browser like Firefox or Chrome, which do support CSS3 and also offer a faster MailChimp experience because of their more advanced JavaScript engines.

IE users will, however, enjoy the same speed boost that MailChimp Version 5 brings, but the enhanced design will simply degrade back to a less sophisticated look. Designers have been arguing whether or not it’s okay for web interfaces to look different in various browsers. Given the disparities in browser rendering engines, the final vote is unanimous.

Is it worth it?

Are these subtle design flourishes necessary? Any designer would argue that yes they are. Just as the culinary arts seek to create more than simply edible food, interface designers want to create more than just usable interfaces. We want to create beautiful, and memorable user experiences.