Michael Richard Murphy

People who rely on their creative juices to make a living have always ‘collected’ inspirational items. Images, textures, toys, etc. get stored in the ‘bank’ for later use.

In the past I’ve made several unsuccessful attempts to keep track of website designs that I like. But simple bookmarking has never really worked for me. I rarely make the effort to go back and organize the bookmarks so I always end up with one giant list. Saving a URL doesn’t really take a ‘snapshot’ of the inspirational design, sites get redesigned, URLs change, etc. So my already unmanageable list can eventually be filled with designs different than those that originally inspired me or invalid URLs. There’s got to be a better way.

Matthew Smith, author of the recent Digital Web Magazine article about collecting for design was having similar problems with screen captures. So he approached a Cocoa-programming friend of his who came up with FlickScreen. FlickScreen allows for convenient uploading of screen captures directly to your Flickr account.

FlickScreen runs in your Apple menu bar. A dropdown allows you to choose between uploading a capture of your entire screen or just a specific portion of it. Users can easily enter titles, descriptions, and keywords for their captures and even put them in specific sets. It takes about 10 seconds to classify and upload a capture. All without leaving the page.

Well, here is the new “design”. I opted to go the theme route because I find I get bored with a design by the time I’ve got it all fleshed out for Word Press. Besides, like I said, I’ve been pretty busy with paying work lately.

Over the last few weeks I’ve upgraded Word Press to implement some security updates as well as take advantage of some widgets and plug-ins available for more recent versions. The Recent Reading and My Flickr sections of the footer are new to the site.

I’ve also updated the directory structure and moved some things around a little. It’s been tested locally but please let me know (in the comments here) if you click on something that doesn’t work as expected.

As I mentioned in my previous post, Coming…soon(?), this website also has a new home with Bluehost. They came highly recommended and they offer RoR hosting so hopefully you’ find some posts about Ruby here in the near future.

One of the difficulties of web development is that no O/S or browser renders designs in quite the same way. It’s time consuming (and sometimes impossible) to get your design looking just so for every possible combination. It’s also hardware and software intensive. Not everyone has access to PCs running Windows 98, XP, and/or 2000 plus Macs with OS 9 or OS X plus Linux or Unix machines, not to mention the plethora of browsers available on those platforms.

Drum roll please…until now. I stumbled across browsershots.org yesterday and it’s wonderful!

Enter the URL you want test in different platforms and browsers and browsershots.org uses distributed computing to snap screenshots in your choice of browser/platform. Those screenshots are then uploaded for your viewing pleasure. Problem solved.

I’m pretty excited that this week I added some pretty cool drag and drop functionality to an application I’ve been working on. I talked about Yahoo!’s UI library here a while ago and finally put it to use.

I’ve been converting a PowerPoint presentation and exercises used by Human Resources to train new hires into a web application and drag and drop seemed like the perfect design for a term matching exercise.

The application isn’t available outside our corporate network but I hope (I use that term loosely given the frequency of my posts lately) to post some examples of what’s possible at some point.

I don’t want to downplay my Javascript skills but Yahoo! has made it pretty easy to implement these libraries. There’s a downloadable zip of dependent files for each library that developers link to in their applications. After that, the API provides you with the methods for adding whatever interaction you like. I was able to put together a passable application in an afternoon and now it just needs some polishing and finishing touches.

Check out Yahoo!’s UI Library and create!

The Student Loan Corporation is pretty good about employee appreciation. They put on about 6, very nice, internal events a year that differ in themes. There’s always a holiday party around Christmas time but throughout the rest of the year they mix it up with events like an Olympic-themed series of games, a Casino Night, Spring Break, etc. Pictures from these events get posted to the Internal Events page of the intranet. A screenshot of that page is below:

What you can’t tell from that picture is that most of the images are animated gifs. Between all the movement and the differing, non-matching, background colors, I go into convulsions everytime I see this page. When it was time this week to post the latest round of pictures, I couldn’t take it anymore. It was time to spruce things up a little so I took an hour or so to do some spring “cleaning”:

Now each event is linked to by a ‘polaroid snapshop’ of an icon representing it rather than a dancing turkey or swinging medal. I like its cleaner, more professional look. What do you think?

