‘For graphic designers, it’s important to understand these structures and explore the levels behind them. What is a server and what does it mean? Where is the data being stored? What kind of restrictions or data flows are behind these things? People should always understand the technology; not how it’s really made or how it’s programmed, but who is behind it, and what ideas are implemented in all these great tools.’

In October 2020, from the UK to Germany, we met up with Christoph and Konrad through a Jitsi (an open-source video calling software) link they hosted for our conversation.
Christoph Knoth (1985, DE) and Konrad Renner (1982, DE) have shared what they call a ‘virtual studio’ — Knoth & Renner — since 2011. Working remotely, Knoth in Berlin and Renner in Leipzig, they collaborate with clients in the cultural field (Simon Denny, Spector Books, Sternberg Press, !Mediengruppe Bitnik, etc.), producing expressive, handcrafted websites.

In this conversation we discussed their practice as educators running Klasse Digitale Grafik at HFBK, designing in the browser, the new normal of participation online and the challenges of exhibiting virtually.

Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020
Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020

Scripted Space First and foremost, could you describe your day to day relationship with technology; is there anything you would do, or use, that you see as standing outside the norm?

Konrad Renner We're both educated as graphic designers and have a strong education in typography and setting text, images and all these things. This is our background, but we both discovered that there is more that we can do when working on projects that happen online. There are brilliant tools, like Figma for example, where you can design a website for a living body of visuals. However, we normally start designing in the browser by coding, which means there’s no precise idea of how the type will look and there’s no PDF that we hand to the client before we start to code it. We start right in the browser because there we can connect the technology into our design process from the very beginning. So technology and design are really connected for us, and maybe that’s an important point in how we relate to technology. It’s always present and always in use.

SS So there is not a sense of a beginning or an end of the project in the traditional way, or of established stages. We’ve seen you mention this aspect of designing in the browser previously and it’s great you start with it as we were wondering to what degree this was in your process. It sounds like you are experimenting from very early on. Does this experimentation form the basis of any given website?

Christoph Knoth When we start programming, we start with a folder on a server and it’s named version 01 and with every step, we will add a number and sometimes it ends during the design process. I mean, not the final website, but the process of designing. Sometimes we have 40 or 50 folders of different living design experiments that already work in the browser where we add a specific animation, or where we add a specific hover.

KR When we started making websites, we would still design in InDesign and then send a PDF. You always had questions like ‘But how does this work? Where can I scroll? Where can I click?’ and we figured that the only solution to this problem — of what people expect the website will do and what we think the website will do — was to give them the website directly. That’s also why we start by setting up the content management system, so that they can put their data in and we design with the real content, the real text, and can apply very custom solutions to things instead of a general solution for the content you might get, that mostly never works.

SS It seems to remove a lot of levels of abstraction away from the process and the client relationship as well.

KR But coming back to your question, that means we are always looking for interesting things that are happening; a specific jQuery library, for example. We will add these to our project and say, ‘Okay, can we connect this right now?’, ‘Let’s try this for an hour and if it doesn’t work with our specific project skip it and let’s go to another approach’. It's a very fluid process, and for us it’s a great adventure to develop those things online as a real living thing.

Knoth & Renner, digitale-grafik.com, 2020
Knoth & Renner, digitale-grafik.com, 2020
Knoth & Renner, installation view, end of the year show, HFBK Hamburg 2019
Knoth & Renner, installation view, end of the year show, HFBK Hamburg 2019

SS Besides working as the studio you are both known to be educators and run Klasse Digitale Grafik, a course exploring the crossovers of digital culture and graphic design. We were wondering what kind of world are you preparing your students for and what are you envisioning together with your them?

CK One thing you have to understand is that we are part of an art school. I think maybe from this idea of the artist working as an individual or as a small group, we try to envision our students as individuals or group entities where they go their own way, open up their own studio and make their own solutions. I think that’s what we try to prepare them for. We also don’t have a big assignment for the whole class. Everybody finds their own problem and comes up with their own solution in a very open way. We don’t say, ‘You have to do a website’, ‘You have to do a video’, ‘You have to do a book’. Even finding a medium is their own problem and their own path.

SS Alongside this medium agnosticism, what would you say are the theoretical skills that would be relevant to that world you are preparing your students for?

