lightness in time

part one
A solar-powered website

a screenshot of the solar low-tech magazine website homepage, showing a grid of articles with ditthered image thumbnails. the backround is a pale blue in the top half, and pale yellow in the bottom half

LOW←TECH MAGAZINE ¹

a dithered image of solar panels setup on an narrow apartment balcony

a dithered image of a laptop, microcomputer server, and battery on wooden shelves along with a plant, typewriter, and stacks of books

a screenshot of the homepage of the first website on the WorldWideWeb, showing several lines of text in black and blue underlined links

Looking at past technology for inspiration: the world wide web was developed in 1989, and the first website was made public on 23 August 1991. It described hypertext, the underlying mechanism for connecting information on the internet. The website contained no specific styling rules (CSS was not supported) or images and still works as a functioning website today!²

a screenshot showing a list of articles in blue, arranged in a table organized by date, title, and theme

a screenshot of the fonts settings in chrome browser, showing sliders for font size, minimum font size, along with dropdown menus to select standard font, serif font, and san-serif font

Illustration of the Mareorama at the 1900 Paris Exposition, showing a steamboat

Illustration of the Mareorama at the 1900 Paris Exposition, dithered with a green tint

An image of a mareorama from the article “Life Before Television”.
[Left] The original image (277KB)
[Right] The image dithered with the article’s category color (79KB)

With an image-sprite,³ a single image with all the icons are loaded, and the styling just crops into a certain part of this image to show a specific icon. This prevents having to make a server request for every single icon, instead having just one call for an image that can be cached in the browser.

an open 2006 ThinkPad laptop upside down, dithered with a red tint

This is a solar-powered website, which means it sometimes goes offline.

It’s possible to build a setup that prevents the site from going offline – but this also means more infrastructure, and more resources and energy that goes into building that infrastructure. This is what we call embodied energy.⁴

Our goal was never 100% uptime: it was to change our visitor’s relationship to the internet.

how can we be more intentional about our digital consumption?

⁵

Back when the first website launched, browsers could only render text. Internet access was delivered through dial-up modems and local area networks (LANs) and the maximum speed for modems was 56KB/s. But by 2009, cable internet speeds offered an average 8MB/s, and today, the average internet speed in the states is 227MB/s for desktop, and 111 MB/s for mobile.⁶

The technology delivering and displaying websites has become dramatically more efficient.

a timeseries graph of the average size of webpages, from November 15 2010 to December 1 2023. A light blue line shows a steady increase for Desktop, matched by a purple line underneath for Mobile.

in the meantime, websites have been taking advantage of these connection speeds. currently, the average desktop site weighs 2498 KB and 2216 KB on mobile–an increase of 434% and 1430% since 2010.

more efficient
≠
more sustainable

making something more efficient does not necessarily mean more sustainable. usage tends to increase as a result of the efficiency (called Jevons paradox in economics) and causes a “rebound effect”⁷.

less use
=
more sustainable

less data: to minimize website size and server-load
less time online: to build a site that goes offline
more information: to reveal the system infrastructure

part two
time-sensitive websites

1. websites with active and inactive states
2. websites designed to change over time
3. websites that are archives of a single moment

websites with downtime

websites with inactive states can direct visits to happen at certain times, offering opportunities for a more concentrated collective experience

an image of a clear glass sphere containing a gold pyramid, clamped by a metal ring

an image of ocean waters projected on the same wall

A website as peformance,
a time-based medium

A website can have opening and closing hours, or durational expression. this means that when and how the audience visits the site becomes an integral part of how the website works.

When online work fails to to be “on,” it can have a similar effect to breaking the fourth wall–the boundary between website and audience disappears.

Downtime, or deliberately “breaking” the site can emphasize a certain point of view or communicate something unexpected.

a screenshot of a website with a muted pale pink backround showing spots of blurry text

Laurel Schwulst’s are.na collection Performance is Change over Time outlines how durational websites can follow various traces – the trace of the “Trace Passing of Time,” “Trace of the Visitor,” and “Trace of the Making.”

websites that change over time

websites might vary across multiple visits,
or evolve over the duration of a single visit

If websites with deliberate downtime embody lightness through a limitation of time,
websites that change over time might embody lightness through a specificity of time

