Viraland - Homepage

Viraland is a Greek online community where you can find the latest viral messages from around the world. Users participate in the community by posting new content and sharing it through social channels. Strange, meaningful and popular messages that go viral are posted daily in Viraland, reflecting the interests of its users.

Why Drupal was chosen: 

The requirements for this project were quite specific. Our client wanted an application-like user experience where navigation between the different topics happens within the same page. Visually, our client wanted content to slide up and down like paper folding, rather than asking users to navigate a traditional click-and-change page. Drupal was the clear choice for this, as we knew how powerful the AJAX API is when combined with easy content presentation (Views).

With Drupal, we managed to build a working prototype of the main site's functionality in about a week. Having an early prototype was important to the client: it created an efficient channel of communication between the design team and the client, and sped up the decision making and development processes.

Describe the project (goals, requirements and outcome): 

The goal of the project was to create a fun and innovative website that showcases the latest viral trends using community features.

Challenge: Cartoon characters

The team at Viraland.gr is committed to bringing its users the latest viral messages in a fun and interesting way. To achieve this, the client wanted to display content in a pleasant, cartoon-styled layout. The project already had a strong and unique concept, and cartoon characters and missions had already been defined for each of the site's categories. The biggest challenge was determining how to integrate these cartoons—the Viral Guys—with dynamically generated content.

Viral Guys - Viraland.gr

We integrated Drupal's taxonomy module with a custom AJAX view that we developed for Viraland. We used taxonomy to categorize each piece content, and then created a view that read those tags and displays content in a stream with the appropriate cartoon attached. With the custom AJAX view that we built, users can choose to view a general stream of mixed content, or can sort by cartoon characters to view specific categories of content.

Challenge: Dynamic content loading

One of the key features that we needed on Viraland was instant content loading. We wanted to move away from the traditional approach of click > page load > read story > back button > click on another item.

Instead, we wanted stories to be loaded dynamically on click request, much like unfolding a paper page. Our designers had already created a visual mockup, so what we needed to do next was make it happen.

Viral AJAX - Viraland.gr

We had previously worked with Panels and Views to create pages using variants and selection rules, but needed a way to dynamically load content. We found that Views integrated well with Drupal 7's AJAX system, and allowed us to quickly create callback functions. Within a day, the first working prototype was available for testing.

Challenge: User created content

To really justify the term "community" when promoting Viraland, we needed to implement a fun, user-friendly process for registered users to create their own content. The Viraland team wanted the experience to be easy, quick, and rewarding. The vision for the visitor experience was to engage users and provide them with opportunities to actively shape the Viraland community.

Viral Post - Viraland.gr

To make content generation easy and fun for users, we took full advantage of Drupal's powerful user roles and permissions features. With the Field Permissions module, we were able to create a simple but powerful node creation form. Each user gets his or her own personal page with customizable profile text and a displayed user photo. Using table views, he or she also gets an overview of the content that the user has created and published.

Challenge: Embedded Video Delivery

When displaying content, we found some trouble when using AJAX to load news stories. When several embedded video players (such YouTube and Vimeo) appeared on a single page, it increased the total page size and caused the scrolling experience to become choppy.

To resolve this issue, we used a lazy video loading method that was first introduced on Google+. This solution displays a thumbnail of the video and a play button-- when this button is clicked, the pages and files needed to view the video are loaded, and the video plays. In order to make this happen seamlessly, we used a theme template to hook the necessary javascript onto the Media. The result let us preserve the smooth content viewing experience while enabling video capabilities for multiple players on a single page.

Viral Video - Viraland.gr

Challenge: Server setup

Viraland's front page contains several heavy-duty views. Because of this, we needed an intelligent caching mechanism to offload the server and provide fast loading times.

The Boost module was an excellent solution for this, as our main traffic is anonymous. Providing pre-generated HTML/CSSfiles allowed us to load the front page in less than two seconds.

Summary

The client required the following functionality for the end product:

  • Content will be archived in 12 different categories, each category will be themed with a cartoon character.
  • Each cartoon character will have a hand-drawn figure, a bio and its exclusive page where the user will find the corresponding content.
  • Application-like user experience where navigation between the different topics will happen in the same page with content sliding up and down.
  • Community features available for users who create accounts or login using their existing accounts from popular social networks.
  • Each user will have a personal page where he or she can manage the content that he or she creates in Viraland.
  • User friendly post form that makes it easy and fun to create new content.
  • Back end to easily edit, correct, and classify content for site editors.
  • Social networks integration with Like, Share buttons. Users must be able to link their personal page in Viraland with the one in their social network of choice.
  • Multi-lingual functionality should be available to be implemented in the close feature.

Outcome

The end product met and exceeded the above goals:

  • AJAX powered content presentation creates a lovely experience for the user to browse through the content.
  • Loading times are small, while the site feels like a tablet application.
  • The cartoon characters created give the site a sense of personality.
  • The user friendly content-add form drives engagement.
  • The ad units that were already on the site merged beautifully with the rest of the content.
  • All used content types can easily serve multiple languages when this feature is requested.
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

Views combined with Panels give structure to our content presentation. We really liked how easy it was to trigger AJAX-based events within a view.

The Zen theme makes it very easy to create the grid for the basic layout. Combining it with the SCSS language, we could rapidly start styling all elements of the site.

The Media module provides the editors and users with an intuitive interface to easily add images and video to their posts.

With Janrain Engage, module editors can easily add/edit the different login methods and provide users with the needed one-step sign-in process.

Rules helped us create triggered actions that the editors can easily supervise to automatically inform users regarding their actions (post/publish/correct/delete content).

The Internationalization (i18n) module provides a layer of abstraction for the content to be served in multiple languages when this feature is requested.

The Field permissions module helped us customise and simplify the node creation form for each user role.

Team members: 
Project team: 

Sevenline
web design & advertising company

Viraland - Meet the team
Viraland - Category page
Viraland - User page
Viraland - Personal user page
Viraland - Post page

Comments

diomede’s picture

Nice website!
Simple and clear user interface; responsive layout would be a great addon.

www.concertpass.com - the secure way to buy concert tickets online!

highvrahos’s picture

Hi diomede,

Thank you for your nice comments.

We have been considering a responsive layout, although we have as a priority publishing the Viraland mobile apps for iOS and Android, firstly.

Best regards,
Leonidas

Leonidas Maliokas
Sevenline, web design & advertising company

diomede’s picture

Thanks Leonidas for the reply.
Regards

www.concertpass.com - the secure way to buy concert tickets online!

jackenmail’s picture

Awesome theme, I like

paranozore’s picture

Hi,

I tried Viraland a few days ago, and its working perfecly, it's really nice and helpfull. Thanks.

paranozore