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:
Let's do this!
Nick and I play in the same band together. He's my friend.
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.
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.)
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
Next click the gear icon that displays when you hover over our new page. This will open the page settings:
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
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:
Next we’re going add 3 more blank pages— these 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.
Go back to the sidebar home and open the Style Editor by clicking Design → Site 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:
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.
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:
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 Settings → Social Links from the Home sidebar. Then we add Nick's Instagram and Facebook profiles:
Next open the Style Editor and scroll down to Header: Layout and 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:
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:
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.
Note — A website's logo should always link to the homepage. Many people forget this but fortunately Squarespace automatically does this for us.
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
Then let's add a heading:
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:
When arranged in columns I felt the text was a little wide— so I added spacers on both sides:
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.
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.
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.
First I got Nick to write out his signature on a piece of paper with a marker:
Then I cropped the signature out of the image:
Finally I used Lunapic to cut out the background and create a transparent PNG:
Then I added it to the Squarespace website and put some spacers on each side to center it:
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:
Before adding the testimonials, I added a
spacer and a
line to create some distance between the signature and the testimonials:
Next I added a small heading (Heading 2):
Finally I added three quotes using the
quote element and snapped them into columns:
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
line and a small Heading 2:
Finally I added a
button below the photo gallery so customers can follow Nick on Instagram:
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:
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:
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: