50+ Web Design Principles and Best Practices for 2020

A good website is the cornerstone of any online business in 2020.

It is therefore important that your website is set up correctly to meet the needs of your users and to maximize your revenue.

Here is our list of basic web design principles and best practices. You can use this list as a checklist when redesigning your website to ensure it is set up for success:

Branding Your Website

• Include your logo on all pages. Position it at the top left or top center of your pages.
• Complement your logo with a tagline or catchy sentence that summarizes your brand idea. For example “Always low prices” is the tagline for Walmart.
• Create a favicon. A favicon is a small graphic that appears next to the URL in the address bar.
• Have a consistent look and feel in all your pages. Use a color scheme and layout that are clearly recognized across all of your site. 
• Have an About Us page which includes all relevant information about you and your business.
• Include a copyright statement at the bottom of each page.

Designing Your Website’s Navigation

• Group your navigational options in relevant categories. 
• Use common names for your menu options: Home, About Us, Contact Us, Help, Products. Avoid “clever” or “catchy” alternatives that are not descriptive enough.
• Provide simple text navigation links at the bottom of long pages, so users don’t need to scroll back up.
• Link your logo to your homepage from all your pages. 
• Display a hyperlinked breadcrumb trail. A breadcrumb trail looks like this: Home > Section > Sub-Section > Page. This tells people where they are within your site.
• If your site has many pages, provide a search box in the upper right corner of your homepage or in another visible space. If you are using WordPress, this feature is built into your site by default and will appear on most themes.
• Set your search box to search your site, not the web.
• Create a custom error page that displays a simple sitemap with links to the main sections of your site and a search box. That way, you will not lose visitors that have followed a bad link to your site or who have misspelt your URL.

Layout and Content Presentation

• Make sure it has a responsive design so that it appears correctly on all desktop and mobile devices.
• Put your most important content above the fold.
• Optimize your pages to be viewed correctly with the two main browsers: Google Chrome and Safari.
• Use high contrast: black text on a white background or white text on a black background work best.
• Don’t use too many different fonts. Avoid using small serif fonts (like Times Roman): they are difficult to read from a computer screen. Arial is the most web-friendly font since it is wide, clean and easy to read.
• Avoid amateurish features like: numeric page counters, wholesale use of exclamation points, all caps, center justified blocks of text, excessive animated gifs, busy backgrounds, or anything that distracts and doesn’t add value to your readers.
• Don’t use pop-up windows.
• Don’t use frames.
• Test your site in different browsers and resolutions.

Writing for the Web

• Unless you’re running a technical site for technical people, write in layman’s terms so that everybody can understand.
• Write in a way that facilitates scannability, using headings, bullet points, bold keywords, white space, etc.
• Reading from a screen is difficult: use 50% fewer words than you would use on print.
• If a page is too long, break it into several pages and link to them.
• Use a spell checker like Grammarly. Spelling mistakes hurt credibility.

Getting to Know Your Customers

• Ask for feedback: include a feedback form on your Contact Us page. 
• Include a subscription form on your homepage. Give your customers a valuable bonus to encourage them to subscribe.
• Include polls and other tools to gather market intelligence.

Proper Use of Links

• Make your links descriptive. They should indicate what the user will be linking to, as opposed to just saying “click here”.
• Don’t underline anything that is not a link.
• Use a consistent color for your links – preferably blue or one that matches your websites overall theme.
• Use a different color for visited links – preferably purple or a lighter tone of the color of the unvisited link. 
• When linking to a non-HTML file, such as Excel, Word or Acrobat, make it evident, by including a small icon next to the link.
• Don’t link to “under construction” pages.
• Make sure that your links work. There are free online tools that can help you with this.
• If you use links on images, use the ALT attribute to add a description that will pop up when you place the cursor over the image.

Proper Use of Images

• Optimize your images. Use only .gif and .jpg formats. Make your images as light as possible while maintaining acceptable quality. Use online image optimization tools or WordPress plugins to reduce the weight of your images. Make sure your pages load in less than 3 seconds.
• Use thumbnails (miniature versions of images) and make them clickable. 
• Avoid images that look like ads. People will ignore them.

Optimizing Your Site for the Search Engines

• Create short, descriptive page titles, to entice search engine users to click through to your website.
• Create a site map containing links to all your pages, and link to it directly from your homepage. Search engines will follow the link to your site map and will add your pages to their index.
• Pick two or three main keywords you believe search engine users will type to find your page. Do this for each page and make sure to include them in your page title, description meta tag and page body.
• Make each page focused on only one topic.
• Use more text than images and videos and minimize the use of JavaScript. Search engines heavily favor text and will crawl and index your site faster.

Blog-Specific Web Design Tips

• Use a minimalist template, preferably one with a white background and dress it up with a nice logo.  
• Use images to dress up your blog posts and give your blog a more professional appearance. You can find excellent pictures at a very low cost on stock photo sites like Shutterstock and iStock.
• Always cite your sources which you use to document your posts. This is not only good etiquette but also a good way to promote your blog and get links back. 
• Use labels to categorize your posts and keep your blog neatly organized. 
• Include social share buttons on your posts so that readers can share them on social media. 
• Include a link to your social profiles in a visible location across your site so that your visitors can follow you.
• Include a form to subscribe by email. Email newsletters still work well.