Jump to content
ChiefPundit

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

ChiefPundit, welcome to PW forums! Cool first post! Thanks for writing the case study. Greate write-up!

That's a really beautiful site you got there! Maybe add a link to your site in your OP, thanks.

Edited by kongondo

Share this post


Link to post
Share on other sites

Very cool story!

And a very wise decision to switch to PW without telling the client to early. (only after they have seen it live)

it makes me: :):grin::biggrin::grin::-)

  • Like 1

Share this post


Link to post
Share on other sites

Wow, nice case-study!

The site performs well, visiting from The Netherlands. Did you develop a custom module for "Scheduler, for advanced date publishing"?

Share this post


Link to post
Share on other sites

The site is not so fast from where I and Google PageSpeed servers are. I think it is worth spending time to make it load a bit quicker.

The sidebar overlaps main content in around 800px wide. Not sure if there are many devices with that screen width, but still...

Looks really good. Exellent job, ChiefPundit!

  • Like 1

Share this post


Link to post
Share on other sites

Appreciate your warm comments Ivan. We are working to improve the speed with ProCache.

There are a lot of page exceptions to consider here so there has been a bit of delay on this. Shall heed your comments on the 800 px width bit. 

Share this post


Link to post
Share on other sites

ChiefPundit, welcome aboard! And such a great read :) It's really great to see content-rich sites built in PW, and so well-designed.

As for load time, seems pretty good here in South Africa. Though, every now and then, the initial request-fetch takes a while.

Share this post


Link to post
Share on other sites

One little point:


There's a lot of `console.log` going on. Somehow there's in my mind that that could break processing of javascript in old versions of IE. (Maybe i'm wrong) Never the less I want to mention it   ;)


  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

There are a lot of page exceptions to consider here so there has been a bit of delay on this. Shall heed your comments on the 800 px width bit. 

Just scale your browser down to about 800px and you'll see. The dropdown menu also gets somehow broken on this size.

Share this post


Link to post
Share on other sites

Very interesting articles ChiefPundit, I feel some RSS might be beneficial to the overall project. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By mscore
      Making a minimalist site with Processwire is pure pleasure. Here is one for my photography.
      http://www.mikael.siirila.net/
      Enjoy

    • By Kevin C. McCarthy
      Greetings PW Community,
      A long time ago I was using Pixelpost as my go-to photoblogging script. It had limitations, but it was good for what it was: a PHP script to allow me to post one photo per day. It's been nearly 7 years since it was updated and as I'm looking to get back into photoblogging, I'm wondering how I can accomplish the same tasks but ultimately even better with Processwire. The biggest appeal to me is the ability to go above and beyond what Pixelpost provided, and with my very limited PHP knowledge, this is a huge plus. I've attached a screenshot of the back-end for reference, but I basically want to create a page, when posting for the day, allows me to have all (or most) of those options.
      The main site had the ability to load the latest post as it's homepage, as well as cycle completely around, back and front, with navigation buttons. It also allowed EXIF data to be extruded and displayed in the description. If you would like to see what it came out like, you can check it out in it's current (though neglected) form here.
      My first goal is simply, to the best of my ability, duplicate the old site's function. And then, as I figure that out, expand it outward with various other features that I'm planning such as uploading more than one image at a time (so there'd be this "halo" image that you can click around and see other shots--maybe up to 10--that I took on a particular trip). Eventually, expanding to adding locked-down galleries for photography clients.
      Does anyone have a way that might be easy to digest as to how I can accomplish this?
      I'm already thinking fields for (at least how I'd name them) "photoblog_img", "photoblog_img_title", "photoblog_img_desc", "photoblog_img_tag" (not sure how tags would work), "photoblog_img_cat" at the very least. I'm not sure how I'd handle comments or EXIF data or date/future posting.
      Thank you!

    • By benbyf
      Hi,
      three new sites i've worked on recently going live:
      Photographer - http://www.samhofman.co.uk/
      Photographer - http://www.domeni.co.uk/
      Illustrator / 3D artist - http://www.mircopinna.com/
    • By Jonathan Lahijani
      It's been an extremely busy last few months for me, but I finally managed to launch Christopher Todd Studios:
      http://christophertoddstudios.com/
      I'm using my go-to frontend approach, which is based off of Sage.
      Some frontend packages I'm using include:
      Bootstrap SASS Animsition for the page transitions Slider Revolution for the home page slideshow (using the Ken Burns effect) Slick Carousel for the portfolio slideshows (with the lazy loading feature enabled... very important) Ekko Lightbox for the video modals Headroom.js for the navbar hide/show interaction jQuery Lazyload for other image lazy loading (like the blog) MatchHeight for some areas that need matched heights ResponseJS for loading content when a specific breakpoint is hit (rather than it being loaded but hidden, which is bad for performance and sloppy; very important) Linearicons I wrote the slideout navigation menu myself.  Just some CSS and JS.
      My goal was to make sure this site is fast and doesn't feel clunky.  I feel it has met that objective especially with the performance and optimizations that have been done (there's still a few I will eventually get to and squeeze out even more performance).
      In terms of ProcessWire modules being used:
      FormBuilder is being used and it's submitting results to Tave, which is a lead management system.  FormBuilder made this easy with its 'Send duplicate copies to to another URL or 3rd Party Service' feature. Image Extra Social Share Buttons Page List Image Label Hannacode The original site was based on WordPress and had many blog articles.  Using Ryan's great writeup, I imported all the posts into ProcessWire.  The blog setup is self made and inspired by the Blog Profile (not using the blog module).  The original site also didn't have permalinks enabled in WordPress, so I wrote some code to capture the necessary URL variables and forward them to the correct page so that old links are maintained, which is also good for maintaining SEO.
      The client loves ProcessWire and its simplicity.
    • By benbyf
      Hey Everyone!
      right I'm nearing the end of development on this photography agencies site and I was wondering if anyone could have a quick look for bugs etc.
      http://nicegrp.co.uk/dev/hs/
      It's not quite finished so there may be obvious stuff, also there's ALOT, going on in the front end, for example:
      - pages are cached client side (to prevent unnecessary ajax requests for seen pages)
      - Ajax page requests & pushstate
      - pdf module for gallery pages
      - slideshow animations
      - add image to your custom gallery
      - alot of menu logic
      - responsive
      - lazy loading images on gallery pages
      Let me know what you think.
      Thanks
×
×
  • Create New...