Building Business Websites with Squarespace 7 - Second Edition

Chapter 1. Setting Up for Success - Your Website Toolkit

Making a website using the Squarespace platform is one of the easiest and most cost-effective ways to create a professional, polished website in a short amount of time. However, starting any website project without doing the groundwork can lead to confusion, missed deadlines, and just plain bad websites. This chapter covers everything you need to do before you even sign up for Squarespace to ensure that your website project is successful. We will cover the following topics in this chapter:

The right way to make a website
The different components of a website
How to create an effective Website Toolkit, which includes the following:
- Writing your website plan
- Creating idea boards
- Creating your sitemap
- Gathering your raw materials

Understanding the process of making a website

Constructing a website is a lot like a building, and many of the steps and processes are similar conceptually. To construct a building, we first need to consider what type of building it will be: a hospital, shop, house, office, or any other building. Who will use it? What functions will be performed there? This will tell us what shape, size, and structure the building needs to take. We then need to gather our raw materials before the construction can start. Once we have put together the shell and framework, we can start installing the core elements, such as plumbing and fixtures, which make the building operational. Finally, we apply the paint and furnishings and are ready for the opening day.

These are the same steps we will use in this book to construct your website. First, we will set the main objectives for your site, its purpose, your audience, and the types of functions that visitors will perform there. Next, we will gather the materials needed to create your site, such as text, images, and graphic elements. We will then select a site template, fill the template with your content, and customize the site's appearance, thus making it ready for launch.

This chapter focuses on the first two parts of the process: defining your site and gathering references and materials. These two parts make up your Website Toolkit, and you will refer back to the Toolkit time and again throughout the project. You might find it tempting to skip ahead to the hands-on parts of the book. This is understandable, but be warned; every building needs a solid foundation, and every successful website needs a solid Website Toolkit. Starting here and spending time getting your foundation right will really pay off later.

Note

A good Website Toolkit will make the rest of the project easier and quicker, keep you focused, and help smooth the road when things get bumpy (and they will get bumpy). Don't rush through this part of the process.

You might also be tempted to jump around and perform the steps in a different order. Just remember: you wouldn't paint the walls before installing the electricity in a building. Likewise, it doesn't make sense to focus on font sizes and fine-tuning colors before you have a site framework with some content in it. Now, if you have ever worked with a design agency on a website project, this may sound different to the order of their process. This book is laid out in this way because you are probably not a web designer by trade, and you don't need to impress your client with pretty visuals to win the contract.

If you are a designer, feel free to use this book in the manner that makes the most sense to your business model. However, for all the non-designers out there, following the order laid out in this book will make it far more likely that you launch your site on time, in full working order. It's easy to get bogged down in design details, so we'll leave this until the end, ensuring that all the major elements are sorted first.

Understanding website concepts

Before we dive into your Website Toolkit, let's start by breaking down a website into components so that you can better understand how to make one. Each component is distinct, but some are closely related to one another, and it's easy to mix them up. The total sum of all the components put together makes up the process of designing and building a website, which is the final goal of this book.

Structure

Structure refers to the in which the different elements of a web page or website are put together. In the web industry, we often use such as sitemaps and wireframes to a site's structure. A sitemap is simply an outline that shows the hierarchy of web pages in terms of navigation. You can think of a sitemap like a table of contents in a book, or an organizational chart.

A wireframe is a schematic of a web page, showing where the main elements of the page sit. Wireframes show only the relative size and position of content and functions; they do not include visual elements such as color or images nor do they contain real blocks of text. You can think of a wireframe like a pencil sketch.

The following is an example of a wireframe:

Functions

A function is an action-oriented part of a website, for example, a shopping cart, inquiry form, or downloads. Functions always relate to that we want our website users to perform, and it's important to know from the beginning what these are and what each function has. Functions are enabled and restricted by the technology we use. So, in our case, the set of functions available to us is defined by what is possible using the Squarespace system.

Content

