&

ūüźü

Everything is a web page

Let’s start with the internet

When was the internet invented?

1969 or 1989?

1969!

The ‚ÄúHarvard Computers‚ÄĚ in the late 1800s.
The ‚ÄúHarvard Computers‚ÄĚ in¬†the late 1800s.

Before this time, the term computer usually referred to¬†a¬†person, not a¬†machine‚ÄĒsomeone who¬†would compute (solve) math¬†problems.

Univac, the first commercial computer in the US.
Univac, the first commercial computer in the US.

By the 1960s, computers were room-sized, institutional electronic machines‚ÄĒused by governments (the military), businesses, and universities. They were used to¬†solve complex math problems and sort data, but were still very¬†slow and didn‚Äôt communicate with one¬†another.

Different network topologies.
Different network topologies.

A catalyst in¬†the formation of¬†the internet was the Cold¬†War. The threat of¬†nuclear conflict spurred the US¬†Defense Department to¬†consider decentralized and¬†distributed networks‚ÄĒto disseminate orders and information in¬†the event of¬†an attack (and¬†ultimately, for¬†retaliation).

It was necessary to have a strategic system that could withstand a first attack and then be able to return the favor in kind. The problem was that we didn’t have a survivable communications system, and so Soviet missiles aimed at US missiles would take out the entire telephone-communication system […] that was highly centralized. Well, then, let’s not make it centralized. Let’s spread it out so that we can have other paths to get around the damage.

Paul Baran

The original sketch of ARPANET.
The original sketch of ARPANET.

By 1969, computer nodes connected the Stanford Research Institute, UCLA, UCSB and the University of¬†Utah‚ÄĒdeveloped by the Defense Department‚Äôs Advanced Research Project Agency (ARPA).

The growth of ARPANET into the 1970s.
The growth of ARPANET into the 1970s.

Over the following decade, ARPANET would grow to include other cities in the US. It had its first expansion outside the States in 1973, with connections to the UK and Norway. Slowly, similar commercial and academic networks were developing alongside, each with their own communication protocols.

The core of TCP/IP is routing bundles of data called ‚Äúpackets.‚ÄĚ
The core of¬†TCP/IP is routing bundles of¬†data called ‚Äúpackets.‚ÄĚ

In 1974, Robert Kahn and Vinton Cerf (two ARPA scientists) developed the Transmission Control Protocol and the Internet Protocol (TCP/IP). By the 80s, it¬†became the standard network communication format‚ÄĒand still underpins the internet we all use today.


What about the web?

When was the web invented?

1969 or 1989?

1989!

Our guy Tim.
Our guy Tim.

Tim Berners-Lee, a British academic and scientist, invented the World Wide Web (WWW) with his team while working at CERN in 1989. It was developed on top of TCP/IP as a standard way to connect documents, livingon different computers in different places, via hypertext links.

The cover of the original proposal, visualizing the idea of ‚Äúhypertext.‚ÄĚ
The cover of¬†the original proposal, visualizing the idea of¬†‚Äúhypertext.‚ÄĚ

Their proposal had four components:

How it looked for Tim, back then.
How it looked for Tim, back then.
How it looks for us, now.
How it looks for us, now.

By 1991, the first web page was up and running and the web began to take off.

Mosaic was one of the first widely-available browsers. It introduced support for images.
Mosaic was one of the first widely-available browsers. It introduced support for images.
Netscape, the first browser that I ever used.
Netscape, the first browser that I ever used.

The 1990s then saw more-affordable home computers bring internet access to¬†many more people‚ÄĒescaping the government (military), business, and university settings it¬†had been siloed in¬†before. Early web browsers like Mosaic and Netscape (1993) helped evolve what was possible online‚ÄĒadding color, images, and interactivity.

And the web exploded from there.

1994: Before search engines, there were web directories like Yahoo.
1994: Before search engines, there were web directories like Yahoo.
1995: GeoCities brought web design to the masses, for better or for worse.
1995: GeoCities brought web design to the masses, for better or for worse.
1995: They used to sell books, if you can believe it.
1995: They used to sell books, if you can believe it.
1998: We eventually got search engines.
1998: We eventually got search engines.
2004: And then social networks.
2004: And then social networks.

The dream behind the Web is of a common information space in which we communicate by sharing information. Its universality is essential: the fact that a hypertext link can point to anything, be it personal, local or global, be it draft or highly polished.

Tim Berners-Lee


So what are web pages?

Obviously, this is a web page. Think about how many other web pages you have visited in the past day. Dozens, even hundreds?

Ultimately, a¬†web page is a¬†just text file on a¬†computer. It¬†is written in¬†a¬†special format, the aforementioned HTML, which structures the content of¬†the document and¬†also links it¬†to¬†other resources‚ÄĒother web pages, images, computers, really almost anything. Think of¬†the¬†web as type with instructions.

These all started as simple, hand-typed documents. Then¬†as the power of¬†computers grew, and the languages of¬†the web evolved alongside‚ÄĒweb pages expanded almost inconceivably in¬†complexity and capabilities. Cascading Style Sheets (CSS) gave them marvelous abilities to¬†be customized and designed. JavaScript (‚ÄČJS) gave them remarkable, newfound interactivity and function. Websites (collections of¬†web pages) today are built on top of¬†an incredible stack of¬†technology‚ÄĒnetworks, servers, databases, libraries, browsers, devices.

But it all starts with text, and thus, with type.

An ever-present visual medium

If you‚Äôre looking at a¬†glowing, 16:9 rectangle somewhere (and it¬†isn‚Äôt just¬†playing video), nowadays it¬†is very likely a¬†web page‚ÄĒbuilt with the¬†exact same HTML, CSS, and¬†JS‚ÄĒweb technologies‚ÄĒthat are behind this page, and every¬†other.

In its openness, connectedness, and ubiquity, the web has come to dominate over other forms of technology. Its advantages in compatibility, cost, scale, and inertia are continuing to snowball, and the advance of these web technologies shows no sign of slowing down. It is the water that we are swimming in, both as humans and as designers.

And in that latter role, we’ll need to learn how to swim. Our path into design then is to understand how these things are made and how they function. Their technological construction both empowers and constrains our work. You can’t separate the design from this foundation; the medium is inextricable from the end product.

Most people make the mistake of¬†thinking design is¬†what it¬†looks like. People think it‚Äôs this veneer‚ÄĒthat the designers are handed this box and told, ‚ÄúMake it¬†look good!‚ÄĚ That‚Äôs not what we think design is. It‚Äôs not just what it¬†looks like and feels like. Design is how it¬†works.

Steve Jobs

These days, apps are often web pages too

We’ll be using a couple of these.
We’ll be using a couple of these.

All these desktop ‚Äúapps‚ÄĚ are built in¬†Electron‚ÄĒand so are¬†really just web pages inside a¬†slim, platform-native wrapper. (Essentially, a¬†single-website browser.)

The core application only has to be written once, instead of rewritten for each platform. And why design it all again? (Designers are expensive!) Why hire Windows and Mac devs when you can just hire web devs? …then why hire iOS or Android devs, either? (Developers are even more expensive!) So many companies take approach, for cross-platform development.

These mobile ‚Äúapps‚ÄĚ are all built with React Native, following a¬†similar paradigm. The app is¬†really just a¬†web view (browser), and every screen within is a¬†web page.

It’s increasingly just JS, behind the scenes

JavaScript began as a client-side (on your computer), front-end language running in the browser. But now with runtime environments like Node.js, Deno, and Bun, JS has moved to server-side (on the remote computer) functionality previously dominated by scripting languages like ASP, Perl, PHP, and Ruby.

This means that JavaScript doesn‚Äôt just run in a¬†webpage you‚Äôre looking at‚ÄĒit often now actually builds the page itself. It¬†might even send you the packets. More and more, JS isn‚Äôt a¬†part¬†of the stack so much as it¬†really is¬†the stack.

This ‚ÄúJavaScript everywhere‚ÄĚ movement means that the tendrils of¬†the web can encompass many non-web-page uses. Maybe it¬†is in¬†an app, maybe a¬†headless data API, maybe a¬†hardware integration, maybe it¬†is even something entirely offline‚ÄĒbut it¬†is still web technologies, most of¬†the way¬†down.

Even things that aren’t web pages are web-page-like

In the coming weeks we are going to¬†dive properly into HTML, CSS, and JS‚ÄĒthe fabric of¬†web pages.

Let‚Äôs try to¬†also think of¬†these‚ÄĒmore conceptually and¬†semantically‚ÄĒas content, form, and function. (Or¬†in¬†another way, skeleton, skin, and muscles.) This¬†ordering or layering of¬†responsibilities is often called progressive enhancement. The semantic content (HTML) forms the foundation on which you can layer the form (CSS) and functionality (JS).

With this understanding, the same model exists in nearly all software. (For example, Resources, Views, and States in Mac/iOS development, though the lines are being blurred.) So we can say that software that hasn’t yet been eaten by web technologies is often still web-like. And the web is likely coming for them, eventually.


Our lens

Learning good, effective design in¬†any medium necessitates knowing it¬†thoroughly and completely, and¬†we‚Äôre going strive to¬†do that by truly understanding the¬†web. It¬†is fundamentally a¬†medium of¬†text, and thus a¬†medium of¬†typography‚ÄĒand this semester we will use¬†that as our¬†lens.

In your careers, the software, languages, and platforms might be different, and to¬†some extent, are ever-changing‚ÄĒbut the design ideas and considerations are¬†analogous and¬†universal. To¬†understand design for the¬†web is to¬†understand interactive design. And¬†in¬†our lives today, to¬†understand interactive design is to¬†understand all¬†design.

All I know is that if you are a fish, it is hard to describe water, much less to ask if water is necessary, ethical, and structured the way it ought to be.

Abigail Disney


A hat-tip to friend-of-the-program Tuan on this lecture.