MANIFESTO

Weather forecast for the next 24 hours:
Plenty of Sunshine

Wind: 7km/h SSE; Ther: 21°C; Hum: 82%

Let's face it:


Building great web pages is usually not a walk in the park.
planet World - Thursday August 30, 2650

Why LiveCanvas?

by Jeff

Whether you are a junior webmaster or a seasoned full-stack developer, you've surely heard these lines:

  1. Custom coding by hand your themes assures maximum power, flexibility and optimization if you're a pro developer, but can be a slow and painful process.
  2. As a quicker alternative, using page builders makes it faster but has its drawbacks. They usually spit a mixed soup of DIVs which of course is sub-optimal in terms of SEO, speed, and code maintainability. Lots of black boxes here, and no easy way out.
  3. On another side WordPress, if used with the wrong themes and plugins, can turn from being a good friend into a dog-slow nightmare. The much-abused "piling plugins on plugins" approach to web design results in a unmaintainable, poor performance website.

Unfortunately, most people will agree: there's quite a lot of truth in these sentences.

So, here is our challenge:

Can we still develop fast, powerful websites using a mixed approach, bringing the best of both worlds?

Let's try to focus on this question and propose a solution.

The Problem

Page Builders suck
There's no perfect, "one-fits-all" approach to page creation on the web

They bring to the table their own dose of:

  • Customer lock-in: once a page is built, you're tied to the plugin.
  • Inferior performance - with a "one fits all", bloated approach.
  • Lack of freedom: They force your HTML code to be in a certain way.

....yet the opposite approach is still not the best....

Custom coding sucks too.

Especially if you're a one-man band.
  • Requires you to be an always careful,
    top-skilled developer.
  • it's a slow, error-prone process.
  • Makes you focus more on the tool and
    less on the message that you need to deliver.

Our Solution. LiveCanvas, Pure HTML page builder.

HTML5, WordPress and Bootstrap... Like you never experienced before!
LiveCanvas is a creative powerhouse, which allows you to quickly craft and refine HTML code - using readymade, pure Bootstrap 5-based blocks.

You can also define and reuse your own custom HTML blocks too - using some unique HTML5 attributes to make text areas editable.

It comes as a convenient, zero configuration WordPress plugin, with a minimal footprint. It's less than 150k gzipped!

But an editor is not enough. You need a complete, stable foundation for your next successful Web project.

A top performing stack:

LiveCanvas + picostrap + Vanilla WordPress = High performance websites


The LiveCanvas plugin is optimized to work with CustomStrap: a no-compromise, top performing, solid, open-source barebones Theme.

CustomStrap is a lean child theme of UnderStrap, the most starred Bootstrap 4 based WordPress starter theme on GitHub.

A rock solid foundation, easy to hack and extend.

Using this combination you'll get a speed that feels like you've installed that caching plugin - but you haven't.

[By the way, LiveCanvas can easily work with any other BootStrap 4, standards compliant Wp Theme, but for best results and performance guarantee, we really recommend CustomStrap or UnderStrap is supported at the moment]

Top Ten reasons to love LiveCanvas:

LOVE, Love, LOVE
  1. You're always in control of what happens 
  2. It allows you to steal HTML stuff from CodePen or any tutorial, and try it into your page.
  3. Easy to get started
  4. Creates FAST web pages
  5. You can always view and refine the HTML code, of the whole page, or of single elements
  6. Preview on all responsive breakpoints while working
  7. Automatic code indent
  8. Automatic fixing of broken DIVs / elements when editing blocks
  9. Uses WordPress as a backend, leveraging the standard revisions history for maximum safety
  10. No vendor lock-in: keep things inside WordPress, or publish static HTML via FTP, or grab the code and do whatever you want

The Story of LiveCanvas

Page Builders suck

Building great websites is not easy. Not even in 2019. And if you've been told the opposite, well, you've been told a big fat lie.

What most site-building products say is not really false advertising - technically, anybody can "make a site" - but this just leads to developing a completely wrong mentality about the task itself.

Building a site - that's easy. But doing it "right" - it is not. And why should anyone care? Well, to get some decent business results, be it in any kind of niche, you *generally* NEED to "do it right".

The bitter truth is that experience, knowledge, and the ability to code at least some HTML will surely be useful for the adventure.So webmasters, designers, developers, rejoice! There's none of you risking your job - even in the era of "one click" website builders that haunt us on Youtube ads.

[MY STORY] I've been working for some good fifteen years wearing the various hats of webmastering - and spent the last ten mostly developing and supporting some WordPress themes and plugins. This gave me the opportunity to have a look at literally hundreds of wp-admin panels of different people - witnessing what the average joe actually does with WordPress - and which kind of disaster-choices are often made.

<DISCLAIMER> Before digging into this, let me say that **I do absolutely love WordPress**. I've been using it since 2005 and version 2.0 - I think it's an immensely valuable tool to do a lot of things. It's of course the king for blogging, but works incredibly well for most kind of sites - and even eCommerce as well, albeit with some limitations.

It's almost unlimited theme and plugin ecosystem is a huge bonus - until you realize - well, there's a lot of great things, and loads of crap as well: you need to accurately choose what to install. As in both electronics and software, keeping it simple is a golden rule to minimize faults.

