Codeinwp February 3 at 5:28pm · A question “Do you like WordPress page builders?” is somewhat similar to what if Dumbledore asked “Do you love Harry Potter?” If you are Hermione, you answer is yes. But if you are the Dark Lord… 12 Things We Need to See From WordPress Page Builders in 2017 While WordPress page builders help users perform many difficult customization tasks with less effort and money, they also pose some problems. CODEINWP.COM

12 Things We Need to See From WordPress Page Builders in 2017 + Who Already Gets It Right Updated on February 2nd, 2017 • in WORDPRESS WEB DESIGN GUIDES • by Karol K - 18 Comments 12 Things We Need to See From WordPress Page Builders in 2017 + Who Already Gets It Right Updated on February 2nd, 2017 • in WORDPRESS WEB DESIGN GUIDES • by Karol K - 18 Comments This is a guest post by Ann Taylor. A question “Do you like WordPress page builders?” is somewhat similar to what if Dumbledore asked “Do you love Harry Potter?” If you are Hermione, you answer is yes. If you are the Dark Lord… Well, you get the idea. It’s the same with so renowned WordPress drag-and-drop page builders – whether you like them or not generally depends on who you are. Do you know a lot of developers who praise the builders? Apart from those who create them, of course. But on the other side of the barricade, many designers and users seem to agree with Hermione’s answer, though it’s still a very controversial matter. 12 things we need to see from #WordPress page builders in 2017 + who already gets it right CLICK TO TWEET 12 Things We Need to See From WordPress Page Builders in 2017 What developers generally think about WordPress page builders “Drag-and-drop page builder here, drag-and-drop page builder there. It looks like my coffee and soup will be drag-and-drop soon as well. Go home, page builders!” “This builder left such a code mess I had to take pills to relax while working with it.” “Why do all my clients buy themes from ThemeForest? How on earth should I support their themes bundled with those painful builders?” “All what builders can give you is excessive styles, lack of creativity, and ugly pages. Hello, it’s 2017!” “Oh, users want a kitchen sink with that builder.” But users (and some designers) don’t agree with them, though “A full-blown page builder! I’m ready to create something exceptional.” “Oh my, 50 content modules? How to say my tech guy I don’t need his help anymore…” “At last. I can be involved in my own project with minimum budget.” “I can do it myself!” All joking aside, WordPress page builders really pose some problems to the WordPress space. On the other hand, they help users (bloggers, designers, various agencies) perform many difficult customization tasks with less efforts and money. Here are some of the main issues: Complex shortcode nature of almost all WordPress page builders makes it easy to create content poorly optimized for search engines. Moreover, some plugins still make user’s content unavailable if the plugin is deactivated. Many plugins are poorly coded so it’s difficult to debug or simplify the code. Plus, there are many compatibility issues with other plugins and WordPress core. A toolkit not powerful enough, not enough customization freedom. In the wrong hands, a builder becomes a tool for creating ugly pages, which only spoil a website. Builders are not a choice for constructing multi-page huge websites or massive directories. But why are they so popular? Yes, they still can yield tremendous benefits: Builders are much cheaper (often even free) than hiring a professional designer or developer. They let non-techies create unique custom pages without learning the basics of coding and help staying involved in their own projects. Builders eliminate a need to install multiple extra plugins. For many agencies, they are a great time and resources saver in making small tweaks for site pages. While there are so many page builder haters, new market players constantly appear and work at their fullest. The demand for WordPress page builders is rising. Best-in-class representatives compete with brand new builders making users unsure which plugin is “the best” for their needs. Gina Deaton, one of the speakers at WordCamp Boston in July, 2016, made one great point comparing WordPress page builders: each site is different and each case is different. It’s what’s important to remember for users who shuffle from positive to negative feedback on builders trying to find out “the truth”. It’s better to start with a free trial or install a free version (if available) of the builder to give it a test-drive. It’s necessary if you want to get your own impressions and experience. From Gina's presentation From Gina’s presentation To help both sides (fans and holdouts of builders) get rid of this benefits-drawbacks headache, let’s try to put together a list of the main criteria for a professional WordPress page builder. It should also come in handy for developers who just think of joining the game. Apart from my own experience, this list is based on multiple reviews of WordPress influencers, forum discussions, opinions of developers, designers and, of course, users. Best-practice criteria for professional drag-and-drop WordPress page builders 1. Frontend editing interface Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor It’s hard to describe emotions of a user who gets a chance to get rid of in-vacuum editing that a standard WordPress editor offers. It’s simply happiness. Frontend editing aims to significantly save user’s time and nerves increasing a happy UX. frontend editing It’s a commonsense and important criterion – providing users with a real WYSIWYG experience of editing content on the frontend, you increase their productivity and overall work efficiency. In some way, frontend editing even helps users build less amateurish pages – as immediately noticed visual inaccuracies are edited faster and easier. Simply tears of joy for chronic procrastinators. Frontend editing helps build less amateurish pages – as visual flaws are edited faster and easier CLICK TO TWEET Fortunately, mostly all WordPress page builders are supplied with this feature (and many of them went frontend only in 2016). However, not every builder comes with a highly intuitive UI – some are overloaded with tabs, buttons, icons creating a mess and making it harder for users to get started. 2. Straightforward and intuitive interface 5 Beaver Builder 4 SiteOrigin 5 Elementor 5 MotoPress 5 Visual Composer 5 Thrive Editor It looks like a very obvious thing – the user should understand how to do any desirable edits even after the first launch of the builder, without reading tons of documentation. The vast majority of people in need of such builders are intermediate WordPress users or complete beginners, so it should be clear and easy for both where to get started. However, as it’s stated in a post on WPTavern, WordPress newbies feel really lost even with performing basic tasks. That’s why an ergonomic user interface is one of the most crucial points for providing a happy UX. It’s mainly defined by a clutter-free layout, which is not overloaded with too distracting icons, buttons or whatever. You don’t want to lose prospects already at a trial period, do you? intuitive interface There are quite a lot of WordPress page builders that meet this requirement. For example, Visual Composer, one of the first builders on the market, is said to be highly intuitive thanks to a proper front-end editing interface, clear categorization of content elements and ease of use. Another user-friendly minimalist interface provides Thrive Content Builder as it literally comes with a so desirable WYSIWYG experience and no need to switch between tabs, content modules, to constantly refresh the page, etc. That’s exactly the same thing MotoPress Page Builder does – offering a clutter-free layout, it lets you edit content elements in a WYSIWYG editor on the frontend dragging and dropping the elements around. Read also: MotoPress Content Editor vs Visual Composer vs SiteOrigin Page Builder vs Beaver Builder vs Live Composer 3. Content retention after deactivation Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor If the plugin is deactivated or deleted, a user should not lose a piece of content and, moreover, this content should be easily edited with a standard WordPress editor. If the plugin crashed for some reason, the content should still be there. Now the situation with many builders is quite the opposite: deleted plugin – deleted content or shortcode mess left – time lost. This issue is widely referred as a “plugin lock-in effect” and it should be avoided. Unfortunately, anti lock-in effect is far from standard yet and many plugins don’t support it or halfly do. content retention This is a very important matter of responsibility for the product and a crucial criterion for a professional and reliable WordPress drag-and-drop page builder. Because isn’t it crazy to make users rely on one unsafe plugin only? This is also a kind of measure that should help elevate developers’ standard for business as it simplifies life of users and other developers. For example, BeaverBuilder will save your main content if the plugin is deactivated, but some additional modules like contact form, testimonial block, slider won’t be available. MotoPress Page Builder also offers this safety – when you deactivate the plugin and switch to default WordPress editor, all your content is saved in a simplified version with all text, images, charts, etc. Tailor Page Builder is also a great example of content retention feature – these guys offer a basic lightweight set of tools and a great option to save all you created. If you build your site with Elementor and then deactivate it, your content will still remain as well. With Page Builder Sandwich you won’t also lose your content and will be able to continue updating the page easily via a default WordPress editor. Among other popular WordPress page builders that fail to fully meet this criterion are Thrive Builder (however, the guys promise they are working on it), Visual Composer, Fusion Builder, Themify Builder. 4. Speed and performance Relates to the speed of editing process. 5 Beaver Builder 5 SiteOrigin 5 Elementor 4 MotoPress 4 Visual Composer 4 Thrive Editor Though SEO is a multi-step process, where everything is predominantly determined by hosting, image and video optimization, etc., poorly coded plugins can significantly decrease an overall website speed, in result, have a bad effect on site rankings. That’s already clear even for WordPress newbies. Moreover, the vast majority of builders are shortcode-based and their parsing is a highly processor-intensive operation. Complex layouts with tons of content can take much more time to render pixels to screen; the more complicated styles, the more time is taken for painting them. For WordPress page builders, the measure of speed comes with 2 aspects: Firstly, the speed of editing process (inside the builder): how fast the builder is loading, how fast the content modules are loaded and added, and sometimes, how fast the user loses patience staring at a preloader. Secondly, how long it takes to load the site page created with the builder. While the first aspect is more about providing a happy user experience, the second one is a significant SEO factor. The backend of the builder should be loaded maximum quickly and at least the basics of page speed rules and recommendations should be taken into account. For example, one useful strategy is performed by the developers of Elementor page builder: to speed up the loading time of content created with the builder, CSS generated by Elementor are saved to external minified CSS files, therefore CSS markup is processed much faster. A great way to lighten the source code and load the page faster. There are too many external factors that can worsen a website SEO. The page builder as a major plugin of many websites that use it should not be one of them. To understand which builder is really good at speed (loading live site pages), all of them should be tested in terms of a particular project or in the same testing environment and conditions. 5. Well-coded plugin Taking into account that builders oftentimes take a role of main content keepers, nobody wants to have a buggy overloaded plugin to host their content. Nobody wants to have a site that takes forever to load because of one plugin. That’s why an “extremely well-coded” plugin is becoming something vendors emphasis in their advertising more often. And this is what users pay attention to, even without being able to properly check whether it’s true. Still, many WordPress page builders produce a heavy markup or non-semantic code that is impossible to debug and takes much more time to load the page. Very often, this is an outcome of a super “can do everything” plugin. Ultimately, there is a room for working on valid code markup, improving caching system for rendering CSS and JavaScript, eliminating nested elements in the code, etc. It’s all about improving the user experience and SEO after all. To recap, as well as it’s significant to leverage coding standards for page builder plugins, builder creators may invest more time in educating users providing real examples on what they mean by a “well-coded product”. Or they can invite to discuss some critical topics and start some behind the scene talks. 6. Ready-to-use design layouts Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor It’s preferable to offer a couple of pre-built skins for particular needs – Services, About us, calls-to-action, or even niche-oriented designs like Gym classes, Dentist, Travel, etc. For people that don’t use a premium WordPress theme with dozens of ready-to-use niche templates included, such an option in a builder is a huge benefit. The work is done faster and there are fewer chances to create something ugly. prebuilt layouts Today, SiteOrigin Builder comes with numerous built-in thematic page layouts, BeaverBuilder offers approx 30 helpful layouts, Visual Composer is also templates-rich, Divi Builder provides a good choice of customizable layouts. Thrive Content Builder also offers one of the richest collection of multipurpose ready-to-use templates. Alternatively, there can be a variety of “bare” layouts that also help eliminate a need to build complex layouts manually (e.g. Conductor and MotoPress builders work this way so far). 7. Compatibility In order to be compatible with the latest WordPress core versions, the plugins should be regularly updated and continually improved. Backward compatibility should be also provided on the highest level. compatibility issues Redundant shortcodes can cause tough compatibility issues with many other plugins in use. Compatibility with major WordPress plugins is also highly preferable. The higher commitment to the high-standard product development, the higher user trust is. 8. Theme-agnostic plugin 5 Beaver Builder 5 SiteOrigin 5 Elementor 5 MotoPress 5 Visual Composer 5 Thrive Editor Or, transiting to user’s language, the plugin works with any theme. Namely, minimum buggy and maximum in harmony with the theme regardless of the theme used. Most WordPress page builders work quite good with different themes, but there is no universal builder. theme agnostic Some builder creators even go an extra mile to better fit this criterion: for example, the MotoPress guys developed a specific plugin to be fully compatible with Zerif Pro native theme styles, Elementor’s developers added compatibility with Zerif Pro and other popular themes, etc. Page builders like Divi or Fusion that became standalone ones also have to be more theme agnostic: while Divi showed a better potential of proper working with different themes, Fusion is still the best choice for its native Avada theme (however, it looks like the guys are working on making it fully theme agnostic). 9. Mobile-friendly, cross-browser compatible 5 Beaver Builder 5 SiteOrigin 5 Elementor 5 MotoPress 5 Visual Composer 5 Thrive Editor The time of “mobile-first theme” isn’t going anywhere. Pages that customers create with builders can look good on their screens, but there is no QA staff who can click on each button, check out portrait and landscape orientation for each device powered by iOS and Android, test it in each browser, etc. mobile friendly However, some of the builders come with built-in emulators to help users check right in the admin area how their pages look on different screens – a great direction to follow for others. Now, mostly all WordPress page builders are responsive thanks to usage of relative elements positioning. However, there is room for improvements as mobile technologies grow rapidly. 10. Extensions Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor A builder with tons of default options is good, but many developers and users are now aiming to fewer options that make a plugin more lightweight and user-friendly. Fewer people are chasing for a feature-rich monster, that is why “dozens of content modules” point did not get into the list. Alternatively, users wish to get more freedom in styling the objects without a need to add custom CSS. A powerful styling toolkit inside the builder can make you much more competitive. Clients are now more happy when their personal complex demands are met. So, extensions for a variety of needs and business niches are a great organic way to lure more prospects and make your product more professional. In the WordPress space, it’s also a very common pricing model that includes a free core (plugin itself) and paid addons. Additionally, shortcode-based plugins should be easily extensible with other shortcodes. 11. Pixel-perfect designs pixel perfect Since designers are a huge part of the target audience, pixel-perfect design is probably one of the most desirable option for them. Ensuring sharp and clean look of web pages should be a standard for builders. Nailing pixel-perfect interfaces is a great contribution to creating more profitable brand-building in comparison with muddy unclear designs. 12. Support Of course, a fast-acting support team at your back is usually a domain of premium WordPress page builders. Free ones may not give enough support attention. But in any case, a detailed documentation, forums and at least minimum human interaction should be expected. As for premium solutions, good support is essential, and probably just as much as the quality of the product itself. Conclusions Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor Frontend editing Straightforward and intuitive interface 5 4 5 5 5 5 Content retention after deactivation Speed of the editing process 5 5 5 4 4 4 Ready-to-use design layouts Theme-agnostic plugin 5 5 5 5 5 5 Mobile-friendly 5 5 5 5 5 5 Extensions VISIT VISIT VISIT VISIT VISIT VISIT That’s one small move among others towards some standardization of builders development. It can help users understand possible obstacles with builders and inspire providers to improve their products and, consequently, the entire WordPress ecosystem. While board games like Cubetto that “teach kids programming before they read” are going to rise up a new generation of tech-savvy people soon, today many users still find it hard to understand the basics of the WordPress logic. That’s why builder creators should try to educate their users not only on how to work with the plugin, but how to leverage their use to maximum advantage, share best practices of builders usage, show examples of how to create really attractive pages, etc. “Your site, your way” is the main WordPress motto for 2017 implying that users want to be more independent in terms of website customization. In the State of the Word, Matt Mullenweg placed great emphasis on the plans to architect the new WordPress editing experience. Many developers admit that they use WordPress page builders to give their clients more customization freedom. Projects that were complete builder holdouts, now experiment with them, stating that they help save tons of time for the dev team. Even these few facts make clear that importance of WordPress page builders is not a myth. And of course, page builder creators should start thinking about more cool product improvements today. Do you think that your plugin already meets all these criteria? Or, maybe you have one more important point to add to the list? It’s time to make your contribution. 12 things we need to see from #WordPress page builders in 2017 + who already gets it right CLICK TO TWEET About the author: Ann Taylor is a WordPress, open source, and folk music fan. Find her @mainoxa tweeting about all this and whatnot.