Rich Media & Animation

Rich media used to mean Flash. Browser plugins have since been retired, and everything that made rich media valuable — layered content over video, animated interfaces, interactive overlays — is now built directly into the web platform. This page covers what we build today, and the still-relevant rendering issues that come with it.

What we build

• Content layered over or beside a video player — text, images and links positioned as part of the viewing experience.
• Overlay content styled with CSS, defined in an external stylesheet or inline in configuration, with background colours, background images, curved corners, gradient settings and full transparency.
• Interactive overlays containing links that trigger scripted behaviour, so a content layer can do almost anything the page can.
• Content that animates with the same timing and easing as the rest of the interface.
• Programmatic control for developers — setting and appending content, and handling mouse-over, mouse-out and click events.
• Multiple independent content layers configured and running at the same time.

Flash of unstyled content

A flash of unstyled content (FOUC) is an instance where a web page appears briefly with the browser’s default styles before an external stylesheet loads, because the browser engine renders the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied, but the shift is visible and distracting.

FOUC is indifferent to changes in CSS or HTML versions. It originates in the priorities programmed into the browser: as the browser collects HTML and all the ancillary files referenced in the markup, it builds the Document Object Model on the fly, and may choose to display first what it can parse quickest — namely the text.

The effect is more frequently observed now that pages reference multiple stylesheets. Pages often include style references for media other than the browser screen, such as rules for printers and mobile devices; they may import layers of style files and reference alternate stylesheets. Online advertisements and other inserted offsite content, like videos and search widgets, often dictate their own style rules within their code block. The cascading nature of CSS encourages some browsers to wait until all style data is collected before applying it.

With JavaScript libraries also defining and applying styling, the problem has become more prominent. To avoid unstyled content, front-end developers may hide content until it is fully loaded and a load event handler reveals it. To reproduce a FOUC deliberately, developers can use browser tooling capable of disabling a page’s CSS on the fly.

How we avoid it

On the sites we build, critical styles are inlined, fonts are loaded with a sensible fallback and swap behaviour, and layout-affecting styles are never deferred behind script. Content is never hidden waiting for a load event, so the page is readable from the first paint.