When should design trump usability? Can a pretty site be a little less usable if it’s extra beautiful? Or is that always a no-no?

In traditional desktop applications, it’s a common rule of thumb to not hide functionality behind things such as right-click menus, but to expose them more generally through a top level menu or toolbar. Sometimes in web design, web sites themselves can have a learning curve. It may not be immediately apparent how a site works or what to click on. Its learnability may be a little lower in order to accommodate a slicker design. The web site simply becomes less intuitive. Hyperlinked images start looking like regular images and text hyperlinks start looking like regular text until the mouse rolls over it. That’s negative points in the world of user experience.

The actual level of usability needs to be considered too. Preferably your web site is not just usable, but competitively usable. Users should prefer to use your website rather than someone else’s. Since the iPhone has been out a while now, some people have come to realize that on-screen keyboards aren’t all they’re cracked up to be. Even though it is beautiful to behold…

you just can’t beat the tactile response of a hardware keyboard…

So when do you go with usability rather than a beautiful design? Or is beauty sometimes enough to compensate for a less than stellar user experience?

Do have you a blog? Do you like word clouds? Do you wear shirts? Well then do I have a web site for you!

Just follow these three easy steps:

1) Go to SnapShirts.com, click "Custom" and enter your blog address:

2) Generate your word cloud:

3) Order your shirt:

It’s just that easy!

So what’s got two thumbs and loves his blog word cloud T-shirt?

On one side we have Subversion and on the other we have Live Mesh. With the former we have a solid, proven, and somewhat aging version control system. With the latter, we have Microsoft’s brand new (but actually not) Internet-friendly synchronization masterpiece.

With Subversion, you can easily commit changes, view different versions, and generally maintain your source code. Several different clients can all get updates from and commit changes back to the server in the typical client server model:

With Mesh, multiple computers (including an optional virtual desktop call "Live Desktop") are automatically kept in sync. Any number of clients can be added to the user’s Mesh network:

This is great and all, but each technology by itself is limiting. With vanilla Subversion, a user can work on a set of files at each client, but if he wants to continue working elsewhere on the changes that he was previously working on at his desktop, he simply can’t. With pure Mesh, a folder can be synchronized between multiple computers so that sets of working files are always and immediately available. However, in this case there’s no versioning. There’s no source control. The current version is the only version. So how could these two technologies be mashed up? There’s a couple potential ways…

The Gateway Method

Each Subversion client is an entry into the user’s Mesh network. The dual purpose machine acts a gateway between the two logical networks:

The gateway would sync the source from Subversion and that source would be synchronized across all Mesh nodes. The working set would always be available. So everyone’s happy, right? Well, not quite. The only way to commit the working files back into Subversion is through the gateway, since it’s the one computer that is both a Subversion client and a Mesh node. The other Mesh nodes have no direct access to Subversion other than through the gateway. This also means that the downloading of any other files the user might need could only be done on the gateway as well. Doesn’t sound like we got it yet.

The Full Synchronization Method

The other way is to force each and every Subversion client to be a Mesh node:

In this manner, the working set of files would always be available and the user can commit from whichever computer he’s on. An update in Subversion to grab the latest source would then be replicated across all Mesh nodes. Everyone’s happy now, right?

For starters, you have a chicken and egg problem here. If you set up Live Mesh synchronization first, then Mesh will download the files into the synchronized folder. But then when you set up the Subversion client, the first update will fail because the files and folders already exist. You can’t just delete the files, because Mesh will automatically delete them throughout your Mesh network. Not good. However, this is easily fixable by just signing out of Mesh temporarily, updating Subversion, and then signing back in to Mesh.

Making any changes on any of your Mesh computers will automatically be synched to the other computers. This makes updating Subversion obsolete. The updating is constant and automatic. You still have to (or at least you still should) check in your changes so that subversion can version the files correctly and so that others can see your check-ins, but if your source code repository only has a single user (you), you really aren’t forced to commit your changes.

And all this would be true in a perfect world where software works correctly and bug free all the time. Unfortunately, we don’t live in that world. After performing the Mesh and Subversion client installs on two computers, Mesh seems to be an in infinite loop. Mesh is continuously deleting and resynchronizing the files I deleted while offline from Mesh so that I could synchronized them through Subversion.

Switching to "work offline" didn’t stop the loop. The only way I could terminate it was to delete the problem files one by one… all of them. The unresolved conflict loop then stopped, however my files were no more. What to do now? How about updating via subversion a second time? Unfortunately, that leaves us with the same unresolved conflicts loop.

While this all seems like it should work perfectly well, it doesn’t. At the end of my testing, I have two computers using Live Mesh and working as Subversion clients. One of the computers is synchronized with my Live Mesh Desktop, but the other computer is actively  not synchronized. This seems to be a bug with Mesh since Mesh should synchronize all changes no matter how they’re made. Maybe this process would have worked with modified or rearranged steps. I don’t know.

So what have we learned here today? Well, the full synchronization method is too error prone and problematic. The gateway method would probably work fine for most people, although I proved that Mesh still has some synchronization bugs, so it may not be ready for prime time just yet. Either way, if you go about attempting to set this up, tread carefully, do your Subversion updates with care, and watch for Live Mesh synchronization issues. And don’t cry when your files mysteriously vanish. You’ve been warned…

Rendering a web page that does not have a custom style sheet written for it, will use the browser’s default style sheet to style the content. However, different web browsers have slightly different default style sheets. They may have different margins and paddings from one other, or different default colors, or may have additional or even fewer rules than each other. One way to avoid this potential train wreck is by using a CSS Reset. A CSS reset is basically a set of rules in your style sheet to get the rendering web browser to forgot all its defaults. In this way, different web browsers can all start from the same baseline when determining how to display content.

We seemingly want to use a CSS reset because we want our web page, web site, or web app to render pixel-perfect across all web browsers. If we look at Digg or Wikipedia in IE compared to Firefox or Safari or Opera, they don’t render completely the same. The fonts are slightly different. The font weight in some is bolder than in others. They’re all pretty close, but just a little different.

Should web pages look the same across all web browsers or is a little variation ok?

Personally, I’m torn on which side to take (since not everyone uses them). It appeals to me that with a CSS reset, you start from scratch. What you build up will look the same on all browser platforms. The problem is that they still won’t. A CSS reset isn’t actually a pure and complete reset of all style sheet rules. With a CSS reset, you don’t reset everything with the * selector, you just reset a subset of all selectors, because not all browsers will apply things like a margin of 0 and a padding of 0 to all elements in a consistent way. So what you end up with is a lot of different renderings that all look a lot closer than if no reset was performed, but still not pixel perfection. So is it ok that CSS resets don’t completely reset everything? Is this a case where it’s all or nothing?

Not having a complete CSS reset may not be all that bad though. When using CSS resets, you (theoretically) should have to fix less spacing and style issues throughout development. On the web project I’m on, we don’t use CSS resets. While it may not render exactly the same across all browsers, it’s still pretty darn close. However it does make me wonder that if we had used CSS resets, that would we have had to handle a lot fewer of the small problems on a case by case basis and would we have had a lot more of them taken care of from the start.

Getting back to the main point, doesn’t part of this sound like the age old Java/JRE debate? You write code once and it runs on all platforms (that can run the JRE of course) and it looks the same on all platforms too. That’s great and all, but the thing is that no one likes Java. It may look exactly the same whether you’re on Windows, Linux or Mac OS X, but that’s not exactly a good thing. People want their apps to look native to the OS they’re on. I don’t want my app to look like an app that runs on a platform somewhere else. I’ve complained about that same problem with iTunes. With CSS resets, it’s not quite that bad since you’re mostly dealing with margins and paddings and smaller issues like that, but it strikes the same nerve.

But should all web pages look the same across all platforms?

The perfectionist in me says “yes”, but the realist in me says that it doesn’t matter. Applications don’t have to look the same in different operating systems, so why should web sites have to look the same in different browsers? Especially when different browser usage is largely (although not always) due to different operating system use. And on a similar note, applications in my opinion shouldn’t look the same on different operating systems. That’s a common downfall in application design: making your application look and feel and work the same in all operating systems due to company branding and application recognition. You should make your application look and feel and work how the users of that operating system think and how they are used to applications working. Making Mac users use Window-isms in an application running on Mac OS X is bad. Making Windows users use Linux-isms in an application running on Windows is bad. But that in itself is probably a discussion for another day…

Maybe the answer to all of this lies in some immortal lyrics from the 80’s:

Now, the world don’t move to the beat of just one drum,
What might be right for you, may not be right for some.

How many browsers do you test with? I’ve got five… and all on the same computer at the same time. Of course, we have Firefox, Opera, and Safari. Those are usually the easy ones to get right. But wait there’s two more.

You can install the beta of IE8 right now, but doing that takes IE7 off your system, right? Not unless you have IE Tab installed. IE Tab is a Firefox add-on that loads the IE ActiveX control inside of a Firefox tab. But not from IE8 that you just installed, it loads the IE7 control. Sure you can emulate IE7 inside of IE8, but you need to restart the browser to enable and disable emulation. With the IE Tab trick, you can develop web apps and have all five browsers up at the same time.

Of course, I’m not saying that you shouldn’t test on the same browsers in other platforms. This is just a great place to start.

Have you heard about Digsby? I was turned onto this by Scott Bauer and am a daily user of it now. Digsby is basically an email and social network aggregator:

It periodically checks your accounts for new messages, so that you don’t have to have all your different email accounts open (especially if you have more than one account at the same provider like Gmail which means you can’t have multiple tabs open and be logged into each account at the same time… but I digress). Via a flyout menu, you can quickly see an overview of all your unread messages and open, reply, or delete them right there. But that’s not the most intriguing aspect of Digsby. Where I see the most promise is the chat feature. You can put a widget on your blog which people that visit your site can interact with:

It tells the user if I’m online and if so allows them to start typing away. I’ll get a popup IM window via the Digsby client on my desktop and the chat has commenced. Google has a similar feature with their Google Talk embedded widget, but it’s much clunkier. Here’s Aaron Lerch’s impromptu description of it:

I got an IM via google talk with a big-@$$ web link, which I click and it takes me to a page that has a "launch talk" button, which pops a window that is the web version of google talk and includes a "Guest chat" tab.

Yeah… Thanks, but no thanks. I’ll stick with Digsby. Also, if you were paying attention you would have seen the "Digsby Widget 5/7" in the first screenshot. That tells me how many people are currently on my blog and whether they’re active or not. Sure, you can see that sorta stuff with Google Analytics or Feedburner:

However, unlike Google and Feedburner Digsby’s stats are in real time. Those are people that are on my site at this very second. I can even initiate the chat with them if I wanted to. Pretty sweet. Sure, that may not scale well in the future, but I’m a long ways from that being a problem…

Digsby is pretty full featured and supports Gmail, Yahoo, Hotmail, AOL, IMAP, POP, Facebook, MySpace, and Twitter… although for Twitter you’re really better off with Bitter

So if you break out of your feed reader and ever visit my blog, give the widget a try. I’m a nice guy. We can chat. Here I’ll give you a topic. Duran Duran is neither a Duran nor a Duran. Discuss…

I attended the Microsoft DevCares event here in Indianapolis a few weeks ago. It might not be on par with MIX, but whatcha gonna do? Anyway, the event was broken up into two sessions: security and Office.

In the security portion of the event, we looked at some common web exploits, how they work and how to fix them in your code. We went over cross-site scripting, cross-site request forgeries, SQL injection, insecure direct object references, information leakage and improper error handling, and broken authentication and session management. The presenter demo’d each one with a fictitious product website and some exploit code. It was pretty interesting although I had seen most of the demos already when I attended the previous month’s MSDN event on IIS7 and ASP.NET 2.0 application services.

We then broke in the Office integration session. Mostly talk around VSTO, WWF, Ribbon development and ClickOnce deployment. Not too bad, but not my cup of tea.

Anyway, I couldn’t get the exploit code, but I have the PowerPoint slides for anyone that wants them:

• Securing Web Applications
• Security Best Practices
• Visual Studio 2008 and Office Business Applications

I created a new blog last week. That brings my count up to… well, a lot now. Anyway, the target audience is middle school to high school kids. (Don’t get any strange ideas here, this is for the youth group at my church, ok?) Anyway, so this is for teenagers which basically means it’s for people that have grown up never not knowing what a computer or the Internet was. So I put a post up on the blog which gave them links if they needed help with this or that and then at the end of it I put my email address up there for them as a last resort. At first I thought this was a pretty simple case of using a “mailto:” link in order to create an email when the user clicked on the link. But after a little thought, I quickly started questioning my decision.

If you have an email application installed on your computer, then mailto works perfectly well: it pops up a new mail with the “To:” field prepopulated, so that the user is all set to type in their life story and click “Send”. However, I don’t think that’s the common case anymore (and especially not for my user base).

Last year, I bought a couple copies of Office for the home computers. I got the version of Office that has Outlook just so I could have all the cool functionality that Outlook has nowadays. The only problem is I never use it. I always use the webmail interface provided by Yahoo and Gmail. What’s sad is that I actually love Outlook. All the nice folder capabilities, calendar views, task functionality… it’s just a great app. But I want the same experience on all computers I use. I don’t want my read email downloaded and available only on one of the three computers I use everyday. With POP email you definitely have that problem. With IMAP it’s a little better, but you can still have issues of folders created on the desktop not being available in the webmail and so on. I don’t want to be tied to always going to one computer to manage my email, so I just stopped using it.

I decided to strictly use webmail to manage my personal email and am pretty sure that that’s becoming the norm.

So what does that mean for good ol’ mailto? Well, there won’t be an application defined to handle “mailto”, so when the user clicks on a mailto link nothing happens… and that’s never good.

There are programs that will fix this for some webmail apps. For instance, G-Mailto and GMail Notifier make mailto work for GMail, but of course these are just one off fixes that you would have to find and install for your particular webmail on every computer that you use to check your email.

But either way, mailto doesn’t automatically work for webmail users. Worse yet, the user may right click on the link and select “Copy Shortcut” in IE or “Copy Link Location” in Firefox and paste that into their webmail app. That will include the “mailto:” part of it… and that won’t work either:

is from Yahoo and this one is from GMail:

And of course you have to be careful when putting email addresses in plain text on a website. You can obfuscate it using “[at]” instead the “@” sign, but that’s pretty low tech and bots probably check for that now anyway. Better yet you can encode it, so it won’t look right until it’s actually rendered, but that’s a little beside the point here….

So what’s the better of the two methods? Provide a “mailto:” link to foster an aging paradigm or just make it simple text that the user has to cut and paste? Cater to the crowd with desktop email clients installed all the while making the experience for the majority of email users a little more error prone?

Sad as it sounds, it looks like plain ol’ text may win…

There’s a great new plug-in for Wordpress blogs called Socialize-Me. It looks at the HTTP referer field and if it’s a social networking site that you’ve configured the plugin to recognize, it shows a link to your profile to whoever is visiting your site. A pretty simple yet powerful concept. It lets you extend your social network from the site the network is on out in to your own blog. Sounds to me like a pretty nifty way grow your network.

Installation is as easy as any other WP plugin. You simply copy the folder into your plugins folder, activate the plugin on your Wordpress dashboard, then just tell it your usernames for each profile you have. The content it adds doesn’t take your theming into consideration:

but after a little javascript and CSS hacking you can make it match:

I have it set up for Digg, Flickr, Pownce, Facebook and a few others:

And considering I’m not in high school, that’s probably a few too many…

