Feeds

Author

Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Feb 29 2024
Feb 29

Note: This blog was first published on December 15, 2021, and has been updated to reflect new information and insights.

Takeaway: Optimal user experience is an essential aspect of web development, and the key to that is the assurance of correctly sized images. If your visitors are using a mobile device, the use of large images that are suitable instead for desktop viewing is not optimal.

Ensuring the right-sized image for the right device is what's referred to as "responsive images."

Responsive image styles are standard practice for us, and they greatly benefit website performance and user experience. So, it's a no-brainer to include them in any website build.

Responsive images speed up loading times, save bandwidth, and give visitors a better experience overall. This post will focus on setting responsive images in Drupal 10.

If you need to set responsive images for Drupal 7 (and of course, we’re hoping you are already planning your migration from Drupal 7 to Drupal 10), you can check our blog Picture Module: Building Responsive Images in Drupal 7.

For Drupal 10, the key steps that need to be executed are as follows:

  1. Install the Responsive Image module (using Composer or Drupal UI).
  2. Set up the breakpoints.
  3. Create image styles.
  4. Set up the responsive image.
  5. Assign the responsive image style to the image field.
  6. Export configurations to code.

Person succeeding while another watches them

GO FROM DRUPAL ZERO TO HERO WITH OUR TRAINING EXPERTS

Step 1: Install the Responsive Image module

As was also the case with Drupal 8 and 9, the Responsive Image module is part of Drupal core. For this reason, additional modules do not need to be added in Drupal 10.

The Responsive Image module provides an image formatter and breakpoint mappings to output responsive images using the HTML5 picture tag. This allows devices to display larger or smaller images based on the screen size.

Steps via Composer

  1. Open up your command line tool (we like to use iTerm with oh-my-ZSH).
  2. Travel to your site directory using cd.
  3. Run the command: drush en responsive image.

Steps via Drupal UI

  1. Once logged in as admin, go to Extend in the Drupal admin menu, or visit the URL path: /admin/modules.
  2. Then, in the list of modules, scroll down until you find “Responsive Image” and click the checkbox next to it. Helpful tip: you can also search for the module name in the search box at the top.
  3. Click on “Install” at the very bottom of the list.

Step 2: Set up the breakpoints

This is where we decide our breakpoints. How many will we have? At what size will we show a different-sized image? Some default themes already have the breakpoints.yml file. It might be worth checking for that in your theme first. 

If you have a custom theme, go to your editor of choice. We like to use Sublime Text, Atom, or Visual Studio code.

In Drupal 10, the root of your theme directory will be located at /themes/my_theme_name or /themes/custom/my_theme_name, depending on your setup. In the root of your theme directory:

  1. Create a file called my_theme_name.breakpoints.yml
  2. Replace my_theme_name with the real name of your theme

For this tutorial, I will call my theme "myd10demo."

Below you will find an example of a breakpoint setup for this theme. We’re setting up three breakpoints. One we would use for mobile phones, one for tablets, and one for desktops.

But this is just an example, please choose a breakpoint that works best for your website, and your theme, as you may already have a grid system with breakpoints configured in your CSS.

 
myd10demo.small:
  label: small
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 2x
myd10demo.medium:
  label: medium
  mediaQuery: 'all and (min-width: 768px)'
  weight: 2
  multipliers:
    - 1x
    - 2x
myd10demo.large:
  label: large
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 2
  multipliers:
    - 1x
    - 2x

Each breakpoint will tell Drupal what image size to load for each assigned mediaQuery.

For example, we can load an image for mobile devices using a smaller image style for the breakpoint at min-width: 0px. When the browser is at min-width: 768px we can load our "tablet" image style, and at min-width: 1200px, we can load our desktop or full size images.

It is important to note that the breakpoints weight should be listed from smallest mediaQuery to largest mediaQuery. This allows you to follow a mobile-first approach, as your Grid system (if you have one) is likely following a mobile-first approach as well.

The multipliers attribute allows us to display a crisper image for HD and retina display. A great example of that would be to have an image style of 1000x1000 for a normal screen, but on a retina-ready screen, you might load an image at 2000x2000.

Step 3: Create your image styles

Now we need to create the image sizes for the different breakpoints and different resolution sizes. To do that, in the header:

  1. Go to Configuration> Media > Image Styles or go to /admin/config/media/image-styles.

Next, you'll need to create an image style for the breakpoint and resolution sizes you set up in your my_theme_name.breakpoints.yml.

We created three breakpoints in our breakpoint.yml file. We are setting up two resolution sizes for retina and non-retina screens. So, we will have six image styles. You could label them as follows:

  • Mobile 1X
  • Mobile 2X
  • Tablet 1X
  • Tablet 2X
  • Desktop 1X
  • Desktop 2X

To start creating your image styles, follow these steps.

  1. Click the "Add image style" button in the top left corner.
  2. Type in the name of your image style. It’s better if your image style name is descriptive. You will likely be setting up several image styles throughout your project.
  3. Click “Create new style.”
  4. When you’re redirected to your new image style, using the dropdown under “Effect,” choose scale and crop. Another helpful tip: For even better transparency and cropping capabilities, try adding the “Focal Point” Module. It will allow you to select which area/direction your image would scale and crop.
  5. Click the “Add” button.
  6. Enter the size of your image style. As an example, our mobile image might be 400x200, and our retina-ready mobile image would be 800x400.
  7. Click "Save."
  8. Repeat steps 1-7 until you’ve created all six image styles.  

For each image style, we have used the scale and crop effect to resize and crop the images uploaded automatically.

Step 4: Set up the responsive image styles

Now we will assign the image styles to the breakpoints.

  1. Go to Administration > Configuration > Media or go to /admin/config/media/responsive-image-style.
  2. Click on "Add responsive image style."
  3. For this tutorial, I will call it "Article Image" since this will be used for the main image in our article content type.
  4. Select the theme we created earlier (myd10demo).
  5. Select the correct image styles for each breakpoint.

The Drupal UI will display the breakpoints from largest to the smallest.

  1. For our retina-ready desktop image, open up the dropdown called "Large 2X."
  2. Select the image style "Desktop 2X."
  3. For our non-retina Desktop, select "Desktop 1X."

So on and so forth until you’ve selected the correct image style for each breakpoint and screen resolution.  

At the end of the form, you will find the "Fallback" option. This will be used in case the responsive images are not available.

  1. Select the smallest image style you created here, the same as for mobile.
  2. Select the smallest responsive image style effect you created in the "Fallback" option.

Step 5: Assign the responsive image style to the image field

Let's recap. So far we’ve set breakpoints and resolution sizes in our theme to be used for our images. We then created six image styles, one for each screen size and resolution. Then we connected the created image styles to our created breakpoints.

Now it's time to attach the responsive image style to one of our image fields. This way, when an image is printed using the "display" of a content type, it will be printed using this responsive image style.

  1. Go to Administration > Structure or go to /admin/structure/type in your address bar.
  2. On the content type you want to change (in this example, the article), click on the arrow next to "Manage fields" and select "Manage Display."
  3. On the Manage Display form, on your image field, click on the dropdown under the "Format" for your image and select the "Responsive image" option.
  4. After that, click the gear icon located on the far right-hand side, and select your responsive image style ("Article image" in our example).
  5. Click save and we are almost done!

To check:

  1. Add a new content piece and add an image to the image field (make sure you are in the right content type).
  2. Resize your browser to view the page like a tablet or a mobile device.
  3. Right-click on the image and click "Inspect."

You should see an HTML5 attribute with many different image styles within breakpoints.

HTML picture element

Step 6: Export your configurations to code

The very last step is to export all of these Drupal configurations into code. We do this for several reasons, two of which are:

  • To ensure our settings are saved and can be imported to your sites in the future while allowing you to overwrite configuration if they are modified in the future.
  • To allow us to commit something to git, leaving us a nice trail/breadcrumb of our work.

There are two ways of doing this. Either through the UI and exporting all configs, or through your command line using Drush (this is the recommended way if you have a server running Drush).

Below are the steps for both.

Via command line with Drush

  1. Use your command line tool cd into your website's root directory.
  2. Then run the following command: drush cex. If you’re running your site locally, you might be using something like Docker and docksal. In this case, you would run fin drush cex.
  3. Once this is run, you will get a list of modified configurations and files that will be overwritten in your /config/default directory. 
  4. Press the enter key to accept.

Via UI

  1. Go to Configuration > Development > Configuration Synchronization > Export or go to the path admin/config/development/configuration/full/export.
  2. Click the export button.
  3. This will export the entire configuration folder into a zip.
  4. Push your code up to whatever git repository you use, and celebrate your achievement.

Frequently asked questions

Why is a mobile-first approach essential in modern web development? How do responsive images fit into this idea?

A mobile-first approach is pretty standard across our industry. It allows for:

  • Faster mobile load times
  • Mobile-viewing optimized content and images

Responsive design fits into it by following suit with the mobile-first approach. When you create responsive images, it sets breakpoints and loads different image sizes at these points.

You can also set fallbacks. For example, having mobile as the default ensures that smaller images are loaded instead of large files that may slow down loading times.

What is the difference between implementing responsive images in Drupal 9 vs Drupal 10?

There is no difference. Setting Drupal responsive images is consistent across versions 8, 9, and 10.

Is there a difference in how we set responsive image styles in Drupal versus other CMSs?

There is a difference. Drupal makes it easy because it's essentially built-in.

With Drupal, you start by creating image styles. For example, let's take a look at a large banner for both desktop and mobile. Each of these image styles is set with a focal point scaling crop, ensuring specific sizing while maintaining the center focal point. For instance, the mobile large banner might be set to 420x619 pixels.

Focal point for large banner

Then, we set up a responsive image style within our theme, aligning breakpoints with container sizes and content behavior. We can specify which image style to load based on the minimum width, ensuring that the appropriate image is displayed for different screen sizes.

Breakpoints for responsive images

This process is specific to Drupal. While other CMSs may offer similar functionalities, they often require additional coding or plugin installation to achieve the same level of ease.

How else can setting responsive image styles in Drupal be easier?

Provus® is our Drupal component-based platform. In Provus®, we have enabled the focal point by default. This usually isn't enabled. However, our clients request it because it ensures that important elements of the image, like faces, remain centered during scaling and cropping for mobile viewing.

SEE HOW THIS WORKS WITH PROVUS®—BOOK A FREE DEMO

How do responsive image styles in Drupal enhance site performance and user experience?

Responsive image styles ensure that appropriate image sizes are loaded, reducing loading times and improving performance. We also lazy-load images, meaning they're only loaded when they come into view, further enhancing user experience by reducing unnecessary asset loading.

Learn all about Drupal through our training classes

Our team here at Promet Source is devoted to channeling our collective brainpower toward helping the Drupal community take advantage of all that Drupal 10 has to offer. If you want to learn more about Drupal and optimize your skills, sign up for our training classes!

How to subscribe to the Promet newsletter

Feb 07 2024
Feb 07

How to ensure detect web accessibility errors and ensure compliance with current Web Content Accessibility Guidelines (WCAG 2.2)?

Many automatic testing and scanning tools are available to help fast-track the process and uncover common, but frequently overlooked errors. The challenge: these tools vary widely in terms of types of errors they detect, usability, and the degree to which they can help ensure ADA Accessibility compliance. 

The following is an evaluation of seven of the most popular tools or extensions currently available, and what we consider to be the key advantages and drawbacks to each. 

Keep in mind that there are inherent limitations to all automated tools. While automated web accessibility testing tools provide a step in the right direction and an essential starting point, in order to accurately and thoroughly audit a website for accessibility, manual testing and intervention is also required.

1. BrowserStack

Designed as a tool for testing and monitoring web accessibility, BrowserStack features fast scanning capabilities, real screen readers, and automatic daily monitoring. Recent milestones include: detection of more than 8 million accessibility issues, more than 25,000 web pages.  