KR We think it’s important to know the structures behind all these digital tools. Who is in charge of what? Who is earning money, and from what? What are the networks behind them? Who is getting something out of it? What’s the motivation for companies, states or whatever, to stage a specific technology or a specific design?

For graphic designers, it’s important to understand these structures and explore the levels behind them. What is a server, and what does it mean? Where is the data being stored? What kind of restrictions or data flows are behind these things? People should always understand the technology; not how it’s really made or how it’s programmed, but who is behind it, and what ideas are implemented within all these great tools. It is not very theoretical, it’s just a guideline for us to be… on the right side let’s say.

SS It’s almost preparing students to navigate power structures, or at least be wary of them.

CK At the same time we also always ask them: ‘How do those things look and how do they feel?’ By probing how those things are made there are always ways to find visual clues that they can use in their own practice.

KR Another thing that is quite important for us when it comes to teaching — we are pretty sure that our students will get a job because they can program and have some graphic design skills — is in what kind of environment they will work. Can we as teachers, or as individuals who know interesting artists and institutions, put them in contact so they can develop their own networks?

SS You mentioned bringing in your own networks to the programme; to what extent do you bring in your own ideologies or your own politics?

  • CK In a way, maybe it sounds a bit wrong, but there is no programme.
  • KR Christoph, maybe we did a misstep. Because we named it as a programme. { LAUGHTER }
  • CK It’s a programme in a way of course, but it’s not a programme programme.

KR For the upcoming semester, we will work on a specific topic. It is a smaller group of students and is about the center of societies. Who is in the center? I mean, right now with the election for the US presidency we see all this division of groups into left and right. Personally, I’m of course interested in the kind of mechanics that are dividing societies; whatever ‘society’ means.

In this programme... { pauses, laughs } In this ‘class’ for the upcoming semester, we want to deep dive into the middle of society. What’s the interface? What kind of interface do they normally use? How are they making use of social media? How are they connected to the interfaces of any kind of idea or ideology? So this is my personal interest, and I only ask students ‘Okay, let’s have a look at these kinds of topics. Who would like to join the group?’ and actually, there are something like eight who would say ‘this might be interesting for my work, let’s do research into this.’

Knoth & Renner, <em>Transparencies</em>, 2015
Knoth & Renner, Transparencies, 2015

SS  As a studio, you have established some continuous collaborators like !Mediengruppe Bitnik amongst others. One of the first projects that we encountered which was designed by you both was the Transparencies (2015) website for Metahaven. The website had the peculiarity of revealing the data that it was collecting from visitors in real-time and was emulating tactics from advertising. Transparencies facilitated a conversation that has become more common these days; the discourse of surveillance, as it would make its visitors or users aware of the usages of their personal data. Do you see websites as having the potential to frame critical discourses or make complex conversations accessible through their performative and interactive capabilities?

CK  Definitely. I think it comes from the way that we observe how we ourselves interact with websites, and how we also want other people to be able to look behind what’s actually happening when using them. That can start from this kind of surveillance idea and bring it to the fore; revealing something that is normally hidden. It can also mean going against the optimised workflows where you make the best menu, and the best pattern to buy something. We once designed this website for Werkleitz Festival where every time you clicked, you would leave a little globe behind, making people aware of how often they click and don’t think about what they’re doing. On that website you would obstruct your view; the more you click the less you would see. I think we’re always happy when we find an interaction that’s blocking you a little bit in your thoughts and leads to other possible perspectives!

Knoth & Renner, moveon.werkleitz.de, 2015
Knoth & Renner, moveon.werkleitz.de, 2015

KR What we did with Transparencies was make visible what is always happening when browsing through the web. Of course, for people who are aware of this, it’s not a novelty. However, for this kind of art exhibition, for this kind of group, it was interesting to say, ‘Okay here is the data. Let’s start with my online footprint that says so many things about my digital life.’ To make things visible that were not visible in the first place is one of the main tasks of graphic designers.

