Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Dec 31 2020
Dec 31

Wouldn’t you say that websites are meant for everyone. If a children’s clothing site is not able to serve the needs of all the parents that fall in its target audience, what would be the point then, right?

We know every person is different, from the way they see things to the way they analyse them. Our differences do not make us less than the next person; web accessibility has ensured that, at least in the web domain. There are people who have certain physical conditions that limit some of their abilities, they are simply differently-abled from the rest of us. 

  • Colour blindness can affect the visual perception of a website.
  • Wheelchair user-concerns can affect mobility. 
  • Hearing problems can affect the auditory elements. 
  • Photosensitive epilepsy can induce seizures in a person through certain elements on the web. 
  • Dyslexia can affect the cognitive awareness of a user. 
  • Sleep deprivation, an incidental issue, can affect your accessibility as well.

All of these and more can impair the user experience for people who are suffering from them. That is where web accessibility comes into the equation. This blog will talk about the ABCs of implementing the best practices when designing for web accessibility. 

What is Web Accessibility?

Where websites are concerned accessibility becomes an important consideration that can actually become their breaking point, if not done the right. Before I start on the long tirade on how to make the web accessible, it is equally important to understand what it actually is. 

Web Accessibility can plainly be understood by its purpose, which is to make websites and their numerous tools and technologies in such a way that people with disabilities can easily use them. It is actually as simple as that; building websites that cater to the differently abled people. 

A more thorough definition would point towards making websites that; 

  • Can be perceived by people with disabilities;
  • Can be understood by them; 
  • Can be easily navigated by them; 
  • Can be interacted with; 
  • And they can also contribute to the web through them. 

This concept or more like a principle takes into account all the disabilities that have an affect on the web user experience, be it auditory, cognitive, visual, speech, neurological or physical. 

You might be thinking that that is all web accessibility is responsible for, to make the web more accessible for people with disabilities, but there is more. 

  • From different input modes to bright sunlight affecting the UX;
  • From transient disabilities like fractured hand to ageing hampering your abilities; 
  • From a slow internet connection to an expensive one; 
  • From people in rural areas to the people in developing and under-developed nations;

Web accessibility is meant for all, it takes into account every aspect that can impede on a person’s web experience, eliminate them and make the web a place that is all-inclusive to the core.

It is a concept that is meant to highlight the web accessibility, that is a given because of its name, at the same time, it is also a concept that works towards usability and inclusion. All three are pretty closely related, perhaps that is why they are considered to be the fundamentals of web accessibility. You know what that means by now, however, with usability, the purpose is to build designs that can be used by everyone, while inclusion focuses on diversity, aiming for the participation of everyone in the experiences the web can offer. 

Do you not think that web accessibility is crucial in the way we design our websites? I am certain you do.

What is the standard for Web Accessibility?

In 2008, the new web accessibility guidelines were implemented and even in 2020, they are still prevalent. These guidelines have set the standards for accessibility that all web experience provides must adhere to. These are the WCAG 2.0 guidelines and they can be summed up in four principles. 

Make websites perceivable 

It is after perception that you actually start becoming involved in something. That is why the first principle of the WCAG 2.0 guidelines is making sites perceivable. How do you perceive something? Using your senses, right? Sight, sound and touch being the players here. So, the elements on your site need to be focused on these senses to be truly accessible. To exemplify, it would help a blind person to hear the description of a video to perceive what is going on in it. 

Make websites operable 

Making a site operable means ensuring that all users can use it with ease, by all, you know I mean including people with disabilities. Operating a website has to do with its navigation and interacting with various components. As per this principle, your site should be equipped to operate well in a keyboard-only navigation without any time constraints along with helping the user out, if he were to make some errors. 

Make websites understandable 

Next is the understanding of a website, your users should not have to spend a lot of time to understand some simple instructions. Therefore, the third principle focuses on using clear terms that make even the complex of issues easy to understand. 

Make websites robust

This last principle is a bit on the technical site. Using a clean code for HTML and CSS that meets the overall standards would make it very easy for other technology, third-party included, to depend on your site. It would make your site more robust and thus, easy to process.

How to design for web accessibility?

Now comes the important part, knowing the semantics of wens accessibility won’t do you any good, if you do not know how to implement them in web designing. It is not going to be a drastic change in the design palette of your existing website, rather some minor, yet thoughtful, changes can go a long way in achieving the accessibility standards. So here they are. 

Aptness in contrast 

I’m going to start with contrast because I feel that contrast is one of the major problems seen in accessibility, despite it being a basic one. The text and the background needs to be in contrast to make the text pop. It could be in images, buttons or plain CTAs. For this reason, WCAG has set certain parameters for contrast ratios that need to be followed to achieve the basic requirements of accessibility. There are three types of text generally seen on websites, and all three need to maintain a separate ratio. 

For body text, the ratio is 4.5:1;
For large text, it needs to be 3:1;
And for black and white text, the ratio is to be set at 21:1.

You may have noticed that the larger text had a smaller contract ratio, the reason is simple, larger text is easy to recognise. A size of 24 pixels or a 19 pixel bold would really be hard to miss. 

The homepage of NBC is shown.


Aptness in colour 

Did you know that one in every twelve men is colour blind? It may seem like a lot, but that is true. The inclusion of people suffering from colour blindness, low vision or total blindness, thus becomes very important, because they account to a massive proportion of web users. 

So, just using colour to highlight a component is a colossal mistake in terms of accessibility. You have to use other ways of highlighting the same component. 

Different coloured shapes can be seen in two boxes, one has number written along them and the other doesn't.

While the first image is a perfect example of what not to do, the second one can be considered as an epitome in using colour and keeping accessibility in the picture. 

Aptness in forms 

Today, you would hardly find a website that would not accompany a form to fill, after all that is their way of connecting with the audience. So, making the forms accessible to all audiences is key. And sufficient labelling is the way to do it. 

Every field that you have in the form needs to have a corresponding label that isn’t too far away from it. Adjacent labels are much better than the ones inside it that disappear after the field has been filled with content. 

You may know that oftentimes a form is filled the wrong way, so letting the user he has made an error is also crucial. This needs to be done using colours and an instruction or some sort of a sign because someone with colour blindness might not be able to see the red that is being highlighted in an erroneous field. 

An incorrectly filled online form can be seen.


Aptness in focus elements 

There are certain elements in a web design that require more focus than others, these are essentially the interactive elements of a site, such as the BUY NOW button. You would have read these two words before even reading the sentence because they are in capitals, meaning they are focused. 

The same ideology has to be followed by you in web designing. You should have a different highlight for when a button is hovered over, when it is reached by the keyboard and when it is touch or click ready. 

A webpage can be seen with one highlighted section to showcase the importance of keyboard focus in web accessibility.


If your focus elements are not highlighted properly, by say a keyboard, can it be possible for the keyboard user to actually get the full experience of your site, I think not. 

Aptness in media

Media is another integral part of your website, some might even say it gives life to an otherwise dull webpage and they are not entirely wrong. To keep the liveliness alive, you have to make the media truly accessible. 

Starting with images, it is extremely imperative that you provide alternative text to the same. Adding a caption and description is equality pivotal for audiences using a screen reader. Almost all the CMSs have a pretty prominent alt text option while you upload an image, ensure that you use it. 

The addition of alternative text in pictures is shown during the publishing process of a blog.An example taken from one of our blogs.

What alt text is for images, transcripts are for the audio elements of a website. For the users with auditory difficulties, transcripts that are the sole medium of inclusion. With videos, it becomes necessary to include an audio version of what is happening in them. Considering explaining complicated graphs and tables is another step closer towards accessibility. 

Lastly, I want to mention autoplaying audios and videos. Nobody wants to listen or see them and they only make the user rush to find the button to stop them. So, as a general rule of them, add audios and videos in such a way that the user willingly plays them. 

Aptness in navigation

A user won’t just access a single page on your site, if he does that, then you won’t ever achieve your targets. To go through all of the pages and potential of a website, a user would need to navigate through it and you have to provide an obvious way to do that. You can do that by multiple ways with the provision of orientation cues, a site map is one of the most common ways. 

All of this depends on the layout and the structure of your website, so ensuring that it is meaningful and logical would go a long way in achieving accessibility. A well structured layout should have a couple of things in order; 

  • It should be flexible and resizable;
  • It should have a minimum of 320 pixels; 
  • And it should be able to zoom upto 400% and in close proximity. 

All three help people with disabilities navigate easily. Imagine you are using a magnifying glass to read through all the content and options on a website, would you not prefer that the things you are looking at are close to each other? You don’t have to tell me, I already know your answer. 

Then come the keyboard users, you have to be mindful of them as well. Without getting into the reason for people using a keyword instead of a mouse, I would tell you that for these people the tab key is the most crucial. You have to keep in mind when creating the order of your design, since you do not want your user to get lost while navigating. 

Aptness in content 

The content on your website is its heart and soul; it is what lets the user know of your intentions and your work. Therefore, being extra diligent with the content and its placement is prudent to avoid clutter. 

Let's start with readability, you cannot write your content like it is Da Vinci Code, yes, some people might still understand it, but that is not the aim right. Use simple language with short sentences, short paragraphs and common vocabulary because if the audience is not understanding it, well then, it’s a moot point. 

Then there is the spacing issue, you need to adequate spacing between paragraphs, lines and individual letters as well. 

It is recommended that the paragraph spacing should be twice the font size;
the line height should be 1.5 times the font size; 
And the letter and word spacing should be 0,12 and 0.16 times the font size. 

A similar content is shown writeen in two different styles to highlight how important spacing can be in web accessibility.The difference between the two is pretty stark. 

After doing so much, also try using a font that is easy to read on multiple devices, Arial and Sans Serif are a couple that are just that. 

Aptness in controls 

Then comes the bit about controls, and what are we controlling? That would be ‘the interactive elements.’ Every website has them, be they in the form of buttons or links, they are going to be there. Accessibility would be achieved when these controls are designed so that every person, despite their disability can use them. 

For instance, a person suffering from tremors might not be able to interact with a really small icon. He would find it very difficult to select or unselect a checkbox, the same is also true for the elderly, who suffer from a reduced dexterity due to age. 

Therefore, the size of a control needs to be 44 by 44 pixels, as per the recommendation of WCAG. However, even the size of 34 by 34 pixels could be deemed acceptable, anything below it would be prejudicial. 

Aptness in feedback 

As a last point, I want to mention your part in the user engagement process. When a user does something, whether it is right or wrong, your website should give him an indication of the same. 

For instance, he has filled a form, then there has to be a confirmation message or if there has been a modification in the page he was using, there has to be a notification to alert him of the same. This is called your feedback to the user and it has to be prominently displayed for the user to really get it. 

Aptness in effects 

Photosensitivity is a disorder that can cause headaches, nausea and make the sufferer dizzy. Photosensitive epilepsy is a disorder that can induce seizures in the patient from just fast flashing lights. Since many websites use effects and hyperlinks that blink rapidly, these people would suffer a great deal if they go on and use the said sites. 

 Therefore, accessibility guidelines mandate that you use animations and effects that do not make people suffering from epilepsy and photosensitivity suffer more. This could be achieved by trying to use; 

  • Animations that are small in size in comparison with the screen;
  • Animations that go in the direction of the scroll and follow its speed;
  • And animations that are not constantly moving or blinking. 

To be on the safer side, try to provide an option to pause or hide them, if the user wants to. Some sites even give the option of slowing them down, now that is a thought. 

Access this ultimate guide to plan for web accessibility. And, for a complete guide on web design, read this.

Conclusion

I want to conclude by saying that designing for web accessibility may mandate that you follow a certain set of principles, but that does not mean that it is inhibiting your innovative streak. Think of it as a chance to transcend your abilities and make your web experiences all the more valuable. 

For that to happen, you would have to constantly evaluate your site, especially in the design and development phase. An accessibility audit would help a great deal in that. It would help you in knowing the areas that need improvement and guide you through the accessibility transformation. 

Dec 24 2020
Dec 24

2020 came in like an uninvited guest and brought along unprecedented conditions that the whole world continues to cope with. We had to cancel our plans, sit at home and adjust to the new normal with a hope that this chaos would clear soon. As this year brought the world to a standstill, it taught us one thing - “When something doesn't go as planned, stopping is the worst thing that you can do.”

