I'm working on a magazine-style website which has a fluid two-column box centered in the middle of the screen (think of this as the spread of a magazine). The left column contains an image and the right column contains text.

The image defines the height of the spread, and thereby the space the copy has, however the copy can be of variable length. This is what poses the problem.

The two ways I know of solving this are a vertical scrollbar in the right column, or pagination within the column.

I don't think either of these options is great. How else could I solve this problem?

Within the parameters you've set, the best option is to have a scrollbar, but as you say, it's not a good option. So it's time to break out of the box. Why this rigid two-column layout? Why would the picture determine the height? I think it's time to re-evaluate the design.
–
PeterMar 8 '13 at 8:43

@Peter it's an update of a legacy Flash app (you know the ones where you can flip through PDFs) and the client wants to keep it as close as possible to that... but with variable copy length :/ I guess once we build this and they can see the problem they might change their mind.
–
bernkMar 8 '13 at 9:03

1

That sounds like a rough assignment. Ideally, you want to communicate to the client that moving away from flash apps means moving to a new and better way of presenting content (without scaring them away). You could try having lots of iterations in the project with many quick prototypes, so that they get the idea before you're too committed to just reimplementing the flash design. You could also show some examples of how the competition is approaching the problem.
–
PeterMar 8 '13 at 9:35

3 Answers
3

I don't know if it would work in your case, but another solution would be cropping the image according to the amount of text.

For example, the image could be set as the background of a div that expands to the same height as the text block.

If you need to preserve a fixed height throughout the app, another solution would be to change the text's font size according to the image's height (within reason of course, say between 12-18px).

Finally, you can use an invisible scrollbar (USA Today does this in their sidebar). If you go this route, I would suggest overlaying the bottom of the text with a transparent gradient to make it seem like it's fading away, and communicate to the user that they can scroll down.

If I understand completely and the client really is sticking to their guns of wanting the two column layout then could you have the image fixed on the left scale to 100% browser height. The text on the right can then just have a vertical scroll to tread through the article. Then when they get to the end of the article unfix the image so it scrolls off with the text and scroll in the next image so a do the same thing.

So it would be similar to https://medium.com but with the article text on the right and the image fixing and unfixing when appropriate.

You could then even have slight navigation over the bottom of the image so the user can see the next articles headline and go straight to it or back to the previous.

I would agree with Peter that the whole idea of switching away from Flash is not just to ditch the technology but to opt for better, more flexible, more scalable layouts. I have had to fight that same battle on a couple of occasions in the past and in my experience, most of the time it is a case of 'tunnel vision' by the client. They have been so used to the old solution that they simply cannot visualise something better. I would recommend spending a couple of hours just doing some quick mock-ups of possible (but completely different) types of content and show the client some pictures of how updating the layout would add more value to their solution.

If however, your client simply wont budge, then go with the internal panel scrollbars. There are a number of javascript libraries available now which basically allow scrollbars to behave in the same way as they do on macs i.e. when you interact with the content, nice slim scrollbars appear and when you move away, they simply disapper. This way at the very least they won't constantly be in the face of the users.