4

Flash of unstyled content:

  1. You load the content of a web page.
  2. You load the styles of a web page.

In the time period after (1) but before (2), the content is being displayed without its proper styles. This time period is usually brief; it's a "flash".

Wikipedia says:

In an attempt to avoid unstyled content, front-end developers may choose to hide all content until it is fully loaded, at which point a load event handler is triggered and the content appears.

Basically, to only show content once the styles have loaded and it could be displayed properly.

Is this a good idea? Are there usability benefits, or is it just aesthetic? The downside is that it takes longer before a user will see content on their page.

  • 1
    You could also hide the content by default but set a maximum time to wait for the style to load, otherwise show the content without style until it loads. – Alvaro May 6 '17 at 17:30
5

It depends on what the user is expecting, how much time will the waiting be, if a lack of style makes the website look chaotic and unusable, etc.

For example, in a portfolio website the style (or lack of style) might be more relevant than in a news one. You might prefer the website to look as it is supposed even if that implies losing some users in the wait.

If you consider it is worth to wait for the styles to load (with a maximum time) and make the user aware that the page is loading, some ways to handle it are:

  • Display a loading state message or animation
  • Load minimum styles (embedded in the <head> or inline for example) so the layout of the page is usable and the "jump" is as unnoticeable as possible.
0

If the styling will affect positioning of any links, it's a huge usability issue.

I can't tell you how many times I've lined up the mouse pointer with a link and clicked, while the content shifted either without allowing response time, or actually after the click but before processing the event, and did hit-testing using the new layout. And then promptly executed a navigation or action significantly different from the one I intended.

Now, there's more than one way to solve this -- rather than hiding the unstyled content, it may be preferable to detect and discard clicks contemporaneous with the layout change. But it certainly should not be ignored.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.