This unprecedented time had its impact on OpenSense Labs as well. With the new restrictions across personal and professional activities, we had to take some aggressive yet sustainable steps to fulfil our promises. No doubt we succeeded in doing so and turned 2020 to yet another productive and successful year for the team and the organization.

Let’s have a look at some of our proudest achievements this year, bragging about which is mandatory :D 

The successful completion of 12+ projects 

Despite what we may be facing, life would always keep moving forward. With the same notion, OSL successfully completed 12 projects and counting in the span of this year. Allianz Loyalty Program - an intrasite and StemFuse - an e-learning program, are amongst our most fulfilling projects. 

There are different logos of OSL clients in various rectangular blocks.


Digital transformation fulfilment for 15+ new businesses

Delivering success is not the only objecting we aim for. Our business growth strategies and hard gained credibilities won us 15 new projects across the digital spectrum. The new business allianze from across the globe added up to the confidence and motivation of the team. With this, OpenSense Labs continues its journey to deliver the best in class digital experiences for its clients.

OpenSense Labs' various services are written on a dark blue background.


Stepped into the space of CDP and Mobile Application Development

We initiated our strong roadmap of enterprise solutions by expanding our technology services and expertise in the field of Customer Data Platform and Mobile Application Development. With new projects in these domains, we are continuously gaining valuable experience to bring greater efficiency, ease and power to our clients. 

Community Event : Drupalcamp London 2020

The year began with the Drupalcamp in London, before the COVID-19 strike (oh! the simpler times). A successful session over Federated search solution was addressed by our CEO. Even though later on, OSL could not take part in other virtual Drupal events, we decided to support our community by investing our time and resources heavily on Drupal support forums and projects.

A picture from one of the keynotes during DrupalCamp London can be seen, with the speaker addressing an audience.


Ranked 5th as Global Drupal Service Provider

This year, with around 100 projects and an average of 150 issue credits for every 3-months we ranked 5th as Drupal global service provider. The credit undoubtedly goes to our developers for continuous contribution to Drupal’s Core modules.

The number 5 can be seen taking prominence on a dark blue background.


Our efforts remain to be an active contributor and strive to invest more to the knowledge and support toward our Drupal community.

A better version of OpenSense Labs with website redesign

Our website, which is the base ground of our capabilities, mission and values, all-in-one, went through a redesign. Our new design language personifies our vision, our goals and most importantly, our clients’ successes. We are still the same at core, yet better equipped to understand and interact with you. 

The homepage of OpenSense Labs is shown.


An adaption of work dynamics and culture that enabled productivity

With our offices closed and all the resources operating remotely, we could experience a restricted flow of knowledge, collaboration and communication. But we slowly and steadily accommodate ourselves to this new normal. With the adaptation of new technologies and modification in the process and workflow management we are continuously trying to overcome these hurdles. 

The names of applications used for work from home are mentioned.


Team OSL enjoyed its annual excursion and holi celebration in the first quarter of this year. During the pandemic, team engagement get-togethers were on standstill. However, thanks to our human resource team, we conducted virtual activities to bond and share our experiences.

Three pictures of the OSL team can be seen in the form of collage.


The result of these came in the form of motivation and step by step achievement of our milestones.

Expanding our team - 30 new enthusiasts joined the OSL family

While several companies all over the world laid off employees, OSL takes pride in expanding its team instead. We continued adding new experts to our team from the beginning of the year and throughout the pandemic. OSL even added new departments - AI and Flutter, which opened up a multitude of job and growth opportunities. We believe that we can only work to provide excellence to our clients when we have the right team to do so.

The names of different departments and the number of new employees in them are mentioned.


Aiming to achieve newer heights in 2021

With new business goals to achieve higher organizational growth, we are fully prepared to step into the new year. Here is what 2021 holds for OpenSense Labs -  

  • Launching a new face of OSL with improved design and content. 
  • Becoming a knowledge hub around Drupal and other digital experience spaces. 
  • Catering to technology services around education-tech, AI, Loyalty Platform, content distribution and SaaS. 
  • Proffering products ranging from site audits and personalisation to cloud-based decoupled Drupal. 
  • Adding new capabilities for our client with flutter mobile app development services
  • Expanding our domain in the digital experience platforms and creating an open source community for it - TheOpenDXP
  • Further expanding our team across all the project delivery prepositions

The endless journey

2020 may be ending, but our work and our journey isn’t. This year has been great for OSL, despite its tumultuous nature. But that is life, we have to continue being positive, regardless of what we are facing. Here is to hoping another great year ahead for you and us. 

Cheers to 2021!
Cheers to a better future!

Dec 22 2020
Dec 22

With over a million Drupal sites across the world, it is suffice to say that Drupal has become an eminent name in the CMS market. Not to brag, but it is jam-packed with features, features that can make your website transcend the ordinary boundaries. Due to the many features and modules, both core and contrib, Drupal is sometimes regarded as being slightly complicated and then the question comes, ‘How to start a Drupal project?’ Today, I am going to give an answer to the same question in the easiest way possible. 
 
For you to truly understand and begin a Drupal project, it is important to get the perspective of the people involved in making the project come alive. For it is these people who will be handling the project from the get go, so the tips they give are the tips that would make a difference.

Before I get into that there is one thing I want to mention. Yes, every stakeholder is responsible for his own thing, when starting a Drupal project, however, there is one aspect of the project that needs the contribution of all parties involved. And that is defining the information architecture of a site. 

The IA is basically the organising and labeling of a website. You can call it an art or a science, that is up to you. This is an aspect that does not have one person responsible. From the content authors to the designers and the business analysts, everyone has to contribute their bit to define the IA as clearly as possible. Getting to the minutest details and getting them right from the initial stage goes a long way in achieving the project deadlines and the business requirements as well. Therefore, the involvement of the entire development team and all the stakeholders is the right way to start your Drupal project. 

Now let’s get on with the tips accumulated from the pros themselves. 

There are six bulleted points for your Drupal project's entire team.

The Developer’s Tricks  

Commencing the tips with developers and all of their tricks, since they are responsible for the fundamental makeup of a Drupal project. From a development point of view, you would have to be mindful of a lot of things before starting your Drupal project. 

Developer’s environment 

If a project needs to be at its best, it needs the right environment to grow. By the right environment, I mean three of them, a remote, a live and a local environment. You cannot skip one; if you do so, you would break the workflow, which is essentially described as local leading on to dev-stage and then on to production developers. 

Developer’s consistency 

Continuing the conversation on the developer environment, it is also very crucial for your project that all your developers have a consistent local environment to work with. Let me tell you how such a development environment would benefit you. For one, it is going to help your new developers to get up-and-running in no time and it would also eliminate the need for your developers to keep dabbling in their own local environment. Consistency always pays. 

Developer’s understanding 

How much your developers understand the Drupal ecosystem is another tip to help you in escalating the growth of your project. Discussing the common terminology with the team members helps in keeping everyone on the same page. The basics have to be clear along with a commitment to follow the system. It has been seen that the continuous integration/ continuous delivery trend has picked up a lot, however, if your developers are simply going to ignore it, then what is the point? 

Developers and Git 

You are going to have more than one developer/ programmer and you would want them to coordinate with each other. You would also end up changing your source code from time to time and you would have to keep a track of the said changes. A Git Repository would do just that for you. 

Developers and Codebase 

Moving from code changes to codebase management, Drupal 8 has a Composer template to manage your project’s codebase. This acts as standard in the said management, but there is hope for significant development in the composer projects within the Drupal community. 

Developers and Configuration system 

Drupal has its own configuration system that allows you to push non-code configuration changes between environments pretty easily. This helps in creating a robust workflow amongst developers along with a stimulating environment, wherein the members continuously upgrade and test configurations in a local setting before going towards the remote route. However, all of your developers need to be using the system, or else its benefits would never be reaped. Go through Drupal 9 configuration management strategies to know more.

Developers and auto-deployment 

You should also equip your developers with auto-deployment. The reason would be to fasten the development process and ease the DevOps process. 

Apart from these tips, you have to remember that even though your project is just in its infancy,it would be on the path of growth soon. Therefore, you must keep in mind the future scope of development while designing the architecture. 

The Content Author’s Part 

Well, this one is not really limited to the content authors, but more about their participation in the development process. Hence, it came right after the developer’s involvement. In the introduction, I talked about information architecture and this tip has to do with that. 

Focusing on the content authors first, a content author needs to update the content regularly, so they have to be comfortable with the system. You need to give them the chance to add and edit their content on a prototype site. This can only be done before the site actually goes on the floor. For best content authoring experience in Drupal, check out Paragraphs and Layout Builder modules.

The Project Manager’s Duties 

Project Managers have a leadership role in your Drupal project, perhaps that is why they are called managers. They need to have great managerial skills, after all they are the voice of the project. 

There are two aspects of project management that can make your project a guaranteed success. 

Setting feasible targets 

For one, a project manager should set such targets and milestones that are realistic and fall under the abilities of the team. Yes, pushing the team to do better is always going to be the role of leadership, but pushing them beyond their abilities would just make things a mess. 

Provide clearer targets, for instance, setting a 6-month deadline on the project does not really clarify many things. Try providing specific goals every team member would have to complete by then. For this to happen, you need to listen, more than command. Listen to the needs of the team and become their guide when they need you. You should know that providing training is a crucial part of a project leaders duties. 

Defining work roles 

Using a project tracker and totally committing to it becomes essential when starting a Drupal project. This is because a project tracker helps in ensuring more focus towards the project. However, a project tracker would only work if the work roles are clearly defined for the development team and every other stakeholder, inclusive of the project managers themselves. 

Access the expert insights on project management for complex Drupal projects for a better web development planning.

The Designer’s Role 

You must want your Drupal project to have an interface that is elegant, user friendly and serves all your business principles. This would be easy to achieve, if your web designers are competent enough to fulfil their role. So, when I was trying to find out all the design duties, our in-house designer was a great help and here are the tips he had for you. 

Determining the style guide 

At present, many Drupal sites prefer to create their own custom theme and for that to happen, your designers would need to create a style guide. There is no hard and fast rule to create one, it is entirely up to you to make it simple or complicated. There still are certain things you need to be mindful of. 

  • The style guide you create needs to have a typography and a colour palette. 
  • The typography you choose must be responsive to all devices, think of the H1s, the headers and the footers. 
  • The rules need to be set to ensure how every aspect would look in different screen widths, winging it won’t be ideal here. 
  • The elements you want to be displayed throughout the website need to be defined in the style guide. 

The user does not want your site to make his experience cumbersome, a thoughtful style guide is the way to avoid that and make things comfortable through consistency. 

Determining the wire frames 

A custom theme also means that you would be designing your own signature layout for your landing pages at least. A wireframe is going to give you an idea of how your site’s pages would be arranged and how they would respond to different screen sizes. In simple terms, a wireframe is a template of your webpages. 

Coming to its specific, it is important to focus on consistency. All your pages must follow a similar layout for you to achieve consistency. This would not only help you in reducing costs by avoiding to design one-off pages, but it would also help you in building your brand’s image. The common elements, that I talked about in the previous page, help in making the theming easy for you. 

Determining through testing

You have to test everything before you go on the ground and testing is a major part of the designer’s role. 

First comes the dry testing, which means the testing of the interactive design prototypes and that too on real-time users. If the project fails in this test, a designer would be responsible for accumulating the pain or problem point, fixing them and then testing again. However, if the testing turns out to be a success, then the designers can commence with the UI design as per the design guidelines set. 

Then is the design testing and the real-time testing of the project; it is called real-time because whatever issues are detected end up getting fixed simultaneously. 

Along with these, designers must also be thoroughly involved in defining the Information Architecture and user and market research to always be one step ahead in the designing process.

Read this comprehensive guide to web design for hammering out the right plan for your business.

The QA Engineer’s Tasks 

 A Quality Assurance engineer has a lot of tasks on his/her plate and all of them help in maintaining the quality of the project to the utmost standards. To ensure that a QA engineer should have the basic knowledge of Drupal, especially about the terms and admin portal, which helps in testing. A major part of the job is to test and test each and every aspect of the project, so it becomes helpful. 

Testing for functions

