Jump to content

Case Study: The triumph of National Geographic Traveller India in Processwire

ChiefPundit

By ChiefPundit,
in Case Studies

 Share

Recommended Posts

ChiefPundit Jr. Member

ChiefPundit

Posted
Posted

The Background

Early in December 2013, the National Geographic Traveller India team at Amar Chitra Katha, called Pigtail Pundits over to help them build their website. Till then, the NGTI site was a poorly cobbled together, pale shadow of the publication in html and css, comprising, mainly content from the offline magazine articles. It was formatted too plainly, and didn’t carry the richness of imagery, gloss and character that you’d associate with anything from the National Geographic stable.

The Brief

NGTI had an ambitious remit for the revamped website. 

  • It will contain the offline magazine, in full, with each issue richly illustrated with some 35 odd travel stories and encrusted with glorious pictures
  • The past issues of the magazine, some 15 of them so far, would have to be imported into the new system gradually
  • It will carry have articles written exclusively for the web, by a separate editorial team
  • It must have the ability for accepting photos from amateur travel enthusiasts, every day 
  • It must showcase the images from National Geographic Traveller in all its glory through on-page galleries and sliders
  • It must have a workflow for the editorial to schedule articles into the future
  • It must be fitted with rich tags to describe/ cross-tag the articles, the ability for browsers to comment and search ability built into it

What’s more, it must come close in feel and richness to the National Geographic mother site in the US. That site incidentally, was in Beta at that time, and used some really fancy, jaw dropping scripts and effects. We were wondering as to what technology it was built on. But, there were a lot of challenges to tackle before we even reached to the front-end effects.

To Drupal, or to Processwire? The Million $$ choice.

We took on the challenge of the revamp. Thinking through and rationalising the different and varying content types in the magazine was our first task. We noted 13 different types. The trick was to winnow this down to just one content type that could fit all types of articles.

Then, in fitting this content type into the system, we had to take a few calls. We argued that the system must have the flexibility to allow editors to embellish their articles - with drop caps, pull quotes, captions, guides and other style ornamentation that was singular to the National Geographic Traveller. In order to do this effectively, we would have pre-styled codes in the system that could be invoked using short codes as the editors saw fit. This was a whole sight better and more flexible than putting text into pre-styled boxes that would constrain the editorial.

Drupal CMS was our first choice in putting this system together. We had worked with Drupal for several years now and we knew a thing or two about customising it too. The only challenge was to get a young team at Pigtail Pundits behind Drupal. The learning curve for Drupal was always daunting and that was a concern. We started work on Drupal in early January 2014. We cobbled together an internal team that would work on the project.

After about a month into Drupal, we had almost everything ready for a demo to the client, save for styling. In early February, we had a rethink. We were working on some projects and testing out Processwire, internally in parallel with the NatGeo project. We found PW to be a fast, flexible, efficient system, without either the bloat and the learning curve required of Drupal. We had to take a call.

Drupal, for all its goodness, still made heavy weather of its modules. Drupal optimisation alone required a lot of modules at the application level. Plus a few on the server - memcache, ably supplemented with server processing speed and memory in fair, generous helpings. 

But optimisation itself was just one of the many things that troubled us about Drupal. There were a heap of other modules, each adding weight and extra lumber to the ponderous system. Besides there was image heavy content. We had serious doubts as to the conditions under which the site would run well with Drupal, both immediately, and in the long run. We had to take a call.

Time for a few seditious thoughts 

Could we now change the NGTI project to Processwire from Drupal? What would be the implications? For us, for NGTI?

We had to grapple with a whole bunch of fallouts of this. 

  • How do we come clean with the client on this?  
  • Would that decision to shift hurt us? 
  • What if the client were to say no to the shift? 
  • What about getting our internal team that was already on Drupal, come to grips with Processwire? How long would that take?

The reasons to shift to Processwire were clear. Speed, flexibility and scalability given the volume of content that was going to be part of the magazine and web editorial, the features we required, and the potential traffic on the NGTI site. The decision had to be made now.

