Food Marketing & Technology Magazine, India, is an Indian edition of a German publication. It is a comprehensive food and beverage magazine connecting sellers with buyers through international quality content. The magazine covers the entire spectrum of the food industry, including policy matters. Food Marketing & Technology Magazine used to be a print magazine issued every month, but since the need for brand-collaborated content has expanded, they decided to move their business to a digital platform. Code Inventive was invited to make the new digital version of Food Marketing & Technology Magazine.
One particularity of the print version of Food Marketing & Technology Magazine is that every issue had a different style, and themes were different every month. In a print magazine, everything is regulated by a designer, and there are no technological restrictions. The designer has total independence to play with various typographies and layouts on every page if they want. However, for a digital magazine of the food industry, we had to come up with one consistent style using a custom design, and we had to keep in mind that the person who uploads the articles won’t be a design engineer. The challenge was to find the stability between being smart and elegant but also functional and an easy to use platform while having an ease of access to deploy content. However, we have a big breakthrough in digital to make things interesting: interactivity, user friendly, and customer-driven.
Our Approach In Art Direction & Technology
We really wanted to give a column and custom feeling to the design and navigation. We took our inspiration directly from top magazines of the world in the food niche: giving a lot of place to impressive visuals, custom layout, and white spaces, and having big typographies as graphic elements.
A custom design was prepared to check the look and feel of the web magazine portal. We wanted the artistic approach to be minimalist, elegant, business-oriented, stylish, and elegant.
Post design approval, an HTML file was created.
We also sought to give this business feeling through crafted design frames, featured images, videos, and transitions. The website uses an HTML framework refined to our needs. Its particular advantage is its easy handling of page transitions. Everything is written in plain HTML to get the best out of the performance of the browser. A unique and custom made UI interaction was developed on the homepage.
An Unconventional Homepage
There are so many great print food magazines, but not so many digital magazines are as impressive as they often follow a standard interface. We wanted to change this by having a unique custom-designed homepage that works as an information delivery platform.
Our homepage works in 2 ways: horizontal slides, vertical scrolling, add images with video and magazine cover towards the end.
We considered three types of carousel:
The homepage acts as a mirror of all the categories. Each slide corresponds to one category. The menu was created category wise too.
The first fold covered the ads for Food Marketing & Technology Magazine and daily news and updates.
Call to action to subscribe to the newsletter was added beneath.
The Following fold reflected the categories with an advertisement towards the right.
Each following fold is a carousel with the 8 latest articles by category.
Call to action, video, and magazine covers redirecting to the following magazines with a custom footer were also integrated.
It was not so easy to make a magazine web portal user-friendly. We tried and tested to add more UI, but it was looking too complicated. We also tried to remove the add slider idea and keep only 4 articles per category in a single fold, but it was getting boring.
Technically, it was quite unusual to build a digital magazine based on this custom layout, but it was interesting and creative to play around with unique custom coding and discover hidden features of CSS, HTML, and WP, such as mobile breakpoints management and more.
Style and Detailing
We wanted to make the Food Marketing & Technology Magazine magazine as stylish and elegant as possible by applying the fixed UI elements into design pieces. The main titles all over with relevant call to actions became a big part of our identity by using the image texture and custom coding. This was done through the custom coding of CSS3. We made the category filters a design element by highlighting the accurate typography. We added some interactive details such as scrolling, creative, effects, and a presentable menu with nice interactions using the custom CSS.
Article Modules Using WP CMS
Finding the right layout that is interesting, and works with whatever the client uploads is a big challenge. It was not possible to maintain the functionalities in a pre-built theme. Whatever content our client uploads, it has to look great. The inbuilt features worked with some fixed elements: a featured image, a description, a title. Rest everything was custom designed and developed. We designed a series of modules that play with different margins, scaling, padding, font, features, etc. which gives a choice to broaden the page and can work for any type of content upload. The backend is built with WordPress CMS, and to give the frontend an elegant look, folds of custom coding were done at the backend.
Crafted Experience Through Custom Transitions
We used covers and loading sequences to show off the elegant featured image visuals in the magazine cover upload section, which redirects to the magazine. The developments were an essential part of the project. The main challenge with transitions was to be able to understand whichever cover the user triggers the right magazine with paid right assets should load. Fundamentally, what we really wanted to achieve as a developer on the frontend was to implement a smooth and fluid experience of navigation through the whole website, and we successfully managed the same.
Users on Website
Increase in Sales
The decrease in bounce rate
A clean, user-friendly look and feel of a digital magazine website.
Easy to access and easy to handle.
Post-new website launch, Food Marketing & Technology Magazine had 73,000+ users during the 1st month.
The bounce rate got reduced to 58%.
Food Marketing & Technology Magazine was able to create a huge email list for subscribers, hence increased the number of potential buyers.
Through the pixel tracking code, the buyer persona’s were getting developed, which indeed helped to increase sales.
Goals were set to monitor the outgoing traffic to the ads. Hence the probability of getting more advertisements on the website was increased.
With on-site SEO, FMT magazine started to rank for more than 1500 keywords within 2 months.
“Monarch Web World has consistently provided a strong level of service and quality of deliverables. I am impressed with the website. Fully committed to securing satisfaction, they offer honest and useful advice to maximize the budget. A skilled team, they have the client’s best interests at heart in all of their consultation.“
Let’s work together.
Do you own your own business, who is trying to rank better on search engines? Are you looking for better ways to promote your product? If so, then you need to stay up-to-date with all the SEO trends, and our product “Voice Search” is built for you. Voice Search SEO is...
Needs are insatiable and will only keep arising once the existing ones are satisfied. The exploitation of this trait of humans is the reason why businesses exist. With the advent of the Internet, and hence business websites, this craze for exploitation has taken a new...
94% of online denizens won't trust a site that doesn't look pretty enough. They have practically zero tolerance for anything less than their expectation, especially in a virtual web filled with stunning pages. In such a cruel world, just to get an opportunity to woo...