Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Oct 15 2020
Oct 15

Websites have become a necessity in the 21st century. From gathering traffic on them to creating a buzz about its brand and resultantly leading to a higher sales figure, websites can do it all. However, not all websites are able to do that. A successful website is often considered to be one with the best user experience and performance. A low bar at these may just be the doom of the site developers. And when you combine the impressiveness of the site’s UX and performance with its overall aesthetic and product quality, success is almost guaranteed.

So, the process of building a website has to be done with the utmost care and expertise because doing a half-hearted job at first and regretting it later would not be prudent for anyone. The build and functionality of the website entirely depends on its developers and the CMS at work. Choosing the right architectural approach should be the first priority for all business owners and site builders. 

Getting into the architectural aspect makes me highlight the two variants that are the most popular amongst Drupal websites, the monolithic or the traditional architecture and the decoupled architecture. This article will accentuate all the areas of these two and discuss their aptness for different business needs.. 

Introducing the Contenders: Monolithic and Decoupled Drupal Architectures

Drupal is a pretty versatile content management system, it has the capability of building your websites for you, taking care of each and every aspect of the same. That should sum up Drupal’s capabilities, yet it doesn’t. With its different forms of architectural options available, Drupal has become the embodiment of versatility. The choice of deciding between Monolithic and Decoupled forms of Drupal architecture is proof of just that.

Starting with Monolithic architecture, in the terms of a software engineer, it means a single software that has the potential of handling every aspect of work done on it or with it. A monolithic architecture will always be single-tiered, wherein the UI and the code for data access are merged into one platform. And that is what Monolithic Drupal architecture or the traditional Drupal architecture means. The coupled Drupal is well-equipped to make a website up and running, both in terms of the front-end and the back-end. You would not need to rely on anything else, if taking the Monolithic approach. You would have all the Drupal resources in your corner, as your project would be entirely nestled inside it.

Drupal is regarded highly in the community for its back-end capabilities, its front end deserves equal regard. Using Drupal’s many behaviours, themes and templates, you can easily create impressive visual designs that would also provide state-of-the-art interactivity to your presentation layer that can be customised on the go. And there is more, any problem with your site’s design, behaviour, usability and management can easily be tackled by Drupal’s frontend aspects. So, it won't be wrong to presume that the traditional Drupal is a versatile software easing the process of building web applications. 

However, if you want to tap into the other frontend technologies, then there is a possibility for that as well, with the use of Decoupled Drupal architecture.

In simple terms, decoupled Drupal architecture separates the front end from the back end. The Decoupled Drupal separates the UI from the presentation aspect. Although the UI and the content management would be provided by Drupal, you would have free reigns over the presentation layer. You would not be bound to use any of the themes and templates. This approach mainly needs Drupal to act like its content repository. Although it is a relatively new trend in the CMS, many all over the Drupal community have taken it up. It has been gaining more and more traction because of the freedom Decoupled architecture provides to its users offering the advantage of capitalising on the many front-end technologies available outside of Drupal. Learn everything about Decoupled Drupal here.

Two rectangular representations are shown to highlight the difference between traditional Drupal architecture and decoupled Drupal architecture.


In essence, both Monolithic and Decoupled approaches can be deemed similar in the sense that they have the back-end Drupal technologies. However, when the front-end or the presentation part comes to play, they start to seem vastly different. 

Different Ways of Leveraging Decoupled Drupal Architecture

Now that we know how the traditional and Decoupled Drupal architecture are different on the foundational level, let us delve deeper into the different ways of decoupling Drupal architecture.

Drupal was founded as a monolithic software performing every aspect needed for website development. This architecture has total control over a project, in terms of its presentation, all the visual elements along with in-place editing and layout management as well as in terms of data. In an attempt to not sound like a broken record, I would add that Drupal in its traditional sense is still the most used version of the software primarily because of the control it gives to the editors.

Coming to the Decoupled architecture, the story changes. Like I have already told you, the Decoupled approach mainly relies on Drupal for its backend capabilities, the front-end may or may not entirely become independent of Drupal.There are two broad categories of this architectural approach.

The Drupal logo is in the center with four dialogue boxes that are describing the four approaches of Drupal architecture.


Progressively Decoupled Drupal Architecture

A major motivation behind taking up the Decoupled approach is the developer’s wish to use more JavaScript. However, the use of JavaScript does not necessarily mean that you have to give up Drupal’s front-end action. With the progressive approach you can do both. You get to keep Drupal’s front-end and add the JavaScript framework of your choice to it. JavaScript framework can be used for a block, a component or an entire page’s body. 

The layout of a progressively decoupled Drupal architecture is shown to depict its many heads.


However, there is one thing to consider in this approach, more use of JavaScript on a page will make Drupal’s administrative abilities less in control. Read more about progressively decoupled Drupal here.

Fully Decoupled Drupal Architecture

In a fully decoupled Drupal application, you see a full separation of the presentation layer and other elements of Drupal.What this means is that the client’s framework becomes a server side pre-renderer, which ultimately leads to uninterrupted workflow. The CMS is a data provider in this instance. And an API layer acts as the connection between the two, retrieving data from the back end and providing it to the front end. It has to be understood that many Drupal features like in-place editing will lose their functionality or rather become unavailable in this approach. However, you will be able to exert a great deal of control over the presentation layer with other available technologies, React, Angular and Gatsby being a few of them.

You can also go for fully decoupled static sites. To tackle the increased complexities of JavaScript without affecting the performance of a site, static sites were introduced. For this approach to work, a static site generator like Gatsby is a great tool to use, which will take data out of Drupal and generate a site for you. So, Drupal basically becomes a data source throughout the process. 

Being API-first CMS: Drupal Web Services

Like the name suggests, being API-first means building an API before building a web application, which is basically created around the former. For the Decoupled applications to work effectively, Drupal has to be equipped with a top-knotch API that would essentially be the thread holding the front and backend together. The Drupal community has done a great job in this matter. 

The provision of pretty impressive web services that have been years in the making are proof of that. REST API can be considered as the paradigm here, however, for the applications that do not communicate using it, Drupal has other web services modules as well. Since Drupal was able to provide these and transcend the degree of functionality provided by REST API, it is all set to become the best open-source API-first CMS.

Primarily, the Decoupled Drupal has been known to use any one of the three APIs I have mentioned below. I would like to add that since the Monolithic approach does not need an API to provide a connection, these would not be relevant while using it.

REST API 

REST or Representational State Transfer API is one of the most popular ways to let the HTTP client get the responses it wants from the content repository, which is Drupal. Drupal  provides this web service out-of-the-box that includes RESTful Web Services, Serialisation, HAL, and HTTP Basic Authentication. With its proficiency at executing HTTP requests and responses, it easily aids in operating the data managed by Drupal, be it comments or nodes or maybe even users. 

A diagram represents the way an HTTP request and response works through an REST API in the Decoupled Drupal application.


In a simpler sense, REST API is like a mediator along with the HTTP client because they help the front and backend to work harmoniously on any framework they like. 

JSON API 

JSON:API is gaining momentum as the go to mediator in the Decoupling process of Drupal. A reason for the same is the fact that it is the better version of REST API. It offers a relatively high degree of productivity in comparison to REST API with minimum requests to the server and providing related resources without asking. It is phenomenal at filtering, pagination and its sorting capabilities along with caching use are almost impeccable. You tell me how can it not be the go to option here?

GraphQL

GraphQL is a query language that was developed by Facebook. It is used for custom queries to retrieve data from the backend with a single request. The GraphQL Drupal module works on the same principle and even lets you update and/or delete content or an entire configuration. Moreover, GraphQL has the ability to act as a base-line for the generation of custom coded schema or its extension. I find this one detail to be really helpful when the plugins are to be used to form a sub-module. 

Check out more alternatives on the modules available in the decoupled Drupal ecosystem here

Front-end Technologies

Apart from the different APIs used in the Decoupled Drupal architecture, the languages used are also quite distinct from the Monolithic version of the software. It is because the traditional Drupal does not have them as its core. Although it has its own JavaScript Library, the JS Framework is out of its jurisdiction. And this is one of the major reasons for seeking the Decoupled approach.
 
