March 25, 2020
Last updated: March 30, 2022
Table of Contents
Anything with a fine finish definitely would have had a rough start. Similarly, the Calibraint website also had its own path of working plan and execution, right from the beginning. So, in this article lets take a stroll down the website roadmap and get to know the stages of development and design right from the scratch.
The initial stage of website development involved normal Html and jQuery and in the process of scaling up its performance, it was planned to get it converted into angular. Fortunately, it got started with a version of angular 7 and with node js for backend (mailing purpose). The main objective was to achieve the SEO attributes so that the website gets crawled with ease. This was made possible with the angular concept called angular universal popularly known as Server-Side Rendering (SSR).
The configuration of SSR got done using the ts-node and webpack to set up the build. Eventually implemented this angular universal with some features like angular material design, ngx-carousel, etc…..
The struggle was real to support ngx-carousel in angular universal, as the ngx-carousel was not getting supported for angular universal right then, but fixed with the help of jquery.
It was a year later, that we planned for a relaunch of the website with new design and enhanced features. The process was planned and got executed over a period of 3 to 4 months.
Meantime, the development team successfully got the website upgraded from angular version 7 to 8 then 8 to 9.
This time it was even easier to remove jquery for ngx-carousel as ngx-carousel favorably started supporting its carousel things to angular universal. Further to this yet another big step was achieved by imparting PWA popularly know as a service worker. This is basically used to support offline (once you visited these sites these pages are cached). This allows you to see entire information offline but the only disadvantage is that you can’t chat or apply for the job as you are offline.
In the mid of 2018, the company decided to rebrand with a new logo. On that note, our team decided to build on that thought and kickstart with a new website. Taking it further the attributes were strategized as follows,
– To use and practice the Minimal Design Style
– To make use of Illustrations instead of Photos
– Font Usage to be Roboto (commonly known for its good readability)
– Add certain CSS animations and gif animation for user engagement
– Brand Primary color & Logo color to be Orange
– To newly add a blog page to the design
Over the course of time, the website design faced certain issues that led the SEO score down. The problems were like,
– Increased loading time
– Large Image and Gif File size
– Too much of highlighted sections
– No section for lead generations
– Mozhi Chatbot was missing out certain functionalities
– Lots of illustrations and more content reduced the readability
These problems badly wanted a solution from our end and so our team started sorting it out one by one. Firstly, we reduced the illustrations and used the same type of vector all over the website. Instead of using orange alone as the primary color, we added black as a secondary color. The combination of Orange and Black gave an elegant and appealing look to the website.
The image sprite sizes were reduced and Gifs were removed thereby decreasing the load time. Also, added two sections on the head and footer on every page aiming for lead generation. The Mozhi Chatbot design was also updated and designed in a way to match the new design. Font used is PT Sans, it is similar to Roboto, PT Sans Font has high readability. The use of White space gives an appealing and minimal look to the website.
In the thought of yielding high-grade online presence and to improve the user traffic, the website was optimized in accordance with the SEO standards. Initially, the website comprised of 11 pages, of this, the core service pages incorporated the keyword & content strategy implementation. It also had a separate blog section for rich content aiming to improve user engagement and to build a brand identity. Also, the website had an “I Chat” integrated as a chat assistant that handles all the initial level conversations with the user.
The Optimized Nodes Include:
1. Title, Meta-Description & Slug with Keywords
2. Heading “H” Tags
3. Image Alt Tag
4. Content Optimization
5. Structure Mark Up / Rich Snippets
6. 404 Page Error
Modules Implemented for Better Website Functioning
Site Map & Robots.txt File
For smooth crawling and easy identification of the site, the sitemap is being updated after every blog publish. Robots.txt file gets added to stop the search engines from crawling irrelevant pages.
Tracking Set Up
To keep track and to get the analysis on the website happenings, the Google Analytics, Search Console & Hot Jar Tracking accounts have been activated.
Keywords
The content strategy implemented for the core service pages involves the incorporation of 20+ Keywords. These keywords have their search volume ranging from 500 – 4200 that is with Medium to High Competitive edges. The blog section gets exercised with separate keywords with respect to the content.
“To overcome the website technical & SEO issues we had to come up with slight changes in the ongoing web practices.”
Calibraint Website 2.0 got launched again with 11 pages, a blog section & a privacy policy page. This time the website got recreated with high responsiveness and concentrating more on the lead generation part. “Mozhi” our chat assistant can now respond to the queries and interact with the user more efficiently. It’s also been inbuilt with a contact form in order to get the user information.
Adding on to the existing strategy, the core service pages have been incorporated with relevant keywords for home page & blog posts. Images were reduced and GIFs were eliminated to improve the website speed.
Along with Structure Markup/ Rich Snippet, new FAQ sections were added in the core service pages to boost the ranking. The website now successfully maintains an SEO Score of 94/100 and with a Desktop speed of 76/100. Now we have 1000+ visitors reaching out Calibraint website every month.
The Calibraint website team is continuously working on the up to date strategies and promises to increase its performance and build a unique brand identity for the long run.