Tech Guide

Squarespace: A comprehensive review of the website building platform

 

If you listen to any podcasts at all, you'll have heard of Squarespace.com - they seem to sponsor every single one. If you don't do podcasts and you're not familiar with them, Squarespace offer a complete website publishing package: you build it using attractive templates, they host it, and you pay them an annual fee.

After mulling it over for ages, and building a mock site using their free-trial, I eventually made the switch from my old wordpress.org site to this new squarespace.com site in August, and overall I'm very glad I did. So, for those I've spoken to online and in person who are wondering about making the switch, here's a (fairly long and comprehensive!) review of Squarespace.

The Design

One of the big reasons I switched to Squarespace was their designs. Their sites are above all clean - I find them engaging to look at and interact with. I spend most of my working life on the internet so I do appreciate when a site looks nice and is easy to use. Squarespace designs make great use of images and the full width of the screen. They allow you to highlight key information - your website may contain a lot but you can still direct people primarily to just a little of it, allowing those who want to go deeper easily to do so.

Squarespace uses a template system, but in the best possible use of the word 'template' - loads of different ways to present information which are easy to customise and make your own. At the time of writing there are 32 templates to choose from - here's a selection:

Click the pic to go to Squarespace's templates page

Click the pic to go to Squarespace's templates page

For each template there are a number of example websites (from actual Squarespace users) so you can see how they work in the real world. I chose 'Bedford' for this site because I liked the large image at the top of the page (if you're reading this blogpost on its own direct URL you won't be able to see this - have a look at the blog homepage in a new window, or the Past Talks page for example, to see how the site normally looks with a featured image)  and because I could see examples of the Blogging side of it working well; Squarespace is NOT primarily a blogging platform, so I needed to know I could still have columns, subscription options, and other things which a totally minimalist design might get rid of in the name of style over substance.

Essentially there are templates which allow you to present most types of information engagingly. Some are very commerce orientated, some are detailed, some are extremely sparse, some are designed to work as an online CV or portfolio. They all look lovely (and can all be completely changed as part of the customisation process anyhow) so you can choose one to suit the type of content you wish to have on your site.

There's no comparison between the way my old site looked and the new one looks. One is dated and the other is fresh. In fairness that's partly because I designed my old site myself using my limited html skills - there are plenty of Wordpress themes which look a lot more contemporary and usable (albeit, in my opinion, not on the same level as the Squarespace designs).

Mobile Ready and Responsive

The other key thing about the design is they're all Responsive Design sites. This means they recalibrate their content to suit whatever size of screen you look at them on. This is much, much better than an Adaptive Design site (which basically means having a mobile-friendly version and a desktop friendly version) in a number of ways, but primarily 1) you don't lose any content like you do with Adaptive; it's just rearranged to suit the screen, 2) it looks brilliant and works well on any device and 3) you don't have to limit the width of the screen because it responds to any width of screen, meaning it makes the most of widescreens. (My previous site was 1000px across, meaning anyone looking on a wider screen than that just saw wasted white space either side of the content.)

We all know being mobile-ready is essential these days. So far since August a bit over 3,200 people have visited this site on their mobile devices, which is relatively small as a proportion of the total visitors, but nevertheless I'm glad each one (hopefully) found it a useable experience.

Building the Site

Building the site is done via Squarespace's drag and drop content system. Once you get the hang of it it is much easier to use than any other system I've come across. I can write code but it takes me ages and I can't do anything flash with it, and Blogger and Wordpress simply don't the flexibility and power of the Squarespace engine.

Here's what this part of the blog post looks like in edit view, when I go to add a new piece of content. The things I use all the time from the Basic section are Text and Image (obviously), and I use Quote on the Training pages. From the More section I use the Code section to embed presentations, Storifys etc (it seems to work better than the Embed tool, for me) and the Spacer tool which basically allows you to arrange elements of your site precisely where you want them, for example by filling up the left hand side of the screen with a Spacer so your content appears on the right. There are more features you can't see in the screengrab, some of which I used in the building of the site but don't have cause to come back to when writing posts like this one. Squarespace provides clear instructions and some nicely illustrative videos that explain how it all works.

As well as types of content and tool, there are overall Page types. Clearly this section is on the 'Blog' type, but I use the regular 'Page' for most of the rest of the site. For the Upcoming Events page I use the 'Events' page type, which is terrifically useful; it makes it very easy to create actually useable events pages which have timings, maps and so on built in. Although I don't have use for the 'Gallery' page type it's also very nice and works really well.

squarespace2.png

As you can see in the screenshot above, my site is visible in the background in edit mode. This is because there is one interface which does both Content and Style - you edit the site as it appears to viewers rather than in a separate edit view with a preview mode. What You See is very literally What You Get.

The Bottom Line