As a cat who can code a bit, I've personally used WordPress for many projects mostly as a framework, a vanilla install with 2-5 well super well-known plugins, and then coding from scratch one or more plugins to handle the custom logics of the project - if any. Following this way of working, I never had an issue upgrading the WordPress core, which I always do, or the plugins - and I've seen that the performance while browsing the site or the back-end is generally great on any decent host.

</DISCLAIMER>

[THE PROBLEM] So which are the most significant horrifying views that I've been seeing over and over? What I really hated is when I saw people using this approach of "piling" some 20+ plugins, a theme with 200K settings AND a site builder - to actually do a one-page site for their small business - a case where almost pure static HTML coding would be fully sufficient. Loads of unnecessary complexity, to achieve a poor result - which most of the time was a slow, low performance website that took ages to load on mobile.It almost felt like a pyramid of plastic bottles on a beach to me - the effects of an unruled consumerism of plugins.

It scared me to death when I had to debug a problem on these "useless monster sites" - it can take a lot to understand from where any problem arises - and it feels like curing the symptom and not the problem. When this was not the problem, and a site builder plugin/theme with a reasonable number of plugins was used, there was another thing bugging me. Coming from an SEO background, I just couldn't ignore that. The resulting HTML markup.Why does every single page builder out there have to spit ten nested DIVs for everything?There has to be a place in hell for such a thing.

[IN A NUTSHELL]

Page builders have thought the people that they can do everything without coding, but they didn't tell them the cost of this. So, can we change things?As a webmaster I was feeling there was a kind of void between bloated page builders and the classic bare code editors.

Ideally, can't we have a tool to make the Website Developing process: * fun,* flexible,* safe for newbies,* ...but uber-hackable for guys who can talk code? Somehow, I imagined a tool that would allow quick page building, via an easy visual interface based on direct manipulation - but wouldn't "assume" that I cannot code. A tool that would not give the "handcuffs" sensation that a developer feels while using visual page builders.

In my spare time, I started developing some proof-of-concept prototypes exploring the possibility of developing a page building platform which would be capable to ease the webpage creation and editing - but helping achieve full control on the generated markup.Kinda like a page builder for people who can code HTML - but want to save time.In another words, an automated HTML code writer somehow.

I didn't know where I was going, but I strongly felt the journey could be useful. After some years of experimentation, my conclusion was that it was perfectly doable, yet maybe a too small niche to appeal the big dogs.

And then, brick after brick, I built a plugin, LiveCanvas, "with a little help of my friends".

[TECH CHOICES]

Basically, I wanted LiveCanvas to be:

  • A way to build super fast websites, that can live inside WordPress or can be published as a static HTML site

  • A visual builder allowing you to reuse well tested, responsive components, and craft your own ones

  • A live HTML code editor making possible to easily refine ALL the visually - generated code - and would keep the page HTML as the only "source of truth"

  • A plugin that behaves well with WordPress, leaving the standard header and footer to the Theme, but allowing edge-to-edge crafting of the pages - while leaving custom post types and posts / articles untouched

  • A really lightweight plugin, which would NOT add *ANY* JS or CSS file to the site at all

  • A tool that would not set any limit whatsoever - useful for crafting small and huge websites

  • An inspirational tool, with embedded HTML "readymades" for the most popular needs, clip art vectorial stock, Unsplash image search, and a bit of everything you need

  • A place where I actually would love to build web pages, and have fun while using it!

To reach this goals, it took some time to find the right choices technically speaking.One of the main questions was which CSS framework to use; by the way, dismantling some popular WordPress page builders, I discovered they load their extra CSS framework, which is added to the theme. So you end up having a site which uses two different grid systems - one for the theme structure and one for the builder content. And this is just the tip of the iceberg, don't get me started....

I wanted to have a lean, solid, open source stack to "partner" with LiveCanvas - to have a repeatable, good and quick way to get started building a new site and guarantee good performance, minimizing bloat.I explored and tested loads of CSS frameworks, philosophies and starter themes.

I decided to go for Bootstrap 4 as a CSS framework. I think it's the best compromise today in order to have a really battle-tested tool to craft a perfectly responsive site - especially for its large user base and community - something front-end developers would really appreciate.

In order to "merge" WordPress and Bootstrap, I needed a good starter theme. I settled for UnderStrap - which has the most love on GitHub when looking for Bootstrap 4 WordPress Themes - and it's really easy to setup. An interesting alternative would have been Roots.io's Sage, but it's too complicated to get started using it for a newbie. I wanted something simple. Then we'll support the more complicated stuff. That's how I see it. So, on your new vanilla WordPress install, just install the LiveCanvas plugin. It will help you automatically install UnderStrap. A couple clicks and boom, you're ready to roll.

This still gives total styling freedom - because you can optionally recompile Bootstrap inside UnderStrap and visually tweak the starter theme as you want - UnderStrap is made on purpose - but for the lazy folks I've built a free UnderStrap child theme - packed with 30+ pre-made Bootstrap styles, and some goodies to make UnderStrap a dream to work with - but staying lean and pure.

[FAST FORWARD] Fast forwarding to today, LiveCanvas has is now a product in which a bunch of designers from the UK, Germany, Australia, Spain, France have put their input in making it better everyday. I'll be forever grateful to them - actually seeing the sites they built with LiveCanvas gave me shivers more than one time. LiveCanvas is fully ready to use on production sites - and it's of course running his own site too by the way. And it's fun to work with, I promise!

Jeff @ dopewp.com (now LiveCanvas.com)