Last week, we launched our brand-new website (https://www.infinijith.com). Now, we are receiving phenomenal responses for its vibrant new look and intuitive user interface. 

As such, the new website itself acts as one of our portfolios that highlight our expertise in using top-notch frameworks and libraries. 

It is the combined team effort that made the website unique not only in terms of design and content but also on the development end. And finally, all the hard work and dedication have been paid off. 

In this article, we will take a look at how we used Angular 7 SEO Friendly, Angular Universal, Angular Material Websites, SASS and Node.js/Express in our development stack to achieve a remarkable step, maybe only a few have done it so far.  

Choosing the development framework – Angular 7 

Initially, we had a dilemma in choosing between Laravel and Angular framework for building the website. But keeping in mind the recent popularity and benefits of the Angular framework, we decided to stick with Angular.    

We wanted to make our website Single Page Application (SPA) with Angular framework. But there came a challenge where the SPA doesn’t make the website SEO-friendly. Thanks to Angular Universal, an add-on technology that used the concept of Server-Side Rendering (SSR) to help us to achieve improved SEO for our web pages. 

As such, the feat we achieved on the development side is remarkable because we combined the advantage of both the single page application (through Angular 7) and multi-page application (through Angular Universal) to make our website incredibly fast and responsive. 

Why a Single Page Application? What are its benefits? 

The single-page application made our website to feel like you are using a native app. The navigation between different web pages performed without refreshing the whole page since SPA allows you to pre-load and cache all your pages, so you don’t need extra requests to download them.  

Further, once the SPA is loaded, it offers a better user experience by trying to simulate a “natural” environment in the browser — no page reloads, no extra wait time since all the pages are already loaded. However, SPA can lead to longer initial load times, especially if the application is large and rich in its content. 

Angular Universal: server-side rendering 

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. This process can slow down the performance of the initial loading. So, in order to optimize load times, some of the content can be parsed at server-side. For this, we integrated “Angular Universal” to generate static application pages on the server through a process called server-side rendering (SSR). 

Using server-side rendering (SSR) can accelerate the initial load of the page and then pass further rendering on to the client. It can serve web pages in response to requests from browsers and also pre-generate pages as HTML files that provide with the SEO benefit. 

What’s more? SSR has improved indexability and first page load times of our website. It is a great technique for prioritizing content that helped us to display the first meaningful content within 2 seconds to the visitors so that they won’t feel to move away from the website. 

Note: While integrating the SSR in our website, we faced certain challenges. We will discuss more on these challenges and how we solved them in our next blog. 

Interactive website with immersive design 

From a design and UI perspective, we brainstormed creative ideas to enrich user experience taking into account the usability factor. For this, we created the UI/UX design in Adobe XD and followed the trending design principles like concept-oriented images. These ideas allowed us to make the visual aspects of the site more appealing and provided with the better user experience. The following are the most notable features we implemented in our website: 

1. Vector based image 
   1. Enables visual storytelling easily 
   2. Less loading time due to smaller file size 
   3. Multicoloured gradients with vibrant color 
2. Chosen the color ‘Purple’ as it communicates the idea in a positive way 
   1. Embodies the balance of red’s stimulation and blue’s calm 
   2. Associates with royalty, value, sacredness and bravery 
3. Converted vector animations into code  

Intuitive user experience using Sass and Angular Material Websites

With the aim of making our website more interactive, we leveraged Sass, a professional grade CSS extension language for easy customization of our webpages. Sass enabled us to achieve a stable, powerful, elegant and dazzling design. 

Also, in an effort to speed up the development process and to efficiently reuse various UI components, we implemented Material Design principles and guidelines to make Angular 7 SEO Friendly - Angular Material. This way we optimized the coding and UI components such as: form controls (input, select, checkbox, etc.) and navigation patterns (menus, accordion and toolbar). 

Stunning animation view for Angular using Lottie 

In our website, we have used animation in prominent places to bring out immersive effect. For some of these animations, our developers have written code by themselves and for others, we have used a new open source tool called Lottie. With this tool, we exported animations from “After Effects” as JSON code, which helped our App developers and motion designers to place animations effortlessly.  

Lottie uses bodymovin, an Adobe After Effects plugin, to take the animation from After Effects and spits out all the required code with bodymovin.js file. It provided the following benefits: 

1. Flexible after effects features in web 
2. Manipulate your animation any way you like 
3. Small file sizes  

Lazy loading feature 

Lazy loading is an Angular technique that allowed us to load feature components asynchronously when a specific route is activated. In our website, we used this technique especially for our blog section. Since our blog pages carry more load, our developers enabled lazy loaded feature on a component-by-component basis.  

This way of dynamic function loading allowed our developers to specify what components of an application program should not be loaded into storage by default when a program is started. We don’t load some components (huge size) until user demands them by a browser event like clicking a link or navigating to certain page. 

To set up the lazy loaded feature module, we followed the below three main steps: 

1. Create the feature module. 
2. Create the feature module’s routing module. 
3. Configure the routes. 

Mobile responsive 

Usually, most of the websites follow the same design approach for web and mobile. As a consequence, visitors may exit immediately if the web page is not optimized or doesn’t load properly on their mobile phone. To address this issue, we gave more significance to mobile user interface.  

By following the responsive web design and the progressive advancement concept, we created a well-crafted mobile UI while adhering to the same theme. This approach provided our mobile users with better user-friendliness and faster browsing experience.

The way forward...

Apart from the above-mentioned distinctive features, we are also planning to make our blog PWA ready. This project is in the pipeline now and soon you will be able to save our blog pages in your desktop or mobile device as a native app.