What Tool To Use
Wordpress, Squarespace, Weebly, Shopify— it can be overwhelming to decide which tool is right for you. But by the end of this chapter you'll understand the strengths and weaknesses of the most popular tools for building websites.
Website building tools typically fall into three categories:
- Website Builders — These are visual, drag and drop editors. They're easy to use and the right choice for conventional websites. Similar in complexity to Powerpoint. Examples: Squarespace, Wix.
- Front End Design Tools — These are meant for designing websites from scratch. They have steeper learning curves and are similar in complexity to Photoshop. Examples: Webflow, Webydo.
- Content Management Systems (CMS) — Flexible and powerful, these require some understanding of web hosts and possibly database configuration. Examples: Wordpress, Drupal.
To differentiate these tools, I find it helpful to graph them based on flexibility and ease of use:
I recommend most people use a website builder— especially if they're building a conventional website. For example, even though I’m a web developer, I built my band’s website on Squarespace because everything I needed (audio player, photo galleries) was available on Squarespace— there's no point in reinventing the wheel.
I do in-depth reviews of website builders and think Squarespace and Weebly are the two best general-purpose website builders. Wix and Strikingly are good runner-ups. For more, check out my complete list of website builders.
If you're building an ecommerce website, Shopify is the best ecommerce website builder. In fact, I did a survey of ecommerce website owners and Shopify had a 97% customer satisfaction rating— the highest among ecommerce website builders.
So why might someone not use a website builder? Well there are two downsides to website builders:
- Inflexible — Website builders are designed to build a conventional website— which means if you want to do something unusual or out of the ordinary, a website builder won't work for you.
- You can't move your website to a new host — One of the upsides of a website builder is that hosting is included— so you never have to think about it. The downside is that your website needs to stay hosted by the website builders— you can't move it elsewhere. This isn't just website builders being greedy— there are technical reasons for this.
If either of these downsides bother you, I'd suggest taking a look at Wordpress— by far the most popular CMS.
Wordpress is flexible— you can use it to build just about anything. I’ve even seen Wordpress powering an entire university website.
Wordpress is also movable— if you don't like your web host you can always move to a new host— though this requires some technical expertise.
If you'd like to read more, I’ve written more on the differences between Wordpress and website builders .
If you're feeling stressed out about all of this, I have a suggestion: stop researching and just try a tool for 15 minutes. Any tool will do. Simply trying something will clarify what you’re looking for. Still stuck? Send me an email and I'll see if I can help.
Just remember— there are good websites built with bad tools and bad websites built with good tools. The rest of this guide will explain how to build a good website.
Principles: The Secret To Great Websites
Before we go deep into content and design, I want to share four principles that underly everything I'm going to talk about. Follow these principles and you'll be in good hands:
1. Choose a Goal For Your Website
Goals clarify. Establish a goal and keep referring back to it. Habitually ask yourself, "is this page, image or text helping accomplish the goal?"
2. Don’t Make Visitors Think
Websites are meant to be used. They should be clear and intuitive. Don't make visitors think in order to use your website.
3. 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.
4. Less Is More
People don’t read websites, they scan websites. Distill everything down to the essentials. Less is more.
What To Write
"Good writing does not mean fancy writing; it means clean, clear, considerate writing." - David Foster Wallace
Imagine you're having a coffee with a good friend and they ask you to explain your business or organization. How would you talk? What words would you use?
That’s how you should write. In a word— write conversationally.
Write for an audience. Don’t write about yourself. This is a common mistake in writing. What does your audience want? What do they care about? What problem are you solving for them? Write about that.
Here's an example of how to write for an audience:
|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.||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.|
Remember your website is here to accomplish a goal for you. Good writing guides readers towards that goal. Aim to write persuasively but with integrity.
Most Websites Need:
- Hours of Operation
- Holiday Hours
- Phone Number
What content do you need on your website? Look at your competitors— but don’t treat them as the final word. Instead always let your audience guide you: What are their worries? What do they need? That’s the content you should put on your website.
Titles are a the critical part of writing for the web. Your title’s job is to capture attention. Put effort into titles— try brainstorming 15-20 titles before choosing one.
Use formatting to break up walls of text. People don’t read websites, they scan websites. So:
- Use headings and subheadings
- Use lists
- Emphasize important points in paragraphs
"Web users are mission-minded. Cramped for attention. What you have to remember is that people don’t go to the web to window shop. They go there to drive 60 miles per hour — and look at billboards."
- Demian Farnworth, Copyblogger
Aim to write short, scannable paragraphs. A good way to do this is to keep one idea per paragraph.
Write quickly. It seems counter-intuitive, but when you write quickly, you write with emotion and flow. Slow writing is mechanical and lacks humanity. But remember...
... Good writing is rewriting. No one writes a perfect draft on the first try. It’s always easier to improve a rough draft.
Visitors glaze over when they see jargon or technical language. Write plainly and humanly:
|A number of||Some|
Want to read more? This is a good, quick primer on grammar and this is a collection of helpful tips for writing with style.
Whenever possible, show visitors— don’t tell them. Remember: visitors don’t read websites, they scan websites.
Photos communicate in two common ways:
- Literal — A person, place or thing.
- Metaphor — Using a light bulb to signify a good idea.
Use literal photos as much as possible. Metaphor photos are often stale and corny. In fact, this study found that purely decorative photos are often ignored— literal representation works most reliably.
Always give photos room to breathe. White space can go a long way:
Try not to shoehorn photos into the side of a paragraph. This usually feels cramped and doesn't showcase the image:
Try to use the correct dimensions of a photo. Cropping a photo to fit a design usually means the design isn't right or the photo needs to change:
Always upload high resolution photos. This will ensure that you’re photos look great even on high resolution devices.
Further Reading — This guide teaches how to shoot a headshot with a headphone and the ecommerce chapter has tips for shooting product photography.
Here's the truth: Good designers don't just sit down and create something great on their first try. They know that design is a practice— it requires iteration and exploration.
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.
The design of Site Builder Report slowly evolved from 2012-2017.
The most common design mistake is to add elements when a design isn’t working— but that's rarely the solution. If a design isn’t working, try removing something instead of adding more.
The secret to great looking websites is typography. I mean, think about it— websites are mostly made up of text. To learn more, see this chapter on typography.
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.
Alignment is critical. Alignment adds structure and coherence to a website. Without it, things just feel off:
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.
Keep a consistent look and feel. Don't design each page as it’s own separate entity. Instead try to create a consistent look and feel by using the same fonts and colours across pages.
Websites should be scannable. People don’t read websites, they scan websites. Make your website scannable: highlight words, break up paragraphs and use lists when possible.
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.
On this page, the call-to-action (top-right) button is important— it scrolls with the page so the user can click it whenever they are ready.
Let content lead the design. For example, photo galleries look great as a grid. They don’t need to be arranged in a "cool" way:
Use colour wisely. Don’t re-invent the wheel (unless you’re really confident in yourself). I tend to use colour guides such as Material UI to choose colours for my websites.
Think about contrast.. Contrast is the foundation of graphic design. Thoughtful contrast makes designs interesting. The most basic form of contrast is between light and dark.
Text should be high-contrast. For some reason, a common design mistake is to use low-contrast text. But a design should never require low-contrast text to work. Text is meant to be read, never sacrifice legibility:
Finally, watch real people 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.
"Typography exists to honour content" - The Elements of Typographic Style
It’s hard to overstate the importance of typography— websites are mostly text after all!
Choose readable fonts. Avoid fonts that are unusual or creative.
Choose popular fonts— they are usually popular for a reason. Merriweather, Roboto, Proxima Nova and Open Sans are examples of popular fonts:
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.
Typography is more than just the font you choose— it’s also the font-size, arrangement, color, line-spacing and more.
Body text is the most important typographic element. A good font-size for it is 15–25 pixels. (Though not every font is equally large at the same pixel size.)
The line-spacing of body text is important. You don't want your body text to feel cramped...
... Instead give your body text some line-spacing so that it doesn't feel so dense.
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:
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:
Responsive themes are not the only way to create a mobile-friendly website but it is the recommended way.
Making a website mobile-friendly is all about priorities It can hard to squeeze a desktop website into a mobile version— there's just not enough room. A mobile website demands prioritization— there's only space for what's critical.
Fingers— not a mouse Remember that visitors are using fingers on mobile— not a mouse. So links should have a large touch area.
The simplest way to test whether a website is mobile friendly is to browse it on a phone. Check if the website requires pinching or zooming or that the links are easy touched with a finger. If everything works well and feels right, the website is mobile friendly. For advanced testing use a tool like Browser Stack.
This chapter covers best practices for ecommerce websites.
Earlier in this guide, I mentioned that if possible navigation should be limited to 4-7 links. Ecommerce websites are often the exception to this rule because they have large catalogues.
The trick is to break navigation into smaller, digestible chunks. That way navigation isn't just a wall of links:
It's critical that ecommerce websites are SSL secured. SSL encrypts the connection between websites and visitors— which is critical when accepting credit cards.
Ecommerce website needs to be mobile ready. Back in 2015, more Amazon customers were using their mobile phones than desktop. That number has just grown since then. Check out the chapter on mobile for more info.
Product photography is critical. Don't overload visitors with text, instead let beautiful product photography tell the story:
White space around product photography is important. Notice how both Everlane and Nipomo Blankets use white space to frame product photos in the above screenshots?
Tips For Product Photography
Three important tips:
- Lighting is what makes a photo stand out. Make sure your product photos have strong lighting.
- Buy a tripod. A tripod steadies your camera and is an absolute life-saver. This is the iPhone tripod that I use— it's perfect for my needs. (And it doubles as a selfie-stick).
- Get photos retouched by a professional. For example, Pixelz costs $1.49 per image and is well worth the investment.
If possible, use a white backdrop. A white backdrop reflects white light back onto your product. This creates a well-lit photo that draws attention to your product. There are tons of great tutorials on how to shoot a white-background photo on the cheap.
Photography is the priority for ecommerce, but don't ignore text. This study showed that thumbnails of bookcases are studied intensely, while thumbnails of flat-panel TVs are mainly ignored— and more time is spent reading the description.
Build trust with customers. Testimonials can be a handy tool for this. A good testimonial addresses fears and concerns in order to build trust.
Search Engine Optimization or SEO is optimizing websites to rank in Google (or other search engines) for specific keywords.
In the early days of SEO, this just meant stuffing keywords into pages— but as Google has become more sophisticated, SEO practices have needed to evolve.
My website, Site Builder Report is ranked number one if you search website builders in Google— beating companies like GoDaddy and Wix.
Today there are no shortcuts to ranking in Google. Plenty of companies promise shortcuts but I assure you those are false promises. The way to rank in Google is simple— but hard. It requires two ingredients:
- Really, really, really valuable content for visitors — Websites compete globally. Going overboard creating the best possible content is the way to win.
- Links — Having other websites naturally linking to your website is critical for SEO. Don't try to manipulate this. Google is good at weeding out unnatural links.
I'd recommend these 4 resources if you'd like to learn more about SEO:
- Moz's Beginners Guide to SEO — The fundamentals of SEO.
- Whiteboard Friday — Short, instructional videos.
- Backlinko — The blog of Brian Dean, a top SEO teacher.
- Experts on the Wire — A podcast about SEO and marketing.
How to find a good SEO consultant: 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. Moz has a good list of recommended consulting companies. I'd start there.
Local SEO is SEO done for searches with local intent. You’re probably familiar with these types of searches:
Local 3-Packs are the most common local result:
Knowledge cards show when people search for specific businesses:
Google Maps is also a local result.
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.
Facebook Ads and Google Ads can be intimidating. They can seem pretty intimidating to first-time users. But it's best to push through that intimidation. The bark is worst than the bite. It's critical that you at least understand these platforms— even if you're just going to hire someone else to run the ads.
People search Google using keywords. Google Ads lets you bid on those keywords to appear above search results.
You can also target specific geographic locations. This can be really effective. For example, a carpenter could advertise to people searching for "toronto carpenters":
Google charges you every time someone clicks your ad. Google Ads works like an auction— you bid on what you'd be willing to pay for the keyword and that effects where you ad shows. (The relevancy of your ad can also effect where Google shows it.)
The real power of Google Ads happens is in conversion tracking. A conversion is the goal of the advertising: leads, purchases etc. You need to track conversions to measure the effectiveness of advertising. Google Ads can track when a visitor fills out a form, visits a page or makes a purchase.
Knowing your cost per conversion is critical. Your cost per conversion can tell you whether or not your ads are worth running.
Remember to pay attention to page visitors land on after clicking an ad. Don't just send visitors to the homepage. Send them to a landing page that is optimized to match the ad they just clicked. An ad for cheap cashmere sweaters shouldn't send someone to the homepage— it should send them to the item page for low-priced cashmere sweaters.
If you're going to try Facebook Ads, commit to learning the system. Don't just give it a half-hearted try. Take two hours and read everything you can. It will pay off enormously.
Like Google Ads, Facebook Ads can be intimidating to first-time users. But it's bark is worst than the bite. Most people can understand Facebook Ads.
To start, Facebook offers a variety of different campaign types:
Campaigns are grouped into three different categories: awareness, consideration and conversion. These categories basically resemble a sales funnel— they move cold leads to warm leads:
You could simply run ads in the conversion layer of the funnel on Facebook— but that can get expensive. For most people, the effective way to use Facebook Ads is to use targeting to move an audience through a funnel.
Here's an example funnel selling subscriptions to the NY Times:
Facebook Ads allows you to get more sophisticated with your funnels. This was just a simple example.
Domain names can be registered through most website builders and web hosts— but it's often cheaper to register the domain name yourself. That way you are in control of your domain name no matter what.
Tips for choosing a good domain name:
- Avoid unusual extensions — When choosing your domain name, avoid unusual extensions like .tk or .glt. Instead try to find a .com domain name— still the most recognized domain name extension. If unavailable, .net and .co are your next best bets.
- Avoid hyphens and numbers — Your domain name should be smooth, clear and readable.
- Domain taken? Try adding a verb — If your preferred domain name is unavailable a clever trick is to add a verb in front of your name: listentobamboo.com (BamBoo is my band) trybasecamp.com (Basecamp is a software company).
- Try a brainstorming tool — If you’re having trouble thinking of a name, try a domain name generator such as Wordoid or Lean Domain Search.
- Choose a brandable domain name. My domain name is SiteBuilderReport.com and I regret it. It’s not very brandable. It’s easily forgotten not very pronounceable; when I say it out loud, I usually have to say it slowly, emphasizing each individual word!
A collection of helpful tools for marketing, tracking and improving websites. Some links may be affiliate links.
SEMRush A complete SEO toolkit. Highly recommended.
Authority Labs Track keyword rankings.
Whitespark Tools for managing local SEO.
Stats & Analytics
Google Analytics The industry standard for stats. Every site should have it.
Full Story Video replay visitors sessions. Very useful.
Ecwid Embed ecommerce on existing websites.
Gumroad Simple way for creators to sell a product.
Donately Custom donation forms.