Loading
Live demos

What is an immersive website, and when is it worth it?

An immersive website is one you move through rather than read. Instead of a document with pictures, the page is a scene — usually real-time 3D, drawn by the visitor’s own browser — that changes as they scroll, with motion and sometimes sound. There’s no official definition: it’s the name studios and designers give these sites, and the Nielsen Norman Group notes that the wish to feel “immersive” is often what drives effects such as parallax.

This explains what these sites are made of, when they help a business and when they get in its way, and what makes one work. What one costs, route by route, is in what a 3D website costs.

What makes a site immersive

Real-time 3D. The scene is drawn by the visitor’s device with WebGL, the browser’s interface for 2D and 3D graphics, rather than played back as a video, so it can answer the scroll and the pointer and be seen from any angle the page allows.

A scroll that tells a story. The scroll bar becomes a timeline: sections hold still while the scene plays through a moment, and the words come in when there’s something to say. How a 3D website is made covers how that’s built, from the model to the legal page.

Not virtual reality. The word also names something else. WebXR, the browser’s set of standards for virtual and augmented reality, draws 3D scenes on headsets or over a phone camera’s view of the room. An immersive website in the sense used here works on an ordinary screen, with no headset.

When it’s worth it

When what you sell is experienced rather than listed: a place people travel to, a product whose shape and materials matter, an app whose flow is easier to show than to describe, a portfolio where the work is the argument.

When the first impression is the job. Visitors arrive from a link, an ad, a QR code or a social profile, and the page has moments to make them stay; a page that feels like the thing itself is built for that moment.

When one page can say it all, with one thing to do at the end — book, buy, get the app, get in touch — and when you can keep its words in HTML and its weight in check, so it costs you nothing in search or speed. Speed, SEO and 3D covers what that takes.

When it isn’t

When people come to find something fast: opening hours, a menu, a price, a phone number. Motion between them and the answer is in the way; NN/g’s research found that scroll-triggered text animations, misused, slow reading down.

When you need to be found for many different searches. Google ranks pages, and a single immersive page can’t be the answer to ten separate questions; one page or several goes into that.

When the motion takes over the scrolling itself. In NN/g’s usability tests of scrolljacking — pages that change the pace or direction of scrolling — most participants were at least mildly disoriented, and it was worse on phones. Its advice: keep sections that scroll normally, keep important text out of the effect, and avoid it on mobile.

When motion makes visitors unwell and there’s no way to turn it down. The W3C’s accessibility guidance lists dizziness, nausea and headaches among the reactions of people with vestibular disorders; a site can read the operating system’s reduce-motion setting and should.

What makes one work

A concrete subject. Promti’s kits follow one rule: every scene shows something real — the product, the place, the app’s screens, the work — rather than abstract shapes.

Words that do the selling, in HTML. Google says it doesn’t index what’s rendered in a canvas, so the scene can carry the mood, but the headings, the offer and the button have to be real text.

A phone version, and a way down. The scene framed for an upright screen, a lower drawing resolution on phones, reduced motion honoured, and a page that still works without WebGL.

One clear action at the end, and a check on a mid-range phone before launch.

Promti’s kits

Promti’s four kits are immersive one-page sites, each made for one kind of business: Product for one product, with your own 3D model or the kit’s stand-in; Forest for a place, whose day is told with six of your photos; App for an app, on a phone and a laptop; Studio for a studio’s work, hung in a gallery. Each has a live demo, and the wizard shows your own version before you pay.

They pin sections too — the page holds while the scene plays — so they keep the browser’s own scrolling on touch screens and whenever the visitor has asked for reduced motion.

Questions

What’s the difference between an immersive website and a normal one?
A normal website is read like a document: text, pictures, menus, pages. An immersive one is moved through: the page is a scene, usually in real-time 3D, that the scroll carries you through. Both need the same foundations — words search engines can read, a page that loads fast, a clear next step.
Is an immersive website the same as a VR website?
No. Virtual and augmented reality on the web use WebXR, which draws 3D scenes on a headset or over a phone camera’s view. An immersive website is 3D on an ordinary screen, scrolled like any page.
Do immersive websites work on phones?
They can, when they’re built for phones from the start: a scene framed for a tall screen, fewer pixels to draw, and normal scrolling. It matters doubly because Google indexes the mobile version of a page, and because NN/g found scroll effects more disorienting on phones.
Are immersive websites accessible?
They can be, with work: every important word in HTML for screen readers, a response to the operating system’s reduced-motion setting, and a version that works without WebGL. Without those, they shut out the people the W3C’s guidance is written for.
How much does an immersive website cost?
Made from scratch by a specialised studio, Metabole Studio puts an immersive narrative site with 3D scenes at €25,000–60,000. Promti’s kits cost €500 each, in one payment, for one page built on a kit’s scene. The routes in between are in what a 3D website costs.