Welcome to the fifth installment of Website Wednesdays. Today we are walking our website straight into the Template of Doom.

Choosing your website Template is our next step, and one of the first steps to really getting started. As a first step, it can be pretty daunting. But it doesn’t need to be.

As we build better websites for our art, we’re using the real-world example of Karla Adolphe’s website as our test case. Today I’ll show you how I choose the template for her site, and offer some tips for making your own good decision.

Karla is a musician here in Alberta, who records, tours and teaches workshops and blogs. She wants to use her website to do these things well, and to share all of these activities in one simple stream on her homepage.

So we’ve come to SquareSpace for help. Last week I encouraged you to launch your own SquareSpace site. If you have decided to use a different tool to build your new website, like WordPress, a lot of the specifics going forward won’t apply. But the principles still will, and there are similarities in most systems. For instance, as we start your website today in SquareSpace, we’ll choose a Template. Wordpress calles these Themes, but the principle is the same. There is a gallery to choose from and you choose one and get going. In WordPress, you may also have a designer and developer build or adapt a theme for you–a custom option. But if you are going that route, you are likely not doing much of your website building yourself.

But if you are taking matters into your own hands (and I hope you are) let’s go!

What a Template Is

Most modern website systems are called Content Management Systems (CMS). They let you manage the content of your website separate from the design of your website. This is a very good thing. Generally, the design part is pretty tough, but the idea is that once things are set up well, you can manage the actual content of your site (the artwork or music being added, the blogs being written, your tour dates, photos of your shows, etc.) on your own. After all, who knows you better than, well, you?

So, a template is a way to control the design of your website. It is often so separate from the content of your site that it can be changed at any point down the line without losing everything. Generally this template is going to provide the ‘frame’ around your content. It will include the fonts used. The sizes and colours. The way things sit on the page. The way the navigation menus look. All of that is controlled by templates, and once you make those decisions at the outset, you generally don’t mess with them. At least not for a long while. Not messing with these basic things sounds like less work? It is. Less work sounds like a good idea? Yep.

How to Choose a Template

When you open a new SquareSpace site, one of the first things they’ll ask you to do is pick a Template. If you’ve already opened your site (say, last week) past that point already, you can get back to the Template choices by clicking ‘DESIGN’ from the left-hand menu in the SquareSpace admin panel. Then click ‘Template’. You’ll then see a page where you can click a big button labeled “INSTALL NEW TEMPLATE”. Click that and you’re in.

Now, how to choose from all of these great options?

Function first. Form second. Something that looks really pretty will frustrate the heck out of you before long if you cannot get it to do what you want it to do.

Systems like Squarespace and WordPress have template ‘galleries’ that let you browse through thumbnails to see an overview of how a template will make your website look. That’s a helpful starting point (and if you don’t like the look at all, move on because it can be hard to change it dramatically). Don’t make your final decision on looks alone though. Find out if this template can do what you need it to do.

Generally with Squarespace, most templates can serve up all the functionaility that the service offers, just in different ways. The way a calendar is displayed may be different. The way a photo gallery looks may change. Lucky for you, you can preview any template without actually installing it.

Squarespace actually makes choosing a template easy for a few reasons.

First, there aren’t a lot of choices. Enough, I think, but not a lot. WordPress has literally thousands of Themes to choose from, so it can be a bit paralyzing. They do offer ‘filters’ to help you choose - like whether you want a dark coloured or light coloured theme and whether you want a theme that shows up well in a single column or multiple columns. It’s still a lot of thinking and sorting. The great thing about templates in most systems is you can change them later, but it’s not without some level of work.

Choose On Purpose

Squarespace actually organizes it’s Templates by purpose. That’s good, because that is where we are starting. I have used Templates not designed for my intended use with great results (like a musician template for a festival website), but these broad categories show that Squarespace has put some thought into who their users are. Creative types. Like you and I. We are a big part of their target market.

screenshot from Squarespace template chooser

Karla Adolphe is a musician, so I will start by clicking ‘MUSICIANS’ in the menu (remember, we are on the INSTALL A TEMPLATE page). That narrows my options down to just three. They all look fairly similar, so I’ll want to take a closer look.

First, I’ll look at Horizon.

Template Summaries

I get a Template summary screen that shows me The name of the template, what it will look like on a large computer screen (desktop) and what it will look like on a mobile device (smartphone). Remember, every single Squarespace Template is ‘responsive’, which means it looks great on any size screen. This is awesome, and while Wordpress has many Themes that are responsive (including it’s own default themes), many of the Themes available for WordPress are still not.

Most of the Templates on Squarespace are image heavy. Just know that you can (and likely will) chance those images with your own images later on, so don’t focus on the images themselves, just how those images are presented.

On this screen I get a short summary of the Template, a Live Preview option and a Feature Index option. If you want a comprehensive listing of what Squarespace can do, have a look at that index. It’s pretty thorough, and meets all the needs we’ve laid out in the weeks leading up to today.