Just yesterday I made what I thought was a simple change to a layout. It had a horizontal navigation at the top (an floated list) and two floating content areas below it taking up approximately half the screen each.

For some reason, when I removed a menu item from the end of the navigation, all hell broke loose in Firefox. The left-hand float moved right and the right-hand float bumped down under it. Amazingly the design still rendered as desired in Internet Explorer so I didn’t put a whole lot of detective work into it. The site would only be accessibly on our corporate network where Firefox is almost a four letter word. But it did bother me that removing that one item (which should have no effect on the floats) broke everything so badly. Alas, I still had bigger fish to fry and other problems to focus on so that was going on the back burner.

It’s funny how solutions sometimes present themselves in unlikely places just when you need them. I had cut out reading my regular blogs some time ago to focus on other things but I had a few minutes so I decided to check some out. I’m glad I did since the latest post from Shaun Inman discusses the fragile nature of floats and his solution.

I think I may have found the solution I’m looking for. Check it out, it’s definitely worth a read.

While writing this recognition application for The Student Loan Corporation, overlapping roles has been a constant thorn in my side.

Application administrators and managers have access to certain functions, such as the ability to approve nominations of different levels, that general users do not.

Managers were relatively easy to handle. Creating an employee table that correlated managers and their direct reports allowed me to move nominations for specific employees to the appropriate manager’s queue.

Adminstrators are a whole different beast however. Not only do admins need to be able to function as normal users and administrators, they can also be people managers. As far as approvals were concerned, it was tricky (but doable) to figure out when a nomination needed to be approved by a specific employee acting as an administrator and when that specific employee needed to function as a people manager. Their role in these instances affected whether or not the nomination moved on and to where.

I solved this problem by creating different statuses to indicate where each nomination was in the approval process. Based on that information, I was able to determine where it should go next. That problem has been behind me for a little while now and it’s been smooth sailing until recently.

Roles are starting to get muddled again now that I’m working on the redemption portion of the application. The idea is that an employee’s accumulated recognition points can be redeemed for prizes. These prizes reside in an inventory maintained by the administrator.

This is where it gets slightly complicated. Because quite a few of the prizes are company branded and the program sponsor is Human Resources, these items are also used for other purposes such as charity give-aways or gifts for visiting executives. The admin now needs to be able to remove items from inventory from time to time for these purposes. Since the recognition program depends upon an accurate count of the items available for redemption, these withdrawals really need to take place through the system. The rub for me was how to determine when the administrator is removing these items as an adminstrator for the purposes just discussed and when they are legitimately redeeming credits accumulated as a normal user. In one instance, this action would mean reducing their accumulated credits for the redeemed prizes while in the other, it would not.

The idea that I’d need to figure this out eventually has been floating around in the back of my mind nagging me. I kept putting it off because I didn’t want to invest the brain power I thought would be necessary to figure it out. Little did I know how short an amount of time it would actually take.

SLC is rapidly outgrowing the available space in their current location so people are tight. I’ve had a tough time concentrating lately with anywhere from 6 to 8 people within three feet of me all having their own conversations and working. Maybe I just have superhuman hearing but there’s this constant chatter than once I pick up on, I can’t drown out, even with headphones.

Anyway, I’m getting down to the wire on this project and this functionality is one of the few remaining pieces so I decided it was time to just knock it out.

Yesterday at lunch I headed over to a trail nearby with the idea that I would get some fresh air (and quiet), focus exclusively on this problem, and come back to work with a solution. I’m proud to report that less than two minutes from the trailhead, I had everything worked out. About an hour after returning to work, the solution was implemented.

I guess the next time I’m strugging with something, instead of putting it off, I’ll just take a walk.

I’m pleased to announce that this year I’′ll be designing the shirt worn by the local Citigroup companies in the JP Morgan Chase Corporate Challenge. This includes local offices of The Student Loan Corporation, Citibank, and Solomon Smith Barney (my apologies if I forgot any group). Check back for an unveiling of the design after final approval by the powers that be.

I’ve heard that the beta of Internet Explorer 7 has finally been released, so now is the time for developers to step up testing of their work to make sure everything is copacetic.

The good news is that IE will now support transparent PNGs. The bad news (among other things) is that it now parses the comment filter /**/ that is commonly used to hide styles from its older siblings.

