Menu

How To Make A Website

The Definitive Guide

Hi, I’m Steve Benjamins. My websites have been featured in Wired, The Next Web and Forbes. And in this guide for beginners I’m going to show you how to create a website, step by step.

Me

Me, Steve Benjamins

Here’s my promise to you: if you just buckle down for the next 30 minutes— you’ll know more about building good websites than a lot of web designers.

This guide will teach you to create great websites without ever touching code.

I'll cover all the secrets to the trade:

  • Where to find free stock photos that don't suck.
  • How to make logos transparent.
  • The honest, no-BS truth about SEO.
  • How to put that little © in your footer
  • Setting up email on your own domain name.
  • Why your business might not need social media.
  • What to write and HOW to write it.
  • ... And much, much more.

Let's do this!

Introduction


Meet Nick.

Nick and I play in the same band together. He's my friend.

66933190 1091265334403295 4977676055148810172 n Nick hanging out with his son.

Nick runs Sgt Nick's Drums, a company selling handmade, decorative drums. Right now, Nick sells the drums on Etsy.

Sgt Nick's Drums doesn't have a website— so I decided to build him one.

I'm going to walk you step-by-step through creating Nick's new website. Along the way I'll share tips and tricks that you can apply to your own website.

Nicks homepage.png?1570647171?ixlib=rails 2.1

A look at that final website we built for Nick.

Watch as a Video:


What I Believe


There are my three rules for great websites. I'll refer back to them throughout the guide:

1. Choose a Goal

Your website isn't an end in of itself. It needs to accomplish something for you. Sgt Nick's Drums is an artisanal business— so my goal is to introduce customers to Nick, the real-life, artist making each drum by hand.

2. Be Human

Human works on the internet. People will respond to your website if you make it clear there is a real, live human behind it. This is doubly true for an artisanal business like Sgt Nick's Drums.

3. Less Is More

People don’t read websites, they scan websites. Distill everything down to the essentials. (Doubly important because website content needs to fit on mobile screens as well as desktop screens.)

What We'll Use


You don't need to code to build a website in 2019.

I'm a professional web developer and I don't code small websites by hand anymore. It's stupid. It's overkill.

These days I just use Squarespace to build small websites. I use Squarespace for my Mom's therapy business, my personal website and my band's website.

We're going to build Nick's website with Squarespace— though the guide will still have plenty of helpful information if you're using something else.

Squarespace.png?1571838942?ixlib=rails 2.1

Thsi is Squarespace. It's my tool of choice for small websites. It's like the Apple of website builders.

If you buy Squarespace through a link on this page I will earn a commission— though I'm not just recommending Squarespace because they pay me an affiliate commission.

In fact, other website builders have offered to pay me 4 times whatever Squarespace is paying me and I turn them down. I recommend Squarespace because I really sincerely believe it's the best option for most people.

Get 10% Off Squarespace — Click this link and use my offer code PARTNER10.

I've written dozens of articles explaining why I recommend Squarespace over competitors like Wix and Wordpress— but the short version is that Squarespace has beautiful templates that turn into beautiful websites. Plus it's intuitive to use.

And hey, if that’s not enough— even Elon Musk uses Squarespace.

Chapter 1

Getting Started

To start, sign up for Squarespace. The first step will be choosing your Squarespace template.

We’re going to use the template Jaunt, found under the Online Stores category.

Jaunt.png?1570487002?ixlib=rails 2.1

Choosing a template— for the sake of this guide we'll be using Jaunt.

Don’t worry about finding the perfect template at this step. It usually takes trying a few to find the template that feels right. And remember: you can always switch your template later.

Once you choose your template, you’re in. Welcome to Squarespace.

Welcome3.png?1570712277?ixlib=rails 2.1

Welcome to Squarespace.

The first thing we’ll want to do is add our logo. So from the sidebar, click Design and then Logo and Title.

First, add your Site Title. Then if you have a logo, upload it. If you don't have a logo, Squarespace will automatically give you a text logo.