screenshot of the Columbia GSAPP webiste, showing a blue gradient behind a carousel of boxes containing images and text and neon green arrows.

screenshot of the Tang Museum website hompeage, with a large white content box on top of a thick patterned border of green and black. a large image in the box features an abstract work in red and yellow, with the text “Explore the Collection”

a screenshot of the website seasons in pentameter. Against a black background, we see the text “Butterbur sprouts bud” in white using a thin, italic script typeface. At the top, the text says January 20 – 24 ... four days left.

a screenshot of a website preview on the slack messaging platform, showing the url, title, and image with white all-caps text SWALLOWS ARRIVE FROM THE SOUTH against a black background.

a grid of 72 rectangles with text on a black background

websites that archive time

Sometimes, websites simply preserve
a single point of time

a screenshot of a website showing a single, bright green leaf, with flowing text “wind curls in a leaf’s palm then unwinds”

part three
Harnessing the environment

A clear cube against a dark bacgkround, showing droplets of condensation on its walls

“A physical process as basic as water condensation allows Haacke to redefine not only the work of art as a living system, but, most significantly, the role of the viewer or user of art. While the patterns of water trails within the cube have to do with the conditions of their immediate surroundings, the human presence is also part of this environment.”

How can a website be a living system? How might it visually dialogue with the presence of human beings?

a photograph from the interior of a vent, showing a layer of thick layer of dust and debri, centered on a large tuft of dust, cropped into a circle

multi-colored threads randomly intermingling against a white backround, cropped into a circle

“Dust consists of material from both inside and outside, from Earth and the cosmos, from places very high and very low–and at the Museum, it’s literally an intermingling of different people from around the world.”

What might be the dust of a website? How can we trace the residues of stories that are already here? How can these reveal inherent relationships between people, infrastructures and systems?

photograph of a empty white wall taken from the side, showing many thumbtacks

“light” methodologies trace life in existing conditions

a scan of the cover of the book A Handbook for Reading the Room, with a muted green cover against a black background

a spread from the handbook, showing the page for the letter Y. There is a black and white image of a card on the left, and a small paragraph of text on the right.

“Listen to the sound of the earth turning”

listening and reading as strategies for lightness

Even with digital work, we listen to detect any form of input, and we read data sent from elsewhere.

these are usually handled through APIs.

An API is a general term for any kind of communication between computer programs. An event listener is a web API helps us detect events like clicking, scrolling, dragging, that occur in the browser.

Another way we might use an API is to read data from an external source, usually exchanged in the json format.

Although websites are digital material, we can communicate with physical material by tapping into the fact that it is served up on a live network – a network that can connect to anything in the world.

			
{
  "weather": [
      {
          "id": 800,
          "main": "Clear",
          "description": "clear sky",
          "icon": "01n"
      }
  ],
  "main": {
      "temp": 19.72,
      "feels_like": 7.12,
      "temp_min": 17.62,
      "temp_max": 21.09,
      "pressure": 1018,
      "humidity": 57
  }
 }

An excerpt from the json output read from the open weather API.

A website may not be able to produce droplets of condensation or breed dust mites through direct contact, but we can always simulate this kind of input through an exchange of the root-level material: data.

part four
now is a coordinate

A photograph of two circular white clocks, touching side-by-side against a pale blue wall. The left clock’s hands point to 11:41:54, the other to 11:41:55

When working with time, it’s inevitable to consider a time zone (haven’t we all experienced this even more since the pandemic?) Time is different for every region.

But in a way, time is different for every person. Félix González-Torres’s piece Perfect Lovers pairs two clocks that are initially set to move together, side-by-side. Yet over the course of an exhibition, they may fall out of sync—and eventually, one would inevitably stop before the other.

Time is a singular entity with many faces

there is only one “Date” object in JavaScript. underlying, the date is stored in UTC⁸ – and it is the same, whether you are in New York, Berlin, or Taipei. It is simply displayed differently according to your local timezone, determined by your browser.

This is the output of our date object created in JavaScript: new Date() We will be working with this date object in our workshop.

This is the default output of the Date object. It includes: date, time, offset from UTC, and the name of the timezone.