Pros

  1. The interface clearly shows which manual test reports have been conducted and when, along with a number of other high-level issues. 
  2. On a report, the summary of the issues, and ability to nail down relevant details is l very clean and user friendly.
  3. The screen reader option is a huge plus that not many other services, if any, would have. This feature is among one of the most significant advantages. 
  4. The manual "assisted test," which allows for the viewing of keyboard tabs in order, and highlighted, is a strong advantage.

 

Cons

  1. The tool is not designed to run through and entire site, and check all links/pages. 
  2. It’s not clear that "website scanner" provides the ability to generate a report from a site. It’s an important capability that should appear high up on the list. 
  3. The "how to fix '' is lacking in details, such as 4.5:1 ratios for color contrast issues, color recommendations, etc.
  4. When looking at errors on the page and selecting the item, it would be helpful if the tool highlighted the actual item that is in question.
     

2. DubBot

DubBot provides automated solutions designed to simplify website management, with tools that help organizations to detect vulnerabilities that include web accessibility, web governance, SEO, detection of misspellings, broken links, and accessibility task management.   

Pros

  • The DubBot dashboard is amazingly useful. The ability to not only see accessibility issues, but also broken links, governance red flags, and spelling mistakes is helpful at getting a high-level site summary. 
  • DubBot provides the ability to filter by accessibility error types, view all errors on a single page, site or group, as well as create tasks, mark errors as resolved, or ignore errors on a site or group basis. 
  • DubBot's support team extremely responsive, offering efficient access to subject matter experts who provide accurate and authoritative responses to questions and concerns. 
  • DubBot also allows users to configure reporting, that enables up-to-date information on any website's current accessibility state. Reporting includes an error summary and can be sent daily or weekly, (depending on configuration options). This is a very helpful tool during agile development.
  • DubBot runs on axe, which is helpful in leveraging automated accessibility testing due to an enterprise ready dashboard that has many configuration options. 

Cons

  • Unlike a few of the other tools, DubBot does not have a Chrome plugin, which means that a website's needs to be compatible with the DubBot crawler tool. 
  • Integrations with JIRA or other reporting/ticketing software would be helpful. 

3. WAVE

WAVE is a web accessibility evaluation tool developed by WebAIM for evaluating the accessibility of web contents. The tool is available for WAVE Firefox and Chrome extension or by entering the web page address (URL)

Pros

  • The WAVE Chrome and Firefox extensions allow you to review the accessibility of your site directly within the Chrome and Firefox browsers. 
  • No information is sent to the WAVE server. 
  • WAVE will show what errors are indicated and make some recommendations on how to correct these issues. 

Cons

  • WAVE provides an overlay of icons to indicate any potential accessibility issues however it gets confused by absolute positioning and doesn’t show any other information about the element. 
  • The overlay overlay of icons becomes further problematic when you are managing an element that is not visible on the page. It will take a bit of work with dev tools to determine which element is causing the issue. 

4. axe

axe is developed by Deque Systems for Chrome. axe analyzes a page for accessibility defects in just a few moments from a Chrome browser. The final output will show a list of accessibility issues with a link that provides the code that caused the issues and recommendations for fixing the issue. 

Pros

  • axe rates the impact of accessibility issues differently than WAVE. It does not use the “alerts” category, rather all errors are given a severity level. Using this system prompts more errors to be fixed than if some errors are labeled as alerts implying they are not important. 
  • axe will list elements that are not necessarily accessibility errors but warrant review based on the context of the element.

Cons

  • axe will point out some color contrast issues that still need to be tested manually. 
  • While not overtly a drawback with this tool, it does require a bit more knowledge by the user to understand the process for testing. 

5. Siteimprove

Siteimprove is an extremely popular tool especially within the areas of government and higher education. Siteimprove is available as a Chrome extension. It provides visual feedback concerning web content and highlights noncompliance issues visually on the page. 

Pros

  • Siteimprove analysis is done entirely within the Chrome browser, allowing secure evaluation of password-protected or non-public pages, multi-step forms, and dynamic content.
  • Siteimprove identifies accessibility noncompliance issues within the framework of WCAG, and points out instances where more than one guideline is being being violated. 

Cons

  • The format in which the errors are listed can be confusing for those not familiar with WCAG standards for accessibility. 
  • Several areas indicate manual testing is needed. As with axe, while not overtly a drawback for this tool, it does require a bit more knowledge by the user to understand the process for testing. 

6. Lighthouse

Lighthouse is developed by Google. If you are running an up-to-date version of Chrome, you most likely already have Lighthouse since it is built into devtools. Open devtools and go to the ‘Audits’ tab, then the ‘Perform an Audit’ button and you will be given a list of the audits Lighthouse can perform. 

Pros

  • Built into Chrome devtools. 
  • Can analyze more than just accessibility. Also analyzes factors such as SEO, performance and best practices. 

Cons

  • Not as robust as some of the other tools listed. Lighthouse does use axe-core for accessibility audit, but it does not run the full set of about 70 tests that the axe extension does. 
  • It is possible to get a 100% accessibility rating on Lighthouse and still have a site which is largely not accessible. 

7. Tenon.io

Tenon.io differs from the other tools listed here since it is a web service and not an extension. Use of Tenon.io simply requires a link or paste in the markup of the UI and it will generate a report. There are also many ways to integrate Tenon, but this is a paid service. 

Pros

  • Does not require anything to be downloaded or installed on your computer. 

Cons

  • Since Tenon works by passing the URL to a browser, your site/UI need to be publicly available. 
  • Can be slower than the other tools covered here. 

Automated tools can serve to significantly streamline the evaluation of a website for ADA accessibility and detect important instances of noncompliance. Manual follow-up is always recommended, however, for an accurate analysis and assurance of WCAG compliance.

As one, small example of the limitation of automated accessibility tools: automated tools check to ensure the presence of alt text, but if the alt tag is inaccurate such as alt="cow" for a picture of a chicken, the automated tool will not detect it—although some will point an issue that needs to be verified.  

Download Promet's Accessibility Checklist for Content Editors.

Looking for help in determining the automated tool that’s appropriate for your needs, or consultation concerning the process of ensuring WCAG 2.2 compliance? We can help! That's what we do! Let's talk!

Sep 13 2023
Sep 13

A frequent question in the open-source CMS world is a variation of: “Which is better, Drupal or WordPress?” 

There’s not a simple answer to the WordPress vs Drupal question. Many have a strong bias towards one content management system or the other, but often, staunch opinions on the subject are based on a few cursory facts or outdated information.

Both WordPress and Drupal have evolved a lot since their introductions in the early 2000s. In some ways, this evolution has brought them into closer alignment with each other, evidenced by developments such as the porting of WordPress’s Gutenberg content editor over to Drupal in 2018. 

Drupal’s addition of Layout Builder into Core has served as a significant step forward for easily building landing pages using prebuilt components – a feature that’s leveraged by Promet’s Provus® platform.

In other ways, WordPress and Drupal evolutions have clarified distinctions. Generally speaking, though, in the current environment, the majority of sites can be supported equally well by either option. 

Which CMS is More Scalable? More Secure? More User Friendly?

That’s not to say that the WordPress vs Drupal debate doesn’t still spark strong opinions, as both have their devotees.

Promet Source has deep ties to Drupal, and over the past few years, we have broadened our perspectives and talent base to include WordPress advocates and experts. As such, we're well positioned to objectively cover an in-the-trenches comparison of the strengths of each.

Let's start with a few key stats and facts about Drupal and WordPress.

What are the Benefits of Drupal?

A modular CMS written in PHP, Drupal enables developers to leverage a flexible taxonomy system that’s designed to organize complex content types, set highly customizable user permission levels, and ensure web accessibility compliance with enhanced testing and tracking capabilities.

The November 2015 release of Drupal 8 set in motion Drupal’s enterprise-level trajectory. Drupal 8 amounted to a complete architectural overhaul from Drupal 7. Upgrades from Drupal 8 onward are now intended to be incremental, bearing no resemblance to the migration that accompanied the leap from Drupal 7 to Drupal 8. The trend toward steady, incremental upgrades is particularly true with the December 2022 release of Drupal 10.  

Upgrades between Drupal 8, 9, and 10 have continued to solidify and enhance core features, as well as accessibility. Through ongoing revisions and community efforts, Drupal is on a consistently feature-rich trajectory. 

An important example is the availability of no-code/low-code solutions, such as drag-and-drop functionality or component-based design capabilities that are finding their way into Drupal – empowering marketers and content editors with greater possibilities and flexibility for managing their sites. 

Drupal by the numbersSources: BuiltWith, W3Techs, WebTribunal

Drupal's Share of CMS Market

For reasons that include core support for multilingual sites, Drupal is an attractive CMS option government, higher education, large enterprises, and health care institutions – architecturally complex, high-stakes sites that can scale for surges in traffic.

The City of London and the State of New York websites are on Drupal, as is Orange County, California, the U.S. District Court of the Southern District of New York, and Southern Illinois University School of Medicine

Another essential Drupal advantage: a diverse and dedicated community of contributors, as evidenced by 47,350 modules that are available for free download.

Drupal CMS share of market

WordPress dominates the CMS market at every level.\ Drupal's share increases with a site's size and complexity -- from a 1.8% CMS market share overall, to a 7.5% share of the world's top 1,000 CMS sites. Source: W3Techs.com.

WordPress Advantages

While Drupal advantages come into play among architecturally complex sites, WordPress covers a wide spectrum of needs, and its popularity is on an upward trajectory, currently accounting for a 64.3% share of the worldwide CMS market.

Originally developed as a blogging platform, WordPress has maintained its appeal for non-tech types with the advantage of a relatively low barrier to entry. It’s entirely possible to set up a WordPress site without development or coding expertise, experienced developers frequently work within WordPress and leverage their knowledge of HTML, CSS, and PHP to build sizable sites with a greater range of capabilities for both public and private sector clients.

Making steady inroads into the enterprise CMS space, WordPress is now the CMS of choice for an increasing number of heavy hitters such as Sony Music, BBC America, The New York Times, and The Walt Disney Company.  

WordPress offers more than 60,000 of plug-ins to expand functionality, outranking Drupal for ready-to-go themes that serve to fast-track site builds without the need for custom development work.

WordPress by the numbers

Source: 15 Fascinating Facts about WordPress

Among the conclusions to be drawn from WordPress’s impressive internet saturation: it’s a CMS that has proven to be the right fit for a wide range of different needs and has gotten many things right, from more than 60,000 plugins to an easy-to-use CMS. 

Core Distinctions between Drupal vs WordPress

Both Drupal and WordPress offer a depth and breadth of add-ons that extend functionality. These are called "modules" in Drupal, and "plugins" in WordPress. "Themes" that refer to a site’s aesthetics and user experience, such as design, layout, colors and navigation, is a term that applies to both Drupal and WordPress.

Here are some additional distinctions between WordPress and Drupal:

  • Unlike Drupal’s 2015 architectural realignment with the launch of the enterprise-ready Drupal 8, WordPress has never undergone that same kind of overhaul. The resulting difference is that expanded functionality for WordPress occurs at the theme/plugin layer. Much of Drupal’s functionality, on the other hand, is centralized within the ever-increasing core level, as the most frequently used and widely accepted Drupal modules are continuously incorporated into core. 
  • Key Drupal modules that are used to build the majority of Drupal sites, such as Layout Builder, Translations, and URL aliases have been pulled into Drupal 10 core. The result is a greater efficiency associated with finding and installing contributed modules and streamlining development. 
  • Drupal core is becoming increasingly robust, while still allowing for the flexibility of whether or not to actually install core modules.
  • WordPress functionality relies heavily upon themes and plugins, and this can be viewed as an advantage. The vast WordPress collection of themes and plugins provides a high degree of flexibility. 
  • The flipside of flexibility, on the other hand, and a key factor that tends to fuel the appeal of Drupal for architecturally complex enterprise, higher ed, and government sites, is that there is an inherently higher level of security and stability associated with core, vs the contributed module or plug-in layer.
  • WordPress updates can be rolled out automatically without touching the code. This is a useful feature for smaller sites, but at Promet, we do not activate it because on a more complex site, something could break during the upgrade process that would require troubleshooting to unravel and fix. At this point, Drupal updates do not occur automatically, and require the intervention of a support partner or an in-house expert.

Scalability vs Complexity

While WordPress has proven itself to be extremely scalable and the right fit for a multitude of significant sites, the essential distinction which is often missed is not so much size and scalability, but complexity. Even though there are hundreds and hundreds of pages, on whitehouse.gov, for example, the site consists primarily of articles and information. When a greater range of content types and complex data models are required, Drupal proves to be the CMS of choice. 

Acknowledging that both Drupal and WordPress are solid content management systems, and that there’s considerable overlap in the types of sites for which either would provide an excellent solution, Promet recently developed the following matrix in an effort to highlight the relative strengths of both options and open a dialog among our teams.

Here’s what we came up with relative to 10 key criteria.

Drupal vs WordPress comparison matrix

  1. Open Source. Both Drupal and WordPress are solid open-source solutions with great track records.
  2. Lamp Stack (PHP). Both use Lamp Stack PHP equally. Five stars for both.
  3. Enterprise Ready. That’s where Drupal shines. WordPress: Yes and No. It’s applicable for some, not all, enterprise applications.
  4. Dedicated Hosting Partners. Both Drupal and WordPress have dedicated hosting partners, allowing for proactive maintenance, as well as heightened security, speed, and reliability.
  5. Available/Accessible to Novices. With the availability of Layout Builder in Drupal core, barriers to entry have been reduced. Even though developing a Drupal site and understanding how to work within the Drupal interface requires distinct expertise and training, it is now easier to create a Drupal site than it was in Drupal 7 or even 8. Barriers to entry are inherently lower in WordPress. A non-technical hobbyist or small business owner with a touch of know-how can find a theme that fits their needs and figure out how to build and manage a WordPress site, but developing a complex or enterprise-level WordPress site requires development expertise.
  6. Appropriate for a Brochure Site. Even though Drupal sites offer core and contributed modules that enable component building capabilities similar to Elementor in WordPress, there is often not much point in relying on Drupal for a brochure site when other, more appropriate options are available. WordPress was originally developed for blog and brochure sites, and it is ideal for that purpose. This is true for reasons that include it is simply easier to get started in WordPress and the vast number of WordPress themes can eliminate the need for customization.
  7. Complex Content Model. Complex taxonomy content models are where Drupal thrives. Not so much for WordPress, which best serves sites that don’t require the organization of high levels of complexity.
  8. Works for a Tight Budget (Under $10,000). The flipside of Drupal’s ability to navigate complexity tends to be the requirement of considerable developer legwork and ramping up. WordPress offers a greater range of out-of-the box solutions and, depending on requirements, it’s quite possible to build a respectable Drupal site for under $10,000.
  9. Design Theme Availability. Drupal has a limited number of design themes that are ready out of the box. While Promet has created a Drupal theme within the Provus® component-based design system, WordPress has an extensive and robust selection of design themes.
  10. Community. Drupal is powered by a professional community of dedicated developers, who regularly gather for training and information exchange at events, camps, and meetups all over the world. While there are many professional WordPress events, the WordPress community is more diverse and less cohesive.

Tracking the Evolution

Among those of us whose history in the CMS trenches dates back many years, it’s been very interesting to witness the evolutions of both Drupal and WordPress. 

Selecting the right CMS calls for careful consideration and expert analysis. The Drupal vs WordPress conversation does not lend itself toward across-the-board rules or easy answers. In fact, the judgment and expertise of anyone who suggests that Drupal is always the answer or that WordPress is always the answer should be considered highly suspect.

As the saying goes: “When all you have is a hammer, everything looks like a nail.”

WordPress and Drupal each have a distinct place at their respective ends of the CMS spectrum, with hobbyist or small business sites on one end and complex, government and enterprise-level digital experiences at the other. The vast middle ground between these two ends can be highly nuanced with no easy answers, but there’s a likelihood that either Drupal or WordPress would work equally well.

The main thing is the assurance that true experts with a depth of perspective and commitment to client success are doing the work. 

Interested in an expert analysis of the CMS that stands to represent the right fit for your organization’s distinct objectives? At Promet Source, we have the right people to help with that. Let's talk!

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