Menu
Bear carpet cropped?ixlib=rails 1.1

How to Make a Great Website

Great websites aren’t just about technology. Great websites are human. They don’t make your visitors think. Great websites have less instead of more. But most of all: they have goals that they accomplish for you.

Table of Contents

  1. 1. Principles

    Four principles that underly great websites.

  2. 2. Navigation

    It should be intuitive and easy to use.

  3. 3. Writing

    What to write and how to write it.

  4. 4. Photography

    Show visitors, don't tell.

  5. 5. Design

    Tips for getting a design "just right."

  6. 6. Typography

    The secret to beautiful websites.

  7. 7. Ecommerce

    Tips for effective ecommerce websites.

  8. 8. Mobile

    Websites have be mobile-friendly in 2017.

  9. 9. SEO

    The not-so-secret way I outrank GoDaddy.

  10. 10. What To Use

    Squarespace? Wix? Wordpress? Webflow?

  11. 11. Domain Names

    Tips for choosing a good domain.

  12. 12. Launch ASAP

    Being published is oxygen for websites.




About the Author

Hi, I’m Steve Benjamins. I’ve designed and coded websites for the last 20 years. My websites have been featured in Wired, The Next Web, Smashing Magazine, The Huffington Post and Forbes.

Currently I work as the sole developer, designer and writer behind Site Builder Report. I occasionally work as a consultant for the website builder industry. I also make music.

1. Principles

These are the four principles of great websites. Follow these principles and you'll be in good hands:

1. Choose a Goal

Goals clarify. Establish a goal for your website and always refer back to it; consistently asking yourself, "is this page / image / text helping accomplish the goal?"

2. Don’t Make Visitors Think

Websites are meant to be used, so they should be clear and intuitive. Visitors shouldn't have to think in order to use your website.

3. Be Human

Human works on the internet. Make it clear that there is a real, live human behind your website. People will respond to that.

4. Less Is More

People don’t read websites, they browse websites. So distill your website down to the essentials. Less is more.

Think of your website’s navigation like elevator buttons: people are using it to get somewhere. So navigation should be easy to use and put in a consistent place.

The most common spot for navigation is the top-right corner:

Occasionally navigation is placed vertically along the left:

On mobile, navigation usually resides in a drawer.

Don't get creative

Don’t try to impress visitors with an unusual, creative navigation. Instead, navigation should be conventional. When navigation is conventional, visitors don't need to "figure it out" because they already have a mental model for how it works.

Choose conventional link names

Try not to choose unusual or creative link names. Instead use conventional names that visitors can understand quickly.

Conventional Unconventional
Contact Talk To Us
Volunteer Get Involved
Team Our People
Always have a link back to the homepage

Most commonly, your logo should link back to the homepage. Returning to the homepage is a common task for many visitors.

Don't have too many links

