Joomla vs. Drupal — A Comprehensive Comparison - Site Design and Layout

By Justin Kerr
March 15, 2014

Table of Contents

Site Design and Layout

Both Drupal and Joomla contain systems for managing the layout of site elements, as well as implementing completely custom web designs. The two systems’ support for this shares some common characteristics, including the availability of multiple default, pre-built designs; design controls built into easy-to-use control panels; multiple designs supported per website; a way to override the default HTML output; an emphasis on separating presentation from content; and a third-party design ecosystem that provides a wide variety of plug-in design options.

Drupal iconDrupal

Drupal uses “Themes” to customize a website’s design and layout through conventions and processes focused around discrete sets of files in a Drupal installation. By default, Drupal ships with four in-built Themes, any of which can be extended or customized by spawning off a copy, registering the copy within Drupal under a new system name, and then adjusting CSS files and template files (named with *.tpl.php file name extensions in Drupal). A top-level *.info file declares the Theme within Drupal; references css, Javascript and other files used within the Theme; and defines page layout areas, which Drupal calls “Regions.”

Drupal’s HTML page structure is built from nested collections of code from a Theme’s *.tpl.php files, each focusing on successively more specific parts of the page design. A Theme’s layout Regions are used to contain Drupal “Blocks,” which can contain Module output, custom Views, or custom content. Block configuration options allow for selective display on site pages and for specific user Roles; custom PHP code can also be used to dictate the conditions of block display and control how the output renders.

“Sub-Themes” in Drupal hook into an existing, active Theme and inherit all of its characteristics, unless more specific CSS or *.tpl.php files in the Sub-Theme override those in the parent Theme. Likewise, *.tpl.php files in any Drupal theme are automatically sensed by Drupal and used to override the system’s default HTML output. 

Drupal Themes can also be set up to override PHP functions (especially display-related functions) elsewhere in Drupal. It is an established best practice to contain all such code in the topmost PHP file for the Theme, as well as ensure that all custom PHP code is properly secured against malicious activity. Depending on the Theme and the design needs for the site, a significant amount of PHP development may be required to enable specific design options and content behavior.

Drupal Themes can be built to include control panel-based settings for adjusting Theme graphics, colors, site titles, layout and other elements. Configuring how these controls work may require significant PHP development time; advanced implementations are a common feature found in many third-party Drupal Themes.

A Drupal Module called Panels provides additional options for layout control. Panels consists of a drag-and-drop content manager that allows for visual layout design: This can be integrated to work with specific Nodes, landing pages, specific permissions settings and developer-created “Views” of content. Some limitations to using Panels include the somewhat messy HTML code it creates, and some conflicts with Javascript-heavy elements (such as third-party WYSIWYG editors) placed inside Panels. Panels can also contain their own presentation logic, adding another level of control to content presentation or user access, as well as advanced caching controls to tune site performance.

Joomla iconJoomla

Joomla uses “Templates” to control site design and layout, and includes three front-end Templates and two back-end (administrative area) Templates as part of its standard installation. A Joomla site implementer controls Template choice and parameters through Joomla’s “Template Manager” control panels, accessed through the back end of the Joomla site. A default “Template Style” is selected for the site’s front-end display, and another for the site’s back-end display. For sites that require multiple web designs for different site areas, additional Template Styles are assigned to the Joomla menu items that point to those site areas.

Joomla Templates consist of collections of files stored within the Joomla installation and registered with the Joomla system. At its most basic level, a Joomla Template consists of an index.php file that establishes the primary structure of the web page, and an XML file which contains Template meta information, including a list of the named “Positions” used by that Joomla Template to lay out various site elements on the page. Other Template files (CSS, Javascript, images, etc.) are pulled into the design via standard HTML syntax – augmented with PHP code – in the index.php file.

Joomla Templates can be constructed to contain any number of parameters – such as color, font choice, or layout options – which are then adjusted through control panels in the Template Manager. Each saved iteration of a Joomla Template becomes a Template Style, with its own specific parameter settings: One core Joomla Template may power multiple Template Styles in a site, and depending on the supported Template parameters, each Template Style can support significantly different designs and layouts.

Precise control over Joomla’s HTML output for system elements (like the “Component” output that generates main page content, or the “Module” output for things like menus and login boxes) comes through an HTML override system that exploits Joomla’s Model-View-Controller software architecture. Developers override Joomla’s default system HTML output by copying system PHP files into specifically named locations within a Template’s folder hierarchy, then adjusting the code accordingly. Joomla automatically detects the presence of the override file and employs it instead of the default system file.

Installation of a Joomla Template is a one-click process that consists of uploading a specially formatted .zip file containing all Template files and information. Once on the server, any changes made to a Template’s files are automatically detected and applied to site display. A large number of third-party Template developers provide a massive choice in pre-built Joomla templates, some of which contain very sophisticated controls for managing site presentation and layout.

The Joomla project is standardizing on the Twitter Bootstrap framework as of the Joomla 3 short-term support release. Joomla’s inclusion of Bootstrap libraries by default is primarily meant to support consistent presentation of back-end admin interfaces, however, it is also available to front-end template developers who wish to leverage the framework.

Dollar sign iconCost Conclusions

Although both Drupal and Joomla include highly capable systems for managing site design and layout, Joomla’s in-built capabilities and standards result in a templating method that makes it easier and faster to implement bespoke website designs. (Indeed, Joomla’s templating system is unmatched by any other open-source CMS with which we are familiar.) Depending on design and capability requirements, it may take up to 50 percent more development time to implement a web design and layout in Drupal than in Joomla. Part of this stems from Drupal’s requirements for specific configuration work tying together its Modules, Blocks and Regions.

Overall, the market for third-party designs is larger for Joomla than it is for Drupal, resulting in a greater number of choices for those who wish to implement a plug-and-play site design. This may be a result of Joomla’s market ecosystem, which supports both free and commercial third-party add-ons, whereas Drupal tends to focus more on community development and sharing of freely available resources.