So let’s look at the Live Preview of Horizon.

Live Preview

This preview allows us to see how this template will work, in the real-world, before we install it.

Remember that we can change a lot of the elements of this look, but not so easily change where things are laid out. For example, we can change the background image here. We can change the fonts used and the colours of those fonts. We could add our brand logo if we have one (or make one with Squarespace’s built in logo maker!).

What is more difficult ot change is how this Template works. The way it shows tour dates. The way the homepage contains a lot of information that requires scrolling through. The location of the navigation menu (here, it is on the top). Pay attention to those broad-strokes when you choose your Template.

I like this Horizon template quite a bit. It pulls an awful lot of information right onto the homepage, and with Karla’s website we’re looking for a digital ‘hub’ that brings all of her online activities together, so that’s good. It places emphasis on the latest music release. That’s good. The tour dates show niceley. Blog entries are right there on the homepage and not likely to be missed. All good.

If Karla didn’t have any compelling images, this might be a challenging Template because it has a HUGE image right at the heart of it. But she actually has a great bio shot we can use in high-resolution.

This is a good option for Karla Adolphe, but let’s check out a couple more before comitting.

Adversary is similar, but with a more traditional layout. Rather than things being centered, the logo is upper left and the menu upper right. Images play a big role still, but there are more smaller images within the site pages rather than one larger image. Content is displayed on a white background, which is a more traditional choice. I don’t find the homepage of this site to be a ‘hub’ like Horizon was, but more of a jump off point into other areas of the site. Because that ‘hub’ was Karla’s Most Important Thing, we won’t go with Adversary.

Encore is very clean, and I think the fonts match Karla’s vibe better than the first option, but we can change the fonts anyways. Encore may in fact be too clean for us, as it’s homepage is a very short, minimal piece of content. Not a digital hub pulling in a bunch of content. I imagine we might be able to make it become that hub for us, but again, I’m going back to Karla Adolphe’s Most Important Thing. Show people how much Karla is up to, across the web, right on the homepage. A digital hub. This doesn’t do that out of the box.

No Template is perfect. There are always compromises. But, at the very least, we need to be sure a template will deliver on that Most Important Thing. And for my money, Horizon does the best job of that. And Horizon has been designed for musicians. So I won’t spent any more time deliberating. I’m clicking that big ‘INSTALL TEMPLATE’ button and getting started.

If you are a visual artist, you may want to look through the portfolio templates. There are currently 8 there, so your choice is a bit tougher. But eight beats a thousand.

Here are 3 tips to choosing the right Template.

Choose for function first.
Make sure this template serves the needs of your website visitors. Refer to the past few weeks in this series to decide what it is you want your site to do.
Think outside the preview.
Squarespace will give you great suggestions as to how you can use their Templates, but don’t get restricted by those ideas. You can make any of their templates work for you, and the huge list of Squarespace features apply to most (perhaps even all?) of their Templates.
Templates are a starting point.
We can make subtle adjustments and tweaks to get things to look just how we want. Colours and fonts and images can be changed. Think of a Template as a house you can renovate. The more structural the renovations, the harder they are to pull off. The more cosmetic, the easier.

Here you can activate your desired Template

Once you’ve chosen, you’ll need to actually activate the template on your site (so far, you’ve just ‘installed’ - made it a choice that you can select for your site).

To do this, go back to the TEMPLATE page (under DESIGN on the main menu). There you will see thumbnail previews of your installed templates. Hover over one with your mouse to see the ‘PREVIEW’ button. Click that.

You’ll get a preview of what this template would look like for your site (without any further changes). To apply it, hover over the thumbnail again and click ’Set as Live Template’. You’ll get one last ‘Are you sure …’ message. Well of course you are, right? Right? Then click ‘Confirm'. Done. You have canquered the Template of Doom. Nothing to fear.

So now you have your website. You can go into your settings and set some things up. You can expore the different pages and see what you want to keep, what you want to delete, and what you want to change.

Don’t worry about breaking stuff. The site is your personal playground for now.

This week, tinker with this template. Try it on. Visit your site once a day and see how this site feels for you. Be sure you want your site to live here.

Here is what I have for Karla after a bit of playing around (a lot of this content is still left over from when I chose the template, and doesn't actually apply to Karla Adolphe).

Next week, we will create your first pages.

If you have any questions at this point, ask below in the comments.

You may be wondering about a specific Squarespace Template. Maybe I’ve tried it out and I could answer your question. Maybe you are using a different system, like WordPress, and have a question about their templates (called Themes). I’m happy to answer what I can for you on that too.

-----

I’ll be hosting a Website Wednesday workshop on Wednesday, May 13, so if you get stuck on anything along the way, or just need some one on one help moving your website forward (Squarespace or not), plan to join us at 7 that evening at the Bleeding Heart Art Space.

Website Wednesday and The Template of Doom

What a Template Is