I don’t like buying music online. There. I’ve said it. I don’t know if that makes me an old fart or what. I just don’t like doing it. When you buy the CD, you are actually buying something concrete… something substantial. When you buy music online, you’re buying bits.

I think my biggest problem with buying online though is that you get the music files in only one format and in only one bit rate (which you typically can’t control) and slathered chalk full of DRM. If I buy tens or hundreds of albums on iTunes, I am thereby chained to using iTunes and iTunes forever else I’ll have to rebuy all that music again. And that’s assuming that iTunes and Apple will still be around 10, 20 or 50 years from now. Those facts almost make me consider renting music. You pay a relatively small fee and can download all the music you want. But then again, if you ever stop your subscription or want to transfer your music elsewhere, you’re SOL. You never really owned anything.

However, if I own the CD, I can always rip, rip and rerip the music into any format I want. MP3 is still the dominant format nowadays, but I may want all Ogg Vorbis in a few years. No problem. I have the CD, so I can rerip it. And not just that, but CDs are already a pre-existing backup to their digital counterparts. After you rip it, the CD sits on a shelf or in a case. If your iPod or Zen or NAS dies on you, you can always just pop the CD back in and rip the songs again.

All that being said, there is one online music service that I’ve tried and may continue to use. It addresses most of my problems and I don’t feel too dirty using it:

Amazon’s music downloading service is almost everything that I’ve wanted. Look at this from their help page:

Where possible, we encode our MP3 files using variable bit rates for maximum audio quality and smaller file sizes, aiming at an average of 256 kilobits per second (kbps).

DRM-free means that the MP3 files you purchase from Amazon.com do not contain any software that will restrict your use of the file.

The albums and songs you purchase from AmazonMP3 Music Downloads are free of Digital Rights Management software so that you have the flexibility to play them on any of your media players, PC or burn them to CD.

They have high bit rate files and no DRM. NO FREAKIN DRM! No matter where I put this, it will work. It’s up to me to keep my actions legal. And I’m not a 15 year old kid that is going to share all this stuff. I actually believe in buying music and supporting the artists. If I like the stuff that the artist puts out, I have no problem giving them money so that they can continue to produce more. If my collection consists of a hundred one hit wonders, maybe I need to reevaluate my musical tastes, but that’s another blog entry…

So let’s take a look at how all this works. Let’s say you want to buy an album from Amazon. You go to the album page on Amazon as normal. Look for the amazon mp3 panel in the lower right hand side and click it if it’s available. Not all albums are available, of course, but I’ve found most of the things I’ve looked for (and my tastes aren’t too terribly mainstream):

That will bring you to the album’s purchase page in the MP3 Downloads section of Amazon. From here, you can either buy your music song by song or just buy the whole album. And a lot of songs and albums are even cheaper than iTunes:

So after purchasing the music, you than need to download Amazon’s Downloader application if you haven’t already and then the .amz token file which tells the Downloader app what to do:

The Downloader then just goes on automatically downloading your files whether in the foreground or in the background:

And when it’s done, you’re politely informed of that too:

You can then spawn off your default music player to start listening to your new purchase or you can click on “Show Downloads” to open Explorer in the folder where all your purchases are. For me, that is C:\Users\mike\Music\Amazon MP3\. They are arranged by artist then album. Pretty typical stuff. There you have all your free and clear mp3’s to do with what you want. How beautiful…

The Amazon MP3 Downloader is a pretty bare bones app. It’s not this bloated thing sitting there in your system tray taking up CPU cycles. Consequently, it doesn’t save any state. After you close it or even if you buy and download additional songs, it will have totally forgotten everything you bought beforehand. You can only access them through the file system. But that isn’t a big deal. I don’t really like it when applications try to manage that stuff for you… like iTunes. Yes, it’s yet another thing I don’t like about iTunes.

Anyway, I’ve bought three albums in researching Amazon’s MP3 service and I think I like it. I’m still a little uncomfortable that I don’t have anything concrete to show now that ten more of my hard earned dollars are gone, but I guess I need to get my head out of 1995 and embrace this new age of digital music, social networking and cloud computing.