Squarespace for Building a Website

By

This article was published by ComputorEdge, issue #2831, 2010-07-30, as the cover article, in both their PDF edition (on pages 6-16) and their website.

There are countless reasons for creating a website for yourself, for a commercial enterprise, or for a nonprofit organization. Regardless of the site's purpose and target audience, you have a number of technical options for building the site, or having someone build it for you. One of your earliest decisions should be whether to try to design and create the site yourself, or instead outsource it to a design agency or freelance Web developer. (This assumes that you do not have in-house Web talent to whom you could assign the task — "in-house" in the sense of one or more employees working in your company, or in the sense of a family member who could be put to work.)

The decision as to whether you should try to tackle the project on your own, naturally hinges upon your expertise and experience in creating websites, as well as the functional requirements of the site. For instance, if you are not a programmer, but you only need a single static page to advertise your booth at the local farmer's market, then you most likely could get by using one of the many available Web page editors that can be downloaded from shareware sites and used free of charge. On the other hand, even if you have some experience creating static Web pages, but you need a robust business site that encompasses multiple pages, navigation menus, user login, a database, and e-commerce capabilities, then trying to do it yourself would probably lead to far too much frustration and wasted time. In that scenario, you are much better off turning over the task completely to a freelancer or an agency.

In between these two extremes — between dead-simple pages, and complex sites requiring considerable customization — lies a wide spectrum of different kinds of sites, with a range of capabilities. Many such websites comprise the basics of businesses online requirements, such as the abilities to: add and edit content (text, images, audio, and video), solicit and save input from visitors using forms, style the site with attractive templates, and monitor and fine-tune the site findability for better search engine results.

Over the years, numerous online site-building services have been offered. The pioneers in the late 1990s, such as the now-defunct GeoCities, were usually offered for free, because their dot-com parent companies were willing to give away just about anything in the quest for market share ("eyeballs"). Nowadays, after the tech bubble has burst and business owners have rediscovered the concept of profit, the site-building services typically require a reasonable fee. But this does not mean that they are short on features; if anything, website tools are better than ever, with greater ease of use and integration of accessibility best practices, social media, and more.

A Square Deal

Of the modern online site-building services, the one that is currently garnering the most buzz in the Web design community, is Squarespace, which was founded in 2003 by software developer Anthony Casalena, with its office in the SoHo district of downtown Manhattan. It currently enjoys tens of thousands of customers, and is likely increasing that number all the time.

Squarespace homepage
Figure 1. Squarespace homepage

The company's homepage displays numerous links to pages describing the service, including its features and pricing plans. One way to quickly get a good idea as to how Squarespace works, is by viewing their video tour, which illustrates how one can quickly set the overall layout of one's website by specifying the number of columns, the width of each column, the location of the horizontal navigation bar, the site's banner image, and other settings. Using an interactive WYSIWYG (what you see is what you get) editor, you can change the appearance of your site and see the results immediately. You can bypass the process of designing your site by selecting from one of numerous predefined templates developed by professionals. In addition, you can easily add various types of pages to your site, such as picture galleries, discussions, user logins, registration pages, FAQs, and blogs, as well as more generic ones, such as HTML pages and forms. Lastly, you can add JavaScript and Flash components to any page.

Unlike CMSs, which generally require you to provide your own Web hosting space, Squarespace hosts your site on their servers. These Web servers are clustered, redundant, and backed up regularly. As a consequence, your website should always be up and running, and the code, images, and other resources that you've used to create your site, should never be lost to hard disk failure. Squarespace is not supported by advertiser revenue, but instead charges a monthly fee, depending upon which of the five plans you choose: Basic ($8, intended for personal sites), Pro ($14, for small businesses that want their own domain names), Advanced ($20, for more complex sites with multiple content editors), Business ($30, for larger enterprises needing data collection, etc.), and Community ($50, for large-scale community sites).

Your Space on the Web

To learn more about Squarespace firsthand, and whether it would be a workable approach for building your own site, you can take it for a test drive. Squarespace offers a 14-day free trial period, without having to provide credit card information or make any long-term commitments. To get started, click on any of the green buttons on the homepage, and on the sign-up page, provide a username, a password, an e-mail address, and a CAPTCHA value. If the sign-up process completes without error, you will receive a welcome e-mail message, with the title "[Squarespace] Welcome to Squarespace", at the address you provided.

