Background
When constructing a blog post, page or other content I use a number of shortcodes and plugins to create content which I can style using custom CSS and which will automatically display responsively. I use oik-rwd to create dynamic responsive CSS and oik-css to override default styling. Since most of my shortcodes support aclass= parameter which oik-rwd can detect and use to generate CSS I often don’t need much extra mark up to style my content on the front-end into multiple columns.
Sometimes I have to resort to adding a couple of extra divs. I use [div] and [ediv] shortcodes to do this, with oik-rwd intercepting the class= parameter and generating the CSS as it does for the shortcodes that display dynamic content.
But the solution is only a partial solution.
- It’s not intuitively obvious how the result will appear.
- CSS styling can still be a real pain.
- Things can be easily messed up by human editors who don’t understand the shortcodes.
- The dynamic CSS gets sent to the browser after the HTML, which can lead to reflow issues.
to reduce the pain to produce nicely formatted content, that looks good on any device.
My requirements for a Page builder plugin
I’m going to list my requirements in a number of tables listing the- Requirement
- What it needs to do
- My priority
- How important it is to satisfy the requirement VH High Medium Low
- Note
- A brief note about the requirement or where you can find out more about it
How I’d prioritise Pippin’s requirements
In xx I summarised Pippin Williamson’s criteria for a Page builder plugin. This table lists the same criteria with my ranking of the requirement.| Requirement | My priority | Note |
|---|---|---|
| Easy to use? | High | It has to be easier than my current solution using shortcodes and custom CSS |
| Nicely styled | Medium | See Un-stylable |
| Front-end editor | Low | Whatever works |
| Visual/text/builder toggle? | Medium | |
| Embedded shortcodes | VH | At the end of the day the result should be the same as if hand cranked. |
| Open / close shortcode compatible? | High | |
| Shortcode styles and scripts | VH | |
| Compatible with ‘the_content’ | High | We may need require additional filter functions to achieve the desired results. |
| All content retained after deactivation | High | |
| Lock-in effect (e.g. shortcodes) | Medium | I’m happy with reasonable shortcodes. |
| Features? Content & Layout | Low | Content should be provided as extensions |
| Dependencies? | Low | Dependencies should be clearly stated |
Functional requirements
| Requirement | My priority | Note |
|---|---|---|
| WYSIWYG | Medium | See Responsive display |
| Drag and drop | Low | Depending on what building blocks are provided |
| Extendable/extensible | High | Run time first and build second |
| Un-stylable | Medium | It should be possible to disable plugin optional styling |
| Layout building | High | |
| Content creation | Low | Should be able to put whatever you like into an area |
| Responsive display | VH | Number one requirement |
| Responsive editor/front-end | Medium | |
| Shortcode toggler | Low | Convert shortcodes to HTML snippets and vice-versa |
| CSS styling outside its remit | Medium | |
| Hover styling | High | Ability to control absolute and relative positioning of elements |
SiteOrigin looks great but suffers the same, infinitely flexible ‘grid’ that isn’t a grid at all.
Non functional requirements
| Requirement | Priority | Note |
|---|---|---|
| Run time performance | VH | Assumed |
| Supports user roles | Low | |
| Price | Medium | Must be cheaper than a developer |
| Support | High | Considering the target market |
| Automatically tested | Medium | The underlying implementation should be fully tested |
| Documented interface | High | Code written to WordPress standards |
| Security | tbc | No special requirements |
| A11Y | tbc | |
| I18N | tbc | |
| L10N | tbc | |
| Usable on an iPad? | Medium | Does the plugin work when using Safari/Chrome on my iPad? |
- What requirements do you have for a Page builder?
- Do you already have a site built with a Page builder and you want to change it?
- How will you know when your requirements are satisfied?
References
| Item | Purpose |
|---|---|
| [div] | Start a stylable div |
| [ediv] | End a stylable div |
| oik-rwd | dynamic CSS classes for RWD – Responsive Web Development |
| http://www.wpexplorer.com/best-builder-wordpress | |
| 13 Page builder plugins – a summary of Pippin’s critical review |