Resist the urge to have more than 7 links in your navigation— you don’t want a wall of links. Instead, 4-5 links is ideal. (This is a suggestion, not a rule. There are exceptions, for example ecommerce websites often need many links. In those cases you'll still want to break up parts of the navigation into "groups" that are no larger than 7.)

Don’t unnecessarily lengthen link names

Go with less, if less will do:

Good (Less) Bad (More)
Contact Contact Us
Services What We Do

Try not to have competing links in your navigation. For example, don't put Who We Are, What We Do and How We Do It all in your navigation. This makes users guess at where to find important details.

3. Writing

"Good writing does not mean gratuitously 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 website. How would you talk? What words would you use?

That’s how you should write. In a word— write conversationally.

What to write

Don’t write about yourself. Your writing should be about your audience. What do they want? What do they need? What are they worried about? Write about them.

Basecamp.png?ixlib=rails 1.1

An example of excellent copy that's about the customer.

Writing about yourself is a pretty common mistake in business writing, but it's always better to talk about your customer's needs rather than how great you are.

Good (Writing for your audience) Bad (Writing about yourself)
Are you tired of cleaning your own home? Our greater Austin area cleaning service specializes in helping busy professionals like yourself. We promise to get your house squeaky clean so you have more to do the other things you need to do. We are a professional house cleaning service based out of Austin, TX. We serve the greater Austin 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.
Write with a call to action in mind

Remember your website is here to accomplish a goal for you— good writing helps guide readers towards that goal.

Guiding readers toward a goal doesn’t mean over-the-top sales copy— it’s possible to write persuasively and with integrity.

What content do you need on your website?

There is no checklist I can give you for content that you need on your website. Sorry, that really needs to be up to you.

Get inspiration by looking at your competitors— but don’t treat them as the final word on what you need. Instead always let your customers guide you: What are their worries? What do they need? That’s the content you should put on your website.

There are some critical pieces of content that most websites need: Hours of Operation, Holiday Hours, Directions, Address, Phone Number, Email and About Us.

How to write

People don’t read websites, they scan websites. So use formatting to break up walls of text:

Titles are so important

If your page was a store on the side of a busy highway, the title’s job would be to capture attention and get people in the door. Make sure you put effort into your titles. Try brainstorming 15-20 titles before choosing one. This is a helpful post on headline writing.

Write short, scannable paragraphs

A good way to do this is to keep one idea per paragraph.

"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
Avoid jargon

People glaze over when they see jargon or technical language on a website. Write plainly and humanly.

Don't use: discontinue
Use: stop

Don't use: exhibit
Use: show

Don't use: a number of
Use: some

Write quickly (then edit)

It seems counter-intuitive, but when you are writing quickly, you are writing emotionally and with flow. Slow writing is mechanical and lacks humanity. Good writing is rewriting— it’s hard to write a perfect draft on the first try. It’s much easier to improve a rough draft.

Additional resources: A good, quick primer on grammar and a collection of helpful tips for writing with style.

4. Photography

People don’t read websites, they scan websites. So when possible, show your visitors— don’t tell them. And what's the best way to show your visitors? Photos.

Photos communicate in two common ways:

  1. Literal — Example: a person, place or thing.
  2. Metaphor — Example: a light bulb to signify a good idea.

Metaphor photos work but they often devolve into stale, corny imagery. In fact, this study found that purely decorative or ornamental photos are often ignored. Direct representation works most reliably.

Offering hand 1200x795.jpg?ixlib=rails 1.1

Metaphor photos that feel stale can get ignored by visitors.

How to Arrange Photos

Try not to shoehorn photos into the side of a paragraph:

Instead let them breathe. Give them space:

Try not to crop photos into unusual dimensions. For example: it was common to have a short and long banner at the top of pages a few years ago— that's not ideal unless you shoot photos specifically for those dimensions.

Long header.png?ixlib=rails 1.1

It was common to have a short and long banner at the top of pages a few years ago.

High Resolution Photos

Always try to upload photos that are a high resolution (over 700 x 1400 pixels for example). This will ensure that you’re photos look great even on high resolution devices.

Where to Find Photos

There are plenty of websites for good, free stock photos. I actually made a popular search engine myself: Stock Up. But there are also: Pexels, Unsplash and Burst.

If you'd like to shoot your own headshot, check out this guide.

Check out the ecommerce chapter for specific tips on product photography.

5. Design

Design is a process of slow iteration; it's trying something and then taking a step backwards to see how it feels.

Great designers often discard most of their ideas. They know it's all the process of trying and iterating.

Here's some tips to get you started:

Try removing instead of adding more.

A common design mistake is to add elements when the design isn’t working. But it's not usually the 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. Typography is so important that I’ve written an entire chapter about it.

Kinfolk.png?ixlib=rails 1.1

Kinfolk.com has beautiful typography.

Try tweaking a detail

Sometimes we think we have a big design problem but it's actually a niggling detail that’s bothering us. If a design isn’t working, try to adjust any bothersome details, then pull out to assess the big picture— that "small" detail might just be the solution to the "big" problem.

Pay attention to alignment

Alignment adds structure and coherence to a website. Make sure that elements are aligned.

Misalignment.png?ixlib=rails 1.1

Make sure text is properly aligned.

Avoid ornamentation

Ornamentation is almost always the wrong answer to design problems.

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.

Iterate

Consistently refining and redesigning over time is usually better than dramatic redesigns. Design is about evolution, not revolution.

Sbr over time.jpg?ixlib=rails 1.1

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

Your website 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.

Another good idea: keep one idea per paragraph.

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.

Donate.png?ixlib=rails 1.1

This donate button on this non-profit website is in an obvious place.

Let content lead the design

For example, photo galleries look best as a grid. They don’t need to be arranged in a "cool" way. The best designs begin with the content in mind.

Livephot.png?ixlib=rails 1.1

Photos don't need anything special to be arranged— they typically look good in a grid.

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.

Pencils are often used as an icon in apps. But does the pencil mean “Write a new note” or “Edit an old note”? It's not obvious, right? Always think about what you’re communicating behind designs. Icons can be a great way to convey an abstract function— but they need to be thoughtful.

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 their navigation.

Avoid low-contrast text

Low-contrast text is a tempting solution for designs with too much going on— but it’s almost always a mistake. A design should never require low-contrast text to work. Invariably, if you think you need low contrast text, you probably just need fewer elements on the page.

Low contrast.png?ixlib=rails 1.1

Low-contrast text sacrifices legibility.

Whitespace is key

Whitespace is a critical element of design. It frames pages and focusses visitors on what’s important.

Watch real people use your website

Ask a friend to browse your website. Don’t step in to show them how to things— instead watch what they do. I guarantee you will be learn a lot.

6. 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!

Typography is more than just the font you choose— it’s also the font-size, arrangement, color, line-spacing and more.

Kinfolk.png?ixlib=rails 1.1

Kinfolk.com has beautiful typography.

Choosing a Font

Most importantly: choose a font that is readable.

A good place to start is to find a popular font that you like. You don't need to find an unusual or creative font— popular fonts are usually popular for a reason.

Fonts.jpg?ixlib=rails 1.1

Merriweather, Roboto, Proxima Nova and Open Sans are popular fonts.

Avoid system fonts such as Times New Roman, Georgia, Arial and Comic Sans MS.

Body Text

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.)

