Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
In today’s technology-driven world, having a website for your business is an absolute necessity and probably the most important part of marketing.
Almost a third of the entire world’s population uses the internet so whether you’re a freelance writer, a web developer, a professional speaker, an estate agent, or a micro business owner, it’s crucial to have an online presence that not only looks professional but can provide essential information to your customers.
As part of our series Setting Up Your Business Online Without Coding, I’ll show you how to create your own professional, not to mention gorgeous, website with Squarespace that won’t require you to enter a single line of code.
How a Website Is Set Up
Traditionally, if you wanted a website then you’d usually have a number of things to arrange and consider. These would include:
- Finding suitable web hosting and paying a subscription.
- Figuring out which CMS (Content Management System) software to use.
- Installing said CMS software on your web host.
- Customising the look and feel or installing/commissioning a custom template.
- Install feature or security updates as and when they’re available.
For many of us, that’s what we’ve always done and do now. We pay a web host every month for web space, set up our web software that powers our site, change the appearance and it’s ready to go.
Web hosting can be very cheap but, more often than not, you do get what you pay for. Shared hosting is by far the most common option whereby many users share the same server, where its resources are shared across all the sites. Sometimes these shared servers can have hundreds of websites running all at the same time. Because of this, there is always a danger that a “neighbour” on the server could set up a website that uses a lot of resources, whether it’s due to the site receiving an incredibly high amount of traffic or simply due to incorrectly configured software. Should this happen, it can have a knock-on effect, since you share those same resourced, and could result in your site being disrupted.
If you’re not well versed in web design or development then you might find the above quite perplexing. There will always be web designers and developers you could hire who would be able to take care of all of this for you.
CMS software such as Wordpress has made it extremely easy to install and, provided you know how to use FTP and can find your way around a web server, you’ll have no trouble setting any of this up. But if something happens to your site, it’s up to you to fix. If your site goes down or doesn’t work exactly as it should, you’ll need to put in the time to figure it out.
But what if I told you that you could skip all of the above and that it would cost no more than paying for web hosting?
A Hosted Solution With Squarespace
If you listen to many popular podcasts then you’ll no doubt have heard of Squarespace. Similar to some of it competitors, such as Wordpress.com and Tumblr, Squarespace is a hosted service. You don’t require any separate web hosting and there’s no software to install. In fact, you skip almost every step of our list. So how does a hosted service such as Squarespace work and when is it a good choice?
1. A Complete Solution
With a hosted service, everything regarding your website is in one place. It combines a mixture of highly redundant web hosting and powerful CMS software so you don’t need to set up and install these yourself.
If something goes wrong with an update or install, who do you speak to — Web host or software developer?
You’ll always have technical support for most aspects of your site, should you ever have any questions or issues. With traditional web hosting, your hosting might be with one company yet the software you want to use will be another, putting you squarely in the middle. If something goes wrong with an update or install, who do you speak to -- web host or software developer?
As every Squarespace customer uses the Squarespace platform, no other software can be installed. Whilst some might find this restrictive if they have a specific need, for others it means that the worry of someone incorrectly installing a piece of software that causes a server error is non-existent.
Squarespace offers a lot of redundancy and has even continued running in the face of natural disasters. During Hurricane Sandy in October 2012, Squarespace experienced a power outage due to the adverse weather conditions. Working with their datacenter partners, they continued running the servers with diesel generators to keep sites going to maintain their 99.99% uptime guarantee.
Squarespace is also cloud-hosted, meaning that if one of their servers were to fail then another takes its place instantaneously, without any loss of service. Compared to shared hosting which exists on a single server, if it goes down then all the sites on that server go down until it’s resolved.
2. Professionally Designed
Squarespace specifically offers a number of good looking templates that we can build on and customise quite extensively. They provide a really good starting point for designing our own website that works as though we’re in a photo editor. We can resize logos, page widths, change colours and font sizes all whilst viewing the effects in realtime.
This isn’t to say good looking templates aren’t available for your choice of CMS if you set up your own web host, far from it. In fact, there are some truly amazing templates that you can purchase from sites such as ThemeForest. The main difference is that you’ll need to factor in purchasing a template as well as any costs involved should you want to fundamentally change some aspects of the template.
Another benefit with a service such as this is that, although the number of templates may be lower compared to others, they’re a lot more flexible and are continually updated and tested against major browsers. This means your site will look the same in Internet Explorer as it does in Google Chrome.
3. They’re Easy
Hosted solutions such as Squarespace are designed to be powerful, yet easy to use. Their extensive support, forums and video tutorials mean that you can learn the ins and outs of the service all on your own.
Squarespace is a good choice if you’re wanting to set up a fully functional site that is easy to customise without getting too involved in how websites work. It isn’t for everybody, however. If you’re wanting a fully custom site that has certain features Squarespace doesn’t yet provide, you’re much better off with the versatility of a dedicated web host.
Creating a Website
For the purposes of this series, I’ve decided to set up a new software company called '2bit Software'. I’m really excited to get a new website up and running, but I’m already really busy with my latest apps. I don’t have much time to spend on setting up web hosting, installing a CMS, etc. Instead, I’m going to set up my website in Squarespace from start to finish.
Squarespace offers a 14-day trial that requires no billing information. This is perfect for me because I don’t want to start paying for a service that I might not want to use.
Step 1: Sign Up and Pick a Template
Visit Squarespace and click Get Started.
Before we’re asked for any further information, we’re asked to select the design for our site. Squarespace works by providing a range of responsive templates that can be heavily customised. Don’t worry about selecting one that you might not like, you can switch the templates out at any time.
I really like the look of the template Aviator. Hover over the template and then click View Aviator. Let’s see what our template looks like to start with. Hover over the large preview image and select Live Preview.
All Squarespace templates are responsive, meaning they adapt to fit the device they fit on, in most cases a mobile device such as an iPhone. We can actually see what it would look like on a mobile device by hovering over the mobile preview and selecting Mobile View.
I’m really happy with this design, so go ahead and select Start With This Design. Enter your name and email address, as well as a (secure!) password.
Step 2: Configuration
Now we’ve created our Squarespace account, we’re automatically signed in to the Site Manager. This is how we update everything on our site, from the content to the colours.
We can access features such as adding/removing pages and other content, analytical information to tell us how many people have viewed our site and which sites they came from as well as some more configuration options.
All Squarespace asked for was my name, but I want to personalise the site with the company name and information. To do this, select the Settings section, denoted by the cog icon.
Here we can complete the company information and customise the site name and description. Don’t worry about the nonsensical latin, this is just placeholder text I’ve put in.
Further down the page, we can add our logo and contact information which will be used in certain parts of the site.
Building Our New Website
Setting up a new site with Squarespace requires some demo content to be included. The live preview of our template we saw earlier is actually what we have at the moment. Before continuing, let’s take a look at our site as it is right now. Select the preview link which is the top-left icon, represented by an eye.
As you can see, our logo and description changes have taken effect. Using some of the links on the top left, we can navigate around the demo content we were provided. Let’s take a look at the Menu page.
Again, our new information is already showing on all pages. All we need to do now is to change the content to what we want. To access the Site Manager, simply select the cog icon on the lower right of the page.
Step 1: Removing Unwanted Content
To see what pages we have, we only need to look under the Navigation column.
Under Main Navigation are all the pages that appear on the site’s menu. Under the heading Not Linked are pages that can still be accessed but aren’t featured on the menu. This is useful for pages where they don’t need a menu heading but you might need to be able to link elsewhere, such as a “terms and conditions” or a “legal” page.
Let’s go ahead and remove all pages except “info” from the demo content. Hover your mouse over each page and a small X icon will appear, select it and confirm that you wish to remove every page. Once done, you should be left with the following:
Step 2: Adding Our Own Content
Time to add a new page. Select Add Page under Main Navigation.
We just want to add a standard page so select the first option and then call it “Home”.
We’re going to want this to be our home page so when someone visits the site, this is the first page they see. Hover the cursor over the page name until a cog icon appears, then select it. You can then make this the homepage.
To add some text, click where it says Click here to begin typing and enter some text.
Squarespace manages content into blocks. We can add different blocks for different uses, such as text, images, video and more. Since we’ve added our first text box, let’s add a horizontal rule underneath. Click + Add Block and then select Horizontal Rule. It will place it directly underneath our text block. If we prefer, we can rearrange blocks at any time by hovering over them and click-dragging them to where we’d like.
Next, I want to add two separate pictures, side by side. First, add a new block but this time, select Image. Add an image of your choice and then select Save. Now, do the same again for a second image.
We now have two images, one on top of the other. To move them side by side, simply drag the second image to the right-side of the first, basically drag it to where you want it to be. A blue line with the word “column” will appear, meaning you’re wanting to add it as a new column. Let go of the mouse button and the pictures will automatically resize and adjust to sit next to each other.
Select Save & Publish, then click View Page at the top to see what it looks like.
Step 3: Further Content
Let’s add some more content. Go back to the Site Manager and add another page, calling it “Contact Us”.
Add some text to the default text box and then add a new block, but this time add a Form. By default, new forms send emails to the email address you registered with.
A great feature about Squarespace forms is that you can use them for more than just sending you an email. Once you get to grips with the system more, you can integrate Google Docs and even Mailchimp to develop a complete marketing tool, all without any coding.
After adding a new form and repositioning it, we can also adjust the width of the column they share, giving more room to either our form or text box. Let’s give a little more room to our contact form. Hover the mouse over the middle of the two blocks and you’ll see the cursor change, you can then click and drag left or right, depending on which box you want to give more room to.
Once you’re finished, view the page.
Let’s make one more change to our site before we start adjusting the style. The Info page is lovely, but not something we’re wanting to use. Back in the Site Manager, drag it down to the Not Linked heading so we can move it out of the site’s menu.
Add a final page called “Services” and try out some of the other blocks you might be interested in. Once you’ve done that, re-arrange the menu so that the Contact page is the last page in the menu.
Customising The Look and Feel
We’ve almost finished the layout of our site, now to customise how our site looks. If you aren’t already doing so, view our site so you can see what it currently looks like.
Using the menu at the bottom right hand side of the screen, select the paintbrush icon, this enters the Style Mode. It’s here we can customise all the colours and sizes that we would like to use within our site.
Step 1: Header Adjustments
First things first, my logo is quite dark because it is on a dark background. Let’s change the background of the header to make it a bit lighter so we can see it much easier. You can select which element to change by selecting it with the mouse. Select the header, making sure you select the entire box and not the title or logo.
When you select an element, all of the appropriate properties will be displayed in the left column. Select Header Background and change it to a much lighter colour. If you like, you can keep some transparency.
That’s looking good. However, our text with our contact information is a bit hard to read. Let’s adjust the colour of this text and make it darker.
Much better. The logo and the text are much clearer and easier to see.
Step 2: Text
I’m not a fan of uppercase text for headings. Again, to change a specific element select it with the mouse and the style editor will display the properties available to change. Change the text transform so it is no longer uppercase. Additionally, change the letter-spacing to 0 pixels, this will move the letters closer together.
Finally, select some of the standard paragraphs we’ve written and change the font to Proxima Nova.
If we scroll down to the footer, we can see that changing the background has caused the links to be hard to read. Select the links, and then adjust their colour using the style editor.
Step 3: Layout
Whilst the menu in the top left is quite good looking, let’s make it more traditional by positioning it at the top of the page. Select the navigation area and the property we need to change is called Info Page Layout.
Change the property to “Poster”.
Now to resize the site. I’d like to make the site a little bit narrower as I think it might look quite good. Resizing is very easy, simply hover the mouse over the edge of the page and simply click and drag to adjust it.
I've resized the site to 50%.
Step 4: Background
Let’s get rid of the background image altogether. Click on the background and, in the style editor, select Background Image. Whilst all that coffee does look rather tempting, it doesn’t really fit it in with our site anymore so let’s get rid of it. Click the small delete icon and we’re left with a single colour background. Alternatively, change it to one of your own.
Step 5: Finishing Touches
Depending on the background you select, you might need to make some slight adjustments to colours. Simply keep making changes until you’re happy with what you have.
Since we’ve removed the demo background, we can adjust the footer to remove the image credit. To do this, exit out of the Style Editor and select the first icon in the Squarespace menu for the Content Editor.
I’ve adjusted the footer here to include a copyright, as well.
So far, we’ve spent about 20 minutes building a site that we’re ready to start using. However, we don’t want to use the default address that Squarespace gave us, we want to use our own domain name!
If you sign up to Squarespace annual plans, you’re eligible for one free domain name registration. If you have a domain name already, you can simply use that instead. If you do get a domain name through Squarespace then this section isn’t needed and you can skip right to the end.
Step 1: Configuring Our Domain Name
Log back in to the Site Manager and select Settings, then Domains.
Click on + Link Existing Domain and then enter your domain name that you wish to use. This won’t automatically update our domain name to work, this simply tells Squarespace what domain name we expect to use. We’ve got to change something else…
Step 2: Edit Your Domain’s DNS Settings
This part isn’t particularly tricky but there’s no one-size-fits-all solution, it really depends on your domain registrar. If your domain name is currently with Hover or Godaddy, they’ll have different methods of amending them.
Thankfully, Squarespace provides a great video tutorial that covers most major registrars. It gives instruction on the basic information that all registrars would need if you know how to do it or if your registrar isn’t shown.
The setting to change on your domain name is something called a DNS record. DNS can get quite complex, but essentially we have to tell our domain registrar that when we visit www.mydomain.com, we want it to point to Squarespace’s servers.
My domain is currently registered with GoDaddy, so here’s the settings that I configured using their DNS control panel.
Once you’ve altered your domain’s DNS settings as Squarespace requires, it can take up to 24 hours to take effect. With registrars such as Hover, the changes are almost instantaneous.
Step 3: There is No Step 3
That’s it! After a few hours (DNS dependant), your site will be up and running with your custom domain name. Whilst you’re in the trial period, any visits to your site will display a warning saying that the site is still part of a Squarespace trial so make sure to subscribe before you go live with your site.
Squarespace sites start from $10 per month. You can get a discount if you pay annually and, depending on your usage, there are three different pricing tiers:
- Standard, $10/month or $96/year
- Unlimited, $20/month or $192/year
- Business, $30/month or $288/year
For US & Canada customers, Squarespace also offer a full e-commerce solution to sell physical and digital goods. If you’ve always wanted to open up your own online store to sell either physical goods or software, you can do so easily.
For most users, the standard or unlimited plans are the best options. You can upgrade at any time so unless you need all that space or additional users to log in, go with the standard plan first. In fact, keep using the trial until you’re ready to launch but remember that your site displays a splash screen whilst you’re in a trial.
So how does Squarespace compare to a traditional host? Many web hosts offer shared hosting from around $5 per month. Cheap, right? Don’t forget, you’ll then need to set up your CMS software, configure it and make sure it's all working. Should you experience any problems with either the software or hosting then you'll need to try and first of all figure out where the problem is and then start sourcing support.
Wordpress is free so there’s no additional cost to use it, and it's incredibly powerful and very popular. If you’re not experienced with installing web software then you’ll need to factor in the expense of having someone do it for you.
In about 20 minutes, we’ve gone from nothing to a fully functional, great looking website. There’s a monthly cost involved but at the lowest tier of $10 per month, it’s about the same as a decent cup of coffee and sweet pastry each month.
One of the biggest advantages to a service such as Squarespace is that it puts you in control of your entire web presence. Any time you want to change the look and feel, add a page, remove a contact form, you can do it yourself straight away - it empowers you to control your online presence in a way that many people still don’t fully realise.