Concrete 5 • A top user-friendly CMS

[Update, July 2021. Concrete5 is now known as Concrete CMS.]

One of the challenges that integrators must take into account when preparing a Web site is choosing the right Content Management System (CMS) for the client. The right CMS is the one that takes into account the knowledge level of the people who have to use it on a daily basis.

When it comes to ease of use, not all CMSs are created equal. In fact, one of them stands out in terms of user experience: Concrete5.

Founders and owners Franz Maruna and Andrew Embler originally developed Concrete5 in 2003 as an internal system to serve the needs of their company, making it available to the public in 2009. Their CMS grew in popularity; today, their website claims that no less than 600,000 sites run on Concrete5.

Having worked with Concrete5 three times, I would say that it is halfway between the Drupal Goliath and the WordPress David. Concrete5 is built with PHP and follows the MVC programming model. As for Processwire, the CMS is easy to use, pleasant to program, and versatile with no headaches.

The Break between Concrete5 versions 5.6 and 5.7

I would be remiss if I didn’t voice my disappointment about the release of version 5.7, which proved to be incompatible with previous versions. In other words, a site built with version 5.6 cannot easily be upgraded. The Concrete5 team feebly justified their decision by saying that if Drupal can do it, so can they (changes made to 5.7 are too complex for older installations).

That said, new projects will benefit from the use of Concrete5’s newest version. Let me tell you why.

A Pleasure to Use

Once you’re connected to the back room, you’ll be won over by the sleekness of the interface. Everything is just one click away. Page editing is easy: all you need to do is to hit the Edit button and hover over the applicable area. Concrete5 then displays the area limits and often shows that it can be changed. Obviously, you can’t move it just anywhere, as the areas are delimited by the site programmer. In the example below, I moved the Column 1 area below the three columns. Column 1 will show up as empty and can be filled in later on. Several blocks can be associated with the same region, allowing users to manipulate content at will. This is in fact one of Concrete5’s greatest strengths. It is possible to restrict other areas, depending on the user authorization levels.

To edit content in an area, click on the area and a menu pops up. This menu is contextual. Concrete5’s basic building item is the block.

The rest of the administration interface is just as sleek. The file manager is user-friendly. You can create File Collections which can then be associated to a slideshow or a list in order to find images quickly. Furthermore, you can click at any time on any file and replace it without its references being invalidated elsewhere.

The designer and programmer will have prepared multiple models for the user. The names, model icons, and a number of models are left to the discretion of the developers. Concrete5 comes with four basic models, which can be linked to icons. Once again, everything has been thought out to make things easy for the user.

The placement of regions in the PHP code will not be an issue for integrators or designers who change the models.

Adding pages is just as easy. Just place your cursor where you’d like to add a child page and click on the + symbol. Clicking on the + symbol on the front-end page puts it in the main menu.

Programming in Concrete5

Though Concrete5 is ready-to-use with just the pre-built themes, Web sites are usually customized according to their intended use; programmers and designers are usually required to do this. But Concrete5 has thought of them too. Designers can create HTML models, which the integrator or programmer cuts out to integrate into the page models. Further, programmers can create blocks and limit the areas. In keeping with MVC methodology, these files are distributed under the Application folder. You can create all manner of lists and menus; nothing is cast in stone. The sky is the limit!

The following example, though brief, eloquently illustrates the coding philosophy. Besides including a header and footer, the code activates two areas titled “Main” and “Page Footer”. These two areas are offered by default with the basic code; you can create more complex structures and name each area as you see fit.

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
    <main><?php
        $a = new Area('Main');
        $a->enableGridContainer();
        $a->display($c);
        $a = new Area('Page Footer');
        $a->enableGridContainer();
        $a->display($c); ?> </main>
<?php $this->inc('elements/footer.php'); ?>

A complete page could look like what follows. In this case, the page is relatively static, as the content resides in the $innercontent variable.

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
    <main>
    <div class="container">
    <div class="row">
        <div class="col-sm-12">
<?php Loader::element('system_errors', array('format' => 'block', 'error' => $error, 'success' => $success, 'message' => $message));
            print $innerContent; 
?></div>
    </div>
<?php $this->inc('elements/footer.php'); ?>

An Error page is extremely easy to create. Note the presence of the t() function (also present in Drupal), which translates the interface.

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
<main>
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-sm-offset-3">
                <div class="jumbo">
                    <h1><?php echo t('403 Error') ?></h1>
                    <p><?php echo t('You are not allowed to access this page.') ?></p>
                </div>
            </div>
        </div>
    </div>
</main>
<?php $this->inc('elements/footer.php'); ?>

The documentation on the Concrete5 Web site is both complete and clear. The Concrete5 API is extremely well-described -- a welcome change from Drupal!

And while we’re on MVC, it goes without saying that the CMS can be used in custom-made applications.

Concrete5 Isn’t Quite Free

While the CMS is open-source, most modules developed for it aren’t. The business model puts programmer responsibility ahead of supporting a community of volunteer programmers. Modules are posted in a Concrete5 store. In fact, you have to sign up to the Concrete5 community. In other words, to obtain modules, you have to show your credentials. After you sign up (for free), you can access the modules, some of which are free, but most of which are under license. Even so, adding modules remains affordable, especially on more complex sites. All existing free PHP solutions can easily be integrated into Concrete5. All in all, Concrete5 is not terribly expensive, and generally provides for quick support by the developer of the extension.

Designers will also appreciate the ability to tweak blocks directly in the CMS. Each block offers six CSS property buttons (font, background image, border, positioning (inside and outside margins), CSS3 effects, adding extra classes). This enables minor adjustments without having to call in a programmer.

Conclusion

Concrete5, like Processwire, is a versatile, well-thought-out CMS. I have had a few issues with speed in the past, but the developers have worked to address performance problems by improving the caching system. Mind you, I haven’t tested this extensively on version 5.7. While developing on my system, I found that the various UX jQuery components were sometimes slow, but I tested the same interface on a demo site and did not observe this problem.

I was quite happy with version 5.6. In my opinion, the improvements to version 5.7, though welcome, are not worth upgrading for. At the risk of repeating myself, I was very disappointed with the break between versions. The fact is, there are now two worlds in the Concrete5 store, one pre-5.7 and one post-5.7. Developers who worked in version 5.6 will have to go to their client, cap in hand, and explain that they’ll have to stump up if they feel the urge to upgrade. Clearly, this “break” will not happen again. The developers wanted to create a buzz around the new user experience and succeeded.

Concrete5 is one step above Processwire in terms of on-the-fly Web-page adaptation. User experience is user-friendly. This is a great little CMS worth its salt.

Official video