Wednesday, July 26, 2017

A WordPress Developer’s Thoughts after Trying Beaver Builder

This is not a paid, promotional, or affiliate-based article. Links are not affiliate links, this article was not produced in association or communication with Beaver Builder, and we paid full-price for the Standard version of the plugin.

A few weeks back, I wrote about Squarespace. Specifically, I wrote about how good Squarespace is getting: for very simple projects with very few custom feature needs, I found that Squarespace is probably a better choice than WordPress.

Since that article, I've put my money where my mouth is, building both a personal site and a client site on Squarespace. It's been the same experience I described in the article—worrying that Squarespace can't do what I need, and realizing, nine times out of ten, either that:

  • Squarespace actually can do it, or
  • I actually don't need it.
  • The experience of using a front-end page builder that I actually like has given me a very new perspective on web development.

    The experience of using a drag-and-drop front-end page builder that I actually like has given me a very new perspective on web development altogether. It's very hard to go back to static page layouts, feature-poor widgets, and HTML-heavy custom PHP templates to get the layouts I'm looking for.

    So this week, I decided to devote some time to testing what looks like the best similar WordPress offering: Beaver Builder.

    Why Beaver Builder?

    Beaver Builder is right now's best offering of a good page builder with community support.

    There are about a million WordPress page builders out there. Why this one?

    Well, most WordPress page builders are a pretty big step backwards in terms of WordPress's overall quality, so I'll start simply: Anything not recommended in Pippin Williamson's legendary review of WordPress page builders is out the window.

    That leaves three options:

  • Tailor,
  • Pootle Page Builder, and
  • Beaver Builder.
  • Within those choices, Beaver Builder appears to have, by a pretty large margin, the most developer support and general excitement behind it. There's a large and active Facebook community of developers committed to the tool, a set of actively maintained tutorial sites organized around it, and so on. Beaver Builder seems like the present's best hope of a good WordPress page builder with community support.

    What I Got Done in an Hour

    I approached this project pretty much like my Squarespace one: get the software, don't read the manual, and start playing with it.

    In this case, I had to pay $99 up-front for Beaver Builder Standard. I didn't record any of the set-up (installing the plugin, inputting the license key, etc.), all of which was standard and worked fine.

    Once I had the plugin installed and running, I ended up working for a bit over an hour. I recorded the process here:

    (As a hopefully unnecessary note: Because the video is lots of me figuring stuff out, don't go in expecting a guide, or a very organized look at the software. Don't watch the whole thing—you won't hurt my feelings.)

    The Project: Build a Landing Page

    We've got big things brewing here at WPShout, and fairly soon we're going to need some landing pages. This felt like the perfect test case for Beaver Builder. In my one hour, here's what I got built: https://wpshout.com/beaver-builder-landing/

    Here's a screenshot in case the above link changes at some point:

    beaver builder pro demo

    Click for full size

    How it Felt

    Overall, it felt good! Here are immediate thoughts from an hour-plus working with Beaver Builder:

    Stuff Got Done

    I would, and probably will, use Beaver Builder to create landing pages and other complex layouts in WordPress.

    Overall, Beaver Builder felt like it gave me new powers—and didn't make me feel like I was paying for them with massive losses in the technical quality or robustness of the site. Stuff got done, and quickly, and getting it done didn't make me wince very often.

    So the bottom line for me is that, as a developer who can code well enough to do anything I want in WordPress, I would, and probably will, use Beaver Builder to create landing pages and other complex layouts for WPShout when we need them.

    An Outstanding Solution for On-Page Widgets and Shortcodes

    Beaver Builder is now the obvious solution for putting widgets and shortcodes onto your pages wherever you want them.

    One of the things I'm most jazzed about is that Beaver Builder is now the obvious solution for putting widgets onto your pages wherever you want them. I've tried various "widgets on pages" solutions through the years, and you start to get into sadness with imposing columns, and then making the columns responsive, and it just gets ugly.

    Then there's shortcodes. They're designed to go in page content, but laying them out is no fun, either, and they don't render until you preview the page. Well, in Beaver Builder they render and you can drag them around like anything else. I tried this with a Google Forms plugin we use, and seeing that form render—and then duplicating it and putting two forms next to each other using drag-and-drop—was a minor revelation.

    What this means is that anything WordPress-plus-plugins can do—which is everything—can now be easily dropped into and dragged around on a page in a frontend-y way, as long as it registers a widget or a shortcode. I would say that this was my single clearest "mind blown" moment with Beaver Builder.

    carl sagan mind blown

    Beaver Builder vs. Squarespace and Hosted Builders

    A disclaimer here: as with any type of software, most hosted builders are bad. A friend recently tried out Wix, and her site (among many other problems) wasn't mobile responsive in any way—which is a bad look in 2017.

    But against the page builder of a good hosted solution (Squarespace being the one I've tried—there may be others), how does WordPress with Beaver Builder stack up? Here are my thoughts:

    Beaver Builder Integrates Less Tightly, but Still Pretty Well

    One of the natural advantages of a hosted solution is that everything was built, and is controlled, by the same developers. As a result, everything can integrate so tightly as to make things start to feel magical: for example, you drop a text block into place, and it becomes full-screen-wide if there's something next to it, or a narrow readable column if not.

    Beaver Builder, of course, does not have that luxury. However, given what is possible in a WordPress environment, the landing page I built feels maximally integrated with WPShout's existing styling, without me having to change much. Fonts were sensible families, sizes, and colors, columns behaved sensibly within the overall layout, and everything just looked good without me having to make special effort.

    Beaver Builder Can Be a Bit Clunky

    Overall, I'd describe Beaver Builder's user experience as "well-designed" and "functional." You get where you're going with a minimum of confusion and cursing, and you appreciate the good choices the designers have made, but words like "swooshy," "futuristic," and "instantaneous" don't come to mind. I wouldn't even notice this (all of WordPress is this way, for the most part), except that recent experiences with hosted builders have raised my internal bar.

    Slow at Times

    Beaver Builder reminded me of one thing I often don't like about the WordPress experience, which is a subtly slow and laggy editing flow. This manifested most often in loading spinners of about three seconds when I would open, close, or save different modules or views. That's barely enough time to notice consciously, but enough to weigh down the experience and make it feel "chorelike," rather than like pure creation (which is the feeling that hosted builders, at their best, sometimes give), in a way that's familiar from WordPress's admin area.

    We use quite performant SiteGround "GoGeek" hosting, so that's not the issue. Worse hosting would lead to worse results, naturally.

    Not Maximally Intuitive (but Pretty Good)

    Overall, Beaver Builder's interfaces aren't as slick as the editing flow on Squarespace. It feels more purpose-built and functional than like a swooshing magic machine.

    For example, I have "callout" sections with little icons over them, and I can't interact with the icons directly; I need to change them in the "Icons" tab of the callout interface.

    As another example, it can be rather painful to write custom CSS onto the page using Beaver Builder's "Tools > Layout CSS / JavaScript" feature. That feature is hard to navigate to, and sits on top of everything rather than to the side like the Customizer (it is draggable, though). It's also quite hard to use a browser inspector to inspect the DOM elements you'd like to style, because the act of inspecting tends to call up all kinds of other DOM elements related to Beaver Builder's functionality itself.

    In Summary

    Overall, what I'm calling "clunky" here is, I think, the inevitable result of Beaver Builder sitting inside an architecture it didn't build and can't fully control. I don't mean to imply that any other design decisions would have been feasible for Beaver Builder's architects to make—only that the resulting experience, for someone familiar with both WordPress and good hosted builders, can sometimes feel more like a well-thought-through, solidly implemented version of the present than a radical new future.

    Beaver Builder Does Empower WordPress Development

    We're far from turning the graphing calculator that is WordPress into the iPad-running-Angry-Birds that clients could use, for reasons that have nothing to do with page layouts.

    My biggest takeaway from using Beaver Builder is not "Great, we're now much better at competing with downmarket alternatives." With WordPress, you need hosting, a decent theme, probably FTP to set the theme up, smart plugin choices (plus lots of configuration) to do even simple things like contact forms, smart permalink structures, and a million other things.

    The WordPress marketplace as a whole is obviously moving toward integrated experiences that do all this for customers, but most of those experiences aren't good in one or more ways (they're built around bad themes, bad hosting, and so on). In sum, we're a long way from taking the graphing calculator that is WordPress and turning it into the iPad-running-Angry-Birds that it's easiest and most attractive for clients to play with in building their own sites—for reasons that have nothing to do with page layouts.

    Rather, my biggest takeaway from using Beaver Builder was simply, "This makes my job as a WordPress developer significantly better."

    Rather, my biggest takeaway from using Beaver Builder was simply, "This makes my job as a WordPress developer significantly better." Complex layouts are a problem that no well-built tool has done a good job of solving, and I believe Beaver Builder is doing it. That doesn't make WordPress the right choice for a person who wants to create a brochure site for her dog walking business and has $500 to spend: those days are probably over. But for the many kinds of projects that are best addressed with WordPress, Beaver Builder is a powerful new tool—for everything from creating fancy homepages to simply getting widgets onto pages where I want them—that I'm excited to use.

    Make WordPress Themes Good Again

    I really hope Beaver Builder and similar high-quality WordPress builders can start to impose sanity on the theme marketplace.

    One thing I really hope is that Beaver Builder (and similar high-quality WordPress page builders) can start to impose some degree of sanity on the theme marketplace.

    The WordPress plugin repository is a thing of beauty: voluminous free offerings mixing with occasional premium upgrades to endlessly extend and improve the solid base that WordPress provides. Next to it is the WordPress theme marketplace: a mostly jarring space marked by low average quality, endless and needless repetition, and flash-first commercialism.

    If the plugin repository is like a gleaming farmer's market with plentiful free samples, then the theme marketplace is a bit like a giant but spookily empty shopping mall with, for some reason, nine virtually identical outlets that sell only luxury socks and silk suspenders—all blaring Top 40 hits at competing volumes—but only a single shoe store.

    Plugin repo

    Theme marketplace

    There are way too many WordPress themes out there, and it's way too hard to find a good one.

    If you're not fond of the poetic language above, the direct version would be: There are way, way too many WordPress themes out there, and it's way, way too hard to find a good one.

    Themes duplicate each other endlessly—header section, three things you can click, portfolio section with stock images of people in suits staring into piercing whitish-blue light, and so on. And almost all themes make one or both of the same two mistakes:

  • They're overdesigned yet inflexible: they let you build a site that looks and works exactly like the theme demo, but nothing else.
  • They're stuffed full of features but terribly built: any site made on them becomes slow, shaky, and loaded down with technical debt.
  • Explaining the State of the Theme Marketplace: Consumer Demand

    The theme marketplace developed in response to consumers' wants.

    I don't blame anyone for the state of the theme marketplace: the theme marketplace developed in response to consumers' wants. Consumers want:

  • Something they can build themselves, with minimal help from an expensive professional—encouraging theme developers to ship huge bundles of user-facing features (such as proprietary builders), with quality, compatibility, and not-reinventing-the-wheel as distant concerns.
  • Something that looks good at purchase time—encouraging theme developers to prioritize a flashy, overdesigned theme demo over a sturdy, well-crafted foundation.
  • Something that has everything they need—encouraging developers to offer endlessly flexible "anything" themes that, as a result, are also generally fragile and slow.
  • How Beaver Builder Can Help

    If "endlessly flexible layouts and drag-and-drop access to every feature you want" is a property of a plugin, rather than of a theme, that frees themes up to return to simplicity and good construction.

    I believe Beaver Builder can help forge a path toward satisfying those same consumer wants, in a different way. If "endlessly flexible layouts and drag-and-drop access to every feature you want" is a property of a plugin, rather than of a theme, that frees themes up to return to simplicity and good construction.

    In other words, if Beaver Builder or similar tools gain traction, your theme won't need to ship with a "widgetized homepage" solution that is exactly however good and however flexible your developers happen to be. You, the theme developer, can focus on design—and on making the homepage and other templates themselves beautiful, performant, cleanly built, accessible, and so on—while leaving the job of filling the homepage with various types of complex layouts to a plugin-based builder that also respects quality. And that builder will have been under active development and community review for years, rather than being cobbled together in a closed environment by a small in-house team.

    Themes shouldn't be shipping custom-built, theme-specific ways to scramble their own layouts. Rather, they should be focused on beautiful design, fundamentally sound construction, and providing user-facing options only where a builder can't: outside the main page content flow. I hope that in the long term, Beaver Builder can incline the theme marketplace, or at least some part of it, in this direction—and, in the short term, can empower developers to choose from the existing sub-population of good, not-overbuilt themes, with confidence that they can still create the layouts their clients want.

    Whom Beaver Builder is For, and How to Think About the Changing Role of Developers

    I'll close this article with some reflections on whom Beaver Builder is for, whom Squarespace and similar solutions are for, and where those populations meet. My two cents are:

  • Beaver Builder makes developer-led projects better.
  • Squarespace makes consumer-led projects better.
  • WordPress Projects Still Need to Be Developer-Led

    I would not recommend that a non-developer attempt to set up a WordPress site using just Beaver Builder, a theme, and free time on the weekends.

    Again, I would not recommend that someone attempt to set up a WordPress site using just Beaver Builder, a theme, and free time on the weekends. That person will almost certainly:

  • Choose a badly built theme,
  • Choose really bad hosting,
  • Not know how to change things in WordPress, and so
  • Install dozens of plugins as fixes, and
  • Not know how to customize even Beaver Builder to look and behave exactly as he wants.
  • You still need a developer to set up a WordPress site, just as you always did. That developer's job just becomes easier and higher-quality with a non-awful WordPress page builder.

    And, again, WordPress is only the right solution for sites that actually do need custom attention from a developer. A site with a highly custom interactive events calendar would be a good example of something appropriate for WordPress, and Beaver Builder would be perfect if that site also needs interesting page layouts on the homepage or other pages (or widgets on pages anywhere).

    Hosted Builder Projects Can Benefit Greatly from Developers

    A dead-simple site is, increasingly, better handled by Squarespace and similar services. If the need is "Site that says that I do house cleaning plus testimonials and a contact form," WordPress is, increasingly, overkill.

    That doesn't mean that developers are obsolete. I argued, and I now feel very strongly from experience, that a developer can vastly improve consumer-led projects on platforms like Squarespace, because a developer's intuition carries over into those platforms as well:

  • How to Google for specific knowledge.
  • How to interact with sensible design choices like twelve-column grids.
  • How to write custom CSS when needed.
  • How to impose a consistent design across different layouts and content types.
  • Developers and Clients are Starting to Use Similar Tools

    Way back when, anyone who developed for the web used tools that only they understood, and everybody else just consumed the result.

    Then tools like WordPress started to make it seem like you could build a website, with no technical knowledge. This wasn't actually true—a WordPress site you set up yourself will be bad in fifty ways, like if you tried to build your own motorcycle out of spare parts—but many of the tools your developer used (like the Widgets page in the admin) you could also use, and you were supposed to know almost everything they knew about actually writing post and content, filling it with images, publishing it, and so on.

    More recently, the overlap between "tools a developer uses" and "tools the client uses" is continuing to grow. Squarespace does its best to offer the promise of developer-less websites; and, on the other side of the fence, Beaver Builder is a very accessible tool that, in my assessment, should still be used primarily by developers to make what they deliver to clients easier and better.

    …But Developers are Still Really Helpful

    So it is the case that more and more of a developer's daily work is departing from the high mountaintop of opaque programming languages, and moving toward drag-and-drop interfaces and the front end.

    But in both WordPress and hosted builders, developers can still add tremendous value, because all client-facing tools are limited—if you need something specific enough, the only way is "the hard way"—and because developers have intuitions that lead projects to much better results, even with more accessible tools.

    In Conclusion

    I think Beaver Builder is really good, and I'll definitely be using it on WPShout and elsewhere. It takes WordPress, a tool for website creation that requires a developer, and moves that tool closer to being easy to work with for both developers and users. That doesn't turn WordPress into (or put it on even footing with) a hosted builder solution, which are often premised on not needing a developer. Rather, it simply makes WordPress itself a better and stronger product.

    Thanks for reading!

    Image credit: Andy Arthur, Jonathan Rhodes, Bobby P.

    Related


    Source: A WordPress Developer's Thoughts after Trying Beaver Builder

    No comments:

    Post a Comment