Functional testing refers to testing the functionality of the project. From testing the validation of textboxes and radio buttons to internal, external and broken links and URLs; from web forms and error messages to database and cookies, a QA tests every function, so that nothing goes wrong.

This also includes ensuring that the features built in the Drupal project adhere to the set goals and no extra permissions and settings are given based on the user roles. 

Testing for performance 

Performance testing mainly refers to validating a website’s performance, load and speed. Checking the stress limit and data load of a website. Tools like GTMtrix, YSlow, Pingdom can be used for this. 

Testing for usability 

A major consideration in the usability of your Drupal project is its accessibility and QA’s test for that. Then comes the navigation of your site, which should be easy to find, read and use, for instance by clicking on a company logo, you can reach the home, easy and simple . Finally, it is content, it has to be defined with clear H1s and H2s as well the use of SEO in tags should be optimised. 

Testing for compatibility 

Before going live with your project, you should check its compatibility with different operating systems, different browsers and their versions, different devices and different  networks, environments and hardware configurations.

Testing for security 

Focusing on security can never go wrong, that is why as the last task of a QA engineer, he/she tests the security parameters of a Drupal project prior to it going live. 

These include; 

  • Checking for any URL manipulation; 
  • Checking for Cross Site Scripting; 
  • Checking for Password cracking;
  • And checking for Drupal security updates. 

Read how QA plays an important role in software development projects.

The Business Analyst’s Responsibilities 

Up until now, we have focused on the project side of things, now it is time to focus on the business side of Drupal project and that is the responsibility of a Business Analyst. This position is the bridge between you and your consumers. The fact that effective customer communication can only be achieved through a BA, is proof of that. 

There are two major responsibilities of a Business Analyst, apart from what I mentioned above. 

Understands the project 

A BA has to clearly understand the project requirements and iterate the same to the Project Managers, who would then get the project in motion. So, it is very important to ensure that the requirements are feasible and that would only happen when the Project Manager are part of the discussion. 

Interprets the requirements 

A Business Analyst is also responsible for interpreting the project requirements to the team. What this means is that he would have to convert the business needs of the project into technical specifications. Imagine talking business to a developer, he would be the least interested in it. Therefore, it is the BAs responsibility to convey the business needs to the team in the terms that they understand. 

Brings in value 

Business analysts are known to work with real-time user data and analytics programs. They do so in order to understand and recognise user trends, the functions that are a success with the user base and the kind of problems a user would face while adopting your application. This data and its recognition is crucial for business success and BAs have a great role to play in that. 

A business analyst could be involved just at the front end, while assessing user needs or he could be involved throughout the project implementation, whatever the case, he is an important player in the setup of a Drupal project. 

The Bottom Line 

At the end of the day, a Drupal project is just a medium for you to let you enter the world of business. Your Drupal site would be responsible for generating an income for you or fulfilling your social responsibilities, like the Government of Australia’s website. Therefore, for your Drupal project to be successful, you have to align it with your business needs. When all the stakeholders have a clear understanding of your business and its sole purpose, then there is no stopping you. Saying that, the aforementioned considerations are like the starter pack of a Drupal project and you would be wise to pay heed to them before commencing your Drupal Project. 

Dec 18 2020
Dec 18

The web has become a popular destination today. An average person tends to visit it plenty of times in a single day. From finding out the weather forecast to booking a cab or ordering in, you can do it all by exploring the different aspects of the web and enjoy doing so. However, have you ever wondered how our experience of the web is made enjoyable? A ten-year old and a seventy-year-old can find an equal sense of satisfaction through the umpteen websites they surf through, despite their different intellect, but how?

The answer lies in the web design. What is that? Web design is a process that continues throughout the life of a web project. It starts with planning and conceptualisation of the website, goes on to arrange its content online and continues with the production and maintenance of the sites. 

This blog will try to cover every spec of the concept of web design, from its importance to its universal application to its principles. Before we get into that, let’s delve into the two categories of web design, which are adaptive and responsive websites. 

Adaptive design 

Like the name suggests, this kind of website design adapts itself based upon the device type or browser width. It makes use of a “user agent” that informs the server about the device that is in use, it could be a desktop, mobile or tablet and consequently shrink or enhance the screen size. In a different scenario, the design will use media queries and breakpoints to let the server know the version to implement, namely,1080p, 720p or 480p, offering much more flexibility. 

Responsive design 

The other option is to use a responsive design, which works with the proportion of container space taken up by a single element and shrink accordingly. If a header is at 25% space on a desktop site, it would remain at the percentage even in a mobile device. Like adaptive design, it also uses breakpoints to establish the need for the server and keeps changing constantly. 

With that knowledge, I believe we are all set to commence into our comprehensive guide to web design. So, let’s start. 

The Importance of Web Design 

A chart is shown describing the need for web design.Source: McKinsey & Company 

The image above clearly depicts the importance of design. Web design has to be idolised for business success through leadership, inclusion, continuity and user experience. You cannot confine it, it has to have free reins for it to boom. 

Website design is indeed one of the major contributors in your online revenue. You could say that a good web design is directly proportional to a higher revenue. Now, let me let you why. Like I have said before, the web has become quite popular, people go on it regularly and check your company's online persona to see whether you are worth their time and money or not. If you are able to impress them with your design skills, you are bound to experience an impressive conversion rate. 

In simpler terms, 

  • Design is important because it acts as the first impression of your business. 
  • Design is important because it creates a consistent brand image and encourages the user to put his trust in you. 
  • Design is important because it gives you an advantage over your competitors. 
  • Design is important because it enhances your UX, making the user’s time enjoyable rather than frustrated. 
  • Design improves your performance, reduces the load time and the bounce rate, increases the conversions and amplifies consumer service and satisfaction levels. 

Let me exemplify this, today nobody would want to spend their money on a product that they haven’t researched thoroughly, be it a watch or a car. And where do people go to execute the research? Yes, to your website. So, if you answer all the questions the user might have in your product description and alleviate all the worries, the user will most likely buy from you. And all of this falls under the web design umbrella. 

So, yes web design is critical for your website’s success, for your sales and for the longevity of your business.

The Prerequisites of Web Design

Before delving into the principles of web design, it is important to know how you would prepare for it. There are certain requirements of web design that need to be fulfilled before you can get on the floor with the actual designing. 

Finding the inspiration 

Being inspired is the first step of designing, after all can you design anything without inspiration? I think not. So, explore, research, get to the very basics and see what you like and what you don’t. Go to Pinterest, if you have to, but start looking. This would set a great tone for the entire designing project because you would have some idea of what the end would look like. 

Finding the purpose 

After inspiration, comes the part where to find your purpose. You are building a website, there has to be a reason for that. Identify it and design accordingly. Majority of the time, the purpose of a site is sales, be it memberships/ subscriptions or an actual tangible product. Keep the purpose front and center and design to capitalise it. If indeed you are selling a product, design the pages in a way that each page is an encouragement for the user to click on that buy button. Take Amazon for instance, every time I go there, either I make a long and extensive wishlist for future purchases or actually buy things. That should be the target. 

Finding the needs 

There are also specific needs that a website has before its design process actually begins. 

  • The first would be to establish your space on the internet through a web hosting service. Then you would need to adopt a domain name through which the users will identify you. Along with this, you would also need your domain name and server to be in sync, so that the browsers know where to find you. 
  • Next, figure out what structure your site would have, how many pages would it have, what kind of content those pages would include and which of those are going to be your landing pages for marketing purposes. 
  • Then comes the functionality, you cannot just wing that. Remember we figured out the purpose of your site in the previous point, that purpose would help you in figuring out the kind of features your site should and should not have. For instance, the functionality of an informational site is drastically different from an e-commerce website. All of this is decided before the designers go on the floor with the process. 

Finding the tools 

You cannot work without the tools, so finding the ones most suited for your project is a key requirement of web design. 

If you wish to build a desktop app, then tools like Sketch and Photoshop are perfect for the designers as well as the developers to create the code for the designs. However, if that is not the case and you are aiming to build a site, then you can make use of Website Builders like PageCloud, Wix and Squarespace to name a few. 

Remember to do your research and maybe even get a free trial before committing to any one of them. 

Finding the personnel 

To use the tools, you also need the right team. Designing websites is not a one man job, you need the right mix of skills to get the best possible outcome. 

  • Designers to create mockups of the site;
  • User experience experts to ensure that the mockups align with the target audience’s needs
  • Developers to get the coding out of the way, the front end developers would take up the presentation layer, while the backend developers would work on the background; 
  • Content writers and SEO experts to write for the project and make it visible on the web through searches. 

Now, you are prepared to get into the nitty gritty details of web designing. 

The Principles of Web Design 

Web designing is a long and complex process, there are a lot of considerations to be kept in mind before the process can be considered even half-way through. Here is how we at OpenSense Labs divide the process into different segments of development and ace every one. 

Information Architecture (IA)

Through Information Architecture, designers are enabled to prepare an organised layout of the information that has to be relayed to the visitors; navigation and menus, being the spine of an information architecture. However, it is the user, who is the highlight, it’s his perception and expectation of the information that guides the architect to build the perfect IA. 

Now, how does a designer achieve perfection? This is done by researching the user to the T along with focusing on usability testing. User interviews, card sorting and observing the way a user interacts with your current design through usability testing are the pathways you should be seeking. For instance, when a menu has been decided, a tree test helps the designers know its suitability. And that is IA for you. 

Navigation 

Navigation is one of the most crucial aspects of your design strategy, so getting it right is the first order of business. Navigation refers to the system a visitor follows to get through the various parts of a website. Since the aim is to ensure that the user goes as many pages as possible, it has to be simple, concise and pretty blatant. If a user has to put in an effort to navigate your site, you are certainly doing something wrong. The lesser cognitive load while navigating, the better UX. The visibility of the navigation bar is paramount. 

So, how do you do that? 

By putting the user first 

First, you have to understand the needs of your users, at least a majority of them, and create a navigation bar based upon that. This would also help you get an apprehension of the user’s priorities, like how much he repeats a task. Also, the user must always know where he is, meaning the current page he is perusing through must be highlighted from the rest of the pages. Nobody likes being lost. 

By embracing the search

You must know that many of your visitors come to your site with a specific intention. So, how do they get to that? The search bar is the most obvious answer. It acts as a shortcut for the user to get to what he is looking for. Therefore, it needs to be front and centre. At the top of the page would be ideal, either left or right with a magnifying glass icon for added visibility. Can you imagine searching for a search icon? It also needs one more thing, a decent input size; you have to be able to see what you are typing into it. To get a perfect federated search solution for your website, read about Elasticsearch and Apache Solr.

By valuing the user’s time 

This is in regards to the back button. Imagine a scenario, you were reading an article, a pretty long one at that, and half way through it, you saw an intriguing link, you click on it and upon returning through the back button, you are at the very beginning of the said article. Now tell me, would you be frustrated? I certainly would be. So, ensuring that when a user clicks on that back button, he is back to where he left is quite imperative.

By separating the breadcrumbs

There are certain secondary navigation links, aka breadcrumbs, in every web design, which i sfine. However, they become a problem, when they overshadow the primary navigation bar. Separating each level by using arrowheads or slashes is a good practise. Remember that secondary navigation is only there to support the main navigation. 

By keeping the links in line 

There are going to be external and internal links on your site and you need to provide a distinction between the two for the user. Once a link has been clicked on and visited, its colour must change from the rest. Apart from this, you have to ensure that all the links work, a 404 error is a strict no no. 

The results page is shown after a Google search.The purple links signify that they have been visited. 

By optimising scrolling 

Everybody scrolls, they start doing it as soon as the page loads. So, by optimising on it, you can actually make the navigation experience better. The content and the media is an essential part of it. Write an impressive introduction or add a great visual to intrigue the user and he will start scrolling.

You also need to ensure that the top navigation bar should always be on display. If that isn’t the case, the user might feel lost, especially in pages that are pretty long and that is not an experience a user came to you for.

Page structure 

The page structure is integral in enhancing the visibility of your interface, so that every element is easily found by the user. It is truly up to you to decide the structuring of your pages, however, I would suggest that you follow a grid. Because a rid helps in segregating the different elements of a page at the same time keeping them combined, it makes it easier for the user to understand the logical progression. One of the classic examples of modern day grid-like page structure can be availed through Layout Builder module and Paragraphs module available in Drupal as can be seen below.

The layout of a grid-like structure in web design is shown in pastel colours.


You must also aim for a structure that your target audience is familiar with, assessing your competitors is the best way to do that. Familiarity helps in building the user's experience upwards. 

Visual hierarchy 

After page structure, comes the visual hierarchy of a page. When a user visits a page, there are certain aspects that the designers want them to look at the first glance. Deciding that refers to the concept of visual hierarchy. 

A webpage is shown with different elements being highlighted at different proportions.


In the above picture from OpenSense Labs, ‘Build better, build faster’ is the highlight. A user would read without much effort from his end. The company logo is another important element. Then comes the Drupal 9 bit, being their speciality, they have made it prominent as well. 

So when you design a page, keep in mind the elements that you want to be highlighted and make their size, position and colour prominent on the page. 

It would also be beneficial to capitalise on the user’s natural way of scanning. It could be the F-shaped pattern or the Z shaped pattern. The former works with written content and the latter can be used for the non-textual pages. These further help the user in scanning easily.

A webpage is shown with an F shaped out in the content.An F-shaped pattern. Source: Instapage

Your visual hierarchy process would be easy to build, if you create mockups first. This would help you in knowing where each element would lie and avoid any errors. 

Content 

The content of your pages allows the visitor to understand you and your objective better. The simpler the content would be to read, the better that understanding is going to be. For that, you simply need to implement three things.

  • One is to be a minimalist with your words. Inundating a web page with content will only confuse a visitor. Keep it simple, provide pointers for easy maneuverability.
  • Second would be to keep the language simple, you cannot use highly complex and technical writings on a web page. Yes, there is a possibility that some users would understand it, but are we aiming for some or all?
  • Third is to ensure that your sentences are short, preferably with one idea. Noisy sentences can often baffle the visitors; 20 words or less has to be the target. Also avoid caps lock for everything that is not an acronym.

Moving on from the writing style to the specific contextual elements of a web page, let us understand how you should work with them. 

Filling out web forms

Where user interaction is concerned, web forms are the most integral. The reason being they allow you to know your users’ personal details. Any confusion here, would make the purpose of the form futile. Keep things to the point, ask what is needed with a logical progression in the questions. 

A web form is shown.Source: Bajaj Finserv

Another tip to follow would be to group similar questions in one category. For example, the educational qualifications can come under one heading and the contact information could be a separate heading. 

Tapping the buttons 

Buttons are basically links that are designed as a button to tap on; like the ‘Buy Now’ button on Amazon we love so much. These are essential for a website to enhance its interaction with the visitors. So, you have to be certain that all the buttons are actually buttons with a link taking the visitors to wherever it says it would. A non-functional button is a frustration button. Then you should also remember to aim for consistency while designing these, so that users can easily identify them. 

The most important consideration for buttons is what is written on them because that is the only thing that would attract the user. Be descriptive, be clear, be concise and make it attractive. 

Numerous web buttons are shown to depict how prominent they need to be in a web design. All the buttons here are pretty clear as to what their purpose is. Source: Vecteezy

One of the most important buttons would be the CTAs, the Call-to-Action button. These encourage the user to become a customer and improve your conversion rates. Therefore, a CTA that stands out from the normal text, that is a size different from the normal text, that has negative space to make it even more prominent and that is labelled with encouragements is the CTA that will generate more conversions. 

A webpage with four CTAs is seen.


The above screenshot shows how OpenSense Labs, after having told the visitors all its benefits, lures them to click on the CTA. 

Enunciating SEO 

After doing all of this, you also have to ensure that you follow certain SEO guidelines to enhance your visibility on the web and search engines. By focusing on the title tags, URL structure, HTML and XML sitemaps and making them user friendly can totally elevate your SEO game. 

Media 

Imagine this blog, without a single media element, an image or a video, describing what is written in the text, would that be a great experience? I don’t think I need to elaborate on the answer, you know!

So, how do you work the media in your favour?

Images 

Images are a must in web pages, however, you cannot just add them for the sake of it. The pictures on your website should be related to content on it. They cannot be random images of people or objects that serve no purpose or add any value. Other than that, the pictures should also be of good quality, distorted and blurred images are a big no-no. 

A publishes bog is shown with a customised image.


This is a screenshot from one of our blogs, the image here is simple and concise. One glance at it and you would know what the succeeding information is going to talk about. That should be the target. 

Videos 

Videos have become equally important to images and the internet speed is to blame. They are an easy way to understand a concept of a product, its features or even the message of a brand. However, you need to use them wisely.

  • Do not autoplay videos, if the user wants to see it, he would see it without autoplay as well. And definitely do not have the sound on by default. 
  • Always include subtitles and transcripts for people with disabilities. 
  • Finally, if you are adding promotional videos, which is a great idea, keep them short. 

Animation

Animation is another way to add a pop of interaction on your site, it is easy and it is fun as it breaks the contextual monotony with ease. 

  • You can add animated effects to point out user mistakes like a wrong password. 
  • You can add animated effects to your brand logo. 
  • You can add animated effects to highlight the navigation transitions. 
  • You can also add animated effects to provide visual feedback to the user, like how much percentage has been downloaded. 

Responsiveness to Devices and other Media 

Responsiveness is crucial for your site’s web design, which means that your design should be flexible enough to accommodate any device that the user might be using, be it a mobile or a desktop. Statista reported that as many as 48% users surf sites on their mobile devices. This figure does make the responsive design of essence.

So, how do you achieve the level of flexibility in your design that will help it optimise a desktop and a cell phone equally?

The foremost thing to do would be to focus on your layout and make it a single-column one as it would be easy to go through on the small screen of a cell phone. Since the space on a cell phone’s screen is limited, you can only show information that is absolutely necessary. Here the Priority+ model works really well. You would show the info that is needed and the rest would come under the ‘more’ button. Then, the size of images also needs to be appropriated when designed for responsiveness. 

Apart from these pointers, it is also important to understand that the clicks on a mobile phone are different from that on a desktop or a laptop. So, you need to be very cautious in the size of the buttons and links along with making them prominent from the other text. You can achieve all of this by creating HTML templates that are mobile-friendly or simply going for a separate mobile-site altogether.

Two screenshots of the same webpage are shown, one taken from a desktop and the other from a cellphone.A desktop site vs a mobile site. 

Mobile responsiveness aside, a website also needs to be responsive to other integrations such as cross channel and social media. Linking campaigns and integrating with social media platforms like Google+, Twitter, Facebook, Instagram and LinkedIn can do a lot to bring in business and generate a higher lead count. 

Load time 

Nobody likes waiting for a site to load, however, in spite of a site possessing great speed, there are factors that make it load slower than the developers wish to. These could be a weak internet network or a heavy site. So, what do you do to ensure that your website does not appear slow to the users? 

The primary thing to do would be to check your site for all the factors that could slow it down, for instance heavy images or having too many HTTP requests, and resolve them. Secondly, you can create an illusion of a faster loading speed for the visitors. This can be done by displaying the structure of the page in question first, thus, giving yourself a few more seconds to load the content. Facebook does it and so does Instagram. 

An unloaded instagram page is shown.


It is important to always keep track of the time it takes to load your content, as that would give you insights about the performance of your site. Remember that every second you delay is a second that would cost you. Nielsen Norman Group agrees with this notion and their three response-time limit should be set as an ideal here. Access the complete web performance guide for your Drupal website here.

Accessibility 

A web design would be considered incomplete, if it is not addressing the accessibility concern. People with disabilities need to be able to access your site without any difficulty. There are certain web accessibility guidelines you can follow to avoid that. 

Contrast 

The contrast ratios should be made keeping in mind people with a weak eyesight. Reading blue  on a black background would be easy for someone with a perfect sight, but not the others. Smaller text needs a 4.5:1 as a text to background contrast ratio, while the larger text can have a smaller ratio. WCAG’s guidelines for contrast would help you in getting to the perfect ratio. 

Colour 

You might be able to tell black from red, but everybody cannot. So, just focusing on colour to point out a feature or a mistake is unethical. You have to use words as well. 

An incorrectly filled online form can be seen.


The colour red is used to highlight the error, along with it a symbol is also used. And when you go to the erroneous column, a dialogue box appears to tell you what the mistake is. This is a perfect example of accessibility. 

Keyboard-savvy 

Motor impairments inhibits people from being able to use a mouse effectively, so they opt for the keyboard instead. So, make sure that your site is keyboard-friendly at least as much as possible. You can achieve this by making sure that all the interactive elements are accessible and the keyboard focus is loud and clear. 

A posted article is shown to highlight the use of screen reader in web design.An example of a prominent keyboard focus. 

Screen-readers 

There are going to be visual elements in your design, that is a given, however, someone blind will not be able to see them. So, for every image, you need to add an alternate text that a screen reader can read, describing what is happening in the image. 

It has also become a trend on instagram as well, with many influencers using alternate texts to describe their posts. 

An instagram post can be seen along with its caption.A caption inclusive of an alternate text.

Testing 

To ensure that your design works well and is equipped to go with your site, you have to test it out and that is the final call, the final piece in the web design puzzle. 

There are two tests you can perform;

  • One is testing repeatedly throughout the designing process. Feedback is pivotal here, it’s similar to constructive criticism. You might feel shattered that your design got such bad feedback, but in the long haul, you would be thankful that it did. Because through that you were able to create something much more powerful. 
  • Second would be A/B Testing, this works best when you conflicted between two designs. So, you run with both of them with separate audiences and see the responses. The one with the better analytics would be the better choice. 

Being original 

Being original goes a long way in creating the identity of your brand and bolstering the image of your company. You have to be creative, you have to think outside the box, you have to step up from the cliches and doing so will compel the visitors to become your customers. 

However, you have to do all of this by keeping in mind that originality does not mean that your visitors have to struggle navigating your sites. The set standard for certain categories of websites, like e-commerce, have to be adhered to. And then there is the contact us page that is an essential element in the design of every website out there. Despite this, you would still find that no two sites would have an identical contact page. That is the kind of originality I am talking about, unique yet not foreign. 

Google's search page is shown. Microsoft bing's serach page can be seen.


Even though Google and Bing essentially perform the same taks, yet their UI is quite different. Same elements, yet different. That is originality for you. 

Being consistent 

Your website is basically your brand and your brand can only have one image to portray. That is why your design needs to be consistent, portraying one single voice. By creating pages with the same colours palette, same typefaces and similar backgrounds, this consistency can be achieved. 

Imagine you are on a site, the landing page is all bright colours and bold fonts. When you move on to a different page, you find that the tone has completely changed, and the colours are muted with a minimalist feel. How would you feel? A little lost? A bit confused? That would be it. 

So, aim for consistency. I am not saying that you have to follow the same layouts, that would be impossible because some pages would have a lot more content than others. Just focus on keeping the same tones throughout. 

A webpage can be seen with different blog posts.A webpage with different team members is desplayed.


Without a second thought, you will be able to tell that these pages are from the same website. Design consistency is what makes that possible. You will see that there are elements that are different, yet there are elements that are similar. That is because every page does not have to be an exact replica of the next for the sake of consistency. 

Being credible 

Lastly, your credibility is what is going to make the visitors put their faith in you. You can work on all of the above elements, but what happens if the user still doesn’t trust you? The users won’t convert.

Long-term conversions and sales are directly proportional to your honesty. When you are honest and clear about what you are selling and that too on your home page, users will start gravitating towards you. Tell them what you are selling, why you are doing and how it would benefit them in the most honest of terms and they will consider you credible and trustworthy. 

Along with this, you can also be upfront about your pricing without any disguises. If you are claiming a cost to be $10, then it should be the same at the checkout. If there are going to be additional costs, mention that along with the $10  price. Trust me, your users will appreciate it immensely. 

The Final Call 

Web design is a continuous process that only ends when a project dies, never before that. This is just the beginning of a long road ahead, adopting the aforementioned guide would certainly be a help to your design process. But the bigger task on your shoulders as a designer. 

I would like to end by adding one more thing. Whatever you are going to design, if you design it by keeping the user and his perspective of the site in your mind, you could never go wrong with it. Good luck. 

Dec 15 2020
Dec 15

Have you ever wondered how websites are built? Sure, there is an entire army, consisting of developers, designers, project managers and business analysts, involved, but is that all? Do they work independently? Do they work day-in and day-out to build the website from the ground up? Do they have some help in doing that? 

If you are a part of the website development army, you might know what I am trying to get at. It is true that websites are built from scratch, but what is also true is the fact that these websites require some help to get the scratch go on to be a fully-functional site and that help comes from a content management system, a CMS to be short. 

There are a few in the market, with Wordpress leading the way in market share numbers, however, we would be talking about the one that is leading the way in functionality and features. And that is Drupal. 

As of November 8, 2020, there are slightly more than 1 million Drupal sites all over the world. This number is a testament to Drupal’s abilities to give your site whatever it wants. 

To that accord, there has been a new vogue in Drupal and the way it is capitalised by its sites. And that is what we are going to discuss, before that let us delve briefly into Drupal’s traditional abilities.

Traditional Drupal VS Decoupled Drupal 

There are four circles showing how the different aspects of decoupled Drupal architecture are interconnected.Source: DZone

Like I said before, Drupal is a CMS, so it is equipped to build websites from scratch. And that is what the traditional/monolithic/coupled Drupal does. From the user interface to the data access code, Drupal caters for all your website needs. Being responsible for the front and backend, the traditional Drupal helps you in building versatile web experiences.

With Drupal’s themes, templates and behaviours, it is extremely easy to create a dynamic presentation layer for your website. The fact the Drupal allows you to build and customise a live site along with providing solutions for any frontend mishaps is another compelling reason to opt for the traditional Drupal. 

Yet there are many who think that Drupal’s frontend capabilities are not as impressive as that of JavaScript. Although Drupal has a JavaScript library in its corner, it does not have the JS framework to work with, so maybe they are right. So, as a solution, the advent of decoupled Drupal architecture was seen.

The Decoupled Drupal has a slightly different story to tell than its monolithic counterpart. You would still have Drupal and its abilities at your disposal, however, you would have a little more than just Drupal to work with. With decoupling, you would simply be saying goodbye to Drupal’s frontend abilities, either completely or partially, that is up to. Drupal would only be used as a content repository and your entire presentation layer will be made up of other frontend technologies; Angular, Vue and React are some of them. 

The Decoupled Drupal has two variants for you to choose from; 

  • First would be the progressively decoupled approach, in which you would be leveraging other frontend technologies and amalgamating it with Drupal’s frontend capabilities. This could be regarded as the best of both worlds. 
  • Second is the fully decoupled web app, in which your presentation layer is going to be handled by a JavaScript framework and will be completely independent of Drupal, and it would only be used for the backend architecture. Fully decoupled Drupal architecture for static sites is another option. In this approach, Drupal acts as a content source for static sites, aiding static site generators like Gatsby to create your site by taking data from Drupal. 

To know more about the working of decoupled Drupal, how it is different from the traditional architecture and what are the specifics of the technologies involved, read our blog Monolithic and Decoupled Drupal Architectures

The Move from Traditional to Decoupled Drupal 

Now that you have a fair idea as to what decoupled Drupal is, it is time to find out when the right time is to make the move from coupled to decoupled Drupal architecture. Let me ask you a question first, have you ever made a business decision without taking into consideration the pros and cons of that decision? I’m certain, you haven’t. So, for that very reason let me tell you why decoupled Drupal architecture is advantageous. 

The motto “Write once, publish everywhere” could be the tagline of decoupled Drupal. It allows you to leverage social media, emails, the intranet, apps, microsites along with your primary publishing platform, so that you can make your content as universal as you want. This is an advantage that makes decoupling the go to option for many. Then there is the fact that through decoupling you can enhance your user experience, get upgraded faster, which would make your team work at an enhanced efficiency, along with this decoupling also provides you the opportunity to become more innovative. The JavaScript framework, which would be at play in decoupling is the icing on top. 

You might think that with these many advantages, decoupling cannot ever be the wrong choice. It doesn’t have to be, if you know what the limitations are and are equipped to combat them. The most blatant drawback of decoupling is the fact that you would be losing out-of-the-box Drupal features, for some this can be a deal breaker. Obviously, since Drupal would not be at play on the frontend, you would have to part with its capabilities; you can’t bake the cake and eat it too, unless of course you choose progressively decoupled Drupal. Another problem that is often seen in decoupling is that the coding becomes a hassle and so does identifying bugs. 

After discussing the benefits of Decoupled Drupal along with its drawbacks, it is time to ask yourself some tough questions. For it is these questions that would help you in the decision to move. 

  • Is your business reliant on multiple channels and microsites to spread and accumulate content to and from? 
  • Is it your opinion that being reliant on one technology for your entire project is not a wise choice?
  • Are you unhappy with the interactivity your website provides to its users and want to capitalise on JavaScript framework to enhance it?
  • Do you have more developers who are experts in JavaScript than Drupal? Are you planning to take advantage of their expertise in JS?
  • Have you not been using all of Drupal’s frontend assets and think they only bring in more work?
  • Is building an app a future goal of yours?
  • Are your editorial needs basic?
  • Finally, do you have the budget to decouple, because Drupal may be free, other frontend technologies aren’t?

Think of your answer to all of these questions and then read our blog When to move from monolithic to decoupled Drupal architecture to understand all the nitty gritty details behind the move.

The Final Call  

In the end, all I want to say is that there are going to be benefits and limitations for your project, in both the coupled and decoupled Drupal architectures. If you want to make a decision, consider your needs over anything else. If you feel that your current architecture is not cutting it for you, the move could then be considered inevitable and prudent. If not, then maybe waiting for a time when there is an actual need would be the sounder choice to make. There is only one answer to “When to Decouple Drupal?” and that is when you have the need. 

Dec 11 2020
Dec 11

To say that a website or a web application is deemed worthy primarily because of its content would not be totally wrong. A website’s performance does play in the equation, but it is the content that seals the deal for the user. Web builders across the world are becoming aware of this fact and that is why the web content management (WCM) systems have become pivotal for websites. 

A WCM helps you in attracting and retaining your clients and ultimately give you the revenues that you had desired from the time the idea of the website came to you. Therefore, choosing the right WCM that is suitable to all your business needs is probably one of the most significant decisions you will take for your website. 

There indeed are numerous options to choose from, however, two of these have been stealing the limelight from all the others in the recent times. And these are Drupal and AEM. So, let us compare these two to make your decision a tad bit easier. 

Parameters Drupal  AEM  Performance and scalability  Ease of expansion; impeccable performance  Growth mandates performance and stress tests Content workflow Flexible  Flexible  Marketing and engineering perceptions Community driven innovations for developers and marketers Little room for leveraging marketing capabilities outside of periphery of Adobe Cost  Free Can be expensive  Security  Extremely secure Highly secure, yet there are vulnerabilities Community  Over a million and counting  Supported by community; but pales in comparison to Drupal Responsiveness Excellent responsiveness; mobile-first approach Excellent responsiveness as well Development  Works on PHP Works on JavaScript  Third-party integrations Impressive  Good, but involves issues to be troubleshooted Upgrades and migration  ‘Easiest upgrade of the decade’ Easy to perform  Multisite Excellent multisite tools  Great multisite features as well Headless approach  Gives options for decoupling  Decouples, but only in one sense  Multilingual  Terrific with multiple languages  Competes in parallel to Drupal  SEO  More SEO-friendly modules SEO is optimised, but on a scale lesser than Drupal

Getting to know the contenders

Websites are dependent on content management systems to enhance their digital experiences. The better the WCM, the better the chances of your website’s digital content. But how do we decide which is better? Let us start by knowing what they personify. 

Drupal 

The picture displays the logo of Drupal.


If you are reading this blog, there is a high, well a very high, chance that you would know what Drupal is. Still I would tell you a little about it. 

Drupal is an open source platform that helps in building web applications and making web projects come alive. It is free to use and is being used by millions of people across the globe. Organisations like Redhat, Timex, University of Colorado are some of the elite clients of Drupal. So, to say that Drupal is a small fish in the pond of WCMs would be a dramatic understatement. 

You can create and publish content without being an engineer. And the fact that your content does not have to be confined to a certain type of layout or a specific number of content fields is just a bonus. It uses the best of PHP along with that it also abides by HTML5 and YAML standards. Twig, jQuery, Symfonyand CKEditor are some of the powerful third-party dependencies Drupal implements. All of these are responsible for making Drupal a powerful web development platform, which cannot be deterred by high traffic. 

All in all, Drupal can help you create web experiences that are both wholesome and unique to lure your target audience and never let them go. 

Up until now, Drupal has had 9 versions with multiple sub-versions of each. Although Drupal 9 is the most recent version, less than half a percent of Drupal websites use it. As many as two-thirds of them are still on Drupal 7, while over a quarter of the websites are using Drupal 8, as per a survey by W3Techs

A horizontal bar graph shows the percentage of websites using the different versions of Drupal.Source: W3Techs

Adobe Experience Manager (AEM)

The picture displays the logo of AEM.


AEM could be deemed as the opposite of Drupal, provided the fact that it is a proprietary software rather than an open source. Built by a leading content management suite, it is a WCM that its proprietor refers to as a powerhouse and given its many features, it is not an inaccurate description. 

Adobe Experience Manager is an all inclusive system for content management that is equipped to build websites, forms and mobile apps. AEM effectively manages your content and your applications in an integrated manner, leading to applications being deployed as conveniently as the content. The result is a streamlined management of your online presence and that is what Adobe capitalises on.

This sounds somewhat similar to Drupal, doesn’t it? That is because at a foundational level, both of these are performing the same work. It is the way they do the work, the means and the features they are packed with that make them different, and that is what we are going to find out today.

Before we get into that, let us have a look at some statistics involving both Drupal and AEM to get a clear picture of their market share. 

There is a pie chart denoting the number of websites for Drupal and AEM.The number of websites for Drupal and AEM. Source: SimilartechThere are two horizontal bar graphs describing the market share percentage of Drupal and AEM. The market share of AEM and Drupal. Source: WappalyzerA graph shows the standing of Drupal and AEM with regards to other WCMs.Comparison of Drupal and AEM with respect to other WCMs. Source: W3Tech

What is the degree of performance and scalability offered?

The performance of a website is probably what makes the user stay on it for a longer period of time. If it is taking more than 2 seconds for a page to load, the user may become inclined to hot hit the escape button and move onto a different site. You know you have competitors and they gain from your loss.

So, the first feature to discuss has to be performance and scalability of Drupal and AEM sites. Let us get on with it. 

Drupal 

You must have heard that on occasion many sites tend to crash, especially when there is bulk traffic on them. With Drupal, you do not need to worry about that. The busiest of sites all across the world are using Drupal to handle their traffic spikes and keep them away from the embarrassment of slow performance.

And it is not just traffic that would be managed by Drupal, it also gives you the room to expand your content as much as you want, with multiple content contributors, without having an effect on the performance.

Therefore, managing site performance and scalability is quite easy and efficient in Drupal. The only thing to remember is to optimise your site well, if you don’t do that, there won’t be any guarantees. 

Drupal provides many tools and features to make that happen. 

Read about Drupal’s performance optimization techniques and scalability provisions to know more.

AEM 

With regards to small and medium based applications, AEM’s default configuration settings do their work without much effort on your part, leading to a streamlined performance for publishing and authoring at the same time. However, the growth of your sites would require a performance and stress test, depending upon the result of these tests, you will be able to comprehend the way to optimise the system. 

The advantage of Adobe Experience Manager is that after the installation and configuration is done, the degree of complexity of your project along with your development team will be the deciding factor for the performance optimisation. Even if your system load and performance profiles change over time, AEM’s performance tune-ups will keep your system optimised. Measurements, analysis, optimisation and validation become a constant part of these tune-ups.

Also, AEM uses files from content, JavaScript and CSS to establish performance standards. It also takes necessary performance action by using caching, load balancing and CDN; almost similar to Drupal.

All in all, Experience Manager can easily scale so that your performance needs are satisfied on the basis of the demand for your digital assets.

To sum up, Drupal offers you room to expand as much as you want without hampering your site’s performance, AEM also does something similar. However, the latter comes with a stipulation of tests to ensure that. 

