Skip to navigation [a]

February 18, 2005

Float Your Boat //

CSS can be a really great thing for web-based application design and development. At the same time it can very restrictive, mostly due to cross-browser compatibility and standards-compliance (or lack thereof). To this point, one of my big missions at Masterfile has been to help drive the site to be more standards-compliant, getting rid of some of the not-so-hot legacy front-end code and to slim down pages wherever possible.

Steps in that direction have been taken in the last few significant releases, but probably none more than the release which we just pushed out to the real world. This is not to say it’s perfect or that it’s 100% valid code, because it’s not — but it’s substantially closer than it ever was before.

Better page structures and the removal of nearly all table-based structure allowed us to do something we think is pretty cool, and something that until the week following us presenting it to the president, no one had yet seen on a stock photo site. I nearly fell out of my chair when I saw someone had actually beaten us to it! In the time since then it appears to have vanished off that particular site (which shall remain nameless).

Floating Thumbs — Oh My!

So… what feature is this you ask? It’s a little something we like to call “floating thumbs” or “floating boxes”.

Conceptually it’s simple, and probably very obvious: floated DIVs inside a container. Stretch the contained wider and the DIVs rearrange themselves accordingly. Shrink the container and the DIVs rearrange themselves to fit the narrower space. In an attempt to keep things sane and from falling apart wherever possible, the min-width CSS property was used to restrict the content from collapsing in upon itself, at least in supported 5th generation browsers such as Safari and Firefox.

Masterfile: Search Results Using Floating Thumbs
The all new Masterfile search results with floating thumbnail images

Watch a Floating Thumbs Demo Movie (Requires QuickTime)

The floating thumb technique works beautifully and consistently in officially supported browsers. During development and prototyping, the tricky part was making it work with a statically positioned sidebar that is locked to the right side of the window. I spent a few weeks prototyping this and ended up using some additional DIVs as containers to keep everything happy, but thankfully it degrades nicely and didn’t add significant weight or complexity to the code.

But why did we do this?

In visiting with clients and doing some site statistics analysis we discovered a large proportion of visitors were using large monitors with higher screen resolutions. Considering a large portion of the market Masterfile serves are creative-type people and organizations, this made perfect sense.

We looked at the UI and knew that we weren’t doing enough to help these people see as many images as possible on the screens due to the design being limited to a fixed-width column (due mostly to the previous table-based layouts). Moving towards a fluid, standards-based page layout let us offer users a better experience without needing to set preferences or without needing any complex interactions. Just resize the browser window. For users with 20-30 inch displays, the net effect of this is enormous.

Making it easy and painless was the key. Not forcing the user to have to change settings somewhere and then making it difficult to revert back if they don’t like it will aid in adoption of the feature. It’s something simple and we know users will appreciate it.

So say you…

i just recently implemented the same feature for almost exactly the same purpose (i didn’t realise it was so special).

i am building a new site for: http://www.documentography.com and as part of the admin site for this i have built a pop-up image selector (for linking images already in the database to articles). it has the same left floated li’s for the images.

i’d post a link, but a) its not yet online, and b) it’ll be behind security anyway.

:-\

Alex Kent Alex Kent February 19, 2005

It’s not really so much that’s it’s special — it’s just DIVs set to float — not exactly rocket science, but more the fact that it’s really not been done before on a big commercial site in the stock industry.

From a user’s perspective we think people are going to really dig it. The complicated part became that it wasn’t something that was beneficial for every page in the site — essentially just the ones related to the search engine or ones used to display large numbers of images.

It did allow us a good opportunity to update the site on a larger scale than has been done in quite some time and to give pages a bit of a sanity check due to being able to better validate the code.

Scott Boms Scott Boms February 19, 2005

When you get to the bottom you go back to the top of the slide… or check out our B-sides

It’s all interconnected …On A Long Piece Of String

Feeds //

Get social and don’t be a lurker

Elsewhere // Click to view

02