Experience a whole new way of reading online with these five websites

Reading online can be a pleasant, convenient experience but when a website is designed badly, it’s nothing short of draining and frustrating. Looking at the history of web design too, we’ve not strayed far from how text was formatted early-on and often it’s simply a case of starting at the top of a page, and finishing at the bottom. There have to be other ways to present text online that are more engaging and absorbing though, but what’s the best approach? Should we mimic the IRL reading experience, nodding to the qualities of print and that slower method of taking in information? Or is it better to forge an entirely new experience, one that utilises the medium of the web and all its capabilities? This month’s Double Click looks at sites attempting to answer these questions and responding in myriad ways – from the conventional to the far-out.

Tessa Modi and Jon Lucas: jon-l.com/making-as-thinking

When you land on Making as Thinking, an experimental site by Tessa Modi and Jon Lucas, you’re met with a statement: “…we have not embraced the computer for its inherent characteristics…” The site is their response to the fact, looking at how we can transform the reading experience online. It’s progressive and speculative, and unlike any other website we’ve visited for a while. The look and feel of Making as Thinking was born from a set of limitations the pair placed on themselves, including deciding not to add any aesthetic styling. As such, “the site organically took on a form of its own,” Tessa tells us.

The process for creating the site is as exploratory as its outcome, with Tessa and Jon treating it like ping pong during the past eight years they’ve been working on it. “This project was always meant to be a work in progress because the way we read is always evolving,” Tessa explains. “We were never precious about each iteration. In fact, we found it inspiring to build on each other’s ideas, and I think it comes across in the site itself.” Reflecting on this, she adds that it would have been interesting to see the project evolve into even more forms. “Our concept for the site had a very singular focus. The medium we used was a long-form essay. We could have pushed it a step further and tried experimenting with different forms of texts.” This could have meant taking inspiration from how someone reads a Reddit thread, for example, or even a live stream, taking a more conversational approach. “It also could have been interesting to work with a single word or a short phrase.”

Tessa’s top tips:

1. “Does your format hero the content? Are there any extraneous aesthetic elements that distract the user from the work?”
2. “Be flexible. Have an idea but it’s not concrete yet? Sometimes the process doesn’t have to be so linear. I still stand by the name of our project, “Making as thinking.” It’s always helped me to just start creating work to get to a core concept.”
3. “What can you do to inspire or challenge someone to think differently about what they are experiencing?”
4. “Are your design choices going to outdate your site? Part of what I think makes this site so successful is because we structured it so heavily around the form, it still seems relevant today!”

Callum Copley, Danae Io, and Ben West: schemasofuncertainty.com

In 2018, Callum Copley and Danae Io founded Schemas of Uncertainty, an art and critical theory research group looking at the relation between prediction and prescription within current socio-political structures. It produces essays, talks and workshops and “is concerned with an over-reliance on predictive systems and investigates the risks and possibilities emerging technologies pose to the imagination of other possible futures or realities,” Callum and Danae explain. A group with such grandiose intentions needs a site to match and so they contacted Ben West, a familiar name to Double Click readers, to sort them out.

Ben explains how, from early on, they all decided “that the design concept should be connected to the ideas the project investigates.” That started off somewhat literal, with early concepts revolving around predicting a user’s activity “however, these felt distracting and did not reflect the nuance of the research agenda. Instead we wanted to bring in the notion of indeterminacy and uncertainty in the visual language of the website which was achieved by the flickering text of the landing page.” A particularly pleasing element comes in the form of the red hover state, an addition which was introduced last minute but which serves to highlight how the text disperses on the page, something that might be lost if everything was kept black. It’s a design feature Callum and Danae then carried over to a publication, designed by Alex Walker.

Ben explains that placing so much focus on text meant there was little room to experiment with other types of content. He therefore says, “if I had any advice to give to myself it would be to keep in mind how the design could translate to non-text contributions to anticipate for more varied future contributions.” Time permitting, of course.

Ben’s top tip:

“I’m usually crap at making arbitrary gestures or sticking to subjective decisions, as much as I admire that in the work of others, so I really need things to originate from some concrete quality of either the content I’m working with or the medium I’m using. What works for me is to explore both in a lot of detail and try to find some connection between them which makes the presentation support, explain or add to the content.”

Antoine Roux, Tristan Bagot and Bildung: developments.media

When designing Developments, Antoine Roux had one question posed by the site’s founders Bildung, in mind: How can we encourage people to read for 30 minutes on their screen? For this reason, he describes the process as “an ergonomic challenge before being a design one”. To try and achieve this, Antoine asked around and observed his own behaviour online. “The conclusions were quick: no one really reads on their laptop, a phone is way more comfortable. A lot of scrolling is tiring and feels a bit endless,” he tells us. In turn, he designed Developments, “a slow-paced online media offering in-depth interviews” as a series of slides, akin to Instagram Stories, where each slide is a different question. “Some just show an image. You have a slide count that tells you where you are within the interview, and your screen isn’t constantly full of content. You can tap through quickly, and go back easily,” he adds. “It’s that simple.” This system also offers the ability to be able to jump between different interviews via common threads, in turn, achieving another of Bildung’s intentions: to offer the possibility to read in a different way, taking in multiple bits of content at once.

