This is roughly what happened after I tweeted my dissatisfaction with the new Cooper website.

Okay, fair enough, I’ll spend some time going over some of the issues I found.

First of all, I like the style of the site. It’s pretty, and while the images might be a bit much on some “pages”, in general it looks good.

Also, I love the detail with the sub-navigation state changing as I scroll down a “page”. It’s a great touch that keeps me updated with what I am currently looking at.

But let’s not get too enthusiastic…

“Pages”

In the above, I’ve put pages in quotation marks, as the Cooper site doesn’t really have pages per se. All the content is on the same page, and the navigation just takes you to different sections of the page.

This seems like a choice based entirely on style, perhaps in an effort to appear trendy or technically skilled, with no real benefit for the user. Unfortunately, most the issues I have with the site seem to stem from this stylistic choice.

The scrollbar is a lie

When navigating a page in a browser, word processor, or any other document based application, the scrollbars are great indicators of the amount/size of the content. Not so on cooper.com.

An obvious example is seen if you navigate to the Home section. The vertical scrollbar has a tiny handle in it, signaling that there are a lot of content on this page. However if you actually scroll down the “page” you find nothing but whitespace. The scrollbar basically lied to us.

Horizontal scrolling

This one is just baffling. Horizontal scrolling, really? There are certainly cases where it can be used for great effect, but generally speaking it’s a big usability no-no. At least, it used to be - have things changed since 2006?

The horizontal scrolling unfortunately makes it hard to scroll around each section using the 2-finger gesture of my Macbook Pros touchpad. Apparently I lack the motor skills needed to move my fingers up and down in a straight line, and I continually end up scrolling partially into the sections to the left and right of the one I want to look at.

Scrolling and the URL

Cooper has done really well making sure the URL changes as I use their navigation - even though I don’t actually change pages. This ensures my back button works and sections can be linked to, a common oversight of pages like this.

Unfortunately, the horizontal scrolling messes this up. Scrolling horizontally I can easily end up at a section that in no way resembles what I am actually looking at. I risk linking to or bookmarking the wrong section, causing myself or the recipients of my links headaches in the future.

Navigation changes on hover

I am not a fan of changing the navigation simply when hovering over an item. It’s too easy to accidentally switch to another sub-navigation element when trying to move the pointer over to the far items in the current one.

It would be much less frustrating if it required a click to change the sub-navigation.

Differently sized screens

Ah, screen sizes, a pet peeve of mine. The Cooper site seems optimized for a very small range of browser sizes.

Looking at the site with a 800 pixels wide browser yields suboptimal and even harder to use results, and using a very wide browser yields a confusing display where you can see parts of the (clipped) content to the left and right.

In a time where we have a multitude of different screen sizes, browsers and devices all accessing our websites and the ability to make our website designs adapt to the users device/browser, relying on the user to use a maximized browser on a 1024 pixels wide screen is, well, nuts.

Disclaimer, I don’t know the stats for cooper.com - it might be that all their users use 1024 pixels wide screens and maximize their browser, I don’t know. However, it does go against all the statistic I have seen (and measured).

Printing

I know, in a paperless society where we need to control our waste output and save our forests, surely noone would ever think about print a website. However, in the rare case whey they do, they are sure to get more than they bargained for on cooper.com.

As all content is crammed onto the same page, hitting the browsers print button yields a whopping 28 pages of unstyled content. I just wanted to print the list of your (impressive) work to show to my boss so I could persuade her to send me to one of your training seminars, and you give me this?! Okay, I don’t have a boss, but you get the point.

In page search

While Cooper has gone to great lengths ensuring search engines can crawl an alternate version of the site, in page search is harder to cater for.

Generally speaking, using the in page search in your browser gets you results from the page you’re currently looking at. It isn’t far fetched for a user to think the same applies at cooper.com, but since they basically only have one page, you search their entire site using the browsers in page search!

Add to that, that the browser doesn’t really know about the fake “pages” used on cooper.com it can’t reliably position the viewport in a way that’s particularly pretty or useful, making the whole search experience very confusing.

The vanilla site

It’s interesting to note, that Cooper has deemed it necessary to also create a “vanilla” version of the website and add a very prominent, always visible link to use to it should you be experiencing “technical difficulties”.

Ironically, the “vanilla” version solves most the above issues, even though I’d hardly categorize them as technical difficulties. It also looks just as stylish as the “Bells and whistles” version.

Why not just use the vanilla version as the actual and only site? Users would benefit and development/maintenance costs would be lowered. As it is now, users (and Cooper) are paying for “bells and whistles” with no obvious benefit.

