Ideas That Shaped The Web

- Mitali Rana

Web is something that we all take for granted today. The extraordinary rise of web was not inevitable in fact it faced a lot of challenges as it was evolving. A few core ideas contributed significantly to its becoming the dominant architecture. The web is a phenomenon unlike anything you have seen before.

There are more than 20 Trillion pages. On any day there are more than a hundred million active sites. There are more than 20 Billion devices that connect to the Internet every single day from servers to garages openers to thermometers.

Its size is not the only reason of it being extraordinary we have had many generations of computing mainframes, personal computers and before that we have had things like Automobiles, Air conditioners and refrigerators each of them went through a phase where they developed rapidly and afterwards they all stagnated.

The internet and the web seems to be different, it started off in the 70s for the purpose of sharing compute resources. In the 80s email was introduced for the task of sharing papers which became significant and in the 90s we had large-scale information dissemination. In the year 2000s and 2010's we had mobile internet and now we have the Internet of Things and who knows what is going to come next. So why do we want to study the web?

I believe that it is an interesting showcase for some very powerful but very simple ideas. Some of the ideas are revolutionary like the peer-to-peer network. Others are more humble like the GIF. Among them are astounding technological achievements, new economic models, ideas that breakdown national borders, ideas that blur the boundary between generating and exchanging ideas and ideas that have changed the world. Perhaps most important are the design breakthroughs that opened up the web to a mass audience. Without these the web would still be the playground of engineers and computer programmers. But now it is a place for everyone.

They different Design Breakthroughs:

1. Graphical User Interface; It is a user interface that includes graphical elements, such as windows, icons and buttons. The term was created within the 1970s to differentiate graphical interfaces from text-based ones. Inspired by the work of Vannevar Bush and Ivan Sutherland, Engelbart online System (NLS) was the first implementation of a GUI, a virtual desktop incorporating windows, menus, icons, and folders. For industries which were involved in handling punch cards and command lines, this was radical thinking. While most computer scientists were focusing on making computers smarter, Douglas Engelbart was interested in how computers could make humans smarter.

Several of Engelbart’s team went on to develop the groundbreaking Xerox Alto. However it would not be Xerox that steered the course of modern computing. In 1983 Apple released the Lisa, the primary computer with a GUI and mouse. Much to Apple’s competition, Microsoft quickly followed suit releasing Windows 1.0 the same year.

Twenty years on Internet Explorer, Firefox, Safari and most browsers since remain remarkably similar to Netscape’s original model. Some see this as a missed opportunity; others see it as testament to Engelbart’s thinking 25 years earlier. What everyone agrees on is that without the GUI, the web would not be the global phenomenon it is today.

2. The Emoticon; In 1963 State Mutual Life hired cartoonist Harvey Ball to create a smiley face for the company’s “Friendship” campaign. He designed a circular yellow face with two black dots for eyes and an easy curve for a mouth. It took him 10 minutes and he was paid $45. In 1970, brothers Bernard and Murray Spain added the line “Have a Nice Day” and sold millions of dollars worth of merchandise. Harvey Ball’s design had gone global.

The first use of the smiley face on a screen was in 1982 at Carnegie Mellon University. When web chat took off within the mid-90s, emoticons evolved into images. Instant messaging services such as ICQ and AOL Instant Messenger started offering a wide range of icons that could be inserted into text at the click of a mouse. There are now over 2,000 icons in this dictionary of Animated GIF icons.

3. Graphics Interchange Format; is a file format for images. It is 20 years old and supports only 256 colors which are not suitable for photographs. It has no sound capability and is inferior to the PNG. Yet the GIF is still hanging in there. It proved to be tenacious as it can move.

CompuServe introduced the GIF format within the pre-web days of 1987. It was released as a free and open specification for sharing color images across their network. GIFs really took off in 1993 with the release of Mosaic, the primary graphical browser. Mosaic introduced the tag, which supported two formats–GIF and a black-and-white format called XBM.

 In 1996, Netscape 2.0 was released. It supported GIF animations–multiple frames shown in succession.    The web went crazy. Suddenly there were spinning logos, animated under-construction signs, and dancing babies everywhere you looked.

4. User-Centered Design; The father of user-centered design is arguably William Fetter, an American designer who worked for Boeing. In 1960 he coined the term Computer Graphics. In 1964, he made the first computer model of a human body Known as “Boeing Man” this wireframe pilot was used to design a virtual cockpit ergonomically, optimizing his ability to reach the instruments. The manufacturing and design industries have put people at the center of design ever since.

In 1995, Nielsen launched his website useit.com. His ideas were a beacon in the emerging field of web usability. He advocated user testing and paper prototypes that put the user’s expectations at the center of the design process. He was a champion of minimal designs that spoke the language of the user. This meant following real-world conventions and avoiding system-oriented terminology and functionality. Don Norman, Jakob Nielsen’s business partner describes it well: “We must design our technologies for the way people actually behave, not the way we would like them to.”

5. Net Art; In 1952 Computer scientist Christopher Strachey Born in Belgrade, Cosic immigrated to Slovenia in the early ’90s developed a program for the Manchester Mark 1 computer that created randomized love letters. It was the first example of computer art. With Strachey’s generative love letters the result is secondary to the process. This typifies computer art and the Net Art movement followed unexpected outcomes. While the U.S. dotcom companies seized on the commercial potential of the Web, Eastern Europe was critical to its artistic development. Many of the early online art projects addressed technology as the subject matter as well as the medium.

Artists and designers like Aram Bartoll, Aaron Koblin and Rafael Rozendaal continue the spirit of Net Art but things have changed. Net Art is no longer about the huge impact of the Internet on culture. We are all Net Artists now.

6. Scalable Vector Graphics; is an Extensible Markup Terminology based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files. This means that have the quality to be searched, indexed, scripted, and compressed. In January 1993, Jonathan Gay, Charlie Jackson and Michelle Welsh founded Future Wave Software. Their vision was to develop a software application that allowed people to bypass the mouse and draw directly on Display screen. They called it SmartSketch but just as it was ready to hit the market AT&T scrapped PenPoint, the OS it was built on. Future Wave had no choice but to adapt its software to the keyboard and mouse. From having a market to itself, it was suddenly competing with Adobe Illustrator and Macromedia FreeHand. SmartSketch had become a “me too” product.

Hillman Curtis redeveloped the Macromedia website using the newly acquired software and created the first Flash website. A wave of non-programmers followed in his creative footsteps. The release of Macromedia Flash was a tipping point. It opened up the web to animators and illustrators in the same way as the Mosaic browser had done for the very first web designers four years earlier. Brands could at last see the potential of this new media which attracted serious investment prompting the dotcom gold rush.

7. Info-graphics; The web has given us access to more information than ever before. This volume of data demands new ways of navigating it. Providing information visually is not new. Human beings have been using marks, painting images and drawing maps for thousands of years. However true information graphics are less than 100 years old. It was in 1925 at the Social and Economic Museum of Vienna that Otta Neurath invented information graphics as we recognize them today.

Neurath’s vision was to bring “dead statistics” to life by making them visually attractive. His maxim was: “To remember simplified pictures is better than to forget accurate figures.” Originally called the Vienna Method and later ISOTYPE (International System of Typographic Picture Education), the graphic language he pioneered is now ubiquitous, appearing everywhere, from airports to websites.

While Neurath gave us the pictogram, the statistician Edward Tufte is the pioneer of data visualization. His Data Density principle suggests that the more data is depicted, the better. Occurring at the intersection of art and science, infographics appeal to both creative and analytical thinkers.

8. Embeddable Fonts; The first generation of web browsers such as Mosaic and Netscape Navigator displayed set fonts. In 1995, Netscape introduced the tag allowing web developers to choose their own fonts. Technically you could specify any font you wanted for your site; in practice users had to have that font installed on their computer to view it.

  The set of fonts assured to be pre-installed on both Windows PCs and Apple computers became popular as web-safe fonts. Web designers’ dream had come true: they could at last use any font they wish. In 2009 most browsers began supporting the @font-face command which allowed a webpage to link to a font file.

A company called TypeKit saw an opportunity. It licensed thousands of fonts on a web-only basis and offered a linking license to subscribers. Its platform serves fonts quickly and consistently, dealing with the differences in how browsers handle font files.

9. Responsive Web Design; Whether we are consuming media on a PC, a tablet device, a Smartphone or the TV we like content optimized for that particular device. This is not easy when they all have different screen sizes and interfaces and are used at different points of the day for different tasks.

Websites are traditionally optimized for desktop browsers but increasingly the most important screen is the one on our phone. It is the last screen we look at night. It’s the one screen that cuts across our work and leisure time. Designing for a smaller screen is equally unsatisfactory at larger resolutions. Traditionally this has meant different layouts for each device but with ever more screen sizes to optimize for this, is a huge task.

Inspired by responsive architecture in May 2010 Ethan Marcotte, suggested a solution. He states “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience but embed standards-based technologies into our designs to make them not only more flexible but more adaptive to the media that renders them. In short, we need to practice Responsive Web Design.”