Google Sites: Website Builder – The Real OpenSourcery

A video demo of using Google's new Sites Builder

Model for Live Editing of a Web Page

All of the Website Builders tend to follow a consistent layout of their Page Design tools. First and foremost, users get to see a live Web Page Canvas where all their edits are shown live.– so as users drag and drop new text blocks or images onto their page or change its styling, the design decisions are immediately displayed on the page – truly WYSIWYG – What You See Is What You Get – web page development. If you look at the Google Sites demo above, Google has followed the WebSite Builder model for Live Editing of a Web Page.

Templates Drive Website Building Today

There is a reason WordPress is used on 33% of the top 10 million websites in the World – the WordPress PageBuilders and Themes lead with their templating systems. These templates deliver a complete website with predesigned Home, About, Sevices, Blog and Contact pages among the most frequently used. Clients then discard or modify the pages tas they see fit. Time after time, I have seen perusing through templates help clients to hone in a)on the look and style of their website and b)decide which are the essential functional pages to offer. .
Here is a sample of the Divi templates:Note Divi provide over 300 complete website layouts which fit a broad range of design categories. For some clients the Divi Web site templates is the way to go to get close to the functional features, design styles, and web layouts they want to use.[Note all of the major WordPress Pagebuilders like Beaver Builder, Elementor, Site Origin, Themify Builder, Visual Composer etc have strong website templates packs].

Now combine the Website packs with a strong set of page templates:Add to this the ability to save your own templates including duplicating and editing the pages and sections. These modifiable templates is what real energizes WordPress Design and Development. No wonder that Google Sites intends to have an equivalent system by 2020.

Best Website Building Wizard – Wix ADI:Artificial Design Intelligence.

Many of the Website Builders have a Wizard for designing the overall look and style of the website. Wix has the best Wizard call ADI – Artificial Design Intelligence. ADI is a 6-8 step process with some nice features:

-First you can skip many of the ADI steps or return later and change your initial choice. In the process Wix helps you to decide what are essential features for your evolving Website Design:
Wix goes out onto the Web and sees if it can find any already existing websites using your name or location info. Wix promises that ADI will allow you to review and edit many of your choices:
This freedom of choice is clearly seen when users get to tryout different Theme styling designs. Google Sites imitates this key step in its own Website Design starting steps.

Google Sites is a new Website Builder arriving at the end of the wave of “No Coding Required” Web PageBuilders that have appeared in the past 5-7 years with tools like SquareSpace, Wix. Visual Composer and Gutenberg Blocks.

Google Sites is the new replacement for the Jotspot => Classic Sites tool used to build G Suite empowered Websites. Classic Sites has been a HTML+CSS+JavaScript driven Website Builder. But this did not fit into the new direction required by a G Suite Website Builder:

Mobile responsive ready
Able to use G Suite collaborative development and multi-view features
Stable and fast tool
Easy to use with “no coding required”

So as Google developers have worked on migrating Classic Sites users to the New Sites, they have clearly borrowed some common features of the latest crop of Website Builder tools – clearly drag and drop live editing with “No coding Required” is paramount:

“Truly, No Coding Allowed”. For example, Google Sites has banished HTML, CSS, PHP, JavaScript, SQL and any other visible coding.
Drag and Drop layout of design widgets like text blocks, image galleries, buttons, etc pulled from a sidebar and positioned onto the evolving live view of the Web Page;
Use of a Bootstrap grid system which delivers responsive web page designs that fit and look good on desktop, tablet and mobile phone devices [but a wide variation on how well Web Builders support device specific styling – Divi and Elementor lead the current WebSite Builders].;
Inline editing and styling of text anywhere on a web page;
Inline resizing, spacing & repositioning of images, text blocks and other objects/widgets anywhere on a web page [ Okay, all Web builders are moving towards this goal with Wix and Elementor the current leaders];
Immediate styling available for any highlighted text, widget or object on the web page [the biggest deficit in both Gutenberg blocks and Google Sites Builder];
When Website Builders are combined with MultiLayout Themes, the Header – Content Area – Sidebar – Footer design mold has been broken. Now every page can have a unique layout with, for example, menus on a slide-in sidebar, headers in the middle of the page, popup banner ads, and no footer or a complete sitemap on the footer;
Driving this diversity of page layouts, is the new templating systems available in the best Website Builders.
1. Complete multi-page website templates;
2. Single web page templates;
3. Sections of a web page templates;
4. bility to load single page and
5. A Central Template repository where templates can be duplicated, edited, deleted and exported/imported into other websites;
6. Control of edits to templates so changes either apply globally to all template users or to designated users of the template;
7. Access control on usage of a repository with different roles and privileges.