Let us have a look at some of these.

JavaScript 

A lion’s share of frontends are designed with a JavaScript framework at its core. Since JS offers a higher degree of interactivity, it often acts as a wiser choice. There are three popular frameworks at use which are;

React 

React is known to deliver the most amazing digital experiences when it is combined with Drupal. With big names like Facebook, Reddit and Airbnb as its users, it does not come as a surprise. React has the ability to split a code in varying components, which is immensely helpful in debugging and enhancing the reusability of the code. If you want to produce results that are both SEO friendly and very responsive, then React is the perfect option for you.  

Angular 

Angular was initially introduced by Google in 2009, but the 2016 re-released version was entirely rewritten to make the development of mobile and web applications very easy. This is especially true because it uses HTML in the simplest form to clearly define user interfaces, eventually making web applications a trifecta, interactive, functional and extremely hard to break. Perhaps, this is why The Guardian and Gmail are proud users of Angular for their frontend aspects.

Vue 

Vue is a JavaScript framework which is primarily used for building UIs and single-page applications. Its best implementation is seen in creating the view layer of a web application. Since Vue is quite lightweight, it makes it highly adaptable. It can also integrate itself with other libraries and tools to get whatever is desired in an application. The combination of Drupal and Vue is indeed a powerful one, as the former control over the backend and the latter’s client side handling make the creation of large-scale applications a walk in the park. 

Static Site Generator 

A Static Site Generator or an SSG is a tool that is used to build static websites which have a pre-existing set of input files. It is often regarded as a middle ground, wherein a hand-coded static site is used with an CMS. There is one particular SSG that deserves to be mentioned.

Gatsby 

An open source framework that is based on React, with every advantage of the JAMstack (JavaScript, API and Markup), be it performance, scalability or security. This is the simple definition of Gatsby, impressive, isn’t it? It would be suffice to say that Gatsby is jam-packed with features, the best of which is of course, its ability to pre-generate pages, making it much faster than the dynamic sites. You will actually be able to build a complete website faster than many will be able to create just a prototype.

Metalsmith

Metalsmith is one of the simplest SSGs to be used and it is pluggable. It can effectively produce static build files by extracting information from the source files, manipulating it and writing it to files in a destination directory. These indeed seem to be a lot of files. From grouping files to translating templates, it can perform numerous manipulations, all using its plugins and all consecutively. Not only does the use of plugins simplify things, but it also provides the user the liberty of choosing and implementing only the ones that he needs.

Tome 

Tome  stores your information in static JSON files, which are generated from static HTML form your very own Drupal site. With Tome, you can choose from the large number of themes and modules found in Drupal, create content and simply push the static HTML to production and your work is done. The fact that it allows you to use Drupal without any security or performance worries is another bonus.

All of these are regarded as the top-notch front end technologies for web building and you may very well know that nothing can beat Drupal at its back end game, so with Decoupled Drupal you get to have the best of both worlds, the worlds inside and outside of Drupal.

Conclusion 

The fundamental difference between Monolithic and Decoupled architecture can be detected with the degree of usage of Drupal’s entire software. There is no right and wrong approach amongst these two, when choosing Drupal for your project. Your choice will come down to the needs of your project and what your intentions are for the same. For instance, you might not want to create JavaScript interactions for your project, so you could use Drupal as is, which is the Monolithic version. 

On the contrary, if your project mandates the use of JS or static site generators, the traditional approach will not cut it for you. Decoupled Drupal has to be taken up and there is no harm in that as well. There are so many big names, like the Weather.com, NBC.comand Warner Music, who have been using the Decoupled architecture and they have experienced great results. 

Whatever approach you may think you want has to be aligned with the needs of your project. And when they do, trust me, whichever approach you will choose, it would be a winner for you.

Oct 13 2020
Oct 13

The virtual sector has become increasingly prominent today. From trading shares to buying groceries, every single aspect of our life can be fulfilled in the virtual world. And do you know what lies at the heart of this world? Since it is online, you must be thinking that a website has to be at the core. And you are right to think so. A website is the foundation of every online business, from blogs to e-commerce, every virtual service provider needs a website.

Now, just building a fully functional website is not enough. You have to keep updating it every now and then, simply because what was trending two years ago is considered antiquated today, and we do not want your website to be regarded as out of fashion. 

When making the decision of revamping your website, you have to consider something very carefully. And that is the difference between website refresh and website redesign. If you want minor changes to be done in your website, like changes relating to its appearance, you would call it freshening the website. On the other hand, if you want to change your website completely, you would need to redesign it. This would transform the makeup of your website, from the content to the appearance and sometimes even the code. It is like converting a hatchback into a limousine, even though it would be the same car, it would be tremendously different.

So, if you are planning to redesign your website, you have landed in the right place. This article would accentuate everything related to redesigning a website; let us begin with the reasons for the same.

The Need for Website Redesign

There is a pink and green background with a clock depicting the need for website redesign has come along with the reasons.


Website redesigning is a giant undertaking that can be both costly and time consuming, so you can’t just do it on a whim, there have to be reasons for the same. Understanding those reasons is as important as the actual undertaking. 

I have compiled a list of common issues faced by website developers and operators that have compelled them to overhaul their websites, so that you can get an answer for the important question, that is, when should websites be redesigned. If you are experiencing more than a couple of them, consider it as a sign to say goodbye to your current website. 

Expansion of the company

Every business is in the market for growth. This growth means that they would enhance the products and services that they provide at one point or even start a whole new department. A website is like the gateway for the customer to know your services, and if it isn’t doing that, you will potentially lose your customers to your competitors. So, remember that, growth is always followed by your website’s redesign.
Changing market trends

If there is one thing that is fickle in this world, that would be the market trends. These change faster than light making your head spin with it. One day the gaudy and eccentric website are all the rage, and the next, minimalists reign online. The point is that your website has to align with the market trends, especially in terms of design. 

Unresponsive to some users 

By responsive, it is meant that your website can easily be accessed through any device, be it a smartphone, a tablet or a desktop. Sadly, there are a number of websites that are inaccessible through a smartphone and that just about destroys your leads. Adaptability or responsiveness can be achieved through redesigning.

Poor conversion rates 

The primary purpose of a website is to generate sales, if it is not doing that, then what is the point? Your customer base is basically decided by your website and how compelling it is for them. The more interest it generates in the customers, the higher the chance is that they would make a purchase. Having too complicated text packed with corporate jargon, not having enough CTAs, lacking in the aesthetic aspect; all of these will contribute to less conversions from your visitors. And the only way to overcome this is redesigning.

Complicated user interface 

A good website is the one that allows the user to easily maneuver around it and get the full experience of what the developers wanted to provide. If that is the case, then your website lacks in the functionality part and everything on it is as good as useless. The solution here is to simplify the user experience and redesigning is the route to go.

Revitalise your brand

Brand image is very crucial because it is how customers would perceive you and your brand. It is up to your brand image to make the customers think happy thoughts or get all woeful. Coca-cola is always associated with happiness and joy, because that is the image they have built. A website helps a great deal in that. Now, if you think that your brand’s perception is not aligning with its core, you would need to redesign it to make the alignment happen.

Now, that you know why websites need to be redesigned, let us get into the process of doing it.

The Website Redesign Strategy 

There is a bulb on a dark background personifying an idea for website redesign and on the left the strategy for the same is written in points.


Redesigning a website is not something that will happen in a day. It needs time and resources to be put to good use. The process would be extensive, you would need to be aware about a lot of things, ensure everything works for you and aligns with your vision for the future of the website. Even the slightest of mistakes can become tragic for your website. That is why, a holistic approach has to be taken into consideration and I am here with the website redesign tips you would need for that.

Analyse the expense and its bearing on you 

The first step towards website redesigning commences when the budget for the same has been decided. The financial implications of website redesigning have to be considered, you cannot go wayward with the money; that would not be a wise choice.

