This is a basic guide for deciding what content you should include on your website, how to organize it, and guidelines for formatting and hosting your materials.
You may also be interested in my Website Design Guide, which discusses my design style and principles I try to adhere to.
Header
Common items in the header include a logo, navigation menu, and call to action. You might also include a search icon or search box, social media icons that link to your social media profiles, or an email opt-in box.
Logo. Typically, you’ll want your logo in the upper left. If you have just a small logo and few navigation items, you probably want to have them on the same line, with the logo aligned to the left and the navigation aligned to the right. In most cases, I recommend a navigation bar no taller than 100px, so your logo ought to be even shorter than that.
If your logo is wide, you want a call to action in the upper right, and/or your navigation items take up a lot of space, you can keep the navigation menu on its own line underneath.
Navigation menu. While there’s no limit to the number of items you can have in your navigation menu, and no limit to the number of lines of navigation, it’s best not to overwhelm your visitors and make it easy for them to find what they want. I recommend keeping the navigation on one row whenever possible.
You can have navigation items organized under drop-downs/sub-menus, and you can have multiple levels of menus. And you don’t necessarily have to include all pages in your navigation menu. You may have some pages that are less important, which you can simply link from the content of other pages on the site.
Call to action. This is usually either a button or a phone number, and it would be located in the upper right.
Here are some commonly used pages, which you can use as a starting point for ideas. The order can vary depending on which pages you are using, but I’ve listed them in roughly the order that I’ve noticed they typically appear.
- Home. The home page is typically the most important page, as it’s the first impression most people get when visiting your site for the first time. Many sites omit “Home” from the navigation, since it’s a commonly understood practice to click on the logo to get back to the home page.
- Start Here. If you have a lot of content, such as a blog or podcast, you may want a “Start Here” page to introduce yourself. It can be overwhelming to a first time visitor. This page typically shows a list of your categories and/or highlights your most popular pages/posts/episodes.
- Why [Your Company Name]. If you have a page like this, it’s often used to differentiate you from your competitors.
- Products / Services. Typically, this would be a drop-down menu, under which you list your products or services.
- Pricing / Plans. If you have a single product or service, this page would make sense. Otherwise, you would have your pricing listed on the individual product or service pages.
- Episodes. If you have a podcast.
- Shop / Store / Courses. If you’re selling physical goods, digital goods, courses, etc.
- Portfolio / Showcase / Photos. If you’re a designer, photographer, etc.
- Testimonials / Clients / Case Studies. If you have can add photos of the people giving you testimonials, it looks better than plain text and adds credibility. Company names and website URLs are also helpful.
- Blog / Articles. This page shows your list of blog posts. You may want to have some intro text at the top, and maybe link to some of your most popular posts.
- Resources. This page typically links to other pages you’ve written, or it could link to external sites.
- FAQ / Help / Knowledge Base. A long FAQ can be organized as an “accordion”, with a list of clickable questions. When a question is clicked, it expands to show the full answer. Generally, an FAQ page tends to be shorter and often is a single page, whereas a Help or Knowledge Base page contains links to many other pages, usually organized into categories.
- Account / Sign Up / Join / Register / Sign In. Typically if you have a single service, or an online store.
- Cart. If your site is an online store.
- About. Commonly found on all types of websites. If it’s too much to have on a single About page, you might have drop-down items for Our Story / History, Company / Team, individual team members, Careers, etc. Usually either the first item in the navigation, or second to last (before Contact).
- Contact. Commonly found on all types of websites. Usually the last item in the navigation.
All sites should have a footer, typically a single line with some or all of the following:
- Copyright. Typically, the copyright notice is something like “Copyright (C) [YEAR] [BUSINESS NAME]. All rights reserved.” Sometimes it links to a separate page.
- Privacy Policy. Commonly found on all types of websites.
- Terms of Service / Terms of Use. Commonly found on all types of websites.
- Disclaimer / Affiliate Disclaimer.
Depending on your site, you may want to include some more items above this bottom line, which will take up much more space. You would typically have between 2-4 columns, which may include items such as:
- Additional navigation menus (either identical to the main navigation or different)
- List of a few of your most recent blog posts
- Social media icons (which link to your profiles)
- Company logo and address
- Company or website tagline
- Email opt-in box
- Call to action button
Sidebars are commonly found on blog posts, but not often found on pages. It depends on the site and what you consider most important. If it’s not directly relevant, the sidebar can be distracting.
Typically, the sidebar is located on the right. Many WordPress themes support both a left and right sidebar, but in most cases, I don’t recommend using both at the same time. In WordPress, an item in the sidebar is called a widget. Some common sidebar widgets:
- Search box
- Email opt-in box
- List of recent blog posts
- List of blog categories
- List of related posts
- Social media account icons
- Ads and affiliate links
- Call to action button
Guidelines for Materials
Text. Large walls of text are often skimmed over by visitors. To make it easier for people to read your content, here are a few tips. Use headings, bulleted or numbered lists, occasional images, links, blockquotes, and formatting such as bold and italic. Make sure your paragraphs aren’t too long, and consider breaking them up with the occasional image.
If you use images inline with your content, I recommend keeping them on their own line. While it’s possible to make your text wrap around an image, it often results in narrow columns of text on smaller device sizes.
Background images. If you have content over a background image, make sure there is enough contrast to read the text. You typically want a darker image as the background (or at least the part of the image where the text covers), and the text to be white. In my opinion, a light background image with dark text rarely looks good. We can use an overlay to darken or lighten the image, or give it a color tint. Usually, I prefer to use either a black or blue overlay.
Also, keep in mind how the content and image will look on various screen sizes, especially if you are using an image that includes people. You don’t want text covering people’s faces. I usually avoid using text over a background image with faces, but there are design changes we can do to make it work. For example, we can hide or move the text when the website is being viewed at certain screen sizes.
Image file types. Typically, if you have an image that needs to have a transparent background (like a logo or icon), or an otherwise simple image, it should be a PNG file. If it’s a photo or complex image, it should be a JPG (or JPEG) file. If it’s a photo or complex image, a JPG file will usually have a much smaller file size than a PNG file. I usually try to avoid using photos that have been cropped with a transparent background, because those need to be PNG files, and they end up having particularly large image file sizes.
Image upload sizes. Generally, you want to use image dimensions at the exact dimensions that they are being displayed on your site. If you use an image that’s smaller than the dimensions it’s being displayed at, and stretch it to be larger, it will be distorted. If you use an image that’s larger than the dimensions it’s being displayed at, and shrink it to fit, it will look the same, but the file size will be larger than it needs to be, and the image will load slower than it needs to.
Page loading time has an impact on your search engine rankings. So you should avoid using images that are larger than necessary. Large, full-screen background images will have different dimensions depending on your visitor’s screen size. As a general rule of thumb, for full-screen or full-width images, I use a width of 1920 or 2560 pixels. While there are some people with wider screens than that, it’s generally not worth losing search engine rankings to provide a slightly sharper image to a small percentage of people with very large screens.
Image source files. For logos or any other images modified in a design program, you’ll want to keep the source files (i.e. PSD or EPS files) for reference. If the images need to be modified or resized, you typically want to start with the source files to avoid distorting them. If you hire a graphic designer, ask for the source files so you’re not “held hostage” going back to them every time you need a new image size.
Video. In virtually all cases, you don’t want to upload videos to your website directly. You’ll want to upload them to a dedicated 3rd party video hosting service such as YouTube, Vimeo, or Wistia, and embed the video player on your site. If you’re offering them as downloadable files, you should use Amazon S3 or a similar file hosting service. Streaming or downloading videos uses a lot of bandwidth, and if you’re doing it from your own site, your bandwidth allocation from your host can get used up quickly, and your site could be shut down or your traffic can get throttled.
Once you’ve uploaded your videos to a 3rd party service, you’ll just need the URLs to embed them on your site. Services like Vimeo and Wistia have premium options that can prevent other people from embedding your videos on their sites.
Audio. This is typically the same case as video. However, if you’re just using some small files (i.e. audio samples), and not something a lot of people will listen to and download (i.e. a podcast), then you can probably get away with uploading them to your site. For audio hosting (especially podcasts), you may want to look into services like Libsyn, Blubrry, Castos, or SoundCloud.
Downloadable files. Typically, if you have documents you want people to download, you should offer them in PDF format, which is universally readable. If you need to offer them in a proprietary format, such as .doc or .docx, I recommend you save it as a .pdf as well.