Jon Hicks aptly identifies Gmail as the Holy Grail of userstyles. And rightly so—it is incredibly popular, yet it has enough visual quirks to ensure that absolutely no one is happy with its appearance. As such, there are hundreds of Gmail userstyles available. For a while, I held off on attacking the project. But after months of clicking those buttons encased in that awkward thick border, I had enough. Something had to be done.

Download Gmail Vitamin

As you can see, I didn’t want to completely overhaul the interface. Google apps are generally innocuous, an aesthetic I appreciate as the design facilitates the functionality fairly well. All the tweaks I put in place are concerned with resolving some specific quirks that I just couldn’t stand anymore. The buttons are now softened and the 4px border around the main content has been reduced to 1px. I also took consideration to add more padding around most items, as advocated by Khoi Vinh. For a full feature set, you can read all of them on the userstyle page.

I do realize that the Gmail team makes frequent revision to the markup, and I hope to keep this userstyle up to date.

While I tweaked the design with either the Classic Gmail theme in mind, the userstyle is compatible with all other themes. In the likely case that you’re not 100% happy with my fixes, I added enough comments so that any user can go in and remove certain styles line-by-line. I, for one, like having no underline for my links until I roll-over them. But I could imagine that others might need those links always underlined, especially when using the other themes.

As with previous CSS themes, all the gradients were generated with the Quickie Canvas. Here’s the script for the glossy buttons:

var grad = ctx.createLinearGradient(0,0,0,h);
grad.addColorStop(0, '#FFF');
grad.addColorStop(.5, '#E8E8E8');
grad.addColorStop(.5, '#DADADA');
grad.addColorStop(1, '#F5F5F5');
ctx.fillStyle = grad;
ctx.fillRect( 0, 0, w, h);

Now about those buttons…

If you’ve never looked under the hood of Gmail, I recommend giving it a try. Open up Firebug and see if you can properly overwrite the background color of any element. The markup is incredibly deep and intricate. It’s mind-boggling at first, un-collapsing an nH div only discover that there are no less than four more nH divs contained within it. And the epitome of this byzantine markup is the Gmail button.

In February, then-Google-lead-designer Douglas Bowman unveiled the new multi-function buttons for Gmail. I do have to tip my hat: it was a tremendous achievement that Bowmen was able to create a pseudo-rounded-corner box with pseudo-shading and make it all work even in IE6. But in order do so the markup for just one button is the following:

<div id="" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary">
    <div class="goog-inline-block goog-imageless-button-outer-box">
        <div class="goog-inline-block goog-imageless-button-inner-box">
            <div class="goog-imageless-button-pos">
                <div class="goog-imageless-button-top-shadow"> </div>
                <div class="goog-imageless-button-content">
                    <b>Button text</b>
                </div>
            </div>
        </div>
    </div>
</div>

I bother bringing this up because I can think of no better example for the case of progressive enhancement. Hacking seven elements to get a faux version of rounded corners and gradient shading seems to be like throwing the baby out with the bath-water, especially considering that the same effect could be better achieved solely in CSS. If Google embraced progressive enhancement, they wouldn’t have to go to such lengths, producing a monstrosity of markup all for a single button. IE6 users would be still get buttons, theirs just wouldn’t be as pretty.

The Gmail buttons are a bit of a Rube Goldberg contraption. But with options like userstyles and Greasemonkey scripts available, I guess I can’t complain. All I’m asking is they make it a little easier next time.

Since the beginning of 2009, HTML5 has become the hot topic in the web design community. Everyone is excited to try out the new elements and join in the fun. While I too am interested in playing with sections and asides, I'm a bit disappointed that the new canvas element hasn't been more prominent in all of the HTML5 hullabaloo.

I won't go into the details of how and why the canvas element works. For that, I recommend reading Mozilla Developer Center's Canvas tutorial.

In brief, the canvas element enables designers to create images using programming and geometry. I realize this might not be a big deal to a good amount of designers out there. If you live in a world of Photoshop, Illustrator, and all around GUI, you might think its completely backwards to create something visual through pure code. For example, take Cedric Dugas:

