About the author

Fred is editor of soft skills and professional development at Smashing Magazine (save him!) and a software engineer at The Guardian. His interests include …
More about Frederick ↬

Design often revolves around imagery, but the other senses also deserve love. In this article, we agree on audio features that make websites sing.

It’s easy to get hyper-focused on how things look on the internet. There is a lot to look at. You’re watching this now! However, in the era of touchscreens and home assistants, it is safe to say sight is not the only sentence worthwhile.

George Lucas once said half the magic of any movie comes from its sounds. The same can be said of certain online experiences. For part two of this series, we have compiled some of our favorite examples of sounds used on the internet. Most of us have had the misfortune to cross bad examples (auto-play videos are a particularly serious example), but sound can give web experiences a new dimension if applied properly.

Here are some amazing sounds from the World Wide Web. We hope these bright ideas help you think a little differently about your own projects.

Part of: Web design well done

The New Yorker’s Audio Articles

The word ‘article’ usually refers to words on a page, with a bit of winding space whether the page is paper or on a screen. With each passing year, this assumption becomes more restrictive and reducing. Words can be heard as well as read. This is something that a growing number of websites are looking at, while the The New Yorker a particularly good example. Much of their writing – fiction and non-fiction – comes complete with an audio version, often read by the authors themselves.

The New Yorker Website
On The New Yorker, audio version of articles is quite handy for listening on the go, or to make the long reading a little more accessible.

Most sites do not have the luxury of listing people like Margaret Atwood, but they do. text-to-speech software is getting better, we like to see websites that include it in their design and functionality. Nobody Reports did a fantastic article about it last year, and yes, there is an audio version.

Tune in to the world radios in radio garden

If we do not forget, websites can have other forms than grids. Radio Garden take you instantly through the world’s radio stations. It’s like Google Earth, but with music. Turn the globe, turn on, turn on, fall out. A deceptively simple idea executed with a playful elegance.

Radio Garden's website
Originally built in 2016, Radio Garden got a complete cell phone first makeover last year.

Many pieces are needed to make this possible CesiumJS for the world, Esri for satellite images, and Free GeoIP for the location API. A wonderful idea that was executed beautifully. (An honorable mention must also go Radiooooo, a kind of equivalent time travel.)

Botany and Symphonies in the Garden of Penderecki

We doubt you’ve ever seen a memorial garden like Krzysztof Penderecki. Wander the virtual garden of the legendary Polish composer (and avid gardener) with his music in the background. This is a beautiful tribute and a crisp case study in web design to begin with. There are a lot of cool things going on, but the music was the right thing to focus on.

Penderecki's Garden Website
Penderecki’s garden is not so much a website, but also a virtual think tank. After all, educational, elegant … Who would have thought at this time that the internet could still feel so advanced?

Acres of Margraten’s Oral Histories Of WWII

The space for archival material to rediscover itself online in new and exciting ways is almost limitless. The Velde van Margraten oral history project builds its website around its audio content, with the audio clips accompanied by sad musical arrangements.

Fields by Margraten's website
The website takes the past out of history textbooks and makes it feel as real and immediate as it deserves.

The music is complementary, helping the interrogators to enchant the spirit of a time and place. Would the effect be the same without? We are not so sure.

Netflix brings fan-like intensity to its dark series guide

There is a caution of media that automatically plays on web pages. This caution is well deserved. The Guide to Netflix’s “Dark”Series shows how powerful it can be if done right. The deep environmental mood of the site draws you first into the mood.

Netflix's Dark Series
It’s all about the little things: sound is cut out when you leave the tab, which gives a wonderful touch. (Image credits: Netflix – Dark)

Imagine a long-winded article with the right accompaniment – perhaps a horror story with dissonant environmental adaptations, or a look back at the Swinging Sixties with a Jefferson Airplane song playing in the distance. It Dark guide shows how much of a shot can be in the arm.

IT museum brings audio tours to the internet

The DataArt IT Museum is an ever-growing collection of Eastern European technology hardware, every item is brought online in the right way. This e-museum is beautiful in all sorts of ways, but its use of maintenance pieces is particularly sharp. Unlike Akkers van Margraten, the sound bites bridge the gap between then and now.

DataArt IT Museum
Audio snippets seamlessly integrated into the overall experience on the DataArt IT website.

It almost feels obvious when you first see it. Just about everyone wandered through a museum or gallery or historic building while listening to an audio guide. Why would the same option not be available to us online?

Ethics for design

What is the role of a designer? This is the question posed to a dozen designers and researchers in Ethics for design, with the answers presented in a way only the web can really fetch. Instead of presenting the results in one glossy video, the site separates all the pieces.

Ethics for website design
On Ethics for design, video, captions, photos, credits and audio sit side by side, with the user in charge of how much real estate each piece takes up.

As much as anything else, it shows how much can be lost if we limit ourselves to one medium – whether it’s text, audio, videos, photos or graphics. While this is a little scary, it might be something you need to think about how each piece fits into a wider puzzle.

SoundCloud’s Sticky Music Player Bar

We thought we should close a god-honest function. For that we go to SoundCloud, which has a music player that plays independently of the rest of the site. Clicking on a new page does not restore the player, allowing visitors to browse artists and albums without breaking the current of what they listen to. It feels so natural that it’s hard to imagine someone not being there.

SoundCloud's website
Soundcloud does the user pretty good at getting things done at the same time.

We have become accustomed to this through apps like Spotify, but on the real internet it still screams untapped potential. Think about how it can be combined with other ideas that appear here. Imagine you are on a news site and start listening to a story, a la The New Yorker. With a player like this, visitors can continue to browse the site while still listening to the original story. Sounds like the future.


The sites that appear here only scratch the surface of what is possible. Sound can take innumerable forms: radio, music players, interviews, narration and navigation to name a few. We are not all that far away chat with websites.

If you want to learn more, the articles below provide a good starting point for sound design online:

Technical capabilities have grown tremendously over the past few years, with more and more flexibility of the sites we use. They are seen, they are touched and more and more they are heard. We will stop pleading for edible, pleasantly fragrant sites (for now), but sometimes it’s absolutely worth it to make it more noisy.

Smashing Editorial
(vf, yk, hy)

Source link