How smooth is the content workflow?

If performance is the spine of a website, then its content would be the blood in its veins; metaphorically speaking of course. So, it was only wise to talk about the content workflow after performance. 

Drupal 

Drupal is a big name in the WCM market and the way it lets its authors use and manipulate the content across multiple pages is the reason for it. Drupal provides an ease in content authoring that is unparalleled by other systems. It is equipped to provide all the necessary tools required by the authors to create and publish content that is customisable. The WYSIWYG editor personifies Drupal’s flexibility. The workflow and content is easily managed through authentications and permissions. 

With regards to the content architecture, Drupal excels here as well. You can create just the right architecture based on your needs with the help of an Admin Interface or programmatically, the choice is yours. With display mode tools and Views, you can display only the content you want to be displayed based on the context, be it images, videos or even pdfs. Modules, like Paragraphs and Layout Builder, help you get the best out of your content by letting you micromanage the minutest of details. Moreover, Drupal workflows support annotations, it can reuse images in various components and it can easily support several individual fields in a single field with multi-fields. All of these provide a great user experience and the fact that it is equally good on multiple devices is another forte of Drupal. 

Apart from the creation of the content, the way it is stored and accessed is also imperative, after all we are talking about a content management system. In Drupal, the content is stored in a database, in a hierarchy, if you want, wrapped in Symfony. The interaction to the data by Drupal is usually done through MySQL, although there are other databases available as well. 

AEM 

The user experience to content authors provided by AEM is tough to compete with as well, although Drupal does manage that feat. Adobe Experience Manager not only integrates the content with other adobe technologies, but it also provides a high degree of flexibility and drag and drop user interface for almost all tasks, thereby making content authoring a breeze. 

Content in Adobe is not one single body, it is divided into multiple smaller components that in turn provide an immense degree of control to the content author because he can manage the smallest of parts of the content body. The feature of content fragments helps in editing the content to the most granular level with each component, be it text, images or videos given a separate fragment. The pre-existing templates in AEM work in a similar fashion to Drupal’s modules, allowing all the more ease in content creation. However, the fact that these individual components can be reused across multiple articles, makes AEM different from Drupal. 

Coming to content storage and access, AEM stores content as files instead of a database, which are wrapped up in Adobe CRX. And these files are accessed through Apache Sling. This web application framework provides an interface that can be accessed programmatically by developers to retrieve content. 

Drupal and AEM are more or less the same in terms of content, flexibility being the forte of both and the drag and drop feature being the focal similarity. The only difference that is blatant to me in terms of content is the way it is stored and retrieved. Although both use frameworks, the way these frameworks work is quite contrasting. 

How do Drupal and AEM align with your Marketing and Engineering goals?

There are two sets of people who are considered to be the building blocks of a website and it is their input that takes a web project to the next level. These are the engineers and the marketers. So let us understand their take on Drupal and AEM to highlight their difference further. 

Drupal 

Drupal, being an open source platform, comes with a great deal of benefits. The number of open source components found can be overwhelming for your engineers for all the right reasons. The primary one being the fact that Drupal is the synonymous of a developer-centric ecosystem. What this means is that you would be benefiting from the knowledge and expertise of other developers. This encourages learning like nothing else.

As for the marketers, Drupal again provides. For one, Drupal equips the marketers to edit or update page layouts without the presence of a developer. Earlier this feature was only found in AEM, but now Drupal is also packed. Then, there is the fact that Drupal allows the marketers to choose the tools they want to outside the jurisdiction of Drupal. Any leading marketing automation tool you might get compelled by would be perfectly used with Drupal for your gains. 

AEM 

Like I have already mentioned, AEM is a proprietary software, meaning that it does not have any of the benefits of an open source. In terms of an engineer, this can be a major drawback. You must be wondering why? The answer is simple, there wouldn’t be a developer pool, whose knowledge could be tapped into. So, the technical costs become high and you might find yourself solving an issue that has been resolved by numerous developers, but you can’t know that since AEM is not an open source and the locked code prohibits you from knowing. 

Adobe has many fancy, for a lack of better word, marketing tools that can effectively urge any marketer to take it up. The integration with these Adobe tools helps in providing a page building experience that is simply impressive. However, there are two things that make it lag behind Drupal; 

  • For one, only Adobe tools can be used, you cannot access other marketing tools available in the market;
  • And secondly, although agile marketing is provided, the fact that other developers in the community cannot contribute to it can be slightly disheartening. 

This is not to say that Abode is inferior or Drupal is superior, they are just different in the eyes of the marketers and engineers. 

It is pretty clear who is the winner here, a developer would always prefer a pool to stimulate innovation. Drupal's vast community provides that and AEM’s doesn’t.

What are the cost implications?

Whether something fits your budget or not is an important consideration when you are  considering to adopt a practise or in this case a WCM. How do Drupal and AEM fare in this regard, let’s see. 

Drupal 

In terms of costs, Drupal is going to be a clear winner and I think you knew that even before reading this blog. Drupal is an open source software, that means it has zero licensing fee. However, this does not mean that it is free, there would still be money required to build it. This is primarily because Drupal sites are built from scratch. You have to hire experts to take that seed Drupal provides and water it to become a full-fledged tree, you get the metaphor, right? 

When your site is built to be fully functional, then the costs for maintenance would start following, which is understandable. Drupal provides you the advantage of scaling the maintenance and support costs to align with your budget, and that is all we can ask for. I wouldn’t call Drupal to be free, but it is pretty economical. 

AEM

Compared to Drupal costs, AEM travels in uncharted territory. The costs start to pile on from the get-go. Since it is a proprietary software, you have to pay a licensing fee. Add to this the cost of building, including the hiring of developers, and the costs would be substantial. And then there is the cost of maintenance, although for support, AEM does provide a dedicated team, thank goodness for that. The average cost of AEM license and implementation can be around $100,000 to $200,000.

In the times of the pandemic, AEM can be way out-of-the-league for many organisations looking for a WCM.

Drupal is free of cost and this is one fact that would always make it outshine AEM, which, on the other hand, cannot be free, being a proprietary software. 

How good are the security measures?

Everybody has vulnerabilities, humans and websites alike. Our vulnerabilities might take us longer to overcome, however, websites are not that tricky. Security measures that are both sound and effective can help even the most faulty of codes become hack-proof. In this regard, let us try and figure out the standing of Drupal and AEM.

Drupal 

Many think that open source software is more prone to security breaches simply because they are open. However, that isn’t the case. Open source security, aka, Software Composition Analysis helps in giving the users the chance to attain a higher visibility level for their open source applications. For this, a lot of elements come into play. The binary fingerprints are examined, research both professional and proprietary is utilised, corroborating the research with scans and providing all of this to developers in the form of tools. So, no open source by no means can be regarded as unsafe and insecure.

The security elements of Drupal are top-notch and help you overcome the most severe security problems. The proof lies in the fact that numerous government agencies have trusted Drupal to build their sites and Drupal has passed all their stringent standards. Drupal’s Security Team is equipped to address all the security issues that are reported, be it in core or contrib modules. The members of the team are experts in security measures from across the globe, validating the reliability of Drupal in terms of security. 

  • The password policies of Drupal are the first sign of it being safe with minimum length, complexity and expiration. 
  • The limitation of login attempts from one IP address can detect brute force entry. Certain IP addresses can also be banned. 
  • The user roles in Drupal help you control what can be seen and modified by uses on any given page. 
  • The database encryption Drupal provides can be configured to become extremely strong for applications that warrant high security, be it to the whole website or certain parts of it. 
  • The Form API oversees the validation of all data entries into the database by scrubbing them so that XSS, CSRF and other malicious data entries are stopped in their tracks. 

All of these account for a safe and secure system for all your website building needs. 

A pie chart depicts the percentage of vulnerabilities in Drupal and two other CMSs.Percentage of security issues in a sample group. Source: AcunetixA bar graph us showing the comparison between different WCMs' security.Source: Sucuri Blog


AEM

Unlike open source, proprietary software is considered to be intrinsically safe and less prone to vulnerabilities. Again, that is not the case. There are instances when AEM sites have suffered major breaches. Something as simple as forgetting to use “nosamplecontent” during publishing can give just the opportunity a hacker was waiting for. This is because sample content is often under production and many know the user passwords. Saying this does not negate the brilliant security measures AEM does provide, my point was simply to enunciate that proprietary software is not immune to vulnerabilities. 

To say that AEM’s security features are similar to that of Drupal would not be entirely wrong. This is because Drupal has covered all the possible vulnerabilities that need to be prevented and worked the security measures around them. Since AEM wanted to do the same, like it should, the similarities come as no surprise. 

  • The security console to manage user access;
  • The theme language of AEM, HTL, has an intrinsic design to prevent XSS hacks; 
  • The AEM checklist helps in ensuring that all the security precautions are done as needed.

However, take a note of the security vulnerabilities of AEM that were reported in the recent past:

There is table showing the security vulnerabilities of AEM. Source: CVE Details

Do AEM’s security features sound similar to Drupal? I am certain they do. AEM is quite secure in itself, however, it has been reported for authentication bypass vulnerability and cross-site scripting vulnerability which should be taken into consideration.

How well are they tied to the community?

The developer community is vast and extremely supportive of each other, so as the next point of difference, let us look at how community plays a role in Drupal and AEM. 

Drupal 

There are plenty of advantages in contributing to open source. It pays dividends to both the contributors and the open source software itself. The support of the community is probably the best feature of being an open source. And Drupal has a pretty large one, with over one million members. This means the intellect of the million developer minds will be found in the core and contrib parts of Drupal, driving innovation further. Developers from across the globe could provide you a peer review for all your projects. 

Another advantage of an open source community is that it helps you thrive even in the most difficult of times. Therefore, the chances of Drupal going out of business are slim to none. The long term success of Drupal is almost a guarantee with its million volunteers. Learn more on how open source has remained recession-proof and how it has stayed relevant in the times like Covid-19 pandemic.

AEM 

With AEM, the story is different. A proprietary software does not have a community as impressive as an open source’s. There are still many AEM  user forums, but it does not match Drupal. 

The lack of community support somehow inhibits the force of innovation and makes AEM seem a little pale against its counterpart, Drupal. 

How responsive is their web design?

The user is the focal point of any web application, it is he who is at the heart of every decision made for the website. Therefore, a responsive web design that would take into account the user’s needs and his environment is of the essence. On this note, let’s compare the two. 

Drupal 

When responsive web design comes into the picture, the first thing to cross your mind is that it has to be mobile friendly and Drupal sites are just apt with that. Drupal is known for its responsive designs that provide the best experiences despite the device. 

It is Drupal’s aim to support a seamless content experience throughout the lifetime of its websites with its mobile-first approach. The out-of-the-box responsive elements have made it the premium choice of developers and content authors alike.

  • The ability to add and edit on the go is a must have and Drupal provides. 
  • The built-in themes with responsiveness embedded in them allows your webpages to fit all screen types. 
  • The ability to change the width and height of images depending on the device is also provided by Drupal through breakpoints. 
  • Even the tables in Drupal 8 are responsive with high, medium and low priorities available to assign to them.

AEM 

AEM is also up there in the responsiveness game, with many features making it a friend of all the mobile devices.

  • Using single or multi-columns for layout;
  • Manipulating the text size based on the screen size;
  • Displaying only priority content on smaller screens;
  • Providing device-specific tools for access;
  • Taking into account the window dimensions to assess the size of images to be displayed.

When web responsiveness is prioritised, you would not have any qualms about the future of your site because it would be secure leading to boundless capabilities. In this aspect, both Drupal and AEM pass, that too with flying colours.

Are there any development constraints?

Next comes the part where development is concerned, do Drupal and AEM have development issues? Do they limit the developers in their building? Or do they give them proverbial wings to fly on? Let us find out.

Drupal 

Drupal is renowned for building digital platforms that are transcending the boundaries of digital media in the present day. Its LAMP technology stack is the reason for it. Linux, Apache, MySQL and PHP, all four provide you agility, pace and flexibility to meet your enterprise’s development needs. 

One drawback of Drupal that is often cited by its counterpart is that it's not highly available. The reason being the fact that it does not provide multiple database instances, meaning one change to one database automatically changes all of them. Even though it is true, does it really account as a development constraint? 