The canvas tag was created in a response to those who wanted pixel drawing in html. It feels like Flash 5 without any graphic UI. Seriously I gave it a try, Unless you are really good in mathematic formulas, don't expect to do great things on it. Most front-end developers are not well versed in mathematic programmings, which means we'll probably never use this thing as it's too complex to work with, or will only use a plug-in.

I can sympathize with Cedric here. When you are solely a web designer who doesn't have to dabble in development, you are conditioned to rely on GUI. Most of your day is spent pointing and clicking, selecting options, arranging layers, and navigating through multiple levels of dialog boxes. So I understand the repulsion to a tool that can only be manipulated via code and scripting.

But I doubt that most designers are only 'visual' creators, shackled to GUI. More often, a web designer's skill-set extends through a decent amount of front-end development. Chances are, if you ever wrote a couple lines of JavaScript, then you can get your head around using the canvas. If not, the canvas element might be an ideal place to get your feet wet with programming. The results are purely visual, so you have immediate feedback on whether or not your code is working.

Currently, I think most designers view the canvas element as either for weird, experimental designs, or boring pie charts and bar graphs. But I've been using the canvas in a much more practical manner — to generate simple UI graphics.

As I see it, using the canvas element in this manner has several clear advantages over traditional GUI applications like Illustrator or Photoshop:

On top of those reasons, you now have at your disposal all the advantageous of generative art. Move over Joshua Davis.

With all these advantages in mind, I developed the Quickie Canvas. It's a simple web app that uses jQuery to generate canvas elements, basically skipping over all the HTML muck to get one to render on the page. Any time I need a gradient, drop shadow, button, or shape, I just load up another tab in Firefox and get coding. As proof of my method, I'm providing the code to all the images used on this site.

Examples

I am still working out all the kinks with some of these examples. All of them were originally rendered in Firefox 3. I've discovered several discrepancies between it and Safari/Opera. If you're using IE, I'm sorry to say I couldn't get excanvas working properly.

Drop shadow

var grad = ctx.createLinearGradient(0,0,0,h);
grad.addColorStop(0, 'rgba(0,0,0,.15)');
grad.addColorStop(.3, 'rgba(0,0,0,.05)');
grad.addColorStop(1, 'rgba(0,0,0,.0)');
ctx.fillStyle = grad;
ctx.fillRect( 0, 0, w, h);

Navigation Gradients

Shown at 940 x 196, but was actually rendered at 1440 x 300.

var s = w/6;

var colors = new Array("#F8A","#3D8","#EB2",
                    "#8AF", "#C66", "#C4C" );

for ( i=0; i<=5; i++) {
  grad(i*s, colors[i]);
}

function grad( x, color) {
  ctx.fillStyle = color;
  ctx.fillRect( x, 0, s, h);
}

var lingrad = ctx.createLinearGradient(0,0,0,h);
  lingrad.addColorStop( 0/h, 'rgba(255,255,255,1)');
  lingrad.addColorStop( .73, 'rgba(255,255,255,0)');
  lingrad.addColorStop( .87, 'rgba(0,0,0,0)' );
  lingrad.addColorStop( 1, 'rgba(0,0,0,.1)' );

ctx.fillStyle = lingrad;
ctx.fillRect( 0, 0, w, h);

D Favicon

var grad = ctx.createLinearGradient(0,0,0,h);
grad.addColorStop(0, '#E79');
grad.addColorStop(1, '#B46');
ctx.fillStyle = grad;

ctx.beginPath();
  ctx.lineTo(1,1);
  ctx.lineTo(8,1);
  ctx.arc(8, 8, 7, -Math.PI/2, Math.PI/2, false);
  ctx.lineTo(1,15);
  ctx.lineTo(1,11);
  ctx.lineTo(3,11);
  ctx.lineTo(3,4);
  ctx.lineTo(7,4);
  ctx.lineTo(7,11);
  ctx.arc(8, 8, 3, Math.PI/2, -Math.PI/2, true);
  ctx.lineTo(1,5);
  ctx.fill();
