Men’s Health Magazine is a globally recognised, premium brand in the burgeoning men’s grooming industry with a vast male audience throughout the world. They currently have 35 editions, published and distributed in 59 countries. Their websites draw enormous traffic on a daily basis rendering a stable and robust web property an absolute necessity. As a part of their expansion strategy, they recently entered the Indian territory - a 1.3 billion consumer base potential.
The Men’s Health India’s website was envisaged to be a content intensive platform with a balance of multimedia interaction for greater consumer engagement.
OpenSense Labs love materialising digital experiences imagined with Drupal and participated in the bid event, resulting in us being awarded with the opportunity to design & develop the Men’s Health India website.
About the project
Men’s Health elucidates and ignites conversations about men's lifestyle, their social interactions and their overall holistic well being. The primary objective of the project was to convey this wisdom in an easily digestible manner & develop a platform capable of handling large magnitude of end-users accessing and experiencing content in a visually interactive manner.
Lightning - The publishing distribution is used as a foundation for this project coupled with AWS hosting services.
Goal: Easy to manage for Content Writers/Editors
Apart from focusing on the end-user experience, much attention and deliberation is put into enhancing the editor experience. Workflows are tailored to map their organization process for easier adaption. Further, content architecture uses intuitive naming conventions so less technology inclined people can easily navigate.
Goal: Dynamic content architecture adjustable to wide range to categories
Men’s Health churn huge amount of editorial pieces for a wide range of topics. Such content needs to be easily retrievable with an efficient tagging system in place. Keeping in mind the architecture dynamism, we developed a solution using a 2 level content structure, coupled with a tagging system. Editors can easily change the architecture and it will automatically reflect in the menu and page layouts. For a powerful and granular search, we employed Apache Solr.
Goal: Responsive & browser agnostic
Men’s Health India’s website is optimized for any and all screen sizes, from a large desktop monitor to a pocket-sized smartphone. Responsive design is especially important to a publishing website whose goal it is to attract & engage tech savvy men.
Development Process
The website was launched on 11 January 2018 & took 2 months for development and sculpting. We used our trusted Agile process and divided the project into 3 Sprints with a functional product at the end of each. A broader view is listed below:
- Content Architecture and functional integration
- CSS/ HTML & performance enhancement
- Load testing and UAT
- The word satisfaction would not do justice to our client’s response.
Challenge: Balance trade-off between images and performance
Men’s Health India is an image intensive website which posed a challenge from performance perspective. Having 60+ teaser images on it’s homepage was to the detriment of the page load time. To balance this tradeoff, image optimization pipelines were put in place by using image lazyloader. Browser caching was used to mitigate this further. The most drastic impact was made using S3 bucket, which reduced the load time by 40% due to its parallel fetch system.
Why Drupal was chosen
Drupal is an optimum choice for publishers with complex content architecture hence the selection of a CMS was a no brainer. With Drupal OpenSense Labs were enabled to leverage it’s multiple offerings such as:
- High content flow
- Numerous stable API integrations
- Easy workflow management
- Flexible content architecture
- Robust and Scalable
Drupal provided the perfect foundation & a stable outlook while simultaneously handling large swathes of content. In order to develop a stable, scalable, and robust solution, Drupal fit perfectly in the scheme of things. Further, Drupal is already used by multiple other Men’s Health editions.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
1.Lightning (Distribution) : It is a Drupal distribution for publishers which enables developers to create great authoring experiences and empower editorial teams. It is readily integrable with Media modules, allowing a content writer to easily add Tweets, Instagram Post, and Videos into the content feed. It further has critical modules related to Panels such as IPE, Panelizer, and etc for dynamic layouts. The entire layout of the website can be altered through the Admin interface without making any change in the theme layer.
Men's Health website employs both of these premier features. The layout consists of blocks of articles related to all the important categories. Administrator can effortlessly place them anywhere on the homepage as per their discretion.
2. Addtoany (Module) : This module assists in inserting social media sharing buttons on any kind of pages in Drupal.
It is an extremely critical functionality for article intensive websites as most of the traffic is pushed through Social Media. By leveraging Addtoany, articles can be shared on Facebook, Twitter, and Google Plus.
3.Metatag (Module) : Metatag module doesn’t need any kind of introduction for how does it benefit. Meta-tag provides a submodule ‘Metatag Open graph’ which helps in adding important tags related to social networking websites.
Whenever a Men’s Health article link is posted on any social media platform, they automatically fetch article associated fields such as image, author and a brief introduction of the article. This multiplies the chances of the articles getting clicked, hence improving the click through rate.
4. Disqus (Module) : Disqus is a suitable replacement for Drupal’s default comment funtionality. Users can easily post comments on the content page without signing into the website. Disqus comment boxes have been used in all the article pages of Men’s Health. Which will play an important role in driving user-engagement within the website.
5.Workbench Moderation (Module) : Allows us to define the status of every content and provide granular permission level for every role.
Men’s Health user pattern is : Readers (Anonymous), Content writer and Editor. Now, according to the requirement, only the Editor should have the permission to publish Content and content writers should only save drafts or set the status to ‘Needs review’. Workflow module was used to setup this kind of arrangement.
6. DFP for publishers (Module): This module helped in placing Google DFP ads on the website.
SEO Modules used in Men’s Health:
- Meta Tag
- Simple Sitemap
- Pathauto
- Google Analytics
Performance Module used in Men’s Health
Image API Optimisation: To compress images and boost load time. Critical for image-laden websites.
Redis: To server cache tags with Redis, instead of MySQL. Plays a crucial role in scaling application.
Advanced CSS and JS Aggregation: To combine and minify all the CSS and JS used in the website.
Fast 404: Waste less resources in showing a 404 page.
Search Improvement Modules used:
Search API Solr: To provide a Solr powered search to the user and help them easily find content relevant to them.
Facets: Allow filtering of content on the basis of category.
Theming
Zurb Foundation Theme: This was used as the base theme for Men’s health’s website. Various requirements such as a Responsive Grid based design, a scrollable video field, and etc were achieved with using this theme.
Block Class: Used for adding class attributes around Block’s Div elements and thus saving us the trouble of overriding the Twig template of each and every block. Saved plenty of time.
Owl Carousel: It was used to add very interactive carousels in the website at various places for better experience.