Time is defined by place of access

“Now is a place, a co-ordinate; i am where ‘I’ am not, and iThink (type, write, and right-click) therefore I am. If space is a practiced place, then collective navigation produces the commons.”

Time is defined by the technology that displays it

a scan of a silver omega watch set to 8:08, with the second hand arched towards the 12 o'clock point.

zoomed in detail of the left image, showing the bent hand separated into cyan, magenta, and yellow layers

a photograph of a black casio watch placed on a crystal, lit with green and red light against a black background. it shows a faded :35 on its digital display

a screenrecording of an iOS app, fading through parts of the digits 13:29:53 through 13:29:57 set in white against a black background

any point in time is actually a durational slice of time, and it is a piece of technology that provides a shape to it

“Time is like that – both point AND duration. This is how it can bend and warp. A week, a second, a season: all are specific and discrete, but none are the same. The present can be cut to any number of lengths, from a single electric pulse of an electronic circuit to the display period of a digital timepiece.”

JavaScript Code	Description	Example output
`new Date()`	the current date and time	Sun Jan 21 2024 03:03:00 GMT-0500 (Eastern Standard Time)
`new Date(1705824180000)`	store a specific date and time in milliseconds(ms) since epoch⁹	Sun Jan 21 2024 03:03:00 GMT-0500 (Eastern Standard Time)
`new Date("Jan 21, 2024")`	store a specific date and time. because time is not specified, it will assume midnight in your local timezone.	Sun Jan 21 2024 00:00:00 GMT-0500 (Eastern Standard Time)
`new Date("Jan 21, 2024 13:00:59")`	store a specific date and time. unless a timezone is specified, it will assume you are specifying this in your local timezone.¹⁰	Sun Jan 21 2024 13:00:59 GMT-0500 (Eastern Standard Time)
`new Date("Jan 21, 2024 13:00:59-08:00")`	store a specific date and time with a specific timezone offset.¹¹ (here, 8h behind UTC, or 3 hours behind EST.)	Sun Jan 21 2024 16:00:59 GMT-0500 (Eastern Standard Time)
`new Date("Jan 21, 2024 13:00:59Z")`	store a specific date and time in UTC (specified by the `Z` suffix)	Sun Jan 21 2024 08:00:59 GMT-0500 (Eastern Standard Time)
`new Date("2024-01-21T13:00:59")` `new Date(2024,0,21,13,0,59,0)`	store a specific date and time in ISO format: `YYYY-MM-DDTHH:mm:ss.sssZ`¹². Note that when defining the date using numbers, not strings, the month is counted from a 0 index, meaning January is 0.	Sun Jan 21 2024 13:00:59 GMT-0500 (Eastern Standard Time)

JavaScript Code	Description	Possible range	example output
`let now = new Date("Jan 21, 2024 13:00:59")`
`.getDate()`	numerical date	1–31	21
`.getDay()`	day of the week	0–6 (sun–sat)	0
`.getFullYear()`	full year		2024
`.getMonth()`	numerical month	0–11	0
`.getHours()`	hour	0–23	13
`.getMinutes()`	minutes	0–59	0
`.getSeconds()`	seconds	0–59	0
`.getMilliseconds()`	milliseconds	0–999	0
`.getTime()`	milliseconds since epoch		1705860059000
`.getTimezoneOffset()`	difference from UTC in minutes¹³	-720 / +840 (UTC-12 to UTC+14)	300

Various ways to “slice” the date time object. More documentation is compiled at this reference guide.
13. the value is positive (+) if the local time zone is behind UTC, and negative (-) if the local time zone is ahead of UTC. Because of Daylight Savings Time, the timezone offset may vary based on the time of year.

const nyOffsetSummer = new Date("2022-02-01").getTimezoneOffset(); // 300
const nyOffsetWinter = new Date("2022-08-01").getTimezoneOffset(); // 240

approching something with “lightness” allows us to be more intimate with the material we work with.

we can better understand its underlying mechanics, and the surrounding forces that affect it

lightness in time

part one A solar-powered website

LOW←TECH MAGAZINE 1

how can we be more intentional about our digital consumption?

more efficient ≠ more sustainable

less use = more sustainable

part two time-sensitive websites