During the last few years, we did just one book and it was for !Mediengruppe Bitnik. It’s a catalogue about their work over 10 years and we had an ongoing discussion with them about how this book could do more than just showcasing their great work. They are famous for art pieces that hack systems and we thought ‘How can we hack something with a book?’. If we are to design a book, and as !Mediengruppe Bitnik are well known for their performative Internet art, maybe we can use a script as a title! What kind of script can work here? We developed this title <script>alert("!Mediengruppe Bitnik");</script>. Of course, you know what happens when this title is implemented on a website! We thought ‘This is never going to happen. I mean, all these websites, these online bookshops, they’re going to block this. They have a lot of security levels, this kind of code will never show up.’ But surprisingly, it worked quite well; even on eBay, which is a big platform. The hack was visible and when you entered the title, there was a pop-up saying !Mediengruppe Bitnik and, as you know, there is much more that you can do with a script injection like this. For us, it was interesting to understand the book market and that there is a central database behind it that stores the title, even if it’s a script. Nobody cares. This database publishes the title into all of these bookshops that are out there, and some of them are prepared, and some of them are not. This got a lot of feedback from the world of hackers, and many people were really happy to see a book hacking a website.

Knoth & Renner, <em>&lt;script&gt;alert("!Mediengruppe Bitnik");&lt;/script&gt;</em>, 2017
Knoth & Renner, <script>alert("!Mediengruppe Bitnik");</script>, 2017
Knoth & Renner, script execution on buchhandlung-walther-koenig.de, 2017
Knoth & Renner, script execution on buchhandlung-walther-koenig.de, 2017

SS It's interesting to see that such an old technology is still able to have some form of impact in an online space. So you decided on the title?

CK They decided on it, but we came up with it.

SS Clearly they never expected the client to be the one injecting scripts, which is quite an interesting oversight. We saw that Amazon has definitely updated it since then.

CK On eBay it’s gone. On Amazon I think it never worked, unfortunately.

SS The !Mediengruppe Bitnik book relates back to thinking of your projects as native to an online context. In many of your websites there is an effect where, when you resize the browser, the entire line of text scales. It sounds kind of simple, more so when we’re discussing it in the context of an interview, but we wondered if this signalled an attitude towards the web and if you may be submitting yourself to a form of responsive design. We’ve always wondered if you were developing it as an attitude, or almost like a broader manifesto?

CK When we had to do our first website back in the 2000s it also had to work on phones and tablets. We were overwhelmed at the beginning and really unhappy with the way these adaptive layouts work (very long lines and awkward in-between steps). For us, it was a hack, where if we scale everything, then in every kind of situation where we don’t know how big the monitor is, it will just fit. At the start, we did this in JavaScript because CSS didn’t really offer any options and we refined this technique with every kind of new technological step that browsers introduced. In a way, it came from an accident and is now something that we follow all the time. So it’s like a manifesto where we copy the code from the last website with the last iteration of how we scale the website to the next website. It has gone so far that we’ve now decided that when you flip the phone into a horizontal mode we will deliver you the desktop version of the website. At the start, we never cared about horizontal mode because we always thought nobody’s ever going to use a website in this mode. But some clients asked for it and we were just like, ‘Okay, we designed for this ratio, the wide ratio.’ Why not use the desktop website?

Knoth & Renner, sternberg-press.com on iPad, 2020
Knoth & Renner, sternberg-press.com on iPad, 2020

KR Our idea is that when you’re using a huge screen, let's say 30 inches, the screen will be about one meter away from you; when you are using a small laptop, you will sit really close to it. That’s why there’s this scaling of the type, so that it always appears the same.

  • { SCREENSHARES TO SHOW A PHOTO }

This is a really funny photo I received last week from a client from one of our recent projects that isn’t yet published. He’s using a super huge screen, like 30 inches. He said ‘The type is so big on my screen!’ and to showcase this, he held his glass of water in front of the screen to have a relation to the scaling. I think it’s a great picture. I’m thinking of printing it out and putting it next to my desk. This is a really funny idea of how to translate a relation, which is always very flexible on a screen, into a piece of communication. It’s a glass of water.

Knoth & Renner, <em>Arch+</em>, in development, 2020
Knoth & Renner, Arch+, in development, 2020

SS That's an amusing way to try to communicate a sense of scale. Initially we thought they were saying, ‘Cheers!’ 🍻

There is the idea of profession-wide ‘best practice’, but this is almost like a personal interpretation, of your own best practice. Do you ever have moments where you debate decisions like these aside from type size? Where you are constructing your own ideas of best practice for yourselves. Or do you feel that’s a form of tyranny in and of itself? And also, what do you think of best practice more generally?

CK I think ‘best practice’ is a phrase that already says ‘This is really good what we are doing here.’ So you do something and call it best practice, and then it’s a kind of trick that makes other people think it is best practice. I think a lot of the things we do would not be considered best practice by the mainstream web design world. But when we talk with our students, of course, we tell them what our ‘best practice’ is and what we like to do. But it’s not something that we advertise and we would never self-advertise with this term.

KR Every project starts with its own question, with its own language. It always depends on the people behind, and the ideas, the language and the content. We don’t have a manifesto, we don’t have rules. We work in a very fluid state where things change rapidly. Every day there is something new, exciting or dangerous out there and we have to deal with it, so the ‘best practice’ is to change your practice every day.

Knoth & Renner, k-komma.de, <em>A Website is Never Ready V1</em>, 2018
Knoth & Renner, k-komma.de, A Website is Never Ready V1, 2018
Knoth & Renner, k-komma.de, <em>A Website is Never Ready V7</em>, 2018
Knoth & Renner, k-komma.de, A Website is Never Ready V7, 2018

SS Expanding on this idea of our current reality being in constant flux; you have developed A Website is Never Ready. This website was updated on a monthly basis to a version that could be considered as the ‘best practice’ for that very short period of time. Are websites doomed to become anachronic from their inception? Is the fact that websites are ephemeral in their very nature, shaping your way of designing?

CK We can talk a bit about the reasons and ideas behind A Website is Never Ready. Taking the ephemeral aspect of websites, we thought ‘What if we could do an exhibition space that changes with every person that comes into the space?’ Maybe a website could work in this way. We keep something of the structure, something on the back-end and depending on the person that comes in we change the layout.

We did a lot of websites that took years until we brought them online. There’s a website we worked on for nine years. I guess for a graphic designer it’s not so interesting to do this ‘maintenance’ work. Maintenance takes a lot of energy but then there’s not much joy involved, so we tried with this project to re-invent the idea of maintaining a website while redoing it all the time. We also sometimes live code on it and you might visit the website and it will be broken and that’s okay. That’s part of re-doing it.

KR For me, one of the most important approaches, when you are a designer for websites, is that you have to let things go. I’m sharing the studio with all these great graphic designers who are doing books and they have a big shelf behind them with all their books, but in our practice, all the things that we have done will become defunct and all we will keep with us is a video or a screen recording. People are trying to develop things that will store the environment, that will store how it felt and all these things, but for me it’s not a problem to let things disappear.

SS There’s always that temptation to try to make everything timeless or last forever, but as you say, it’s almost like you can spend all your time doing so.

KR The funny thing is that the first website from Tim Berners Lee is 30 years old now and it’s still online! That’s a great thing that the first HTML website is still visible. When talking with students about this, I always show them that if you use pure HTML and don’t use any kind of cool plugins or other sources, there's an actual chance the website will last ‘forever’.

SS In the times of the COVID19 pandemic, we’ve become more distant from each other; we have found ourselves in our own virtual realities, even if they’re a lot more mundane than we thought they might be, via Zoom, Teams, etc. and of course, we’re now talking on Jitsi. There’s an interesting opportunity here to shape the virtual spaces you live in and occupy. We were wondering if there are other choices you make in regards to platform choices when operating as a studio, or interacting with your students?

KR I mean, for students, we hosted a little experiment where every week we would meet in a different environment. We met in a Spatial Chat, we met in Mozilla Hubs, we met in our own customised Jitsi.

Together online now, it normally feels like we’re sitting in boxes on the screen with a grey background. When it comes to a bigger group, you have to mute yourself, you have to follow specific rules that only exist online. So we thought, ‘Okay, what does it do to the power structures of a larger group? What is the interface, how does the interface relate to this?’

Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020
Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020
Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020
Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020
Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020
Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020
Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020
Knoth & Renner, screenshots from Commune, custom Jitsi by Klasse Digitale Grafik, 2020

We developed and designed our very own Jitsi and asked: How does it look when everyone is in a circle? What if the circle is moving? How does it look when we have this situation with one person in the middle of the room and everyone else sitting around? How does it look when we are arranged in a pyramid? What if one person is talking at the top and all the others are on the base layer? What does it look like if there’s a conversation between three people on a stage and all the others are in the auditorium? Or what if every person’s video is blurred and just the person who is talking isn’t blurred?

We created these experimental Jitsi spaces for our lectures.

CK You talked at the beginning about this kind of hacking of websites; we encourage students to test visual changes, to make it work the way they want and let them control whatever they like. It comes from the same idea that you can experience things that you wouldn’t normally think of because you program it and there’s a high chance that it is not going to look how you expect.

SS Relating to the experience you just showed concerning chat or video calls, do you have any thoughts about ideas of digital intimacy, proximity or touch? Do you bring any elements of these into your web or interactions work?

KR I mean, one of the nicer experiences that we had was a Spatial Chat. You could move your video next to a person that is on your screen and then you could hear them. Only if you were very close could you hear each other. Perhaps there’s no need to make it three dimensional. Maybe it’s enough when there are two axes?

In the middle of the 2000s, there were loads of websites where you could move everything, you could drag the image, the navigation and the headline etc. For some reason, it became seen as somewhat boring. Perhaps it’s now time to take control of your screen again where you arrange communication with another person to be how you want. This could be an approach for the very near future to designing things!

CK When you mentioned intimacy, I guess the most intimate thing somehow is that I create a website on my screen and in a way, I know that somebody else is looking into the same thing on his or her own machine within their own environment. Even if I’m sleeping, I know there are people visiting our website at that moment. That’s something that comes into my mind when I think about intimacy.

KR I have a good example of what you mean Christoph.

Knoth & Renner, k-komma.de, <em>A Website is Never Ready V8</em>, 2018
Knoth & Renner, k-komma.de, A Website is Never Ready V8, 2018

It’s one of the series of A Website is Never Ready. There was this idea that every visitor is leaving their own path on the website. So, if there are two visitors, you can see this drawing of another person that is somehow visiting the website at the same time. And there were some nice moments when people are touching each other just by moving this cursor.

SS On the basis of that same idea of the new virtual world, or the new normal, and these ideas of immediacy. We’re sure you have thought about this because in many ways you’re contributing with your own visions of it through your work. There’s suddenly a spread of all these different ideas of what art spaces can be and where exhibitions can be located online. A recent example of your work which touches on this might be the site for the Manchester International Festival, the Virtual Factory (2020–).

KR Christoph, maybe you can talk a bit more about the Virtual Factory idea and what’s going to happen there in the future.

CK I don’t think they have released the upcoming names, but there are a couple more artists coming and our idea is that we will use the structure of the website that we did right now — which uses those forms and textures — and we will find new textures for every new artist that’s coming up. In a similar way of being ‘never ready’, it will have a custom made website for the art piece that is upcoming. But most of the art pieces don’t exist yet and have only just been commissioned. So we can’t really talk about it!

Knoth & Renner, virtual-factory.co.uk, 2020
Knoth & Renner, virtual-factory.co.uk, 2020

KR The term ‘handcrafted’ it’s important here since there is no larger idea of a template behind it. The really interesting thing when it comes to digital exhibitions is that you don’t have to accept the ‘white cube’ because you can change them in reaction to the art piece or to the content as you want.

The idea of the blank walls that have emerged from physical exhibition spaces on-screen; I think this is definitely not the right direction to go. In the case of the Virtual Factory there will be a big building designed by Rem Koolhaas. Beyond understanding the building, what was interesting for us were the rendering textures that these architects used to display it. These looked kind of fascinating and they established a digital relationship with the building! We used these textures as a space for the current artwork of LaTurbo Avedon.

This idea of handcrafting the space with your own coding skills is a very interesting approach since institutions or galleries can build spaces for a specific piece.

CK I guess the conception that you should recreate a space in 3D to bring it online feels a bit too easy and not so interesting.

KR For the Virtual Factory, do you know how many visitors entered the game already? I got the number, I think it was 10 million people!

CK 10 million, imagine, for an art piece!

KR Of course, we should take into consideration that most of the people who went to this exhibition played it as a game. Perhaps they didn’t even know it was an art piece! This is potentially nicer since you can reach an audience that you might never have reached otherwise.

Knoth & Renner interaction infrastructure website design online exhibitions