Resource conservation

Create a capsule version of the 2018 National Climate Assessment, designed and built for high usability on the kinds of slow internet connections that are common across this country and around the world.

The current National Climate Assessment website is thorough and, for a government site, surprisingly innovative, but it is a heavyweight site, difficult to run on a slow connection or to use on a small screen.

We will be building a more concise version of the site, meant for approachability. The core content will be the “key messages” from each of the chapters. (This is an extrinsic decision, taken so that the project fits within our course schedule.) Design this site for usability, readability and credibility, and—this is the unusual factor—for resource efficiency and performance. We are designing a site that must serve users on slow connections.

These website performance issues, though of social and ethical consequence, are only a part of the much broader questions about what designers must do in the face of a warming planet. The thought processes in this project—designing skillfully and imaginatively, and managing limited bandwidth resources—speak to those larger questions.

Performance is an ethical issue

Web performance, especially complicated JavaScript, bloated CSS frameworks, and large image and font files, is an ethical issue and a business problem. (If a low-bandwidth subway passenger gives up on loading your site, you’ve just lost a customer.)

Think about trying to use a website on a slow connection. You might have run into this yourself, browsing on a smartphone on the Metro, when the connection fades. You could have been in a small town—as of 2018, 42% of U.S. rural residents did not have broadband access, per Pew Internet, nor did a majority of low-income and Hispanic residents. I have friends who rely on lethargic satellite Internet connections because they live too far away from a central office for broadband, or because they work in isolated areas.

In a global sense, we’ve paid little heed to the environmental costs of computing. Data centers “eat up more than 2 percent of the world’s electricity and emit roughly as much CO2 as the airline industry,” Fred Pearce notes at Yale e360.

We can design responses to this challenge

Much of this follows because designers and developers are thoughtless or have a poor command of their tools, throwing big JavaScript/CSS frameworks at problems rather than solving them in a skillful way. Even being more careful about image handling might might drop image file sizes by 95%.

Over at the Poynter Institute, Melody Kramer notes that text-only news sites are making a comeback, leading with the need for low-page weight communications during crises and disasters. CNN and NPR publicized the text versions of their websites as a way for residents in the path of Hurricane Irma (lite.cnn.io and thin.npr.org).

Constraints make for better work

One of the difficulties with design for digital products is that the constraints aren’t as evident in the way that they might be for a print project. Color doesn’t cost money here, and we have an infinite page count.

We’re going to embrace constraints in this project. Constraints make for robust, imaginative, and surprising designs. (See Mitch Goldstein’s design challenge that relies on a set of obstructions.) On the web, fascinating work happens when we acknowledge that resources matter; Low-tech Magazine built a version of their site that runs on a solar-powered web server.

Specifications

Chapters 2–27 all have “key findings,” presented as a JavaScript-driven carousel. (This is a questionable design decision—analytics show that only single-digit percentages of users interact with carousels.) We’ll be re-presenting those key findings in a more readable format.

You should create a website that could contain all of the key findings, but you only need to show us key findings from three of the chapters. Create, also, a home page and any section/topic/”landing” pages that you might need. This should be a multi-page site.

Deliver the site as HTML/CSS. I suggest that you work from the web1-basic (ZIP) starter kit.

We will test the site using the bandwidth throttling function in Firefox’s developer tools, dialing the speed down to “Good 2G,” a simulation of a limited-speed cell network. (I’ve gotten speeds like that within D.C., never mind standing on a mountainside in rural Upstate New York.)

Each page, with images and any other resources like JavaScript and JS libraries, must use no more than 250 KB of data. You may also download up to 150 KB of font files (looking at WOFF2 files) and 30 KB of CSS, shared by every page on the site. That’s quite a lot of HTML, but you will have to be precise and creative with images, and your typography will need to be both intentional and economical.

As usual, any material that you use—including images, text, and code—must be freely available, in the public domain, licensed for you to use, or of your own creation. Attribute all work in the readme.md file.

In closing

For any digital product, perhaps the most important constraint is the development/engineering team’s ability to build the design. You are the development team, here. New designer/developers have a tendency to envision design concepts that they can’t build. One of the key issues for this project will be letting your technical expertise guide your graphical and typographical ideas.

This project follows from a longstanding interest in website performance—I used to work on publishing systems for environmental journalists who worked in places with limited internet connections. A tweet by Kristian Bjørnard brought those issues back into the foreground.