With our organizational switch over to Gmail 2.0, we have been working on practical, advocate-friendly solutions that work with the updated Gmail 2.0 interface. The initial solutions a few days ago had to do with using Better Gmail 2.0 to give our users mailto functionality that works with our Google Apps, plus nifty new file-type icons and other goodies that come with that add-on package. Done.

The second part of the plan is to exploit the power and flexibility of the Stylish Firefox extension to perform a few modest cosmetic tweaks, while also offering users some options about what appears and does not appear in the new Gmail interface.

Here are the targets of our coding madness today — all real-world examples as of this afternoon from my Google Apps Gmail account — displayed here and familiar to all who are familiar with the default Gmail 2.0 interface, from top to bottom: the two search buttons, one for your Gmail and the other for a general Google search; the Labels menu with its new “color-code/edit-label” boxes to the right of (and partially obscuring) each label; and the indispensible Inbox, illustrated below, with a default design that makes it touch harder than it needs to be to read the labels in the message row:

So you’re asking yourself, “Yeah, I love Gmail. But do I have to live with all this blah design and extraneous stuff I don’t really want?” No, my friend, you do not.

The solution for today’s tech challenge is the Stylish add-on for Firefox. The short version is that Stylish enables you to easily change how things look in your Firefox web browser by simply invoking a new set of CSS rules that control the “presentation” or visual design of what you see, including web applications like Gmail. And there are truckloads of Stylish code bits already available for Gmail 2.0.

But it is even better than just loading someone else’s Stylish code. What you can easily do is cherry-pick a design idea or two from any of the many code samples already available and build your own custom Stylish code set. With a nod to ideas and code lifted shamelessly from Gmail: Inbox with new style and GMail Cleaner, plus a few original ideas for changing the look of Gmail labels in the Inbox itself (to make them easier to scan and more readable) and removing the “color-code/edit-label boxes” (so that they no longer obscure the already-too-narrow Labels menu), here’s how I did my own personal, quite modest makeover of the Gmail interface:

• Install Stylish (OK, you already knew that.)
• In Firefox go to Tools > Add-ons > Stylish > Options. That opens the “Manage Styles” dialog. Click on Write.
• Give your style a memorable name by typing it into the “Description” field. (“I Love Webdogs 2.0″ has a nice ring to it, but it’s your call.)
• Cut-and-paste (or download) the code below, put it into the large edit field below the “Insert” button and then click “Save.”

/*
Stylish code based in part on code and ideas from
"Gmail: Inbox with new style"

http://userstyles.org/styles/678

and "GMail Cleaner"

http://userstyles.org/styles/4118

 */

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("mail.google.com")
{

/* remove web search button */
button[id="1fbh"] {display:none !important;}

/* create hover "row" effect for message lists */
table.N2mZ7b tr:hover,
table.tlc tr.rr:hover { background-color:#FFEB86 !important; }
table.N2mZ7b tr.rfza3e:hover,
table.tlc tr.ur:hover { background-color:#CDF39F !important; }

/* restyle how Labels display in message lists */
span.s75Nkf b { background-color:transparent !important; border-color:#C0C0C0 !important; }

/* remove "color-code/edit-label" boxes */
div.qn0D4e b b { display:none !important; }
td.BFvfre { display:none !important; }

}

What does this get you?

• You now have only one “Search Mail” button. The “Search Web” button is gone.
• When you hover your mouse over a message, the whole message row is now highlighted. Can you say, “Easier to scan and click”?
• The Label names still have a low-contrast appearance but the font and border style are easier to scan, plus the backgrounds of the labels are transparent. Can you say, “Easier to read”?
• The “color-code/edit-labels” boxes are gone, revealing more of the Labels menu. Can you say, “Well, OK, maybe I like that, maybe I don’t. I’ll get back to you.”

Don’t like something? Just remove or edit the offending CSS code. But you get the idea: Play with other folk’s Stylish code by installing any number of Gmail styles to get some useful ideas of what you like and then what you really want. Then cut-and-paste and recode and add code as suits you and create your own master Stylish code set.

To coin a phrase, “It’s all good.”

As a coda to last week’s post about turning on Gmail 2.0 for Google Apps, it is worth noting that doing so will effectively kill some Firefox add-ons that you may be accustomed to using to spiff up the appearance of your Gmail interface, including some commonly used Greasemonkey Gmail scripts and popular Userstyles.org Gmail scripts that rely on Stylish. You should update those, as needed.

For LSNC perhaps the biggest deal is having a solution for mailto links, so that the Gmail 2.0 “Compose Mail” page opens whenever the user clicks on a mailto link.

One of the easiest solutions to this dilemma is to have users install the Better Gmail 2.0 Firefox add-on.

To get the “Compose mailto Links in Gmail” feature to work with your Google Apps domain, click on the “Advanced” button in the Better Gmail 2.0 console and then simply add your domain. Problem solved. Well, for the most part. Once set, if the user has Firefox open and is already logged into Gmail, whenever the user clicks on a mailto link it will open to the Gmail Compose Mail page. If not logged into Gmail, clicking the link will trigger Gmail opening to its default Inbox page. Hey, but no harm, no foul.

With the Better Gmail 2.0 add-on you also get several other useful options, including a very helpful “Attachment Icons” display that substitutes file-type specific icons for the Gmail default paper clip icon. Useful stuff.

First annoyance:

As I recall it, the problem started with Firefox 2.0.0.3. If I didn’t already have Firefox open and clicked on a Windows shortcut to a web location, I would get an error message like this:

The odd thing is that, despite what the message says, if you wait a bit the page eventually loads into the browser. The Firefox folks are aware of the problem but haven’t yet fixed this particular bug. But there is a fix although it is a bit cumbersome: Windows error opening Internet shortcut or local HTML file. Per that article, there are a couple of ways to deal with the bug, but I took the path of least resistance and went directly into the registry settings and deleted the four “ddexec” registry keys referenced in the article. It works.

Second annoyance:

This problem is about getting a Firefox add-on (née extension) that works in Firefox 1.5.x but hasn’t been updated so it works in the current Firefox 2.x. Actually it is unfair to call this an “annoyance” since that implies this is Firefox’s fault. It is not. If an add-on doesn’t work, it is up to the developer of the extension to fix it, not Firefox. And in general most Firefox add-ons I use have been in quick order updated to work with the latest versions of Firefox, but occasionally some are not. What’s a wizened Webdog to do?

The answer is to install Nightly Tester Tools, an add-on that makes old version extensions functionally compatible with current versions of Firefox. Once you install Nightly Tester, you’ll see a new option at the bottom of the add-on dialog window:

Click on “Make all compatible” and then close/restart Firefox and most, if not all out-of-date add-ons should work just fine.

That said, one more thing: While the Nightly Tester add-on is active, it triggers a “build” number reference in the title bar of the Firefox browser, as illustrated here:

If that annoys you, just disable Nightly Tester and the build number disappears.

Here are a few additional Firefox/Greasemonkey/Gmail goodies we are currently promoting for use by LSNC advocates:

DragDropUpload – one of the limitations of the default Gmail setup is that you have to use the browse file dialog, one file at a time, to add multiple file attachments to your Gmail message. But the DragDropUpload extension eliminates all that inefficiency. Install it and you can just drag-n-drop all your files in one fell swoop on top of the “Attach a file” link and BAM! you are good to go! This is absolutely a must-have Firefox extension if you use Gmail.

Wouldn’t it be handy if you could “save” specific types of searches of your Gmail content? Turns out you can. Install Greasemonkey and then saunter over to the Gmail-Greasemonkey page at Google Code, where you’ll find several Gmail goodies including the Saved Searches script. Install it and your Gmail account will automatically save your Gmail searches for you. Comes with a couple of handy dandy “saved searches” already set up for you including “Attachments” and “Last Week.” Killer.

You would not be the first person to grumble, “Yeah, I love how Gmail works but, whew, is it ever butt ugly!” That’s being a bit harsh, I think, but if you are needin’ some serious Gmail beautification, there are plenty of options out there. For starters you could install the Stylish Firefox extension (think of it as a Greasemonkey alternative) and then go wallow in all the UserStyle.org Gmail extensions. Need to hide the ads in Gmail? Want a cooler look to your left-side navigation and list of labels? Think the Inbox is way overdo for a makeover? It’s all there for you. And if you’re motiviated, dig into the scripts for each of the individual extensions and tweak the CSS code to make the colors your own. Sweet.

There is a minor glitch in the California Attorney Search custom button for the Google Toolbar posted a few weeks back. The custom search button works just fine, thank you very much, but when the Google Toolbar search field is empty and you click on the custom button, it takes you to Webdogs 2.0, not the California Bar search page. Not good and not what was intended.

We’ve fixed it. For those of our California compadres who installed the button, to update it on your Google Toolbar select Options -> Buttons -> California Attorney Search, then Edit to open up the Button Details dialog box. Click the link “Update button to latest version from www.webdogs.org”, close your browser and then reopen it, and you’re good to go. Now, when you click on the icon on the Google Toolbar, regardless of whether the search field is empty or not, it will take you directly to the California Bar “Attorney Search” page. Better, no?

As posted earlier to a broader audience at the LSNC main website, the Webdogs have created a very simple custom button for the Google Toolbar so that you can use the search box in the toolbar to do a direct name search for California attorneys at the California State Bar site. For our readers in California (or anyone else who wants to try it), if you have a current version of the toolbar installed, just click on Add California Attorney Search Button, follow the prompts and there you have it. To try it out, do a search for “Tony Joe Whi …,” uh, “Anthony Gilbert White.” Folks in California will appreciate the utilitiy of this, since so many of us use the California State Bar site as an attorney “contacts” address book.

This was pretty easy to do by just following Google’s handy-dandy, step-by-step Guide to Making Custom Buttons for Google Toolbar 4. The guide refers to Internet Explorer, but it works with Firefox as well now that the latest version of the toolbar for Firefox supports custom buttons. The “hardest” thing involved is actually not hard at all, assuming you know how to create a custom icon image. The guide provides a link to a site where you can encode your custom icon into ASCII text using base64 encoding.

At the time the threshold problem was this: Assuming you have folks with something to say and something relevant to post about it, how do you make it really easy for the less tech savvy to add to your organization’s website?

Experience tells the Webdogs there is no easy answer to how to make things really easy for potential posters. Experience has also taught us that a user interface that seems slick and intuitive to the geek inclined, well, it just ain’t necessarily so to the typical LSNC staffer. And experience has further taught us that getting folks to be active contributors demands a system that minimizes the user-side barriers to writing and posting content. If there is a verity here, it is this: Every additional barrier, extra step or speed bump that precedes the user being able to do the task-at-hand, namely, composing and posting, then those obstacles inexorably discourage folks from doing just that.

LSNC has experimented with various web-based publishing platforms for three years now. The “light bulb” moment for LSNC occurred when Google bought out Blogger and stepped it up a touch by adding a Blogger button to the Google Toolbar, which offered a faltering idea about making it easier for multiple authors to contribute postings to the LSNC main page. At the time it seemed like a workable solution. We converted the LSNC home page to a custom Blogger template and recruited an editorial crew of several top advocates to share in the posting responsibilities. From that perspective, it all made sense. But Google’s implementation at that juncture of its newly slickified Blogger interface was very buggy and problematic, and the Webdogs found themselves dealing with frequent complaints from pretty much everyone they recruited as editors. It got pretty ugly. And over time we realized that, going forward, we would face significant limitations on what we could do using Blogger as a publishing platform at our domain. And we paid a price in lost good will with our editors.

So, we dropped Blogger and went whole hog for WordPress. Over time, we’ve deployed WordPress as the principal publishing tool for most substantive content areas at various LSNC web sites, including old stalwarts like its Cases and Regs summaries, and new content areas like The Race Equity Project, scheduled to debut this week.

But the challenge remains: How to make it as easy and practical as possible for contributors to compose and add content? With a fair amount of one-on-one’s to get folks comfortable with the nicely designed if fairly busy, not always intuitive WordPress Dashboard, we have succeeded in getting our long-time contributors accustomed to the quick login, composing and posting features in WordPress. That said, it seems fair to add that our WordPress users are reasonably comfortable with its interface, not because it is uniformly intuitive (which it is not), but because it is now familiar.

We are now taking a look at other options to make it (perhaps) easier or more practical for individual advocates to post items more directly than going through the WordPress Dashboard. Three options come to mind:

We were briefly—only briefly, mind you—impressed by the enhanced functionality in the truly wonderful Google Docs and Spreadsheets that enables you to create a document that you can publish from within Google Docs directly to WordPress or other blog publishing platforms. This involves configuring the “Publish > Blog Site Setting” within Google Docs to recognize either your hosted blog’s API or the URL to your blog’s call to the XML-RPC protocol (e.g., “http://www.yourdomain/wordpress/xmlrpc.php” for WordPress). It is a nice feature, and offers promise of better integration with other tools you can tap via your universal Google account. But it doesn’t integrate or support the “title” you would normally have for a WordPress post, and as good as it is the interface still needs work.

A second option we had fun playing with is the Performancing add-on for Firefox. This is pretty nice, actually, since the user can invoke the editor directly from within Firefox, compose and edit, and then post all in one swoop. And it supports “titles” and “categories.” Configuring this add-on is not particularly hard but it is noticeably less intuitive than Google Docs, especially if you need to manually configure the paths for making a “publishing” connection. For a manual configuration, if you don’t know to insert the path to your blog’s XML-RPC file, whew, you are soooooo screwed! But it offers great convenience because it is integrated into Firefox and can be invoked with one keystroke or click.

A third, and arguably the best option is Microsoft’s Live Writer Beta. Live Writer is a desktop application, so it’s use is limited to locations where the user has it installed. But it offers way more than any or all of the preceding options. Configuration is as it should be: To create a new “weblog” account all you need to do is enter the basic URL for your site (e.g., “http://www.webdogs.org/”), enter your blog login and password, and Live Writer just figures it out for you. How? Who cares. It just does. Once your publishing connection is set up, you can use Live Writer’s very familiar Word-style interface to compose, and you can do so in one of three different views: Normal (rich-text mode); Web Layout (rich-text mode displaying against a background that mimics your site’s design, illustrated below); and HTML Code (for the more geek inclined). Plus you can view a preview of your post in a display that mimics how it will appear at your site. Plus it smoothly supports both “titles” and “categories.” Plus it has a built-in spell checker. Plus … Plus … And more Plus. There’s a lot to like here.

Live Writer may not be everyone’s cup of tea, but for the Webdogs this may help ease the pain of bringing more contributors on board: Open Live Writer. Check. Compose using a pervasively familiar interface. Check. Click the publish button. Check. Now that is what we call making blog posting really easy.