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.
Four principles that underly great websites.
It should be intuitive and easy to use.
What to write and how to write it.
Show visitors, don't tell.
Tips for getting a design "just right."
The secret to beautiful websites.
Tips for effective ecommerce websites.
Websites have be mobile-friendly in 2017.
The not-so-secret way I outrank GoDaddy.
Squarespace? Wix? Wordpress? Webflow?
Tips for choosing a good domain.
Being published is oxygen for websites.
These are the four principles of great websites. Follow these principles and you'll be in good hands:
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?"
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.
Human works on the internet. Make it clear that there is a real, live human behind your website. People will respond to that.
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 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.
Try not to choose unusual or creative link names. Instead use conventional names that visitors can understand quickly.
|Contact||Talk To Us|
Most commonly, your logo should link back to the homepage. Returning to the homepage is a common task for many visitors.
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.)
Go with less, if less will do:
|Good (Less)||Bad (More)|
|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.
"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.
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.
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.|
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.
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.
People don’t read websites, they scan websites. So use formatting to break up walls of text:
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.
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
People glaze over when they see jargon or technical language on a website. Write plainly and humanly.
Don't use: discontinue
Don't use: exhibit
Don't use: a number of
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.
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:
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.
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.
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.
If you'd like to shoot your own headshot, check out this guide.
Check out the ecommerce chapter for specific tips on product photography.
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:
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.
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.
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.
Alignment adds structure and coherence to a website. Make sure that elements are aligned.
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.
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.
Consistently refining and redesigning over time is usually better than dramatic redesigns. Design is about evolution, not revolution.
My website Site Builder Report slowly iterated between 2012-2017.
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.
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.
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.
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.
Contrast is the foundation of graphic design. Thoughtful contrast makes designs interesting. The most basic form of contrast is between light and dark.
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.
Whitespace is a critical element of design. It frames pages and focusses visitors on what’s important.
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.
"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.
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.
Avoid system fonts such as Times New Roman, Georgia, Arial and Comic Sans MS.
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.
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:
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:
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.
Mobile ecommerce is not an up and coming thing. It’s happening now.
Nipomo Blankets is a master at product photography. The website doesn’t overload you with text— it lets the images tell the story.
I also love the product photography of Everlane:
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.
This is an in-depth topic but here are three tips I find helpful:
Read this for a more in-depth guide on shooting professional photos on a budget.
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.
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).
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:
Three facts to blow your mind:
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.
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.
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.)
Also remember that people are using fingers on mobile— not a mouse. So links should have a large touch area.
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.
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.
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.
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:
Each category can be graphed based on flexibility and ease of use:
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?
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.
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.
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.
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.
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.
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.
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).
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.
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.
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
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