ctx.closePath();

Diagonal Stripes

var color1 = 'rgba(255,0,0,1)';
var color2 = 'rgba(255,0,0,.2)';

ctx.fillStyle = color2;
ctx.fillRect( 0, 0, w, h);

ctx.fillStyle = color1;
  ctx.lineTo( w/2, 0);
  ctx.lineTo( 0, h/2);
  ctx.lineTo( 0, 0);
  ctx.moveTo( w, 0);
  ctx.lineTo( w, h/2);
  ctx.lineTo( w/2, h);
  ctx.lineTo( 0, h);
  ctx.fill();
ctx.closePath();

Grain

for ( ih=0; ih < h; ih++) {
  for ( iw=0; iw<w; iw++ ) {
    var alpha = Math.random()*.07+.04;
    ctx.fillStyle = 'rgba(0,0,0,'+ alpha + ')';
    ctx.fillRect( iw, ih, 1, 1);
  }
}

RSS icon

// orange gradient
var grad = ctx.createLinearGradient(0,0,w,h);
grad.addColorStop(0, '#D80');
grad.addColorStop(.5, '#FA3');
grad.addColorStop(1, '#D80');

// orange background w/ gradient
var r = 2.5; // corner radius
ctx.fillStyle = grad;
ctx.beginPath();
  ctx.arc( r,     r, r, Math.PI, Math.PI*(3/2),false);
  ctx.arc( w-r,   r, r, Math.PI*(3/2), 0,false);
  ctx.arc( w-r, h-r, r, 0, Math.PI*(1/2),false);
  ctx.arc( r,   h-r, r, Math.PI*(1/2), Math.PI,false);
  ctx.fill();
ctx.closePath();

// circle bottom left
ctx.fillStyle = "#FFF";
ctx.beginPath();
  ctx.arc( 3.5, 10.5, 1.5, 0, Math.PI*2, true);
  ctx.fill();
ctx.closePath();

// quarter circle lines
ctx.strokeStyle = "#FFF";
ctx.lineWidth = 2;
ctx.beginPath();
  ctx.arc( 2, 12, 6, 0, -(Math.PI/2), true);
  ctx.stroke();
ctx.closePath();

ctx.beginPath();
  ctx.arc( 2, 12, 9.5, 0, -(Math.PI/2), true); 
  ctx.stroke();
ctx.closePath();

Previous/Next links

I was also able to swivel the arrows around for the up/down links for my portfolio.

function arrow(s, x, y, angle, color) {
  ctx.save();
  ctx.translate(x,y);
  ctx.translate(s*1,s*2);
  ctx.rotate(angle);
  ctx.translate(s*-1,s*-2);
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.lineTo(s*1.8,s*0);
  ctx.lineTo(s*.8,s*2);
  ctx.lineTo(s*1.8,s*4);
  ctx.lineTo(s*1,s*4);
  ctx.lineTo(s*0,s*2);
  ctx.lineTo(s*1,s*0);
  ctx.fill();
  ctx.closePath();
  ctx.restore();
} 	

var r = 5;
arrow(r, r*0, 0, Math.PI*0, "rgba(0,0,0,.2)");
arrow(r, r*1.2, 0, Math.PI*0, "rgba(0,0,0,.2)");
arrow(r, r*0, 40, Math.PI*0, "rgba(0,0,0,.6)");
arrow(r, r*1.2, 40, Math.PI*0, "rgba(0,0,0,.6)");

arrow(r, r*0, 80, Math.PI*1, "rgba(0,0,0,.2)");
arrow(r, r*1.2, 80, Math.PI*1, "rgba(0,0,0,.2)");
arrow(r, r*0, 120, Math.PI*1, "rgba(0,0,0,.6)");
arrow(r, r*1.2, 120, Math.PI*1, "rgba(0,0,0,.6)");

