Explore the web in the palm of your hand with these five experimental mobile sites

We all spend an increasing amount of time browsing websites on our phones. So when a site has clearly not been adapted to suit the smaller size, it makes for a very frustrating experience. Clearly, mobile sites are not simply an afterthought nowadays, a project to be tackled once you feel the desktop version of a site is finished. The two should be considered in tandem – some might even argue that today, a mobile site is actually more important. So for this month’s Double Click, we’re looking at sites which either nail the experience on mobile or which have experimented with the format in some way.

If you’ve recently designed a website – mobile or not – we’d love to hear from you. Drop us an email and tell us all about it for the chance to be featured in a future edition of Double Click.

Soft Power: softpower.xyz

Oftentimes, social media is a studio’s primary means for sharing its work with the world. So a portfolio site can feel redundant. Unless you’re a studio working with web design that is, where a portfolio site becomes a place to show off or experiment without a client dictating the rules from the other end of an email chain. It’s for this reason that Soft Power, a creative studio founded by Ben Haworth and Hamish Gardner, decided to go for something “part showcase, part experiment,” as Ben describes. “We saw this as an opportunity to create something that was fun to interact with but had the added layer of a slightly deeper dive on our projects.”

The site features a draggle montage of Soft Power’s work (as videos and stills) which forms the background of the landing page. “There’s a lot of energy in our work so we were keen to create a site where the visual language was literally informed by our past projects,” Ben explains. At the bottom of the screen is a stackable set of notifications, which works particularly well on mobile, as it mimics the banners we are all so used to seeing pop up on our screen. “People (nerds) are usually impressed how seamlessly the UI translates to mobile which was always a bit of an internal north star,” Ben adds. Reflecting on the project now, he says if they were to do it again, they would set stricter internal deadlines. “It’s cliche but an eight-week project inevitably turned into something closer to a year. Think smaller.”

Ben’s top tips:

1. Don’t recreate what your social channels are already doing.
2. Don’t tell anyone your site is coming soon until you’re ready to launch.
3. Make it shareable.

Yehwan Song: Hey

Up next is something pretty different, although we’ve come to expect no less from its creator, Yehwan Song, who was featured in 2020’s Ones to Watch. Made entirely to exploit the interaction between user and their mobile device, it allows users to create the word “HEY” by touching the screen – something Yehwan coins a “tangible poster”. She tells us that the site grew out of her desire to create a “website that could be an extension of human gesture,” and which defies the usual formal structure of a website. What’s more, she attempted to “connect the users’ perspective and the perspective inside the screen,” explaining that “the world ‘HEY’ has a slight bottom-to-top perspective on the screen, as it is the perspective of the user looking at the screen right above the mobile device.”

With so much complex and experimental coding going on, Yehwan remarks that her advice to herself, if she were to start again, would be to think while making. “It might seem easy to build and develop a website but there are so many things you need to consider while you are building this website – the position of the three fingers, the tapping order, perspective, etc. It took much more development time than I had expected,” she says. Despite the time it took to make the site, Yehwan says she loves how it blurs the border between “real space and webspace” and that it “creates the effect that hand gestures directly trigger actions on the website. I think that is the most important shift I tried through this web experiment.”

Yehwan’s top tip:

1. Think about the purpose of the website first. Depending on what this website is for, it may need to be more user-friendly, interactive, or generative, as if it is a living creature. There are diverse approaches when it comes to web design, and the inspiration in my case comes from rethinking the website itself, its purpose, and its contents.

Daniel Powell: twist-nav.play.it.cool

A site made specifically for mobile is twist-nav.play.it.cool by freelance developer and digital art director Daniel Powell, also co-curator of hoverstat.es. The site requires users to use gestures, like twisting and rotating several fingers on the screen in order to navigate the website. “The site itself was an experiment into alternative navigation, so it comes from a place of the function coming before the form (or even content),” Daniel explains, “but from there, I just played with it, imagining how content could come to life in this environment.”

Similarly to Yehwan, the typeface ended up playing a big role in the success of the site, although somewhat unexpectedly with Daniel. Explaining that it wasn’t really ever an element he set out to explore, “it kind of fell into place when I was thinking about transitions and how this mechanic could cycle through pages. I would have probably made it a little more complex and legible if I had given it more time, but it still brings me a lot of joy watching the type transform.” Daniel produced the website while self-isolating, so he remarks that, again, if he had more time, he’d have tried to take it in a more editorial direction, by perhaps writing a short story or article. “Imagine a video player with a twist scrubber, or how could a twist mechanic impact an image gallery? That said, my advice should probably be to keep it simple and don’t get too carried away,” he jokes.

Daniel’s top tips:

1. If you want to create something a little more playful, or it feels right to add some interactions to the site design, some of my favourite sites I’ve seen find a way to reflect the context of the content and aren’t overly complex or trying to do a thousand things at once.
2. Beyond this, something I would recommend to everyone is, don’t underestimate that beginning stage of the process and give yourself space to think about what actually needs to be conveyed, see if there are places you can strip away unnecessary fluff and make a solid plan.

Toph Tucker: www.tophtucker.com

While Toph Tucker’s portfolio site works brilliantly on desktop, it exploits a function on mobile that isn’t possible elsewhere – the shake. Toph explains how it functions: “The website starts with a basic HTML page: headers, paragraphs, links; all Times New Roman, almost all default styles. It then measures the positions of everything, clones every letter into its own element, and hides the initial basic HTML.” On desktop, it warps the text so it flows around a vector field, becoming legible when your mouse hovers near a certain area. On mobile, “it uses the same measure-and-clone technique to warp the letters according to the phone’s accelerometer so that when you shake it, it billows like a cloth sheet.” They add: “The visual language of zany type is totally ripped off from my wonderful Businessweek coworkers, whom I knew I’d miss in Massachusetts. The technique behind the motion of the letters is ripped off from George Michael Brower, who’d done a brilliant demo called FizzyText that introduced me to Perlin noise. The accelerometer-driven mobile version is inspired by my former boss Cindy, who’d pushed me more than anyone to make charts that didn’t look like an afterthought on phones. The ‘object constancy’ — where the letters reassemble themselves — is inspired by Mike Bostock’s writing about how to do good responsible transitions between charts, though I wanted to abuse it for disorientation.”

Interestingly, despite the site working so well on mobile, Toph says that it was somewhat of an afterthought: “I totally designed it for the desktop first. I tried to get the same desktop behaviour working on the phone. But it didn't feel right, and I’m very happy I made the decision to leave off the behaviour and do something that felt mobile-first, second,” they explain. Today, Toph, therefore, loves showing people the site on both devices as each offers a different experience or something new to discover.

Toph’s top tips:

1. There’s the Longfellow poem The Builders, maybe that's a good start. I only remember the “wrought with greatest care” line. But then there’s also Kundera’s line about “instead of claiming to convey some apodictic message, remaining hypothetical, playful, or ironic”. In that interview he also talks about striving to discover “that which the novel alone can discover”. I like websites that could only be a website.
2. Ooh, and websites that could only have come from your hand, that’s another one! It’s a lot like writing, in that you can cultivate some sense of boredom and run away from it. Some sense of the reasonable things that anyone could say. I want something really specific. Say one true sentence. I’m exhausted, at my desk, with “explosive” spicy tofu and scallion pancakes from a place called Spices I've never been to, only ordered from. When I read over the first part of this I’d written exhausted last night, I realised parts of it had slipped into delirious, almost dreamlike language, like referring to “watery small stuff” on the website. I haven’t touched the iced tea I ordered with dinner. For work tonight I was supposed to be fixing a website menu so it worked better on phones, but instead, I tweaked the Wikipedia article about software wizards. I really want to get to sleep so that I can get up early enough to walk with Claire to work. I’m sort of sad today because someone (totally accidentally, and very understandably) threw away a fragment of moss I’d been keeping on my desk that I’d taken from my favourite tree as it lay dying uprooted in the water. These last few sentences are truer than anything else I've written here, and I want websites that feel like that.

Tristan Bagot: www.contents.paris

Another site that, while not mobile-first necessarily, provides a particularly pleasing experience on mobile was made Tristan Bagot, in collaboration with contents.paris’ owner (who wishes to remain anonymous). Simple yet most certainly effective, when you first land on the site you’re presented with a rich red background and block capitals spelling out “CONTENTS”. When you press and hold, a slideshow of images cycles through at a quick pace, one Tristan explains was very much on purpose. “The main purpose of this website is to quickly show a creative universe and yet not show images long enough to be able to judge them in detail,” he tells It’s Nice That. “It creates some mystery around it.” And that’s it! But that simplicity is exactly what Tristan likes best about the site, explaining that “the fact that there is only one interaction feature on the site,” is his single favourite thing about it. In turn, the site is a joy to “browse” on mobile, feeling like the website itself fits in the palm of your hand with ease. Sometimes, less really is more, especially when you’re working with a smaller screen size.

Tristan’s top tips:

1. Don’t think it is a website at first.
2. Don’t think about a format but about a system.
3. Stick to a minimum set of design/functionality rules.