pagebuildPagebuild allows non technical users to build websites very quickly and easily. It was built on top of Drupal, with the idea behind it being to provide an editing interface that is so simple, even an adult could use it. This is a explanation of what we did and how we went about doing it (and why).

Motivation

Spoon Media has been building Drupal sites for the last 6 years. We generally do mid to large size projects and pretty quickly we noticed how often we were turning away business from companies with modest budgets. That wasn't great for them, because most low budget web solutions are pretty ordinary and it also meant we were sending small jobs elsewhere. This was the main motivation for building Pagebuild - we wanted to let small business get a great website at a inexpensive price but still retain a high standard of product.

High Level Architecture

Pagebuild as a product consists of two main systems which we've dubbed front-end and back-end.

The front-end is the software that allows customers to edit their Pagebuild site. This consists of a series of custom Drupal modules and a whole lot of JavaScript that provides the easy to use WYSIWYG experience.

The back-end is the software that allows customers to signup, create and manage their websites. Aegir is used to provision and manage sites and custom Drupal modules provide a simple customer interface to the site provisioning and management process, as well as the standard account and billing settings.

Both the front-end and back-end are powered by their own Aegir platforms.

Of course we use a bunch of great Drupal community modules across both systems. More on that follows.

Front-end

In order to provide an incredibly simple site editing interface it was clear from the beginning that the bulk of the work on the front-end would involve using JavaScript to implement the desired UX.

jQuery, jQuery UI and a series of jQuery plugins are used extensively.

I'll explain the motivations and provide some light implementation details for selected features.

Editing

It was very important for us that the editor was truly WYSIWYG. It wasn't enough that a heading was a heading and bolded text was bold. We needed headings to be styled exactly the same whether the user is editing a content area or viewing it. As a result we threw out the idea of using IFrame based WYSIWYG editors such as CKEditor or TinyMCE.

Another requirement was that users should be able to freely drag and drop images from our Media Manager into the content area. Doing this with an IFrame based editor was not possible.

After much back and forth we settled on Twoism's reviser as the base for the WYSIWYG editor. I say base, as significant Pagebuild specific changes were made in order to get it work just so.

The result is that we are able to provide a true WYSIWYG editing experience that is completely tailored to the Pagebuild Way.

One of coolest features of Pagebuild's editing would have to be the ability to drag images from the Media Manager toolbar and drop them into the content area at a position that makes sense visually. Unlike other drag and drop solutions in web WYSIWYGs, Pagebuild won't allow you drop an image in the middle of a sentence. With jQuery UI's sortable plugin we are able to force the image to be moved around the content area and dropped in sensible drop zones.

Blocks and regions

Of course it's not enough for users to be able to edit the main content area. In order to allow the user to create unique and flexible page layouts we leverage Drupal's regions and blocks to make this happen.

When editing a page regions can be shown or hidden, and blocks can be added to regions. This all happens via AJAX, and creating/editing/deleting blocks happens on the page itself to prevent interrupting the editing experience. As an added bonus existing blocks can be dragged from one region to another.

Themes

We provide a number of free themes for customers to choose from. All Pagebuild themes are Zen subthemes. On top of being a great base for our themes it was required in order for our JavaScript to work, as we need all DOM classes and IDs to be consistent across themes.

When a user selects a theme from the Switch theme toolbar we simply set that theme to be the default for all users, and make sure the block visibility remains the same.

I'll talk more about how themes are put together a below.

Back-end

Where the front-end development was largely JavaScript backed up by Drupal modules to make the magic happen, the back-end is true to its name in being largely the work of Aegir and custom Drupal modules.

Provisioning

From a customer's perspective the Pagebuild adventure begins with sign-up. Here we capture the customer's details, process the payment and provision the site.

We use Aegir to provision new sites automagically when the customer has finished signing up. Aegir, being as wonderful as it is, makes this incredibly simple. All you need to do is create a node of type site, and it will be added to Aegir's task queue.

After sign-up the customer is automatically logged in and presented with the Pagebuild Dashboard. Once the site has been provisioned (which usually happens inside of 60 seconds) they can login to it and start editing right away.

In order to implement a Single Sign On the back-end acts as an OpenID provider. Our custom Drupal install profile adds an entry into the authmap table allowing them to login to their site without having to re-enter their login details.

The custom Drupal install profile on the front-end communicates with the back-end database to setup themes, roles, filters, pathauto and imagecache settings, amongst other things.

Once a customer has signed up they can add new sites to their subscription with a simple single page form.

Domain settings

When a customer first signs up they are asked to enter a subdomain for their website. Initially the site is provisioned as example.pagebuild.net.

Once the site is provisioned though, the customer has the option to use any domain of their choosing for their site.

Again Aegir makes this very simple. When the customer submits the form we check that the domain they have specified points to our IP address. This prevents the site from being unreachable if the A record doesn't match. Once we've checked the A record points to the correct IP address we create a migrate task in Aegir, which goes off and renames the site.

Thanks Aegir!

Theme editor

Customers are able to choose from a set of free themes or they can make their own theme.

Using one of our themes as a starting point, the user can alter every aspect of the design from their browser. They can then save their theme with a new name, effectively forking it from the pre built theme we provided. This concept is used in both Drupal Gardens and in the Sweaver module, however both of those implementations allow so much freedom as to be confusing to a non technical user. We have taken the concept and made it harder to do silly things to your theme by restricting what HTML elements you can actually modify. Whilst this limits the power of the theme editor, on the whole it results in a better theme when used by a novice.

Custom themes

While we provide free themes for customers to use on their site, we also provide them with a service whereby they can purchase a customised design. This is not automated and involves the customer talking with a designer to get a result.

In order to greatly simplify the process of creating themes for Pagebuild we implemented a simple templating language that allows designers to write minimal HTML and as much CSS as they require to get the look right. Each theme only requires a single theme template. This is about all it needs to be:

[START]
[REGION:header]
[NAVIGATION]
<!-- #masthead, #masthead-inner -->
<div id="masthead">
<div id="masthead-inner" class="clear-block">
[LOGO]
[SITENAME]
</div>
</div>
<!-- /#masthead-inner, /#masthead-->
<!-- #main, #main-inner -->
<div id="main">
<div id="main-inner" class="clear-block">
[BREADCRUMB]
<!-- #content, #content-inner -->
<div id="content">
<div id="content-inner">
[REGION:top]
[PAGENAME]
[CONTENT]
[REGION:bottom]
</div>
</div>
<!-- /#content-inner, /#content-->
[REGION:left]
[REGION:right]
</div>
</div>
<!-- /#main-inner, /#main-->
[REGION:footer]
[END]

Using the token module we replace the Pagebuild theme tags with the Zen markup required to make sure the theme works with the Pagebuild editor.

Designers upload the template file, a CSS file and whatever images are required and a complete Zen subtheme is automatically generated and copied into sites/all/themes ready for use.

The permissions on individual theme nodes ensures the theme is available only to the customer who purchased it.

Custom themes are currently only available to designers we have an existing relationship with. In the future we plan to open this feature up to more designers. Further down the track we will open the feature to customers themselves.

Subscriptions

Initially we tried using Ubercart, uc_recurring and various payment modules for the checkout and subscription payments. It turned out this added an unnecessary layer of complexity to the system. The Ubercart product wasn't meshing well with the existing Aegir and Pagebuild CCK types. Eventually we replaced the whole thing with a simpler custom built payment and subscription module.

The uc_hosting module to integrate Aegir and Ubercart looks promising, but we needed to move quickly, and rolling our own system allowed us to do that. Another benefit is that the payment system is tightly integrated with the rest of the Pagebuild system. This allowed us to do exactly what we need to do without working around the assumptions inherent in Ubercart, uc_recurring and the payment modules.

Main challenges

Internet Explorer

The the first half of development we aimed to support IE7+ for page editing. After considerable effort we decided to ditch native IE support, and instead create a simple UX for the customer to install Google Chrome Frame.

We are really pushing the limit of WebKit and Gecko browsers when it comes to building WYSIWYGs, and we decided that a superior experience was preferable to a lowest-common-denominator one.

The UX we provide for customers to install GCF is as simple as possible, and we doubt it will deter customers.

Of course, GCF is only required for customers when editing their site. We support IE6+ as well as the proper browsers when viewing Pagebuild sites.

Content editable

Instead of using an IFrame based WYSIWYG editor we decided to use a feature of some browsers called content editable.

While we believe this provides a superior editing experience, the cost is in the fact that it is not uniformly supported across all browsers. Worse, some implementations are particularly bad. Anecdote alert: In order to fix a bug caused by Firefox's implementation of document.execCommand we were forced to build a debug binary of Firefox and step through the rendering code in gdb.