This article's background

In this example I did 800 iterations, but the image I used has 4800 iterations.

var color1 = 'hsla(330,30%,92%,1)';
var color2 = 'hsla(0,0%,100%,1)';
ctx.fillStyle = color1;
ctx.lineWidth = 1;
ctx.strokeStyle = color2;

for ( i=0; i<=800; i++ ) {
  //randomize values for placement and size
  var x = Math.random()*w;
  var y = Math.random()*(Math.random()*.75+.25)*h*.9;
  var s = 5+Math.random()*Math.random()*Math.random()*100;
  var theta = Math.random()*3.14;

  // render boxes on the left
  ctx.save();
    var x1 = x-w/2;
    ctx.translate( x1, y);
    ctx.rotate(theta);
    ctx.translate(-s/2, -s/2);
    ctx.fillRect(0,0,s,s);
    ctx.strokeRect(0,0,s,s);
  ctx.restore();

  // render the same boxes on the right, so it repeats
  ctx.save();
    var x2 = x+w/2;
    ctx.translate( x2, y);
    ctx.rotate(theta);
    ctx.translate(-s/2, -s/2);
    ctx.fillRect(0,0,s,s);
    ctx.strokeRect(0,0,s,s);
  ctx.restore();
}

After reading about Michael Bierut’s sketchbooks, I was compelled to find the blank-page composition books the prolific designer extolled. Sure enough, the local office supply store didn’t have them, but I was able to find composition books with graph paper.

Getting my hands on one, I could see how any creative person could latch on to these. The saddle stitching makes for pages that open easily and lay flat. Best of all, they are tremendously cheap. The low price means you don’t feel guilty about filling in the pages. Any idea is worth putting down.

Discussing his own sketchbooks, Frank Chimero emphasized the importance of thrift:

For sketching, I have a three-ring binder with hole-punched copier paper. Cheap, awesome. And, you don’t feel bad documenting your bad ideas, because, c’mon. It’s cheap paper. Getting the first, awful ideas out of the way is crucial for me, and if I document them on paper, I feel like I’ve acknowledged it and can move on to better things. If I had nice paper and a nice sketchbook, I’d be paralyzed to make the first idea good or great.

I feel you there, Frank. I have plenty of unfinished and empty Moleskines sitting around to back up his statement.

Ever since John Hicks released his custom theme over a year ago, I’ve taken up the pet project of redesigning the Textpattern admin interface. Now that I’ve released some of these themes, I thought it would be appropriate to discuss my process and what challenges I faced.

Motivation

Aside: While I was drafting this article, Wion released a terrific post regarding the Textpattern back-end. I recommend you read it as well. He provides some historical context and he goes into detail about what elements he would fix. If you are interested in getting involved in the a possible Textpattern redesign, go ahead and chime in on the current forum thread.

Why change the Textpattern interface at all? The general consensus from the community was that, while not the most attractive back-end, Textpattern does look okay, and more importantly, it gets the job done. If it ain’t broke, don’t fix it.

While the design of Textpattern wasn’t necessarily broken, I do feel that it fails in one specific area. The look of the interface does not properly represent the brand of Textpattern. Now that I’ve been using TXP for several years, I’ve come to think of as sleek, efficient, modern and easy-to-use. But when I look at the back-end interface, I do not see those characteristics reflected in the design. The tabs look a bit clumsy as the drop shadows are too opaque. The text fields feel dated with that grey background. In short, it feels old, like it would have been the best blogging solution five years ago, not the flexible, modern CMS I’ve come to know it as.

Words and phrases that characterize Textpattern

• minimal
• sleek
• nimble
• efficient
• convenient
• easy to use
• flexible

The main goal of my themes was to help close this gap between the design and the brand of Textpattern. The themes wouldn’t just be some shiny new chrome—a redesign just for its own sake. Rather, each detail would have to emphasize the great qualities that make up TXP.

Tab-ula rasa

My primary focus of re-designing the Txp admin interface always began with the tabs. The tabs are the principal navigation element. As I already stated, I wasn’t too big of a fan of the drop shadows. But there’s a bigger issue here: both rows of tabs are too similar to one another. There are only two characteristics that separate the primary row from the secondary row:

1. Primary tabs are placed on top
2. Primary tabs are colored a slightly darker yellow

The original admin tabs.

Apart from that, the user has no other visual cues to distinguish between the elements. Shape, size, and behavior are all the same. This is a Gestalt issue. Since the tabs are so similar in appearance, we want group them together. Consequently, differentiating between secondary and primary items is all the more difficult.

I was also reminded of Dave Shea’s article, Get in Shape. In it, he specifically addresses this issue with primary/secondary navigation. When you do not consider the entire composition of both elements, it can result in awkward shapes that do not seem to relate to one another.

I used different shapes, colors, sizes to distinguish between primary and secondary tabs.

Facing this dilemma, I tried to use different characteristics for the primary and secondary tabs: size, shape, color, and position. To emphasize the child-parent relationship between the two rows, I found the most successful technique was to use tab shapes only on the top row. This is a typical design pattern I saw used with other popular CMS like Wordpress (the 2.5 release) and Expression Engine. Two rows of tabs reminds me too much of a bad Microsoft UI. My favorite solution to the two-row tab problem was the convention of using a heavy bottom border for the secondary tabs, as John Hicks did in his custom theme. This border was subtle enough that didn’t compete with the tabs, but it was strong enough to be noticed. In search for other solutions, Pattern Tap was a true blessing, providing plenty of examples of tabs I could steal from.

Branding

Here’s my best attempt at expressing why Textpattern is great:

Textpattern is small and easy to use, which makes it nimble and fast. Textpattern also has a tremendous capacity for expansion, which makes it flexible enough to handle a variety of purposes.

My aim was to adhere to those two ideals—minimalism and flexibility. In terms of minimalism, this meant keeping “chrome” to a low—making sure that every gradient and drop shadow I put in place had a purpose and was necessary as a design element. For flexibility, I had to consider that Textpattern is used to handle many different kinds of content—blogs, portfolios, brochure-ware, even magazines. The interface that controls those different platforms should be able to fit the role.

The default theme comes with the most prominent design element of Textpattern, that yellow bar (most say yellow, I always thought it was orange). It’s the first thing you see, a bright strip of color right at the top of the page. Part of me loves it, because its so bold and it immediately acts as the brand for Textpattern. But as a designer, I found that working with it was a bit frustrating. #FFCC33 is a serious color, one that’s doesn’t play well with others. I tried several color combinations to see if I could somehow use it to my advantaged, but only ran into frustration. I tried other beiges and pale yellows and oranges, but the results looked too mushy. Adding a black or charcoal gray to the mix made for a bumble-bee / Stryper look. And I didn’t want to try another bold color, like royal blue or blood red, because then they would be competing. In the end, I either kept the yellow un-touched, and used it with a minimal white, or removed it all together.

Buttons

Top: buttons as styled by the default Textpattern CSS. Bottom: Buttons with styling removed, rendered with Firefox for Mac.

I suppose this a point of contention amongst Interaction Designers, but I prefer buttons to retain their native browser rendering. This maintains consistency within the web application and ensures that the user views a button as a button. Moreover, The smaller buttons (with classes of spsmallbox and the like) don’t look any better than the default browser rendering. Plus, you don’t have to worry about active and hover states in the CSS, as the browser will handle that.

Typography

Looking at the type, Textpattern employs Verdana at 11px. Again, here’s another 2004 design element that doesn’t quite mesh into today’s environment. Verdana was designed for the screen to be legible at small sizes. It’s hey day was 8 years ago, before Clear Type and anti-aliased pixel rendering. Nowadays I see Verdana as dated and clunky. Using other fonts — Helvetica/Arial, Lucida Grande, and even Georgia italic bold — helped freshen up the look.

Execution

