Planning a system to visually create responsive data-driven web page layouts & widgets in the Jetendo CMS browser interface

  Follow me: Follow Bruce Kirkpatrick by email subscription Bruce Kirkpatrick on Twitter Bruce Kirkpatrick on Facebook
Tue, Mar 04, 2014 at 9:25PM

I've been thinking about how to make the visual layout and widget editor for Jetendo CMS.

So far, I've come up with an idea where I'll use drag and drop javascript-based tree controls like the following 2 examples.  I customized the data for the one of fancytree project demos to have nodes that are named in the way I imagine I may use it on a future version of Jetendo CMS:

Tree control demos

Editing Page Layout:

Editing Widgets:

Despite being a "beta" quality release, these features work great in all the browsers I need to support.

Building The Rest

Now most of the remaining work is related to creating backend systems that can save / load this information and generating the responsive HTML, CSS and Javascript efficiently based on the data that is created.  This is no small task, when you want to make it easy to keep upgrading this system and supporting it across hundreds of sites and many installations of Jetendo CMS.

Once it's done you'll be able to edit the relevant CSS, image, and video parameters of each HTML elements in the browser so it will offer nearly as much control as writing your own HTML, but it will help you focus to a reduced set of features to force you to rely on the conventions to simplify your work.   You'll still be able to create custom code outside of this system, but you should notice that this system will handle most of the work you used to do with less complexity and bugs.

After you design the layout and widgets structures you need, you would use the Jetendo CMS form builder features to build the database and forms that will be used to populate the data of the widgets.

Once you have all that ready, you would either need to 1) click the generate code link for each widget and insert custom CFML business logic to map the form fields to the widget fields in a custom way so that this can be used for large database feeds like products, real estate, etc or 2) rely on a new completely visual form field mapping system.  

Harder to connect complex data

This visual form field mapping system will only be appropriate for simpler databases like slideshows, menus, sidebar widgets, footers, multi-column content panels, and other common widgets designers like to make to make the page more visual engaging.  

Mapping the system to complex databases will inevitably require writing some queries and logic, so I don't expect to be able to automate everything, but a good portion of the work can be.  Any time you don't have to write new code, you are saving a lot of time on testing / debugging, and that gives you more time to focus on quality or other goals.

More layout control features

In addition to being able to do all this, I imagine creating the system in such a way where when you go to the layout editing mode, you will be able to select a number of options including:
Master Template: Select Menu or Create A Template
Layout Mode: Global | Section | Page

A typical site with product categories might have a single Master Template for all categories, but maybe you have one category in the site where you want to do a custom featured products widget at the top of the category.   You want this widget to be responsive, and have dynamic data the client can edit, so you usually need to get your programmer involved in the changes.   Well, a future version of Jetendo CMS, will actually allow you to build this feature visually.   This will free your developer to do other work.

Locking down the design

This system is for really only for the folks we trust to have creative control of site design, which is usually not the client, but the client could use it too with enough training.  Jetendo CMS allows disabling features you don't want a client or other user type to be able to change, so it's a simple matter to hide this feature from them.   Regardless of who uses this system, it should greatly accelerate development, and allow greater reuse of widgets and code between projects.    This also makes responsive web design far cheaper to deliver, and that's important with nearly 50% of people using mobile devices with smaller screens to browse the web now.

Concepts & Examples

I also built a series of responsive box layouts in illustrator today.  See Screenshot

I expect the upcoming layout editor to be able to let you visually create all of those layouts, but with variables for most common CSS parameters like padding, margin, font.  Plus you'll be able combine panels / rows, nest them inside each other, and save the entire thing for reuse on other Jetendo CMS sites and servers.

In HTML, you create usually overlapping layers by using negative margins or use javascript for positioning them with left/top coordinates.   I'm going to allow the visual creation of complex overlapping widgets that connect to dynamic data like the screenshot below where there is a text, a transparent black background and an image overlapping:

You'll be able to define how many panels per row, per responsive breakpoint, and the way the panels are distributed, whether it is equal of fixed widths, or a combination of fixed and percentage based widths, so that your design resizes appropriately as you resize the browser without causing visual glitches.  Because we're making this easier to manage through applying conventions that limit you somewhat, it should take less time to fix any problems you encounter, and prevent many of them entirely.

You'll be able to set whether the panels should be an animated slideshow, or jquery tabs, or other things later.

You could even visually design each slide of a slideshow as a different HTML widget with different structure. 

If the system didn't work for your specific design for some reason, you could always copy and paste the code it generates and tweak it further to do more custom features and still save time since it will just be generating standard HTML / CSS / Javascript code.

Jetendo CMS Plug-ins

I'd like to think that developers could begin creating plug-ins for Jetendo CMS visually at some point. I plan on making these widgets able to be packaged as distributable plug-ins, in a simple 1: zip, 2: share and 3: unzip way or through version control.  I believe the form builder, and layout editor features will allow a great variety of software to be creating entirely in the browser with no new code.   Jetendo CMS's license agreement allows plug-ins like this to be licensed under separate terms, so you could even sell these.

Designers who are less technical, may find it easier to build really complex themes and interfaces on Jetendo CMS one day.

For the benefit of everyone

It could take several months or longer to work out all the details of implementing this system, but I hope to have some form of it working soon.

Hopefully, adding features like this to Jetendo CMS will help attract developers to the open source project.   Clients and developers alike can enjoy the efficiency and value they will gain.

Bookmark & Share

Popular tags on this blog

Performance |