Squarespace costs money and, as previously discussed in various posts on this site, it is perfectly possible to create an excellent blog or full website for free.

At the time of writing there are three Squarespace plans: Personal, Professional and Business. Rather than list the differences here's a screengrab:

Click to go to Squarespace's Pricing page

Click to go to Squarespace's Pricing page

I've got the Professional package - the dollar per month pricing works out as about £120 per year (billed annually), although I got 10% off by using an offer code from a podcast. Listen to any episode of Football Weekly, WTF, This American Life, I'd Hit That (for the drummers!), Freakonomics, Serial - basically any popular podcast - and you'll hear an ad with an offer code you can use to get the saving.

The reason I went for this plan rather than Personal is the unlimited bandwidth. Bandwidth stresses me out because you can't really control how much of it you use - there are things you can do to influence it but ultimately it comes down to how many people visit your site. Every time someone views a webpage it uses up bandwidth. I've had to spend extra money before to get extra bandwidth allowance on the old site, so I wanted an entirely hassle-free experience where I know I'll never need to change my current package - 500gig may well have been enough, but I prefer not having to think about it. (More on understand bandwidth requirements here.)

So £108 each year with the discount, or £55ish if you go for the Personal spec. Is it worth spending that kind of money on a website? Clearly the answer will vary depending on what you use your website for and how important it is to what you do.

I used to spend around £60 per year on hosting for my wordpress.org website, so Squarespace is more of a cost - I decided it was worth the extra cost for me because of the simplicity of the way it works, and the ease of maintenance / lack of upkeep, and because it looks a lot better. I also, quite honestly, wanted an excuse and the motivation to completely redo my website - next year I'm part-time in my main job so I can do more training for organisations, so as this website acts as a sort of HQ for my freelance work I figured it was worth the investment.

The other reason I think it's worth the money to me is that I think it's extraordinary that you can have a fully hosted, fully responsive to mobiles, fully SEO optimised, contemporary looking website for this amount of money. The amount of time it would take me to make something like this from scratch I can't even imagine - weeks and weeks. I think for what it is, it represents great value. Imagine how much you'd have to spend to build, or have built for you, a website like a Squarespace site even just two years ago! An absolute fortune by comparison. A feel bad for web developers.

Finally, a brief summary of the good and the bad of the platform.

Cons

So what are the downsides of Squarespace? Here's my take:

  • It's a relatively new company, so who knows what its long term future is? (Squarespace has actually been around since 2004, but only in its current form and with its current high level of popularity and use since 2012.) Wordpress, which I used previously, had been around for a long term and was sustained by input from the developer community as well as its own employees. It's free and open-source. There's every reason to expect it to be here and usable for a long time. We just don't know enough about Squarespace to be able to say it'll be around for a long time - and it's a for-profit company which means it could go bankrupt. So there's a risk.
  • It's a relatively new company so they change stuff all the time - features you like may disappear. In the short time I've been using it they migrated to Squarespace 7, an all new version which, as described in the Building the Site part above, essentially allows you to design your site without using a separate edit interface. This is great for site design but once your site is up and running and you're no longer tweaking it, I actually find it gets in the way somewhat. Also since I've been using it they've got rid of the option to add an image via a Flickr URL - you now have to save the image to your PC and upload it. It's a minor inconvenience but it's a feature I used to use but can't anymore - there may be more of those to come...
  • It represents great value for money - for now. By which I mean, if Squarespace turn around and hike my yearly payment by 100% next time around, what do I do? I can export all my data of course, and build a new site on another platform using all the words and images from this one, but that would be a LOT of hassle. So I'm relying on them not getting evil and greedy.
  • It's not a blogging platform. Blogging still a central part of what my site is for but it's not the be all and end all like it used to be, so this isn't so much of an issue for me. But not being a dedicated blogging platform, Squarespace does lack features which wordpress.org had that made life easier - more details statistics, useful plugins and so on.
