Do dynamic height changes jar users on web page load?

Question

When a web site loads, sometimes an element's height needs to be determined dynamically with javascript. This can happen with a responsive design where the width of a fluid element is not known until the page loads and an aspect ratio must be maintained. Depending on the download speed of the user's connection and the performance of the browser, this can result in the user seeing the height of those elements jarringly snap into place.

Is it acceptable to expose the user to what is essentially a temporarily incomplete grid? As a responsive web designer, should I be striving to have all my dynamic height elements be in a 'ready' state for display before the user can put their eyes on them?

I don't like the fact that if a user loads the page, scrolls down and then focuses on something before the calculations take place, then what they are looking at will be suddenly, and probably in their eyes for no apparent reason, be pushed down, perhaps below the fold depending on the device they are using.

Answer 1

Repositioning or resizing elements in the process of loading a page is a major (and common) problem. Not only is it irritating (and jarring as you put it) it can result in usage errors when something appears and the user attempts to click on it and it moves and something else is clicked on!

The problem can be insidious because you don't know the characteristics of your users' internet connections so you don't know how fast the resources will arrive or in many cases in what order they'll arrive, so a page can load in a comfortable way in one place and in jarring manner in another place.

Dynamically computing the layout with JavaScript is one source of these kinds of problems, and doing this dynamic layout has many benefits and is common these days. A brute force solution is to make every element invisible initially, and after the layout is computed to make things visible. I suspect this is the reason many higher tech (JS heavy interactive) pages are completely blank (except for maybe an animated loading indicated) for a brief time upon loading. I also suspect in many cases refinements to this brute force method can be achieved by analysis of what can be initially visible with no chance of jarring resizing/relocating, in essence determining the earliest instant something can be make visible.