Pay attention to the line-spacing of body text. Line spacing should be between 1.2x or 1.5x.

Mediumcom.png?ixlib=rails 1.1

Medium articles have a good sized body font with proper line spacing.

Don't let paragraphs get too wide. You want between 40-70 characters per line. You don't want your body text to look like this:

Wikipedia.png?ixlib=rails 1.1

I love Wikipedia but paragraphs should never be this wide.

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

7. Ecommerce

Navigation

Earlier in this guide, I mentioned that navigation should be short— Only 4-7 links if possible. But ecommerce is often an exception to this rule.

When you have many products it's okay for navigation to have many links in order to cover the entire catalogue.

Just don't let navigation become a wall of links. Try to break it up into smaller, digestible chunks:

Amazon navigation.png?ixlib=rails 1.1

Amazon uses spaces and headers to break up navigation.

Everlane.png?ixlib=rails 1.1

Everlane organizes links into categories.

SSL

You should know about SSL if you are going to build an ecommerce website. SSL ensures that your visitors connection to your website is encrypted— critical when accepting credit cards. Your entire ecommerce website should be secured by an SSL certificate.

Ssl.jpg?ixlib=rails 1.1

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

Mobile Ecommerce

Mobile ecommerce is not an up and coming thing. It’s happening now.

Already in 2015, more customers shopped Amazon on their mobile phones than desktop. Make sure your ecommerce website is mobile ready (read the mobile chapter for more info).