Site title logo.png?1570712654?ixlib=rails 2.1

Add your Site Title and upload a logo.

If you logo has a white background, here's how do you make it transparent— it's easier than you think. (Skip to the next chapter if this doesn't apply!)

The first thing to know is that JPG files do not support transparent backgrounds. So if your logo is a .JPG it will need to become a .PNG with a transparent background.

White bg.png?1570713030?ixlib=rails 2.1

Logos with a white background are an easy fix.

You can create a transparent background with Adobe Photoshop but there's also a free and easy tool called Lunapic if you don't have Photoshop.

With Lunapic, you just upload your image and click the color that you want to make transparent:

Lunapic1.png?1570713375?ixlib=rails 2.1

Click the color you want to be transparent.

Then save the transparent image— in the Google Chrome browser you would right click and choose Save Image As. Remember to save the image as a .PNG file.

Lunapic2.png?1570713429?ixlib=rails 2.1

Remember to save your image as a .PNG file.

Finally upload your logo to Squarespace and you're good to go!

Now that we've added a logo, let's create our first page: the homepage.

In the home screen of the sidebar click Pages.

Home sidebar.png?1571229609?ixlib=rails 2.1

This is the home screen of the sidebar.

To create a new page, click the + button beside Primary Navigation. Then in the next screen, select blank page (the other options are for pre-built templates, which we’ll cover later). Finally, give this page the name Home.

The plus.png?1571230107?ixlib=rails 2.1

Click this button create a new page.

Next click the gear icon that displays when you hover over our new page. This will open the page settings:

Gear.png?1571230277?ixlib=rails 2.1

Click this gear icon

Scroll down the page settings to where you find “Set As Homepage.” Click it.

This will make our new page the homepage— which basically means it's the page that will come up when someone types in sgtnicksdrums.com.

Set as homepage.png?1571230430?ixlib=rails 2.1

Setting our new page as the homepage.

Next we’re going to delete all the Squarespace demo pages. If you’d like to save any of these demo pages for reference you can just move them them (by clicking and dragging) to the Not Linked section.

Note: If you accidently delete a page you can always restore it with Squarespace’s Deleted Pages option found in the bottom of the sidebar:

Pages before and after.png?1571230717?ixlib=rails 2.1

Delete the Squarespace demo pages (left) to start from a clean slate (right).

Next we’re going add 3 more blank pages— these will be the building blocks of our website.

Creating our pages.png?1571230877?ixlib=rails 2.1

These four pages will be the building blocks of our website.

So below is what our website looks like currently. Next we're going to make customize our navigation and logo to make them more bold.

Creating our pages.png?1571230877?ixlib=rails 2.1

Our next step is to make the navigation and logo bolder.

Go back to the sidebar home and open the Style Editor by clicking DesignSite Styles:

Once we're in the Style Editor you can click an element on the website to reveal the style options available for that element. So click the navigation:

Click navigation.png?1571231329?ixlib=rails 2.1

Click the navigation to reveal it's style options in the sidebar.

We're going to make several changes to the navigation: we'll increase the font size, set the text transform to none and change the font to Proxima Nova— which is the font we'll use everywhere on Nick's website.

Header change.png?1571231645?ixlib=rails 2.1

Here's our new navigation style— you can see the exact changes I made in the sidebar.

Now click the logo to reveal style options for the logo and add increase the logo width from 150px to 180px. This will match the now bigger navigation:

Logo width.png?1571231981?ixlib=rails 2.1

Increase the logo width to 180px.

Adding Social Media Icons


Nick is very active on Instagram and Facebook. Because of that, I want to add Instagram and Facebook icons in the navigation.

Now don't add social icons if you're not sure you need them. Don't just do social media because you think you need to. Empty social media accounts look bad.

You also don't need social media if you business doesn't have anything interesting to post. Sgt Nick's Drum's is an artisanal business, so social media is an opportunity to introduce customers to Nick, the person behind the product. It's a way to build trust.

So let's get started.

Squarespace requires us to connect our social media accounts to add social media buttons in our navigation. We do this by clicking SettingsSocial Links from the Home sidebar. Then we add Nick's Instagram and Facebook profiles:

Social links.png?1571232148?ixlib=rails 2.1

Adding social links for Sgt Nick's Drums.

Next open the Style Editor and scroll down to Header: Layout and set the Social Position to Top Right:

Social position.png?1571232284?ixlib=rails 2.1

Set the Social Position to Top Right.

Then click Save and reload the page.

Finally, adjust the styles of the social icons to sit nicely along the navigation. I changed the style to soild and the color to black:

Social custom.png?1571232418?ixlib=rails 2.1

Customizing the styles of the social icons to sit nicely along the navigation.

Tips For Effective Website Navigation


You should think of website navigation like elevator buttons: people use it to get somewhere. It needs to be simple and positioned in a consistent place.

So don't put navigation in an unusual place. Nick's navigation is in the top-right corner and that's perfect— it’s conventional, most people will expect it to be there.

Occasionally navigation can be placed vertically along the left:

Horizontal.jpg?ixlib=rails 2.1

What we don't want to do is be unconventional with navigation. Don’t try to impress visitors with an unusual, creative navigation— visitors will have to spend time "figuring it out." When navigation is conventional, visitors don't have to think.

Only have a few links in your navigation. Resist the urge to have more than seven— you don’t want a wall of links. Instead, 4-5 links is ideal. This is a suggestion, not a rule. One common exception is ecommerce websites, which often need a catalogue of links. Just be sure to break the links into groups.

Amazon.png?1536259254?ixlib=rails 2.1

Amazon is the exception to the rule— they have many links. But notice how even in their case, links are organized into smaller groups?

Note — A website's logo should always link to the homepage. Many people forget this but fortunately Squarespace automatically does this for us.

Chapter 3

Page #1: My Story

Let's build our first page: My Story. This page could also have been called About Us but I decided to name it My Story because I wanted it to feel intimate— Nick is selling a handmade product after all.

So navigate to 'My Story', hover over the body and click Edit:

Page content.png?1571339375?ixlib=rails 2.1

Click 'Edit' to being editing 'My Story'.

Then let's add a heading:

My story h1.png?1571340605?ixlib=rails 2.1

Create a heading by writing text and then setting it as 'Heading 1.'

Next we're going add a bio that I wrote for Nick. I'm going to arrange his bio into columns to give it a readable, newspaper-style feel:

My story two columns.png?1571340759?ixlib=rails 2.1

You can snap text into columns by dragging and dropping.

When arranged in columns I felt the text was a little wide— so I added spacers on both sides:

My story spacer.png?1571340863?ixlib=rails 2.1

I added spacers so the text wasn't quite so wide.

How To Write For Websites


In order to write Nick's story, I actually interviewed him. I did this because I wanted Nick to talk conversationally.

Most people use corporate jargon or vapid catchphrases about customer support when they try to write content for their website.

Don’t be those people.

Good website writing is conversational. Imagine you're having a coffee with a friend and they ask you to explain your business. How would you talk? What words would you use? That’s how you should write.

That’s why when I set out to write Nick’s Story, I started by talking about a Christmas gift:

It started with a Christmas present.

In 2017, my wife and I thought it would be cool to give her father a Sgt Peppers style decorative drum for Christmas.

We looked around the Internet and were surprised that we couldn’t find any— which seemed liked a shame.

So instead of buying I decided I would just make it myself.

I started by re-creating...

Admittedly I'm a web designer— not a copywriter. So my writing might not blow you away but it should at least feel conversation.

One last tip: People don’t read websites, they scan websites. So don't bombard them with walls of text. I tried to distill Nick's story down to the essentials. Less is more.

Tip: Don't Write About Yourself


Writing about yourself is a common mistake. Instead, write about your audience. What does your audience want? What do they care about? What problem are you solving for them? That's what you should write about.

Admittedly I don't do a great job of this with Sgt Nick's Drums— in part because it's an artisanal product and I wouldn't to tell Nick's story. So instead let me demonstrate with an example of a cleaning service.

Here's an example of writing for yourself:

We are a professional house cleaning service based out of Toronto, ON. We serve the greater Toronto area and have the best rates in town. Our cleaners are professional and punctual. We offer the highest level of service to all our customers.

And here's an example of how to write for an audience— this is much better:

Are you tired of cleaning your own home? Our greater Toronto area cleaning service specializes in helping busy professionals like yourself. We promise to get your house squeaky clean so you have more time to do the other things you need to do.

Adding a Hand-Written Signature


Because Nick makes hand-made drums I wanted to add a hand-written signature under his story. I thought it'd give it a human feel.

Sinat4.png?1571342512?ixlib=rails 2.1

Here's how I added a signature beneath Nick's story.

First I got Nick to write out his signature on a piece of paper with a marker:

Signat.jpg?1571342118?ixlib=rails 2.1

Nick's signature.

Then I cropped the signature out of the image:

Signat2.jpg?1571342173?ixlib=rails 2.1

Cropped Nick's signature.

Finally I used Lunapic to cut out the background and create a transparent PNG:

Signat3.png?1571342239?ixlib=rails 2.1

CAPTION

Then I added it to the Squarespace website and put some spacers on each side to center it:

Sinat4.png?1571342512?ixlib=rails 2.1

You can see I used spacers to position it correctly.

Testimonials


Testimonials build trust with customers. A good testimonial addresses fears and concerns in order to build trust.

Fortunately Nick has lots of great testimonials on his Etsy story. So I grabbed a few and edited them down:

Etsy reviews.png?1571411763?ixlib=rails 2.1

I grabbed a few testimonials from Sgt Nick's Etsy page.

Before adding the testimonials, I added a spacer and a line to create some distance between the signature and the testimonials:

Spacer and line.png?1571411828?ixlib=rails 2.1

Adding a spacer and a line.

Next I added a small heading (Heading 2):

Heading2.png?1571411912?ixlib=rails 2.1

Adding a heading.

Finally I added three quotes using the quote element and snapped them into columns:

Testimonials.png?1571412053?ixlib=rails 2.1

The testimonials are using the Quote element.

Instagram Feed


The last thing I want to add to this page is an Instagram feed.

An Instagram feed may not be necessary for your website, but Nick has a great Instagram account I thought it could be a nice human touch.

So I added another spacer, line and a small Heading 2:

Instagram heading.png?1571412194?ixlib=rails 2.1

Then I went to Nick's Instagram page and saved twelve photos I liked using GramSave— a free tool for saving Instagram photos. Then I added them as a grid photo gallery, with six photos per row:

Photo gallery.png?1571412446?ixlib=rails 2.1

Twelve of my favorite photos from Nick's Instagram.

Finally I added a button below the photo gallery so customers can follow Nick on Instagram:

Button.png?1571412549?ixlib=rails 2.1


And with that we completed all the content for the 'My Story' page! Next up we're going to style the page to make it look nicer. Here's what we have so far:

Complete page.jpg?1571665282?ixlib=rails 2.1

Our page so far. Next up? Styling.

Chapter 4

Website Style

Right now we're just using the default style settings that Squarespace gives us. Which is okay but I'd like to give Nick's site a unique look and feel.

So open your Site Styles (found under design).

Let's start by customizing Heading 1. I'm going to change it to a font I like called Libra Baskerville. I'm also going make font size a bit smaller and remove the uppercasing:

Style h1.png?1571666020?ixlib=rails 2.1

Our new Heading 1 style

Next up is body text— the most important design element on your website.

Right now our body text isn't very readable. It's too small and low-contrast. Designs should never require low-contrast text to work. Text is meant to be read, never sacrifice legibility!

So let's increase the font-weight (boldness) to 400 and the font-size of the Body Text: