Jumping Jack and the moving paragraphs

This is a problem that I see a lot on many different websites although it’s mainly ones which are heavy on advertising and social media plugins. As text generally loads much faster than images, and advertising is mainly images, you tend to see the text content of pages loading before the advertising and other graphics. Then when those other graphics do finally load they push the text around like a school yard bully leaving the reader playing catch-up with their eyes. This can be very frustrating as text jumps around and the reader is left waiting for things to settle down before they can read what they came for.

I noticed that this was quite bad on a recent site that I visited. It’s a typical website with a header area, a sidebar with links and some graphics and the all important social media share buttons. It also used a custom font which loaded in after the text had already rendered, which added another text-jump. To illustrate just how bad this is, I’ve made an animated GIF of the page loading process. There is no trickery here, I just made one frame per page change and had it change frames every second. This was fairly typical of how this page loaded. Try reading the first paragraph, or any for that matter, whilst the animation plays through and you will see how annoying this is.

The GIF is around 1.5mb so it might take a while to load but check it out here.

The solution?

You can use low resolution placeholders so that text is pre-rapped around the places where graphics and adverts will be loaded but the best solution in my mind lies in the design. Be mindful of where you are placing graphics and adverts and try to use font fall-backs that are similar to the custom font. The best solution is always to remove the problem but these all help to reduce the amount that text shifts about when graphics load around it.