Do you make sure your screenshots are readable?

Last updated by Tiago Araújo [SSW] over 2 years ago.See history

Many websites have screenshots images to illustrate content instructions. With so many different screens sizes and resolutions, you probably have seen a screenshot that was unreadable.

You don't want that in your website! Always make sure the screenshots you share as content are readable to the user.

Only keep what is relevant

Crop your image when you can, keeping only the relevant areas of the image.

In the cases where you do need a full screenshot, it's a good idea to allow users to open the image in a bigger size, using lightboxes for example.

images uncropped bad
Figure: Bad Example - The contents of the screenshots are difficult to read

images cropped good
Figure: Good Example - The contents of the screenshots are readable, since the image was cropped to the relevant part

Mobile screenshots

Most times screenshots bad readability is caused by too small texts in images, however too big images can also make it difficult for the reader to follow.

Modern mobile devices have extraordinary screen resolution, which makes screenshots huge. Another problem is that these screenshots are in usually in portrait dimensions (image is taller than it is wider).

When adding a mobile screenshot, make sure its width is about 50% of a desktop screen.

privacy mode ios huge
Figure: Bad Example - mobile screenshot is way too big

privacy mode ios
Figure: Good Example - mobile screenshot is smaller and easier to follow

We open source. Powered by GitHub