When 3D adds something
3D is not a goal in itself. It works when it shows something a photo cannot.
A product to turn around
Furniture, appliances, packaging: the visitor looks at it from every side before buying.
Explaining something spatial
A building, a machine or a process that comes together step by step.
A brand that stands out
One strong moving image at the top that visitors remember. The rest of the page stays calm.
Do not
If the object tells nothing, if your visitors mainly use older phones, or if it delays the site's launch by a month.
What 3D costs in speed
3D runs on JavaScript and on the device's graphics chip. Downloading and running scripts is the biggest cost on a phone; Google's V8 team recommends splitting up large bundles.1 Large textures also use a lot of memory on mobile; MDN recommends compressed formats.2
On top of that, a lot of motion can cause discomfort for people with balance disorders. Phones and computers have a setting to show less motion, and a good site respects it.3
How to keep 3D light
Load when in view
The 3D object only loads when it is about to come into view. The browser can track this itself with the Intersection Observer.4
Pause when off screen
When the visitor scrolls on, the animation stops. That saves processor and battery.4
Light models
Less detail where nobody sees it, and compressed textures.2
Calm version
People who have set their device to show less motion get a still image.3
A fallback
If a device cannot show 3D, a normal image is shown instead. The page always works.
Measure with 3D
Test the speed with the 3D object on the page, on a simulated mobile connection. Not without it.
How Ekkora handles it
We offer 3D and motion as an extra, not as standard. The object at the top of webdesign.ekkora.nl is built this way: it only loads once the page is ready, pauses when off screen and has a calm version. The speed test in our launch check always runs with the 3D object on the page. Also read why a site is slow on mobile.
Questions
- Is a website with 3D much more expensive?
- It is extra work: making a model or having one made, and getting it light enough for every phone. That is why we only recommend it if it adds something. See also what a website costs.
- Does 3D work on every phone?
- On almost all modern phones, yes. For devices that cannot show it, a normal image should be ready.
- Is 3D bad for Google?
- Not if the page stays fast and the text is on the page as normal text. Search engines read text, not a 3D object.