Search Menu

How to Make a Website

Design, photography, domains, SEO and more.
A Complete Guide · Written For Beginners


Chapter 1

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:

  1. 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.
  2. 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.
  3. 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.

If you're building a photography website, Format is the best photography website builder. Format focusses exclusively on photography websites and is widely loved by the photography community.

So why might someone not use a website builder? Well there are two downsides to website builders:

  1. 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.
  2. 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.

Note: When I'm talking about Wordpress, I am talking about Wordpress.org— not Wordpress.com. Wordpress.com is a separate service that is much more like a website builder.

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.

Code.png?1518198553?ixlib=rails 1.1

Wordpress is flexible— but you may need to occasionally tweak code.

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.

Chapter 2

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.

Chapter 3

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.

Basecamp.png?ixlib=rails 1.1

Above This homepage quickly gets to the point of their audiences problem.

Here's an example of how to write for an audience:

Good Bad
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
- Directions
- Address
- Phone Number
- Email

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:

Don't Use Use
Exhibit Show
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.

Chapter 4

Photography

Whenever possible, show visitors— don’t tell them. Remember: visitors don’t read websites, they scan websites.

Photos communicate in two common ways:

  1. Literal — A person, place or thing.
  2. 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.

I'd suggest Stock Up, Pexels, Unsplash and Burst if you need good, free stock photos.

Further Reading — This guide teaches how to shoot a headshot with a headphone and the ecommerce chapter has tips for shooting product photography.

Chapter 5

Design

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.

Sbr over time.jpg?ixlib=rails 1.1

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.

Kinfolk.png?ixlib=rails 1.1

Kinfolk.com is a showcase for beautiful 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:

Badalign.jpg?1536331342?ixlib=rails 1.1

Without alignment, websites feel unorganized.

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.

Apple.png?ixlib=rails 1.1

Apple uses contrast to distinguish navigation.

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:

Low contrast.png?ixlib=rails 1.1

Low-contrast text sacrifices 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.

Chapter 7

Typography

"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!

Kinfolk.png?ixlib=rails 1.1

Kinfolk.com has beautiful typography.

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:

Wikipedia.png?ixlib=rails 1.1

I love Wikipedia but paragraphs should never be this wide.

Further Reading — Five Minute Guide to Better Tyopgraphy, Typography in Ten Minutes and The Elements of Typographic Style (the Bible of typographic).

Chapter 8

Mobile-Friendly Websites

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:

Responsive2.jpg?ixlib=rails 1.1

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.

Chapter 9

Ecommerce

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:

Amazon navigation.png?ixlib=rails 1.1

Amazon has a huge catalogue but still breaks navigation into groups.

Everlane.png?ixlib=rails 1.1

Everlane also has a big catalogue but they still organize links into categories.

It's critical that ecommerce websites are SSL secured. SSL encrypts the connection between websites and visitors— which is critical when accepting credit cards.

Ssl.jpg?ixlib=rails 1.1

SSL encrypted websites have a "secure" badge in browsers.

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:

Nipomo.png?ixlib=rails 1.1

Nipomo Blankets is a master at product photography.

Everlane2.png?ixlib=rails 1.1

Everlane's product photography is simple and effective.

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:

  1. Lighting is what makes a photo stand out. Make sure your product photos have strong lighting.
  2. 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).
  3. 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.

Nipomo.png?ixlib=rails 1.1

White backdrops create a well-lit photo that draws attention to your product.

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.

Chapter 10

SEO

My website, Site Builder Report is ranked number one if you search website builders in Google— beating companies like GoDaddy and Wix. Here's what I know to be true about SEO.

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.

Seo.jpg?ixlib=rails 1.1

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:

  1. Really, really, really valuable content for visitors — Websites compete globally. Going overboard creating the best possible content is the way to win.
  2. 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:

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

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:

Snack pack.png?ixlib=rails 1.1

A local 3-pack result.

Knowledge cards show when people search for specific businesses:

Knowledge graph.png?ixlib=rails 1.1

A knowledge card result.

Google Maps is also a local result.

Maps.png?ixlib=rails 1.1

Ranking in Google Maps is part of 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.

2. NAP

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.

3. SEO

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.

Helpful resources for local SEO: Moz's 2017 Local Search Ranking Factors, The Local SEO Guide and Whitespark.

You may also want to follow Darren Shaw, Founder of Whitespark and Andrew Shotland, Founder of Local SEO Guide. Both are thought leaders in the local SEO space.

Chapter 11

Advertising

On the internet, two advertising platforms dominate: Facebook Ads and Google Ads (formerly Adwords). Both are powerful marketing tools— when used correctly.

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.

Mr.jpg?1537975042?ixlib=rails 1.1

Google Ads can intimidate to first-time users.

Google 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":

Ad examples.jpg?1537974962?ixlib=rails 1.1

These are Google Ads— organic listings are below.

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.

Facebook Ads

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:

Facebook.png?1537974920?ixlib=rails 1.1

Facebook 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:

Funnel.jpg?1537984413?ixlib=rails 1.1

Facebook campaign types.

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 nytimes.jpg?1537984626?ixlib=rails 1.1

If a user doesn't show interest early they are dropped out of the funnel.

Facebook Ads allows you to get more sophisticated with your funnels. This was just a simple example.

If you'd like to go more in-depth I'd recommend reading Susan Wenograd, Jon Loomer and listening to The Art of Paid Traffic.

Chapter 12

Domains

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.

If you'd like to register your own domain name, use a provider such as Namecheap or Google Domains.

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!

Chapter 14

Conclusion

Being published is oxygen for websites. The sooner a website is live, the sooner you can find out what works (and what doesn’t).

Here's my final piece of advice: Launch your website sooner than you think.

Don't try to get everything perfect. No one does. It’s impossible. Great websites come from slowly iterating over time— it's about about evolution, not revolution:

Sbr over time.jpg?ixlib=rails 1.1

My website Site Builder Report slowly iterated between 2012-2017.

If you've read this far, you should reach out and say 'Hi'— I'd love to hear from you.

This guide is a living, breathing document so please let me know if you spot an error or have a suggestion.

Thanks for reading and good luck with your website!

- Steve Benjamins

Signature