{"id":610,"date":"2008-10-30T10:51:26","date_gmt":"2008-10-30T17:51:26","guid":{"rendered":"http:\/\/www.bspcn.com\/2008\/10\/30\/15-key-elements-all-top-web-sites-should-have\/"},"modified":"2010-05-27T11:02:55","modified_gmt":"2010-05-27T18:02:55","slug":"15-key-elements-all-top-web-sites-should-have","status":"publish","type":"post","link":"http:\/\/localhost\/wordpress\/2008\/10\/30\/15-key-elements-all-top-web-sites-should-have\/","title":{"rendered":"15 Key Elements All Top Web Sites Should Have"},"content":{"rendered":"

Written by Selene M. Bowlby<\/a><\/p>\n

\"Design<\/p>\n

There are a lot of details to consider when designing and developing a web site. In reality, it can seem like an endless list – but if you look carefully you’ll see that there are certain elements that are more important than others, elements that are used consistently among the most successful sites.<\/p>\n

Once you’ve completed the Planning Stage<\/a> of your website, the rest of the elements fall into broad categories ranging from User Interface Design to Content Creation to actual Development. Of course, there are also the issues surrounding Search Engine Optimization (SEO) – but we’ll save that for another day\u2026<\/p>\n

With that in mind, here are the 15 elements that should always be included on any top web site.<\/p>\n

1. Good Visual Design<\/h3>\n

First things first\u2026 Visual design. I don’t know about you, but if I go to a web site that is not visually pleasing, it is a quick turn off.<\/p>\n

That’s not to say that every top website needs an incredible visual design – but if a site looks like it hasn’t been updated since 1994, it’s just not going to be associated with other great websites.<\/p>\n

A clean and simple design is usually all you need. Bells and whistles are nice, but I’m one who tends to go with the “less is more” theory. You don’t want your design to be over crowded. You just want it to look good so it can stand out from your competitor(s) in the minds of your potential clients.<\/p>\n

First impressions are key. Although good design alone will not keep someone on your site – an eye-catching design will, at the very least, grab their attention long enough to take a look around.<\/p>\n

2. Thoughtful User Interface<\/h3>\n

\"UserAlong with good design comes a good user interface. The user interface is the foundation of any good functional web site. When designing a site, you’ll need to take into consideration your average user. Who is going to be visiting your web site – who is your ideal customer? Are they tech-savy? Are they computer illiterate?<\/p>\n

It’s helpful to create an image of your ideal visitor and have them in mind when planning out the design for your site. Be sure you offer everything on your site that they would want to find before buying from you or becoming a subscriber.<\/p>\n

You’ll want to be sure that your navigation is easy to spot and consistent throughout the entire web site. Make it obvious where the user should click both in terms of your primary navigation, as well as for links within your content areas.<\/p>\n

3. Primary Navigation Above The Fold<\/h3>\n

Part of having an easy to navigate web site is ensuring that the primary means of navigation – links to the key areas of your site – are kept above the fold. With today’s large computer monitors and growing screen resolutions “above the fold” is generally considered to be within the top 500-600 pixels of your site design.<\/p>\n

Elements to include here are your logo (which should link back to your home page), as well as links to the main sections of your site. If you can link to sub-pages here that is great, but in most cases that will over-clutter your design.<\/p>\n

For example put “Home | About | Services | FAQ | Contact” in a very easy to find location at the top of your site. You can place sub-links such as About-Bio \/ About-Resume somewhere else, such as in your sidebar or as sub-links under the main page title of that section, etc.<\/p>\n

Consistency is key here – be sure to place both your primary and sub-navigational links in the same spot throughout the various pages of your web site.<\/p>\n

4. Repeat Navigation In The Footer<\/h3>\n

If you use images (or even flash) for your main navigation, it’s especially important to offer a duplicate set of navigation links in your footer. Even if you use text links at the top, the duplication is still helpful. You want to make it as easy as possible for people to find the content they are looking for on your site.<\/p>\n

Often times the footer will link to additional information – such as Terms of Service – as well. Things that should be easy to find, but not necessarily something you want taking up real estate on the primary navigation area of the site.<\/p>\n

\"Content<\/p>\n

5. Meaningful Content<\/h3>\n

You know the saying\u2026 “Content is King” – you might have a pretty web site which will catch someone’s eye, but if the content is no good, you can be willing to bet that they aren’t going to stick around.<\/p>\n

When writing the copy for your web site, it’s important to provide helpful, knowledgeable information about your company, products, services, etc. If you’re running a blog, informative articles related to your area of expertise are incredibly helpful as well.<\/p>\n

While it’s important to sell yourself or your company, you also don’t want to oversell<\/a>, either. Particularly in a blog setting – people reading a blog don’t want to hear all about “me me me” – they want to know how you can help them.<\/p>\n

6. A Solid About Page<\/h3>\n

Among the top 10 most popular pages of my own site (after the home page, blog, 3 specific blog posts and my portfolio) is the About page. I have more clicks to my about page than to my services or portfolio pages, if you can believe that!<\/p>\n

It’s simply because people are curious. They want to know who is behind a company or a blog. I was personally quite shy about including a photo on my own bio page, but finally did it a few months ago. It’s amazing what the sense of curiosity does – I myself am always clicking on about pages too, trying to find out more about the designer or writer, etc.<\/p>\n

Include information on your background and how it pertains to your own business and expertise, etc. The about page gives potential clients a little bit more information about you and can often help create a more personal bond. If they are reading your writing and know a bit more about you, they’ll have a better sense of connection and better be able to relate to you on another level.<\/p>\n

More often than not, a potential client will select the company with a “real” person behind it, rather than the faceless organization that refuses to get even a little bit personal.<\/p>\n

7. Contact Information<\/h3>\n

\"ContactNothing can turn off a prospective client more than not being able to find a way to contact you. If they’re interested in your services, and can’t find a simple contact page with a way to get in touch and hire you they’re going to end up going over to the competition.<\/p>\n

Ideally you’ll want to give more than one method of contact. At the very least an email address and contact form. To make you more “real” though you should try to include a phone number (and if possible a mailing address) as well. I know many freelancers work from a home office – as do I. A quick solution is to get a separate phone line for business calls, as well as either a PO Box or other mailing service address.<\/p>\n

Keep in mind that these are tax deductible expenses and makes you look that much more professional than someone who only includes an email address. To other home business owners in the same boat, it might not make a difference. But if you work with any larger or corporate clients, they’ll see a public phone number and address as an added sign of stability and that could play a small part in them choosing you over someone else.<\/p>\n

8. Search<\/h3>\n

If you have a large web site or blog, having a search field is incredibly helpful, as well. There’s nothing like wading through hundreds of pages to find specific content without a search feature. If a potential customer can’t find something easily on your site, but Joe Designer over there does\u2026 odds are they are going to go with Joe whose content is easy to search through.<\/p>\n

You can often use a Google Search on your site, or if you have WordPress<\/a> (or another blogging platform or CMS \/ Content Management System) this will be fairly easy to accomplish. It’s not quite as easy to set this up with a static html site, but there are still services out there that will let you incorporate a functional search box onto your site.<\/p>\n

9. Sign-Up \/ Subscribe<\/h3>\n

\"RSSIf your web site offers content on a consistent basis – such as with a blog – you’ll want to make it as easy as possible for people to sign up for updates.<\/p>\n

This is something else that’s extremely easy to add if you have a WordPress blog. By default they’ll provide you with a feed address. But if you want to step it up a notch, you’ll want to sign up for a free account with FeedBurner<\/a>. Better yet, you might consider using the FeedBurner FeedSmith plugin that will help re-direct all feeds through your FeedBurner account for easy tracking of your subscribers.<\/p>\n

If you don’t have a blog, but still want to offer subscriptions to an email newsletter, for example, there are many companies that will let you setup and manage a mailing list. They will provide you code for your site to enable your web site visitors to sign up for updates using their email address. (FeedBurner allows you to collect email addresses too, btw). In some ways this is better than an RSS subscription because you are able to collect email addresses of potential prospects. While you can keep track of subscription numbers and other generic statistics, RSS subscribers get your updates via feed reader and have no need to provide an email address.<\/p>\n

10. Sitemap<\/h3>\n

There are two kinds of sitemaps – one for humans and one for the search engines. An html (or php, etc.) sitemap meant for visitors to your site can be an invaluable tool for finding just what they are looking for.<\/p>\n

Creating a sitemap – a structured list of all pages of a web site – is especially useful if you are unable to add a search feature to your site. A link to the sitemap is another item that is helpful to place down in the footer of your site, as well. A good sitemap will list out every page of your site in a hierarchial format – clearly showing the relationship of pages in terms of primary pages with sub-pages and sub-sub-pages, etc.<\/p>\n

11. Separate Design from Content<\/h3>\n

Long gone are the days of using html tables for layout and design. The best developed sites use a combination of XHTML and CSS (Cascading Style Sheets), which create a separation of design vs content.<\/p>\n

With use of <div> tags you can create containers for various areas of text and images on your page. Without a corresponding CSS file you’ll see just the basics – text – which is what the search engines want to see, too.<\/p>\n

By linking to an external CSS file in order to separate your content from the design, it leaves your html page with mostly nothing but actual relevant text in your source code. The separate CSS file is what specifies the fonts, colors, background images, etc. for your site design.<\/p>\n

What’s great about this is you can update just one CSS file and have the change made site-wide (no longer having to go into each and every html page of a static site, to change your main link color from blue to green, for example).<\/p>\n

With this separation of content from design, the search engines no longer have to wade through all of the excess code to find out if your content is relevant, either. And with separate files, the content can load quicker, too – always a good thing in the mind of visitors to your site.<\/p>\n

\"Web<\/p>\n

12. Valid XHTML \/ CSS<\/h3>\n

It’s not just enough to develop your site using XHTML and CSS, though. It has to be accurate code. Two invaluable tools for checking your source code are offered by the World Wide Web Consortium (W3C):<\/p>\n