The username can only contain lowercase letters, numbers, and hyphens, because it will be part of your server name. For instance, if you were to name your website "test-site-99", then your site's address would be http://test-site-99.squarespace.com/. The initial version of your site, prior to your making any changes, is fairly bare-bones, as one would expect. When you are logged in, at the very top of the page is a black control bar, containing links that allow you to manage your site, change your displayed name, and logout, on the left side. On the right side are links for changing the site's content (which is the default mode), structure, and style, as well as previewing the site as it would appear to visitors — none of whom would see the content control elements, because they are not logged in as you.

Initial website
Figure 2. Initial website

The content control elements consist of small black ovals with links for posting a new entry to the current page, and managing any existing entries.

Content control elements
Figure 3. Content control elements

All of the control elements are links that, when clicked, execute code written in JavaScript, which is a Web scripting language that powers the Squarespace interface. Up to this point in the process, there has been no warning that JavaScript is required; but it needs to be enabled in your browser in order to use the interface and make changes to your site. Also note that the initial page is what's known as a Journal page, consisting of entries — much like blog posts.

Let's use those control elements to remove the existing entry, and replace it with a new one. For the existing entry, click the "remove" link. Then click "post new entry", and populate the content form with whatever text you want. In our case, we will add some sample text, as well as a small gray image (250 pixels wide by 100 pixels), positioned to the right of the text.

Modify Post screen
Figure 4. Modify Post screen

This results in a different entry on the homepage.

Modified website
Figure 5. Modified website

Next we will alter the structure of the page. Switch to structure editing by clicking the icon in the upper right-hand corner that looks like four squares. Delete the "site powered by Squarespace" block by clicking the "remove" link. We will add search capabilities to our new site, using two different approaches, so you can see the difference between links to stand-alone pages, versus widgets. Click "insert new section", and provide a title, such as "Search page section". The section is initially empty, so click its "add page" link, and add a search page, which we will title "Search page link", because clicking on the link takes one to a new search page.

Add New Page screen
Figure 6. Add New Page screen

Again click "insert new section"; add a title (such as "Search page widget"); click "widget"; and select and configure a search widget.

Add New Widget screen
Figure 7. Add New Widget screen

Finally, let's choose a more colorful and attractive template for the site. Switch to style editing by clicking the icon that looks like a paintbrush, and then click on "Switch Templates". Unfortunately, all of the templates are displayed in a single horizontal row, which of course goes way off the screen, requiring you to use a horizontal scroll bar. In the screenshot below, we see the final site using the "Moss" style, which is part of the "Subtlymade" template family. In addition, the title and subtitle for the site have been set, in the header section of the structure editing mode.

Styled website
Figure 8. Styled website

The sample text in our entry is not filling the horizontal space available, which suggests that there is something wrong with the chosen style, or perhaps more tweaking of the column layouts is needed. We won't do any further modifications to the site, but bear in mind that there is much more that can be added. Furthermore, the search widget section has disappeared, suggesting that the chosen template contains some bugs.

Speaking of styling, there is an obvious improvement that could be made to the Squarespace homepage. In the headers and footer of the pages, the use of gray text on a black background, makes most of that text quite difficult to read. This is especially true for the text that is set to a small font size, and even more so for visited links, when the gray is made even darker and thus even more unreadable. In the screenshot below, there are actually two links below the "COMPANY" header, but they are practically invisible.

Text with poor contrast
Figure 9. Text with poor contrast

Where to Go from Here

It is quite possible that Squarespace provides enough functionality and ease of use for you to create your own website. Note that if you already have a blog site currently hosted by one of the major blogging services — including Blogger, Movable Type, WordPress.com, and TypePad — you can apparently transfer it over to Squarespace with ease.

Should you decide not to continue with Squarespace past the trial period, you do not need to specifically cancel the account, because it will be closed automatically, and any site deleted. But if you would like to extend your account past the initial 14 days, and you want to learn more about how to use the system, be sure to consult their online help, including the manual. If the manual does not answer your questions, you can open a support ticket.

Regardless of how you decide to build your site or have it done for you, know that there are innumerable types of online businesses that you could create to supplement or replace a conventional salary. The Web has made entrepreneurship easier than ever before!

Copyright © 2010 Michael J. Ross. All rights reserved.

Content topics: