Squarespace, An Advanced Modular CMS: A Dual Post With Hotbed

Background: This is the first of what is likely to be an on-going series of ‘dual posts’ with my new writing project, Hotbed. Hotbed is all about New York tech start-ups, and the shifting, swirling social scene that supports them. I plan to write a technical review of various companies’ products here, and a company profile and personal background piece on a founder of the company there. The sister piece for this post is Anthony Casalena and Squarespace, which profiles the company’s seven year history since being founded by Anthony while in college.

****

Squarespace is a sophisticated and advanced hosted content management solution (CMS) suited for ‘do it yourself” individual bloggers or businesses. It is pased on the general paradigm of blog-based CMS like Wordpress, Typepad, and Tumblr, but it differs from all of these in many significant ways. It is a highly modular solution, where much of its sophisticated support for advanced features like embedded forums and forms comes from. Perhaps the most obvious defining characteristic of Squarespace is that modularity, and the fact that a reasonably computer-savvy user — someone capable of creating a complex spreadsheet or creating tables in Microsoft Word, for example — could create a complex website, without having to know how to program, use CSS, or hack any HTML. And for designers that want to create more sophisticated websites, involving embedded javascript, and CSS styling, Squarespace makes it possible to hand over such sites to a reasonably computer-savvy client — a marketing lead in a small business for example — knowing that that user will be able to update the site, post to blogs, create new authors, and generally manage the site without the designer’s help.

Squarespace is a hosted service, like Wordpress.com, Typepad, and Tumblr, so a user does not have to manage a server. However, it is possible to direct a domain name to a Squarespace blog.

/Message has been hosted on Squarespace since a few months ago, and I redirect the domain ‘www.stoweboyd.com’ to point here. I will expand about the travails of moving from Typepad to Squarespace at length later in this piece, but for now just let me say that the importing of an export file from Typepad turned out to ‘work’ in a general sense, but was the least polished aspect of my experience with the product to date. To be fair, it is one of the newer features of the system, but it certainly could have been easier and more foolproof.

As you can see by looking at the page this is published on, Squarespace support the now traditional blogging paradigm as one of the core modules for Squarespace managed websites.

Also note that I have extensive experience doing extremely sophisticated blog hackery in Movable Type,  Typepad, and Tumblr, a significant but less in depth experience with Workdpress, and passing knoweldge of various other oddball blogging platforms. So, your mileage may vary.

At present I manage and maintain /Message, 301work.org, www.edgewards.com, and Microsyntax.org all on Squarespace, all of which were formerly hosted on either Typepad or Tumblr. So I have had a really in depth exposure to the features and functionality of the product. And I recommend it.

“One World” Authoring Experience

Squarespace provides what I call a “one world” style of editing and administration. By this I mean that the basic authoring experience takes place directly on the same page that is used to display the published result to non-authors.

For example, here’s the screenshot of me editing this post:

You can see the /Message blog in the the slightly grayed out background, and in the foreground is the editor where I am writing this post.

The editor is implemented as a hover box above the displayed blog page. This has some drawbacks:

1. The editor is not draggable or resizable.
2. If you click on the page outside the editor hover box, the editor simply disappears, and you can lose you work if it has not been saved. TIP: Implement an autosave, Squarespace.

I think it would be better to go all the way into One World, in-place editing, so the body of the post would be displayed in a bordered region that looks just like the page, but with a floating palette with the various editor icons.

The various options for editing are more or less standard, with options for various sorts of styling and HTML constructs, and the ability to edit in HTML, Textile, and Markdown. I haven’t used their Textile and Markdown modes, but I frequently descend into HTML to do things like setting the width of the various screenshots displayed here. I do that when the screenshots are hosted elsewhere, but for images that are uploaded directly, Squarespace provides rich support for images, like resizing, thumbnails and so on. There is support for uploading video or javascript, as well.

Once I save the post this is what is shown:

At the top is an authoring ‘bar’ that appears when you login as an adminstrator type author. In my case, I have access to all the controls that Squarespace provides. I can select “Website Management” to do things like adding or deleting users, messing with the design of the blog, or adding new modules. I will explore some of that, later on.