Photography is critical

Nipomo Blankets is a master at product photography. The website doesn’t overload you with text— it lets the images tell the story.

Nipomo.png?ixlib=rails 1.1

Nipomo Blankets

I also love the product photography of Everlane:

Everlane2.png?ixlib=rails 1.1

Everlane's product photography is simple and effective.

Notice how much white space Everlane and Nipomo Blankets use in the above screenshots— white space creates space that frames photography.

Did you know? Studies show that products with large images tend to have a higher conversion rate.

How to shoot great product photos

This is an in-depth topic but here are three tips I find helpful:

  1. Lighting is what makes a photo stand out. Make sure your product photos have strong lighting.
  2. Get a tripod. A tripod steadies your camera and is an absolute life-saver. (There are plenty of iPhone tripods available if you are shooting with your smartphone.)
  3. Get product photos retouched by a professional. For example, Pixelz costs $1.49 per image and is well worth the investment.

Read this for a more in-depth guide on shooting professional photos on a budget.

Use a white backdrop

Most product photos 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.

Copy matters too

Photography is the top priority in ecommerce but text can also be very important— especially for certain products. For example, this study showed that thumbnails of bookcases are studied intensely, while thumbnails of flat-panel TVs are mainly ignored (and more is spent reading the description).

Build trust with customers

Trust is built by putting yourself in your customers shoes and addressing their fears and concerns.

Testimonials can be a handy tool for this. The below testimonial is a great example of building trust by addressing fears and concerns:

Ramit.jpg?ixlib=rails 1.1

This testimonial is for an online course about starting your first business.

8. Mobile

Three facts to blow your mind:

  1. More people search on mobile phones than computers today.
  2. Americans spend 5 hours per day on mobile devices.
  3. Visitors are five times more likely to leave a site if it isn’t mobile-friendly.

Because we design websites on desktop computers, we sometimes forget about mobile— but that’s a mistake, the data is clear: your website has 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

A responsive theme shrinks or expands to the device size.

Responsive themes are not the only way to create a mobile-friendly website (you could also build a separate mobile website for example) but responsive is the recommended way.

Mobile about priorities

You can't squeeze most desktop websites into a mobile version— there's just not enough room. You a mobile website demands you to prioritize— only keep what's absolutely critical. (Don’t be afraid to remove elements that can’t fit in the mobile version. I often do this at Site Builder Report.)

Finger, not a mouse

Also remember that people are using fingers on mobile— not a mouse. So links should have a large touch area.

How do I know if my website is mobile friendly?

A good, easy way to test whether your website is mobile friendly or not, just browse it on your phone. Do you have to pinch and zoom to see everything? Are links easy touched with a finger?

You can also use a tool such as Browser Stack for further testing.

9. SEO

My website, Site Builder Report is ranked number one if you search website builders in Google— beating companies like GoDaddy and WebsiteBuilder.com.

So, how do I rank so high? Here’s my SEO strategy: I try to create really, really, really valuable content for visitors.

That’s it. Seriously. It sounds simple, but it's devilishly hard.

Of course there are some fundamentals you should know (Moz's Beginners Guide to SEO is a good start) but there are no magical shortcuts. SEO simply requires the hard work of creating really, really, really valuable content.

How to find a good SEO consultant

Here's a tip: 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.

10. What to Use

Squarespace, Wix, Wordpress, Weebly? What’s the right tool to build my website with?

This question can lead to decision paralysis. Don’t let it.

I’ve been reviewing website builders for 5 years and here’s the truth: there are good websites built with bad website builders and bad websites built with good website builders.

A website builder is just a tool. It’s ultimately up to you to use it well.

There are good websites built with bad website builders and bad websites built with good website builders.

I lump website building tools into four categories:

  1. Website Builders - Weebly, Squarespace
  2. Industry Website Builders - Website builders that target specific industries. For example: Photography Website Builders and Store Builders.
  3. Front End Design Tools - Webflow, Webydo
  4. CMS - Wordpress, Drupal

Each category can be graphed based on flexibility and ease of use:

Website Builders

Website builders are a good choice for conventional websites. For example, even though I’m a web developer, I built my band’s website on Squarespace. I built it on Squarespace because everything I needed (an audio player, photo galleries) were already available on Squarespace.

Why waste time trying to reinvent the wheel?

Industry Website Builders

There are a few industries that specific website builders target: ecommerce, photography, landing page builders and weddings. Generally speaking a specific tool is better than a general one— so for example, Format is an excellent choice for photographers and Shopify is the best option for online stores.

Front End Design Tools

Front end design tools such as Webflow and Webydo have steeper learning curves than website builders.

They don’t require you to code but their environments are code-like (similar in complexity to Photoshop). Users (such as professional graphic designers) that find website builders too simple or limited may find design tools a good option.

Webflow.jpg?ixlib=rails 1.1

Webflow, a front end design tool.

CMS

A CMS like Wordpress is more powerful than a website builder but has a steeper learning curve. For example, a CMS will typically require you to setup a web host and configure databases.

The upside to a CMS is that it’s very flexible— you can use it to build just about anything (for example, I’ve seen Wordpress powering an University's website). Use a CMS if you want to build something unconventional. But be aware: it will likely require you (or someone else) to wade into code.

I’ve gone in-depth on the differences between Wordpress and website builders here.

How to overcome decision paralysis

Commit to trying a tool for 15 minutes. Stop researching and try something for 15 minutes. Simply trying something goes a long way in clarifying what you’re looking for.

What about hosting?

Hosting is included with every website builder. No configuration is required— you can just buy a domain name and connect it to the website builder. You never have to think about hosting.

A CMS like Wordpress is quite different. Wordpress requires you to find a web host that can install Wordpress on (you’ll need to find a web host with both MySQL and PHP support). You may also need to familiarize yourself with FTP, a way to upload the Wordpress files to the host. This can be intimidating for non technical users, but tech-savvy users will be able to figure it out with an afternoon of research.

The great thing about Wordpress, is that you always move it to another web host later. You can't do this with a website builder. You can’t just download your website from a website builder and move it to another website builder.

11. Domains

You can register a domain name through most website builders and web hosts but it's preferable to register the domain name yourself. That way you are in control of your domain name no matter what.

You can register your own domain name through a provider like Namecheap or Google Domains.

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 putting hyphens and numbers in your domain name (example: site-builder-report.com). Your domain name should be smooth, clear and readable.

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).

If you’re having trouble brainstorming a name, try a domain name generator such as Wordoid or Lean Domain Search.

Lastly, try to choose a brandable domain name. My domain name is SiteBuilderReport.com and I regret it! It’s not very brandable. It’s forgettable and vanilla. It’s also not very pronounceable; when I say it out loud, I usually have to say it slowly, emphasizing each individual word.

12. Launch

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

So launch your website sooner than you think.

Avoid dramatic website redesigns where you try to figure everything out at once. It’s impossible. Instead, try to iterate continually over time: design, publish, see what works and repeat.

Ideally websites are about evolution— not revolution.

Sbr over time.jpg?ixlib=rails 1.1

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

Slowly iterating is always ideal. You should get better and better at conveying your important message. No one designs a website right the first time.

Remember: your website is not a work of art— it’s something that should accomplish a goal for you. Perfect is the enemy of good enough. Launch as soon as possible.

"Surprisingly, launching a mediocre product as soon as possible, and then talking to customers and iterating, is much better than waiting to build the "perfect" product." -Geoff Ralston

13. Conclusion

Thanks for reading!

This guide is a living, breathing document. I intend to keep it up to date as best practices evolve. Please let me know if you have suggestions or if you spotted a grammar error.

Good luck with your website,

- Steve Benjamins

Signature