Despite the additional effort required in rolling our own WYSIWYG editor, we are very happy with the experience we've managed to produce.

Outro

So that is about it. If you want to see it in action you can sign up for a free trial at https://my.pagebuild.net/signup/demo or take a look at some of the live sites built with Pagebuild:

We are really interested to hear what people think about it so please leave us a comment and we will reply. We are constantly developing the product (we roll a new release weekly) and so genuine feedback is really helpful and may even end up becoming part of the product.

Comments

Wonderful Job done, Power of Drupal is published only when the sites are built like this. Great Job!
All the Best!

-Jk

Glad to have aided in this effort by way of Aegir. I've played with the pagebuild demo a couple times and been quite impressed.

Well done!

Thanks to Mig and all the other aegir guys, especially Adrian and Antoine, who have spent countless hours making Aegir so amazing.

------------------------------
Alex Cochrane
Spoon | Pagebuild

well done. congrats to pagebuild team for pulling this through :)

Out of curiosity, how does the pagebuilder work with IE9 compared to Webkit, or Gecko?

Microsoft's PR department has been on a tear heralding IE9's standard compliance and javascript engine. What are your developer's experiences??

Congrats on the launch by the way! Looks beautiful!

Currently IE9 doesn't work fully but it would be much easier to make it work than all previous versions. There is still some browser specific code even for FF/Webkit so for now IE9 still needs to run chrome frame. Once IE9 adoption increases we will start looking seriously at supporting it in its native state.

The reality is that 95% of our users run Webkit or Chrome. I know the stats say IE is still a major player but for us it seems to becoming less and less significant.

------------------------------
Alex Cochrane
Spoon | Pagebuild

Just created a demo account, very impressive... great to see what can be done with Drupal

Thanks :)

------------------------------
Alex Cochrane
Spoon | Pagebuild

very impressive job ! well done !

Any plan to port it to D7 ? Is Aegir already up for D7 ?

Aegir already supports d7. We will probably port it at some stage but for now we are focusing on new features like forms and video.

------------------------------
Alex Cochrane
Spoon | Pagebuild

Thanks for sharing, but it seems that there is a ugly bug in the content editor. Using Opera 11.10 the selector jumps to what seems like random locations when you start to type, making editing impossible/very difficult.

Thanks Haarek, that is quite possible as we haven't done much testing with Opera. Will have a look into it.

------------------------------
Alex Cochrane
Spoon | Pagebuild

Just wondering if you support exporting of sites built in Pagebuild (to host elsewhere, like Drupal Gardens does)?

At the moment we can't do it automatically but we can do it manually for people. We are going to allow automatic expoting via the dashboard in the near future.

------------------------------
Alex Cochrane
Spoon | Pagebuild

Great work. Thanks for sharing !!!

Cheers,
R.

Just signed up for a demo site and I am very impressed! Very simple and clean, a great solution for quickly building easily editable, "brochure" stlye sites.. I like this alot

The front end looks great, but I really want to stay on my own server. Is it possible to just get the front end without the back end?

Me too

Thanks for checking it out. The Pagebuild modules will never be sold as a product but we are considering open sourcing them when the time is right.

------------------------------
Alex Cochrane
Spoon | Pagebuild

This project fills a gap. I hope your solutions will be available on Drupal.org/projects ;)
Nice work, I wish you good luck and a growing range of customers.

I had been lusting for the very cool SquareSpace implementation of Tinymce until I saw your post and gave pagebuild a try...

You have built the best and most intuitive Wysiwyg with Image editing/insertion that I've ever seen! Kudos to you!

I only wish it were available here... you would push the Drupal project into another dimension!

Elena Reeves-Walker
Tchopshop Media
tchopshop.com

I like the WYSIWYG here. Lean, mean, fast, and generally spot on if not always accurate to whats been typed.

Is there any chance of that code being contributed back as a new WYSIWYG module? I would give up CKEditor WYSIWYG in a heartbeat for something more intuitive.

Thanks for the kind words. As I mentioned before, it is certainly on the cards but it is not going to happen immediately.

------------------------------
Alex Cochrane
Spoon | Pagebuild

I have previously attempted to create a module based on the reviser code mentioned in the post.

The module is not really complete but its a start:
http://drupal.org/project/reviser

It's so easy to build a website with this product.

Great to know Drupal has this ability.

Maybe you will consider a free package like Drupal Gardens do?
I guess that will helps you to get more potential clients.