I also have editor access, so I can create and edit posts like this one. As you see by the large ‘A’ selected at the top left area, I am in authoring mode, which brings up control of the various components displayed. For example, you can see the black bar under the post tilte that shows ‘modify’, ‘remove’, ‘organize’, and ‘post follow-up’. To edit, I click on ‘modify’, to remove, I click on ‘remove’, and so on. ‘organize’ is badly named, since it actually implements a move functionality, allowing a post to be moved to a different blog on the same website. A ‘follow on’ adds a time stamped addition to an existing post.

Note that other editable object have controls that appear as well. See the ‘edit section HTML’ control that appears above the Social Business Edge ad in the left margin? If I click that the editor opens showing the HTML innards of that section, which is an HTML  ‘widget’ in the Squarespace terminoloy, meaning that the HTML is displayed in place, not as a separate page. And the ‘add new post’ control above the /Message banner creates a new post.

Anyway, the One World term denotes that this sort of in place editing is going on. This is very different from the Two World model of Typepad and Wordpress, where editing and other authoring take place in a completely different context from the published output. Tumblr is another platform that supports a One World model, at least in part (I plan a detailed dual post of Tumblr and David Karp, its founder, in the next few weeks). However, unlike Tumblr and Typepad, Squarespace does not support a ‘Tumble blog’ style of social interaction, based on following bloggers. In that regard, it is somewhat old school.

Structural Authoring

If I click the four boxes icon at the upper left, the controls on the page change:

You can see that the various regions have structural controls, and these can be used to add new modules. At the top navigation bar you can see ‘add new page’ which would allow me to, for example, create a new HTML page, like the ‘/about’ page, or a new blog, like I did to create /Message.

If I mouse over an existing module, like ‘/message’ controls appear, and if I select ‘configure’ I can fool with the basic configuration of the /Message blog set up:

The configuration options are very rich. For example, I can select what sorts of information should be displayed at the bottom of each post, or whether the posts should be most recent first at the top, or vice versa.

I decide to tweak a capability of the /Message blog, since this post is going to be sooooo long. Squarespace posts have optional summaries, but the option to show them instead of the full post on the main blog page is an option that must be checked in the blog configuration. The screenshot above shows that prior to be checking it.

I don’t intend to chronicle every last feature of the solution, so I am not going to go through all of the capabilities, but I would like to show the example of configuring a form, since that is a truly unique capability in Squarespace.

When I click on the ‘Recommendations’ link in the left margin of /Message, I move into an embedded form page:

If you look at the upper right corner, you can see that I took that screenshot after selecting the eyeball icon, which puts me as an author into a mode that displays the page the way a non-author woudl see it. If I select the Author mode again, an additional control appears allowing me to edit the form:

Here you get a sense of form capabilities: I can select various form fields from a pick list of field types, create text to provide guidance, make fields required, and so on. The field types are fairly broad:

Form data can be sent to the adminstrator by email, each time the form is filled out, or downloaded as an Excel spreadsheet, which is totally cool.

This form capability makes a great segue into the website administration, because Squarespace has a really great capability that is available at the highest level of pro account: you can create a registration form that will provide specific kinds of access rights and capabilities to those that fill it out. For example, you could make people that fill out a form authors of a forum or blog, or give them access to a section of the website that others cannot see.

To explain that, we have to talk about adminstration of Squarespace.

User Administration

Squarespace supports an unlimited number of accounts, although various limits are associated with various payment plans. When a user is given an account by an administrator they can be assigned to a specific ‘audience’, meaning a group of accounts with specific access settings for each of the modules on the site.

For example, I have created blogs embedded in the left margin of /Message that casual visitors cannot see. Imagine that I create an audience called AdjectiveNoun (a phony company name), and a blog called ‘/adjectivenoun’. I set things up so that people in the AdjectiveNoun audience have a limited authoring access to that blog. Others cannot even see it.

One great feature supports this sort of private blog use: there is a toggle on every page so that registered users — like me, or clients that I give accounts to — can simply ask to be emailed whenever new materials are posted.

I created an account for a fictional Carla Botts, set her up as described and she sees this:

Note that she can see the /adjectivenoun private blog at the lower left, but none of the other private blogs that I have created to interact with advisory clients.

Here’s the UI for the audience capabilities:

