The WordPress UI/UX Development Revolution

This website  and its cohort have been underlining the rapid improvements in development tools and plugins available to WordPress Designers in their UI/UX tasks. These tools and plugins are individually accelerating WordPress Design and Development capabilities. But what we shall see is that they are also collectively revolutionizing WordPress Development because of their complimentary effects on ease of design and speed of development.

Let us examine these critical plugin categories and how they have changed WordPress status in Web Development. Click to pulldown each topic to see the details.

Click to see how Visual Page Builders provide powerful WP editing features.

2)Drag and drop Visual Page/Post Builders like SiteOrigin Page Builder, Themify Builder, Elegant Page Builder, and others dramatically improve page building. Many Visual PageBuilders work with posts and some custom post types; but most of these tools lack the ability to change the dimensions or positioning of WP blocks as Visual Layout Designers can do. However, these tools have effectively restored WYSIWYG page editing to WordPress making cryptic shortcodes quickly visible. The Visual Page/Post Builders offer 30 to 60 UI components or modules for feature packed page/post design.In addition these visual page editors deliver effective drag and drop layout with easy movement and/or changes to UI components and column layouts within a page/post. Here is an example of Visual Composer in action:
Visual Composer works with most WordPress themes whereas some Page Builders are limited to a specific family of themes.

Click to see how Custom Post Types extend the content blocks that WP provides.

3)Custom Post, Field, Taxonomy, and Query tools [many free or low cost], have made it possible to create database-driven code templates that can be copied and re-used over several pages/posts.In effect, Custom code opens the WordPress database to user-defined WP data-blocks for creation, editing  and display.

Click to see how Image Grids take display of a gallery of images to a new level.

4) like Media Grid, Gigabox, Go Portfolio, and others now deliver complete control of image layout almost  regardless of the original image size. These Image Grid plugins provide a choice of popup lightbox tools to show enlarged or full-sized original images. The plugins also provide captioning and links for each image along with overall responsive design – shrinking or expanding to match the device used. However, the Media Grid tool goes one step further and  supports multiple media in its grid layout:
In departure from most image grids, Media Grid supports maps, audio, video, and inline HTML blocks in its grids.

Click to see how Sliders have moved beyond images and from transitions to layered animations.

5)Slider plugins like Meta Slider,  Layer Slider, SlideShow, Wow Slider and others have progressed well beyond responsive slideshow display of images. Now slider content can be movies, maps, or any HTML blocks. In addition, most sliders provide multiple layered animations overlaying captions and other images onto a large background image or HTML block  with  stunning transitions between blocks. A remarkable number of sliders are feature rich and free with premium sliders providing more transitions, better layering, or more slide types. Here is an example of a premium slider:
Wow Slider provides here a responsive, full page width slider using 3D Cube transition.

Click to see how Forms plugins fill in for a WP deficit.

6)Form plugins fill in a WordPress gap with tools like Contact Forms 7, Gravity Forms, Fast Secure Contact, Visual Form Builder, QuForm and others including WP’s own JetPack which has a simple contact form. Typical services include a form builder, field validations, conditional fields, specialized order entries, polls and surveys, scheduled forms, notifications, spam control,  multi-page forms, plus a wide selection of form field types. Here is Gravity Forms in action:

Collective Interaction Among the 8 Plugin Groups

These plugin groups collectively  work fairly well together. Yes, there are plugin conflicts [for example, Live Composer Page Builder does not work with Headway Visual Layout Designer and some Page Builders are like  Divi – only usable in a very small set of themes]; but the plugin vendors have every incentive to make their tools interoperable. If they don’t others will. Thus  the Visual Composer and Headway Visual Layout Designer combo is one of the best WordPress design and build  combinations.
Headway Visual Styling Editor modifying Visual Composer post block

Likewise the Image Grid plugins work very well with most Page Builders providing portfolio and Visual Sitemap capabilities that are market leading. Ditto for the Slider plugins which when combined with Scroll plugins make for stunning Landing Pages and portfolio/detail reveals. Again, most of the pro sliders work well and can replace the simple carousels/sliders provided by Visual Page Builders.

While waiting for WordPress plugins to mature, this Web developer is fond of using iframe or JS Embed plugins to put some great jQuery plugins to work in Slider or Visual Layout Designer components. Ditto for using Chat and meeting plugins – some of the better Visual Layout Designers and Page Builders are able to place these tools in widgets and popups for more convenient use. And the number of Forms and Doc embeds used have skyrocketed with Visual Page Builders.

In sum, the collective use of the 8 major plugin groups makes for much faster development and better options for end users. Year after year, WordPress websites garner their fair share of top Web Design awards. In short, WordPress with these tools becomes synonymous with “do-any-Web-designs”.

WordPress as the  Web OS

At WordCamp Toronto 2014, James Hipkins of Red 8 Interactive advanced the idea that the “do-any-design” capability of WordPress means that it is becoming the Web’s Operating System  – the preferred environment to do Web development. With WordPress being used on 23% [and growing] of all the World’s websites it certainly has market share presence. With 75 million websites using WordPress, it certainly can command attention among  vendors offering  WP consulting, training, and plugins/themes. So it is no surprise that WordPress has a commanding market share lead in Web CMS usage:
But 2 other ideas, also from WordCamp Toronto,  deserve repeating because they support the notion of WordPress as the Web’s OS.

First,  WordPress has been built for Designers with minimal programming required as most WP designers can thrive with HTML,CSS and Photoshop alone [no SQL, PHP, JavaScript, Python, Ruby, etc required]. True, having full stack developer skills certainly makes one even more productive with WordPress. But like no other programming environ, WordPress supports media and design skills as a critical factor in delivering successful websites. So both Designers and Developers can comfortably deliver WordPress apps and websites.

The second factor that makes WordPress like a Web OS is that it has  3,000 free themes and 36,000 free plugins. Talk about being highly customizable. As one WP observer has noted, WordPress’ calling card is rapidly becoming “there is a plugin for that”. Certainly in every one of the 8 key web development categories outlined above, there are several superb plugins available to WordPress users.

In fact, the only development task where WordPress falls short is arrays, datagrid and charting. However, two approaches are available in this case. First, new plugins are emerging like TablePress and Footable that address basic table and datagrid use cases. Second,  WP developers have available some sophisticated JavaScript and PHP tools to implement solutions using embeds, iframes or external calls. Yes, some coding required – it shows the mantra of “no coding required” resonates in the WP community.

Summary

So this is the WordPress Development Revolution.  Windows on the Desktop became the number one OS for 4 primary reasons:
1)More programs were developed on Windows than any other OS;
2)Windows programs were easy to use with point & click, drag & drop WYSIWYG ops;
3)Windows catered to developers with top flight tools like Visual Studio and MSDN;
4)Windows catered to backend admin with ease of development & maintenance.
WordPress has emulated those success factors:
1)WordPress has 36,000 free plugins and 6,000 premium plugins;
2)WordPress tools and objects like menus, sliders, galleries, widget bars etc are as easy to develop as they are to use;
3)WordPress caters to website developers and administrators with easy updates plus drag & drop simple maintenance operations.
4)If designed and maintained properly, WordPress websites deliver secure and top performance operations for the largest of websites;
5)One can be very productive in WordPress with basic computing, HTML, CSS and media  skills.
Right now WordPress developers can say confidently to  clients that they can deliver any website or app with the customized look and feel that the clients want. And WordPress developers can change and expand a website’s features or modify its layout and look/styling with ease.  Such pledges just  reflect the fast development strength of the 8 plugin groups outlined above plus the confidence that “there is a plugin for that” from the 42,000 available WP plugins. Thus it is no surprise that WordPress has become the preferred Web Development environ for websites large and small.