The top statistics are from Squarespace (which sadly doesn't provide 'All Time' stats so this is just for the last month); as you can see, search engines not nearly as important as they were in the Wordpress days, which are the lower stats.

The top statistics are from Squarespace (which sadly doesn't provide 'All Time' stats so this is just for the last month); as you can see, search engines not nearly as important as they were in the Wordpress days, which are the lower stats.

One final thing is that I was unable to switch over without losing some SEO. This almost certainly isn't Squarespace's fault (it is, after all, 'SEO optmized'), but rather due to changing my site's URL to something brand new at the same time. I used to get at least 300 people a day finding my site via Google etc even if I didn't post anything - that no longer happens, and I effectively have to generate traffic myself via Twitter or it's a much smaller figure. (I am trying not to be sad about this! Changing to a proper URL was still worth it, I think.) I've put redirects on but that doesn't seem to have counted for that much - however as I say I think it's probably something which would have happened whether I'd switched to Squarespace or not. I just can't be 100% sure because I don't know enough about this sort of thing.

Weirdly the number 1 source of traffic for the new site is 'Direct' which presumably means people typing the URL directly into thier browsers - I'm baffled by this and can't help thinking something has got lost in translation between what's actually happening and how Squarespace is rendering the statistics.

 

Pros

  • Everything is included. For me the main pro is that using Squarespace makes things simple and unambiguous. I have the editor, the published site, the custom URL, the hosting, the unlimited bandwidth (and also unlimited storage and unlimited pages) and the ability to do other stuff I don't currently need to like add Podcasting or Commerce options - this is all in the same package, with no ambiguity or add-ons. I like this a lot.
  • It looks great: contemporary and nice to use. The interface is easy to work with and I love the way the website looks on all devices. The content is engaging and usable. Should I tire of this design I can just choose one of the other 32 templates and it'll completely rejig my site in one fell swoop.
  • It is amazing value for money. As I mentioned above, the idea a few years ago that you could get basically any kind of website you wanted, beautifully rendered, for just over a hundred quid a year, would have been bonkers.
  • The Support is very good. Squarespace are based on New York and Dublin and that's where their support teams are too. They get back to request for help within a couple of hours, they know what they're doing, they speak perfect English... All that stuff helps. Also the developer community are great - they helped me with the fact that wordpress.org uses a different style of URL to Squarespace, so all my URLs have to be redone individually for the old thewikiman links to work, and they wrote some easily editable java script which allows me to have the feature images take up the exact proportion of the screen I want them to (by default in this template they took up too much of the vertical space, and when I tested my proto-site on my wife she said people might not even realise you can scroll down to find more content) - whatever you need to do the chances are someone on there knows how to do it...
  • It's constantly evolving: I mentioned this as a con above, but it can be a pro too - they've added loads of new templates just in the time I've been using Squarespace, so you can always stay ahead of the web-design curve.

So that's the end of a pretty epic-length post by my standards. If you have experience with Squarespace (good or bad!) or have any questions about it from a user's point of view please leave a comment. If you fancy trying it out, sign up for the free trial and play around - it's not one of those free trials where you give your credit card details and it automatically starts unless you cancel it, so there's no harm in giving it a look. And if you build your own Squarespace site, let me know!

A handy guide for when to save images as JPEGs, PNGs or GIFs

 

Thanks to David Green for flagging up this whoishostingthis.com infographic on Twitter - I found it useful because I tend to use a mixture of JPEG and PNG with saving images, with not much understanding of why I'm choosing what I'm choosing...

JPEGs reduce the size of an image by compressing it - making the image less detailed and so the file-size smaller, but effectively doing so in a way which the human notices least. This is important for web-use as everything each viewer of your website has to download - which is to say, have appear on their screen, rather than save to their computer - takes up bandwidth, and bandwidth costs money. One of the reasons I switched over to Squarespace from Wordpress.org is the unlimited bandwidth meaning I don't have to worry about upgrading my package to accommodate more.

PNG files can be transparent - they don't have to have a white (or black, or any other colour) background. This is truly useful because they can 'sit' on top of any background - so for organisatinal logos for example, it's essential to be able to drop them in over any kind of poster or slides or publicity materials, without an ugly white background delineating the logo from the rest of the content. PNG files generally take up more space than JPEGs but keep their quality better by not compressing the file in a lossy way. This is useful for something like uploading an image to Twitter; Twitter compresses the image, so an already compressed image can start to look really quite rough by the time it a Twitter user sees it.

GIFs I use a lot but never really have cause to make. They generally take up the least space and work better for created graphics rather than photographs.

After the recent posts on which format to choose when saving presentations, and which sizes to use when saving social media images, it seems only right to complete the set with one on how to save pictures too! So courtesy of whoishostingthis.com, here we are:

Size matters: Cheat Sheets for Optimal Image Sizing and Update Length on Social Media

 

This posts features two massive infographics: thanks to Darren Jones and Claire Dolan who I saw tweeting about these a while back.

First of all we have the Social Media Design Sizing Cheat Sheet

The Omnicoreagency.com cheat sheet below shows you exactly how big (to the pixel) the images for each element of your social media profile need to be. This is genuinely useful for organisations on social media, as you can get a huge amount of customer interaction via Twitter and Facebook; the wrong sized image will either be distorted to auto-cropped in your profile or header pics, which undermines how professional you appear. Consistency is important on social media for organisations, but you can't literally use the same image in all circumstances because the dimensions won't be appropriate.

So for Facebook, Twitter, LinkedIn, Pinterest, Instagram and (both) Google+ users, here's all the info on image sizing you'll ever need...

(Scroll waaaay down to below the infographic to find a tool which will resize your images for you!)


Second of all we have the Social Image Resizer Tool

So perhaps you're convinced that size matters when it comes to social media images - but wouldn't it be nice if you didn't have to actually crop your images yourself? All that faffing about and resizing to the exact pixel.

Well step forward the Social Image Resizer Tool - give it your image, then choose from various Twitter, Facebook, LinkedIn, Instagram, Pinterest, Google and YouTube image sizes and it'll crop your image down to the right proportions.

Click to go to open the Image Resizer Tool in a new window

Click to go to open the Image Resizer Tool in a new window

 

Finally we have the Optimal Length of (almost) Everything Online Cheat Sheet

This one from Buffer is less definitively useful, but interesting all the same. Which length of Tweet, hashtag, Facebook update, blog headline, email subject line etc gets the most engagement? Glad you asked, right this way:

A file-format decision tree for saving PowerPoint presentations

 

So which file format is best for saving your slides? It depends on the situation, but it's almost never the default .pptx you're offered. I made a little graphic below to act as a decision tree for choosing how to save your PowerPoint - click on it to be taken to a larger CC-BY-SA version on Flickr.

What it comes down to is this. Saving your slides as a .ppsx file - a PowerPoint Show - is usually the best option, because it opens the PPT up in Presentation View right away. This looks SO much more professional than the default .pptx PowerPoint file, which opens in edit view, revealing your notes if you have them, and the first few slides. Your audience seeing behind the curtain in this way isn't the end of the world, but why do anything to reduce the impact of the presentation you spent ages creating?

A .ppsx file will keep any animations you have in your slides (and embedded video and audio) and unlike a PDF it won't compress your images, so they'll remain high quality. 

However, sometimes you need to use a PDF - mainly when you've used non-standard fonts. PowerPoint claims to be able to embed fonts that aren't included in the Office Suite (but which you download yourself) so they'll work on other PCs - I've found this to be lies, lies, and more lies... It simply won't work - either for presenting on another PC, or for uploading to Slideshare. So saving as a PDF sorts this out - it retains your exciting font choices, and keeps things the right size and shape (you may have to go into the Save Options and untick the ISO box if your PDF doesn't behave itself the first time you save it - for example if Transparency effects aren't correctly rendered).

I also use PDF if the PC I'm presenting on has a different version of PowerPoint to the one I made the slides on - or if I don't know ahead of time whether it will. The version of PowerPoint shouldn't matter but it does, and the other day I had to subtly reformat a whole slide-deck after checking it on the latest version of Office and finding it had mucked around with the font-size for no good reason.

PDFs are the safe option. They work on pretty much ANYTHING. Lots of people never present with PDFs because it simply never occurs to them, but trust me it works fine! I do it 99% of the time because 99% of the time I use non-standard fonts - just click View then Fullscreen Mode and it works exactly like a PowerPoint in Presentation View (including using a clicker to move the slides along).

(There have been a couple of occasions where I've forgotten to do this, and turned up with a regular PowerPoint file to present on a machine with none of my special fonts installed. This has resulted in frantic downloading and rediting and saving in a panic, and is not recommended...)

NB: Never ONLY save your slides as PDF or PowerPoint Show - you need the .pptx file to actually come back and edit them later.

So next time you're saving your file, check if you really need to use .pptx, or whether another format is more appropriate.

You’ll find details of my Presentation Skills or PowerPoint workshops here: you can book an all-day or half-day session for your organisation, online or in person.

The 4 Most Important PowerPoint Rules for Successful Presentations

 

I have been working on these slides, 10 minutes at time here, 15 minutes there, for MONTHS! I finally uploaded them to Slideshare this morning.

There are a few reasons for making these. First of all it's separating out what is essential in slide design, to what is merely desirable. There's a million and one guides to creating nice PowerPoint slides and a lot of them focus on what is desirable, but that can often be too much information if you want to improve your presentation materials but you're not sure where to start. The presentation below focuses on the four rules which REALLY matter (backed up by actual research) - and as it says in the slides, an attractive presentation is actually just a byproduct of an effective presentation. Follow the four rules below and you will be making effective PowerPoint slides which communicate effectively and make your message stick.

Another reason to make these is my understanding of what matters with slide design is evolving over time, so this reframes some of the things I've highlighted in previous presentations. It covers some of what we talk about in my Presentation Skills Training; I realise not everyone who wants to attend these can get to them, so wanted to disseminate some of the guidance they contain more widely. (If you're already booked onto a workshop don't worry though - the information above is a small part of the full content of the day!) 

I hope people find these useful. In my experience the easiest way to make a big difference to how effective your presentations are is to start with the materials (for teaching as well as conference presentations) - a great set of slides makes the audience sit up and take notice, which in turn gives you the confidence to deliver a better presentation.

If you'd rather use a design tool to help craft your slides for you, check out Canva and Haiku Deck from Presentation Tools Week.