I see no heaven, yet no hell, only a vivid world in my eyes.

Thanks. If we had some of those sweet sweet VC dollars we might give away sites for free, but we need to pay the bills I am afraid :P

------------------------------
Alex Cochrane
Spoon | Pagebuild

Thank you for the detailed information. I just got to know about reviser and aegir from this post.

Glad to have piqued your interest.

------------------------------
Alex Cochrane
Spoon | Pagebuild

very, very cool guys.

i'm always breaking my head on www.khayali.co.za

Hi,

this looks great! Is there a module to implement this drag & drop images wysiwyg functionality in other drupal sites? If not, do you write a module?

There currently isn't a publicly available module. That was one of the more complicated things to get working and it would be very hard/impossible to abstract out to work with 3rd party WYSIWYGs due to their use of iframes.

------------------------------
Alex Cochrane
Spoon | Pagebuild

great website, I cann't believe drupal can do that before

Will you share, how the username.domain.com is achieved ?

single database for all users ?

Is used domain module ?

-SVN

svnindia

To be honest, I am not entirely sure what your question is.

Provisioning a site to xxxx.example.com is simply a matter of having a wildcard DNS entry for all subdomains of a given domain resolve to your webserver. Then all you do is create a site called foo.example.com on the webserver and it resolves.

Each site has its own database like a normal Drupal site would and the domain module was not used. Hope that answers your questions.

------------------------------
Alex Cochrane
Spoon | Pagebuild

You don't by any chance have plans to develop another 'reseller' layer on top of the front-end and backend?

Yes this is in the pipeline. Feel free to share any thoughts on what you would like to see as a white label reseller.

------------------------------
Alex Cochrane
Spoon | Pagebuild

The completion is tough for page builder type sites it seems everyone is after the SOHO business these days.

The things I would look for is an easy way to pick and choose mods known to work together and play nice.
Most people want to be able to push tweets and blogs out. They don't want to be webmasters but they want something more than a static page offered by most other hosting services.

The social integration thing is a concern as FB is changing their SDKs and platform.

I am not sure of the price point you have set. It seems a little high on the surface for the average person. If someone goes to Godaddy to buy a domain, how you going to get them to come back? You are going to need some better marketing or work with other companies that have established client relationships to push this thing out.

Nice service.. but why people should pay 30$/month when they can have something similar for free using google sites or one of the many alternatives? What is distinctive of your service that justify the 30 bucks ??

Its better than Google sites :)

------------------------------
Alex Cochrane
Spoon | Pagebuild

I can't even imagine how to build a site with drupal for site builder...

Wow, just give it a try, and I must say... this is amazing! you're inspired me.
Well done sir, well done.

Amazing work. Very well done!!

drupal sucks. No really.

It looks like a very clean and neat setup. Would love to get the script on my site cleaned up to look as neat.

Thanks for the update development tools ! Looks nice. www.embeddedtools.net

Amazing concept and flawless execution

This is a beautifull design and work:
www.whitehouse.gov

I just wonder why too many bugs in the validation?
http://validator.w3.org/unicorn/check?ucn_uri=www.whitehouse.gov%2F&ucn_...

I want to know when users pay $30 monthly, they can host any website with any amount of traffic on your servers? I mean is there any limitations for traffic and loads of websites use your services?

I love Drupal CMS

How many developers are in the project ? Great job! I like the your website .

An Iranian version of this service is available, called Online4Iran.

Thanks a lot for this. Wanted this version badly

If i understood it true, you have some design options using Drag & drop and your members design their website using them. And now i want to you why do you ask them $30 monthly? Do you offer hosting services to them with this monthly price to them too? What are you other services to your customers for this monthly price?

Doubt is the father of invention..... Hubmesh | download converter

Yes it is a hosted service. The price covers the cost of hosting.

------------------------------
Alex Cochrane
Spoon | Pagebuild

Hi,
Thanks for all your posts. My question is, why does it take about 60secs for a site to be created when a user sing up?
Do you create the site manually with Aegir?

Hi Eddie,

We do use Aegir but it is all automated. It shouldn't take that long to provision your site - the average time to provision is about 4 seconds.

------------------------------
Alex Cochrane
Spoon | Pagebuild

Thanks for posting this detailed write up - had a quick play and the the finished product looks super polished. well done all.

Drupal developers www.lightflows.co.uk

Sometimes Drupal is not a good choice. this is one of those case imho. Drupal is way too messy for such thing.