OUTLINE - The New Masonry-Grid Content Browsing in Osho

Yes, it is Pinterest-inspired. Yes, a lot of sites do it right now. Yes, we're going to do it, too. Yes, this is the "secret new feature" we were referring to. Yes, it is really cool, effective and important, and here's why...

Outline is a new content browsing feature in Dolphin 7.1 Osho that uses Masonry-grid layout system to display site's content as a mix of tiles that "float". It rearranges and repositions all the child elements next to one another. When you resize the windows, child elements are being realigned to the right position. Turns out that when coupled with infinite scroll this is a very engaging way to display content. I'll quote Nir Eyal on this one...

Few other methods for displaying information produce the curiosity to see what’s next like the infinite scroll. Like coffee and chocolate, the infinite scroll pairs particularly well with another increasingly-used design pattern, the masonry grid layout made famous by Pinterest. Cliff Kuang, editor of Co.Design, wrote, “… the Pinterest-style grid forces the eye to zig-zag through content, slowing down your scrolling but packing more images onto the screen at any given point.”

The barrage of enticing content speeds users up, enticing them to scroll, while the grid slows them down, retaining their attention and moderating their thirst for more and more stimulation. The visual tension is mesmerizing and addictive. Don’t believe me? I dare you to go to the Pinterest homepage and not feel tempted to scroll just once. It’s like opening a can of digital Pringles.

We decided that this new browsing "trend" suits Dolphin structure very well. It may be difficult to display interesting pieces from different modules on one page without over-complicating the layout. Surely, you can have separate blocks for each module - photos, videos, blog posts, etc., but this isn't a natural content flow. Like in real life, we normally don't separate media types when consuming content - we talk, watch videos, photos, listen to music and read notes in a mixed order, often simultaneously, and normally without pre-defining media types. We're interested in a certain TOPIC, and then we just consume content about it in whatever form it comes. Dolphin-based site niche largely defines the topic, while the new OUTLINE exposes a mix of content, with an opportunity to infinitely scroll and browse through it. In short - it's a perfect fit.

Here's how it looks:

Clicking "Load More" will load an additional set of tiles without reloading the page. As you may see content comes from different modules, marked with module icons accordingly.

Tiles will adapt to your preferred block width or to fluid site layout, so the Outline may look like this...

Naturally, you can elect to use it only in one of the blocks, mixing it with other blocks like "Featured Members", "Site Stats", or whatever, but the coolest thing about Outline is that it is perhaps the only kind of "site window" that can be used without any other blocks and still give a broad overview of what's going on. It's a great attention-grabber.

Outline is a part of Timeline module. Same as with the Timeline you can control it via Admin panel and can choose which modules would be used to display content in the Outline...

3rd-party module developers would benefit from acquainting themselves with how to integrate with the new Timeline/Outline module, since it really is poised to become an integral part of Dolphin platform, just as "masonry-grid" is quickly becoming a new standard for mixed content browsing layouts.