No Mod Required

I was looking at the CSS 2.1 Candidate Recommendation today and notices that there’s a New ‘display’ value- ‘inline-block’. That caught my eye as I’m long actually familiar with the inline-block display value. I’ve used it a couple of times for IE-specific browser hacks and I’ve always thought it would be cool if it were picked up by Firefox. Hopefully now that it’s made its way into a candidate recommendation and, presumably a real specification, they’ll add support and then I’ll be happy- in a really nerdy way.

Oh… you want to know why?

Basically inline-block does what it sounds like it does. It’s an inline element (it’s displayed within a containing block and flows in the same line) that behaves like a block (which in practical terms means it can have explicit height, width, padding and margins, etc.) The one place I would use it all the time is in the all-too common “logo inline in a corporate footer” situation. Here are a couple of examples of ones I’ve implemented recently, so you know of what I speak.

From MSLifeLines – Offering multiple sclerosis (MS) education & support:

From EForAllExpo.com:

As you can imagine they’re both implemented with an image and a link. In the case of the EForAll site, something like this:

An <a href="http://www.idgworldexpo.com/"><img src="/themes/idg_assets/images/idg_world_expo.gif" alt="IDG World Expo"></a> Event

With inline-block, I could instead do something like this and I would have a nice computer (or human with a screen reader) sentence instead of some text with an image rammed in the middle obscuring the actual meaning:

An <a href="http://www.idgworldexpo.com/" id="idg-link" >IDG World Expo</a> Event

Here’s the CSS:


#idg-link {
background:url(idg_world_expo.gif) no-repeat;
display:inline-block;
width:150px;
height:60px;
text-indent:-9999px;
}

It’s a very typical image replacement, but with inline-block you can have an image replaced anchor behave just like an image. That’s useful to me. I approve.

Here’s a sample. IE6/7, Safari 1.2+ and Opera 9.+ should see this work (with some variation in Opera.) Firefox? Not so much.

Instead, aim to make the first visit as good as it can be, so that there will actually be a second visit or page view.

I’ll explain why I’ve decided to write the above (a concept I try to live by) down- One common refrain of proponents of larger JavaScript libraries is that “once the library is in cache, it doesn’t matter how big the download is.” I have a problem with that on two levels:

1. Not everyone has cache turned on and many people who do have it turned on don’t let files fester in there forever, so there’s no guarantee the files you dump onto the user’s hard drive will actually be there the next time they visit. Yahoo published some numbers on this subject in January:

   “40-60% of Yahoo!’s users have an empty cache experience and ~20% of all page views are done with an empty cache.“

   To me that means relying on a user’s cache to solve the problems presented by a 200k JavaScript library or 500k worth of flash or whatever isn’t a proper solution.

2. Even ignoring the above, this premise assumes a second page view or (in the case of an Ajax application) a second visit. Jakob Nielsen likes to talk about how often people use the back button and whatever you might think of him in general, he’s right about that one. On the web, unless the initial experience is positive, there will never be a second page view or visit to take advantage of the potential cached files. To that end, adding on 150-250k worth of JavaScript on top of the rest of the page where 10-50k might do just as well (in the form of either custom code or lighter libraries) just seems like a bad idea to me. Speed matters, even in this broadband era. Especially since even now there are plenty of users on slow connections. I mean, I still get around 10% of my users visiting on dialup and not every DSL/wireless connection out there is a thing of beauty.

” I want to know if it’s possible to use my Treo 700p in England.

There’s a lot of information about this subject on your site, but it’s all defined in phone jargon, not based on the actual device I have. I know that you guys internally think about dual band and quad band and all that crap, but customers think about “my phone.” I want to know what MY PHONE can do without learning the specialized taxonomy of cell phones and my phone’s place in that taxonomy. You know what phone I have from my account, why can’t I get information on topics like this tailored to my phone?”

Seriously, I browsed their site for 20 minutes and I realized I need to instantly become a subject matter expert on cell phones before I could confidently understand whether or not my phone would work in England. There’s absolutely no information tailored to me or to my device and there’s no way to cross reference the information about bands and all that crap with the actual device I have. At the very minimum, I’d love to see something like this:

• Q: What City/Country Are You Traveling To
• Q: What device do you use?
• A: Your phone can/cannot be used in City/Country. You will be charged $x.xx per minute. Please call XXX-XXX-XXXX to start your plan

