Wordpress, TYPO3, and all other great CMS have a huge backend to give you the opportunity to change every last bit of your website to your needs.

As a frontenddev who regularely works with a lot of content to digest, reorganize and publish for clients or other projects, I still struggle with the decision of a decent system that deals with the important background stuff (accounts, API, revision, newsletter, blog, security) and leaves all the frontend freedom to me.

Sometimes I wonder why I even bother to use a CMS anymore. When clients refuse to learn about editing content in the CMS of choice, or do not care about content that much nevertheless. Organizing content site-by-site, content area for content area is not only exhausting, but also a very unproductive way to get things done.

A valid reason for this could be, that we expect our CMS to do anything for us.

Should we either use a mediocre solution for everything or a good solution for one thing at a time? Most clients are happy with a blog/page mix. If we want more, we need to look for plugins, addons or widgets. Or even worse: use another service that we can hopefully adapt to the same style as the current mainwebsite has. So if our client needs a shop, maybe a newsletter opt-in, throw in another contact form, we soon have a clutter of shopify, mailchimp and other third-party software. Well done. This is not the way.

The Dream — a new concept to organize content in the way we love to.

Did you ever happen to hit refresh on the frontend after every insertion to see, if the content as inserted looks any good? Medium is very good at this: the editing and the result are almost identical. This is because the markup is done via the nice selection-tool and some on-hover icons to add embeds/images. Medium does this not via toolbars, widgets or similar that display all possibilities you have at one time.

If we strip our toolbelt down to something more simple, we can create something thats easy to use but powerful.

A few mockups later

If I were going to create a CMS, this is how I would begin to plan it.

Created with Balsamiq Mockups — their software is awesome!

Core principles:
Layout, Module and Content editing.

The possibly most impressive editing tool to demonstrate, would be the modules.

The underlying idea of this, is that modules can have as many content areas as you need. You build them with HTML via your templating engine of choice (Smarty, Twig or Fluid maybe) where you set content areas that can be edited in the frontend. What kind of media it contains (text, images, date, etc) and where they get displayed in the markup.

Example of a bootstrap slider implementation

There is a CMS called Fireball, it’s developed to live on top of the Woltlab Community Framework. It makes use of the concept of having modules you can repeatedly use all over the website. See Example.

The light blue area is a rows-module that is selected. You can move it around via drag and drop, add another row via the + in the upper right corner, delete and of course also copy it.

How awesome would it be to add new rows at the click of a button?

Want to copy it to another page? We know how to copy on our desktop environments with the help of our keyboard, I could think about something similar: select the module, press ctrl and then drag it to the desired navigation item, and it would presumably land in the first available main content area. Want a cross reference where both items stay the same when you edit just one? ctrl+shift+drag it somewhere. It works so nicely in windows or other Desktop UIs, why not use the same idea for the web? It’s not only easy, on top of that — it would be intuitive to move around and add new stuff. I am not quite sure if I should make use of a selfmade context menu.

This Frontend/Backend-in-one solution would be javascript-heavy. At least for the editing.

Some predefined modules:

Rows, Page Navigation, Breadcrumbs, Language Selector, Article with or without Comment section, Slider, etc etc.

You could even restrict some modules to some parent-modules. There is no use for lists in tables and vice versa.

Content Editing as we know it

Not much to say on this one: There is already a library for a medium.com similar editor: https://github.com/daviferreira/medium-editor.

Layout

Usually, this is the first thing you do when you are done with the content: you decide which content goes where. The only thing I can think of is that you can set which parts repeat across other pages. Like navigation, header together with logo + slogan and subscription opt-in. The main content area could have an element that is always present in the same layout.

By now, we have covered all aspects of professional flexible templates:

We have a layout, partials and the actual content. We can easily change it to our needs.

TYPO3 Fluid is awesome in the way it organizes the layout:

Conclusion

There are still a few points open. For example: how to deal with hidden navigation items. Overall, I would really love to use something that is this easy to modify and expand. I always struggled with the existing Systems to add my custom stuff in a quick manner, without polluting RTF editors with my HTML, which is not well editable for clients. Another issue is, that making a CMS this easy to use, would perhaps empower our clients to fuck the whole website up very easily.

We also havn’t covered how we would set different sizes on rows — for now it’s only even sized container.

Please let me know what you think about it, and if you either believe that this idea has a future or not.

Kudos

This article is a created as a response to @nobackend ( http://nobackend.org/ )

https://twitter.com/martinmuzatko/statuses/469436290765975553 https://twitter.com/noBackend/statuses/469436783626039296

Further Read

I recommend this one: Brad Frost on Modular Frontend: http://bradfrostweb.com/blog/post/atomic-web-design/