Adaptive text descriptions on responsive websites

A simple tutorial to make adaptive text descriptions.

An increasing number of people are visiting websites from their phones and mobile devices. Because of this shift in browsing habits, websites are being designed or redesigned to be responsive, which is why adaptive text descriptions are necessary.

The layout of a responsive website adapts depending on the width and height of the device on which it is being viewed.

In general, this is a good thing as it provides a better user experience, but responsive websites also create new challenges.

The Problem

On static websites, you might find some text saying something like ‘Contact us using the form on the right’ or ‘the picture on the left shows me completing the London marathon’, and that would be ok.

The issue on responsive sites is that, when viewing on a mobile phone, that picture or form might not be on the left or the right, it might be above or below respectively.

The problem also occurs the other way around. If you wrote something that refers to the location of something that is correct in a mobile view, it might be incorrect in on a desktop view.

The Bad Solution

The easiest thing to do is to be vaguer. For example, write something like ‘The picture shows me completing the London marathon’. This solution comes at the cost of clarity, especially if there are many pictures on the page.

The adaptive text solution

The best thing to do is write a little code to make the text change depending on the width of the screen.

If your viewing on a mobile the text above will say “Look at the image below”. If you’re viewing on a larger screen with a landscape display, the text will read “Look at the image to the right”.

Tip: If you’re on a desktop computer or laptop, click and hold the edge or your browser window and drag it in to make the width narrower. You will see that when the site adapts, and the image moves below the text, the text changes to accurately describe the location of the image.

The code

It’s very simple. This is how the HTML looks.

        Look at the image '<span class="contentlocation">on the right</span><span class="contentlocationmob">below</span>        

You’ll see that there are two spans with two classes. Each span contains the alternative text. You may need to adapt this to suit your needs. For example, my spans say ‘on the right’ and ‘below’, whereas you may need to change this to ‘on the left’ and ‘above.’

You then need to add the following CSS to your stylesheet:

        .contentlocation{
visibility: visible;
}
.contentlocationmob{
display: none;
}
@media (max-width: 800px) {
.contentlocation{
display: none;
}
.contentlocationmob{
display: unset;
}
}        

You will probably need to make a small adjustment to the CSS. There is a media query that tells the different classes to appear or be removed at a width of 800px. The breaking point is the width at which the site adapts to a different layout, and it will be different with every site.

Tip: If you don’t know the breaking point width of your site, open the site in Google Chrome, right-click somewhere the page and click ‘Inspect’. Grab the edge of the browser window and drag it in to make it narrower. You’ll see the page width is now being shown on the top right. At a certain width, your site will adapt so that elements that were side by side become above or below. That is your breaking point.

The WordPress solution

You can use spans in the WordPress text editor, but there is a better way that will make it easier for people to employ this solution.

Add the following code to you functions.php file:

        function bigdot_location( $atts, $content = null ) {
return '<span class="contentlocation">on the right</span><span class="contentlocationmob">below</span>';
}
add_shortcode('location', 'bigdot_location');        

In the above PHP, change all instances of ‘bigdot’ to your own theme identifier. You’ll also need to add the CSS to your stylesheet.
Once you’ve done that you can just use the shortcode [ location ] (remove the spaces).

There you have it. A simple adaptive text description trick to improve website usability and clarity.