Chapter 3: The Website

Celý článek

The very first website was about the web. That kind of thing is not all that unusual. The first email sent to another person was about email As technology progresses, we may have lost a bit of theatrics. The first telegraph, for instance, read “WHAT HATH GOD WROUGHT.” However, in most cases, telecommunication firsts follow this meta template.

Anyway, the first website was instructive for a reason. If you were a brand new web user, it is the first thing you would see. If that page didn’t manage to convince you the web was worth sinking a bit of time into, then that was the end of the story. You’d go and check out Gopher instead. So, as a starting point for new web users, the first website was critical.

The URL was info.cern.ch. Its existence on the CERN server should be of no surprise. The first website was created by the web’s inventor, Tim Berners-Lee, while he was still working there.

It was a simple page. A list of headers and links — to download web browser code, find out more info about the web, and get all of the technical details — was divided only by short descriptions o f each section. One link brought you to a list of websites. Berners-Lee collected a list of links that were sent to him, or plucked them from mailing lists whenever he found them. Every time he found a link he added it to the CERN website, loosely organized by category. It was a short list. In July of 1993, there were still only about 130 websites in the world.

(A few years back, some enterprising folks took it upon themselves to re-create the first website at CERN. So you can go and browse it now, just as it was then.)

As far as websites go, it was noting spectacular. The language was plain enough, though a bit technical. The instructions were clear, as long as you had some background in programming or computers. The web before the web was difficult to explain. The primary goal of the website was to prompt a bit of exploration from those who visited it. By that measure, it was successful.

But Berners-Lee never meant for the CERN website to be the most important page on the web. It was just there to serve as an example for others to recreate in their own image.

Tim Berners-Lee also created the first browser. It gave users the ability to both read — and crucially to publish — websites. In his conception, each consumer of the web would have their own personal homepage. The homepage could be anything. For most people, he thought, it would likely be a private place to store personal bookmarks or jot down notes. Others might chose to publish their site for the public, using it as an opportunity to introduce themselves, or explore some passion (similar to what services like Geocities would offer later). Berners-Lee imagined that when you opened your browser, any browser, your own homepage would be the first thing that you saw.

By the time other browsers hit the market, the publishing capabilities faded away. People were left to simply surf, and not to author, the web. For the earliest of web users, the CERN website remained a popular destination. With usage still growing, it was the best place to find a concise list of websites. But if the web was going to succeed — truly succeed — it was going to have to be more than links. The web was going to need to find its utility.

Fortunately Berners-Lee had created the URL. Anyone could create a website. Heck, he’d even post a link to it.

“Louise saw the web as a godsend,” Berners-Lee wrote in his personal retelling of the web’s history. The Louise in question is Louise Addis, librarian at SLAC for over 40 years before she retired in the mid-90s. Along with Paul Kunz, Tony Johnson, and several others, she helped create the first web server in the United States and one of the most influential websites of the early web. She would later put it a bit differently. “The Web was a revolution!” That may be true, but it wouldn’t have been a revolution if not for what she helped create.

As we found in the first chapter, Berners-Lee’s curiosity led him on a path to set information free. Louise Addis was also curious. Her curiosity led her to try to connect people to that information. She studied International Relations at Stanford University only to bounce around at a few jobs and land herself back at her alma mater working for a secret research lab known simply as Project M in 1960. Though she had no experience in the field, she worked there as a librarian, eventually moving up to head librarian. After a couple of years, the lab would go public and become formally known as the Stanford Linear Accelerator Center, or SLAC.

SLAC’s primary mission was to advance the research of American scientists in the wake of World War II. It houses a two-mile long linear accelerator, the longest in the world. SLAC recruits scientists across a broad set of fields, but its primary focus is particle physics. It has produced a number of Nobel prizes and has shared groundbreaking new discoveries across the world.

Research is at the center of the work done at SLAC. While she was there, Addis was relentless in her quest to connect her peers with research. When she learned that there wasn’t a good system for keeping track of the multitude of authors attributed to particle physics papers (some had over 1,000 authors on a single paper), she picked up a bit of programming with no formal training. “If I needed to know something, I asked someone to show me how to do a particular task. Then I went back to the Library and tried it on my own.”

A couple of years after she discovered the web, Addis would start the first unofficial tech support group for web newcomers known as the WWW Wizards. The Wizards worked — mostly in their spare time — to help new web users come online. They were a profoundly important resource for the early web. Addis continually made it her mission to help people find the information they needed.