Even if the final product of this project isn’t too flashy, I am happy that I took it on for the simple fact that it forced me to stretch my abilities as a web designer.

This was the first time (and hopefully last) that I had to implement CSS for a table-based layout. We now live in a post-standardista world of web design, where table-based layouts have become the fabled gremlins of the dark ages long since past. But here was a great opportunity to bring them back into the light and try working with them. I was immediately reminded why the tables are so loathed. In short, CSS and HTML tables can play well together, but it takes a lot of work. Hopefully, the development team will look to tackle this issue in one of the next releases.

Since I only had CSS to work with, I was forced to adopt data URI images. This is a method I conned off of (who else?) Jon Hicks, who mentioned in his User Stylin’ article for 24ways. But unlike Mr. Hicks, I generated the URI by creating images straight from the canvas element. In fact, creating these themes was the primary reason why I made the Quickie Canvas tool.

Results

View theme demo and download themes

Getting a hang of restyling Textpattern took a while, but once I got it, it was easy to strap on my CSS helmet (it is a helmet, not a hat) and theme it up. So far, I’ve developed 11 themes that are compatible with Textpattern versions 4.0.5 through 4.0.8. I made so many because I kept trying to find that ideal theme that could possibly replace the default CSS. The themes range in many elements I changed and how much I kept the same from the default CSS. Sometimes I touched all the buttons and fonts and headers, sometimes just a couple elements. Smallmarine2 only touches the tabs and the link color, whereas simplexbubble was designed with the goal of a lot of chrome.

Simplexmild is my prime candidate to usurp the default theme. The theme isn’t so much of a re-design as it is a re-alignment. The top tabs are still there, but adding padding and a subtle gradient softens the look. Bottom tabs are replaced by the bottom border a la Hicks. Typography was also given some attention, swapping out Verdana for Helvetica.

Personally, the theme I like the best is the wilsonorange. Still searching for that ultimate minimal theme, I came across Wilson Miner’s site, which he redesigned in October. His site served as an example of how to make something look simple and attractive. The theme is the most basic one I created – no rounded corners or drop shadows. And I kept that big block of orange at the top. For typography, Helvetica is at work, in its trendy tightly-kerned fashion.

The other themes attempt to divert from the original goal of creating a new default theme for the interface. Dropmag was created for dropshado.ws. Wp25 is a port of Jason Santa Maria’s Wordpress 2.5 interface. Smallmarine2 was designed for that corporate blue look. It’s all done with CSS, so everyone is encouraged to fix and tweak to their heart’s content to find their own ideal theme.

Further discussion

Unfortunately, the themes I developed are just CSS files and therefore, I wasn’t able to touch any of the mark up or content. Digging into CSS and HTML, it’s plain to see how piecemeal Textpattern is. Across the various modules within Txp (Write, Forms, Sections, Plugins), the visual consistency is lacking. For example, the Forms and Write modules use h3.plain tags. Some of sub-tabs under Admin use h1.

Part of me wants to see a serious overhaul—scrap everything and build it back up better. Of course, I realize that starting from a blank slate is unrealistic, especially for a platform that has such a large userbase (although there are projects do just that, see crockery and Xpattern ). Plus, the developers have to ensure a good measure of backwards compatibility for the plugins that make Textpattern so flexible.

In the two and half years I’ve been using Textpattern, the interface has undergone only minor tweaks and changes. Compare that with Wordpress, which has seen 2 major redesigns in the same span of time. Granted, these two platforms have a world of difference in between them. Wordpress has a development team, and was able to hire Happy Cog, the web design firm, to do the interface refresh. Textpattern relies on the contributions of its userbase, just a handful of enthusiastic volunteers spread across the world to make the changes to the product. With enough community support, redesigning Txp is certainly an attainable achievement.

I created these themes because I am excited about Textpattern, and I hope to share that excitement with others. As a tool, I love using it every day. it’s the principal device I use to communicate on the web. As a community, I love being a part of something bigger than just a couple CSS files.