Sector(s)
Team Members
Project Team
Our initial core team for Phase 1 consisted of a designer, Drupal developer, lead Drupal developer, QA tester, and project manager, but we also had some extra site builder and themer resources for the last sprints.
Phase 2's team included a Drupal developer, lead developer, front-end developer, QA tester, and project manager.
During the whole development lifecycle, we worked closely together with the 1843 Magazine (Intelligent Life) product owner, and The Economist's editorial, ad ops, analytics, and digital teams. For the Pugpig integration and app development tasks, we collaborated with the Kaldor team.
Visit the site
Visit the siteOrganizations Involved
Community contributions
As result of this project, some contributions were made to the Apple News module (but not yet approved).
1843 Magazine (formerly Intelligent Life) is a bi-monthly, premium magazine published by the Economist Group, which describes its coverage as "the arts, style, food, wine, cars, travel and anything else under the sun, as long as it’s interesting."
But the magazine’s digital presence was failing to do the print edition justice. The web, mobile, and tablet platforms weren't integrated, so it took a lot of duplicated effort for content to be created for different device types. Also, there was little aesthetic engagement for consumers. The digital magazine wasn't visually engaging; the quality of its writing and imagery didn't represent the brand well.
Beginning in March 2016, Economist Group relaunched and rebranded its high-end magazine, Intelligent Life, with a new name, look, and feel, with the aim of broadening and enhancing its coverage beyond Europe to include America and Asia.
On this project, Cameron & Wilding worked with The Economist on 2 separate phases:
- Redevelopment of Intelligent Life (timeline: April- October, 2015)
- Rebrand of Intelligent Life to 1843 (timeline: December, 2015 - March, 2016)
Phase 1 included large redevelopment tasks, with energy focused on optimizing the structure of the website, and creating more intuitive user experiences and content management. The system we built allowed the editors to manage app and web content as one. Using Drupal’s flexible permission system, we developed a simple workflow to allow the team to have content published for the app, while having the ability to delay publishing to the website at a later date.
Phase 2, the rebranding, included building a fully responsive tile-based layout for the website and adjusting the existing page layouts to align with the brand changes. This increased the relevance of the digital offering to subsequently increase revenue and advertising options for 1843 sponsors.
About the project
Phase 1: Redevelopment and redesign of Intelligent Life
Optimizing website structure
Cameron & Wilding started the development with a team-wide meeting, including the 1843 Magazine (then Intelligent Life) editorial and digital department. We discussed the project aims, current website statistics, brand definition, and painful points of the previous solution.
After reviewing the existing information architecture and investigating existing content types, we started to work on the new, optimized structure of the website. We focused on creating more intuitive user experiences and content management workflows for the future website and app.
Workflow
The editorial team was previously preparing the digital content no less than 3 times: once each for their website, tablet app, and mobile app. With the new website, Drupal is used as the primary source for all digital content, publishing it to the website and making it available as a separate app through Kaldor's PugPig.
Content is formatted using CKEditor, then delivered to the app using a custom theme we built using the HTML and CSS provided by Kaldor. A separate fully responsive theme is used for content displayed on the website.
Using Drupal’s flexible permission system, we developed a simple workflow to allow the team to have content published for the app, while having the ability to delay publishing to the website at a later date.
Design and UX
In print, the Intelligent Life experience was a rich immersive one, where the extraordinary quality of the writing and photography were reinforced by the luxurious design and feel of the magazine.
To match the high-end reading experience of the magazine, our designer created a modern, mobile-first design. The design focused on beautiful imagery to ensure a pleasant user experience, regardless of device or screen size.
For the web theme, we used some of the best practices from the front-end world. We used a Gulp-based workflow with Sass for our CSS, and used Hologram and SassDoc for our documentation.
Migration
We needed to do a full data migration to fully replace the old site whilst keeping existing content. However, since it was a standard Drupal migration from a previous version, we encountered several challenges. The legacy system had been loose on structuring content. The new system applied special fields to content that had previously been merged into large texts (including hardcoding links and in-site resources).
We wrote a custom HTML parser engine to transform the old WYSIWYG text to the new version. For example, it would grab snippets out of the text for the new dedicated content fields, and then fixed the leftover HTML. This saved content editors a lot of time by ensuring they would not have to amend legacy content.
The Intelligent Life website after Phase 1 redesign and development
Phase 2: Relaunch and rebrand of Intelligent Life to 1843
Beginning in March 2016, the Economist Group relaunched and rebranded its high-end magazine, Intelligent Life, with a new name, look. and feel. The new brand was named 1843 for the year The Economist was founded.
The strategy was to relaunch the magazine as a global publication targeting well-educated, affluent readers around the world. We helped them transform the existing Intelligent Life website launched in October 2015 to meet the business needs of the relaunch and rebrand.
The aim of the relaunch was to broaden and enhance the coverage of 1843 beyond Europe to include America and Asia. The magazine also extended its coverage to new sections devoted to tech, food and drink, art, design, and body and mind. The Economist Group's goal was to launch the redesigned site on March 9, 2016, to coincide with the print issue hitting newsstands with an April/May cover. We had to ensure that, all on the very same day, the website went live smoothly with all its new functionalities and features, as well as all former Intelligent Life content and social accounts. The app also transitioned from Intelligent Life to 1843 with all the design and functional changes.
New website layout and theme
Following the designs provided by the 1843 team, we built a fully responsive tile-based layout for the website and adjusted the existing page layouts to align with the brand changes.
Home page of the brand new 1843 Magazine website after rebrand and relaunch
To get the best out of the layout possibilities, we provided full editorial control over the home page and section page tiles. There are a lot of possible permutations of colors, opacity, sizes, and positions of images, text, and overlays.
Text, overlay, color and opacity configuration options for tiles in the CMS
Due to the complexities of the design, the theming needed to be well maintained and flexible. We created a number of pieces of custom functionality to support this, allowing rapid adjustments to fonts, spacing, and layout. For example, the number of available font styles is very large, with some of the fonts adjusting size and line-height at different breakpoints. We created Sass maps to hold the data, integrating the maps with a mixin to apply the styles to a given element—which meant less manual work and, therefore, faster development.
We also gave the editorial team the ability to make different dimension image crops from one single uploaded high resolution image, to ensure the appropriate display on different size tiles. To help the editorial team create the best look for article tiles, we created preview functionality that allows the editors to check the end result before publishing an article.
Applying multiple, different dimension crops of one single uploaded image
As the app had to reflect the design and functional changes, Kaldor delivered new HTML templates for the app that we integrated with the CMS and all it's configuration options.
Back-end adjustments
Besides re-theming the existing Drupal 7 website, we also created new content types and adjusted a few existing ones to support the new website functionality. The app delivered to Android and iOS devices is also fed by the site, and the templates for it were updated accordingly.
The information architecture of the site was adjusted to meet the new content strategy and business requirements. It was essential to ensure appropriate redirection of former Intelligent Life website content after switching to 1843magazine.com. The project required SEO and website security improvements that we delivered in collaboration with The Economist team.
The following SEO improvements have been delivered in Phase 2:
- Content pages title metatags
- Google News sitemap
- Google search console profile
- Schema.org organisation mark upon homepage
- Declaring xml and Google News sitemap in the robot.txt file
- Home page and section pages metadata
- H1 H2 title improvements
- Fixing 404 crawl errors
- Simplifying intelligentlifemagazine.com and 1843magazine.com directory
- 301 redirects
- Paginated URLs
Advertising
Since the website went live without a paywall, 1843 relies heavily on advertising for revenue. We improved and built more flexible advertising possibilities to create more commercial opportunities for brand partners. With these, they can create highly customized content in partnership with the editorial team.
Project outcome
Ultimately, Cameron & Wilding were able to greatly enhance imagery with a lot of built in flexibility, improve security and SEO, create a more engaging user interface, develop a fully responsive website, and provide a smooth transition from Intelligent Life to 1843. During the well-structured and productive project, a lot was delivered in a very short period of time. The result: a really appealing website with enhanced editing tools that provide a lot of flexibility to the editorial team.
Print issue page of the brand new 1843 Magazine website after rebrand and relaunch
The digital 1843 Magazine launched on May 7, 2016. If we compare statistics from March 7 to May 19 for both 2015 and 2016, the 2016 results are the following:
- Page Views: increased by 227%
- Visits: increased by 295%
- Uniques: increased by 263%
- Reduced duplication by 80%
This means that there are many more visits to the hub, therefore successfully addressing the objective of enhancing the coverage and readership of the publication. Prior to the relaunch, processes took 5 times as long to get through because the same work was repeated over 5 platforms. Essentially, we cut down work process up to 80% by reducing 5-time duplication processes into one streamlined process.
Key benefits of the project:
- App and web content are managed as one
- Cross-platform development
- Greatly enhanced imagery with a lot of built in flexibility
- Improved security and SEO
- Mobile first, fully responsive website
- More engaging user interface
- Smooth transition from Intelligent life to 1843
As a result of the successful work with The Economist - 1843 Magazine we have recently been shortlisted as a finalist for DADI award; 'News/Media/Publishing Website, App of Campaign'
Why Drupal was chosen
The Economist has been using Drupal for a long time, including for the previous versions of the 1843 Magazine (formerly Intelligent Life) website. Besides being committed to Drupal, the editorial team's familiarity with it ensured they learned to interact with the new site quickly, in spite of a total rebuild.
From a development point of view, the power, flexibility, and amount of “out of the box” features meant Drupal was the prime CMS candidate for this project. 1843 Magazine has a lot of content, required traditional user authentication, and needed to be easily altered by using contributed modules. Drupal had the capabilities of meeting all the client's requirements, including custom editorial workflows, custom publishing options, and web features, and provided a solid base for future website improvements and maintenance.
Technical Specifications
Drupal version:
We relied heavily on our in-house-built structuring framework (leveraging some useful Symfony components), Cwtools. This helped us apply fully object-oriented design, separating logic for content, workflows and themes.
By using a combination of Panels, Views, Entityqueue and Paragraphs, we were able to give the editorial users a great deal of flexibility to create and maintain up-to-date, fresh landing pages throughout the site. Entityqueue provide the ability for the editors to control the order of their content, and a handful of custom style plugins gives them control of various styles of the content. Also, the editors can choose which articles to promote to the homepage or landing pages, and in which order. Paragraphs gave the editors the ability to create content adapted to the publisher guidelines in a fast and reliable way. The less HTML the editors must add into the articles, the better. Panels’s in-place editor brought this all together to give editors a real-time view of the changes they make.
Inside the node edit form, we used CKEditor and field groups to provide a clean and flexible UI for the editors when preparing content. With content being published to both the web and the app, we needed a way for editors to be able to easily style content with consistent results. We extracted page level display logic into fields, and through CKEditor’s extensible plugin system, editors were given a range of custom classes to add to their markup—including styles for drop cap text, inline pull quotes, embedded videos, and various paragraph styles to match the content. Manual Crop provides a quick and easy win for editors to gain control over image cropping and positioning for different contexts.
The Insert module’s extensible system allowed us to improve the markup for inline images, letting editors choose from a variety of styles and have modern HTML5 markup for their inline figures and captions.
When it came to migrating the existing articles out of the previous Drupal 6 system, we couldn’t look past the Migrate module as the base for the migration.
We used the Render cache module and extensive use of entity view modes to help improve the page speed. With plenty of taxonomy listing pages, landing pages, and author profiles, the Render cache module helped us cut down rendering time by caching the rendered entities.
The Apple News and Flipboard RSS modules allowed us to integrate the articles with these platforms, so the editors only need to create an article once but can publish it in several places.
The website was already built and the revamp had to be applied into production while editors were still adding new articles each day. The Features module allowed us to move all the changes via code, so all the modifications could be reproduced once we deployed to production without any manual intervention. We enabled the continuous development procedure throughout the project to ensure that nothing was left to fate.
DFP (DoubleClick for Publishers) provided a seamless integration with The Economist's advertising platform. We used this module's handlers to create different ad displays, integrating them inside the WYSIWYG (as a button) or as Paragraphs bundle.
The Context module allowed us to create specific conditions to display different information blocks across the website, no matter how specific they were.
The Metatag module increased the way editors can interact with content changing their metatags to improve SEO impact.