The mechanisms for access control and visibility are distributed across various parts of the Squarespace system, which takes some getting used to. In the screenshot above you see the controls for audience-based visibility. There are controls in every module’s configuration controls to select which pages the module should be shown on: for example, I set the configuration for the AdjectiveNoun private blog so that it is visible only on the /Message page. It would be helpful is all such controls were also visible and settable on the audience settings page. However, the functionality is very flexible and rich.

Statistics

Squarespace has very good statistics for usage of the sort I am involved in. I want to know how many visitors I have, and what they are looking at. Here’s a shot of the traffic:

And here’s the most popular posts in the past 30 days:

I created the ‘/Message Reader’ section in the left margin of this blog manually, but it would be nice if Squarespace offered a widget that displayed the most popular posts today or this week, for example.

Website Design, or “Appearance”

In earlier screenshots, you will have seen a pen icon at the upper right corner. This is used to enable design controls, like template selection, resizing of columns, and the choice of fonts. Unlike the other in place controls, the design control shows up at the bottom of the screen, perhaps so that more of the page being tweaked is visible.

I confess that I have only taken on the most minimal of tweaks to various templates provided by Squarespace. This blog, for example is based on a template called Newsroom. I kept the default color scheme, change a few fonts, and tweaked the size of the various columns.

Manual resizing of the various columns is very simple, as are the means to change fonts, sizes, and styling for different text elements, like headings:

This is a great example of how someone with very little knowledge of HTML or CSS can fiddle with the look and feel of a Squarespace website. There is also an area for customized CSS, and ways to insert HTNL or javascript onto each page on a website, for any number of reasons. I have some javascript running on the site, for example, implementing that Wibiya toolbar at the bottom of this page.

There doesn’t seem to be a way to submit template designs to Squarespace, but perhaps I have not spent enough time roaming around in the help system or the forms they provide for users.

One very helpful feature — one that was a critical factor in my adopting the platform — is URL redirection. Squarespace allows administrators to create ‘shortcuts’ — different URLS — that can redirect references to th website to the actual page. This means that I can create a shortcut like ‘www.edgwards.com/sbe’ to point to a longer URL, like ‘www.egewards.com/socialbusinessedge’. And that sets the context for a digression, which is about importing from other blog platforms.

Importing Blogs: A Cautionary Tale

I had managed /Message since 2005 on Typepad, which supports exporting blog content, comments, and trackbacks. So when I learned in January that Squarespace now supported importing of Typepad blogs, I was very excited. However, I really didn’t want all my blog URLs to change, since there are thousands of links out there pointing to my posts.

I determined that Squarespace would allow me to direct my domina name to a Squarespace website, and to import my blog. I tested it with a much smaller sample and it seemed to work at a basic import level. Some very smart features — like importing hosted images from Typepad and rewriting their URLs — worked as advertised.

Squarespace had developed a new, just out of the labs tool to create URL mappings so that all the old URLs created by Typepad (or other blogging platforms) would be mapped to the new URLs being created as Squarespace’s CMS imported and reposted the blog entries.

Apparently, this all works in other people’s cases, but I made several errors that stopped it from working, and so I was left with perhaps the majority of my old URLs not mapped, or broken, as people say.

Here’s the gist of what went wrong. Squarespace’s description of the import procedure states clearly that error can prevent the import from working. I made two, at least. First, I mistyped one of my old contributors names in creating an account for him on Squarespace. This has to be done so that the entries written by him in the past can be associated with a new Squarespace author. Secondly, I had somehow managed to create a blank category in Typepad: a category with the name of ” “. Several of the posts were categorized that way.

At any rate, I tried importing the export file from Typepad, and got error messages. I figured out the blank category problem, and reimported. But somehow I missed the problem with the misstyped name for the author, and that apparently stopped the URL redirection from running correctly. But there was no error message, and I thought all was well. I then transferred the domain to point to the squarespace domains, and tweaked the setting of my site, as well.

72 hours later, more or less, I started to learn that something was wrong. Dozens of old URLs failed to work, displaying ‘No such page’ messages to other users and me.  Luckly, the service supports a manual redirection capability, so I am fixing the the bloken links as I discover them, but this is tedious, and I have no idea when others encounter these issues.