Focusing on PHP, it is often considered to be a less advanced version of Java simply because it does not include state memory constructs. Therefore, tracking data separately becomes exhausting.  

AEM 

AEM developers need to be fluent in HTML, CSS, HTL, JavaScript and Java to develop on top of AEM, no PHP required like Drupal. The best feature of AEM development is the fact that it uses HTL instead of JSP for front-end development. This removes the chances of human error leading to XSS and secures your site a little more.

The drawback I talked about in Drupal is not really an issue in AEM, but does that really make it better? AEM is expensive as we have already established, its exorbitant costs are justified by providing an extravagance that may not really be needed. I mean what would globally distributed data centres do for a local website? They do sound appealing though.

AEM has Java instead of PHP and yes, it can do a lot more per process, but this would increase the complexity levels and make the overhead go on the higher side along with the chances for faults.

I would say that figuring out which is better between PHP and Java is a moot point, both have their own abilities. The fact that many leading organisations use them on their websites speaks quite loudly for their capabilities. Don’t you think so? 

How well do they support third party integrations?

Being able to integrate itself with other applications is often regarded as a great feature of a WCM. Both Drupal and AEM are able to do it, however, one of them stands out as the better option. 

Drupal 

Third party integrations have become a rudimentary need for open source platforms. Since Drupal is an open source, it comes with an intrinsic ability to integrate well with other platforms. Drupal was architecturally designed to be both scalable and modular, this makes it competent to allow third party integrations with ease. With the Services Layer and Library API being equipped to handle all the integration needs, the process goes by smoothly. 

Drupal can integrate with numerous analytics platforms such as Google Analytics, Salesforce and HubSpot.  It can make the ecommerce businesses feel connected with all the varying aspects they mandate. For example, Drupal Commerce can integrate with Magento. There are plenty of options for media integration too such as Colorbox and Slick Carousel. If you need an enterprise search solution for your web application, Drupal has got you covered and gives you Search API Solr.

AEM 

AEM is known to have a vast number of tools in its collection, however, it is also able to integrate itself with other applications.

  • Integrating with Amazon web services is easy with Amazon SNS connection;
  • Email marketing becomes convenient with ExactTarget;
  • Capitalising on social networking is also done through integrating Facebook Connect and Twitter;
  • Sales and CRM software are integrated through Salesforce.

There are other integration tools available as well for your convenience.

Despite all of these, AEM has certain issues with integrations which require troubleshooting. AEM does talk about these and mentions ways to overcome the problems as well.

For instance, some integration issues are known in AEM such as the Report Importer causing high CPU/Memory usage or the non-visibility of targeted content in preview mode when using custom page components. 

Even taking troubleshooting integration issues into account, AEM is still quite good with integrations, especially given the fact that it is a proprietary software.

Concluding this point, I would say that both Drupal and AEM have elaborate tools of integration for every field and need of a business. However, when troubleshooting is concerned, it does put a damper on the impressiveness of AEM. 

Are upgrades and migration easy-to-do?

Technology keeps enhancing and new updates keep on coming, so it is a matter of time before the version you are using becomes a thing of the past and something better is on the market. The question is how do Drupal and AEM fair in the upgrade and migration aspect?

Drupal 

Like I have already mentioned, Drupal 9 is the most recent version, yet not many sites have upgraded themselves to become Drupal 9 sites. However, they would have to because; 

as of November, 2021, Drupal 8 would not be supported; 
and after November, 2022, the same would be true for Drupal 7.

So, how do you update them? Let’s talk about the switch from Drupal 8 to 9, as per the makers, this upgrade is considered the easiest in almost a decade. By following a four-step guide, you can have your current site ready for the functionality and better security standards of Drupal 9 by using the Upgrade Status

As for the upgrade from Drupal 7 to 9, easy is not a term that would be used to describe it. The migration will overwhelm you, but all the advantages of Drupal 9 will make it seem worth it. Developers can make the upgrade themselves with the help of Upgrade Status and Drupal Module Upgrader. These help in letting you know whether your themes and modules are competent for Drupal 8/9 and converting your custom code respectively. Explore the ultimate guide to Drupal 9, all the burning questions that you may have about Drupal 9 and the must-have modules to start your Drupal 9 website to know more. 

AEM 

With AEM, the story revolves around a similar terrain, with more steps though. Upgrades from AEM 6.0 to 6.5 involve a lot more work than Drupal would. Separate migration tools are needed for making the entire upgrade a success. For instance, if going from a version older than AEM 6.2, you would need JMX bean to migrate your assets.

However, if we look at the upgrade from AEM 6.3 to version 6.5, the task of migration is totally eliminated. The new format for the SegmentNodeStore is the reason for it. 

The title ‘easiest upgrade of the decade’ has stolen the show, making Drupal upgrades more attractive and user friendly than AEM. 

How do they answer the multisite request?

Having multiple variants of a single website is not an uncommon trend, it is practised by Drupal sites and AEM sites equally. How do they fair then?

Drupal 

Drupal’s multisite setup helps you in gaining the many advantages of having multisite simply because it allows you to save on time and effort by running all your Drupal sites on a single codebase. 

Running easy updates for security issues, saving on hosting expenses, using Simpletest and functional PHP unit-based tests are few of the many use cases for multisite in Drupal

AEM 

For AEM, the Multi Site Management function does all the heavy lifting for you in capitalising the multisite feature. MSM allows you to monitor and control mobile and web properties into one integrated interface for all so that your global presence is defined by its consistency. Live Copy Overview and Blueprint Configuration Management are the two interfaces responsible for making the use of MSM easy for you. 

MSM is a great tool for creating user-friendly web experiences at the same time providing you localised control with regional teams having the power to edit. It also makes recycling your content a breeze. 

Drupal and AEM are not much different in terms of the multisite versatility, both equip their sites to make the most of one codebase or interface, and aim for consistency. 

How fulfilling is their headless approach?

Going headless has become immensely popular today. I mean who would want to pass on the chance of tapping into the latest technology without parting with their trusted WCM. Here is how Drupal and AEM perform. 

Drupal 

In a headless approach, the WCM is merely a content repository and nothing else and Drupal is a fine one at that. The separation of the front from the backend is pretty streamlined in Drupal with REST, JSON:API and GraphQL, being the APIs holding them together. 

Drupal is known for its flexibility and that can be seen even in its headless approach, with three alternatives to choose from. 

  • The progressively decoupled Drupal has a presentation layer that is built using Drupal and other frontend frameworks, like JavaScript.
  • The fully decoupled Drupal completely segregates the two ends of the site and Drupal is just responsible for the content while a JavaScript framework like React manages frontend
  • The fully decoupled Drupal for static sites allows a static site generator like Gatsby to build a frontend by being its source. 

AEM 

A major reason for opting for a headless approach is to publish the content on as many platforms as possible, the web, mobile apps and other channels. With AEM’s headless approach, you can do that. It allows you to “manage and re-use” page elements or the entire experience, if you want, across numerous channels. This is done through grouping content and layout. 

Like it is for decoupled Drupal, AEM also has customisable APIs as a core component of going headless. On top of this, it gives the developers the choice to choose a default or custom JSON output. The AEM HTTP API provides a smooth transition into headless inclusive of content fragments. 

The headless approach for Drupal and AEM have a set of advantages accompanying them. However, the option of choosing the way and degree of decoupling, gives you something to ponder on, doesn’t it?

How do they help sites be multilingual?

We live in a world where diversity is a constant and diversity means being multilingual. Today, more and more sites are trying to be multilingual, so how do Drupal and AEM help them? 

Drupal 

With Drupal, you can create customized sites in any language, web applications in multiple languages and displays that have multiple admin languages. You get to translate your content completely, so that your business has a wider audience. And you also get the option of choosing a language interface for the administrators, content authors and translators. 

Drupal has been designed in a way that it can promote multilingual sites. The four modules, Language, Locale, Content Translation and Configuration Translation, created to ease the language transition are proof of my earlier statement. 

AEM 

AEM has a similar story to tell. It can also support multiple languages and that too with ease. The fact that it provides both human and machine translation workflows makes it a great choice. 

You might be thinking how it supports human translation. It does so the old fashioned way by sending the content to an actual translator and once it is done, the translated copy is sent back to AEM and it works its charm on it. 

The six-step process of translating content does not leave much room for errors and you get a perfect copy of content in whichever language you may need it in. 

Both Drupal and AEM are close to perfect in their multilingual feature and it is safe to say that this one is a draw. 

Finally, can they help you capitalise on SEO?

Search Engine Optimisation helps your site become more visible and visibility brings in traffic and you must know what happens then. 

Drupal 

Drupal is best friends with SEO, that is why it has all the modules required to make the most of its friend. 

You might know that keywords are an essential part of SEO practices, and Real-time SEO for Drupal helps in ensuring that the keywords are there without seeming spammed. Links are equally important in SEO practices, so there is the Linkit module. For duplicate content, there is the Redirect module to help you. And these are just a few, for an entire checklist, read our blog, The Ultimate Drupal SEO Guide for 2020.

AEM 

AEM lets you get the best of SEO and URL management by helping you optimise them. It makes you focus on the minutest of details, so that you never make an SEO error. 

For instance, when you have translated a content, you might forget to translate the URL and AEM’s SEO guide would never let that happen. From configuring the dispatcher to creating and XML sitemap, AEM takes care of all things. 

Drupal might have a tad more SEO-friendly modules than AEM. Although AEM does cover all the essentials, factors like keywords, headers and footers do not take precedence in it like they do in Drupal.

The Bottom Line 

The purpose of this blog post was not to draw out a clear winner because frankly speaking, there simply can’t be one. I might even give you a winner, but then there is a high chance that you might disagree. Taking all the features into consideration, Drupal does tend to come out with better prospects, even if the margin is not that huge. AEM would be close second to Drupal in terms of functionality and features. 

If I had to give you my perspective, for me, the end line is the cost. Since Drupal is free and AEM is not, it would become difficult for me to adapt to AEM and its exorbitant cost implications, at least initially. So, for me the winner would be Drupal. However, for you, it could be AEM and that is fine too.

Nov 30 2020
Nov 30

Building websites that are completely mistake proof is often considered to be a massive undertaking, which many-many times is not properly executed. Since there are so many parameters to fulfil and so many corners to oversee, mistakes tend to happen. You may not even realise that you have done something wrong in the development process, it could be much much later when you actually undergo a website audit that you come across the mistake that has been made.

Drupal websites are equally prone to mistakes. Despite the CMS being one of the best, there are still occurrences when things go wrong and the impact is felt on the engagement, conversions and consequently, the sales.

To not let that happen, I have compiled a list of mistakes that you need to steer clear of when building or working on a Drupal website. These are errors and oversights that many developers and content authors have experienced first-hand and you can certainly try to learn from their mistakes.

So here are the most common mistakes witnessed on Drupal websites.

A pencil is shown after having erased an error on the extreme left and the mistakes to avoid in Drupal are written in bullets in the rest of the space on a white background.


Where can you go wrong with the content? 

A good website is often considered to be the one with outstanding content, since that is what keeps the audience engaged and leads to conversion. Therefore, content is crucial for a website, both for the front-end and the back-end, so content should be one of the priorities in the website designing process. Due to this fact, there are a number of areas where the developers can go wrong with the content. 

The first common mistake witnesses with the architecture of content is using too many content types that you actually do not use. The unused content types are just going to burden your database and I am certain, you would not want an additional table in your database for three content types that you do not even use. Having content types with no nodes will have the same effect. Performing an inventory will help you get the mistake resolved.

Moving on from the unused to the used, content structures are extremely valuable for your editors who are going to fill them up and if they end up confused, what will be the point of it all? Standardising your content types is going to help you a great deal. 

  • Strike off the content types that are similar to each other, like news and articles;
  • Do not add new fields for every content type;
  • And most importantly, plan a structure prior to it, winging it may not work with your website content.

Content types have an effect on the performance of your website as well. So, if you do not want to drain the performance of your site by adding unnecessary complexity, you would be wise to avoid these mistakes.

What about your display mismanagement?

After content comes its display and Drupal is best in that game. With many different features available for use, Drupal can make your display game strong as well, you capitalise it wisely.

Creating a view for every list is both impractical and a waste of time. Focus on reusing Views as much as possible along with parameter based rendering.

Do you use PHP code in your database? If so, avoid doing that, instead you must write all the codes in the modules or themes itself.

Planning, optimisation and segregation are essentially the building blocks of a great website display. 

  • Planning to render the content types you need;
  • Optimising the Views you already have;
  • And segregating logic from presentation.

These three would have a visible effect on the display architecture.

What aspects of functionality can make your site lag behind?

The functionality of a Drupal site depends on the number of modules used and the way they interact with each other. Your code and how much of it you use is a major contributor in that. 

The most common mistake in this sense is the ignorance of code standards. This becomes more of a problem when there are more than one developers and everyone is using a different type of code. In such a situation, not only would the standard be lost,  but it would also become difficult for a developer to understand the other’s code. Therefore, the adherence to Drupal’s Coding Standards becomes a great help to uniformalise the code and make the functionality a breeze. 

Another obstacle in functionality are unorganised patches. Code modifications and bug fixes mandates the implementation of patches, however, they become a problem whenever there is an update. You can forget all about re-apply the patch or forget to change it in accordance with the new version. This can very well affect the functionality of your website, so organising them is essential. 

Having too many modules, too many roles and too much custom code, despite there being contrib modules for the same is bound to affect the functionality as well. Evaluate and re-evaluate your site for its needs to overcome these functionality hindrances.

Is your performance and scalability not up to the bar?

User Experience is directly proportional to the performance of your website; the more streamlined the performance is, the richer would the UX be. 

Here are three scenarios that can impact your performance in all the wrong ways.

  • The foremost is improper JS/CSS aggregation settings. This is supposed to combine and compress JS and CSS files from the modules in the HTML, leading to lesser load times and higher performance. And you will be saying goodbye to that with the improper aggregation.
  • The next mistake is that of inundating your site with too many modules. Drupal may have numerous modules to offer, but you can’t be using too many of them. Doing so would only slow you down and hamper your security as well. Only keep the modules that you would be using, messing up your code, performance, overheads and security is simply not worth it.
  • A sound cache strategy also goes a long way in performance enhancement. Caching too soon, caching at lower levels and not knowing what and when to cache all contribute in a lowered performance.

Drupal websites can be scaled by millions of users within seconds and that is what makes these sites great. Drupal offers many modules to enhance the performance and scalability, Blazy, Content Delivery Network and Server Scaling, being just a few of them. Not installing these could be deemed as a mistake. Access the Drupal performance optimization and scalability provisions checklists to get more insights.

Are you facing possible security breaches?

Security has become one of the major concerns amongst website builders. Therefore, protecting your business from the menace of hackers and all the havoc they can cause is paramount. 

You must have your security measures in place, however, there still may be certain areas where you may have become complacent and that just gives the break the hackers need. 

  • Primarily, you need to keep your website updated, all the core and contrib modules, despite you using or not using them. Updating a module would mean that Drupal’s security protocols are being updated with them and you make yourself secure with that. You cannot have your projects falling behind on various levels of Drupal’s security advisories.
  • Now, you can install the “ Update Manager” module to keep yourself updated. The “Available Updates” will give you a friendly reminder of applying the available security updates.
  • Next on the list of security blunders is not giving the Input Filters in Drupal their due importance. You might have configured the full HTML Input Format to every user or you might have completely disabled the HTML filtering. Both of these instances can give malicious code to enter your website and you know what happens then.
  • Continuing on similar lines, many sites also configure their servers improperly leading to unwanted access to them. On some occasions, servers are seen displaying their version numbers, which is like giving an open invitation to hackers. Server configuration and permissions should be a priority for every site builder.
  • It is also important to ensure that all the users accessing your site by logging into it are the ones you want. By implementing a password policy, removing old users and updating staff roles, you will be taking a step towards better security.
  • User roles are quite important in running a website, however, they can become overused quite quickly too, which not only slows down your website, but if they are misconfigured, it can lead to major security breaches.

Drupal has proven to be one of the best CMSs in terms of its security measures, it has you covered from every corner, but only if you let it. From granting secure access to providing granular user access control along with database encryption and preventing malicious data entry, Drupal will keep your site protected, provided you let it.

Have you made any infrastructural oversights?

The infrastructure of your website is decided by the stacks you have, which includes the server, database and the software layers like Varnish. Going into development with a firm plan for your infrastructure is the only way to go, an oversight in this area can be quite damaging. 

The common mistakes in this area are;

  • The size of the website’s stack is extremely large or extremely small.
  • Not preparing for growth by consistently checking the logs for error and the identification of the weaklings.
  • Having an ideal sized server, but not configuring it properly, which can make the traffic forego Varnish.
  • Allowing remote connections to the server can make the website more vulnerable.

Misconfiguration can be avoided by simply using the right tools for it. MySQLTuner is one amongst many, its performance suggestions help in improving the infrastructure as well.

Are you following your maintenance goals?

Maintenance of a website starts after the development is done and continues for the entirety of the life of the website. Considering this fact, you have to be very diligent with the maintenance process as making the wrong moves can be brutal.

Here are some of these wrong moves.

  • Not following Drupal updates is a more common mistake than you would think. By doing this, you are going to be hampering security and making your site vulnerable to Drupalgeddon attacks.
  • On the contrary, there are also times when we update the modules, but we forget to remove the older versions. This too happens a lot of the time and can cause many problems.
  • It is not just the modules that need to be updated, the development environment should also be up-to-date and friendly for testing.
  • Then there is the code, which is not using the Version Control System like Git, even the deployment of files should come directly from there. Also, using it, but not leaving messages for other developers related to the changes made can lead to chaos. It is, thereby important to always keep the VCS repository clean.

The crucial aspects of maintenance is time and consistency. When you do it timely, only then would it become a worthy practice. The review and assessment of your architecture in timely intervals along with all the logs, be it Apache or Drupal is a great headstart for the maintenance process.

Are you universally accessible?

Websites today need to transcend the parameters that used to confine them and their audience in the past. The sites and applications need to be built on a foundation that would make them fit for each and every user. Drupal has worked for the same, it aims to make websites accessible to all, including people with disabilities, by making itself an all-accessible tool. 

Web accessibility has become of the essence today, and persons with disabilities are at the core of it. Websites need to be designed keeping in mind their needs, be it a broken hand or a temporary sight loss. It isn't just me who believes this, World Wide Web Consortium’s guidelines agree with me as well. W3C two sets of guidelines are ardently followed by Drupal and your website should do the same, thus, support and foster inclusion. 

Despite its importance, many developers tend to overlook the accessibility features and that is where they go so very wrong. 

  • Not focusing on balanced contrast levels that can work under sunlight;
  • Not incorporating a form validation error verbiage to aid the visually impaired; 
  • Not using buttons over CTAs.

These may seem like minor errors to you, but they can go a long way in making your Drupal site accessible to everyone. Read this comprehensive guide to plan for web accessibility to know more.

Is your site SEO friendly?

Being SEO friendly is almost as important as building a website. Search engines bring in big numbers of traffic, so optimising them is crucial; yet we tend to forget to fine-tune the SEO details and focus on all the other aspects. At the end of the day, a website is an online business and business cannot survive without its clients and being SEO friendly is the way to go. Going wrong in this area can be extremely detrimental.

Look at the following aspects of a website and see how many you are and aren’t doing. 

Are your URLs user friendly?
Are your images small in size, with filled out alt texts?
Are you making your paragraphs short to make the text easy to scan through?
Are you using robots.txt for pages that you do not want crawled?
Are you creating an XML roadmap to help Google easily understand the structure of your website?
Are you researching your keywords?
Are you adding internal links to make your less popular pages gain attention through the more popular ones?

A positive answer to all of these means that your SEO game is strong and a contrary answer would let you know your mistakes.

To avoid the contrary from happening, Drupal provides a number of modules to help you capitalise on the SEO front. The SEO checklist module is a proof of that as it helps you by ensuring that you are following through on the latest SEO practices. Then there are the modules that aid your URL precision, like Redirect, Pathauo and Easy Breadcrumbs.From easing the process tags to helping in communication with search engines to providing the essentials for editing, Drupal has all the right SEO modules in its corner and not using these would be a colossal mistake on your part. Read our blog, The Ultimate Drupal SEO Guide 2020, to know more about these. 

Can being multilingual pose a problem for you? 

Today, languages that are regionally spoken have started getting more prominence than ever before, especially in the international community. A french website would not be successful in India, if it is in French, not many people speak that language, so it would have to be in a locally accepted language. Being multilingual also opens the doors for many mistakes to occur. 

  • Using the same URL for all of your multilingual websites; 
  • Not giving the user a chance to avoid a redirect to the international website;
  • Using an automated translator, instead of actually hiring content authors fluent in the language;
  • Foregoing to translate the imbedded parts of the site like meta tags and descriptions;
  • Not focusing on the foreign market trends and the keywords appropriate to it;
  • And lastly, not writing the content in accordance with the local language and dialects. You can’t be calling ice lollies popsicles sticks in India.

You have to be totally attuned with the language of the region that you have followed for the multilingual project to work. Learn more on Drupal’s multilingual capabilities here.

Is having a multisite presence worth it?

Depending on your business and its needs, having multiple sites can be a good solution for you. However, managing then can become a bit of a hassle and often lead to big blunders. 

Some examples of such blunders are;

  • Traffic is one of the major concerns here. Running multiple sites means you have one codebase and many sites on it, so if one is inundated with traffic, all of them could slow down as a result.
  • A mistake in the syntax of one site could mean a mistake in the syntax of all.
  • Updates become a headache as well. For Drupal sites, you have to run an update.php in order to update the site and doing that on multiple sites is going to bring on the headache.
  • And finally, if you do not use Aegir, you are going to regret going multisite.

Is your Decoupled Drupal approach the right one?

Drupal offers an impressive front-end technology to make your presentation layer as good as you want, yet it does not include all the front end technologies there are on the market. Taking advantage of JavaScript and Static Site Generator would mean to decouple Drupal and separating the front-end from it. Even if you want to take on decoupling, it may not want to take on. The decoupled Drupal can bring more drawbacks then. 

  • If you wish to capitalise Drupal’s in-built features, Decoupling would be a mistake, since you would end up parting with them.
  • If your front-end requirements and Drupal’s front-end capabilities are aligned, taking on Decoupling would only be an unnecessary effort on your part.
  • If you do not have either the budget or resources to tap into the hottest technologies, then even if you want them it is not going to be fruitful.
  • If you are only publishing content at one place, you would have no need for decoupling.

For a detailed explanation, read our blog, When to Move From Monolithic to Decoupled Drupal Architecture.

Finally, what about web hosting, are you doing it the right way?

Web hosting services that provide your website its own space on the internet are pretty common. There are far too many web hosts to count, yet the decision to choose one is not easy at all, since there are too many considerations to keep in mind. 

Some of the common mistakes to avoid which signing on a web host are;

  • Testing web hosts is not uncommon, it is the right way to know whether they are valuable. However, testing on your website that is primarily bringing in the traffic could be unwise, especially if you are using a free service. Therefore, not registering with a different party can be colossal.
  • Another mistake is trusting too easily without knowing the host for too long. Therefore, not partnering with one that has a long trial could be a mistake. The longer the trial period on offer is, the more reliable the host is going to be.
  • Taking on a web host is a huge commitment, so you have to be sure that you are in the good. Not doing your due diligence before the commitment is not the right way, comparing the pricing and features along with checking if they have blacklisted IPs.
  • Not tracking your hosting uptime and speed can also be a problem. Also not checking what guarantees for uptime are provided by the hosts for the same would not be wise. If there is a lapse between the guaranteed and actual uptime, keeping a track would give you the opportunity to ask for compensation.
  • Lastly, you cannot afford to not have a backup of your site and that too regularly. You will only have the recent version of your files and assets, if you back them up.

The Bottom Line 

Every aspect of your website is important, consequently, you have to be mindful of them all. If you are not, mistakes will happen and they will cost you your site’s performance, its security and your potential customers and sales. In order to keep that from happening, you have to avoid all of the aforementioned mistakes and ensure that your website is impeccably built and maintained on all platforms. 

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