Google Evolution of the Web

Visualizing the momentum of web technology.

Service

Capabilities

A person stands on stage in front of a complex, colorful flowchart displayed on a large screen. The flowchart includes multiple swirling lines and icons, representing a network or process. The audience is partially visible in the foreground, capturing the presentation on their devices.

The challenge

To mark the third anniversary of Google’s browser, the Chrome team wanted to celebrate the work and contributions of the web community. They approached Hyperakt to help them create an experience that would visualize the evolution of web browsers and web technologies over time since 1990. The goal was to educate and inspire, and also to demonstrate Chrome’s invaluable role as a catalyst for innovation.

A computer monitor displays a complex data visualization with multiple colorful, overlapping lines and curves on a black background. Various nodes and connections are labeled with text. The screen stands against a solid turquoise background.

The opportunity

We worked with our development partner, Vizzuality, to create an online visualization that simplified layers of information and immediately gave an overview of crucial moments in web history over the past 22 years. With vibrant colors and elegant curves, we mapped the joint evolution of web browsers and internet technologies from HTTP to CSS, Netscape to Chrome, highlighting the incredible acceleration of growth these technologies have had since the advent of the Chrome browser.

A black background displays a colorful, winding line graph with various intertwined paths. A magnifying glass on the left highlights a section of the graph with red, blue, and black lines. Nodes and text labels dot the paths, representing data points and categories.

Impact

Since its release in June of 2012 at Google I/O, over 1 million unique visitors have seen the Evolution of the Web. The piece has been tweeted 5200 times. Forbes called it “awesome…beautiful, easy to follow,” TIME called it “a beautiful thing…the latest in web design,” The Guardian called it “beautiful - and elegant - solution.” And from Mashable: “stunning and extensive, an immersive walk down digital memory lane.” The Evolution of the Web won Silver in Interactive Visualization from Information is Beautiful in 2013, and Best Site of the Day from Favorite Websites Awards.

A computer monitor displays a website titled "The Evolution of the Web" against a yellow background. The background of the website features multicolored wavy lines. A paragraph of text and a button labeled "Explore" are visible on the screen.

The image displays three columns of text in different languages (Thai, German, and Japanese) against a yellow background. These columns seem to discuss the topic of web evolution. Each column appears to have a heading and several paragraphs of text.

Mining the data

We needed to map the co-evolution and interplay of major web browsers and web technologies over a 22-year timeline. We collaborated with the Chrome team to compile the history of major web browsers and web technologies, from HTTP to CSS Filter Effects released in 2012, and wrote short descriptions for each. We also researched the interaction between the browsers and technologies: when did each web technology become integrated with the major browsers. We partnered with Vizzuality to help implement the design on a dynamic HTML5 platform with 3D visualizations, panning and zooming, SVG and canvas browser support.

An infographic showing the history of web technologies and web browsers. The left side lists HyperText Markup Language (HTML) versions, Cookies, Secure Sockets Layer (SSL), JavaScript, Java, Flash, and Extensible Markup Language (XML) with dates. The right side lists browser releases.

A computer screen displays a dark-themed flowchart with interconnected nodes and pathways, featuring various colors. The background is turquoise. The chart appears complex, with multiple branches and data points, suggesting some form of data visualization or process mapping.

Tracing web technologies

Each web technology is represented by a curved color line. Plotted against a timeline, each line intersects with browser timelines at the point in time when the browser adopted that technology. On rollover, the curves isolate to highlight individual trajectories and browser intersection points and provide a brief description of the technology.

The changing faces of web browsers

Horizontal lines, plotted against the timeline, represent each of the seven major browsers: Mosaic, Netscape, Opera, Internet Explorer, Safari, Firefox and Chrome. Each browser line is studded with points that indicate software updates. Clicking on any of the browser icons reveals the UI/UX history of browser updates for each interface.

The growth of the web

An alternate view charts the expansion of the internet as it becomes a more global network. Viewers can explore the growth of internet users and data traffic (in petabytes) plotted across the same 22 year timeline. The visualization clearly shows the mutual impact browsers and technologies have had on the internet’s evolution, and the pivotal role of Chrome has in accelerating the pace of invention.

A computer screen displays a graph with a dark background, illustrating the growth of the internet. The graph includes various data points and curves. A circular inset magnifies a section labeled "Growth of the Internet." Several icons and text boxes are present.

Day and night

The Evolution of the Web 2.0 was unveiled at Google I/O 2012, the company’s annual developer conference. To create a large visual impact in the dark conference room, we created a “Day and Night” toggle, giving users the option to switch the background color from white to black.