This one is pretty self-explanatory. The content of a website to the text and other media (such as PDFs or videos) that sit within each web page. Sometimes, the will be provided by someone other than you, such as a marketing or communications staff member, or from a third party, such as a photographer, stock photo agency, or copywriter. Often, the content will need to be reformatted or reworked in order to make it suitable for use on a website.

Aesthetics

Many people would refer to aesthetics as design. However, other such as structure (the size and placement of things) and content (photographs or length of text) also play a role in design. Therefore, it's easier to keep things distinct if we avoid this term, which can be broadly interpreted, and instead narrow our focus down to the way things look and feel. This means we are talking about colors, fonts, and graphic elements such as lines and patterns, not content or structure. The feel part of look and feel is quite important but harder to define. This is the tricky bit: it refers to how the website appeals to your emotions. Authoritative, refreshing, playful, vibrant, or Zen are just a few examples of emotive words that can describe a site's feel or overall impression. These words will be critical in helping you choose colors, fonts, and other visual elements to fit with your desired impression. They will also play a role in content choices such as types of photography, tone of voice, and writing style.

Writing a website plan

Now that we understand the different of a website, we can start to lay out the project plan or roadmap for this project. Your website plan keeps you focused, ensures that your messages are right, and sets the overall direction of your project. Your website plan is one of the most important parts of your Website Toolkit, so take your time on it, get it right, and keep it close to hand so that you can refer back to it easily.

Note

You can download a sample website plan template from this book's support bundle page on the http://www.packtpub.com/support website.

The website plan is laid out for you in the following sections, along with some sample answers and helpful questions to ask yourself so that you can ensure that you are on the right track when writing yours. Some of this information may already be available in your business, such as within your branding guidelines or annual reports. Don't just leave it there; put it into your website plan. For smaller businesses or those without such documents, there's no time like the present to sharpen up the way you communicate about your business, so let's get started. Many of the items included here can be used for other communication projects, too.

About your business

The first section of your website summarizes your business and how it should be presented online.

Business overview (the "elevator pitch")

Describe your business in 2-3 sentences. Focus on what you do, what makes you different, and what your strongest selling points are. What are key reasons your customers choose you instead of the competition?

Here's an example: Floribunda is a boutique florist that specializes in supplying unusual varieties of flowers to the wedding and catering trade. We create truly unique and distinctive arrangements by including colors and types of flowers that aren't available through any other florist in the tri-county area. Unlike other local florists, we have direct links with the best growers and only ever select the freshest, highest quality blooms.

Slogan (also known as, tagline or strapline)

Now, condense it down even further: does your business have a slogan or strapline that clearly defines what you offer in terms of uniqueness, benefits, or features? If not, you may find it useful to write one, as it will come in handy for your website. Ensure that it is no than 10 words long, and up http://www.thesaurus.com/ if you need word inspiration. Think about some of your favorite brands and the kinds of short, punchy phrases they use to communicate about their business.

The following are some examples:

lastminute.com: Book cheap, last-minute travel deals
BMW: The ultimate driving machine
Oxfam International: The power of people against poverty

Brand image

List your company's brand values. If you don't some already, think about how you would like your business to be perceived and list 4-5 descriptive words or phrases that you want people to feel about your business when they encounter your website.

Some examples are: fresh, confident, down to earth, powerful, simple, rational, fun, energetic, cheeky, inexpensive, relaxed, quirky, luxurious, trustworthy, edgy, youthful, and refined.

About your audience

This section who will be coming to your website and why.

Your customers (the site's target audience)

Describe your customers. Pay special attention to their demographics (income, interests, gender, and age) and comfort with technology. If your website is a business-to-business site, exactly what sort of companies are you hoping to attract, and which level and type of staff members will access your site? If you have more than one type of customer, split them into primary and secondary audiences.

It may help you to think about your customer as a single individual, including his/her life experiences, job, favorite TV shows, brands, or books. How often does s/he go online, and what websites does s/he visit? In the web industry, we call this a user persona, and we think about what this person would want or do, whenever we are developing the site.

Note

Be specific when defining your target audience. "Women" is not a target audience. "Upper middle-class French women over 50 who love good food" is much better.

Primary purpose

What is the main reason that target customers would come to your website? What action do you want them to perform? If there is more than one desired outcome, please prioritize them.

Some examples include: buying a product, joining your online community, downloading a brochure, sending an enquiry, or calling your company.

About your website

The About your website part of website plan helps you focus on what you want your website to do and includes some considerations you may need to take into account for this project.

Goals

What are the main goals you have for website? What business objectives are you hoping to meet through this project? If this website will be replacing your old site, what do you want to be different/better about this one?

Some examples include: generating sales, increasing leads, improving brand awareness, and reducing emails to your customer support team.

Functions

Thinking about customers and the primary purpose described in the previous section, list the functions that your website will need to perform, in order of priority.

Some examples are: online shop, newsletter signup, RSS feed, and calendar of events.

Content

Briefly summarize the source, volume, and type of content for site. Where will the content (text, images, downloadable files, videos) come from? Approximately how much content do you have in terms of the number of pages? Is it available now? If not, when will it be ready? If it's coming from an existing source, will it need to be adjusted in any way to make it fit for your website?

Note

A content preparation checklist is included in this book's support bundle on the http://www.packtpub.com/support website.

Integration

Are there any pre-existing systems or tools that website will need to integrate with or link to?

Some examples include credit card payment gateways, social media sites, and email newsletter systems.

Site management

Briefly, summarize the site will be managed. Who will be responsible for keeping the site updated? How often will it be updated? If you will have a blog, who will moderate the comments? If you will have an online shop, how will the fulfillment and inventory process be handled?

About this project

The last part of your website plan is about the of this project.

Project team

Who will be in this project, and what role will each person play? Even if you are doing this on your own, it's useful for you to note the project roles, because you will need to allow time for them in your schedule.

Some role examples are: final decision maker, content provider, proofreader, tester, designer, copywriter, cost approver, and project manager.

Project timelines

When do you your website to go live? Are there any key dates to bear in mind (for example, big meetings or holidays)? Setting a realistic timeline is important, and the amount of time your project will take depends on many variables. When setting your target date, review what you have written in your plan so far, as follows:

Content: How ready is it? Always allow time to reformat and adjust it.
Functions: How many and how complex are they? For example, if you need to set up an online shop, think about how many products you will need to configure.
Team: Will everyone you need be available at the drop of a hat?

Remember to factor in your own availability or any other restrictions. Based on all of this, you should be able to come up with an estimated date. Now, add 30 percent extra time to this estimate, as contingency. Put this date on your calendar... in pencil.

Note

Always set a preferred go-live date. Even if you don't have a specific date in mind, it can be useful to set an arbitrary date as your target to give you something to aim for, and to keep the project momentum.

Project budget

What is your for this project? You will need to budget for your Squarespace subscription, domain name (Squarespace includes one for free if you pay your subscription annually), and you might also want to set aside some money for things such as stock photo licenses and logo design. Remember, you don't need web hosting with Squarespace, so you won't need to budget for that.

Note

You have just completed the first—and the most important—part of your Website Toolkit, your website plan. You may want to print out your plan and put it in a folder next to your computer. You will need to refer back to it often.

Gathering materials, ideas, and inspiration

Now that you have your plan and you where you are headed, the next steps are to do some research and put together the rest of your Website Toolkit. The following sections can be carried out in any order, with some parts leading naturally to others as you work.

Creating idea boards

An idea board is a collection of or inspiration that you can use as a reference when creating your site. An idea board is similar to the of a mood board in fashion or interior design, but you will use them for more than just inspiration on color and style (mood), and ideally, you should have multiple boards for your website project. You might have one idea board to collect photography inspiration, another for web page layouts that you like, and a different one for collecting websites with great text content.

Online tools such as https://www.pinterest.com/ or https://evernote.com/ allow you to collect things from around the Web and store them in different boards (Pinterest) or notebooks (Evernote). Although Pinterest is the easiest to use, Evernote allows you to store screen grabs with annotations such as arrows or circles, in addition to photos and web links. Either tool will work for your website project idea boards.

The following screenshot example shows a private Pinterest board that was used for planning the http://www.square-help.com/ website:

Your idea boards will be used for the work we'll do in the rest of this book, so it's a good idea to start them now and continue to add to them and edit them as you move through the early stages of your project.

Website inspiration

Just as an architect existing buildings and draws upon them for inspiration, I encourage you to start your research by looking at other websites to find out what you think would work well for your target audience. It's important to focus on what will resonate with your target audience, which may not necessarily be things that you like personally.

Note

Visit https://www.webbyawards.com/winners/ and check out the winners in the Best Practice, Best User Experience, and Best Visual Design categories for inspiration from websites to help inspire you.

When looking at other websites, remember the four components of a website: structure, content, function, and aesthetics. If you find a site you like, mentally break it down into these components and try to figure out exactly why you like the site. Which of the four components is really working well on the site?

Pay close attention to the following:

Call to action: Is it clear what action the website owners want site visitors to perform?
Page elements: Does the page have a clearly defined header, navigation area (possibly more than one), body, footer, and/or sidebar that would work well on your site?
Audience fit: What elements of the site make it work well for its target audience?
Brand image and perception: What emotive words do you feel when you look at the site? How does the choice of words, images, and aesthetics support this?

Note

Keep good, clear notes in your idea boards. Consider creating an idea board for each of the four different website components, or add a text note or screen grab that shows what component(s) you like when you add the site to your idea board so that you can easily remember them later.

Don't just look at your competitors' sites; doing so means you will likely focus too much on content alone. Try to expand your research into other categories. After all, your target customers are probably visiting a wide variety of websites.

Other resources for inspiration

Whereas looking at other is an activity that can help you narrow down your preferences, looking at things such as colors, fonts, and imagery can quickly become overwhelming and seemingly endless due to the sheer volume of choices available. We'll tackle these elements in earnest inChapter 5, Adding, Editing, and Arranging Content in Your Web Pages, andChapter 8,Tailoring Your Site's Look and Feel, where you'll be introduced to some resources and tools to help make things easier. For now, just make a note of any aesthetic elements you like as you go along, and be rest assured that we'll do more research and hone things down when we start building your site.

Creating a sitemap

Your sitemap lays out the structure of your website, acting as a blueprint for building. The sitemap is the foundation of your information architecture, which is a word to describe the way in which visitors move around your site. Good information architecture is essential to enable your target audience to take the desired actions on your site. If visitors can't easily find what they need, they will leave in an instant.

Even if you start out by writing things on paper, it's a good idea to make an electronic version of your sitemap, because you will be able to copy/paste page titles directly into Squarespace later.

Note

The card sorting technique can be a useful way to quickly map out your website structure. The following blog post explains the and how to use it: http://bit.ly/umh-pages-content

Some people like to use software such as Microsoft PowerPoint, Apple Keynote, or Google Drive Drawings to layout their sitemap in a flowchart (organizational chart) style. Others prefer to use a word processor and create the sitemap as a text outline. Whichever way you choose, remember the following tips.

Don't make your customers work hard

Remember your customers' primary and ensure that your site structure makes it easy for them to perform that action. Put yourself in their shoes and think about what they expect to see in your site, and where.

This is especially important if you are creating a website to replace an existing one. Don't just copy your existing site structure; take the time to revisit your site through the eyes of a customer.

Break it down

You may many or just a few pages for your website. Either way, it's worth remembering that not every page or link is created equal. You can use a footer or sidebar on your website to house links to the less important information, such as terms and conditions, newsletter signup, or delivery information.

If you have several key areas, you might want to break them down into subpages to keep each page short and sweet.

Keep it simple

Don't use jargon or uncommon words as labels for site pages or sections. A first-time customer won't know that The Scoop is your news page, KDD Lite is the internal name for one of your services, or Gimme Gimme Gimme is your online shop section. You less than 2 seconds to show your customers what they came for; don't make them have to think about what things mean.

Try to use common words such as Home, Shop, and Contact, because today's web users are accustomed to these labels. Unless your brand or product names are well known, consider using more general terms as labels for the pages or sections.

Even if one of your brand values is quirkiness or playfulness, you can convey this through your text, images, and visual elements-keep your navigation labels clear and concise.

Consider action words

One trend in website navigation is to action words. This can make your site feel more inclusive and dynamic, and encourage your visitors to perform certain tasks. If you do this, be careful to ensure that the words are still clear and concise. The following table shows some examples:

Passive words	Equivalent action words
Newsletter	Sign Up
Store	Go Shopping or Buy Now
Enquiry Form	Contact Us or Get In Touch
About Us	Meet the Team
Location	Find Us
Membership	Join Now

Include notes or wireframes

As you go along, include any to yourself that you need to remember, such as cross-linking pages between sections or links to external sites as Facebook.

You might find it easier to keep notes in separate schematic drawings for certain pages. If so, go ahead and make some page wireframes (sketches) in addition to your sitemap. Tools as https://moqups.com/,http://lumzy.com/, or Google Drive Drawings can create simple wireframes and are useful if you need to share your ideas or get approval from colleagues.

Once you have finished your sitemap and wireframes, have someone else look them over to sense-check. This could be a colleague or friend, ideally someone who fits your target audience.

Note

Avoid reinventing the wheel. Refer back to the websites in your idea boards when working on your own sitemap.

Gathering raw materials

One of the most time-consuming parts of your Website Toolkit is likely to be gathering your raw materials. You might have some of the materials you need already, or you might need to get them from someone else. Starting the process now rather than later in the project means you/they will have enough time to pull everything together in the right format without causing delays to your overall timeline.

Create a folder called Materials in your Website Toolkit folder. Take a moment now to run through each of the following sections, and place copies of your materials inside. If your materials are not ready yet, now is the time to get the ball rolling on sourcing and finalizing them. You don't necessarily need to have everything 100 percent complete before moving on to the next chapter, but you should definitely start gathering materials now, and continue to fine-tune things as you progress into the early stages of building your website. Refer to the content preparation checklist (included in this book's support bundle) to help with your content gathering.

Branding

If your has a logo, approved brand colors, and fonts, you'll have a head start on your site's look and feel. If you don't have things, don't worry; you can create them or source them inexpensively.

Logo

If you don't have a logo yet, you a few options:

Create a text-based logo as part of your site design. There are hundreds of fonts to choose from in Squarespace, so you can simply create your logo on the fly directly in the Squarespace system as part of the designing process later.
Use Squarespace Logo (http://squarespace.com/logo) to create a logo design yourself. Squarespace subscribers can create a logo for free with Squarespace Logo. Alternatively, try the logo creation tool at https://www.canva.com or https://www.graphicsprings.com/ to make your own logo.

Note

We'll cover Squarespace Logo in more detail in Chapter 8, Tailoring Your Site's Look and Feel.

Pay a graphic designer to create a custom logo for you. If you don't know a designer, try an online marketplace such as http://www.guru.com/,http://99designs.com/, or https://www.freelancer.com/ to find one.
Use a stock illustration as your logo. Most of the main stock websites such as http://www.istockphoto.com/ or www.shutterstock.com offer illustrations for a very reasonable cost. Try searching for the word "logo" or "icon" in the Illustrations category. You might wish to collect a few different options on an idea board before deciding on a final choice.

If you already have a logo or will be sourcing one, it's important to get a copy in the right format:

File format: .png or .jpg format
Color space: RGB or sRGB (not CMYK, which is used for print only)
Resolution: 72 dpi/ppi (pixels per inch)
Maximum dimensions: 1500 pixels wide

The dimensions and resolution are not as important as the other formatting options, as you can adjust the size in Squarespace's image editor later, if necessary.

Note

It’s a good idea to get your logo as a .png with a transparent background. This will ensure you can use the logo overlaid on top of different colored backgrounds or images.

Colors

If your company has colors, you will need to get the colors in the RGB or hex format. RGB (red, green, blue) is the method that backlit screens such as computer monitors or smartphones use to colors. Hex (hexadecimal) color is a 6-digit alphanumeric way of presenting RGB colors, used in web design. Squarespace can use either RGB or hex colors.

The following is an example:

Color: dark gray
Hex: #333333
RGB: rgb (51,51,51)

Note

Store your color references in a .txt file so that you can easily copy/paste them into Squarespace later.

If you don't have brand colors or you need to source additional colors, we'll do so in Chapter 8, Tailoring Your Site's Look and Feel.

Note

You can convert CMYK colors to RGB or hex format using an online tool. Search for cmyk to rgb converter in your favorite search engine.

Fonts

Once we start the site, you'll be able to choose fonts from the 600+ fonts available within Squarespace, but some companies have specified fonts in their branding guidelines--and some require paid licenses for use. If your brand includes fonts such as these, you might need to source similar alternatives from the fonts that Squarespace offers, unless your brand uses Typekit fonts, which can be integrated and used on your site without custom coding. We'll cover fonts in more detail in Chapter 8, Tailoring Your Site's Look and Feel. For now, make note of any special fonts associated with your brand, and find out about any licensing issues so that you'll have plenty of time to resolve them before the go-live date.

Text content

If you will be migrating from another website to your new site or drawing from printed materials such as brochures, it's a good idea to carry out an audit of that content with your new sitemap as your guide. Regardless of whether you will be writing from scratch or reformatting the existing text, remember the following:

As a general rule, search engines prefer web pages that have at least 250 words.
Use as many words as necessary to convey your message, but keep your text focused.
Use short paragraphs and dividing elements such as sub-headers and bullets to help break up long pages. Consider breaking really long pages into multiple pages, or incorporating section breaks to clearly demarcate topics.
Keep in mind your brand image and your site's desired feel when writing; ensure that your writing style, tone of voice, and choice of words reflect the image you want to convey.

Photos

If you already have photographs that you to use on your site, do a quick review of them with your brand image and site's desired feel in mind.

Note

Unless you will be using them for very small thumbnails or icons only, all images should be at least 800 pixels on their longest side and, ideally, 1500 pixels on the longest side. If you expect to use images that fill the screen, you’ll need those to be at least 2000 pixels wide. Refer to http://bit.ly/umh-image-format for further advice on formatting images for use on the web.

Squarespace caters for all sizes of screen, from large computer monitors to small phones, and it will resize images automatically to fit. There are also cropping and other image-adjustment tools built into Squarespace as well.

Note

Make sure your image files are no larger than 1MB, ideally even smaller. JPEGMini is a handy tool that can compress files without a visible loss in image quality. You can access it here: http://www.jpegmini.com

If you don't photos yet but want to source some, have a look at the following sites for ideas:

The photos on Pexels are free, but the others are paid sites. You should probably hold off on purchasing photos until you have selected your template in Chapter 3, Working with Squarespace Templates, but you can create a shortlist of photos in an idea board.

Downloads

If you will be offering downloadable files on your site, ensure that they are formatted in an accessible way.

Note

Use PDF for documents, MP3 for audio, and ZIP for multifile folders.

Avoid file formats that will require users to have platform-specific or niche software to open them.

The maximum file size allowed by Squarespace is 20 MB, but this is far larger than necessary for most everyday purposes. A good rule of thumb is to aim for file sizes of no more than 1-2 MB, or 5 MB for long PDF brochures or sound files.

Note

Name your files in a logical way that will make sense to your customers. Use hyphens or underscores instead of spaces, as web browsers can have problems with spaces. Good: jump-sportswear-price-list.pdfNot so good: 020333871 V3 final-aug2017.doc

Videos or audio streams

Squarespace does offer video hosting or streaming, but you embed videos hosted on other sites such as http://www.youtube.com/ or http://vimeo.com/. You also embed streaming audio from sites such as http://soundcloud.com/ into a Squarespace web page.