What are the best practices for responsive images that contain live text on websites?

Question

I am working on a large online retailer website, with a variety of products and we are moving over to a fully responsive website.

One of the major issues we will be looking at are the promotional or landing page banner images, which contain section titles, descriptions and call to actions in live text.

I wondered if there were any best practices you think I should consider when dealing with images and how they are displayed at the various breakpoints.

Key Question

• Images that contain live content, when they respond below certain breakpoints. What is the best practice for removing or adapting what is contained within them.
• What should I consider when adding, adapting or removing content? Is it a simple case of simply progressively removing elements the smaller the width, and replacing links with tap to load the call to action.

Clarification Live Text - This is html text that is overlaid on top of banners, like headers, descriptions, calls to actions. When the images reduce in size there isn't the space to retain them.

Answer 1

The key thing is to retain 100% of the sites meaning while reducing the size of the screen. The device used to browse your site should not dictate the contained meaning.

For text this means that it isn't ever removed. Even if it is hidden (think of a menu put into a hamburger for example) it should still exist in an accessible way in the HTML, either for a visually adept and dextrous user, or for someone using assistive technology / css free browsing.

Think first of all about what is conveyed in the text and use that to inform your decision. Is it succinct and clear? Some text can be reduced 'buy now' can become 'buy' for example, with no loss in meaning to the user, however, if you have text which is expendable you might want to ask why it's in the banner even at desktop size? It could just be cluttering up the business area of your page.

The phrase 'content is king' is very relevant to this situation.

Your image can be adjusted, it can be responsively loaded and a well picked image can be cropped in aspect ratio for different screens in a way that retains 100% of it's meaning while fitting more nicely into the layout and being more accommodating to text. For example, you could choose an image with a lot of background and a focal point that contains the meaning, then crop in square on that focal point for a portrait device, but zoom out on a widescreen with the focal point well-placed (away from the text). Don't forget your alt tags of course :-).

PS. for banner pages / promotional landings etc. this advice applies very nicely to the obvious SEO requirement.