See that image on the right? Text references in a flexible layout

The flexible layouts, brought along by responsive web design, have set up many new requirements to the words we put in our content. Among these, it is no longer fair to throw in a phrase like “see image on the left”. Nor can we reference a poll in the right hand sidebar. Such references make little sense in a responsive context, where that image or poll is just as likely to be positioned below or above the textual reference; not next to it.

Nonetheless it is common to see such references on responsive web sites. They mostly come of a bit dorky on a mobile phone, because the author did not consider the alternate layout on mobile, while writing in a desktop environment.

Naturally, some authors do make such considerations; as in the example below (see English translation in the caption). Though I’ll certainly deem this solution far from elegant, you gotta give the guy some credit for being considered about writing for the responsive web.

Screendump from sporten.tv2.dk
Example from sporten.tv2.dk. Text translates to: “List of dropped out riders is found on the left – or below if you are reading this article on a smartphone”.

So how do we handle such textual references in a flexible layout? One could argue, that we should completely refrain from making them in the first place. On the modern web, where pages come together from numerous bits and pieces of content, can you even be sure, that the referenced piece of content will still be there a couple of months down the road? Probably not.

In some cases, however, there is a stronger relationship between content. Consider images, videos, or animations that are part of the story being told; and therefore closely knit to the text. In such cases it can still make good sense to reference an object, when it helps bring the story along. So how do we do that in a flexible layout?

If you’ve studied the design of my site, you may have noticed, that I’m mostly relaying on a single column layout and simply stretching things for wider displays. I do this for numerous reason. One is that I actually find it kinda neat, that you can start from the top and finish at the bottom. Also, I want to give you a true benefit of a larger display; namely bigger rather than floating images. In some case though, I do rearrange my layout a bit. When displaying two images together, I’m stacking the images on top of each other by default, but on wider displays I put them next to each other. (Note: Go ahead and rotate your phone or resize your browser to see this in effect on the two images below).

Two images stacked on top of each other on an iPhoneTwo images displayed next to each other on an iPhone
When two images are displayed together on my blog, they get stacked on mobile phones, but displayed next to each other on wider displays.

Say I wanted to write some text to go along with the kitten and puppy above. On a small display, with the two images stacked on top of each other, I would probably want the text to read out something like this:

I’ve found two photos of some lovely baby animals. The first photo has a cute kitten in it. The second photo is of a sweet puppy.

However, on a larger screen, where the layout is changed and the images get placed next to each other, a more suitable text would be something along the line of:

I’ve found two photos of some lovely baby animals. The photo on the left has a cute kitten in it. The photo on the right is of a sweet puppy.

What I want is to show the words first and second on small displays. Then on wider displays, I want to replace these words with on the left and on the right respectively. Let’s start by adding a few <span> tags and some classes to the markup for the above text:

<p>
    I've found two photos of some lovely baby animals. The 
    <span class="first-left"><span>first </span>photo</span>
    has a cute kitten in it. The
    <span class="second-right"><span>second </span>photo</span>
    is of a sweet puppy.
</p>

Then by applying the below CSS rules for viewports wider than 42em, we’re first hiding the <span> tags containing the words first and second. Secondly, using the :after pseudo element the left and right references are added instead:

@media only screen and (min-width: 42em) {
    .first-left span {
        display: none;
    }
    
    .first-left:after {
        content: " on the left";
    }
    
    .second-right span {
        display: none;
    } 
    
    .second-right:after {
        content: " on the right";
    }
}

And that’s it. The text is now changing to reflect changes in the layout. While this is a simple case for a simple layout change, the principle should easily scale for more radical layout changes. In most cases it will be a matter of changing a vertical reference to horizontal one and vice versa.

A word of caution though. For reasons stated above, I do not suggest the use of this principle for referencing loosely related content in a side bar. If the side bar content is important enough to reference, put it inside the primary content in stead. Also this approach should be viewed as an enhancement, not a prerequisite. It is important that the content still make sense, if someone was to put it in a context, that does not include your stylesheet; like Pocket or Readability. For that reason I’m not using the :before pseudo element to add the words first and second. As with most things; take great care in what you do and you should be just fine.

Of course we cannot stop here. I can’t let you go without a final look at that cute kitten in the first image below or that sweet puppy in the second image.

Cute kittenSweet puppy
Photos from Flickr used under Creative Commons license. First photo by Nick Perla. Second photo by Andrew Magill.