Your website will be your first impression on a consumer and you would want it to be impressive. For that to happen, you would need financial resources that are substantial. Don’t take up redesigning until you have the resources, because doing a half-hearted job is just going to be a waste and you won’t be winning any website awards for that. So, analyse the expenditure, set aside the needed amount and delve right into it.  

Inspect the existing website

Once the money is ready, the process officially commences. And it does so with the past and its inspection. By past, I meant your current website, which would become your past after the redesigning. Your website, as it may be, would have done something for you, that is why you had it for as long as you have had it. 

Micro analyse every CTA, every image, every click that you received and how often that was. From bounce rates to time spent on a page, from the number of visitors to the number of sales, inspect everything and that too thoroughly, do not leave anything uninspected. I am emphasising on everything again, because it is crucial. This is the beginning and a successful beginning results in a successful end result.

If you want help in doing all of that, Google Analytics can sort you out. Once you have done all of this, you need to take note of the things that work and the things that don’t. The advantages would move further with the redesigning, while the disadvantages will be worked on until they are no longer a disadvantage. 

You must be wondering why all of this is necessary. Why not just start afresh? The problem with starting from scratch is that you might end up doing the same things again, which would only result in wasted time, effort and money. The inspection of the current website would not only give you a direction and a blueprint of the redesign, but it would also save the extra effort. So, why not?

Establish priorities to make goals

After the inspection is done, you would have a fair idea as to where you stand with your website. Knowing the key areas that are hampering your conversion rates or even your visibility on the web, helps you understand and establish priorities for the redesigning.

For instance, your content could be amazingly good, engaging and informative, however, the way it is presented makes it seem boring at best. Therefore, changing the content should not be a priority, rather its presentation should be. 

So, prioritising the areas that need to be focused on from the get go is an important step in website redesigning. A reason for its importance is that prioritising helps in making the design goals. 

Once you know what you need to focus more on, you could start working on that first and get better results. It is like knowing your weaknesses and working on improving them. I was weak in science in school, pathetic really, so I put in an extra effort by prioritising and started seeing the results. In website redesigning, there won’t be any mysterious scientific concepts, but you could endeavour to elevate your visitor count, enhance domain authority or improve your SEO rankings and eventually increase your sales. All of this is achieved by prioritising your goal. You can’t simply take on everything at once, you need preparation and this is it.

Create a unique brand image 

If you have a website, you are a brand. The question is whether your brand is appealing enough to customers to pull money out of their pockets and buy from you? The answer lies in the image you create for your brand. A good way to create an impactful persona for your brand is your website and redesigning the same can easily do that. 

The first thing that a customer would see on your website should effectively depict what you are about. The user should not have to decode it, trust me, he would go to your competitors website instead. And do I have to say that we do not want that?

A website's homepage is showing a lot of attractive offers, which is should be an aim in website redesign strategy.Source: Amazon

This is Amazon’s home page, and it should be considered the benchmark in branding. I would not leave this website until I have scanned through the “Top picks for your home.” With so few words Amazon has portrayed all that it is about and engaged the user. 

I know every website cannot be like this, but the conciseness can be achieved, it has to be. That is the core of branding. Your redesign strategy has to ensure that your brand image works in your favour rather than against it, make it unique, make it enticing and make it worthwhile for the customer.

Assess the competitors 

You may be at war with your competitors, but that does not mean that you cannot learn from them. Assessing the ways your competitor’s websites look, the kind of services they provide, how functional they are can help you a great deal. You must be wondering why. It is because you and your competitors are in the same market, catering for the same customers, whose needs and wants are the same; apart from this their likes and dislikes would also be the same. So , if they like something that your competitors are providing, you can make a change. What could be the harm here?

Cater to your audience more than yourself 

A website’s success entirely depends on its users, they are the ones who can make or break it. So, making a website keeping in mind the end-user’s thought process and needs can make a difference between the success and failure of a website. 

Obviously, your website is not going to be for everyone, it has to have a target audience or a buyer persona. Is it meant for the retired or the middle-aged men or maybe the adolescents, you have to decide. 

For instance, an anti-ageing cream’s audience is going to be over 25, it could be the working women who stress too much at work that they have developed wrinkles at 30 or it could be the stay-at-home mothers who have very little time for skin care or both. If your website and its design effectively justifies their needs, a conversion is almost guaranteed, and that is all we want. 

Make the website responsive to everyone 

Today, websites are not only accessed through laptops and desktops, people do it from any device that has a screen and an internet connection, especially smartphones. So, seeing something like “this website is incompatible with your device” is not going to generate many leads for you.

Mobile friendliness is crucial for websites, they need to be made responsive to reconfigure itself to the screen size of the device, which is browsing it.

Focus on the software

Up until now, we have covered everything that could be redesigned on your site, now let us talk about the makeup of your website a little as well. A Content Management Software or a CMS is the way to go here. From developing the site to publishing regular content on it, the CMS would do just about anything you could want. Drupal, one of the leading CMSs in the market share, can be a magnificent choice. Be it government websites or private companies or even sports stars wanting to create their online space, Drupal provides for all.

Journalism websites need a lot more flexibility in content than any other category. Since Drupal is the embodiment of flexibility and provides just the right set of core features and contributed modules, choosing it becomes a no brainer. Earth Journalism Network’s website is the prime example of remarkable improvements that are possible with website redesigning. OpenSense Labs Team migrated the old site, which was running on a Python-based CMS, to Drupal 8. This ultimately proved to be a remarkable move as creating and managing content turned out to be super efficacious. Access the full case study of Earth Journal Network to know more.

The Website Redesigning Approach: ESR

The web would keep on evolving at a pace that is faster than your redesigning abilities. You might think that is a bad omen, but it isn’t, not completely. Yes, the web keeps on evolving, but its evolution does not mean that your website would become completely obsolete. There would be a lot of things still working for you since the last redesign and the things that do not, you can simply update them.

All of this becomes a walk in the park with Evolutionary Site Redesign or ESR. This is an approach that continually tests certain problematic areas of your websites, giving you feedback about their performance.

A line graph is showing the correct strategy to be implemented during website redesign.Source: Wider Funnel

It is not only a faster approach to redesigning, but also becomes extremely helpful in reducing the risk as you would be making incremental improvements consistently, instead of a complete overhaul. The result is a better user experience for your visitors and everybody stays happy. That is why ESR is often regarded as the right website redesign approach.

The Mistakes to Avoid 

Now that you know all about things that you need to address, it is now time to know what to avoid in the website redesign strategy. These are mistakes that are more common than you would think and these mistakes can become quite costly for your website. 

Nondescript scope 

Scope of work, that is both doable and well-defined, sets the pace for any project. It is like a roadmap that will tell you what the next destination is and whether to take a right or a left turn to reach there without much hassle. Taking on a website redesign project is a huge step, so you have to clear, explicitly clear, as to what you want to do and how it would be done. 

The scope also lays emphasis on accountability, as it clearly allocates duties to be done by members of the team. So, when something doesn’t happen, you would know where to point the finger. Without a well-defined scope, the smooth sailing of the redesign project is not possible.

Not emphasising on the content 

The content on your website is probably one of its most important aspects. Think of it like the voice of your website, since it clearly speaks for you and your brand. So, ensuring that the content is well-written, engaging, simplified and SEO friendly at the same time should be a priority. You can hire professionals to write it for you. The thing is a high quality content would need time from your end, so not getting a head start on it is not the way to go.

Biting off more than you can chew 

Another mistake that often happens in a redesign project is that the owners overreach. They try to do everything possible to make the website better than the existing. Although this should not be a mistake, the timeline of the project may disagree. The completion of a project in its designated time is what makes it worthwhile. So, when you keep on adding additional tasks on an ongoing scope, you will just be stretching yourself for time and the project would only get delayed. 

This does not mean that you cannot add too many features in your website, you certainly can, but you should try adding those in phases. Doing everything at  once and doing one thing at a time is different and let me tell you, the latter almost always succeeds.

Compromising on one aspect for the other 

