Last Updated September 9 2020
I’m going to walk you step-by-step through creating a new website for my friend Nick.
Nick runs Sgt Nick’s Drums, a company selling handmade, decorative drums. Right now, Nick sells the drums on Etsy but I’m going to show you how I built Nick’s new website that looks like this:
My name is 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.
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.
I’ll cover all the secrets to the trade:
Read on to learn how to create great websites without ever touching code.
Note: My work is supported by affiliate commissions. Read more »
The complete guide to creating a website without ever touching code. Step by step, for beginners. youtube.com
There are my three rules for great websites. I’ll refer back to them throughout the guide:
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.
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.
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.
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!
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 is 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:
Next let’s change the Body Text color to #333333 which is a very dark grey but not quite a pure black (pure black tends to be a bit too intense):
Now let’s style our
Then we’ll style our
Quote Block. We’ll start with the Quote Font:
Next let’s customize the Source Font:
And finally let’s change our
button font to Proxima Nova to maintain consistency:
Now ‘My Story’ is looking a lot tidier!
Squarespace websites are responsive— which means they expand and contract based on the viewport size. Because of this, the website can get quite WIDE on a large screen. So I’m going to change design to Constrained Width so it doesn’t get too wide:
Finally, Squarespace websites often have a lot of padding. But we can get rid of some of that padding since we’ve made the navigation substantially bigger. So I’m going to take the header top padding from 30px to 15px:
… And then take the content section padding from 90px to 30px:
You might have noticed that Squarespace doesn’t allow you to style individual elements.
For example, Squarespace doesn’t let us change the font size of this particular instance of body text (below):
So why does Squarespace do this?
Well on one hand, this helps you maintain a consistent look and feel. You shouldn’t design pages to be their own separate entity— instead a website should have a consistent look and feel.
But there’s also an even deeper reason.
Websites are made of HTML. Text is not just text in HTML— text is always wrapped by a tag. Tags tell browsers and search engines what’s in a tag— for example a heading tag or a paragraph tag.
Tags are critical to websites and SEO. For example when Google crawls the web, they don’t just see big text and assume it’s a heading. Instead Google needs to see a heading tag to know it’s a heading. Squarespace doesn’t let you change font-size individually because they don’t want you to make headings by just increasing font-sizes— they want you to do it the right way.
Choosing colors can be one of the most intimidating tasks of design— I’ve been designing websites for over 15 years and I still don’t really understand how to match colors.
Because of that I lean heavily on preset palettes. For example, I use the Material Design Toolkit for any color I use on my website.
Note: Always think about contrast when choosing colors. Contrast is the foundation of graphic design. Thoughtful contrast makes designs interesting. The most basic form of contrast is between light and dark.
It took me several hours to get the design right for Nick’s website. And those hours were filled with lots of little tweaking. That’s what design often looks like: zooming in and zoom out while making lots of little tweaks.
If there’s one design tip I can give you, it’s this: iterate. A dramatic website re-design can be exciting but the real work is in refining and redesigning over time. Design is about evolution, not revolution.
Here are some more tips:
If a design isn’t working, try to fix the small, bothersome details— then pull out to assess the big picture. Those “small” details are often the solution to what feels like a “big” problem.
Avoid ornamentation. Don’t add elements to websites merely for the sake of visual appeal (underlining a heading, putting borders around pages etc). There should be purpose behind everything.
Make important elements obvious. Visitors can’t use something they can’t find. Critical elements should be consistent and obvious. Never make a visitor probe or search for important elements.
Websites should be scannable. People don’t read websites, they scan websites. Make your website scannable: highpght words, break up paragraphs and use lists when possible.
Paragraphs should be double spaced. Text needs room to breath.
Paragraphs should be between 40-70 characters per line. Don’t let them get too wide. You don’t want paragraphs to look like this:
Avoid system fonts. For a long time, websites could only use system fonts (for exammple: Times New Roman, Georgia, Arial and Comic Sans MS). Fortunately those days are over, and today you’re better off choosing a web-font.
Try not to choose too many web fonts. Web fonts are nice but they come with a performance cost— try not to use more than 2. With Squarespace you can use the ‘Font on Site’ to check where all the fonts your using are.
Find real people and watch them use your website. The best way to assess a design is to see it in context. Ask a friend to browse your website. Don’t step in to show them how to do things— instead watch what they do. You’ll learn a lot.
Websites are just text and images— that’s really it. So finding the right photography is critical. This is doubly important for ecommerce.
Whenever possible, show visitors— don’t tell them. Remember: visitors don’t read websites, they scan websites.
Try to avoid corny stock photography. Stock photography is usually corny when it’s trying to be a metaphor— for example a handshake to signal customer service. Ugh. Studies have found that these types of photos are often ignored.
Since Nick sells products over the internet I knew photography was going to be critical— so I did something drastic. I bought a $100 photo studio box on Amazon:
It was the best decision I made.
The photo box made it easy to get white-backdrop, full-lit product shots:
I used my DSLR camera but you could EASILY get a good shot with modern smartphones.
I did do basic editing of the photos but if you don’t know how to edit your photos there are on-demand services like Pixelz who do photo editing for as cheap as $1 / image.
If you need stock photos you’re in luck— the web is full of excellent free stock photos. Here’s the three places I search:
Now that we have some excellent product photography, it’s going to be really easy to make a ‘Shop Drums’ page.
Navigate to ‘Shop Drums’ and add a
Heading 1 and a
Heading 2. If you’re wondering how I got the little arrow after ‘Get a quote’, hang tight— I’ll get to it shortly.
It’s going to be much easier to to create our ‘Shop Drums’ page since we already have some nice product photos. There’s no reason to over-design a page— if you can make it simple, make it simple!
So I uploaded 2 product photos, added a
Heading 2 and a link to Etsy (where Nick’s customers can fufill their order):
Then I replicated this for a few more products— and we have our page!
I also added a button link to the Etsy store at the bottom of the page!
You might have noticed I used two icons within the text of ‘Our Drums’. I used a middle dot (·) and a double arrow (»).
These are Unicode Characters and you can copy and paste them into the text of any website— including Squarespace. You don’t need to add them as an image or anything.
You can go to TopTal to browse hundreds of unicode icons.
FYI: Unicode characters work in most modern browsers but users with old browsers may not be able to see them— so only use them if the meaning is clear without the unicode chacter.
Next up let’s make our Homepage. The key with this homepage is to make your website purpose clear. You want to visitors to understand what this website is about.
So I made a very clear
Heading 1 to start the page. I favour clarity over cleverness— I could have made this headline something like “March To The Beat Of Your Own Drum” or something but I’d rather be clear then clever.
Next I added a photo of three drums side-by-side:
Then I snapped two buttons into columns and changed their alignment to be left and right to create a centering effect:
And from there I felt good about the homepage. It’s communicates the purpose of the site effectively and moves visitors on to the next step quickly— either learn our story our shop drums!
This homepage took my a while to design— which seems surprising because it’s so simple.
It took me so long because I kept trying to find a way to put Nick on the homepage. I believe websites should always be human. That’s my only regret. Websites can’t be perfect! Better to launch then seek perfection!
Contact pages are workhorses— they’re a small but critical part of lead generation.
Visitors often come to this page to find information so make sure your contact page includes the following if necessary:
Since the ‘Contact’ page is responsible for lead generation— it should be site-wide and obvious. Never make a visitor probe or search for it by hiding it in the footer.
So let’s start by adding two headings. I added a heart emoji for a bit of playfulness (Mac users can always bring up the emoji keyboard by pressing CTRL + CMD + SPACE).
Next, let’s add a contact form.
Make sure that the form is sending submissions to the right email address. Squarespace doesn’t store submissions to this form— so you’ll want to connect it to Google Drive so that all form submissions are saved.
It also doesn’t hurt to edit the post-submit message and the submit button label to give a more personal touch:
Now Nick has decided he’d rather not include his address or phone number here— so instead I’m going to add a photo of him. Again, we just want to keep putting him front and center to show that there is a real-life human underneath this business.
And just like that we have a nice ‘Contact’ page:
Studies have shown that visitors are five times more likely to leave a site if it isn’t mobile-friendly— so it’s critical that websites be mobile-friendly.
It can be tempting to forget about mobile because we design websites on desktop computers and laptops— but that’s a mistake. It’s critical for websites to be mobile friendly.
The best way to make a website mobile friendly is with a responsive theme. A responsive theme shrinks or expands to the device size:
Fortunately all Squarespace templates are responsive. So it’s all mobile friendly out of the box— but we just need to make one style adjustments.
Start by clicking this mobile button to change the website preview to Squarespace:
Let’s change the mobile menu to be Top Right:
Search Engine Optimization (or SEO) is optimizing websites to rank in search engines like Google for specific keywords.
There’s a few optimizations in Squarespace that we’ll want to make sure we’ve covered.
For starters, we want to be able to adjust the title of our pages. The title is what shows on search engine result pages:
So in Squarespace navigate
SEO and we’re going to change the SEO Title Format:
If the SEO Title Format intimidates you, you can skip this step. It’s honestly not going to make-or-break your SEO, but it is a nice to have.
Basically there are three types of pages: Home, Pages and Items. Home is your homepage, pages are pages and items are for ecommerce.
Titles are automatically generated with
%s (the title of your Squarespace website— set in Design → Site Styles), %p (the title the page) and %i (the title of the item).
For Nick, I actually want to write my own title tags for each page— so I changed both Home and Pages to %p:
Now we can navigate to pages and write custom titles for each page. Ideally a title a descriptive and possibly includes an important keyword for the page. So for example, here’s what I wrote for the homepage:
Important: Don’t Keyword Stuff — Don’t try to shoehorn a bunch of keywords here. It should make sense and be readable to human beings. Keyword stuffing is an outdated SEO tactic that can be dangerous.
Setting a custom page title is really just the start. SEO is a whole discipline unto itself.
So how did I do it? Well here’s my best advice: avoid shortcuts. The way to rank in Google is simple— but hard.
I boil SEO down to a few key ingredients:
Are telemarketers promising you the #1 spot on Google? They’re lying. What they mean is they’ll buy Google Ads to promote your website. No one can gurantee you the #1 spot on Google. It’s nonsense.
I’d recommend these 4 resources if you’d like to learn more about SEO:
Hiring SEO Consultants — Avoid anyone who promises SEO results or speaks with authoritative certainty. The two best SEO consultants I’ve hired (Evolving SEO and Siege Media) didn’t hard sell me. Instead, they spoke candidly and honestly about expectations.
Local SEO is SEO done for searches with local intent. You’re probably seen these types of searches in your own Googling:
Local 3-Packs are the most common local result:
Knowledge cards show when people search for specific businesses:
Google Maps is also considererd Local SEO:
So how can you rank in these local SEO results? Here are three best practices:
1. Google My Business Listing
Your Google My Business listing appears in Google Search (in the knowledge panel) and in Google Maps. You’ll definitely want to make sure have control over this listing.
NAP stands for name, address and phone. These three details are the signature that Google uses to follow your business across the web. The more “local citations” you have with this information, the better.
You’ll want to keep you NAP as consistent as possible— inconsistent NAP can confusing to Google— so make sure your business is properly listed on the main review platforms such as TripAdvisor, Yelp, and Facebook.
Regular old website SEO also effects your local business listing— so you’ll want to make sure you’re hitting on the fundamentals of SEO: links, anchor text, linking domain authority and more. See my chapter on SEO for more info.
I am not an experrt in Local SEO. So don’t take my word for it— if you’d like to learn more, I’d suggest these resources:
Your favicon is the small icon for your website that appears in your browser window:
To add a favicon in Squarespace, navigate to
Logo & Title and upload on browser favicon: