Book Image

Building Business Websites with Squarespace 7: RAW

Book Image

Building Business Websites with Squarespace 7: RAW

Overview of this book

Table of Contents (22 chapters)
Building Business Websites with Squarespace 7
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Squarespace Templates in a Nutshell
List of Online Resources Used in This Book
Index

Gathering raw materials


One of the most time-consuming parts of creating 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 have 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 company 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 these things, don't worry; you can create them or source them inexpensively.

Logo

If you don't have a logo yet, you have 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 simple logo design yourself. Squarespace subscribers can create a logo for free with Squarespace Logo. Alternatively, try the logo creation tool at https://www.graphicsprings.com/ to make your own logo.

    Tip

    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 committing to buy your 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.

Colors

If your company has brand 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 present 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.

Tip

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 building the site, you'll be able to choose fonts from the 300+ 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. 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 content 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 subheaders and bullets to help break up long pages. Consider breaking really long pages into multiple pages.

  • 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 want 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.

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.

If you don't have photos yet but want to source some, have a look at http://www.istockphoto.com/, http://www.thinkstockphotos.com/, https://creativemarket.com/, or http://www.shutterstock.com/ for ideas. 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 any 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.

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.pdf

  • Not so good: 020333871 V3 final-aug2014.doc

Videos or audio streams

Squarespace does not offer video hosting or streaming, but you can embed videos hosted on other sites such as http://www.youtube.com/ or http://vimeo.com/. You can 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.