Is that really worth it? Am I off my rocker? What do you think about cooper.com?

Why are you wasting time building something that all browsers already do?

All browsers come with a back button. All users know where it is and how to use it (at least partially). Why would I spend even a single minute adding complexity to my interface when the browser gives me the same functionality for free? So I ditched it.

Goes for print as well

But the back button isn’t the only button that’s often recreated. Another common culprit is the print button.

Now, in the case of printing, I might begrudgingly have to admit that in some cases it makes sense to create a specific printer-friendly view. If you are spreading your content over multiple pages¹ offering a print option that prints everything can be a good idea. Perhaps.

However, if all your print button does is invoke the browsers built-in print functionality, you’re wasting your time and needlessly increasing the complexity of your UI. Why?

1. If you are doing this to increase ad impressions, you suck.

When you receive an RFP, way too many choices have already been made. Most RFPs I have read tend to read like the customer telling the chef how to cook the food. That’s not how you get a great meal.

Great projects are built in cooperation between someone who knows how to detect and define their problems and someone who can come up with and craft great solutions to solve those problems.

In our specific case, the customer had already done internal stakeholder and user interviews, and from our one meeting with them, I am certain they already knew exactly how they wanted their site to look and feel and what features it should have.

Quite frankly, that means we entered the process too late. The opportunity to challenge concepts and ideas is long gone and the solution has already been worked out - if not on paper, the definitely in the minds of the client.

Not enough detail

Many RFPs also include an expectation that the resulting proposal contains a price. Usually a fixed price, but in some cases a price-range is considered acceptable. That’s fine, having some sense of the price of a project is obviously a fairly important part of making a decision between multiple vendors.

I don’t think, however, that I have ever seen an RFP that contained enough information for me to realistically estimate the cost of a project - or at least not very accurately. At the point of the development process where RFPs appear, there are bound to be a ton of questions and uncertain elements. Sure, you could add those extra details to the RFP, but that’s a terrible idea - they are already too detailed, remember?

As a respondent, your safe bet is to create an estimate with a huge price range due to the uncertainties and risks inherent in a RFP. That’s unfortunately going to increase the perceived project costs significantly.

Alternatively, you can start dissecting the RFP, questioning the so-called requirements and generally come off as critical, hard to work with, and non-accepting of the work your potential client has put into the RFP. Not exactly a positive way to start off a relationship.

RFPs could work

I guess RFPs can work in some cases. If you’re shopping for off-the-self solutions a RFP will likely work just fine as you’re basically comparing a list of “requirements” to the feature list of a product. When you’re shopping for commodities.

Design and development projects aren’t commodities however. There is always a lot of things you’ll learn, decisions that will be reverted, and ideas that will appear as part of the development process.

That is to be expected. Those are the things that make your product even better than what you intended. When you and your vendor adapt and improve as you learn more about the actual product you’re building.

Sending out a RFP is in direct opposition to that - why would you want that?

If you sense a slight geek/gamer direction in those, you would be correct.

There is always something that can be made easier to use, pages that can be made to load faster, new features that can be implemented, existing features that can be made more powerful, or landing pages that can be optimized.

Our films don’t get finished, they just get released

When you release a movie, that’s it, no more changes (unless you later release a Directors Cut or Special Edition or whatever that only a fraction of people will see). It must be hard for perfectionists like the Pixar crew to know that there are scenes being shown that could have improved.

In the software business - at least in the web software business - we don’t have that constraint. We can launch a product and continuously improve it after the fact. And we should.

As Paul Graham puts it:

If your first version is so impressive that trolls don’t make fun of it, you waited too long to launch

Feed the trolls; launch your product now. Make it real, then iterate the crap out of it based on feedback from actual users.

It answers an feature request I seem to get fairly often; “please make it possible to download an Excel file of data”. Traditionally I’ve relied on good ole CSV for that, but it’s a bit tricky to get just right with Excel. Besides, the customer explicitly said Excel file, so let’s give her that.

We’ll cheat and use a few gems to do the heavy lifting for us. Namely the to_xls gem that “transforms an Array into a excel file”. Internally it relies on the using the spreadsheet gem that handles the actual Excel file for us.

In your Gemfile:

gem 'to_xls'

The custom renderer

Add the following code to config/initializers/xls_responder.rb

Mime::Type.register "application/vnd.ms-excel", :xls ActionController::Renderers.add :xls do |object, options|
  self.send_data object.to_xls_data, :type => :xls
end

