Blog ·
Interactive websites: what they are, with examples
An interactive website responds to what a person does: to the mouse, a touch, a gesture or a sound. Here are examples that open from a link.
What an interactive website is
An ordinary site shows finished text and pictures. An interactive site reacts to the visitor: it calculates, draws or shows a result.
Every visitor gets a result of their own, which gives people a reason to share the site.
Kinds of interactive websites
- a web service that gathers data and gives a ready answer;
- interactive graphics that the visitor controls;
- a browser game that opens from a link with nothing to install;
- a site with unusual navigation, where the way you move through it is part of the experience.
Four examples
Inkfall, ink in water
Inkfall shows water with ink blooming through it. You can drive it with a mouse, several fingers at once, hand gestures in front of the camera and your voice through the microphone. The fluid motion is computed on the GPU from the equations of fluid dynamics, so the ink behaves believably. Inkfall has six modes, from heavy oil to light smoke. The camera image is processed on the device and never uploaded.
Surf, a surf forecast
Surf works as a web service. It gathers the wave, wind and tide forecast for Phuket's beaches from several weather models and turns it into one score from 0 to 10. There is no need to compare charts on several sites, because the answer is right there.
Eyeball, a game for once a day
Eyeball has five tasks done by eye. For example, you stop a timer blind, find the centre of a circle and set an angle. The tasks are new every day and the same for everyone, so you can compare results with friends. The game has no server, and progress is kept in the browser.
The strip of work on our home page
The Void Studio home page shows work as a strip you drag with a mouse or a finger. The strip is drawn on the GPU. If a device cannot do that, ordinary images are shown.
What interactive websites are built with
- WebGL draws on the GPU right in the browser. It is needed for complex graphics and physics.
- SVG and Canvas suit simpler graphics such as diagrams, charts and small games.
- The camera and microphone let visitors control a site with gestures and sound, if they allow access.
- Open data gives a site weather, maps, exchange rates and timetables.
Nothing has to be installed. Everything opens from a link on a phone and on a computer.
What to think about in advance
- The site has to open quickly on a phone with a slow connection.
- On an old device the graphics may not start, so a simple fallback version is needed.
- A visitor should understand within a few seconds what can be done here.
- A search engine cannot see what is drawn, so the essentials have to be repeated as ordinary text.
When interactivity is the right choice
Interactivity is worth it when it helps people understand a product or get an answer faster than text would. If the site only has to give an address and prices, an ordinary page is enough.