Drupal Association members fund grants that make connections all over the world.
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.
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.
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.
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.
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.
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.
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.
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.
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.
web design & advertising company