She used her ad-hoc programming experience in the late 1960’s to create the SPIRES-HEP database, a digital library with hundreds of thousands of bibliographic records for particle physics papers. It is still in use today, though it’s newest iteration is called INSPIRE-HEP. The SPIRES-HEP database was a foundational resource. If you were a particle physics researcher anywhere in the world, you would be accessing it frequently. It ran on an IBM mainframe that looked like this:

The mainframe used a very specific programming language also developed by IBM, which has since gone into disuse. Locked inside was a very well organized bibliography of research papers. Accessing it was another thing entirely. There were a few ways to do that.

The first required a bit of programming knowledge. If you were savvy enough, you could log directly into the SPIRES-HEP database remotely and, using the database-specific SPIRES query language, pull the records you needed directly from the mainframe. This was the quickest option, but required the most technical know-how and a healthy dose of tenacity. Let’s consider this method the high bar.

The middle bar was an interface built by SLAC researcher Paul Kunz that let you email the server to pull out the records you needed. You still needed to know the SPIRES query language, but it solved the remote access part of the equation.

The low bar was to email or message a librarian at SLAC so they could pull the record for you and send it back. The easiest bar to clear, this was the method that most people used. Which meant that the most widely accessed particle physics database in the world was beset by a bottleneck of librarians at SLAC who needed to ferry bibliographic records back and forth from researchers.

The SPIRES-HEP database was invaluable, but widespread access remained its largest obstacle.

For a second time in the web’s history, the NeXT computer played an important role in its fate. For a computer that was short-lived, and largely unheard of, it is a key piece of the web’s history.

Like Tim Berners-Lee, SLAC physicist Paul Kunz, creator of the SPIRES-HEP instant messaging and email service, used a NeXT computer. When Berners-Lee called him into his office on one of his visits, Berners-Lee invited him into his office. The only reason Kunz agreed to go was to see how somebody else was using a NeXT computer. While he was there, Berners-Lee showed Kunz the web. And then Kunz went back to SLAC and showed the web to Addis.

Kunz and Addis were both enthusiastic purveyors of research at SLAC. They each played their part in advancing information discovery. When Kunz told Addis about the web, they both had the same idea about what to do with it. SLAC was going to need a website. Kunz built a web server at Stanford — the first in the United States. Addis, meanwhile, wrangled a few colleagues to help her build the SLAC website. The site launched on December 12, 1991, a year after Berners-Lee first published his own website at CERN.

Most of the programmers and researchers that began tinkering on the web in the early days were drawn by a nerdy fascination. They liked to play around with browsers, mess around with some code. The website was, in some cases, the mere after-effect of a technological experiment. That wasn’t the case for Addis. The draw of the web wasn’t its technology. It was what it enabled her to do.

The SLAC website started out with two links. The first one let you search through a list of phone numbers at SLAC. That link wasn’t all that interesting. (But it was a nice nod to the web’s origin. The most practical early use of the web was as an Internet-enabled phonebook at CERN.) The second link was far more interesting. It was labeled “HEP.” Clicking on it brought you to a simple page with a single text field. Type a query into that field, click Enter and you got live results of records directly from the SPIRES-HEP database. And that was the SLAC website. Its primary purpose was to act as an interface in front of the SPIRES-HEP database and pull down queried results.

When Berners-Lee demoed the SLAC website a couple of months later at a conference, it was met with wild applause, practically a standing ovation.

The importance was obviously not lost on that audience. No longer would researchers be forced to wrestle with complicated programming languages, or emails to SLAC librarians. The SLAC website took the low bar of access for the SPIRES-HEP database and dropped it all the way to the floor. It made searching the database easy (and within a couple of years, it would even add links to downloadable PDFs).

The SLAC website, nothing more than a searchable bibliography, was the beginning of something on the web. Physicists began using it, and it rebounded from one research lab to the next. The web’s first micro-explosion happened the day Berners-Lee demoed the site. It began reverberating around the physics community, and then outside of it.

SLAC was the website that showed what the would could do. GNN was going to be the first that made the web look good doing it.

Global Network Navigator was going to be exciting. A bold experiment on and with the web. The web was a wall of research notes and scientific diagrams; plain black text on stark white backgrounds as far as the eye could see. GNN would change that. It would be fun. Lively. Interactive.

That was the pitch made to designer Jennifer Robbins by O’Reilly co-founder Dale Dougherty in 1993. Robbins’ mind immediately jumped to the possibilities of this incredible, new, digital medium.

