Noble Quotes

By Fastonish on 24 February 2014

NobleQuotes.com is a website that provides a collection of famous quotations from popular personalities. The features of this website are:

Users can read quotes from famous authors.
Quotes can be browsed by authors and topics.
Users can collect the quotes they like.
Users can rate the quotes, top rated quotes are shown first.

Other features of this site include:

Good User Experience (thanks to Drupal)
Clean and Responsive Design
The website works well on all devices
No annoying Advertisements

Visit noblequotes.com →

Why Drupal was chosen:

When the requirements and features of this site were listed, we found that Drupal has modules for all of them. Drupal was the perfect match for this project because features like: content management, content scheduling, content migration, user management, SEO, social sharing, responsive design, caching etc can be configured in Drupal easily. Drupal was the ultimate choice for this project because of the ease of implementation of the following features in Drupal:

Content Management

We wanted a system where content can be added and edited easily. Drupal's core was more than sufficient for providing these features. Also the Permissions option in Drupal core allowed us to provide different access rules to different type of users.

Content Classification

We needed a system where quotes could be classified by their author and topics. We also wanted separate pages for quotes of each author and each topic. This requirement was fulfilled in a few simple steps:

CCK module was used to create a content type for storing quotes.
Taxonomy (core) was used for assigning authors and topics to quotes.
The arguments feature of the Views module was used to filter quotes by authors and topics. More than 300 pages of the site are rendered dynamically by a single View display.

Content Scheduling

We did not want to publish all content at once. We wanted a scheduling system that could publish the content on specified date. The Scheduler module provided this functionality.

Describe the project (goals, requirements and outcome):

Import content

We had a lot of content in csv files and wanted to import it without trouble. The FeedAPI module did this for us in minutes.

Performance

Having a site with a good page load speed was one of the top priorities. Real improvement in performance was due to caching. We tested a number of caching strategies and ended up using the Varnish module. The reason for this decision is explained in the next section.

User Experience

The Masonry module improved the User Experience of the site. The Views Masonry module was configured for all the views. The masonry display is not only more appealing, it is also better utilization of space.

The Views Infinite Scroll module was used as an alternative to paging. This module can be configured to load content on click (as we have implemented on this site) or when the user scrolls down.

Other small modules like the qtip module also contributed to a good user experience of the site.

Add to Favorites

Giving users the ability to collect their favorite quotes was an important requirement because this feature sets this site apart from many competitor websites. This feature was accomplished through the Flag module.

Login / Register

Drupal core comes with a built-in user management system. We used the Email Registration module to simplify the registration process by allowing users to use their email addresses as their usernames.

Content Rating

We wanted to give users the ability to rate quotes. And we wanted to use these ratings for sorting the quotes, such that the top-rated quotes always appear on the top. This feature was implemented using the Fivestar module.

SEO

We wanted a generic way of configuring basic SEO settings for thousands of pages. Modules like the Meta tags made it simple.

Social Sharing

We wanted the users to be able to share quotes easily on popular social networks. There are dozens of modules that provide this feature. We tested almost all of them and ended up using the Share Buttons by AddToAny module. The reason for this selection is explained in the next section.

Responsive Design

We wanted a responsive design. We used the Masonry module on most of the pages and used the Adaptive Theme as the base theme.

Technical specifications

Key modules/theme/distribution used:

Varnish

AddToAny Share Buttons

Masonry API

AdaptiveTheme

Why these modules/theme/distribution were chosen:

Varnish

We explored various caching solutions available for Drupal. We shortlisted Varnish, Boost and Authcache modules. We performed a number of tests using these modules. We tested over 1000 pages from different locations. The average page load time without any caching was above 4.0 seconds. The average page load time with Drupal's default caching was 2.5 seconds. The average page load time with the Authcache module was reduced to 1.8 seconds. The average page load time with the Boost module was 1.7 seconds. The average page load time with Varnish module was 1.5 seconds. Therefore we preferred using the Varnish module. These stats are for this site only, the results may vary for other sites.

AddToAny

There are numerous modules that provide social sharing widgets. ShareThis and AddThis are quite popular. We chose AddToAny because:

It is easy to use custom images for social icons.
We observed better performance with it.
It is easy to customize by using the AddToAny API.
Update: AddToAny now supports mobile-ready vector icons.
Update: AddToAny module release (7.x-4.5) now supports AJAX.

Masonry

"Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall." (desandro.github.io/masonry). Various useful demos of Masonry can be found here.

Masonry was one of the most important modules for this site because it ensured compatibility of the design with devices of all screen sizes. The content is dynamically arranged according to the size of the screen without using any extra styling. There are a number of modules that integrate Masonry or Isotope plug-ins with Drupal. We tried all of them. The common issue with almost all these modules is that they do not work well with the Views Infinite Scroll module. We found a patch in the forums that solved this problem for the Masonry module.

Adaptive Theme

Responsive theme was a requirement for this project. We searched for contributed responsive themes and found loads of wonderful responsive themes by saran.quardz. We didn't use any of them because we wanted a simpler base theme that we could modify according to our requirements. We shortlisted Omega and Adaptive Theme. Finally we preferred Adaptive Theme because it provides a lot of configurable features e.g. how the design should be displayed on mobile and tablet devices.

qTip

qTip is a module that provides stylish tooltips that can be configured and styled. We wanted to use tooltips because they can give the user more information about an action without redirecting to another page. For example, whenever an anonymous user tries to access a feature that is only for authentic users, the tooltip text informs the user about this requirement and also provides the link to the sign-in page. There are numerous modules that provide tooltips in Drupal. These modules differ in the options they provide e.g. can HTML be used in the tooltip instead of plain text? are the tooltips responsive? which events are available for triggering the tooltips (click, hover etc)? We opted for qTip module because it provides the option to write HTML in the tooltip (which allowed us to provide links) and it can be triggered on click event.

Organizations involved:

Fastonish

Team members:

quickly

Lorenzo T