Perhaps worst of all, there is some pernicious bug in the import tool that mistitles some of my imported posts. It seems that some combination of events leads to the titles of some posts to be changed to the title of trackbacks pointing to the post. For example, a post with the actual title of ‘Which Way Is Up’ might have had a trackback from another blog form a post called ‘Stowe Boyd Is Dumb’. And the importer turns the title of my post into ‘Stowe Boyd Is Dumb’. The only way I discover this has happened is when I can’t find an old post by searching for it. Then I have to go look at the export file, find the old post, look down to the last ping in the post, and with ‘Stowe Boyd Is Dumb’ in my clipboard I then can search for the misnamed post, and rename it.

Obviously, this is a capability that needs to be beefed up with a lot more bannisters:

1. There should be an export file analysis tool that looks for problems prior to doing the actual rebuilding of the blog. All manner of errors should be displayed with great attention to carefully identifying the problem, not just a ‘bad stuff on line 2145’ message. In fact, importing should not be possible until the file is cleaned.
2. A mapping table should be produced based on the analysis in 1, so that it would be clear what is going to be the end state. As it is, there is no output of the URL mappings, and no way to find out what exists, aside from the manually created URL redirections.
3. Obviously, I would like a magic tool to clean up the messy situation I am in, but I guess that is hoping for a miracle.

What’s Missing, Broken, or Would Be Nice To Have?

I haven’t detailed the entirety of the Squarespace CMS, but just poked at the prts that I think make it well-suited to the sorts of things that I am trying to get done.

I thought that the wide variety of modes of interaction with the community of readers would be more important, but to date it has mostly been mostly people leaving comments, which is the common denominator of blgos everywhere, so maybe that makes sense. I have had a fair number of people fill out a form to be notified about a webinar series, but other experiements with forums haven’t led to much interest.

One area that I think Squarespace should consider is the ‘tumbleblog’ social dimension. This is where those who have accounts would have the ability to follow squarespace blogs, which would stream like the Tumblr or Twitter user experience. This might be implemented in a Squarespace-grounded way, but it is a powerful modality, and one that could be extremely attractive. Especially if Tumblr, Typepad and other companies began to move more towards interoperable tumbling, which I call Tumblebacks (see A Call For Interoperable Tumbling: Tumbleback).

One point of endless annoyance is that the Squarespace bookmarklet is broken, which is supposed to allow me to select some text in the browser and pop open an editor window with the text already there. I have been informed that this is a known bug, and they are working on it. But it has been several months so that is unacceptable.

Obviously, I would like to be able to be notified whenever a bad incoming link is captured by the system, and offering the option of finding the right URL (if one exists) and making a URL redirection.

The Squarespace system has a long list of modules that are useful, but it doesn’t play nicely with other tools like Twitter, and the outside world, in general. I owuld like to be able to place a ‘tweet this’ buttom on every post, for example, and Backtype like functionality that would display Twitter references on each post. Likewise I would like to have Bit.ly integration, so that each post would display a bit.ly shortened URL. And I would like the bit.ly statistics integrated with the Squarespace statistics.

Since I am using private nested blogs, it would be helpful to have unread post counts dsiplayed on the titles of blogs. Consider the AdjectiveNoun example, so when Carla Botts visits /Message and logs in she would not only see the private blog, but also a number representing the number of posts that she has not yet read.

I would like to be able to easily create cross-blog references from a post on one blog to another. For example, I might want to publis a follow up to a post like this one, which is public, on a private blog. Currently, I have to do that manually.

The real time dimenstion is not touched on at all in Sqaurespace today. It turns out that I can see from the Mebiya toolbar that 3 people are on my /Message blog right now, but Squarespace doesn’t provide widgets or tools to take advantage of that.

Squarespace has most of the bits and pieces in place to support polls and charting of results. Obviously I think that’s a good idea. In a similar way, it would be very cool if I could create a data set, using a form, and then display the results on published pages. This could be plike a poor man’s Techcrunch, for example, or even something like what Brian Alvey is trying to build with Crowd Fusion.

While Squarespace supports images and videos it doesn’t have any first class support for audio files, which seems an odd omission.

Conclusions

Despite the nosebleed that the migration from Typepad turned out to be, overall my impression of Squarespoft is overwhelmingly positive. The CMS is rich in features and has with the exception of a small number of painful problems — like the bookmarklet — in general the system is robust, well documented, and flexible.

I intend to continue with my many blogs on Squaresoft, and I am looking forward to learn more about the mysterious Version 6 that is being developed.