In my post yesterday, I shared some lessons from my experience launching Wists, a visual bookmarking website that predated Pinterest. Given that Pinterest is valued at $ 1.5 billion, I think it’s also worth looking at the general history of visual bookmarks and grid sites that paved the way for Pinterest.
In 2004, I left MRL ventures, the incubator where I had worked on Yelp. I wanted to build a service for people to share things they might buy. I originally envisioned this social shopping site as a a universal wish list, created by people browsing images of products and clicking “add” or “skip,” similar to the way Hot or Not worked.
I collaborated with Yaroslav Faybishenko, a brilliant software guy who was also working for a mysterious hedge fund in San Francisco to build an app that scraped items from Yahoo and Google shopping services. We quickly realized we had a problem. Shopping databases are full of non-inspirational items, such as car parts. There needed to be a way to get visually interesting items into the database.
My background was aggregation. I co-founded the first news aggregator, Moreover, in 1998, and I had worked on the RSS standard. But in a former career, I was an architect in the U.K., so I had a big list of design related sites that I wanted to aggregate from, but I wanted to be able to pick individual items.
At the same time, Joshua Schachter’s beautifully minimalist social bookmarking system, Delicious, had grown rapidly. The simplicity of sharing bookmark links puts Delicious right up there in the key steps towards the development of social platforms. Sharing bookmarks is similar to news aggregation, only the items are manually picked, or curated.
Text bookmarks are like headlines that link to a full item. For the design sites that I wanted to manually pick from, it seemed like a thumbnail image on one of the pictures on a page showing, say, a table could act like an image headline — a small thing that links to a bigger one. By parsing out all of the images on a page and resizing them, when a button was clicked in the browser, I could make every image become its own form submit button. Thus, by making the process of choosing an image headline one click and by combining this with the same process as Delicious, users could create visual bookmarks.
If the thumbnail headlines linked through to the site being bookmarked directly, there would be no permalink, which would severely reduce the share-ability of the links. For Wists, I created two sizes of thumbnails — a tiny one for the gallery and a medium one for the permalink. Pinterest also has two, but these are the same as the medium-sized thumbnail and the original image. This use of the original-sized image is part of the reason why the company has had so much trouble trouble with copyright laws, as it is the equivalent of taking the whole text of an article rather than a headline.
A history of grid sites
Visual bookmarks are the key publishing concept behind sites such as Pinterest, and the principal way to read what is published on these sites is the grid format image gallery. This is nothing new, but its use is profoundly important since the linear style of blogs and social networks has seemed so dominant until very recently.
One of the most important UI developments on the Web is Dave Winer’s concept of the “river of news” — a one dimensional stream of consciousness, a reverse chronological list of updates. This format became the norm for weblogs. And it is so ubiquitous today, that it seems obvious, which makes it difficult for people to see that this layout was actually an innovation. A river of news updates is the core UI component of Facebook and Twitter, which evolved from combining elements of aggregation (a feed of updates from all your friends) with the simplicity of blogging (type stuff in a form to publish to the Web).
The exception to the river was the grid view for image search or photo sharing sites, such as Flickr. Unlike text, which you read word by word, images can be “grocked” entirely at a glance. So a two dimensional grid view is more efficient than a one dimensional river.
Until the mid-2000s, most weblogs were based on text, having come from online diaries. For example, the gadget weblog, Gizmodo, had few images, when it launched. This is unthinkable today, and the increase in usage of images stems from the evolution of domain specific blogs, and particularly product blogs. Although there were grid-based sites before, the one that really defined the exact format was Jean Aw and Daniel Frysinger’s NotCot. For the layout of each item on NotCot, the site used the metaphor of a Polaroid photo with a note written in the space below the image.
Although a seemingly trivial distinction, grid sites have their distinct advantages and disadvantages over linear ones. They look pretty, but require scanning in two directions. This is not good for news, where you need to understand the timeline at a glance. However, for scanning thumbnails, a grid is particularly efficient. But even then, the success of such image-rich sites as Tumblr made people think that the river worked for everything. I suspect the key UX component of Tumblr’s success is the ease of sharing or reblogging. Also, in such a heterogeneous text/image environment, you can’t just have a grid.
This all sounds so nit-picky and anal, but the use of grids for visual sites is really important. When a Web service that is worth $ 1.5 billion and has millions of users consists of a few standard types of pages, the exact nature of those pages really matters.
Beneath the hood, Pinterest goes to extraordinary length to overcome a shortcoming in the HTML layout model — you can’t display items of different size, row by row, chronologically, without gaps in columns. By tracking coordinates for each item, Pinterest’s grid has items of different height, but fixed width, optimally arranged in a grid. This means that items which are oriented portrait, are larger and therefore more prominent. However, most product images (notably, apart from clothing) are landscape, so the Pinterest grid gives an unusually biased visual perspective and one that I don’t think is optimal. So although Pinterest has the most sophisticated evolution of the grid format, to date, it may not be the final one.
David Galbraith is an architect turned tech entrepreneur. He is the co-creator of RSS and co-founder of Moreover, Yelp, Mocoms and Curations.
Image courtesy of Flickr user Marcus Jeffrey.
Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.
- How to navigate the new world of digital advertising
- Social media in Q1: commerce and discovery dominated
- Controversy, courtrooms and the cloud in Q1
