Squarespace 201 Part 2: The Buildout
“Squarespace has curated a collection of beautiful and diverse templates designed exclusively with the needs of small businesses in mind.”
Before you start: Client deep dive
Whether you use our Project Form or have a process of your own, you should take the time to learn about your client’s brand and business, their goals for their website, and their aesthetic sensibilities. Having a deep understanding of your client’s needs and wants before beginning to build goes a long way in avoiding miscommunications. Some pointers:
Get clear on your client’s strategic goals, the services and products they offer, and their ideal customer.
Take a deep dive into your client’s area of expertise. Get the lay of the land and find out how they want to be seen in their industry.
Ask your clients about the nitty gritty: Who needs access to the website? What assets do they already have? What assets will need to be created?
Download the fully-designed Project Form in the PDF version here and the plain text version here.
Create a contract
Conversations are a great place to start, but written agreements are easier to reference after you begin building. Having an organized document explaining your process, fees, and expectations is invaluable. There’s no substitute for professional legal advice; that being said, the following is a list of potential website specific topics that you may want to cover in addition to your usual contract terms.
Website will be built on Squarespace using a standard template.
Project timeline, including allotted time for rounds of revisions.
If you will be providing Squarespace training, include specifics about format, number of hours, and number of trainees.
If your fee includes costs for additional assets or subscriptions (stock photography, G Suite, etc.). Detail the approval process for purchasing additional assets.
If your services will continue beyond launch of the website, and if so, the nature, and cost of those services.
If your services will include copywriting and/or search engine optimization (SEO) research and implementation.
If you will create custom CSS or other code injections, and if so, specify who will be responsible for maintaining that code after launch.
Who will pay the Squarespace subscription fee and domain fees (if any).
While we hope this list of topics is useful as you think about your contract terms, please remember that your contract is ultimately an agreement between you and your client, and you may wish to consult with a lawyer.
Make an outline
A solid outline acts like a framework to support the buildout of the website itself. Summarizing your client’s website in an outline not only refines their vision, it doubles as a convenient checklist to use while building. If you’re not sure what should go into that outline, check out a handful of sites of businesses or individuals that are in the same field or offer similar services as your client: Each site’s look and feel will vary, but it won’t take long to tease out the essential elements. Check out Squarespace’s Design resources and tips for more industry-specific tips.
Here’s an example of a simple outline.
Collect Assets
“We can’t emphasize enough the need for having a very firm handle on assets - including written content - at the beginning of the project!
When we were new to website design we were so eager to please our clients that we’d get started before they had everything in-hand or in-process and ended up wasting time.”
The best way to keep a project on schedule is to collect assets at the beginning. The more organized you are, the easier it will be for you and your client to work together.
Our recommendation is to create a shared folder with subfolders that track your client’s website page structure and content requirements (Dropbox and Google Drive are both great options). You can take this one step further by specifying resolution requirements for artwork and word counts for copy. Check out this help article for best practices in formatting images for display on the web.
Share the folder with your client, talk them through it, and let them upload on their own time. If your client is missing assets, decide whether you have enough to move forward, and create a plan to develop or purchase the missing pieces.
Selecting a Template
Templates are at the core of the Squarespace experience, so making an informed selection will simplify the rest of the design process.
As you consider templates, ask yourself the critical questions outlined below to determine which one will work best for your client. With template selection, it is important to examine the underlying features and avoid making a decision based solely on demo content.
What is the primary goal of the website?
At this point it should be clear whether your client is primarily looking to drive sales, generate leads, or attract visitors. We recommend that you pick a template designed to achieve that goal. The category filters on the templates page will be helpful in narrowing your choices. For example while all templates support Commerce, certain templates are especially well-suited for online stores.
What type of assets are you showcasing?
If your client wants a more image-focused site, take a close look at gallery pages and blocks. If your client needs to communicate who they are through copy, pay particular attention to how page collections can be laid out to break up text and create more compelling designs.
Does my client like it?
Once you’re down to a few finalists that meet your client’s needs, ask for their input on the final decision. When presenting template options to your client, it can be helpful to include links to customer examples from each template page, links to websites you’ve designed with each template (if any), and even annotated screenshots showing what features they should be evaluating. Highlighting the advantages and key points of each template you would like your client to consider will make it easier for them to sign off on a template.
Squarespace maintains a comparison of key features by template family*, an important component of sites on 7.0, and members of the Circle community have created template feature comparison charts. While they occasionally fall out-of-date, you may find them helpful:
What differentiates each template?
Built by our award-winning Design Team, Squarespace templates help determine how a site will look and how visitors will navigate it. While each template in our template store is unique and distinctive, many of them share the same underlying structure and settings. Internally, we describe templates that share the same underlying structure and settings as “variants,” and say that variants with a shared structure are members of a template “family.” By reviewing the variants within a single family, you and your client can get a sense of the template family’s flexibility.
Each variant represents a certain type of website, but it’s important not to take them too literally. A variant that’s presented as a restaurant website can be transformed into a chic law firm website. With this in mind, your main criteria for picking a variant should be the design, layout, navigation, and other structural implications of choosing a variant in a certain template family.
We recommend familiarizing yourself with our template guides to get a better sense of template families and the different features each one offers.
*It’s important to note that sites built on 7.1 are part of the same template family, meaning they have the same features and functionality.
The four-step buildout process
Once you’ve picked your client’s template and started the six-month trial, it’s time to build.
There are lots of ways to approach building a Squarespace website, but we’ve found that breaking the process into four distinct steps works well:
STEP 1 — Architecture setup
STEP 2 — Styling
STEP 3 — Layout and Content
STEP 4 — Finishing touches
Step 1 — Architecture setup
In this step, you’ll frame out the website by adding, deleting, duplicating, or reordering pages to match the outline you’ve already developed, creating a solid information architecture for the website. When you’re done, the Pages panel will show every page for the website in the proper order relative to each other.
Step 2 — Styling
In this step you’ll create the look and feel of the site. Depending on your timeline and your client’s expectations, consider using dummy copy (e.g., lorem ipsum) and image placeholders. Keeping the content generic will maintain your client’s focus on the design elements, which are the moving parts at this point in the process.
Key styling elements
Tagline: font, color, size, and placement
Navigation styles: font, line height, and letter spacing
Copy treatments: font, color, and size
Page styles: header or no header, and background colors
Getting feedback
Here’s an approach to getting your client’s feedback on multiple Style options:
Set the styles for the first version that you want to share and take a screenshot of the homepage.
Download and save the style tweaks as a JSON file.
Reset styles for a second version.
Take another screenshot and download the re-styled tweaks.
Repeat as needed.
Share the screenshots with your client, and import the tweaks from their preferred version to continue designing.
Step 3 — Layout and content
You’ve got the website’s architecture framed out, and your client’s sign-off on the styling, so it’s time to start laying out and adding finalized content to each page.
A few things to keep in mind:
Make the most of your template
Our Templates team thinks deeply about helping you create pages that not only look good, but perform well. If you picked a template with your client’s specific goals in mind, closely examine the content in the template’s homepage. See how it’s optimized to achieve certain goals. It’s unlikely that you’ll be able to simply swap in your client’s content, so to avoid reinventing the wheel, consider maintaining the essence of the template’s demo content.
Optimize for a goal on every page
While the landing page should be keyed to your client’s primary goal—leads, sales, or subscribers—look for opportunities on other pages to achieve specific goals.
For instance, a blog can include a promotional pop-up inviting visitors to sign up for their mailing list. Clients with stores can use a pop-up to promote a new product or announce a sale. An “About” page can include a lead-generating submission form block or a click-to-send-an-email button. The key is to keep your client’s strategic goals in mind and ensure that every aspect of their website is contributing to those goals.
Put Squarespace to work
Use more page types, blocks, and layouts to create distinct visitor experiences and leverage the power of Squarespace.
For instance, if your client will maintain a blog, consider layouts that go beyond the traditional chronological scroll. The index page, summary block, or archive block are all great tools for presenting work in novel ways. In version 7.1, page sections offer a similar effect to stacked index page layouts, while portfolio pages offer a similar effect to grid index page layouts.
Take advantage of the starter layouts built into Regular Pages to quickly stage a page structure, even if you don’t have all of the client’s copy and images laid out yet. Blocks without content will still show demo text or images, giving your client a good idea of how the final version will look.
For a dynamic introduction, add a background video to a Cover Page or homepage banner. Background videos play on a loop without sound while a visitor explores the page. To showcase artwork, create a slideshow that opens in a lightbox.
Double-check styling
Once you’ve replaced the dummy content with your client’s actual content, take another look through each page to see what needs fine-tuning. Review text to be sure all the fonts and colors are unified and there aren’t any typos.
Double-check images for any issues that might show up with cropping or padding on different sized screens.
Make content requests en masse
This is the point where unforeseen gaps in your client’s assets and content will become apparent. All else being equal, we think it’s better to wait until the end of this step to ask your client to fill in the gaps rather than making one-off requests along the way.
Step 4 — Finishing touches
You built the architecture, styled it, and then populated it with assets and content. The next step is adding finishing touches to the website. Some of these finishing touches, such as connecting social accounts, will require your client’s input, so you may need to wait until the handoff. In any event, you should create a running punch-list of finishing touches the website will require before going live.
Downloads
Some key finishing touches:
Import client’s old blogs
Set up URL redirects
Create a Favicon
Add a Social Sharing Logo
Set up a custom 404 page
Add a cookie banner for EU clients
Want more?
Check out Squarespace Circle, Squarespace’s program for professional designers. Along with exclusive content, discounts, and other perks, Circle brings professionals together from all across the globe to exchange advice while connecting with new clients and collaborators.
