In anticipation of GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ phase two, which will focus on design and layout outside of the_content, I wanted to record some new site builders I’ve been recently introduced to. I’ll try them out and look at the pros and cons. I have two site builders currently planned for benchmarking, but if anyone has suggestions, please add a comment. I’m looking for less established apps (so, not something established like Drupal, Squarespace, Wix, Weebly, etc.) that handle site creation and might do something we haven’t seen before. Inspiration can come from anywhere!
The first site builder I’m testing is Sparkle, which @kjellr introduced me to.
Pros
My first impression is that Sparkle reminds me of Keynote. I’m very familiar with Keynote, so this is a big positive. I feel like I know where to look for different features, and I understand the pages panel on the left and the attributes panel on the right pretty well already.
I have full control over the design of the entire site.
The “more” menu reminds me of Gutenberg’s blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. inserter!
I was able to snap elements to a visible grid, making for a cleaner design.
There was a way to import webfonts from my local files, which was pretty awesome in practice.
Pasting from Sketch retained my font settings, like size and letter spacing.
The non-visual settings were all in one place.
Cons
It is so slow. So. Slow. At some point I had to restart the app because it was lagging so much. This was a constant source of frustration.
Having to toggle between “Style” and “Arrange,” for all that it’s a familiar pattern, introduces an artificial feeling of slowness which was only made worse by the actual slowness of the app. It felt like it took me way longer to build this than I expected, given I had an existing mockup and was mostly just copying and pasting in images and text.
Doesn’t seem to have any way to include dynamic content, like posts — really only good for simple, static sites.
The color palette was super confusing. It didn’t seem like I could add new custom colors, just edit existing colors?
The navigation system was very limited and took me a while to figure out. The whole system felt confusing, and I almost gave up.
Trying to make my site responsive totally messed up my various layers. I did end up giving up.
It felt more like a design app that spits out a website, not a website builder native to the web.
Unsurprisingly, the code it generates isn’t very clean.
What can we learn?
We can draw a lot of inspiration from desktop apps. WordPress feels very much like what it is: a well established web app with roots in blogging. This is starting to feel more and more behind in an increasingly more sophisticated industry. We should explore bringing in native editing patterns from desktop (and mobile) apps.
There is beauty in familiarity. Using Keynote’s design patterns instantly set me at ease. Are there any established site building patterns from existing builder plugins we can adapt? How about popular apps people use all the time?
When building a site, it’s really nice to have a grid to work within. We should explore creating a grid builder inside the Gutenberg site builder.
I didn’t use it much in Sparkle, but their text styles are very similar to Keynote, and being able to overwrite default styles with your own is super helpful for consistency across a site design.
What if we let people drag and drop color palette files from existing apps, like Sketch or Photoshop or Illustrator, into WordPress?
What if we offered type tools that allow you to import font files from your local drive, and built it so it could be easily extended by third party plugins to include things like Adobe Fonts or Google Fonts?
Speed, even perceived speed, is so, so important.
Was there anything you noticed? Any more lessons we could learn?