Clearly these rules of the WebSite Development Road are a danting set of capabilities as the WordPress Gutenberg Project has discovered. Despite Gutenberg’s starting at roughly the same time as the Elementor PageBuilder, Elementor has many more features than a Gutenberg. This may change over time but possibly with the same fracturing that has marked the PageBuilder market.

So why is Google Sites entering the “No Coding Required”, Drag and Drop WYSIWYG WebSite Builder marketplace?

Google as a Website Builder

Ostensibly, Google New Sites is just an update and replacement for Classic Sites. The new Google Sites provides a better WebSite Building Tool for G Suite including collorative development and multi-use opportunties. But Google mustbe aware that WordPresspowered by its setet of powerful PageBuilders a)is pioneering many of the innovations in Website Design & Development and b)has now captured 33% of the World websites. And Google surely must be aware as does Automattic that Wix is growing five times faster than WordPress. Second, all of the Website Builders provide plugins and extensions that allow them to work with G Suite apps like Docs and Sheet straight-forwardly. But few of the WebSite Builders have taken advantage of Google’s Kubernetes and other Web Service tools.So their maybe hidden opportunities for Google.

Of even more interest is that because Google Sites offers free hosting and many of the same benefits of Google App Maker, there is run at WordPress.com and other freemium WebsiteBuilder tools like Wix and Weebly. But also there may be some cognitive dissonance as to what the roles of Google Sites and Google App Maker are in the Google coding pantheon.

Drag & Drop UI Complexity

Not just Google Sites but all of the Website Builders face the problem of growing UI Complexity as more functional and styling features are added to Website Builders:
Consider this screenshot of the powerful Elementor PageBuilder used to create this very web page. I wanted to add a special divider but I simply could not find the styling option lost among at least 2 dozen styling settings. So yes WYSIWYG, Drag & Drop design certainly does simplify development. However, that simplicity and ease of use can be lost in the complexity of UI Tools overladen with advanced features and stylings.

There are two methods to help control this UI Complexity. First, there are templates which allow users to get close to what they want with pre-built pages and designs.

. I use page and section templates which I have built myself to add quickly styled text blocks or basic sliders to developing web pages. Thus for me, a robust template system is a vital component of my chosen WebPage Builder.

However, another approach is to use a Web Design Wizard to get the end user much closer to what they want through a series of survey questions and on screen samples of color, layout and font stylings. This is the approach taken by Wix ADI-Artificial Design Intelligence wizard. as seen in the sidebar example to the left. The trick is to get successively closer to the design elements the client wants bypassing getting lost in the Website Builder interface.

Summary

Drag and Drop, “No programming required” Web Design and Development has new entrants and validation with Google’s New Sites and App Maker programs. Now Drag and Drop design is not new to Web Development with a slew of programs from Front Page and NetFusion to Eclipse and NetBeans Designers offering various shades of drag and drop capabilities over the last 20 years. But the difference with the new Website Builders tools is their adherence to “no programming required”.

In effect, more vendors are determined to make a dent in Islands of Information and breaking down Isolated Silos of Data by giving their highly trained staff access to tools that allow them to plug together highly functional information resources with sophisticated display tools. Underlying this is a broad range of functional frameworks like the RESTAPI, GraphQL, Kubernetes, Docker , etc packaged as plugins/add-ons that can be used by display and presentation tools that can quickly create dashboards and display reports to meet changing information needs. This is the perennial problem of IT -making ITself agile. Is drag and drop, “no programming required” systems a viable solution space?