Understanding the process of making a website
Constructing a website is a lot like constructing 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. 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. 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 time again throughout the project. 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. 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 building 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 sum total 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 refers to the way in which the different elements of a web page or website are put together. In the web industry, we often use tools such as sitemaps and wireframes to define 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 drawing 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.
A function is an action-oriented part of a website, for example, a shopping cart, inquiry form, or downloads. Functions always relate to actions that we want our website users to perform, and it’s important to know from the beginning what these are and what priority 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.
This one is pretty self-explanatory. The content of a website refers to the text and other media (such as PDFs or videos) that sit within each web page. Sometimes, the content 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.
Many people would refer to aesthetics as design. However, other components 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 components 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.
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 plan 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 the 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 (a.k.a. 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 more than 10 words long, and open up 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
- Qantas Airlines – All-inclusive airfares on Australia Pacific’s best airline
- Oxfam International – The power of people against poverty
List your company’s brand values. If you don’t have 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 describes who will be coming to your website and why.
Your customers (the site’s target audience)
Describe your typical 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 always think about what this person would want or do, whenever we are developing the site.
What is the main reason that your 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 your 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.
What are the main goals you have for your 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.
Thinking about your 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.
Briefly summarize the source, volume, and type of content for your site. Where will the content (text, images, downloadable files, videos) come from? Approximately how much content do you have in terms of 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?
Are there any pre-existing systems or tools that your website will need to integrate with or link to? Some examples include credit card payment gateways, social media sites, and email newsletter systems.
Briefly summarize how 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 logistics of this project.
Who will be involved 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.
When do you want 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 in your calendar… in pencil.
What is your budget 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.
Gathering materials, ideas, and inspiration
Now that you have your website plan and you know 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 ideas or inspiration that you can use as reference when creating your site. An idea board is similar to the concept 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.
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.
Just as an architect studies 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 like and what you think would work well for your target audience. 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 are really working well on the site?
Play 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?
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 websites 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. 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 overall structure of your website, acting as a blueprint for building. The sitemap is the foundation of your information architecture, which is a fancy 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. 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 purpose 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 have 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 have 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 use 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.
Include notes or wireframes
As you go along, include any notes to yourself that you need to remember, such as cross-linking pages between sections or links to external sites such as Facebook. You might find it easier to keep some notes in separate schematic drawings for certain pages. If so, go ahead and make some page wireframes (sketches) in addition to your sitemap. Tools such 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.
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. Refer to the content preparation checklist (included in this book’s support bundle) to help with your content gathering.
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.
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.
- 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.
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)
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. 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.
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.
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. 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.
If you will be offering any downloadable files on your site, ensure that they are formatted in an accessible way. 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.
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. 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.