We decided to make an early switch to PW. And in retrospect, it was probably the best decision we took.

We had to instil confidence in the client that this switch to Processwire was the right thing to do. If we relayed the news too early, it could have worked against us. We had to prove that PW was a better decision. 

So we went ahead and simulated all that we’d done in Drupal into Processwire without asking the client, or giving them a whiff of what we were up to. We worked in parallel on both the systems. It took us about 15 days to get everything in Drupal into PW. Mercifully for us the client was hunting for a design team that would do justice to the Nat Geo design pedigree and that took some time. Along with the fact that the new web editorial team was still being formed. We used this lull effectively to make the switch.

Remarkably, our Drupal team picked up PW twithout any issues. It took them a week to grasp it and get going. That was a record of sorts as we’d folks who struggled with Drupal even after 3 months on a project, still coming to grips with techniques and modules. But PW was a cinch.

The Processwire Miracle

We put together the first cut of the site in Processwire. 

  • Rationalized content types for magazine articles were in
  • One magazine issue was fed in so that we could slap on some styling
  • Hannah code was used generously to style the content within the editor, without getting in the way of content, or trapping this into pre-styled text-area boxes. 
  • Magazine captions, guides, block-quotes, drop caps were driven by Hannah to facilitate the editorial hoopla
  • Gallery and slider scripts were quarried for the demo

The demo date was decided in early April. We showed off the system, its speed, and ease of use, live to the client. It was only after the demo that we told them that the system was not Drupal, but Processwire. They were already sold by then.

The real intensity on the NGTI project however started in June 2014 when the designer Matt Daniels was brought in by NGTI. We were privy to the early designs of the Home Page, Landing Pages and Detail Pages. But were anxious as to how things would play when the entire design was complete. After all the design was not in our control. Luckily, everything went off well. There were a few challenges, and these were taken up and resolved. 

  • Javascript for the galleries, sliders had to be rewritten from scratch to conform to the design requirements
  • Editorial came up with a list of how they wanted articles to be featured on the Home Page in blocks and we had to program this accordingly. We managed to queue the articles and then lop the old off, when the new were published
  • Destination page required maps by default and then of city/ country being searched. This was programmed using Google APIs.
  • Marketing came up with the need for ads - leaderboard and sidebar and we had to fit these in
  • An Events Calendar was programmed from ground up, as per the design for Events

The import of prior issues was debated, captured into excel sheets, reviewed, and reviewed some more. Scripts were written for import. Scripts were written to test the integrity of the data input before import. And everything came together in August, 2014.

6 magazine issues were imported before the launch was announced on August 14. The NGTI team went in and styled these quickly using the tools we had built for them. 

The final build had 20 different templates. In retrospect, we could have rationalised these too to fewer. But these came in bit by bit for the build and there was little we could do there as we couldn’t see the whole, before it arrived. The NGTI team was trained on the backend operations as part of the build itself, so by the time we had completed the site, they were up and ready to input. 

The project is still in beta for a few days. Optimization using just compression of CSS & JS works fine for speed. The site works like a charm now.

Thanks everyone

Thanks are due to Processwire and the amazing system and set of modules that are in place. 

  • Thank you Ryan Cramer. We don’t have to tell you how much we enjoy working with this system, after coming from Drupal and WordPress. 
  • Thanks to all the lovely folks on the PW forum who had answers to niggling issues we had. 

Key Tools, Systems used:

  • Processwire 2.4 CMS with Foundation 4.0 framework
  • Hannah Code for short codes in the editor for style application
  • Event Calendar was coded ground up
  • Form Builder was used for front end forms
  • CK Editor, for text area editing with Image extra for description and tags
  • ProCache - for server level caching
  • Video Embeds and Images used field uploads
  • Image Captions & Tags using image extra fields
  • Scheduler, for advanced date publishing
  • AIOM - for compressing JS and CSS for speed improvements
  • MailChimp Integration for Newsletter
  • Disqus Integration for Comments
  • Integration of Facebook, Instagram, Google Maps via API
  • Integration and customisation of Google Search
  • Integration of DoubleClick and Adsense for advertising

NGTI.png

  • Like 37
Link to comment
Share on other sites
Nicolas Sr. Member

Nicolas

Posted
Posted

ChiefPundit,

Congratulations looks for this beautiful site. Great use case to showcase to my leads.

There's a little delay in page display as seen from Paris (France). Maybe some ProCache tweaks could help in this area.

Regards

Link to comment
Share on other sites
Christophe Hero Member

Christophe

Posted
Posted

Hello,

I've just really enjoyed reading this case study :)!

Just for information, mailerlite is another interesting email newsletter solution ("Email Marketing Software, Services and Newsletters").

Edit: a "Forever Free Plan" and affordable "Small Business Plans" now -> www.mailerlite.com/pricing

And tinyletter.com and sendy.co

  • Like 1
Link to comment
Share on other sites
Pete Hero Member

Pete

Posted
Posted

Thanks for sharing a really beautiful site with us!

I like this project for so many reasons, but the main one is it is a perfect showcase of what you can do in ProcessWire with a little knowledge and time.

15 days to convert everything from Drupal to ProcessWire? Wow, that's quite something for this site. Did you have all the content already in Drupal so it was a case of moving everything over? Or was it more 15 days to get ProcessWire set up for all of the various content types and data entry came later? I know you can build things very fast in ProcessWire and with a dedicated team of people working on it it must be an even faster experience :)

Again, a perfect example to anyone wondering what relatively-unknown system can do - certainly another site I will be pointing people to to allay any fears around whether ProcessWire is capable of delivering complex sites.

Hope you don't mind, but I linked to the site a couple of times in your original post - once when you first mention the revamped site and also made the screenshot clickable to the site, just so folks don't miss it.

EDIT: When you get to the 404 page, it says "NULL" in the top-left corner. I saw it due to a typo, so no broken links or anything like that :)

  • Like 3
Link to comment
Share on other sites
ChiefPundit Jr. Member

ChiefPundit

Posted
  • Author
Posted

Thanks a ton Pete for the on-page links. I'd forgotten that bit when I wrote the post.

Just to clarify. We didn't build the whole site in Drupal. We had started in earnest on it. We had a few content types ready, one entire magazine was inputted, the gallery was tested and some social stuff such as Instagram and Facebook were being experimented with. We had also gone ahead with some styling on Drupal for the demo. It was after all this that we decided to switch to Processwire. Data Entry came much later, as you've guessed. 

Processwire is simply remarkable for sites like these.

The key things for the team here were:

>> Easy to understand and work with [learning curve compared to other CMS is negligible]

>> Fast [no code bloat]

>> Flexible for both programming and theming

>> Scalable, for publisher/user driven content sites as in National Geographic Traveller India

I guess that we were also lucky in that we had this wonderful project to work on, were experimenting with Processwire at that precise time, and then decided to shift to Processwire from Drupal. That's one heck of a karmic combination of events.

Will check the 404 bit, thanks.

  • Like 4
Link to comment
Share on other sites
Pete Hero Member

Pete

Posted
Posted

Hehe, you might find those karmic combinations come up more and more in future - there have been many occasions here where a feature or module is released just as several of us need it in projects :)

In the early days I likened the experience of working with ProcessWire as being "how I would have built a CMS had I the time or skills to do so" because it seemed to solve all the problems I had as a matter of course whilst not getting in the say.

It's remarkably intuitive once you get going with it and it's really a load off your mind, leaving you to build a site how you want. Having possibly the most active developer I've seen at the helm is a large part of that, as is his willingness to take on board suggestions (that sort of thing is often met with skepticism or resistance elsewhere whereas it opens up a valuable and rewarding dialogue here).

Plus it makes working with a CMS fun again. That's a huge part of why the community is as good as it is :)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...