Dynamic sizing content in Keep cards

For our latest design of Kifi.com, we’ve moved to a graphical, content-centric view for keeps. Each keep appears as a card that contains the title, description, primary image, and metadata about the keep itself. We wanted to design an experience where the user could quickly digest the content of the keep, so wanted to optimize the card presentation as much as possible.

Occasionally, we have either no description or a very short one — but we do have a large image. For cases like this, we display the image full sized:

Other times, we have no good image, but do have a textual description. This time, the description is full sized:

For times when we have both a description and image, we wanted an experience that would balance the image and description as best as possible, to create a newspaper / magazine style layout. This gets a bit tricky: the description and image can be any* size (strictly speaking, descriptions are between 20 and ~500 words, and images are larger than 50×50).

Since clients may have different window sizes, we needed to dynamically size the images and text. There’s a few ways to approach this. Initially, I attempted to size the content to minimize the total height of the card. Unfortunately, this gave a large bias towards smaller images, and most of my keeps cards looked the same.

Here’s are a few layout options for the same keep:

We agreed that even though the third design minimized the keep height, the second design looked the best. Remember that this is completely dependent on: a) the keep card size (i.e., my window size), the description length, and the image size. A rough 50/50 split between text and image doesn’t always work. Consider these keeps:

The visually optimal sizes, based on manual experimentation, seemed to use smaller images for these specific keeps. In fact, the “optimal” sizing seemed to vary quite a bit — we liked a 50/50 split when possible, but often 60/40, 70/30, or 80/20 was better. And on edge cases, 90/10 was sometimes best.

We decided that what we most wanted was to minimize wasted white space between the bottom of the image and the text.

Unfortunately, this is difficult to calculate directly. We know the keep card width, the description string, and the image dimensions, but it’s not simple to calculate the delta between the image height and the rendered text height (wasted space) since we don’t know how the text will be drawn. Using character and word counts for an approximation yielded very inconsistent results.

By rendering a keep card off screen hidden from the user, we can directly measure these. We can avoid a full reflow by absolutely positioning the card, so just pay the cost of the browser rendering the card, and us measuring the delta. My initial approach was to set the image width, then binary search for the minimum delta: take two samples, determine the better delta, try again with a better image width guesses. Unfortunately, the delta doesn’t follow a smooth curve.

This shouldn’t be too surprising: words wrap, causing jumps in the delta. Thus, simply binary searching can’t be trusted to find the actual minimum. Furthermore, in other examples, there were two primary local minimum (two different image widths that yielded local minimums).

Instead of complicating the binary search, we simplified it: we’d take a sample every 40px, and choose the best. This most often yielded very close to the optimal image width, with far fewer samples.

We then sized the card accordingly, taking care to size the text height so that we don’t cut a line in two horizontally. This yielded quite nice results, and was fast enough. After playing with this with tens of keeps, we found several examples where the image size did not change the delta significantly: for a large range of image sizes, the delta was roughly the same. This would give slightly arbitrary minimums, so we added a scoring mechanism so we could give a bias for sizes that yielded roughly a 50/50 split.

We can also tweak the score for image sizes that are larger than their originals, since it looks bad:

This delta minimization + scoring mechanism gave us a very pleasant range of keep card variations, with some small images, some large, and several in between.

We wrote this post while working on Kifi — tools that help people outsmart information overload together. Learn more.

Originally published at eng.kifi.com on July 23, 2014.