Recently Browsing 0 members
No registered users viewing this page.
Making a minimalist site with Processwire is pure pleasure. Here is one for my photography.
By Jonathan Lahijani
It's been an extremely busy last few months for me, but I finally managed to launch Christopher Todd Studios:
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.
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.
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.
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 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
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.
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
- lazy loading images on gallery pages
Let me know what you think.