I’ve also heard that IE7 isn’t supporting the :after pseudo-element which developers commonly use to clear floats, although that didn’t immediately jump out at me on developer’s checklist provided by Microsoft. Take a look and see what you need to get your sites ready for IE7.

Ajax freaks working in the .Net environment should run right out and download Atlas, a new development framework from Microsoft. I said run.

Atlas integrates client-side script libraries with the server-based services of ASP.NET in order to create some really rich, interactive UIs. I watched a demo in which Microsoftie Scott Guthrie created a simple to-do list with tons of functionality in less than 20 minutes. The mini-application let users sort by task status, insert new tasks, and modify existing tasks all without page refreshes.

Scott also used some new, cool ASP.NET 2.0 methods that make handy things like pagination and alternating row colors super easy. There’s also another new method that makes it easy to display update statuses. As interfaces use page refreshes less and less to fetch data, letting the user know what’s going on becomes more important. Scott demonstrated this new method makes that as simple as drag and drop from the tool palette. Cool.

Note: This is a rough, rough draft written over two or three days at well past midnight. The topic is something that comes up quite a bit and that I have a lot to say about. This is an explosion of some of those things. It’s somewhat (dis)organized in some places. In the interest of time (and mostly so I can move on to something else), I’m publishing this as is. There are some gems in here if you have the time. If not, the takeaway is right in the title. You don’t need to read any further than that. On with the show…

This is something I’ve talked about in the past, both here and in person to clients. It was a topic in Sitepoint’s March Newsletter and the basis for some recent converstions I’ve had as well.

Content is king!

I think for people with little knowledge of the Internet outside of recreational use, comprehension of this concept comes in stages or unfortunately, not at all.

1. Let’s assume you have a business. I don’t care if you work for yourself selling homemade pot holders or if you’re the CEO of a 500 employee manufacturing company. At some point somebody has probably told you that you need a web site and that this web site would answer all your (business-related) prayers. At this stage, that’s not only believable but you can’t wait to get that site online and watch the $$$ come rolling in.
2. The site is online, you put your feet up on your desk, and…nothing happens. The big letdown. No bags, piles, or stacks of money. You think you know firsthand why the tech bubble burst and the e-Toys stock you bought to send Johnny to college now won’t even pay for a week of his day care. I digress.
3. Your web site really let you down. But you have money and time invested in it so you’re not entirely ready to give up. Good news! You get an email one day claiming to be able to get you umpteen-million visitors. XYZ Company will get you registered on a million search engines, they’ll get you setup with a pay-per-click campaign, and they have tons of SEO tricks that will land you the #1 spot on Google. Cool. You’re on cloud 9 again.
4. You’re paying hundreds a month in pay-per-click and ongoing SEO fees but you’re not getting any more orders or phone calls or walk-ins or whatever you’d like your site to accomplish for you. ‘The web is just hype’, you think.

I think this is an all too common scenario. It’s not necessarily that the web developer or SEO company is no good. It’s just that they didn’t take the time to truly understand what the goal was and what is required to meet it. There’s the old saying, ‘when all you have is a hammer, everything looks like a nail’. Some developers just develop.

Simply having a web site is a good start but not necessarily enough. If I never put any work into this site and had only one page, it would contain information about my background, skills, experience, and a way to contact me. That little bit of information would work for me 24 hours a day, 7 days a week. It would be like giving everyone I see my business card, only it contains way more (useful) information.

That’s the minimum it accomplishes. I don’t do pay-per-click or search engine optimization. I’m not interested in it. Honestly, I don’t really believe in it. Please don’t misunderstand me. I believe that paying the highest amount for specific search terms will get a site listed the highest for that those search terms. I also believe that optimizing your web site for a specific search term will get you listed higher for that search term. What I don’t believe in is the benefit of it.

Ok, I should probably clarify that. If you’re not explicitly selling something, I don’t believe that pay-per-click is beneficial. ‘Everybody is selling something’, you say. You’re right, this site pitchs me. I said explicitly, meaning, you’re selling…a widget for $25. If you’re a straight up e-commerce company competing with other companies that have the same service/product/etc. and the only difference is who gets to the consumer first, then have at it. Pay-per-click is your best friend. Buy your way to the top, it’s worth it.

