The Emergence of WPIDE-WordPress Interactive Design/Development Environs
How WordPress UI Design Caught up with SquareSpace, Wix, Weebly, etc.
As a WordPress developer for the past 8 years I have had to contend with the fact that WordPress UI tools have had to play catchup with the interactive, drag & drop and True WYSIWYG capabilities available from SquareSpace, Webs, Weebly and other rapid website design tools. Many a client came with a Wix or Weebly built website that was either costing too much or lacked sophisticated plugins to meet their business needs. But despite the fact that WordPress could often lower their costs and certainly meet their needs, the WordPress UI and PageBuilding features were considered wanting at the time. They were too hard to use – even Divi and Visual Composer which did provide GUI design for their first 2-3 years only worked as backend tools. Users who had frontend page layout experience with Wix and Weebly were not prepared to go backwards.
Fortunately 3rd party plugin tools from Page Builder vendors like Visual Composer Headway Themes, and Ithemes Builder started in 2010 to deliver UI tools that allowed users to design and develop WordPress pages and posts with much greater speed and WYSIWYG, frontend design fidelity:
https://youtu.be/WmqSu_TErsE
As notedabove, these first set of premium PageBuilder tools were primarily backend-oriented – they replaced the WordPress Visual Editor with their own but the look was semi-WYSIWYG.
However, by 2012-2013 the spectacular market success of front-end oriented WordPress PageBuilders like Visual Composer and Themify Builder, turned the tide in favor of WordPress PageBuilders which now could match Wix and Weebly for frontend, WYSIWYG interface design:
Even better these PageBuilders had templates which could be used as models for page or post layout. Then users could change the the supplied image and text copy to meet their own needs. With the success of these WordPress frontend tools, a flood of PageBuilder tools came onto the market in the next four years each leap-frogging the other with more advanced elements and design features. Theme designers from ThemeForest and Elegant Themes began to offer frontend PageBuilders with their very best themes.
The Flood of WordPress Page Builders
There are now over 40 WordPress Theme and Page Builders on the market. Some like Site Origin PageBuilder [being used right now to write this review] are free and full featured. Here are the main features that have have appeared in the better PageBuilders:
- Capable of being used by any WordPress theme;
- Edit any and all WordPress Pages, Posts and Custom Post types;
- Frontend, true WYSIWYG Interactive Page Design and Layout;
- Scores of new UI elements and components available from vendor or 3rd party suppliers;
- Templates with pre-built Page or Post layouts inserted anywhere in a page;
- Templates can be customized, saved and re-used by user;
- Ability to add complete or partial page designs [called sections] anywhere in a page/post edit;
- Ability to auto-generate responsive tablet & mobile ready designs that resize/reposition layouts automatically;
- Ability to customize the tablet and mobile layouts independent of the desktop layout;
- Ability to create full-width and/or full-page designs with parallax scrolling for state of the art landing pages;
- Ability to style/format any block or component for instant customizing of page designs as they are built;
- Ability to undo work to any previous state by means of a revision history;
- Ability to add scrolling, animation and conditional effects anywhere on a page;
Cumulatively these UI features coupled with the wealth of WordPress plugins have restored WordPress.org to primacy among website development tools. This has been reflected in a growing 58.9% market share. In fact, now the SquareSpace, Wix and Weebly have had to play catch up particularly the need to provide for fully responsive pages and full featured templates. Curiously, as WordPress.org has risen, WordPress.com has fallen in usage in part due to a lack of a PageBuilder.
Now full frontend capable PageBuilders deliver Interactive, WYSIWYG page building:
Now full-width and full-height landing pages could be created as fast as slider-driven, parallax enabled , compelling product pages and in multiple languages while being capable of delivering individual desktop, tablet and mobile phone layouts. This signalled the emergence of WPIDE – WordPress Interactive Design/Development Environs.
What are WPIDE – WordPress Interactive Design & Development Environs?
In the rush to come to the PageBuilder market a curious thing happened – the WordPress tools diverged in their added functionality. The interactive environs split into 3 distinctive tool groups:
- Theme Builders dedicated to interactive layout of the overall website design – multiple custom page and post layouts – each having a specific layout and design for its particular tas. For example, there could be three landing pages one for a Portfolio pages, a second for Events and a third “Home” Page devoted to quick overall website navigation.
- A PageBuilder which took on design of the above specialized pages, posts, and Custom Post types . PageBuilders provide the UI/UX widgets and features that complete an overall Web Design outined in the the Theme Builders
- CSS Style Editors bring point and click interactive styling to Web Design. Yes, the Theme Builder and PageBuilder tools often have CSS styling but they are often limited in scope. In contrast, the CSS Style Editors are designed to address any page, post or custom post used on a website.
Now many websites used for simple applications will not need any of the above 3 tools; because most new WordPress themes provide more than adequate lite versions of these tools right in the theme’s Customize command or as Lite plugins. But websites requiring many different product posts, seasonal promotional pages or sophisticated landing pages will definitely prosper with the use of either a free or premium PageBuilder plugin.
And sites that have need of a distinctive layout and look for many of their pages will find that Theme Builders are essential tools.And given the sophistication of CSS styling in most modern themes, having a CSS Style Editor can save hours of hard CSS debugging work. Finally, developer shops that deal with multiple clients and websites will find the template features of the Theme Builders, Page Builders and the Style editors- all 3 will be great time savers.Drag andd drop WYSIWYG editing certainly speeds design and development especially when clients participate and can immediately validate the design directions.
Theme Builder
Headway Theme Builder allows users to layout their theme design in wireframe format. The advantage of Headway is that every page and every post can have a unique design and layout. For example a landing page with no header, footer or sidebar and then a contact page with header and menu plus content block for the contact form and button. This allows WordPress UI Designers maximum flexibility in laying out a unique website design.Other Theme Builder tools include Ultimatum and Itheme Builder provide much of this same functionality. The distinct added capability in Headway is a full CSS Styler. .
PageBuilders
Most good PageBuilders deliver not only pre-built templates but also user-built and saved templates that really save development time. In addition some have sophisticated views for tablet and smartphone layout as well as for the desktop. And almost all PageBuilders deliver blocks and widgets that are automatically responsive. There are over two dozen PageBuilders with a core 6 being the current best: BeaverBuilder, Divi3, Elementor[free], SiteOrigin [also free], Themify, and Visual Composer.
The advantage of CSS Style Editors is that they work exactly like the browser Inspectors in Chrome and Safari – they show all the CSS style rules that apply to a particular element on a web page. But in the CSS Style Editor you can permanently change the CSS. With so many theme , plugin, and user specified style rules this cascade of competing CSS stylings are much easier to manage with a Style Editor. The current 4 best Css Style Editors are: CSS Hero, CSS Styler, Microthemer, Yellow Pencil.
The first promise of WPIDE is to deliver Page/Post design without coding.
- WPIDE tools eliminate the need for coding in HTML, CSS, PHP, Javascript, SQL. This fulfills the WordPress promise of Website Design & Development with minimal coding required
- WPIDE encourages WYSIWYG –WHAT YOU SEE IS WHAT YOU GET operations
- Interactive visual design and development can be done all the time
- Point and click operations whenever possible
- Drag and drop pre-built components onto pages allows trying out different components quickly
- or change their position, order, size & dimensions with intuitive mouse interactions
Note how the PageBuilder highlights element that can be edited and has a sidebar list of elements that can be dragged and dropped onto the page. Many of the elements or widgets are prebuilt snippets of code like testimonials, carousel slider or calls to action.
The second promise of WPIDE is code reuse through the use of Templates.
- Styling for these UI Widgets often follows a common Look & Feel
- WPIDE allows users to style UI elements in simple interactive, Point & Click operations
- Again, different Styling Designs for color, spacing, type etc are easy to tryout with style snippets/templates.
The drag and drop of elements occurs along the bottom menu footer in Live Composer PageBuilder.
The third promise of WPIDE is better control over web page styling..
- Layout of Programs and websites have many repeated features,
WPIDE makes reuse of those common elements much easier with prebuilt templates - This speeds trying out design ideas and/or revising a site rapidly
- Agile development of rapid design with immediate testing is achieved
The Style Editor in Headway’s Theme Builder does many full CSS styling tasks.
The WPIDE Downsides
There are downsides to WPIDE that Wordpress users should be aware. of . First, there are over 2 dozen PageBuilders, many of which fall short of the key features such as template support or frontend interactive editors which deliver true WYSIWYG edits. So buyer beware. Second, many of the WPIDE tools create user lock in – if you decide to not use a Theme Editor’s design or PageBuilder page layout the step back can involve clearing away a lot of shortcode or tedious copy/paste rescuing of content from disappearing blocks.
But perhaps the major disappointment is the lack of full WYSIWYG operation where users are able to position and resize element at will. Some PageBuilders are starting to offer this capability to drag the margins on blocks or resize an image container making it larger or smaller while retaining its underlying aspect ratio. But these capabilities are just emerging in the marketplace.
The WPIDE Payoffs
WordPress Interactive Design and Development Environs has certainly re-invigorated the WordPress franchise. It is no wonder that Matt Mullenweg and Automatic have embarked on the JavaScript Frontend development environ in Calypso for WordPress.com using using a bevy of advanced JavaScript tools. Calypso may very well eclipse the current WPIDE capabilities; particularly complete drag and drop resizing/repositioning perhaps even using a layers approach familiar to Photoshop and Slider Revolution users. But the current 3 WPIDE Tools for Theme Building, PageBuildingand Style Editing provide the best and most complete combination of frontend design capabilities for WordPress developers.
Summary
WPIDE tools have revolutionized the WordPress and CMS space in general. JavaScript and Bootstrap have seen their own drag and drop PageBuilder with Mobirise. As noted earlier both Drupal and Joomla have gotten the PageBuilding bug. But for reasons unknown, WordPress.com, the free hosted version of WordPress has yet to see an interactive PageBuilder. Clearly for tools that are delivering design without coding, WPIDE is the winning way for establishing a Web Presence.