If your website doesn’t stand out or motivate your customers to take action; it will not contribute to profits. The following guide covers the basics to make your website work for you. Links to additional resources for many items are included.
The Sections
- Strategic Planning
- Site Design/Layout
- Usability
- Content
- Website Optimization/Standards
- Search Engine Optimization/Online Marketing
Strategic Planning
1. Find a less competitive niche in your market
Unless you are a Fortune 500 company with lots of resources, don’t attempt to enter a market that is saturated with competition. For example: an online bookstore website. Websites such as Amazon.com or BarnesandNoble.com already dominate the bookstore online market. Focus on a market segment. If you do want to enter the bookstore market, focus on a smaller area of that market (like books on the State of Indiana) and cover it extensively.
Make sure that there is a demand or an audience for the discovered niche. Sure, you can create a website that offers books on the birds in the State of Indiana, but you’d be hard pressed to find a bird capable of visiting and digesting the information on your website.
Niche Website Guide - a collection of useful information on niche websites.
2. Develop a business plan
Any successful website needs an flawless business plan. MyOwnBusiness.org provides extensive free information about the mechanics of a business plan and how to create a successful one.
3. Choose a good domain name
Domain names should be:
- short, sweet, and unique
- suggestive of your business category
- easy to interpret and pronounce
- easy to remember
Article. Promotionworld.com - A great article over at selecting a domain name.
Dot-o-mator.com - Use Dot-o-mator automatically generate potential names.
4. Choose high quality web hosting
If you’re serious about your website, a dedicated server hosting is a must. We’ve worked with a scores of web hosts over the years, and without naming names, there are some really terrible shared hosting companies out there. Dedicated servers cost a significant amount more than shared hosting servers. But just like anything in this world, you get what you pay for. Due to their limitations, a shared server is a poor choice if you’re looking to build a successful website.
DedicatedHostingReview.com - Information on the differences between dedicated servers and shared servers.
WiredTree.com offers reliable, fast, dedicated servers at reasonable prices. Their support is absolutely fantastic.
Design/Layout
1. Basic website elements: header, navigation, content/body, footer
Nearly all successful websites have one thing in common: basic website elements:
- Header - contains the logo, tag line, and sometimes the navigation.
- Navigation - contained in the header, horizontally above or below the header, or vertically above or below the header (oftentimes aligned on the left or right side of the website).
- Content/Body - the bread and butter of a website. The content/body contains the information that makes your website what it is. The content/body is also the reason why people will visit your website and continue to come back.
- Footer - the footer usually contains copyright information, links to the main sections on your website, and/or links to other websites within your company’s network.
2. Logo and branding
A unique and unforgettable logo and brand allows your website and/or company to stay in the mind of your visitors. Without a logo and brand, it's difficult to make your website stand out from the competition.
3. Elegant design
You know the saying “Don’t judge a book by its cover”? Well, most people do judge a website by its design. What’s worse, if your website doesn’t have an attractive design, people may dismiss your website as being amateur or unprofessional and leave without looking at any of the content.
Bottom line: take the time and/or spend the money to create an attractive design.
For beautiful design inspiration, visit a CSS gallery such as CSSMania.com or W3CSites.com. Or favorites are at SmashingMagazine.com
Article - First Impressions Count Online - BBC Article. We've saved the file as a PDF here.
4. Avoid information overload
One reason why many websites fail is because there is too much happening on any given page. Keep the website clutter to a minimum. Doing so will allow your visitors to focus on the main content and diminish the chance that they will become distracted or overwhelmed by less important elements.
Chromatic article, “5
Things to Hate About Web Design (and how to fix them)“.
Does your website suck? Link.
5. Effective color scheme
There are many useful color scheme tools available on the Internet that will help you piece together a successful color scheme. Among our favorites, ColorSchemer, and Color Scheme Generator 2, and Kuler.com.
6. Develop focal points
There should be a clear focal point on every page of your website. The focal point:
- usually takes up the most space
- oftentimes stands out through the use of color, font size, or other design/layout techniques
- is the area on a web page that immediately grabs the visitor’s attention
Without a clear focal point, a visitor can easily become confused as to what they should be looking at when they land on a web page.
7. Attention to line height
Although it is a smaller detail, paying attention to the line height of the elements within your website is crucial. Usually it is important to increase the default line height of website elements so that these elements can be more easily digested and understood by the visitor.
Line height should be examined and if necessary, adjusted, for the following elements:
- paragraphs
- lists
- images
- navigation
- headings, subheadings, captions
Read more about the CSS line height property at W3Schools.com.
8. Readable font size
Make sure that your website’s font size is large enough so that visitors can easily read your content. It is not recommend to have a font size less than 11 pixels. Currently, more and more websites are increasing their website element’s font sizes to 13 pixels or greater.
Note: Although we used pixels as the of measurement in the previous paragraph, em is the preferred unit of measurement for the sake of accessibility.
Read more about the CSS font size property at W3Schools.com.
9. Use of white space/negative space
According to Wikipedia, white space (often referred to as “negative space”) is:
That portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted.
The use of white space is key to aesthetic composition.
10. Strong home page
A home page’s main goal is to successfully communicate to the visitor what your website is about. If your home page doesn’t grab the attention of the visitor within 7 - 10 seconds, then chances are that the visitor will bounce somewhere else and leave your website.
Things your home page should do:
- Keep your visitors awake (only interesting stuff on the home page)
- Be short and sweet (bulleted lists, clearly define sections, use columns (not more than 3), short paragraphs)
- Tell your visitor where to go (accessible navigation, search function, site map in footer)
- Earn your visitor’s trust (company name, address, phone number, e-mail address, customer ratings, testimonials); this depends on the type of website
- Be error-free, clean, intriguing (in one way or another), and just plain awesome
Read the helpful article, “5 Steps to a Great Home Page” for a more in depth explanation.
Usability/Accessibility
1. Usable, easily accessible, and consistently placed navigation
A very thorough article on website navigation usability, “The Dos and Don’ts of Website Navigation Usability“, illustrates what to do and what not to do when assembling your website’s navigation:
- Universal Navigation - navigation appears on every web page
- Placement Consistency - navigation appears in the same location on web pages
- The Importance of Text - text for navigation = good, images for navigation = bad
- Feedback on Location - breadcrumbs, hyperlink styles, colors, etc
- Flash Navigation - a sensitive subject
2. Flash-free navigation
Problem: In the past, one of the biggest reasons why people used Flash for their navigation was because they wanted to have exciting mouse rollover animations or perhaps an interesting fade in effect. The problem: how is your website going to be successful if non-Flash users can’t properly navigate through it?
Solution: You don’t need Flash to do this anymore. Although there are some limitations, mootools and jQuery use JavaScript (which 99% of users have enabled on their computers) to create intriguing rollover animations and effects.
Since not every user will not have Flash enabled or installed on their computer, do not use Flash for your navigation. It’s just that simple.
3. HTML Site map
According to Wikipedia, a site map is:
a representation of the architecture of a web site. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, typically organized in hierarchical fashion. This helps visitors and search engine bots find pages on the site.
If you haven’t yet created a HTML site map for your website, Build Your Website has put together a helpful article offering a few solutions to creating a HTML site map.
Note: Don’t confuse a XML site map with a HTML site map:
- a HTML site map is created to provide a table of contents of the pages found within your website to help visitors find the page or information that they are looking for
- a XML site map is created for the sole purpose of assisting the search engines in finding all of the links within your website
A XML site map is listed near the end of this checklist under the “Search Engine Optimization/Marketing” category.
4. Check for dead, broken links
Aside from being bad for Search Engine Optimization, dead and broken links are usability nightmares. Make sure that all of the links within your website are linking to existing, live pages.
Rather than going through your entire website and clicking every link, Dead Links has a fantastic broken link checker spider that automatically scans through your website and reports which pages contain dead or broken links. Nifty and very useful.
5. Test the website on real users (beta test)
Although your website might make perfect sense to you, just remember that not everyone:
- thinks like you
- is as bright as you
Always make sure to test your website on real world users (preferably random people that you don’t know very well, or even better, have never met before). You’re looking for honesty - not people who will tell you what you want to hear (that your website is the best website in cyberspace). If necessary, run multiple tests until your subjects have no more complaints.
Make sure that you’re selecting people who will be your target audience, too. It wouldn’t make much sense to test a motorcycle website on a group of senior citizen women from Hawaii.
In case you’re confused, here is a more in depth article on website beta testing.
6. Compliance with Web Content Accessibility Guidelines
Is your website accessible to everyone (including handicapped users)? There are a number of things you must do in order to make your website accessible:
- Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language
- Provide synchronized alternatives for synchronized time-based media
- Create content that can be presented in different ways (for example simpler layout ) without losing information or structure
- Make it easier for users to see and hear content including separating foreground from background
- Make all functionality available from a keyboard
- Provide users with disabilities enough time to read and use content
- Do not design content in a way that is known to cause seizures
- Provide ways to help users with disabilities navigate, find content and determine where they are
- Make text content readable and understandable
- Make Web pages appear and operate in predictable ways
- Help users avoid and correct mistakes
- Maximize compatibility with current and future user agents, including assistive technologies
These items were taken directly from the Web Content Accessibility Guidelines (version 2.0).
7. Minimal or No Usage of Flash
Jakob Nielson (commonly referred to as “the king of usability” (Internet Magazine)) sums up the current use of Flash technology on the web quite well:
Although multimedia has its role on the Web, current Flash technology tends to discourage usability for three reasons: it makes bad design more likely, it breaks with the Web’s fundamental interaction style, and it consumes resources that would be better spent enhancing a site’s core value.
If you have a lot of Flash on your website, then we recommend reading the entire article, “Flash: 99% Bad“. Less Flash = Better Usability.
Content
1. Unique content, presented in an exciting, straightforward manner
Give people a reason to visit your website. Make sure your content:
- is checked for spelling and grammatical errors
- is easy to understand
- has specific appeal to your target audience
- shows the writer’s personal appeal and flavor
Note: Depending on the type of website, content may come from your visitors instead of from you. For example, a community website gets a great deal (if not all) of its content from the website’s members or visitors (YouTube, MySpace, Facebook). Even still, there must at least be a few pages on the website that explain what your website or company is about. Make sure that these content pages are top notch.
AkaMarketing.com has a very good article explaining the importance of content and things you can do to have great website copy.
2. Regularly update content
Give people a reason to come back to your website. Unless you have information that visitors will want to read again and again and again, it is imperative that you update the content on your website as frequently as possible.
Depending on the type of content, some websites won’t need to update their content as frequently as others.
Remember: quality, not quantity. Quickly throwing together 10 different pages or blog posts that are of low quality will more than likely be just as effective as throwing together a single page or blog post that took you the same amount of time to create.
3. Break content up with headings, captions, images, videos
Unless they are reading an article, people get bored with reading tons of plain text. Break up the paragraphs with headings, subheadings, captions, images, videos, etc. Make your content visually interesting.
4. Allow user interaction
Whether you accept comments on your blogging website or allow users to upload videos, images, and sound clips on your community website, make sure to include some form of user interaction. By allowing user interaction, you are making the visitor feel like they are a part of your website. And lets face it - people like to be heard and people like to be a part of something.
Even better, provide incentive to visitors to interact on your website. For example: By displaying the top 5 posters on your home page who are considered to be the most reliable and respected users amongst your community product review website (based on review ratings), you are encouraging people to contribute quality reviews and feedback. Make user interaction fun!
Website Optimization/Standards
1. Website is standards compliant/cross browser browser compatible
This website works best in Internet Explorer 6 with a resolution of 400 x 200.
If you’ve been surfing the web since the 1990s, then you’ve probably come across this type of disclaimer on a website. In the past, a webmaster optimized their website so that it worked well in a particular browser. However, when a visitor came to that website with a browser different from the one mentioned in the disclaimer, they were usually out of luck.
Enter web standards, the World Wide Web Consortium (W3C), and the Web Standards Project. Gone are the days of website optimization for a single browser. When developing your website, it is absolutely crucial to test on all major, modern browsers. These browsers include:
- Internet Explorer 6 (PC)
- Internet Explorer 7 (PC)
- Internet Explorer 8 (PC)
- Firefox (PC, Mac)
- Safari (PC, Mac)
- Opera (PC, Mac)
Don’t have multiple computers running various operating systems? Fear not, various online sites provide screenshots of how your site looks on different platforms. We use: Browsershots
2. CSS, minimal use of tables
When programming and styling your website, ditch tables and use XHTML and Cascading Style Sheets (CSS):
In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.
Note: Table-based layouts were used in the 1990s simply because there was nothing better available. Although tables can be used to display table-appropriate elements such as tabular data, CSS-based layouts offer a number of advantages over table-based layouts which you can find in the article, “13 Reasons Why CSS Is Superior to Tables in Website Design“.
For a basic tutorial on how to convert your design into CSS, check out the tutorial, “Coding a Layout“.
3. Validate website’s CSS/XHTML
Some people think that CSS and XHTML validation is a waste of time - we respectfully disagree. If anything, CSS and XHTML validation is extremely useful as it can aid in the discovery of visual and functional inconsistencies that you may be getting between different browsers. Not only that, having a website with validating CSS and XHTML screams, “I care about my website.” Websites need love, too.
Don’t be lazy: Validate your code!
4. Optimize page size (images, content, video, audio)
Although most people have broadband speed internet connections, believe it or not there are still people who use dial up to connect to and surf the Internet. Make sure that your pages are optimized so that they load quickly no matter what the speed of the visitor’s connection.
Page size optimization has a number of steps:
- Compress images for the web: whatever your image editing
software is, make sure to compress all images that will be displayed on your
website. Using the “Save for
Web” feature in Photoshop allows you to significantly decrease the native
file size of an image.
- When saving an image for the web using Photoshop, colors become muted and lighter than the original version. Viget Labs found a great solution to the Photoshop .
- Use CSS, ditch tables: Table-based layouts are much more bloated than CSS-based layouts and thus result in prolonged page load times. Just say “NO” to table-based layouts.
- Compress video/audio for the web: There are a number of video and audio compression tools available. Choose whichever one you like the most and make sure that your video and audio is compressed before uploading it to your website. There is nothing worse than having to wait for a huge, uncompressed video or audio file to load.
5. Clean code for updating/multiple programmers
Is your code clean? Is it commented? If another programmer needed to jump into your code and make some adjustments for you, would it be difficult for them to find their way around?
Do your best to present your website’s code in a clear, well-structured manner. It will more than likely help you or other programmers working on your website in the future. Not only that, but having clean code can increase the performance of your website in general.
6. Scripts placed near bottom of page code
By moving scripts to the bottom of your pages, you enable progressive rendering and also are able to achieve greater download parallelization.
Note: Some scripts may need to be at the top of your pages. This is perfectly fine. Placing scripts near the bottom of your pages is more of a performance tweak, if anything. Still, if you can do it, it is most certainly recommended.
Read a more detailed explanation about why moving scripts to the bottom of your pages can help.
7. SEO friendly
There a number of things that you must do in order to make your website SEO friendly:
- minimal usage of Flash
- don’t use frames
- keyword research
- CSS drop down navigation (optional)
- include researched keywords in title, description meta tags
- include researched keywords in content
- include researched keyword in hyper linked anchor text
- include researched keywords in headings (H1, H2, H3 etc)
- include researched keywords in alt tags (images, videos, etc)
- use CSS (Cascading Style Sheets)
- faster page loading resulting from the usage of CSS means that search engine spiders can more quickly and more efficiently crawl your website
Read more about making your website SEO friendly: “Essential Guide to Creating SEO Friendly Website Design“.
Search Engine Optimization/Marketing
1. Website monetization
One of the biggest reasons to own a website is to generate income from advertising. There are a number of ways to monetize your website or blog (taken from Vandelay Design article, cited below):
- Text link advertising
- Text Link Ads - The leader in paid text link ads.
- LinkWorth - Keep up to 70% of the advertising revenue.
- Text Link Brokers - Make money by selling links in a
- Direct Sales
- KickStartCart - A shopping cart, merchant account, and marketing tool.
- PayPal - One of the cheapest choices for selling your own products.
- EasyStoreCreator - Provides a package that includes
- PPC
- Google AdSense - The industry leader.
- Yahoo! Publisher Network - Yahoo’s AdSense alternative.
- Chitika - Unique Pay-Per-Click product promotion
- Banner Ads
- AdEngage - Photo ads with text; not your typical banner ad.
- AdDynamix - Offers several options besides banners.
- BannerBoxes - Keep 75% of the revenue from each
- Affiliate Programs
- Paid Reviews
- Parked Domains
- Sell Ad Space
- RSS Feed Monetization
- Job Boards
- WP Plugins
Rather than list all of the monetization options available, check out “101 Ways to Monetize Your Website or Blog“.
2. Basic website promotion (press releases)
Press releases are a great way to promote your website, new features on your website, or anything else related to your website. A few fantastic press release websites are:
- PRWeb - “a leader in online news and press release distribution, has been used by more than 40,000 organizations of all sizes to increase the visibility of their news, improve their search engine rankings and drive traffic to their Web site.”
- eMediaWire - a PRWeb newswire
3. Submit website to directories (dmoz, Yahoo, BOTW)
Submitting your website to a number of popular Internet directories is a great way to build up some credible, powerful backlinks. Among our favorites:
- dmoz - The Open Directory Project. You can submit your
website to dmoz for free; the only catch - it can take weeks, months, or even
years for their editors to get to your submission.
- Here are some tips and submission guidelines from the official dmoz blog which can help you
- Yahoo!
Directory - Yahoo! is much quicker at reviewing your submission due
primarily to the fact that you have to pay them $299 per submission. If
accepted, you must pay $299 a year to stay in the directory.
- The upside is that their turnaround time is very fast (reviewed within 7 business days).
- The downside is that you are not guaranteed to be accepted into their directory. If denied, your money will not be refunded. However, if your website follows everything contained within this article, then chances are you will be accepted. Just make sure that you have quality content and a
- BOTW (Best of the Web) - Best of the Web also offers paid directory placement.
- The upside is that their turnaround time is very fast (reviewed within 3 business days).
- The downside is that you are not guaranteed to be accepted into their directory. If denied, your money will not be refunded. However, if your website follows everything contained within this article, then chances are you will be accepted. Just make sure that you have quality content and a usable website.
4. Newsletter/RSS feed - subscription
Newsletters/RSS feeds are a great way to keep subscribers up to date on the current happenings of your website or company. Not only that, but you can advertise and market promotions, products, special offers, contests, or other events to these subscribers.
5. Write articles and submit them to niche specific article submission sites
Well written articles are one of the best ways to obtain quality backlinks to your website. If you write a great article, chances are a lot of people are going to link to it. Rather than publishing several low quality articles, take your time and create a few masterpieces.
Note: Make sure that the subject of your article relates to the subject of your website in one way or another.
Here is an extensive article submission website list from Mr. SEO listing tons of great article submission sites. Rather than submitting your articles to all of them, choose the more popular and respected sites.
Another fantastic article explaining how to get your high quality articles featured on the front pages of Del.icio.us and Digg comes from Vandelay Design - “How to Set Up a Domino Effect of Traffic“. We can confirm that the method described within this article works, and it works well.
6. Analytics
Any successful marketing or SEO campaign is more often than not using a website analytics program. Yes, we know, data analysis may not be the most exciting thing to do, but it is one of the most important things involved in creating a successful website. How did visitors find your website? How long did they stay? What page(s) did they bounce or exit the most? What is the most common path to goal conversion? What browsers are your visitors using the most? These are all questions that an analytics program can answer.
Although there are a number of analytics programs available, Google Analytics is our favorite. Not only is it free, but it is constantly being improved.
7. XML Site map
Similar to a HTML site map, a XML site map is a document that contains all of the links within your website; however, a XML site map is created for search engines, whereas a HTML site map is created for your visitors.
Submitting your XML site map to the major search engines is good for SEO because the XML site map acts as a guide for the search engines. This “guide” assists the search engines in discovering and crawling all of the links within your website so that they can be indexed and properly assigned to the appropriate search engine results pages (SERPs).
Creating a XML site map by hand is a drag, and in our opinion, a waste of time. Check out the free, easy to use XML site map generator at xml-sitemaps.com.
Once your XML site map has been generated, check out this XML site map submission article that will take you through the process of submitting your XML site map to Google, Yahoo, and MSN.