If you’re doing anything else (which encompasses a lot), then I just don’t think it’s a productive use of time or money. Let’s use a familiar example: this site. I can pay hundreds (or more) dollars each month to get this site to the top of Google for web design. If you click through and are greeted by a message that says something like, “This site best viewed with Internet Explorer 4”, or terrible MIDI music, or references to clearly outdated technologies, it’s not going to inspire a lot of confidence and it won’t be long before you’re back at Google resuming your search and my hard-earned money is wasted.

My point is that high rankings don’t mean anything if your site doesn’t appeal to your target market and satiate some desire of theirs. Whether it is to purchase something or obtain some piece of information or whatever. When I search for something on Google and I click through on a result, I give that site an assessment in about 15 seconds. If it’s not readily apparent that it will meet my needs, I hit the back button.

I prefer organic results. That means that my site appears naturally for the search terms that it most closely relates to. In my mind this kills two birds with one stone.

1. I don’t pay for listings but my site still appears. Albeit for fewer, more specific search terms but it’s more relevant to the user. This should make that person happy. Making the user happy is very important.
2. I’ve taken the time to provide quality information so my site because useful. A utility. A tool. People come back, instead of this being a hiccup in their search for what they really want.

You can use pay-per-click campaigns and search engine optimization tricks (both legit and illegit) to get traffic to your site and/or make it more appealing to search engines but ultimately, search engines don’t buy your product or service or visit your office or any of those things. So why would you design specifically for them? That’s like manufacturing a product for one audience but marketing to another.

There is not substitute for useful, relevant, current content. Just in case you didn’t get that. There is no substitute for useful, relevant, current content.

Although it’s been put on the back burner many times over the last few months years, I’ve committed myself to learning .Net. After talking with quite a few people, I decided that C# would be my best bet.

So I bought myself a book and compiled a list of online resources. The next step would be the IDE. Visual Studio is anywhere between $500 and $2500 depending on the version. Ouch.

I don’t remember how but luckily I stumbled upon the Express area of Microsoft’s web site. As the name suggests, they offer Express (read free) versions of quite a few of Microsoft’s development products such as Visual Studio and SQL Server to name a few. While I’m not sure about SQL Server, the drawback of Visual Studio Express is that only one programming language is supported per version. I’m sure it’s short on other features as well but that seems to be the main difference. There isn’t anything preventing someone from downloading an Express edition for each of the programming languages they develop in but I imagine they’d quickly tire of switching back and forth and pony up for the commercial version which supports all of them under one IDE.

An added bonus (in addition to the free part) is that registering the product grants the developer access to another area of Microsoft’s site where you can download two dozen or so free icons from IconBuffet, about 250 royalty-free images from Corbis, and development related ebooks. Not a bad deal.

I imagine that as I get more into developing in C#, I’ll spend the big bucks for the commercial product. Until then, I intend to post here about my development progress and what I think about Visual C# Express.

I was originally going to tell you how this book I’ve been reading, Ajax in Action by Dave Crane and Eric Pascarello with Darren James, has made me a Javascript phenom and how I’m putting together amazingly interactive interfaces using Ajax.

Instead, I’ll just tell you how Yahoo!’s Developer Network has pre-built interfaces and design patterns. All open source under BSD license. Want to implement drag n’ drop functionality? How about breadcrumbs or pagination? Auto-complete? Look no further, it’s all there. Quite a few of these have sparked my interest and will no doubt save time on future projects.

I’ll probably still finish the book however.

A while ago I read an article in Wired about a traffic engineer who removed all the traffic signs from a village in Holland. No street signs, no lane markers, no crosswalks, not even markers to indicate where the road stops and sidewalks begin. What residents found is that it reduced accidents because without any explicit direction, people were more focused on the task at hand, mainly driving. It interested me at the time but it also seemed pretty idealistic to trust people to pay attention. I filed this nugget away in my brain and promptly forgot about it until Jason Fried posted about it over at 37signals.com.

What does any of this have to do with web design? I think the point Jason made and I’d like to reiterate is that less is sometimes more. Have you heard about the million dollar homepage? It was thought up by an English lad as a way to pay for school. Basically he divided up his homepage into a million pixels and sells them to advertisers for a $1. While it’s got him rolling in cash, looking at it is enough to trigger a seizure. It’s a great gimmick for sure but there’s way too much going on.