Another pitfall that is experienced in the redesigning projects is the compromise. In the race to finish a project, the developers start compromising on one aspect of the website for the other, and this disrupts the overall redesign. For instance, you cannot just focus on the aesthetics of your website, its functionality and technical aspects need equal consideration. The user might come to your website and even stay awhile because of the aesthetics, but if your website won’t deliver in terms of functionality no one would stay longer than awhile and conversions would seem far fetched.

The Right Partner for Website Redesign

Like I have already mentioned a few times, website redesigning is a colossal undertaking, so it needs the support of a team to make it successful. Many websites have taken up the redesigning endeavour on their own, but only because they have a comprehensive team that can perform all the redesigning duties including a developer, a designer, a marketing strategist, an SEO expert, copywriters, to name a few. If you have such a team, take up the redesigning yourself. If not, you should consider a website redesign agency

Here are a few pointers to help you;

What is its niche?

Before checking anything else, you have to find out which area does the organisation excel at. Is it an ad agency, marketing agency or does it specialise in technical aspects? Knowing all of this will help narrow down your search for the right partner, since the speciality of the agency has to be in accordance with your business. A high-profile public enterprise can go for an ad agency that deals with celebrities.

What approach does the agency use?

The agency’s approach towards tackling redesigning is very crucial, because that will set the pace for the website’s future growth. So, if an agency is focusing on enhancing  the user experience as its core, you should hire it without a second thought.

How good is it performance-wise?

Ensuring that the redesigning agency has had a good track-record in its past projects is also necessary. To do so, you can simply check the testimonials on their website. This way you can predict how well it would tackle your redesigning.

Can it perform an audit?

An audit is very valuable when taking up redesigning a website. So, you must go for an agency that would perform a thorough audit, both for the content and the architecture of the website, before working on the changes. 

Do they know your target audience?

A website redesign won’t do you much good, if it is not targeted at your potential customers and compelling them to buy from you. So, an agency that has knowledge or will acquire the knowledge about your target customers is going to be the right fit for you.

How extensive are its services?

Lastly, the range of services a redesign agency provides will be the last stepping stone in your decision. It cannot just provide a marketing strategy or just implement the SEO techniques, the services have to be all inclusive. 

All of these questions need to be addressed before you take up a partnership with a redesigning agency. 

Website Redesigning- Not a One-Time Gig 

Now, you are all set to make the redesigning decision. However, I would like you to know one more thing. Website redesign never ends, it is a perpetual project that would keep returning every few years or as early as your resources allow. Trends keep changing in the virtual world, and your website must change with them, barring the fact that it is responsive or not. If you have a bigger establishment with resources in abundance, you can redesign at least once a year. On the other hand, if resources are scarce, you can wait as long as half a decade, provided that your website is responsive.

Redesigning is similar to changing your car, you have to do it every few years. Driving the same car for a decade would not seem appealing or a sign or growth, what do you think?

Oct 01 2020
Oct 01

All of you must have a fair idea as to what marketing is, it is the art of selling through persuasion. The consumer may not have a need for a product, but could still be compelled to buy it with the right kind of marketing. This is a concept that starts with product designing and ends at consumer satisfaction and feedback to improve the design, it is the cycle of product life.

This is not an article which consists of some age old marketing tactics. Rather I will be talking to you about the new age of marketing in a domain where facades don’t really matter, but features do. Yes, I am talking about technology, more specifically people who are working towards building and improving technology. These are the developers, these are people who are not easily fooled by the hyperbolic ads the non-developers might believe. These people are too smart for that and their intellect is one reason for the emergence of the vogue of Developer Relations.

If you have a muddled definition of this topic, don’t worry I will clear all the murkiness for you. All you have to do is continue reading.

Decoding Developer Relations 

Before getting into the depths of the Developer Relations concept, I wanted to give you a glimpse of what DevRel can actually do for you. Nexmo, now Vonage, is the prime example of DevRel’s positive impact. Within a year, the company had enhanced its profitability through DevRel.

A blue background is showing the successes a company had witnessed through Developer Relations.A glimpse of the success attained through Developer Relations | Source: Nexmo

Such a success is not unheard of with Developer Relations. Now, you might be wondering how this could be possible. So let us get right into it.

In simple terms, Developer Relations is merely a job title; however, it is a job title that has become increasingly important in the technological business, where innovations from developers are the driving force. Developer Relations, also known as DevRel, can be described as a job that creates a connection between a company and the community. You should know that when I say community, I mean a specific category of people. Since DevRev pertains to companies, its community encompasses the employees, the customers and the prospective customers; some would say there aren’t many people left behind and they just might be right.

One area that Developer Relations concentrate on more than others is the contact with external developers. You must be wondering why, especially when these companies have so many internal developers with them and you are right to do so. For Developer Relations to do its job properly, external developers are integral. For the IT and tech sector, it is important to be in the know-how of what is happening in the market. Their internal developers cannot do that on their own, so external developers act like outside counsel for them. Remember I said something about community? External developers are at the heart of that community.

So, who benefits here?

The entire community because this is a concept that aims at strengthening the entire developer community. Having conceptualised in the eighties, it has come a long way from its Apple days. Being a proponent of technology, it allows you to learn everything you can, from coding to public speaking to new technology tools. Isn’t it great? 

It is not just me who thinks that Developer Relations is important for the community. Many influential personalities and Developer Advocates have voiced their perception of this job and all of them have a positive outlook towards it. Following are some thoughts of influential persons on DevRel as stated in The New Stack:

Lorna Mitchell, IBM Developer Advocate, emphasises on the power of words in DevRel. These words have a significant impact on the reader, their reach is unparalleled, unfettered by time and space. Opening a dialogue in the community becomes quite easy.

Michael Ludden, a program director and senior manager at IBM’s eminent Watson developer program strategy, explains DevRel as “a hybrid role that requires a unicorn to fill.” The title holder needs to be competent with software engineering, public speaking and community participation, thus the use of the word hybrid.

Quoting Phil Leggeter from Nexmo, “Developer relations is like the force - you can’t see it and can't feel it - you just have to believe it.” And this belief almost always pays off.

Jess Rose, Developer Relations Advocate for Crate.io believes authenticity is important,if interactions between people are to feel real and hold value. According to her, the measurement of authenticity is indeed difficult, but taking care of yourself, slowing down the pace and focusing on really important things can make a difference.    

Now, let me tell you about the two essentials of Developer Relations. 

Its other name, that of Developer Marketing, will give you a hint. This is a job that essentially marries two very different fields and that are engineering and marketing. Since DevRel deals with only developers, you have to have knowledge about this. And DevRel also focuses on promoting the products, so marketing skills and that too great ones are pivotal for the job holder.

Who Comprises the Developer Relations team?

Developer Relations is indeed a job title, but it isn’t a single man’s job. It could be, if you happen to have all the necessary skills for it. The role of a DevRel is quite multifaceted, so it mandates a lot of different roles within it. 

Let us have a look at them.

The four key members of the Developer Relations team are shown working together on a desk.The DevRel Team

Developer Evangelist

Yes, this term has a religious connotation, but in the business setting, it means the voice of the company and its causes. The role of a DevRel is nothing short of being an ambassador for the developers. So, an evangelist acts as the connection between the company and its developers, both in-house and outside, creating a buzz about their company and its products. To become an effective evangelist, 

  • you would need to be aware of the technicalities a developer faces, 
  • you would need to have excellent communication skills 
  • and you would need to be extremely social, this is so that you can build new connections and keep them satiated. 

Developer Advocate

This is the role that advocates the company’s platform to the outside developers, compelling them to make use of it. The end goal is to build a product that unifies the efforts of the entire community of developers with the internal team. External feedback, demos, sample codes are a few examples of the things a developer advocate would collect to ensure the product is as good as it should be.

Developer Experience

You must be familiar with User Experience and what it entails, right? Developer Experience or DX is somewhat similar to that, with the user being a developer. DX will let you know how good your product is and how well its API or SDK function. Developer experience is important because a good DX ends up becoming the talk of the town and your goodwill grows.

Developer Marketing

Marketing is also quite important for DevRev. It allows your brand to attract an audience of developers, which is what is needed for the growth of a technical company. Organising events, getting paid sponsors along with effective content and competent advocates are how you do marketing in the developer realms. 

An example of an effective DevRel team can be found in Google. Google has a global DevRel team that includes developers from all across the globe teaming up to build something truly inspiring. You can simply visit developers.google.com to get an idea, it fulfilling developer content is bound to impress you. From participating in forums and conferences to writing blog posts, API docs and sample apps, the DevRel team does all that it has to do and the constant buzz around Google is proof of their competence.

Why Does DevRel Need to be Capitalised?

The present world is being dominated by technology, with digitalisation overtaking every nook and corner of the technological markets; even the non-technical businesses are not totally distanced from this trend. So, with technology expanding at such a fast pace, developers have taken up an important role. Consequently, the need for Developer Relations has risen over time.

Let us understand the need a little more. The IT and tech companies are constantly developing new products and upgrading the existing ones. Have you ever wondered how they decide what should be done and what not? If you have not, then let me tell you that all of the developmental decisions in the IT and technology industry are taken by the developers, since their heart and soul lies with technical innovation. Their growing influence is why Developer Relations has become a trending vogue all across the world, as it allows companies to make sustainable connections with global developers.

DevRel has been consistently making efforts in opening a dialogue between companies and external developers and these efforts have only proven to be fruitful.

  • The DevRel team is able to make the target audience, being developers, aware about their company’s present products and future goals.
  • The awareness allows the developers to come into play through guidance and feedback and the DevRel team soaks up every word and implements all that can be.
  • When the DevRel is constantly in touch with the developer’s community, they often come across many talented developers and resultantly, recruit them to work in-house. A win-win for both.

Developer Relations is not a one-time job, it's a perpetual undertaking that continues to build trust and convince the end users to take up their company’s products.

A pie chart depicts the importance of Developer Relations.The importance of Developer Relations  | Source: TechRepublic

How Does DevRel Come into Play?

Now that you have become familiar with DevRel and all of that it can do for you, it is time to understand how it can do all of that. Just having knowledge of a trending topic is not enough, you also need to be implementing it, and the implementation needs to be flawless. That is why I am here because the audience you will be targeting is a tough one to impress. 

So here are some of the most fruitful ways to luring and sealing the attraction of all the developers you target through Developer Relations, let us begin.

A pillar is shown with multiple signs representing the ways Developer Relations (DevRel) can be implemented.


Understanding the developers needs 

DevRel is a trend that is for the developers, so understanding their needs becomes integral. So, whenever you are thinking about a topic that could interest them, stop and reevaluate your decision with the aid of a developer. You would have to involve actual developers because they would know and understand the needs better. Ask them to give you their concerns, ask them to check your work before posting, ask them to simplify something you did not get. At the end of the day DevRel is all about developers, so in order for you to do your job, you have to know what they want. And who better to ask then the developers themselves.

Getting trustworthy insights

As I have already mentioned more than once I believe, DevRel combines two very different worlds, that of marketing and engineering. So, you need to marry the best of marketing to the best of engineering. However, that becomes a problem when the best of marketing is something that the developers are fond of. The excessive use of superlatives is what marketers excel at and it is also what developers abhor. You have to let the product speak for itself, you need not use phrases like ”The best in this genre,” nobody believes that. And how do I know this, my constant contact with developers is one of the reasons. Your company must have several internal developers as well, go to them and ask for insights and change your marketing tactics.

Along with this, you have to know that you cannot get the technical stuff wrong EVER. So, when you think that you are out of your league with the technical jargon, go to a developer, ask him or her whatever it is you need and quote him or her verbatim. There is no chance of going wrong then because they are the experts. 

Enunciating the road map 

Developers are all of facts and figures, they do not need you to go around in loops, they would much prefer it, if you could come straight to the point and that too without exaggeration. So, when catering for the developer audience, focus on the road map they can follow and how it has to be done instead of the reasons to do so. This could be done through a guide of a kind, which would tell them all the things they need to know, for instance how a product is lacking in features and how it can be improved. This way they know what is needed of them and they will start working on it.

Making the developer feel important 

When you write for the developers, you have to make them feel like they are the centre of attention for you. A simple way to do so is to dedicate an entire section of your website to them, wherein, everything that you post, pertains to them. Such kind of action will also help in cultivating a sense of loyalty amongst the entire community. They would know that they can rely on you, simply because you have given them the importance they need.

Making yourself a part of developer’s community 

This one is probably the most important out of them all. A major of DevRel is building contacts with external developers. And you can only do that if you become involved with the community of developers. You do not really have to be a coder yourself to make that happen, rather if you have knowledge about what a coder actually does and how crucial his work can be, consider yourself qualified enough. Also, being a DevRel, you would continue to learn and grow.  

To be an active member of the community, you would need to attend developer events, where you can socialise and actually talk with developers and make contacts. Going on tech events and spending time with the tech guys is the only way the DevRel can do his job properly. Even in COVID-19, there were numerous virtual events for the developers, DrupalCon being one of the biggest. 

Apart from this, many companies have taken to social media to make the community connection all the more faster, although e-mails are also quite handy. Platforms like Facebook, Twitter, LinkedIn, Instagram and Snapchat, all act like the gateway to success in DevRel, since a vast majority of developers are active here. This is another tactic that the COVID-19 could not put a damper in.

Commanding respect with knowledge

More times than not, DevRel is a team, with knowledge, diversity and excellence in communication. If you have one person, who satisfies all of these, good for you. If not, you need to find people excelling at each of these. The DevRel team deals with engineers everyday and engineers are often not fond of non-engineers. So, you have to have the knowledge to command their respect. As part of the job, you could be asked to give your input on code or an API design and review the same, and without knowledge you cannot do that. So, the inclusion of engineers in the Developer Relations team is absolutely necessary, only then will the developers take it seriously.

The Crux of DevRel

So, what does the essence of DevRel come down to? If I had to choose three words to describe this trend, I would choose education, content and outreach. 

Developer Relations is a trend that is intent on building the company by educating its employees through in-house educational programs about the company’s products and its future goals. It is also about educating the customers by making them aware about what the company is all about through effective and meaningful content that they can find with ease. Lastly, DevRel is about knowing what the customers want and making that happen with the help of internal and external developers.

If you think about it, developer relations is not a very complicated job, at the heart of it, there is only one thing and that is ensuring the company’s technological developments never fail. That should not be too difficult, should it? I do hope our guide helped you in comprehending the trending concept.

Sep 26 2020
Sep 26

Websites have overpowered the world of businesses today. There aren’t many business people left who do not have or want an online presence for their business. And websites are just the way to accomplish that. Now, building a website is not complicated at all, with just one youtube tutorial, you can do that. The tricky part is ensuring that it meets all the standards that the end user will desire. Websites built using Drupal and all its accompaniments are often considered to be up to the user standards. 

A blue background with the words layout builder vs paragraphs.


From world renowned privately owned enterprises to governmental organisations, Drupal has successfully served everyone. Drupal’s success is primarily attributed to the versatility and functionality it can provide to the web designers and content creators throughout the process of website development.

Continuing on the same lines, today we will discuss two such features in great detail to make you understand their importance, use and workings. We are going to talk about Layout Builder module, one of the most sought after modules in recent times, and Paragraphs module. Let’s dive right in.

The Seasoned Paragraphs 

A green background with different segments to depict the paragraphs module.This is how the paragraphs module will segregate your content into different paragraph types.

If you are reading this article, you must be familiar with the various modules of Drupal. You must also be familiar with the needs of websites and how complicated they can become. To satiate those needs, I will be telling you about one of the most convenient and user-friendly modules, which is Paragraphs.

Paragraphs module is a great tool that gives a high degree of editing power to the end users of a website. It does so by letting the end users choose predefined paragraph types that are independent from one another. This allows the web builder to avoid putting all the information in one WYSIWYG body type.

With this module, you can add a hero image that would be the banner of your webpage, you can add images and you can add grids as well. All of this can be done by simply selecting the types with the same name. Can website design become any more easy?

Although there are no default Paragraph types, you can easily create as many as you want. 

