[~15 second musical intro jingle composed by Madalyn Merkey]

Laurel: Could you tell me a little about how you first got into making websites? And for example, what your first website was like?

Marie: Yeah. This was back when I was mocking things up in Photoshop and slicing it into tables. I forget which came first. I had two websites. One was for my fan-art I was making at the time, which was my introduction to Photoshop and these digital tools. There were all these websites that were a community around this thing we all loved. We would have our own website to showcase them. There was always this section on the website with banners. You would make your or 80 x 20 pixel banner if they liked your stuff. It was a nice community there. The other one was more for my paintings. I used to do oil paintings. I remember I had a hover effect where I had these three paint strokes, and every paint stroke lead to a different section of the site. The color of the paint stroke changed (on hover).

L: How did you update these sites, and about when was this?

M: This was early 2000s. It was all static HTML … hard-coding everything. I remember learning about SSI’s at some point, and I remember thinking, “This is so cool, I don’t need to duplicate the header on every page.”

L: Sorry, what’s SSI?

M: Sever-side includes. You could have a header portion and a footer portion and include those in the HTML page. And the server would piece it for you. Very very rudimentary CMS-like stuff.

L: That sounds very pro for back then. That leads me to wonder about the state of websites today. Do you think there is any benefit to hand-code with the omnipresence of platforms like SquareSpace or Cargo?

M: Yeah, it’s almost because of the fact that there are so many options out there, it’s ever more important to learn how to code. Both aesthetically and functionally every platform comes with its own set of assumptions for how things should look or how things should work. It’s exciting to try to come up with that from scratch. That raw material of code … building something from scratch feels a lot more satisfying rather than using something that’s pre-made. I also find with these templates … the example sites look beautiful and amazing, but then when you try to use that template for your own stuff, it doesn’t have the same punch and alignment that you’re looking for. Being able to really use that material as a medium for yourself is really nice. Something I try to talk about with my web design students, for example… instead of thinking of the website as a container for your other work, like a portfolio site… it’s really powerful when you can use code as a material for your work itself. Even if you’re a painter, what would a painting in a website look like? There are lots of people who have done web-like paintings and things like that. It’s interesting and important for people to dive into the basic code itself.

M: One thing I find students tripping up over is … you might understand how to write an HTML document or what a loop is, but how to bring those parts together… how things work both on your local computer versus also on a server, and the difference between paths… is really hard to teach in an online exercise form because it has to do with your local environment and your server environment. Also, a big part of it is launching and actually publishing your site somewhere. Things like finding hosting, registering a domain name… all those parts need to come together. That part can be challenging when you’re starting out.

L: Totally. That’s the biggest pain point, I think… servers. [laughs] I keep wondering if there will be a major server revolution. All the peer to peer people are trying to work on that, it would be nice.

L: We’ll switch gears to your Low Tech Magazine project. Could you tell me about the background of Low Tech Magazine and how you and your collaborator got involved?

M: Sure. I learned about Low Tech and Kris De Decker who basically runs the magazine through my friend Lauren (Traugott-Campbell). We were in school, it was the second of our three year program. She had learned about his work through social media… she had found his posts interesting. She shared those with me, and I thought it was awesome. He didn’t really have a designed (blog), it was a Typepad blog. And it still is a Typepad blog.

L: Could you say more about what he was posting about?

M: Sure, Low Tech Mag looks at old and obsolete technologies as a possible alternative to modern day technology. From the perspective of sustainability and energy use. It ranges from things like, “layer more inside the house … wear more clothes” and things like “solar power” and “bicycle energy”. What I like about it is he’s always looking at the larger picture. For example, just because things are digital doesn’t mean it’s more sustainable. There are servers that are powered by fossil fuels that serve up these digital documents. Anyway, with Lauren, we applied for a grant through the school with the Maharam Foundation. That helped us with the initial bulk of the project in the summer when we worked with Kris and also our other collaborator, Roel Roscam Abbing. He’s a researcher and artist working around networks. At that time, Kris was in Utrecht. At the university, they were doing a zero emissions campus project. He was working on this thing called a “Human Powered Plant.” It was basically an exercise machine that generated energy, and the whole premise was that this would be something that could power a dorm. It was rhetorical project, but because all the students were desperate for housing, there was all this buzz about people signing up for this dorm that would be powered by humans.

M: So that’s how the team came together. Every summer, we did a little more of a push. And Kathy who was from Belgium joined as an editor and has been helping with lots of the translations. Kris has a lot of different languages he supports; she’s been helping with that.

L: So was it in your proposal that you would make a solar-powered version of Low Tech Magazine?

M: Yeah, that was part of it. Lauren was focusing on the print… some kind of publishing platform… thinking about sustainability in the book world. And I was thinking about how to do that in the web world. It didn’t really come to fruition until the summer afterwards. I was working on the skin and the front end and some of the CMS the first summer. By the time it was the second summer, Roel had helped Kris in developing the hardware part of it with the solar panel connected to the mini (server), it’s an Olimex, an Arduino / Raspberry Pi kind of thing. It was something we were thinking about, but it didn’t become that thing until a little bit later.

L: Could you tell me more about some of your specific design choices int he website? For example, I know the images are dithered so that they load quickly, but what are some of the other things you decided to do?

M: The big thing we wanted to do was expose the workings of the browser… how much the browser already comes with a lot of styling, and really leverage that. We wanted to keep it minimal but also have it be a legible reading experience. Our inspiration was the original website, the world wide website (http://info.cern.ch). In the same way as Kris looks back to old technology, so we looked back. What was the first website? What did it look like? It had no images, it was very stark. Drawing from that, in using the default styling of the browser. But adding things like… Imagery is important to a lot of the articles. Using dithering to reduce the image size but also dithering is a really unique aesthetic that tells people that it’s compressed. It calls attention to the fact that these images take up space. We also have the battery meter in the background that’s a constant. That allows us to see the relationship between the traffic and the things that are consuming the website power and also what’s powering it… where that line lies. It’s nice to see constantly, but there’s been a lot of backlash. People don’t like it being always there… same with the dithering. But in terms of what we want that website to communicate, we think it’s an important element.

L: Yeah, that makes me wonder… the website says, “plan your visits so you know when to go when the website is still online.” It’s funny because I’ve always gone and it’s always been online. Maybe I just didn’t go when it was offline. Does it ever go offline?

M: Yeah, actually it’s been going offline the past couple weeks because there was a software upgrade in the server software. Somehow we use a lot more energy than we used to. It started to go down basically every night. Another big question is what happens when it goes down? Currently they just can’t see anything, it just says “there’s nothing that we’re serving up” basically. There’s been suggestions of having a backup, but that defeats the whole purpose. One thing Kris was trying to do is question the fact that we really need a 24/7, 100% uptime website. Especially for something like his content which isn’t urgent or timely. Maybe it’s ok that it’s only up 90% of our time. Our goal has been 90%. One thing we added in addition to the battery meter was the page size. We didn’t want it to be about this niche solar powered website thing. It’s more generally about digital sustainability and the energy use on the web. So we decided to have a constant page size indicator at the bottom of every page. We want to continue trying to push making the infrastructure more transparent. But even with the battery meter, we’ve been going back and forth. When it’s charging, when the sun is actually powering the solar panel, it’s actually really difficult to gauge the capacity of the battery. Roel and Chris would be able to be able to explain this better, but it would be more true to the setup if we had just displayed the voltage, for example. When it’s using battery, it’s pretty easy to see the percentage. But when it’s charging, batteries fluctuate. it’s not an easy, constant thing. Maybe exposing that would be good, but maybe it’s confusing to most people.

L: Speaking of behind the scenes, could we talk about the CMS? Or how someone actually update the website? And I understand it’s serving HTML… how does that work? I know you were recently in Barcelona working with Kris and Roel, what kind of updates did you make this time to the CMS?

M: The CMS is a static site generator, which made a lot of sense for us because we didn’t want the site to be constantly dynamically using a lot of energy to serve up every page. It was a bit of a struggle for me to start working with the CMS. It’s Pelican, which is written in Python which is great, but it’s pretty bare bones. And so a lot of things you would have to write plugins for. In terms of the workflow, Kris writes his articles in Markdown, which is also a nice way for him to have a local copy of his content instead of it being stored on something like Typepad. They’ve stopped updating it, so if Typepad goes down, he would basically have lost all his ten years of work. So now he has a local copy. Markdown is a nice format, it’s easy to transport if we did decide to switch CMSes at some point. One of the pushes we did this past time… I mentioned those languages. We’re working on all the different translations of the articles also available on the solar website. And slowly shutting down the other language sites that are all on different platforms which are on other platforms. Some of them are on Wordpress, some on different CMS’s.

L: They’re taking up energy.

M: Exactly.

L: So what’s next for the Low Tech Magazine project, or will you just continually be improving things every so often?

M: Yeah, I think it would be incremental bursts of efforts towards it. Something we’re really trying to figure out… the Typepad site, the old site, still lives. We haven’t pulled the plug on it. In a way, because of that, we have been able to be more experimental in the solar-powered website. We don’t really have a development environment for it, which we could have. We’ve been doing a lot of trial and error on the solar-powered site. But it is a redundancy to contend with. Maybe we should have a grid-powered website on something like Wordpress that’s very accessible that anyone can set up. But still adhere to our principles of trying to minimize page sizes, trying to make it accessible, and avoid waste in that kind of context, but maybe with different content. So it’s not an exact duplicate, but it’s showcasing, in a different way, the principles of sustainability.

L: Yeah, that was going to be my next question. I’m sure a lot of people are excited about this project and want to have their own solar-powered website. [laughs] What’s the accessible version of this?

M: Yeah, that’s a really good question and something we’re trying to figure out. And with solar, it works best in Barcelona. What we what to communicate is that it’s always about the context and the physical environment you’re in. CMSes are tricky in that you have to make some assumptions about the way people will be updating it. Figuring out the right balance about what remains open versus what is helpful to build in is a big question.

L: Going back to HTML now. Do you have a favorite HTML element?

M: This is a tricky one. It’s like choosing a favorite letter of the alphabet.

L: You could also choose top 3 if it were easier.

M: I like the <a> tag, the link. It feels so fundamental to the way the web works. A lot is packed into the one <a> tag. The world wide web is based off this tag. When I introduce the anchor tag in my classes, it opens up… it helps you talk about links, with what I mentioned earlier with relative and absolute links… that attribute is really important. A lot of elements stand alone and can be without attributes. It feels really unique in that sense… to be able to understand the whole infrastructure of the web and how the parts connect with the <a> tag.

L: If you could describe your energy in just one word, what word would that be?

M: This is also a hard one. The first word that comes to mind is “flow”. You think about the flow of HTML and how browsers render the flow of your elements. A lot of web design is about going with or breaking that flow. But also in terms of energy, I love websites where I feel this flow of the energy from the person and the website to the person who is experiencing the website. That’s what I hope my websites can do. Is transfer this energy to the person who is experiencing the website, somehow. [laughs]

L: That’s beautiful.

L: Last question… hopefully not too tricky. Is there any website you’d like to bring back from the dead, if you could?

M: Something that has been making the rounds in the RISD graphic design community is this website for embroidery instructions. I don’t know if you know…?

L: Yes.

M: It’s red and blue. Someone had forgotten to close their tags. And they were using em’s. Every header was 120% of the previous header or something, and it keeps going on and on and on until you have these giant letters that fill up the entire screen. It’s a beautiful experience of scrolling through the website. It’s also an educational tool about closing tags. [laughs] That was a good one.

L: Yeah, great choice. I was recently looking at that site. I know they actually fixed it. But then this blogger who writes about art history, greg.org, restored it, so it lives on their website. I’ll make sure to link that one.

M: I love these designs that are beautiful but they also teach you about how it works. And going back to the tools, and exposing the tools… the way something works is also part of the content of the something.

[~2 minute musical outro composed by Madalyn Merkey]

L: Hi, so you just heard from Marie Otsuka, whose website is www.motsuka.com. Marie is a designer working around tools and methods for making. She designed and developed the solar powered version of the Low Tech Magazine website, which is at www.solar.lowtechmagazine.com. And the website Marie wanted to bring back from the dead is located at www.greg.org/embroidery.