She met with another O’Reilly employee, Rob Raisch. A couple of years after that pitch, Raisch would propose one of the first examples of a stylesheet. At the time, he was just the person at the company who happened to know the most about the web, which had only recently cracked a hundred total sites. When Robbins walked into his office, the first thing he said to her was: “You know, you probably can’t do what you want.” He had a point. The language of the web was limiting. But the GNN team was going to find a way around that.

GNN was the brainchild of Dale Dougherty. By the early 90s, Dougherty had become a minor celebrity for experiments just like this one. From the early days of O’Reilly media, the book publisher he co-founded, he was always cooking up some project or another.

Wherever technology is going, Dougherty has a knack for being there first. At one conference early on in O’Reilly’s history, he sold self-printed copies of a Unix manual for $5 apiece just before Unix exploded on the scene. After spending decades in book publishing, he’s recently turned his attention to the maker culture. He has been called a godfather of the Maker movement.

That was no less true for the web. He became one of the web’s earliest adopters and its most prolific early champion. He brought together Tim Beners-Lee and the developers of NCSA Mosaic, including Marc Andreessen, for the first time in a meeting in Cambridge. That meeting would eventually lead to the creation of the W3C. He’d be responsible for early experiments with web advertising, basically on the first day advertising was allowed. He would later coin the term Web 2.0, in the wake of transformation after the dot-com boom. Dougherty loved the web.

But staring at the web for the first time in the early 90s, he didn’t exactly know what to do with it. His first thought was to put a book on the web. After all, O’Reilly had a gigantic back catalog, and the web was mostly text. But Dougherty knew that the web’s greatest asset was the hyperlink. He needed a book that could act as a springboard to bring people to different parts of the web. He found it in the newly-published bestseller by author Ed Krol, The Whole Internet User’s Guide and Catalog. The book was a guided tour through the technologies of the Internet. It had a paragraph on the web. Not exactly a lot, but enough for Dougherty to make the connection.

Dougherty had recruited Pei-Yuan Wei, creator of the popular ViolaWWW browser to make an earlier version of an interactive Internet guide. But he pulled a together a production team — led by managing editor Gina Blaber — of writers, designers, programmers, and sales staff. They launched GNN, the web’s first true commercial website, in early 1993.

GNN was created before any other commercial websites, before blogs, and online magazines. Digital publishing was something new altogether. As a result, GNN didn’t quite know what it wanted to be. It operated somewhere between a portal and a magazine. Navigating the site was an exercise in tumbling down one rabbit hole after another.

In one section, the site included the Whole Internet Catalog repurposed and ported to the web. Contained within were pages upon pages of best-of lists; collections of popular websites sorted into categories like finance, literature and cooking.

Another section, labeled GNN Magazine, jumped to a different group of sortable webpages known as metacenters. These were, in the website’s own description, “special-interest magazines that gather together the best Internet resources on topics such as travel, music, education, and computers. Each metacenter contains articles, columns, reference guides, and discussion groups.” Though conceptually similar to modern day media portals, the nickname “metacenter” never truly caught on. The site’s content and design was produced and maintained by the GNN staff. Not to be outdone by their print predecessors, GNN magazine contained interviews, features, biographies, and explainers. One hyperlink after another.

Over time, GNN would expand to affiliated publications. When the Mosaic team got too busy working on the web’s most popular browser, they handed off their browser homepage to the GNN team. The page was called What’s New, and it featured the most interesting links around the web for the day. The GNN seized the opportunity to expand their platform even further.

Explaining what GNN was to someone who had never heard of the web, let alone a website, was an onerous task. Blaber explained GNN as giving “users a way to navigate through the information highway by providing insightful editorial content, easy point-and-click commands, and direct electronic links to information resources.” That’s a meaningful description of the site. It was a way into the web, one that wasn’t as fractured or unorganized as jumping in blind. It was also, however, the kind of thing you needed to see to understand.

And it was something to see. Years before stylesheets and armed with nothing but a handful of HTML tags, the GNN team set about creating the most ambitious project with the web medium yet. Browsers had only just begun allowing inline graphics, and GNN took full advantage. The homepage in particular featured big colorful graphics, including the hot air balloon that would endure for years as the GNN logo. They laid out their pages meticulously — most pages had a unique design. They used images as headers to break up the page. Most pages featured large graphics, and colored text and backgrounds. Wherever the envelope was, they’d push it a little further.

The result: a brand new kind of interactive experience. The web was a sea of plain websites with no design mostly coming from research institutions and colleges. Before Mosaic, bold graphics and colors weren’t even possible. And even after Mosaic’s release, the web was mostly filled with dense websites of scrolling text with nothing more than scientific diagrams to break it up, or sparse websites with a link, an email and a phone number. Most sites had nothing in the way of hierarchy or interactivity. Content was difficult to follow unless it was exactly what you were looking for. There was a ton of information on the web, but no one had thought to organize it to any meaningful degree. Imagine seeing all of that, day after day, and then one day you click a link and come to this:

It looks dated now, but a splash page with bold colors and big graphics, organized into sections and layered with interesting content… that was something to see.

The GNN team was creating the rules of web design, a field that had yet to be invented. In the first few years of the web, there were some experiments. The Vatican had scanned a number of materials from its archives and put them on a website. The Exploratorium took that one step further, creating the first online museum, with downloadable sounds and pictures. But they were still very much constrained by the simplicity of the web experience. Click this link, download this file, and that was it. GNN began to take things further. Dale Dougherty recalls that their goal was to “shift from the Internet as command line retrieval to the internet as this more digital interface… like a book.” A perfectly reasonable goal for a book publisher but a tall order for the web.

To accomplish their goal, GNN’s staff used the rules of graphic design as a roadmap (as philosopher Marshall McLuhan once said, “the content of any medium is always another medium”). But the team was also writing a brand new rulebook, on the fly, as they went. There were open questions about how to handle web graphics, new patterns for designing user interfaces, and best practices for writing HTML. Once the team closed one loop, they moved on to the next one. It was as if they writing the manual for flying a rocketship — while strapped to the wings and hurtling towards space.

As browsers got better, GNN evolved to take advantage of the latest design possibilities. They began to use image maps to make more complex navigation. They added font tags and frames. GNN was also the first site on the web with a sponsored link, and even that was careful and considered. Before the popup would plague our browsing experience, GNN created simple, unobtrusive, informational adverts inserted in between their other listings.

GNN provided a template for the commercial web. As soon as they launched, dozens of copycats quickly followed. Many adopted a similar style and tone. Within a few years, web portals and online magazines would become so common they were considered trite and uninteresting. But very few sites that followed it had the lasting impact GNN did on a new generation of digital designers.

Ranjit Bhatnagar has an offbeat sort of humor. He’s a philosopher and a musician. He’s smart. He’s a fan of the weird and the banal. He’s anti-consumerist, or at the very least, opposed to consumerist culture. I won’t go as far as to say he’s pedantic, but he certainly revels in the most minute of details. He enjoys lively debates and engaged discourse. He’s fascinated by dreams, and once had a dream where he was flying through the air with his mother taking in the sights.

I’ve never met Bhatnagar. I know all of this because I read it on his website. Anyone can. And his website started with lunch.

Bhatnagar’s website was called Ranjit’s HTTP Playground. Playground describes it rather well; hyperlinks are scattered across the homepage like so many children’s toys. One link takes you to a half-finished web experiment. Another takes you to a list of his favorite bookmarks arranged by category. Yet another might contain a rant about the web, or a long-winded tribute to Kinder eggs. If you’re in the mood for a debate you can post your own thoughts to a page devoted to the single question: Are nuts wood? There’s still no consensus on that one.

Browsing Ranjit’s HTTP Playgroundis like peeling back the layers of Bhatnagar’s brain. He added new entries to his site pretty regularly, never more than a sentence or two, arranged in a series of dated bullet points. Pages were laid out on garish backgrounds, scalding bright green on jet black, or surrounded by a dizzying dance of animated GIFs. Each page was littered with links to more pages, seemingly at random. Every time you think you’ve reached the end of a thread, there’s another link to click. And every once in a while, you’ll find yourself back on the homepage wondering how you got there and how much time had passed in the meantime. This was the magic of the early web.

Bhatnagar first published his website in late 1993, just a few months after the GNN website went up. The very first thing Bhatnagar posted to his website was what he ordered for lunch every day. It was arranged in reverse chronological order, his most recent lunch order right at the top.

SLAC captured the utility of the web. GNN realized its popular appeal. Bhatnagar, and others like him, made the web personal.

Claudio Pinhanez began adding daily entries to the MIT Media Lab website in 1994. He posted movie and book reviews, personal musings, and shared his favorite links. He followed the same format as Bhatnagar’s Lunch Server. Entries were arranged on the page in reverse chronological order. Each entry was short and to the point — no longer than a sentence or two. This movie was good. This meal was bad. Isn’t it interesting that… and so on.

In early 1995, Carolyn Burke began posting daily entries to her website in one of the earliest examples of an online diary. Each one was a small slice from her life. The posts were longer than the short-burst of Pinhanez and Bhatnagar. Burke took her time with narrative anecdotes and meandering asides. She was loquacious and insightful. Her writing was conversational, and she promised readers that she would be honest. “I notice now that I have held back in being frank. My academic analysis skills come out, and I write with them things that I’ve known for a long time,” she wrote in an entry from the first few months, “But this is therapy for me… honesty and freedom therapy. Wow, that’s a loaded word. freedom.“

Perhaps no site was more honest, or more free as Burke puts it, than Links from the Underground. Its creator, Swarthmore undergraduate Justin Hall, had transformed inviting others into his life into an art form. What began as a simple link dump quickly transformed into a network of short stories and poems, diary entries, and personal details from his own life. The layout of the site matched that of Bhatnagar, scattered and unorganized. But his tone was closer to Burke’s, long and deeply, deeply personal. Just about every day, Hall would post to his website. It was his daily inner monologue made public.

Sometimes, he would cross a line. If you were a friend of Justin’s, he might share a secret that you told him in confidence, or disparage you on a fully public post. But he also shared the most intimate details from his own life, from dorm room drama to his greatest fears and inadequacies. He told stories from his troubled past, and publicly tried to come to terms with an alcoholic father. His good humor was often tinged with tragedy. He was clearly working through something emotional and personally profound, and he was using the web to do it out in the open.

But for Hall, this was all in the service of something far greater than himself. Describing the web to newcomers in a documentary about his experience on the web, Hall’s primary message was about its ability to create — not to tear down — connections.

What’s so great about the web is I was able to go out there and talk about what I care about, what I feel strongly about and people responded to it. Because every high school’s got a poet, whether it’s a rich high school or a poor high school, you know, they got somebody that’s in to writing, that’s in to getting people to tell their stories. You give them access to this technology and all of a sudden they’re telling stories to people in Israel, to people in Japan, to people in their own town that they never would have been able to talk to. And that’s, you know, that’s a revolution.

There’s that word again. Revolution. Though coming at the web from very different places, Addis and Hall agreed on at least one thing. I would venture to guess that they agreed on a whole lot more.

Justin Hall became a presence on the web not soon forgotten by those that came across him. He’s had two documentaries made about him (one of which he made himself). He’s appeared on talk shows. He’s toured the country. He’s had very public mental breakdowns. But he believed deeply that the web meant nothing at all unless it was a place for people to share their own stories.

When Tim Berners-Lee first imagined the web, he believed that everybody would have their own homepage. He designed his first browser with authoring capabilities for just that reason. That dream never came true. But Hall and Burke and Bhatnagar channeled a similar idea when they decided to make the web personal. They created their own homepages, even if it meant having to spend a few hours, or a few weeks, learning HTML.

Within a couple of years, the web filled up with these homepages. There were some notable breakthrough websites, like when David Farley began posting daily webcomics to Doctor Fun or VJ Adam Curry co-opted the MTV website to post his own personal brand of music entertainment. There were extreme examples. In 1996, Jennifer Ringley stuck a webcam in her room and beamed images every few seconds, so anyone could watch her entire life in real time. She called it Jennicam, a name that would ultimately lead to the moniker cam girl. Ringley appeared on talk shows and became an overnight sensation for her strange website that let others peer directly into her world.

But mostly, homepages acted as a creative outlet — short biographies, photo albums of families and pets, short stories, status updates. There were a lot of diaries. People posted their art, their “hot takes” and their deepest secrets and greatest passions. There were fan pages dedicated to discontinued television shows and boy bands. A dizzying array of style and personality with no purpose other than to simply exist.

Then came the links. At the bottom of a homepage: a list of links to other homepages. Scattered in diary posts, links to other websites. In one entry, Hall might post a link to Bhatnagar’s site, musing about the influence it had on his own website. Bhatnagar’s own site had his own chaotic list of his favorites. Eventually, so did Burke’s. Half the fun of a homepage was obsessing over which others to share.

As the web turned on a moment of connection, the process of discovery became its greatest asset. The fantastic intrigue of clicking on a link and being transported into the world and mind of another person was — in the end — the defining feature of the web. There would be plenty of opportunities to use the web to find something you want or need. The lesson of the homepage is that what people really wanted to find was each other. The web does that better than any technology that has come before it.

At the end of 1993, there were just over 600 websites. One year later, at the end of 1994, there were over 10,000. They no longer fit on a single page on the CERN website maintained by the web’s creator.

The personal website would become the cornerstone of the web. The web would be filled with more applications, like SLAC. And more businesses, like GNN. But it would mostly be filled with people. When the web’s next wave came crashing down, it would become truly social.

The post Chapter 3: The Website appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.