concrete5 5.7 Preview
Earlier this month a definitive release date for the concrete5 5.7 Beta was announced with great applause. We are told it should be ready to download and test by Monday July 21st. In light of this we decided to take the alpha for a quick spin in anticipation.
DISCLAIMER - the comments below are based on an unreleased, non-production ready alpha version. The beta and subsequent stable releases inevitably may differ in appearance and functionality. Just saying.
From the Top
Once we managed to get concrete5 5.7 installed locally after a few teething issues with composer, we were welcomed with a somewhat familiar looking ‘ccm-toolbar’ which we have become accustomed to and grown to love. That is where the familiarities sharply stopped. It didn’t take long to realise that the entire admin control suite has had a complete re-design and UI overhaul. We like!
Old Tool Bar
New Tool Bar
The ‘Edit’ drop down menu has been removed in favour of a separate button that now operates the opening and closing of the ‘Page Settings’ menu in an ‘Off Canvas’ style animation. Tidy. This addition allows the ‘Edit’ button to do what it does best - turn on and off the in-context page editing. Simple, effective.
The third icon on the left side of the tool bar (see screenshots above) opens the ‘Add Block’ menu again as an ‘Off Canvas’ interface. These three buttons along with the obligatory concrete5 logo make up the on-page editing options within the tool bar.
The right-hand side of the tool bar handles the Dashboard interface as before, with the addition of a separate button that opens up the sitemap. Handy. In an attempt to remain in-context as much as possible, the Dashboard and Settings pages also use the ‘Off Canvas’ style interface that can be toggled in and out of the page as and when they are required. To complete the toolbar, the ‘smart search’ bar remains intact.
Previous attempts to make this tool bar fully responsive and mobile friendly disappointedly fell slightly short. I am pleased to say that they have finally nailed it! Now fully responsive on mobile and tablet.
Personally I am a big fan of uncluttered, iconographic lead interfaces so this certainly impresses and excites me; however the lack of any descriptive labels or tool tips may confuse new users initially. Having said that, users are becoming more a tune to this type of design and the icons are pretty self explanatory in the context.
Waiting in the Wings
There is one ‘design pattern’ that is becoming very popular in this app-centric world that we now find ourselves in - ‘Off Canvas’. You may be asking, what is ‘Off Canvas’? Effectively it is a way of hiding additional content such as menus and ancillary content out of the viewport until the user brings this in to play, usually by clicking an icon, link or button. This can be a very effective solution for hiding complex menus that would otherwise, simply, be in the way.
concrete5 5.7 makes great use of this pattern and consistently utilises this approach making for a much better in-context feeling to the administration of the site. You no longer jump off to a ‘back end’ dashboard page but instead bring these options forward to the ‘front end’ of the web page - Making the whole user experience feel much more connected and coherent throughout.
Edit. Save or Publish
The editing of a pages content has also changed quite drastically. To edit, you click the ‘Pencil’ icon and it turns green to quite literally highlight the fact that you are in edit mode; just as well it does or you would be forgiven for thinking nothing had changed. In contrast to concrete5 5.6 et al, there are no longer any meaningful indications as to where the editable ‘areas’ or ‘blocks’ exist. No longer are you presented with dotted boxes clearly defining the space but rather you are left guessing, trying to hunt them down by swooping your mouse cursor from left to right, from top to bottom?
Similarly when adding a block to the page, there is a little bit of trial and error involved. This time, you drag a block out of the ‘Off Canvas’ menu, hovering it over the page until you find a suitable area to drop it into before being presented with the usual block editing interface. Takes a bit of getting used to. These draggable block ‘tiles’ also use iconography as their main differentiator albeit they also have descriptive labels too. These labels work fine in the main but become a little bit messy as the text becomes too big to fit on a single line.
Once you have completed your editing you can simply click the pencil icon once more and then you have several options. You can ‘Publish Changes’ which will effectively make all your changes live on your site. You can ‘Discard Changes’ if you decided you don’t want to keep the changes you have made. Finally, you can ‘Save Changes’ which will keep your edits but NOT publish them to the world - this is great new feature, kind of. This ‘Save’ but not ‘Publish’ feature has existed for some time almost by default. Previously if you made edits to a page and then did not publish these edits, then they would be ‘saved’ automatically until you ‘Approved’ the page version. This may not have been obvious before so a much welcomed addition.
This preview merely scratches the surface of what should be the biggest and best release of concrete5 to date. Hopefully we have at least whetted your appetite a little to take a further look for yourself once the Beta arrives.
Some Other Notable Additions & Improvements
- Several new core blocks as standard - Feature, Horizontal Rule, Frequently Asked Questions (FAQ), Page Title, Social Links, Conversation, Discussion & Image Slider make up the new line up.
- Improved layout tool - by the looks of our initial probing into this functionality, there is the option to use various grids, such as Bootstrap. Hopefully this will now mean no more broken sites on mobile and tablet when building custom layouts in to pre-existing areas. We shall see.
- Consistent block add/edit interfaces - looks like a lot of work has gone into bringing all the block interfaces inline with one solid design style; font sizes and form elements look much better and polished.
- Professional looking default responsive theme - there is a new theme that comes shipped with the concrete5 install - ‘Elemental’ and it looks pretty good. Miles better than Greek Yogurt and should give new users a good starting point for building out a site pretty quickly. Cool.
We are now looking forward to getting our hands on the Beta version to see what other goodies there are to play with.