Website Design with Squarespace and WordPress

, September 2, 2017

This post provides a selection of rules and steps to think about choosing between Squarespace and WordPress for your website’s infrastructure. While both can service personal and business use, Squarespace and WordPress differ in their day-to-day operation and performance, providing a broad set of reasons to go with one of the other.

Squarespace is the simpler of the two –  you can get a website out in minutes and will find their dashboard to be intuitive enough for non-technical website administrators. Squarespace have decent designs and focus on portfolio-type businesses: cafes, restaurants, artists. The negative thing about Squarespace is that it doesn’t “scale” – it is easy to use but as you make your website more complicated, you’ll run into road blocks. The cost of a Squarespace website is around $12 month depending on your monthly or annual commitment.

WordPress is more comprehensive and is responsible for something like 30% of the websites on the internet. WordPress are better for content-orientated websites with multiple users, and their optimisation for being found on Google is better than what Squarespace offer. WordPress templates are in the thousands, creating a gateway for your own customization. The cost of WordPress is generally lower – unlike Squarespace, you only pay for the hosting component, so not for design and maintenance.

Either way, you need to purchase a domain from GoDaddy. Once you have the domain, each of Squarespace and WordPress guide you on the installation of the website itself.

Defining page structure

Once you’ve wrapped your head around the basic monthly pricing and features offered by Squarespace, the first thing you should do is think about your what your business does and how your website should be orientated.

Sketch this core information architecture for your business using a pen and paper. One way of thinking about this is to provide a cross-section of your entire site, or you could provide a condensed set of items to really focus your visitor.

  • Homepage: area of focus and current position, latest work, upcoming dates
  • About: academic narrative, current projects, link to News
  • Speaking: topics, examples of speaking, upcoming presentations, link to Contact
  • News: content, blog
  • Press: images and press releases
  • Contact: Contact Form and link to current base.

Refining the homepage

Your business products, services and values can then be condensed on the homepage, paying attention to the top section and what will be seen by a browser before they make their first scroll on their smartphone or computer.

Select a layout

At this point, you’re ready to jump in and start creating pages, and making the vital design decisions for your homepage. Fortunately Squarespace has a small selection of very good templates that are both robust and practical – they require a good handling of your content assets.

Insert Content

Think about orientation of a mobile screen and ensure that background images provide a sufficient contrast to text overlays (Squarespace do aid with this). Succint text titles for headlines is another way of taking a mobile-first approach, ensuring these don’t fall over more than two lines. Here’s a checklist of other items:

  • Deliver a mobile-first experience
  • Allow a fast load-speed: no animations, no sliders, individual images less than 300KB
  • Post items split into thirds (columns) on web, stacked on mobile.
  • No 2-column tables
  • No dropdowns
  • Max. 7 menu headers – titles concise and differentiated
  • Limit font library to Header 1, Header 2 and regular text, with option of going bold.
  • Label all images for SEO (e.g. will_ross_website_tips_infographic)
  • Paragraphs max. 500 characters

Connect your domain

Squarespace provide instructions on connecting to a domain held elsewhere, for instance at GoDaddy (also a good place to search for your first domain). Move your domain to Squarespace and you can then plug into some superior features, including G Suite which is Google’s offering for businesses. For instance, you can connect a form to a Google Sheet, so the Sheet populates when your website browsers submit information through the form.

Get the apps

Squarespace have a suite of mobile apps, with Blog and Analytics are two apps being two of their legacy treats. Each are very simple but far more realistic for having a regular glance at your website and drafting additional content or thoughts.

UI Checklist

  • Allow a fast load-speed: no animations, no sliders, individual images less than 300KB
  • Post items split into thirds (columns) on web, stacked on mobile. 
  • No 2-column tables
  • No dropdowns
  • Max. 7 menu headers titles concise and differentiated
  • Limit font library to Header 1, Header 2 and regular text, with option of going bold.
  • Label all images for SEO (e.g. will_ross_website_tips_infographic)
  • Paragraphs max. 500 characters
  • Favicon the icon in the tab next to your page title.
  • Page Title what browser will read when you website comes up in Google Search. Vanity is a good thing make it look good.
  • Add tel:” markup ahead of all telephone numbers so browsers can call directly from their mobile device.
  • Add mailto:” markup ahead of all mentions of email, so browser can email directly from their mobile device. Advanced: mailto:will@zafiri.com?subject=Meeting%20Zafiri&body=Tell%20us%20what%20you%27re%20trying%20to%20solve
  • Inspect Meta Descriptions for all pages: these appear in Google Search.

View more systems design articles at zafiri.com/design.