Having a website for your business or personal brand is a fundamental part of participating online. Capturing traffic from search engines and social media in a clear, custom experience is one main function of website. A second is to host ways of converting your audience - subscribing them to your updates or displaying information about something you are trying to share.

Fortunately, getting a website live with up-to-date information to represent your business isn’t hard - neither technical nor time-consuming. We’re not in the 1990s anymore, and gone are the days when Google Sites were the default.

In this post we outline the key building blocks to create a robust website. It contains things that we have learned through hosting multiple websites on Squarespace, with some additional notes from what we see going wrong on other sites that use the framework.

First though, other website builders

The 2010s saw the dramatic simplification of constructing professional websites, broadly through a standardisation of components that adhered to responsiveness. By reducing the amount of options available to non-professional web designers, standardisation has helped to rapidly increase the time it takes to get a website on the internet, while also ensuring stability over time.

There are three website builders that are worth knowing about, beyond the stock option offered by Google which is best known as something to avoid. The first and most widely used can be disregarded if you’re opting for something simple - WordPress. Their focus is on websites that want to publish new posts frequently, say every day or at least weekly. They’ve got brilliant functionality for this and become easy to navigate for teams of contributors checking regularly, but they are overkill for a personal brand, restaurant or similar brick-and-mortar businesses.

Two other website builders are more simple - Wix and Squarespace. Wix’s set of themes of website templates pre-dated Squarespace but where Squarespace win is on their feel, functionality and integration with likes of Google Sheets, MailChimp and OpenTable.

So why Squarespace?

While it seems like vanity check to go for a website builder just because it looks nice, capturing a new browser and establishing a degree of “we know what we’re doing because our website shines” is important. Nobody every said the Wix logo looked cool either.

Like Wix, Squarespace allows its customers to build web pages and introduce their own content, colors, logos and font type. Unlike Wix, Squarespace makes a bunch of choices for you, constraining the options you have when it comes to orientation.

While this forced guidance might be off-putting to large companies that want to build their own software or drive business transactions through their website, the constraining characteristic of Squarespace provides portfolio site owners with a greater chance of success.

Squarespace pricing

Once your website is published on the internet, you have to pay Squarespace for keeping it visible. Depending on your functionality, pricing starts at $12 per month for the Personal plan. Most businesses can get away with using this tier, but as soon as you want to take bookings or payments through the website, it makes sense to upgrade to the full set of features. Premium pricing isn't hefty - $24 per month for a stack of features.

There is another aspect to Squarespace's services - "holding your domain". This allows you to move your domain from your initial provider to be stored by Squarespace Inc.. We continue to keep our domain with GoDaddy because we know their customer service is outstanding, and their admin panel is widely tested.

But if you do what everything with Squarespace, you can do this for $40 per year, substantially more than what most domain providers offering for holding a domain. Just worth considering this parallel offering from Squarespace if you want to opt for convenience.

Nuts and bolts

So, the other main reason why Squarespace is a delight is its admin panel, easy to use on a desktop and now through one of their mobile apps. If you’re worried about getting lost and having to pay someone to make tiny changes to text and images on your website, fear not. You won’t get lost. Because the back-stage functionality looks just like it does to the public, you always have pretty good sense for what changes you are making to different pages and posts.

This doesn’t absolve you from non-web design things - deciding on structure, logo, colorways, copy and what images to use. Here are some pillars to consider up-front.

1. 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 (the header image to this post is suggestive). 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. Here are some menu items you could add:

• Homepage: area of focus and current position, latest work, upcoming events
• About: area of operation, example projects, link to News
• News: content, blog
• Press / Testimonials: images and press releases
• Contact: Contact Form and link to current base

This page structure is generally used by most websites, so a new browser of customer won’t be bewildered when they land with you.

There’s also something to be said here about menu drop-downs which were popular when we were browsing on the desktops. Now that so much activity is on mobile, you’re better off inserting sub-menu pages into the parent page, so no:

Team (parent page)
> Will (sub-page, appearing in drop-down when clicked)
> James
> Ross

Just insert all team members on the /team page and let your browser scroll to find different individuals.

2. Homepage as an overview

Because people are lazy and may not necessarily click onto different pages on your website, you need to make sure that the essential information you are trying to convey is right up front. The section that users see when first landing on the homepage in a mobile view is one massive bottleneck, especially considering how much traffic comes from mobile apps. The portion is called “above the fold” - something that Squarespace slices up really well for you.

Your business products, services and values can then be condensed on the homepage from top to bottom. Headers, text and images can be used in different orientation with 4-7 sections being about right before the browser hits the footer and understands that their scroll is complete.

3. Select a template

At this point, you’re ready to jump in and start creating pages, and making the vital design decisions for your homepage. Squarespace have a dozen themes to choose from which you can toggle between even when your design is live. They all follow the similar principles of layout and have the same designs for Pages and Posts, but each one give you a head start on things like font, header image and sidebar behaviour.

3. Insert content

Choosing good images is a large part of what makes a stunning website. Aside from ensuring the quality of images, think about how the image is composed. The orientation of a mobile screen is portrait, so your images will be cropped compared with their view on a desktop screen. To make sure an image works for both formats, ensure that the subject is roughly centred or within the middle 50% of the image.

There are some finer details to look into once you have placed content:

• Does a a background image with text overlay create enough contrast so that the browser can easily read the text?
• Do my headers fall over three or more lines when viewed on mobile?
• Have I added content in a table with three or more columns - these will respond horribly on a mobile
• Have I added more than five primary menu headers? Do they fit in the menu on desktop or should I shorten titles or reduce the number of options?

4. Connecting third parties

Squarespace provide instructions on connecting to a domain held elsewhere, for instance at GoDaddy. In Settings > Social Links you can add and authorise your third party social profiles. By doing this, when you insert social links to your footer, the icons immediately render to your accounts.

5. 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.

6. UI Checklist and other bits

• 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.
• 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

This post will no doubt fall short in some aspects of building your company website with Squarespace. But if you have any questions, feel free to email Will Ross (will@tendo.com) with any issues. Good luck!