Archive for the ‘CSS’ category

UserFly Usability Checking via Screen Recording

March 9th, 2010

UserFlyI recently found UserFly.com, a service which will record videos of the visitors to your site, allowing you to play them back and watch where users go (and how they move their mouse around on the screen).

I was flabbergasted at how easy this was to use – I tried the free version and had recordings going in 2 minutes. It was that easy. It has to be seen to be believed.

As a techie, I’d tried to build something similar 4 years ago. Owing to my own limitations, as well as the much more fractured browser landscape 4 years ago, I never got this working to the level that I liked. Having attempted just a small portion of what userfly is doing, I can truly appreciate the engineering that went in to this service.

If you’re interested in testing it out, please follow my referral link (yes, it’s an affiliate link). They offer a free version to get going, and paid versions start at $25/month $10/month. The $50/month plan would be what I’d recommend if you have any ecommerce or security, as it will handle SSL pages. But the free or $25/month packages might be fine for basic sites.

CSS blues

November 25th, 2007

So I’m back to the CSS blues I encounter every time I try to follow the ‘web standards’ crowd. I’ve got a relatively straightforward problem which is solved with using tables to arrange images, but seems utterly broken trying to use tableless CSS. Perhaps someone here will set me straight.

I am displaying search results – thumbnail images and text. Putting each set of data in a div tag with a class that has a float:left in it allows me to just keep rendering the image/text combos, and the browser will wrap the data accordingly. Except that the float:left behaviour will float the data to the left not to the ‘beginning’ of where the first element started, but only as far left as it needs to to determine it’s ‘hit’ something. Hard to explain in English, but the screenshot below should give an idea. The two items on the bottom row should be flush left, but they’re not. The first result image has text which is a bit more than the rest on that row, so it ‘blocks’ the 7th result item from floating any further left.

  moc_screen1.png

Searching around for the answer has yielded nothing that matches my requirements:

1. I want to be able to change the size of the items and data being displayed without having to know in advance how many will fit on a row.

Well, that’s really about it. To be fair, even in a table situation, you have to know how many you’ll be displaying, then close and reopen a TR tag. Given the supposed ‘superior’ nature of CSS, I’d have figured this problem would have been solved. I can also issue a div with a clear:both style after every 6 results, but that’s a hack answer, in my view.

Any better solutions? Google images uses tables to show their results – that should send a message to all those “tableless design at all costs” nuts out there (message being “css still isn’t ready enough to bury tables yet”) but it won’t.