Welcome to the CHROMATIC blog. We discuss topics related to Drupal web development, responsive web design, web strategy, small business, and last but not least, our company and projects.

The Official 'Successful Website Checklist Challenge'

If your website doesn't stand out and do a heck of a lot of things right, then chances are it's going to crash and burn. Take our "Successful Website Checklist Challenge" (below) and see what you're doing right, what you're doing wrong, and what you're forgetting to do. We've even included notes and resources for nearly every item on the checklist (just to make your life easier).

The Sections

  1. Planning
  2. Design/Layout
  3. Usability/Accessibility
  4. Content
  5. Website Optimization/Standards
  6. Search Engine Optimization/Marketing

Before you begin (toggle descriptions/notes "On" or "Off")

This page doubles as a comprehensive article/checklist. Although, by default, descriptions and notes under all of the checklist items are visible, you can hide them. If you wish to toggle the descriptions and notes under all of the checklist items "On" or "Off", Toggle Descriptions Now!.

Planning

Unless you or your company has a very large budget (and a heck of a lot of resources), don't attempt to enter a market that is saturated with competition. For example: a video game news website. Websites such as Gamespot.com, Ign.com, or GamesRadar.com already dominate the video game news market. Focus on details. If you do want to enter the video game news market, focus on a smaller area of that market 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 video game news for dogs and cats, but you'd be hard pressed to find a dog or cat capable of visiting and digesting the information on your website.

The guys over at Niche Website Guide have collected and written a lot of useful information regarding niche websites.

Any successful website needs an airtight business plan. MyOwnBusiness.org provides a wealth of free information about the mechanics of a business plan and how to create a successful one.

Domain names should be:

  • short, sweet, and unique
  • suggestive of your business category
  • easy to interpret and pronounce
  • easy to remember

For more on choosing a good domain name, check out this great article over at PromotionWorld.com.

If you're serious about your website, then dedicated server hosting is the only option. We've worked with a number of web hosts over the years, and without naming names, there are some really terrible shared hosting companies out there.Yes, we know, 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.

Read more about the differences between dedicated servers and shared servers at DedicatedHostingReview.com.

Rackspace offers reliable, fast, dedicated servers at reasonable prices. Their support is absolutely fantastic.

Design/Layout

Nearly all successful websites have one thing in common: basic website elements:

  • Header - usually contains the logo, tag line, and sometimes the navigation.
  • Navigation - sometimes contained within 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 meat and potatoes 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.

Having a unique and unforgettable logo and brand can allow your website and/or company to remain on the minds of your visitors. Without a logo and brand, it will be hard to make your website stand out from the competition.

Visit Wikipedia for more information on logos and branding.

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.

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.

Read more about information overload and how to avoid it by checking out our article, "5 Things to Hate About Web Design (and how to fix them)".

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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:

  1. 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
  2. Provide synchronized alternatives for synchronized time-based media
  3. Create content that can be presented in different ways (for example simpler layout ) without losing information or structure
  4. Make it easier for users to see and hear content including separating foreground from background
  5. Make all functionality available from a keyboard
  6. Provide users with disabilities enough time to read and use content
  7. Do not design content in a way that is known to cause seizures
  8. Provide ways to help users with disabilities navigate, find content and determine where they are
  9. Make text content readable and understandable
  10. Make Web pages appear and operate in predictable ways
  11. Help users avoid and correct mistakes
  12. 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).

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". Oh yea, we also recommend getting rid of the Flash. Less Flash = Better Usability.

Note: If you've been following our articles, then you know that we've been very anti-Flash in website design for quite some time. As a matter of fact, I can't remember the last time we said something positive about Flash. However, hopefully that will change in the not-to-distant future. Professional Flash/Flex developer Chad Udell foreshadows a likely promising future for Flash in websites.

There may be hope for Flash after all.

Content

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.

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.

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.

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

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)
  • Firefox (PC, Mac)
  • Safari (PC, Mac)
  • Opera (PC, Mac)

Don't have multiple computers running various operating systems? Fear not, Browsershots has you covered. Browsershots:

makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

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

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!

CSS Validator | XHTML Validator

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 Color Shift issue.
  • 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.

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.

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.

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

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
  • 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 hosting, merchant account integration, and shopping cart.
  • PPC
  • 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 click.
  • 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".

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

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 make sure that when reviewed, your submission will be accepted.
  • 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 usable website.
  • BOTW (Best of the Web) - Best of the Web also offers paid directory placement. It costs $79.95 (as of this article's publication date) to have your website included in their directory. You can either pay a yearly fee of $79.95 or a onetime fee of $239.95.
    • 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.

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.

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.

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.

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.

Are We Missing Something?

Although our "Successful Website Checklist" is pretty thorough, we consider it a work in progress. If you think we've left something out, then please let us know by leaving a comment below. We will continue to add visitor suggestions as well as our own findings. Thank you!

Need a new web strategy or website?

As demonstrated in this blog post, we know our stuff when it comes to building websites. If you have a project that you need help with or are looking for a solid Drupal company to partner with, we’d love to hear from you. Contact Us and let’s talk.
  • "When people use different devices to complete a single task, they want the same content and navigation." - A List Apart
  • "77% of mobile searches take place at home or work, only 17% on-the-go, according to Google." - Google
  • "Only 16% of consumer brands have a mobile strategy, so it’s no surprise that only 14% are happy with the results." - Digiday
  • "55% of mobile phone owners say they use their phone to access the internet." - Pew Internet
  • "46% of shoppers reported they exclusively use their mobile device to conduct pre-purchase research for local products and services." - Mobile Path-to-Purchase Study
  • "Blacks, Hispanics, low-income Americans, high school educated are more likely to be mobile-only users." - Pew Internet
  • "Google recommends following the industry best practice of using responsive web design to decide the rendering on each device." - Google
  • "31% of current mobile internet users mostly go online using their phone. That’s 17% of all mobile phone owners." - Pew Internet