Planning a system to visually create responsive data-driven web page layouts & widgets in the Jetendo CMS browser interface
I've been thinking about how to make the visual layout and widget editor for Jetendo CMS.
Tree control demos
Editing Page Layout:
Despite being a "beta" quality release, these features work great in all the browsers I need to support.
Building The Rest
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.
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.
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
Most Popular Articles
- Mass virtual hosting security tip when using a reverse proxy to connect to other servers
- Solution for MariaDB Field 'xxx' doesn't have a default value
- How to lock Windows immediately upon smart card removal
- Stop using sleep mode with Windows Bitlocker for better security. Learn how to use hibernate in Windows 8.
- Is Google Public DNS actually better then your ISP?
- Pros and Cons of CFML vs PHP and other languages
- Run Windows Guest in CentOS 6 Linux Host using Virtualbox 4 via the command line
- My dog survived eating a box of Oreos