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:

1. 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.
2. 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.

3. 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.
4. 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:

• http://www.pexels.com/
• http://www.istockphoto.com/
• https://creativemarket.com/
• http://www.shutterstock.com/

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.

Note

Create a .txt file and paste the links to your videos or audio streams into the file so that you will have quick access to them later.