Google's 20 Things
Launch the Site

Check out Google's 20 Things I Learned About Browsers and the Web

Google is keenly aware of the important role the browser plays towards an open, modern web. A browser’s speed, security and capabilities all factor significantly into the end user experience. In 2008, Google released its own browser — Google Chrome — which included several innovations to make browsing faster and more stable. Then recently, Google's Chrome team approached Fi to build an interactive HTML5 web app that would both explain and showcase features of the modern browser as well as the modern web, which Google and Fi are passionate about.

Project Screenshot

The Concept

The project is called “20 Things I Learned About Browsers and the Web” and the overarching direction was to present the information in a way that “hearkens back to all the things we know and love about books,” but in a modern, web-oriented way. The challenge was to take a traditionally offline experience and reinvent it online. Fi’s developers are known for staying ahead of the curve with web technology and Google wanted Fi to take full advantage of that by building features using all the available modern tools, to demonstrate what the modern web and modern browsers can do.

The Process

The 20 Things project revolves around twenty articles Google wrote to describe in an engaging way how the modern web and modern browsers work, and how their evolution is changing the way we work and play online. Google also engaged illustrator, Christoph Niemann, to create a series of illustrations to accompany each article. Fi’s job was to bring this experience to life in an engaging, interactive HTML5 web app.

Fi worked with Google in the design phase to create an authentic book-like experience on the screen by transforming traditional book-related elements into functional features that enhance the online interaction. Several iterations honing the details resulted in a design instantly recognizable as a book from the hard cover to the page layout, along with a slew of subtle visual flourishes that feels more like an interaction with a physical object than a flat website.

With design in hand, Fi’s developers set out to make the concept a reality. The project was to be developed entirely in HTML5 and modern web technologies. Using HTML5’s cutting-edge features meant learning new tools and building uncommon features as well as first-of-a-kind visual effects. The team worked closely with Google throughout the development phase to make sure all the details were finely tuned and optimized.

The Result

The 20 Things project was a challenge to break ground with new technologies and deliver a rich, educational experience that these technologies make possible. The Fi team rose to the challenge and produced a web app that is as fun to play with and explore as it is interesting to read. Among the app’s interesting features are instant search, animated canvas page flips, enhanced canvas illustrations, offline mode, bookmarking, and lights out mode. Fi’s passion for creating engaging experiences becomes truly apparent in the subtle details that make 20 Things such a unique project. The fun interaction combined with the playful illustrations and interesting articles make the web app something anyone can appreciate and enjoy.

Components

A collection of components from Google's 20 Things

Project Icon

Client
Google

Release Date
November 18, 2010

Technologies
JavaScript
HTML5
CSS3
PHP
Canvas

Similar Projects