What I’d really like to see is a link from my account- “traveling internationally?” Which would lead me to the City/Country question and then right to the answer with a link to activate my plan. They have all the information about me from my account, I should be able to just enter my City/Country and go.

Companies often fall into the trap of organizing their websites with internal structure or labeling their websites with internal nomenclature. Companies spend a lot of time on internal hierarchies, vocabulary and organization and become so enamored/used to their own work that they assume that they can just continue to use that hierarchy on their web properties and their users will immediately see the perfection of their abstract model. In fact, internal language and organization, while possibly fine for internal consumption, are rife with specialized language, acronyms and structures that only make sense in the context of an organization. This has been long recognized as an issue. Jakob Nielsen neatly summed it up nearly ten ago (from Top Ten Mistakes of Web Management)

“Users should not have to care how your company is organized, so they should not be able to deduce your organizational structure from the structure of your website…

“The site structure should be determined by the tasks users want to perform on your site…”

Unfortunately, it still survives as an issue to this day and, as the following example shows, it can hit even one of the most prestigious organizations in the world (albeit in an interesting way.)

I was looking at some potential activities for this upcoming Saturday in Cambridge and surrounding areas, and, after checking out what was playing at The Brattle, I decided to check out what was playing at the Harvard Film Archive.

I typed in the logical URL - http://www.harvardfilmarchive.org/ and instead of being presented with the site, I was presented with this:

A surprising turn of events.

There are two issues here. One is the way in which Harvard handled the redirect and the other is that they made the change at all.

For starters, let’s look at the way it was handled. Offering up a Web 0.1 page like that telling users to “update their bookmarks” when there are myriad technical solutions available to make sure that their user’s bookmarks will always function no matter what server the document lives on is a poor showing for an organization the size of Harvard. Just funneling all traffic from the old .org to the index of the new .edu would take a lot of the onus off of the user and wouldn’t take more than a few minutes for any competent developer to set up. Instead of even that basic solution, Harvard presents a hacked together page with a delayed meta refresh redirect and a circa 1998 plea to “update your bookmarks”. That might fly for a Gecocities page, but for Harvard? It looks shoddy and will confuse any users unfortunate enough to stumble upon it.

Personally I would suggest going the extra step and setting up some 301 “moved permanently” redirects and mapping all of the old content to the new address. That way users following old bookmarks are never left out in the cold and the folks at the Harvard Film Archive never lose any of the benefit from anyone nice enough to link to their site.

That’s assuming they can afford to keep the old domain active. Hosting and domain registration for a single .org might break the bank over there.

Seriously, I do wonder if they’re going to retire the old domain. I can’t imagine why, but the above would at least make some sense in that context.

And then there’s the address itself. Obviously, someone at the Harvard College Library decided that it would be best if all web properties under the Library’s organizational banner lived under the hcl.harvard.edu subdomain. Even if one of the organizations had their own distinct personality. This was obviously some sort of internal turf war as no user outside of the Harvard ecosystem is well served by moving from something logical and mnemonic like harvardfilmarchive.org to the slightly inscrutable hcl.harvard.edu/hfa/ Seriously, the only reason to make that move is because it makes sense to a Harvard administrator. HFA users don’t care that it’s part of the Harvard College Library. They just don’t. And now, instead of a logical, grounding (in a “where am I?” sense) and easy to remember URL that reflects the exact purpose of the site, they have a typically confusing university style URL that reflects the internal (infernal?) department structure. It’s like listing films in the calendar by some internal catalog code- “Next Wednesday François Truffaut’s classic FR-220303 will be shown at 7:30!”

There’s also a marketing issue. Can you imagine trying to sell people on visiting hcl.harvard.edu/hfa/? Good luck with that. That looks like a strong password, not a URL.

Obviously none of this is catastrophic (neither was the bizarre menu behavior on the film series page,) but it can add up and it certainly made an interesting topic for me to chew on during the day, today.

(What a terribly “bloggy” thing to do. I’m down to do bloggy things from time to time, so there you have it.)

• People who think copying a design outright is cool. The Digg design category is full of Photoshop tutorials that fall into this category. They’re not as much about techniques as they are about recreating a specific look. I worked with someone once who literally told me to “look at Apple and Digg and see how they do it.” I took that to mean, do something like Apple or Digg. Not that that’s a lot of fun, but as it came out in the wasn’t what he meant. He literally meant “look at how they round the corners or do their gradients,etc.” and copy them exactly. That was one of those conversations that I just let die because following it through to its end would have been more trouble than it would have been worth. Needless to say I didn’t do the design stealing

  Not surprisingly he’s a big fan of those Photoshop tutorials. “Make a web2.0 badge?” Woopedeedoo!

  This same guy treated me like an intern, by the way. I have a web resume that trumps his five times over, and his idea of groundbreaking design was to copy fucking Apple, but I couldn’t be trusted to tie my own shoes. It was pretty funny.

• The idea that opening links in a new window “keeps people on your site.” I’ve heard this from clients for eight years now and it really shows no signs of slowing down. What’s interesting about it is that it’s invariably a request from less than web-savvy clients, so it’s not like they all studied up on best practices before building their site and just got bad info (possibly from the same source.) I guess it’s just “common sense.” Common sense is the devil.

  Interested in why this is a problem? Here’s a mighty fine article- Beware of Opening Links in a New Window

• Speaking of the Digg Design category… at one point it was really cool and filled with actual design articles. Nowadays it’s a lot of Photoshop tutorials, Flickr links and random noise (some of which is cool) with maybe one actual design article a day. I’m still subscribed, so it can’t be all that bad, but it just used to be a little more thought provoking.

  For an example of the sort of link I used to see more of, check out- 3 Reasons Why Snap Preview is Ruining Your Blog, and Hurting Your Readership. Perfect example of the sort of thing I want to see. A little bit of design, a little bit of usability and a code complaint that I can pat myself on the back about (the click capture issue he describes with the snap preview is something I solved* recently.)

• Perma-Beta. If there’s one thing about the whole web2.0 thing that bothers me (other than glassy buttons and reflected logos) it’s permanent beta. Just roll the dice and call it a release already.

• Places that live in the nasty tweener realm of understanding that IA and Usability are somehow important to successful design and development; but not understanding (a) what that really means and (b) that they’re professional disciplines that need to be handled by people with experience and expertise. Cases in point:

  • producers and sales people doing wireframes when there’s an IA on staff
  • acknowledging that “wireframes would be nice” before starting design on an interactive project but saying “we don’t have time” and then wasting time adjusting the work flow in fully rendered Photoshop comps

  The former is like handing off a Photoshop document to a Producer and saying “give me cut up graphics and compliant xHTML” and expecting it to turn out well and the latter is just ignorant of what “process” means.

• Could the Internet Explorer 7 adoption rate be any slower? I’m desperate to be rid of IE6 and I’m still only seeing 25-30% of IE users using IE7. At this rate I’ll be old and gray before I can put IE6 to bed.

I think that’ll do for tonight. I’ve typed enough.

*it’s actually a super hack, but it gets the job done. In my case at least, the problem is the div that contains the tool tip sits on top of the actual link text. Because of that there’s a shield of sorts between the mouse and the link text that prevents the user from normally interacting with the link. Here’s how I fixed it:

• I inserted an empty anchor tag into the tool tip
• I set its display to block
• I positioned it inside the tool tip where the link would be
• I gave it a decent height and width
• I then wrote the link’s href into that anchor tag to mimic the correct behavior.

But for me it certainly wasn’t. Useful wouldn’t be on the list of words I would use to describe my interface with U3 software.

To explain: I bought a Kingston 1GB USB Flash Memory stick to put on my key chain. It was mostly to move files (mp3s mostly, but other stuff as well) between my machine at home and my work machine. I went for the Kingston since it was at least $10 cheaper than the other ones at Circuit City.

What did I get for my $10 savings? A nice little drive and some “smart” software from a company called U3.

The drive I like. The software? Not so much.

This morning I popped it in, and instead of it simply being recognized as a USB Mass Storage Device (what I expected), I was greeted with it installing a phantom CD Drive (in addition to the USB drive letter- yes it took two separate drive letters), nestling itself into the systray and launching this annoying piece of software:

Considering my expectations (a no-hassle USB drive just like every other one I’ve ever used), running into all of that crap was the digital equivalent of getting shit on by a pigeon- an unexpected and unwanted annoyance. Apparently I’m not alone, considering all the griping people are doing about the U3 software on Amazon (<= just a random page about another USB device with this "enhancement" installed.)

Mine and other's reactions to this software and the way that it fundamentally alters the interface with a pretty common device illustrates how radically deviating from user expectations can cause strong negative reactions.

Luckily I was able to uninstall the software easy enough, but if I'd known what I was up against beforehand I would have saved myself the hassle and gone with a regular non-enhanced USB drive (even if it cost a buck or two more as I hate the idea of somehow supporting such crappy software.) Which is kind of the point of this post- when buying a flash memory stick, stay far, far away from U3 infected devices. Unless you're into that sort of thing (whatever that thing actually is- I never really figured out what it's purpose was.) In which case, fun it up!

(all apologies to, I believe, Bob Ryan, for stealing the title of this post)

The new A List Apart article, Switchy McLayout: An Adaptive Layout Technique, got me thinking about methods to serve content to mobile browsers. To play around with that in a real world environment (without having to wait around for a client to ask) I started to think seriously about how I want to handle serving content for mobile browsers here at Drunkenfist.com. The above article is nice in concept (especially since it works on the other end of the spectrum), but it doesn’t do anything to limit the overall file sizes (in fact I imagine it adds to the size of the style sheets) or how much/what type of content is sent to the browsers. What I really want is a low overhead scheme for serving proper mobile friendly pages.

After thinking about it for a little bit, what I’m thinking about is setting up a sub-domain (mobile.drunkenfist.com) overlaying the main drunkenfist.com content and then using the URL as a test in my template files for whether or not to serve up certain content (only serving a single mobile sheet, serving alternative ads, no footer, no images, etc.)

In addition to that, I would use JS on my regular pages to redirect to the sub-domain based on screen resolution- one of the things I hate about mobile browsing is when sites that have a mobile version don’t detect that I’m on a small screen and point me to it (I’m looking at you Yahoo.)

Thinking about it, I’m betting I could work something out in a day or two.

Of course there are a lot of variables involved here- finding the time to mess around with this being one and not breaking the regular version of my site being another…

…

Ajax Performance » Circumventing browser connection limits for fun and profit

I got this link from Ajaxian. It talks about using sub-domains to increase the number of practical connections available to a browser. Yet another thing I might mess around with here.

…

Here’s a “handsome” chart outlining the slow and steady weekly growth of IE7 here at Drunkenfist.com. It’s still slow as hell, but nearly 20% is a definite improvement.

Here are the actual numbers (Google docs is awesome)

…

Speaking of Iframes, I’m working on a project that uses a hidden iframe instead of the XMLHttp Request object to get data from the server and I discovered something absolutely bizarre about the way that IE calculates the DOM in a situation where there is raw XML held as the content of a hidden iframe. If there’s not a blank style sheet attached, IE rewrites the XML document as a series of DIVS and SPANS, completely obliterating the structure. Attach a dummy style sheet and everything is fine and dandy.

I made it work in FireFox and then switched over to smashing at it in IE. Nothing worked off the bat so I set about doing some discovery. Right off the bat I was getting results from getElementsByTagName that made no sense. I would do xmlObject.getElementsByTagName(”*”).length and get some totally off the wall result (50-something instead of the 10 or 12 I was expecting). That was driving me crazy since I could tell it was an object; I could tell it had structure (since it had tags to return); but I wasn’t seeing the structure I expected. When I viewed the DOM using the IE developer toolbar I saw this:

After googling around for a few minutes, I came across some mention of using a dummy style sheet to get this to work in IE. I tried it out and immediately the app started behaving the way I expected. I’m curious whether or not this issue is resolved in IE7 (I’ll find out soon enough as this app will have to work in Microsoft’s latest and greatest)

People ask, I deliver…

I was asked, in a comment, to elaborate on my throwaway line about the interface for LinkedIn being terrible. I started to reply in another comment, typed for a little bit and then realized I’d written a hundred or so words in about thirty seconds. I thought, “there’s a proper post in this somewhere” and then moved the whole circus up here. What follows are basically unfiltered thoughts about the interface based on my experience with it yesterday- trying to update my profile and trying to add one person as a connection.

As a note, this isn’t to be taken as a serious evaluation of the site. These are more off-the-cuff remarks based on one small personal interface with the application. They also, by their very nature, focus on the negative aspects of the user experience. A proper look at what they’re doing would also highlight more of the good things (such as they are.)

I also want to mention this- I’m sure that people who have used the system regularly are able to navigate it successfully. No need to point that out to me:) I’m an on-again, off-again eBay Power Seller, so I know about plenty about how repetition and familiarity can smooth out even the worst interface kinks.

That said, for me, not being able to benefit from years of learning and adapting to the system, the LinkedIn interface was both confusing and (as often follows “confusing”) frustrating. I had trouble orienting myself and oftentimes there seemed to be no direct way to take any of the actions I wanted to take- basic actions that I expected to be clearly defined right up front.

For instance, when I logged in and was taken to my home page, I had a hard time trying to find a button or area that would allow me to edit my profile. After scanning the area where I expected such functionality to be (I was looking for an “action” type control panel in the main content area) and failing to find anything to looked warm, I eventually found a tab across the top that lead me to “My Profile.” This, to me, seemed like awkward placement as the top tabs other than “Home”, felt like they should be about “everyone else” and not about “me.” Add to that the fact that the tab I was looking for is de-emphasised (set back and in a different color), and it’s no wonder I had a confusing time trying to find the right place to click.

Interestingly, returning this morning to look at the process once again in order to write this piece, I was surprised to see that there was, in fact, an “update your own profile” button centrally located on the page. I had just been unable to find it. I think this is because both the context and design of the “update your own profile” button are off. The way it’s placed makes it seem related to the profile updates of my contacts, which lead me to immediately discount it as something to do with my profile. The small- text/ gray- on- gray/ crowded- against- the- edge- of the- button visual design doesn’t help matters by failing to catch my eye in any meaningful way- I literally didn’t see it until my second pass.

Once I found the page where I was able to edit my profile, matters didn’t improve. When I landed on the profile page, I was greeted with no less than THREE separate buttons styles used to open up editing capabilities. Two of them are actually pretty clear, but the third is insidious and the pure fact that there are three separate “button” designs in one small area of the interface is an area of concern- Consistency is a positive thing.

Here’s a graphic with the three different styles:

And here are the styles in place on the page:

The first two are actually pretty straightforward, althouh I’d prefer a single consistent format in order to lessen the amount of processing needed to work through the site. The third one, the one I was looking for to complete my task is plainly awful.

• Since it doesn’t have an underline or any other styling beyond a dark blue color I had to guess that it’s a link
• When I did guess correctly, and interacted with it, there was no clear hint as to what the payoff for the click might be be. Instead, there’s an underline and an arrow pointing downward. I thought, “what does this mean? Download?” It actually means- go down to the bottom of the page where the editing capability is, but since I’d never been there before, I had no clue what it could possibly mean that would make sense to me in that context. So it was a leap of faith to click on it, hoping that it would take me where I needed to go.

I will say, once I made it past that point, the process smoothed out considerably. There’s a clearly labeled “Edit” button next to existing positions and the “Add Position” button is clear as a bell. Now if they could just make getting there a little more straightforward we’d be in business.

The second part of my task, adding another user as a connection, presented at least one major hiccup. While not necessarily an “interface” issue in a “design” sense (it being a business decision at its heart), it definitely makes for a lesser user experience, so it’s included here. Apparently, you cannot contact a user directly through the system without upgrading to a paid account. The lack of a “message user” function or the equivalent of a myspace “friend request” was initially quite confusing to me and definitely will temper my interest in using the system. I expected to be able to use the system, in a straightforward manner, to connect with people without necessarily remembering or knowing their current email address. When I’m current with contact information for people or when, like me, people have email addresses that are basically eternal it’s not really a problem (although I have obviously have less reason to actually use the system to contact or connect with those people). The problem comes when I’m slightly out of touch with a user and I don’t have current contact info- many people use work emails for this and trying to keep track of those in technology is a nightmare. In those cases I’m out of luck and can’t use the system for something I would find really useful- reconnecting with people I’ve worked with over the years. There’s already a queue of people I know who I haven’t connected with because of the way the system is set up.

And that’s that. two good hours and five billion words based off of maybe one thirty minute interaction with the system. I’m not sure what that means, but it was certainly an interesting exercise.

HFI updated my HFI-Certified Usability Analyst program listing within thirty minutes of me sending in a request. Not too shabby. Now I just need to add a little bio and I’ll be Mr. Cool.

Where Visual Design Meets Usability - An Interview with Luke Wroblewski, Part II

“It’s also very valuable to look at the visual design from the perspective of what is absolutely necessary to communicate. Do you really need a different background, font size, font color, and drop shadow to distinguish that content? Would just a background color suffice? A common tendency I see is over designing, such as employing too many different colors and too many different graphic elements, which ultimately result in visual noise or just design-for-design’s sake.”

That speaks to the core of the way I look at the web.

(yes, I’ll read the whole article eventually. I collect those and the HFI newsletters and read them in one big Usability blur)

(I’m slowly pulling in some old posts from my blog @ raizlabs.)