To be honest, I am not entirely sure where it’d make most sense to put this. Well, I do; in a gem of its own, but that’s a bit overkill for this article. An initializer will suffice for now.

In short, what that code does is

1. Tell Rails about the Excel mimetype
2. Create a Renderer that handles the :xls format by…
   1. … converting the object that we respond_with into xls_data
   2. … sending that data to the user agent using the :xls format

And that’s practically all we need.

Respond this!

In whatever controller you need to return an Excel document for (in this case, I’ve added it to users#index to allow me to get an Excel spreadsheet with all my users:

class UsersController < ApplicationController::Base
  respond_to :html, :xml, :json
  respond_to :xls, :only => :index
  def index
    respond_with(@users = User.all)
  end
end

Visiting /users.xls your browser should ask you to download a Excel file, which then can be doubleclicked and opens in Excel (I guess, I don’t actually have Excel. It opens just fine in NeoOffice and Numbers, though).

Customizing

This is obviously more a proof of concept than actually usable production code. In real life we’d probably want some way to customize the rendered document, what columns to include and how to format them and whatnot.

Perhaps there’s opportunity for an Excel-builder templating format here? PDI.

Update: Someone is watching - between me posting this and today (roughly 24 hours later) the domain name has been registered. Sleazy domain-shark register-bot or quick-fire entrepreneur? Your guess is as good as mine.

I was recently tasked with implementing a design using the Rockwell font. Rockwell is not a free font, and as far as I could tell, not licensed for embedding.

That left me with simply relying on users having the font installed, and only around 60% do. That meant I had to come up with some decent alternative fonts, preferably with a similar appearance and size.

What I would love for someone to build, is a site where I can look at the page for Rockwell and see a list of alternative fonts resembling it - preferably ordered by resemblance.

For extra credits a pre-made font-stack could be provided, ready for me to copy/paste into my CSS.

A powerful extra feature would be statistics of font usage, so I can see an estimate of how many people will see what font on my site.

Crowd-sourcing

Surely, building a library of all fonts, their alternatives and how much they look like each other is a huge task and I figure this could be crowd-sourced. Let the community suggest alternatives and vote on the already suggested alternatives. This definitely seems like something where a lot of people have ideas and knowledge they could share.

Monetization?

I tend to always fail at coming up with great ways to monetize services - outside of flat out having people pay to use them. I think a different model would be better for a site like this, as the usefulness of the service increase with the amount of users adding their knowledge.

Affiliate links to font sales is a fairly obvious choice. Ads is always an option, I guess, and the users of the site would be pretty well segmented.

Anyways, here’s hoping someone smarter than me can figure it out and make it work.

PS: For reference, here’s the font-stack I did end up using:

font-family: rockwell, 'rockwell std', Serifa, 'Serifa Std', Glypha, 'Glypha Std', Memphis, 'Memphis Std', 'Museo Slab', arial, sans-serif;

Should I start another personal project, learn a new technology, create a (well, another) small game, start working on a long overdue redesign of mentalized.net, build an iApp (what is the common denominator for iPod Touch, iPhone, and iPad apps?), write a blog post, something else?

And that list doesn’t even include the important stuff like relax in front of the X-Box, watch a movie, take a walk through the forest with the wife, play with the dog, or make my son laugh.

How does one stay focused in that environment?

Strategic focus is figuring out what to do in the long term. Where do you want to take your business the next year or more. This is where your vision for your company lives.

Arguably this is the most tricky part to get right. If you’re like me, you’re constantly thinking about your business, where to take it, and how to improve it. Naturally, this generates a ton of long term ideas - unfortunately constraints in time, money, and energy tends to mean you can only execute on a select few.

Unfortunately, I have no golden nuggets of wisdom here, and I would love to hear how you handle this.

One thing I do is to try to not get too excited about new ideas/projects. I quickly jot them down in my notebook to get them out of my head. This way, I don’t feel like I have lost the opportunity, which in return means I can easier let it go for and focus on what’s more important here and now.

Tactical focus

Tactical focus is what you do on a daily/weekly basis. What do you need to do today? In many cases this has already been decided for you by your strategic focus and your clients and their deadlines.

One of the things a good boss does for you is to provide you with the focus; make it clear to you what short term goal is most important right now. Luckily, a boss can be replaced with a piece of paper.

The printable CEO

I’ve been using David Seahs excellent Printable CEO to help me focus my daily schedule. The geek in me finds it liberating to assign point values to my tasks, and working my task list from the top down is a great productivity enabler.

It can be hard to figure out what’s more valuable; writing a blog post or replying to an email from a potential new customer. Luckily the choice have already been made as 2 points is far less than 10 points, so the email trumps.

At least that’s the theory.

It should come as no surprise to any entrepreneur that the real world rarely conforms to rigid rules like this, and in many cases you have to be a bit more loose in the order you complete your tasks. Human evaluation trumps machine ordering any day in this case.

It’s not just for internal tasks

Lately, I’ve extended a variant of the printable CEO concept to one of my customers as well. When we discuss new features I and create new user stories I ask them to assign a point value to the story, indicating how important this particular story is to their business goals.

So far it has been a great tool for focusing our development efforts - and it has been particularly good at weeding out “nice to have”-features that seemed important, but failed to stand up to closer scrutiny.

Now, if you’ll excuse me, I have to focus on something that’s worth 10 points, not just the measly 2 I get from writing this blog post.

Not surprisingly, most clients fall in that category.

Game consoles

Paul Stanton suggests using games consoles as an analogy for progressive enhancement and while I see the appeal of that analogy, it does have some huge flaws (like any good analogy), so I tend to go another route.

Instead, I’ve been toying with using TV as an analogy; If you watch a movie on a huge, wide screen, high definition, digital television hooked up to a state of the art sound system you’re getting a vastly better experience than watching the exact same movie on a small black and white TV without loud speakers. The content is the same, but the device used to consume it delivers the content differently.

It’s good enough

The benefit of this analogy, is that practically everyone has a TV and probably knows someone who has a vastly better or inferior TV. And the range of TV setups is pretty big (standard vs high definition, 720i vs 1080p, widescreen or not, HD recorders attached, 2D vs 3D, cable vs antenna) - I just outlined the extremes above.

It should also be obvious that the TVs are displaying the same content, they are just delivering it differently. Conversely the consumer can improve their experience by upgrading their TV setup. Coincidentally, over the last few years pretty much everyone (at least in Denmark and the US) has done just that as broadcasters have gone from analog to digital signals.

It’s perfect!

Like any good analogy this probably has a ton of huge flaws, if you really dig into it. Luckily most clients don’t want to dig into it, they just want to understand what the heck I am talking about.

Do you have any experiences explaining concepts like this to “normal” people?

#wrapper            {width:800px; margin:0 auto;}
#header             {height:100px; position:relative;}
#feature .post      {width:490px; float:left;}
#feature .link      {width:195px; display:inline; margin:0 10px 0 0; float:right;}
#footer             {clear:both; font-size:93%; float:none;}

This single line approach makes it easy to scan through a stylesheet and find the selector you want to modify. But that’s also about as far as the benefits go for this approach.

Finding a particular attribute in that list is hard, and it can get really hard to quickly grasp what a rule is doing. For example, this actual rule from substancelab.com is not all that easy scan, is it?

.more { color: #ffffff; background-color: #326880; display: block; font-weight: bold; padding: 5px 10px; text-align: center; text-decoration: none; color: #326880; text-shadow: #163440 1px 1px 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Makes refactoring harder

The order of attributes in a CSS rule matters. While jumbling them all together in one big pile does preserve the order, it also makes it harder to change the order. Instead of cutting an entire line and moving it up and down, you now need to slice out the bits from the middle of some long line, and try to find the proper position in that same, hard to scan line. Not optimal.

Messes up your source control

Source control management software is generally speaking line-based. If you change one little thing in a single line rule, for example the mistake in the .more rule above (you did see that, right?), the entire line will register as having been changed.

While not a big deal initially, it makes a huge difference when you want to merge changes with another branch or someone elses changes. Two individual lines that has been changed can easily be merged, while two changes to the same line will cause a conflict. Conflicts are bad, mmkay?

Who scans anyways?

Seriously, who scans through a CSS file anyways? Even when put into single lines, the stylesheet from bornibyen.dk contains 600+ lines - that’s too many to comfortably scan through.

And why would I scan through it when I can reliably jump to the rule I want using TextMates “Go to Symbol” - your editor does support something like that, right?

Why manually fold code?

Speaking of editor support, here’s how a multiline stylesheet looks in my editor:

.header .gradient {…
.header .branding {…
.header .branding .logo {…
.header .branding .logo .tagline {…

Absolutely perfectly scannable if that’s what I wanted to do. And if you want to edit one of the above a simple keypress unfolds the entire rule. It’s almost magic, and it plays nicely with your SCM, is easy to scan, the attributes are decipherable, and it’s easy to change.

For once, more is indeed better.