Other design decisions, like the use of black and white, the table of contents-style homepage, and the small size of initials in the interviews were all informed by a desire to enhance, or rather slow down, the reading experience and to also mimic print. This notion also influenced Antoine’s choice of typeface, Folio. As one designed for a pre-digital era, its usual lack of suitability for this kind of project is exactly what attracted him. The site was built by Tristan Bagot and a collaboration between the two and Bildung also informed many of the site’s aesthetics – as new problems arose, they solved them through tweaks to the design.

Antoine’s top tips:

1. “Eliminating friction in the navigation can be a good way to focus on aesthetics. The other way around works too, as with everything in design it depends on the client and project.”
2. “I’m working on several websites at the moment that have nothing to do with one another, from a friend’s portfolio to a big fashion e-commerce platform. The only advice that could apply to all of them is: don’t forget the references and ideas you had at the beginning. In web design, I find it very easy to get entangled in technicalities, new features, responsiveness, optimisation and so on. The project makes progress, often with many people involved, and then suddenly you realise you have completely moved away from your original sketch or moodboard.”
3. “Finally, try and forget this is a website. It doesn’t have to ‘look like a website’ the same way you don’t have to design a book like a book, it already is one. Sure there are best practices, particularly in e-commerce, but those shouldn’t be forced on every single project. I recommend looking at loadmo.re that my friends at DVTK curate and that focuses on mobile web design. It lists many great examples of how we can design the web differently.”

Sylvia Pérez: playthetambourine.com

For the design of Tambourine, an online platform selling independent magazines, Sylvia Pérez chose to mimic the double-page spread, therefore giving users the feeling that they are reading a book. The entire website is split down the middle with the lefthand side used for navigation and the righthand side acting as more of a content browser. So while it does mimic the IRL reading experience, it also functions as a means to clearly guide the user around the site. All in all, creating flow and an enjoyable, straightforward experience was Sylvia’s intention, she tells us: “We wanted the user to find all the information and content easily and not to get lost in the information. That is why we decided to use as few information levels as possible.” In turn, there are only three hierarchies present on the site, denoted through three different typefaces. A further priority was that the magazines be categorised correctly so that they are well organised and browsable.

Interestingly, Sylvia says a major challenge of such a simple design was the use of vertical and horizontal line dividers. Although a small touch, in terms of CSS, they were tricky to get right. It was worth the effort though as Sylvia says “this system is what allows us to maintain a consistent personality and to know at every time how to apply it in every design application we need to make”.

Sylvia’s top tip:

“I have a very editorial design approach when it comes to developing a project of any kind, whether it is a portfolio, an e-commerce like Tambourine or any other type of website. So, for me, it is key to analyse and organise the content very carefully to understand the information structure as if it would be an editorial project. For me, this needs to be done outside the digital displays with a pencil and a notebook. I need to understand what are the info hierarchies, which ones belong inside the others, and in which level of importance we want to make this organisation obvious or more discreet.”

Will Ruby, Chris Hamamoto and Jon Sueda: onpublishing.page

While some of the previous sites in this month’s Double Click have mimicked universal features from books and print, On Publishing by Will Ruby, Chris Hamamoto and Jon Sueda is a digital manifestation of one specific book, a Riso-printed publication that was cancelled due to the pandemic. “We initially conceptualised the publication as a two-colour Risograph print, alternating colours – red, blue, red, blue, every other page,” the team tells us. “The site literally takes those components into a digital space using the same content that the original physical publication included and alludes to the original print format with things like a visual ‘gutter’, section markers (like page numbers), a colophon, etc.” Because of this, the website can actually be downloaded as a printable PDF that can then be viewed as it was originally intended to be. It’s a smart web to print functionality that gives the site a unique reading experience in that it can offer both analogue and digital encounters. What’s more, as they usually print in short runs of around 100 copies, the project offered the team the chance to “create something that had wider visibility and was more easily distributed on a physical level”.

At the moment, they’re printing copies of the publication to send to participants, telling us that “at the same time, people have reached out asking if they can buy a pre-formatted version of the book.” Upon reflection, they can now see that “had we made that available at launch, vs. having the printing be incumbent on the viewer, we think we would have sold several copies of the publication”. They note that it’s “a hard balance between anticipating demand and being responsive, and predicting where a project will lead” but that they’d recommend “thinking through what your goals are for the project and working towards that instead of assuming a definition of success based on the status quo.”

Will, Chris and Jon’s top tips:

1. “In all our collaborations there’s an interest in making the project feel effortless. In the context of web design, one way this takes shape is by working with the medium. A very concrete example would be using section markers vs page numbers, since pages are a more elusive idea in the browser than in a book, alluding to the gutter of the book rather than constructing a page flip, etc.”
2. “Finding trusted collaborators was very helpful throughout this process. In our case, since we’ve worked together in the past we have an idea of our skills and interests and how those may take shape in a project. Making sure everyone is personally interested and motivated in the project I think is a tip for any medium, and one we’d recommend for the web as well.”
3. “We feel it’s important to think about who and where your audience is, and to design for them/that context (locale/geography, other designers, phone vs. desktop, etc.). In a small-scale passion project like this one, we have to be aware of our time, and deciding what our goals are upfront was helpful. In this case, we designed it for the desktop, other designers, who are English speakers. Since publishing the site friends have reached out with the idea to translate the project into various languages. We’re of course very excited about this prospect and would have loved to make a multilingual publication from the beginning, but didn’t have the resources to take on ourselves. So, again, I guess this goes back to thinking about your audience and setting realistic goals for the project.”