Users can get overwhelmed by information so before you put pad to pen, think about the purpose of your design. What do you want from the user? Look at Blogger’s home page. I think they’ve narrowed it down to two main reasons why someone would visit their site: 1. An existing user wants to use their account. Good, the login area is featured prominently at the top of the page. 2. A potential new user wants information and/or to sign up. Again, the necessary information is displayed right smack in the middle of the page. That’s pretty much it. Simple and elegant. Even the dimmest bulb could figure out how to login or where to click to create a blog.

Cameron Moll had a great article on breaking a design down to only the necessary elements. Unfortunately, I couldn’t find it on his site when I went to write this but if you troll his archives you just might get lucky. Derek Powazek has also written a great piece at A List Apart about home page goals and how to design to meet them. The moral of the story is that complexity or features don’t necessarily make something better. There’s a reason KISS rocks.

Editor’s Note: You can also find this published on fad.tastic’s home page.

Just an FYI to interested parties. Joel Spolsky of Fog Creek Software is publishing a series of essays on design. He doesn’t mean design like deciding between two colors, we’re talking usability. I’ve always taken something away from his writings so be sure to check them out.

It’s been a little over a week since I posted last. As you can see, tonight I emplemented the ‘Rosie the Riveter’ Redesign. That’s part of the reason it’s taken me so long to write here, the other is that I’m also getting close to the implementation date of the recognition program at work that I talk about all the time lately.

Anyhow, just like with the last design, I tried to pick something that really stood out to me and for some reason, Rosie does that. In this case I kept it pretty simple and was able to use most of my existing work so it didn’t take too long to get put together. I find I get bored with the design of my site rather quickly so time allowing, stay tuned for something else. For now though, this has cured my jones.

It’s called The DHTML/JavaScript Calendar and it definitely is. I promised a few days ago that I would start to post links to scripts I’ve found online that were useful to me, so here goes.

The javascript calendar available from dynarch.com can easily be set up in about 5 minutes simply by copying a few scripts from their download to your web server and adding the appropriate links to them in your document’s head tag. It also comes with a half dozen “themes”, which consist of pre-made stylesheets that just need to be copied and linked to.

Once you’ve got the script and stylesheet links in place, Dynarch provides a demo page with all the different types of implementations possible. Find the one you like and copy and paste the source into your document. Further customization is possible with only intermediate knowledge of Javascript and HTML but it really is as simple as cut and paste.

See below for a sample implementation:

I’ve really been testing my usability knowledge with this recognition program I’m working on. In my old position, we had a core set of components or features for our sites that we didn’t really deviate from. Since they were already developed, the only questions was where on the page to put them.

Not so with this new application. While the recognition program itself has existed for a number of years, an application that brings it online and automates quite a few processes is new territory. We’ve had to put together new forms. Forms mean validation and usability issues.

I’ve been reaching into my bag of tricks for things I haven’t used in a quite a while and learning a bunch of new ones as well. I’ve also been writing Javascript like nobody’s business. I’ve found quite a few great scripts as well and when I can, I’ll give the authors credit and post links to them. In the meantime, here’s 10 Tips To A Better Form at ParticleTree.com. There’s some great advice and links to some very nice implementations of that advice. Enjoy.

On my To-Do list for 1^st quarter 2006:

• A redesign of www.letsgomurphys.com
• michaelrichardmurphy.com the domain that aliases to this will be spun off on its own

After the redesign and spin-off, this domain will still feature my writing (a skill which I’ll forever be working on) and information about me but it will probably be of a more personal nature. michaelrichardmurphy.com will focus more on my career, portfolio, and writing of a more professional nature.

I have something pretty cool in mind for the professional domain but it requires learning a new skill so be patient and stay tuned.

Check out Panic.com’s Goods to see a cool drag & drop shopping cart. Pick a t-shirt and a size and drag the image right into a big wide footer area that acts as the cart. Even better, once added, see the image there. As near as I can tell, it’s accomplished all through Javascript and CSS. Smooth.

I can’t remember where but I read recently that it you wanted to see cutting edge work and hot design, that one need look no further than Panic.com. After talking a look at their site, that certainly seems pretty accurate. I’m definitely impressed.