It is up to you to decide how many columns you want and where you want them. On top of that you also get to decide how much leeway you want to give to your end-users in terms of future edits.

The Modern Layout Builder

A green background with pink sections to depict the flexibility of the layout builder module.With Layout builder, you can add sections with each having a set of regions for the content to be placed thereby resulting in more flexibility than Paragraphs

The other convenient and user-friendly module is Layout Builder. Layout builder is a multi-functional tool that allows the content creators the ability to make content appear on their website as they wish to. 

Layout Builder has multiple settings that can be used to build pages from the ground up. Its highlighting feature is the visual layouts. When a layout is selected, if the web builder wants, he can implement the same throughout his website for consistency and brand image. If that is not what is desired by the web builder, he can also create customised templates for individual pages. This kind of ease in design is unfound in other options. 

Layout builder has become increasingly popular amongst designers and writers, and the reason is the power of customisation it provides. The below video by Dries Buytaert will give you a glimpse of what that really looks like, all you have to do is drag and drop.

How Advantageous Can Paragraphs and Layout Builder Modules Be?

I have already mentioned that Paragraphs and Layout Builders are two most popular modules in Drupal. So, how can I say this? I have reasons, validations and explanations for my claim, and all of them can be characterised as their advantages. People only make things popular because they like, and likability and advantageousness go hand-in-hand. So, let us delve right into them.

Paragraphs  Layout Builder 
  • No limits for Paragraph types
  • Grouping and reusing of Paragraph types
  • Flexible content model 
  • Simple and clean structure
  • Multilingual support for content 
  • Build from scratch 
  • Control over the layouts you want
  • Use of block types
  • Better structures for content 
  • Minimal coding required 
  • Enhanced authoring experience 

Paragraphs and Its Merits 

Paragraphs come with an array of features that only enhance its beneficial aspects. This may seem like a simple tool, but it has the ability to make your website design as appealing as it can get. 

Forget limits 

Let us start with the most helpful merit and that is Paragraph’s limitlessness. There is no limit as to the number of configurations you can create using Paragraphs. You want 20 different paragraph types scattered throughout your webpage, go for it!

Group and reuse 

Not only can you group various fields of your content into new complex elements, you can also reuse the components you have already created.  Can you possibly tell me that this does not fascinate you?

Flexible to the core 

Moving on, a website is constantly under construction, there is always going to be something or the other that needs to be updated, corrected or added. Most of the time these changes are not necessarily huge, and you do not need to change the entire layout. The advantage of Paragraphs is that it provides a great deal of flexibility in the content model, so that minor changes can easily be made by the content authors with ease.

Simple, yet impactful 

Paragraphs are often considered to be too plain and bland. Many regard this as a disadvantage, however I tend to disagree here. Yes, paragraphs are simple, but that is a benefit because simplicity means few clicks. The result; you do not need to be an expert to use this module, a content editor with minimal experience in Drupal can also use it with the least amount of effort. 

Its intuitiveness helps the web authors and builders to add pop-ups and quotes and easily rearrange them. On top of this, the simplicity of Paragraphs also means that your design will not seem cluttered, resultantly, your site will not slow down in its performance. Now, you tell me how can simple be bad for you, when it is actually avoiding a mess? 

Multilingual Setup 

Websites are becoming more multilingual in the present, so the setup of multiple languages in the content becomes somewhat of a necessity. Here, the paragraph module comes quite handy as it works within a multilanguage setup. 

Layout Builder and Its Merits

So far, you must have been impressed with the advantages of paragraphs, now prepare to be dazzled by the umpteen merits of the layout builder.

Builds from scratch 

The best feature of a layout builder is that it gives the developer the potential and resources to build something from the ground up. All you have to do is make custom block types, arrange them as you want and fill them up with content, pictures or videos and you are done.

Lets you be in control

With a layout builder, you will always be in control. I say this because customisation is ingrained in its formula. You can use it to make configuration of your liking, and if you want, you can implement your created template and use it throughout your website. The layout builder also allows you to build customised landing pages that will have your creative stamp all over it.

Blocks all the way

Blocks can be termed as the foundation of the layout builder, without them, it would be hard to imagine. Blocks are what help you get an idea of how your content would be displayed on the actual page. From globally available blocks suitable for all pages to uniquely build custom inline blocks made for specific pages, layout builder has your needs covered.

Structures your information 

Have you ever been to a website that had no structure at all? The information was all over the place and you couldn't tell where it began and where it ended? If you have, then you know how important structure is for a website. Layout builder helps you build a particular structure for your website that would organise your content appropriately. If you want e-form, customer testimonials and other such content information on one page, layout builder will provide a template that will segregate the information in a way that it does not look haphazard. 

Less custom code 

Layout Builder is popular because it mandates less custom code. This means that the module is less time-consuming and less complicated, once you become familiar with it. The use, maintenance and creation of content becomes easy with less code involved.

Better authoring experience

A website’s content can easily make or break it, so it has to be pitch perfect and in accordance to the needs of the site’s target audience. With a layout builder, you can be at ease with this aspect. It has proven to enhance the authoring experience of content creators by providing an improved interface to effectively communicate data about everything the author wants to.

Are Any Limitations Holding Them Back?

With the number of benefits you have read above for both paragraphs and layout builder, you might be inclined to think that they could not possibly have any demerits. Unfortunately, they do lack in some aspects. 
 

Paragraphs Layout Builder 
  • Not a core module
  • Becomes messy with intricate layouts
  • Dependency on developers.
  • Cannot simply drag and drop sections
  • May not connect nodes
  • Template combinations may become problematic 
  • May be difficult to achieve consistency with the customised layouts
  • Needs time to learn and adapt 
  • Needs to be customised with the use of other modules 

Challenges of Paragraphs module

Starting with paragraphs, its drawbacks are not necessarily drawbacks, they are more like functional mismatches to your needs as a web developer. Let us find out how.

Not part of Drupal core

Unlike Layout Builder, which was made a part of Drupal core ecosystem in Drupal 8.7, the paragraphs module is not part of the Drupal core. Although it does not come as default in Drupal, it is still quite popular. Being a contributed module, you would have to separately install it.

Can only handle simplicity 

Paragraphs were intended to make website design simpler for the non-technical folks. The problem with simplicity is that it cannot handle intricacy. So, when your content is anything but simple, paragraphs become messy and the output is just not upto the mark. With more nested paragraphs, the editing experience may slow down. Also, to ensure that the paragraphs are being displayed as preview, you have to always customise the Form display. If you do not do that, you will end up with a mega-form. 

Dependence on web developer  

Paragraphs also do not provide free reins to the content author. He would have to be heavily reliant on the developer for setting up even the tiniest of changes.

No drag and drop 

The ease of picking up a section from one part of the layout and dropping it in a different part is unfound here.

Challenges of Layout builder module

While the problem for paragraphs was its simplicity, the problems for layout builder stem out of its complexities. Let us understand how.

Challenges with nodes

Every blog, article, forum topic and even pages are stored as nodes in Drupal. Now, when a web builder makes new content, most often, he or she would relate it with an old piece of information. With layout builder, you may notice that block content is not entirely connected to nodes.

Challenges with combinations 

The templates in a layout builder can be used any way the designer wants to. He or she can make a number of combinations with the templates. However, when a custom-made layout is used with a template-based one, it becomes quite tricky to get right.

Challenges with consistency 

With layout builder, you can implement one layout throughout your website with ease. Although it is true, when customised layouts are the centre of attention for the entire website, it may be difficult to enforce sitewide consistency.

Challenges with control 

This is going to a little sound paradoxical, the layout builder provides more control to the content editors as opposed to paragraphs. When you do not trust your content creators’ judgement implicitly, this can become problematic.

Challenges with learning 

The switch to layout builder comes with a learning curve for the content writers, which can take some time. This module does not operate with form-filling like others, so a change in the way the work is done becomes mandatory and time consuming. 

Challenges with dependency on additional modules 

The layout builder may need customisation and that can be achieved through the help of other Drupal modules. Block Blacklist and Layout Builder Restrictions aid in limiting the block type and layouts, while Layout Builder Modal aids in enhancing the user experience.

Which Would Win the Race?

Before I answer this, it is important to know that the selection of a module depends on the developer’s needs. So, the winner in this module race would vary in accordance to the needs and wants of the site and its developers, both the designer and the content author. Let us have a look at these needs.

Paragraphs is suitable when Layout Builder is suitable when
  • You need to process content again;
  • You need to accommodate nodes;
  • You need nested paragraphs.
  • You need landing pages;
  • You need a customised web page;
  • You need to tweak the existing templates. 

Paragraphs and reuse 

The paragraphs module is ideal for situations that mandate simple solutions, with reuse being the primary answer. By reuse, I mean using the existing content again, while making changes in the website. With paragraphs you can use the earlier content in an entirely new webpage with ease. You can also use the same content in accordance to the nodes.

Apart from this, when nested paragraphs are of the essence for your content, paragraphs are bound to become your best friend. 

Layout Builder and customisation 

The suitability of layout builder varies a great deal from paragraphs primarily because reuse is not a term this module uses much. It is all about the new energy.

Whether you want to create new landing pages with a variety of blocks, views and fielded content structured like grids or you want to customise a page with a layout that you created yourself and is one of a kind, layout builder will help you. 

Apart from creating completely new pages from the ground up, layout builder is also perfect for tweaking the existing pages with templated layouts. 

You have to remember that both of these modules are configurations, they will not make the content for you, they would simply arrange it. So, when you make your choice ensure that you have a pre-formed vision and awareness of the layout you want for your pages. Once you have that the choice would become very easy for you. If the choice is still difficult for you, know that you can use the combination of both of these in your content configuration, so you do not really have to decide.

The Bottom Line 

Both these modules are quite amazing at the work they do for your websites, so choosing the better one out of the two is somewhat tricky. Of course, like I have told you that your need plays a pivotal role in this decision. However, ending this article without a clear winner would make it seem somewhat incomplete and I do not want that. 

So, for me layout builder is the better choice and I will tell you why. The kind of intricacy layout builder offers and the control I would get for layouts for each page, that too with consistency, makes the layout builder the one for me. 

Apart from these two, Gutenberg is also gaining some traction as a flexible module. However, it stores the content in a large body field and this often compromises the structure of the content.

I also want to mention one more fact and it is that flexibility often comes with a price. Having a really flexible content can often impede with the accessibility of  your website as your content may lose its semantic markup. Also make sure to add metadata to your content in addition to flexible content components..

All in all, Drupal allows you to create websites and their content in a well-structured manner and despite what module you choose, the end result is always going to be satisfactory. Contact us at [email protected] to get the best of both the worlds in your next Drupal project.

Sep 21 2020
Sep 21

There are two kinds of instances that we never forget in our lives; one is when we hysterically cry, and the other is when we hysterically laugh. The other moments in our lives are bound to lose their place in our memories, but not these. Have you ever forgotten a time when you laughed like crazy or cried like a baby? You know I am right. 

These moments are not necessarily associated with your personal lives, these can be related to the professional and commercial experiences you witness at any point. Now, I would not be talking about the upsetting consumer encounters you might have had, since I do not want to dampen your day. Instead, I will be talking about the kind of experiences that make you go all smiles.

We smile because we are happy or smile because someone has cracked a funny joke. Jokes do not have to be limited to social gatherings and Whatsapp messages; they can transcend to the world of web design. Yes, you read it right. Today, jokes, or shall I say humour has become an integral part of web design. Humour has the potential of taking an ordinary website and making it extraordinary. 

If you don’t believe me, continue reading, and by the time you will finish, I am sure your opinion would have changed.

The Importance of Humour 

Humour is an element of our lives that makes it brighter and livelier. People look forward to reading jokes, making jokes and laughing at their hilarity. You know you like those PJs as well, they might not make any sense, but they can be funny. Stepping a little up from the PJs, and moving on to web design. Humour has become extremely important in the world of web designers. It can make or break their designs, it is that powerful. Let us understand why.

If someone is funny and quirky, you will instantly like him or may even be drawn to his or her funniness. Am I right? The same is true for web designs. A user experience that is instilled with enlightening as well as humorous elements is going to be a hit. Humour has the potential of contributing to sales by highlighting a product or service’s attractiveness and making you drawn to them. It does so by giving them a genuine personality. Don Norman believes the same and has vocalised his beliefs in his book, Emotional Design - Why We Love (or Hate) Everyday Things.

After a customer is lured in, you have to keep in mind his needs in order to gain his loyalty. These needs start with the functionality of a product, then move onto its reliability, after becoming satiated with the usability of the same, these needs are finally placated with the pleasure factor. If a product is pleasurable to the user, only then can it be deemed as a success. And you must know that pleasure and humour are the best of friends.

The image shows a pyramid with four segments, pleasure, usable, reliable and functional, describing the hierarchy of needs.Aaron Walter's pyramid of emotional design | Source: Treehouse

Humour is bound to create positive emotional stimuli in all of us. When a user experiences such a response from a web design, there is a high likelihood that he will develop a sense of trust in the same. And that is the reason why humour is important in web designs and should be implemented, but with caution. Read more about the link between decision science and web design to understand how to make design decisions. 

The Subjectivity of Humour 

Humour is a kind of quality that is possessed by everyone, yet everyone has a different notion of it. What may be funny to me, can be offensive for you and nobody can say that our notions about it are wrong. We just have a different perspective.

So, the web designers have to keep this in mind, you have to understand your audience before committing to any humorous elements you want in your designs. 

A web developer has to first comprehend the subjectivity of humour. Yes, every joke is not going to be funny for everyone, but it can be funny for the majority of the people and that should be the ultimate aim. Your jokes need to be understood by most people visiting your site, even if you are using innuendos, they should not be indecipherable. 

The image shows a cartoon with a confused expression, to symbolise the subjectivity of humour in web design.The confused expression is not the reaction that the web developer aims for.

Zeroing in on your target audience will help a great deal in this feat. To help you catch my drift, I will tell you something that you must already know. And that is the fact that the eastern and western cultures are vastly different. So, the kind of jokes these two people find funny are also different. You can joke about celibacy in the west and people would laugh, but if you joke about celibacy in the east, where the Buddhist Monks preach it, you will not get the same reaction.

So, identifying your target audience is crucial, as it would decide whether your humour would hold a punch or not. The subjectivity, the cultural intonation and the contextual meaning of a joke are to be mastered before using it into your designs. 

The image shows a stick figure with a sombre expression, depicting the importance of contextualisation in humour.Source: 9GAG

Here the second phrase, when used in different contexts has very different meanings, and this kind of contextual differences cannot happen in your web design.

The Categories of Humour 

Humour is something that is funny, something that makes us smile, laugh and roll on the floor laughing or ROFL, if you please. I like to believe that I have a great sense of humour, I laugh at things that are not even worth laughing at and a person with that kind of humour must know everything about it, right? But that isn’t the case with me, I did not know that there were seven categories of humour. Did you? For me funniness, satire and irony all fall into the same category, being one and only one. 

So, getting to know the seven varying diversifications of humour in web designs was quite enlightening for me. I hope it is the same way for you.

Comparing with comedy 

Humour by comparison is the most commonly used way of making boring elements on a website become interesting and refreshing. Going through a product’s specifications becomes a chore, if you do not find something funny in the never ending description. Making comparisons that are not only funny, but also serve the purpose of highlighting what the web designer wants is a tactic that could never go wrong.

Personifying with cartoons 

Do you remember the early 2000s? Did you use Microsoft Office then? If you did, you must remember Clippit or Clippy. It was a cartoon paper clip that served as an office assistant. I thought it was cute, funny and somewhat useful; however my belief was not very popular. The point I am trying to make here is that the addition of an animated personification can add character to your web content, giving the customer a break from the monotony of the content. A mascot is a great way to do just that.

The image shows an animated paperclip used in web design as humour.Source: Wikipedia 

Exaggerating with hilarity 

With exaggeration, we take a normal incident, magnify it in our minds, and relay the same with a lot of more severeness than it actually had. It is like saying that you were attacked by a mammoth sized dog, when in actuality a pug barked at you. If you know something is being exaggerated, then it becomes quite hilarious. 

Pun with fun 

Pun is something we are all familiar with, and enjoy a great deal. So, why not use it to make your website all the more interesting. The thing about the usage of pun is that it is quite tricky. It can very easily go into the territory of offensive, if it is not used properly. So, tread lightly when using it in your web design.

Silliness with funniness

Have you ever watched the American TV show Friends? If you have, what do you think of Phoebe? Do you find her funny? I personally do, she is the kind of funny that is silly, yet hilarious. You would never be offended by her character. So, taking inspiration from Phoebe’s hilarity and silliness and implementing it into your website could be a genius stroke. 

Surprise with laughs

Getting pranked is the best kind of surprise, at least to me it is. Being ambushed by a horrifying ghost in a funny video is bound to make you laugh until you cry with your heart racing at 100 km an hour. You must have experienced it sometime. Now, you tell me would an unexpected element of humour not be appreciated in a webpage that could otherwise be boring?

Jesting over the Easter Egg

As finding the easter egg amidst bunnies is no easy task, the same way the humour denoting with the same name is also not easy to find. This one is hidden and that is why it is a gem, when you finally get it. Web developers have been increasingly making use of easter eggs as an element of humour in their web designs and the users have been appreciating the hunt. Have you ever searched the meaning of the word askew on Google? Before you get on to the meaning, you would find something that would give you a clue as to the literal meaning of the word. Your beloved Google would become skewed itself. Is this not clever?

The image shows Google's skewed search page.The skewed screen on your computer when searching the term askew.

An amalgamation of all of these with subtly can make your website’s experience a memorable one for every user to come.

The Implementation of Humour in Web Design 

The thing to remember about humour is that if you have to force it, it is bound to lose its intensity over the audience and your joke would fall flat. Under no circumstances, do we want that. Humour has to seem spontaneous and natural, only then can we enjoy its full magnitude. 

To help you do the same, I will tell you some of the insider secrets of web developers and the way they make humour work for them.

Introducing yourself with a flair

Every website is going to have an About Us page, this is one area in a website that the content creator can create any way he wants to. So, if you want the customer to remember everything about you, you have to make yourself interesting enough to be remembered and humour helps in that. You can talk about history with light heartedness, you can talk about your struggles with humour rather than seriousness, and you can present your team in a fun and refreshing way. See the following example from Lessfilms website:

The image shows funny pictures of a company's team on their webpage.This one hit the mark with the introduction of its employees. The red guitar stole the show. | Source: Less Films

Making boring, yet crucial information interesting 

Webpages are supposed to have a lot of information and a lot of information can become quite boring to peruse through. Since the information has to be given to the user, what can be the solution here? The answer is simple, humour. Adding humour, in all of its categories can make your website content speak through and serve its intended purpose.

A web design with a green backdrop is shown with an ongoing chat on the side.A customised chatbot message. | Source: Lazy Gardener 

Covering up your mistakes

There are often times when your users face problems while surfing through the website. More times than not these problems are frustrating and annoying to the point that they think about going back and looking for something else entirely. Can this annoyance be overcome with humour? Let us see if it works for two of the most annoying things.

The 404 error 

When you get to know a page you were looking for does not exist anymore, you will become frustrated. Here a joke is bound to alleviate some of that. Look at the picture below, did it not make you smile just a tad bit?

A crying cartoon is depicted in the image with the 404 error often seen on websites.

Slow loading 

Apart from the page not found error, when a web page takes ages to load, that also becomes quite a nuisance for the user. There might be a genuine reason for the slow loading, but the problem would still be there, so what does the web developer do? You would use humour in a very subtle way to make the user wait a little longer and see what he had intended to.

A snail is shown in the picture to represent the slow loading process.

Narrating a story 

Sometimes storytelling becomes a necessary part of the web design. It is important to make your point come across in a simple, yet comprehensive manner at the same time making it relatable to the audience. Now, when you add a dose of funniness in your story, it would accentuate your point even more.

Creating a mascot 

A mascot is any object, human or otherwise that is bound to bring you luck. And web developers need all the luck they can get, like most of us. So, creating a website with a funny mascot that keeps popping up in regular intervals to let the users know whatever they want is a great way to make your website’s experience a little more eccentric than dull.

An animated boy is shown eating a burger as an innovative and funny web design..The cute kid with that appetising burger is enough to start a craving.

Baiting with humour 

You must be familiar with the term bait, it basically means to lure people in by enticing them with what you have. Have you ever read something like, “If your dog does this, here is what it means.” You might not even have a dog, but you will be inclined to know what the dog actually does. This is what bait means and it can increase the traffic on many websites.

An instruction is written in white on a blue background, often seen in webpages..If it were me hovering over the click button, I would certainly press it and find out what is inside.

The Avoidance of Humour 

Just knowing where and when to use humour is not sufficient, you should also know when to avoid it. Humour can only work its charm when it is used appropriately, incongruous use of humour can lead to devastating effects. You can’t be cracking jokes at a funeral, right? Right!

Here are three ways to avoid humour taking a toll on your website’s traffic.

Unnecessary implementation

You have to assess the right place and time of using comical aspects in your web design. Using comedy in a serious situation can have serious repercussions, one of which is a brutally harsh feedback from a customer and we do not want that. 

A lady can be seen covering a mouth in an oops reaction.


Seeing something like this on a retail website when your transaction failed and money got deducted from your account is bound to make the customer livid. So, to all web designers, do not go this route.

Confirmshaming 

This one is as insulting as it is inappropriate, if you want your website to be user friendly, I would advise to stay away from confirmshaming. This is a form of humour that uses guilt to make the customer do its bidding and that is just wrong. Telling someone that they are fat and should join your 15-day detox program is not the right approach from any perspective. 

There is a white background with information and instructions for a task to be down by the user.This image is a prime example of insulting and goading a customer in clicking, since nobody would want to be unhealthy.

Making it a distraction 

Using humour in a way that it distracts the customer from what you and your website is all about is probably not the aim. So, when you use comedic elements in your design, try to ensure that it is clearly understood by all the audiences or at least your target audience and it aligns with your website’s purpose. You do not want to leave any room for misinterpretation. This is because if a product is misinterpreted and the consumer does not get what he thought he would, he is definitely going to regard you as a liar.

The Backlash of Humour 

After telling you the ways to avoid humour getting in the way of your success, I want to tell you a story about the negative repercussions of the wrong kind of humour.

Pepsi is a world renowned beverage company, second most successful in the world in its arena. Pepsi is also famous for creating inspiring and unique ad campaigns. They are usually a hit, but their 2019 campaign missed its mark by a long shot. The only reason was the fact that they had taken a serious situation and made light of it. 

[embedded content]


As you can see in the video, a bottle of Pepsi was all it took to restore peace in the world. Do you also see the bizarreness in this idea? On top of this, the stark resemblance to the Black Lives Matter campaign did all the more damage to the company, the tweets are proof that. Pepsi had to retract the ad and issue a public apology. 

Therefore, it is advisable to avoid making humorous content on serious topics than making it and apologise later. Although it was a video commercial, the implication will be the same for website design as well. Nobody will tolerate humour on a subject they are sensitive about. The fine between humour and offensiveness has to be made very clear before implementing humour in your designs. Otherwise the backlash is going to be too brutal to bear. Take a look at how diverse design teams can help make better design decisions.

The Bottom Line 

Using humour to make your website’s experience more enjoyable has indeed become a trend; however, content creators and web developers have to understand that humour can just as easily turn deleterious as easily it can turn meritorious. 

Humour in web design is like a flaming ball of fire, the appropriate usage can make it as powerful as Goku’s dragon balls, and inappropriately used humour can turn your design into ashes; metaphorically speaking of course. You have to have a balance, do not go overboard and do not use it so little so that it becomes non-existent. When you attain that balance, your web design would become one to watch out for, trust me.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web