15 Key Elements All Top Web Sites Should Have

Design Elements

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.

Once you’ve completed the planning Stage 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…

With that in mind, here are the 15 elements that should always be included on any top web site.

1. Good Visual Design

First things first… 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.

“This rule of thumb applies to everything from eCommerce software to a community forum layout.”

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.

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.

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.

2. Thoughtful User Interface

User Interface / NavigationAlong 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?

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.

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.

3. Primary Navigation Above The Fold

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.

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.

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.

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.

4. Repeat Navigation In The Footer

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.

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.

Content is King

5. Meaningful Content

You know the saying… “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.

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.

While it’s important to sell yourself or your company, you also don’t want to oversell, 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.

6. A Solid About Page

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!

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.

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.

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.

7. Contact Information

Contact InformationNothing 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.

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.

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.

8. Search

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… odds are they are going to go with Joe whose content is easy to search through.

You can often use a Google Search on your site, or if you have WordPress (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.

9. Sign-Up / Subscribe

RSS SubscriptionIf 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.

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

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.

10. Sitemap

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.

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.

11. Separate Design from Content

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.

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.

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.

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

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.

Web Development

12. Valid XHTML / CSS

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):

There are many reasons to write valid code… With valid code, you are a few steps closer to ensuring your site will look good across the different web browsers (see number 13 below) and will help you with the search engines, too. If your site is built to current web standards, the search engines can easily wade through your content.

Not to mention it just shows that you know what you are doing. Yes, many clients don’t know the difference, but a few do – and specifically request standards compliant code. If you can offer this but your competitor can’t – that gives you an extra edge.

And besides this, other web developers are likely to check out the source code of a site to see what’s under the hood… both out of sheer curiosity, and just because they can!

13. Cross Browser Compatibility

Although you might live and breathe inside Firefox, your client may not. There’s a good chance your client is using Internet Explorer. Unfortunately there’s an even better chance they’re using Internet Explorer 6 (please don’t get me started on this issue – lets just say I know I’m not the only web developer who wishes this browser will simply GO AWAY!)

It’s imporant that your own web site and the site(s) you create for customers display well in as many of the mainstream web browsers as possible. If you can make them compatible across platforms too, that’s ideal. Most end users are on a PC so this is probably the most important platform to target. However many people in the creative fields are on a Mac, so if this is your audience they are important to pay attention to as well.

Unfortunately most people aren’t lucky enough to have both a PC and a Mac (not to mention Linux, etc.) but with the help of a site called Browser Shots you can enter a URL – select from a variety of web browsers across different platforms – and have them create screenshots for you. Very helpful if you’re on a PC running Vista for example, where you no longer have access to an old copy of IE6.

14. Web Optimized Images

When designing for the web, it’s important that you save all your images in a compressed format. Not too much that your images become pixelated, but as much as possible while retaining quality.

If you’re accustomed to doing print work, you know that 300dpi is the standard. Not the case with web sites, though. When designing for the screen you’ll want to save your images at 72dpi which will make for a much smaller file size (aka quicker download time for your web visitors).

Programs like Adobe Photoshop have a “Save for Web” feature that will automatically convert your image to 72dpi if you forgot, as well as give you a variety of compression settings when saving your imges. For web this will likely be either png, jpg or gif depending on the particular usage.

Web Statistics and Analyitics

15. Statistics, Tracking and Analytics

Although this element is behind the scenes and not one you’re likely to know about as the web visitor — as a web site owner it is crucial, if not down-right addictive!

There are many services that offer tracking of web site statistics which include information such as:

  • How many hits does my site receive?
  • How many of these are from unique visitors?
  • How are people finding my web site?
  • What search terms are they finding me under?
  • What web sites link to me?
  • What are the most popular pages on my site?
  • Who is my average visitor (platform / browser / screen resolution)?

It’s actually quite amazing what kind of information you can keep track of with a good analytics program. Perhaps the most popular site for this is Google Analytics which offer a very robust (and free) tracking solution.

If you want to monitor your web site’s performance and figure out how you can improve your site, having a good stats package is key!

More Web Design Resources from FreelanceFolder

If you liked this list of website elements, you might also enjoy these other web design posts from FreelanceFolder:

Now It’s Your Turn… What Do You Find Most Important?

As far as design, development and content (we’ll cover SEO in a separate post) what elements do you consider the most important feature for a web site to have? What do you see as a deal breaker if a company does NOT have on their site?

I’m sure there are more than the 15 elements listed in this post — so what else would you add to the list? Please share in the comments below!

Image credits: Gaetan Lee, minor9th, ★lex, michael hilton, Chesi – Fotos CC

Comments

  1. says

    I am hoping to be the first comment because this article is GENIUS! Definitely all top quality points in the article and a guideline a lot of websites need to follow.

    Congrats on your first guest article Selene

  2. says

    Wow, wow, wow and WOW.

    Awesome post, even though it’s lengthy ‘tome’ it’s all so relevant and worth reading. And I am someone with the attention span of a flea.

    Great stuff you on this post.

    Best
    Graham

  3. says

    You rock, Selene. Great post and very relevant since I’m in the process of re-evaluating my web assets for a makeover.

    Look forward to more insightful articles.
    Joann

  4. says

    Wow! You have a lot of friends Selene :-)

    This is a great post though, and is completely deserving of all the great comments.

    Now I just have to go through the FF redesign and make sure we hit all of your points… lol

  5. says

    Wow! Thank you ALL for such positive feedback on the post!

    This is actually my first time writing for another web site, so I will admit I was a bit nervous as to how the post would be received, LOL.

    I’m glad you all find the items in this list to be helpful, though. If it helps improve your own web sites even just a little bit – gaining you more clients or subscribers, etc. then that will be even better!

    Thanks again for the great comments. And Mason thank you for giving me the opportunity to write for Freelance Folder! :)

  6. says

    I’m finding #14 a little odd since the images are measured in absolute pixels, regardless of resolution. If you have a 300 by 300 pixel image, the file size will be the same if you have the resolution set to 72 or 300. However, using the Save for Web will strip out metadata.

  7. says

    Terrific post Selene :)

    It’s amazing to me how a post like this can change month-to-month and year-to-year. For example, the last few items on this list wouldn’t even have been included on this list 2 years ago (considering Google Analytics didn’t even exist).

    One thing I’d add, nowadays, is SEO and social media, as much as those seem like buzzwords. While not all sites need them, or at least in such high degrees (though this also applies to Search in your article, as you said), they are becoming increasingly more important – if not only due to popularity.

    While you brought up SEO as a tangent in a few points, I’d definitely put it as #16 in my list. Social media (e.g. Twitter, Facebook, etc.) are only important for some companies; but, even more importantly going back to my original point, they represent how companies must ALWAYS place their website at a higher level of importance than they tend to do, as the Web is constantly evolving.

  8. says

    I completely disagree with putting “Good Visual Design” at number one. I would suggest this might be more appropriate:

    1. Clear Purpose

    The purpose of the site and the purpose of each page in the site needs to be clearly communicated. When a visitor comes to a site they first scan the content and then skim the content. The whole process is done in seconds and if the visitor doesn’t think they are in the right place, they will leave.

    To make it easy for a visitor to decide if they are in the right place, the purpose needs to be communicated in the fastest loading elements (text) and in the most obvious elements (headings, link text).

    2. Good Visual Design

    A good visual design should support the purpose of the site while enhancing credibility…

  9. says

    Thanks for the continued feedback on the post everyone!

    @Kevin – You’re right about the file size being the same as long as the pixel dimension is the same – it’s just “standard” or “best” practice to save web images as 72 dpi.

    When combining 300dpi images with full jpg compression vs 72dpi at web compression (for example 60% using Photoshop’s save for web option) there is a considerable difference. Out of curiosity, I tested a blank white image at these two settings – the 300dpi full jpg was 17k vs 72dpi with save for web at under 2k. It’s more the combination of dpi and compression settings that does the trick!

    @Michael – You’re definitely right on conversion being a key element. It’s something that I’ve been starting to work on for my own web site over the last couple months, and am steadily realizing is an area that can use a lot of tweaking and optimization!

    You’re welcome for the link, btw!

    @Damon – Clear Purpose is a great element – and your right, probably should go first. The list isn’t really meant to be in order of importance though – it’s just separated by design / content / development… maybe I should have intro’d it as “in no particular order”…

    Great explanation of the item, though – thank you for sharing!

    See, I knew there were more than 15 elements! ;)

  10. says

    Ok, this has to be my favorite post on FreelanceFolder ever! And seriously Selene, you know that coming from me it means you totally rock! hehe

    Quick question and suggestion: what do you think of having different landing pages or a box or message that says something like ‘you searched for ‘blah blah blah’ here are the most relevant articles on this website. Check ‘em out!( or something like that) for say users coming from Google or other search engines?

    Killer post Selene! Nice to see you writing on FF!

  11. says

    Hey Selene …

    nice list … one thing that i very much enjoy is when sites state their purpose in the header area … this is inline with having a clear purpose and making that purpose evident to your visitors.

    i’d say the design, user interface and purpose all go hand in hand … if the 3 don’t come together well it just leads to confusing your visitors … and likely them leaving quickly :)


    http://twitter.com/franswaa

  12. says

    Excellent article! Great information that is very easy to read. This is not only a good resource as a checklist for designers, but could easily be suggested as a read for non-technical clients…

  13. says

    Table-free design is an important one nowdays. It’s a difficult talent to master, but converting something like a Photoshop mockup into a webpage is a task of only a couple of hours, and can thus be outsourced quite cheaply. Some substantial amount of my own income comes from this sort of work.

  14. says

    @Tyler / @Erin – Yes, SEO is most definitely key. A good majority of the comments here (esp the early ones) are directly due to social media – both the networking and bookmarking sites!

    Don’t worry, though… there’s a whole separate post for SEO (this post was long enough as it is, LOL)

    @Jon – Well that means a lot coming from you, esp being the founder of Freelance Folder! :)

    Landing pages are probably a great idea – something I’ve seen that some companies specialize in doing alone, too. I’ve experimented with it a bit, but more in terms of landing pages for banner advertisement, not for searches.

    I have a few blog posts that people often search for and is how they find my site – I wonder if there is a way to setup the site to know that the person came from a search engine and have it display the box you mention?

    @Frank – Excellent point about stating the purpose in the header area. It’s funny that some companies think their logo up in the header is enough, but combined with purpose, as Damon pointed out, will help make it completely obvious to the visitor what you are all about.

    @Jumping Dog Design – Another important point – I touch upon this in #2 User Interface Design in terms of knowing who your ideal visitor to your web site is, and being sure to offer everything they would expect to find on your site (in an easy to find manner). There’s also more on the phases of the design and development process (including planning) over on my site, as well.

    @ALL – Continued thanks for such amazing feedback on the post! I’m glad so many of you find it helpful, and have contributed to adding additional points!

  15. says

    excelent post – its great to keep getting these things kicked into my head, hopefully one day I will remeber them! ;) :D

    Thanks again!

  16. says

    For sure this a good info for everyone, but i think you forgot the adds in a blog, the most of all blogs use google adds or some other, i think that if you had adds on your blog, please use it but not scrub it, on the user face please, use it carefully…. and thanks for the tips

  17. says

    Congrats Selene on this post!

    I’ll definitely be adding it to FreelanceFolder’s Resources Page as I know it will be continually useful to everyone who is redesigning their website.

    Love the style on your site, too, btw.

  18. says

    @Ian — In Selene’s defense, she’s just the writer :-)

    You’ll have to blame me for FreelanceFolder not validating, and I tend to fall into Michael Martine’s camp — validation is less important than actually launching the site :-)

  19. says

    Well, according to me, you speaking for Blog platform :D. all these elements exist in wordpress, as well as in all other big blog platforms.

    Anyway, it’s good to have list.

  20. says

    @Alessandro – You know, with the increasing number of blogs with great articles, a printable version would definitely be helpful! Something that many people don’t do – it’s a good thing to keep in mind and include!

    @dgfrancisco – Ads are good if your plan is to monetize your blog. Not everyone wants to do that, but for those who do, it is something that can bring in a fair amount of income if done right.

    As you say, it’s important to not go overboard – I think many people are turned off if they go to a web site that has too many ads. And you also have to consider that visitors to your site might click on a competitor’s ad and go with them and forget about you.

    I guess it all comes down to strategy and planning which ads you accept on your own site (in relationship to not sending people over to the competitor).

    @Ian – Looks like Mason answered this one for you :) I’m just a contributor here at Freelance Folder. As Mason and Michael said though – sometimes it’s more important to get the site out (this new design was just launched yesterday) and then come back to the validation.

    Now, as a web designer, it’s more important for your site to validate. My own main business web site does validate (you can click on the XHTML / CSS links in the footer of every page).

    However I’ll admit that my blog needs a little work to reach that status. The theme by itself is valid, but when you include sidebar elements including 3rd party ad code, javascript tracking codes in the footer as well as some fairly old posts, etc. it doesn’t always work out perfect. One of the many things on my own to-do list is to at least go back to old posts and be sure they validate. Some of the sidebar ad codes, though, I might be stuck with. I wish advertisers provided valid code… LOL

    BTW – Valid link for my main site – http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.idesignstudios.com

    @Natalie – Thanks so much! :)

    @ALL – still continued thanks for the positive feedback!

  21. says

    I know, it’s a nightmare…same with mine. All sites I produce for clients need to be valid though, I disagree with Michael Martine – if you want credibility, and respect you need to ensure yoru clients sites have valid, semantic markup.

  22. says

    It’s credibility for yourself, and the standards you should be trying to achieve to ensure the websites you build are accessible, search engine friendly and easy to manage. It’s about self-respect and the respect of the peers in your industry!

  23. says

    Nobody else dictates the standards by which I have respect for myself, and I have no industry, because I do everything. I don’t care what anybody else thinks. My SEO-fu is black belt.

    Talking about validation is one of those things everyone can jump on without rocking the boat or being wrong. Not only is it boring, but at the end of the day the site has to work right and the client has to be happy. Validation will always take a back seat to that, and everyone knows it. I’m not talking about using tables, but I’m just not going to give a shit over the occasional blank link target or javascript that doesn’t validate.

  24. says

    @Ian / @Michael – On the validation issue, I know that most clients actually don’t care. They could care less what’s behind the scenes as long as the site looks good to them (in whichever web browser they are using).

    From a developer standpoint, there is a sense of pride that goes out in the work that you produce. Also, valid code will give you the best shot of having your site display properly among all of the current web browsers (except IE6 which could care less about web standards too, LOL).

    With all of my current projects (from late 2007 through now) I do make sure anything I produce for a client is at least initially valid. There are things like javascripts (ad codes, tracking scripts, etc.) as well as ecommerce solutions and more that just won’t play nice with the validation tools. So there’s a point you have to say “this is good enough” – at least you know the initial product was accurate.

    I’d say it’s more of an issue relating directly to web designers and developers themselves – just to know that they did the best work possible. (I’ll be honest it hurts sometimes to see a client site where once they’ve added their content or ad codes, etc., no longer validates or retains 100% of the layout that I originally created. But there’s only so much you can do).

    I actually have had clients request valid codes though – so some know what they’re talking about. It’s quite rare, though…

    All in all – having a valid site is not necessary, but it lets you put your best foot forward (as the web developer) – gives the site the best chance of cross browser compatabilty and best shot of aiding in proper SEO, etc.

    That’s my 2 cents anyway ;)

  25. says

    Yahoo has been doing some really great stuff with image optimization and website performance, and I am glad to see image optimization getting some love in this article too.

    There are some further optimizations that you can do other than just saving for web in photoshop, such as using png8 files for graceful degradation in IE6 and below. Those interested in website optimization should definitely check out http://smush.it which is a new web app that was written by Yahoo’s Exceptional Performance team. Nice work on the article.

  26. says

    Excellent post. All great points!

    One addition to meaningful content would be posting frequency. I guess the two could go hand in hand depending on the industry. But if you haven’t posted anything in quite some time, chances are your content is outdated. And at the very least the perception is you’re no longer maintaining the site if the last post was 6 months ago.

  27. says

    Also to add to the validation talk, let’s not forget that it’s easy to get a site to validate when you first design it. Then the client gets nutty with adding javascript badges and the like, it will never validate again.

  28. says

    “and will help you with the search engines, too”
    Nope.
    Valid design has nothing to do with search engine results, or improving search engine results. Used to be a valid argument for Yahoo and MSN, but they’ve improved their bots and algo’s since then.

    Don’t get me wrong, standards have very STRONG merits, but they are the W3C’s standards, not the actual web’s, or the browsers.

    However, beyond that, this is an FANTASTIC POST.

  29. says

    Great article. After hand-coding for nearly 13 years in notepad, I’ve finally begun to make the transition to Dreamweaver and it’s made my life SO much easier. Now I just need to figure out how to take that leap from html to css-based sites.

  30. says

    These work great for the present world wide web. Take these “standards” into other contexts, like flash-based websites or 2.0 and up and you run into some problems with this list. Mainly non-linear narrative experiences, dynamic content states – in short, non-traditional websites. And by traditional I specifically cite the comment about the FOLD. Everyone in this industry has been brainwashed. Stop talking about or using the word and concept of “FOLD”. STOP. It’s a print affordance carried over to the interactive media world via the briefcase of some advertising executive with strong roots in PRINT. Seldom, if ever, have I read anywhere about CONTEXT and INDICATION. Hypothetically, let’s say there is a “FOLD” on websites. Minus chrome, minus non-content elements on screen, the fold becomes a VERY limiting functional requirement. Graphic and interaction design both have many tools to draw upon to indicate content that could be found via click-through or SCROLLING. Do some research on the fold and see how refuted the whole concept is. I find the constant call for thinking about the FOLD to be incredibly damaging to web design and UX. Standards in general are extremely dangerous generalizations and do little in terms of bringing the web to where it should and could be now.

  31. Dill Nates says

    I would considered that the about page is the 10th most visited page because:

    1. It’s prominently displayed in the header.

    2. It’s the 4th page/link in the header.

    See how promotinglinux.com does it.

  32. says

    About the about page: Shouldn’t the website in and of itself satisfy what an “about page” does? In other words, isn’t the website ABOUT the service or product? Once again, more standards that ensure conservative people can call themselves UX professionals and base their comfortable decisions on consensus at the detriment to the USER. Frameworks work much better than these “guidelines”. They are contextual, flexible and account for scalable iterative development. And Site Map… very web 1.0. If people are hitting your “site map” and searching for content, you have done a VERY poor job at providing a UI and UX that facilitates the objective(s) at hand.

    And those “SEO/SEM” people out there… maybe 1% of you actually understand that concept and its MINIMAL relevance to website traffic in most contexts. The best argument I have read here is that content rules. And it does. You can have crap design, a horrible UI/UX etc but if the content is appealing, in demand, people will find workarounds and consume that content. Then again, it is another example of a whole industry created on anxiety and ignorance on the part of the people who shell out money for these “services”.

  33. says

    And last, most of these “givens” are a direct result from a lack of imagination or effort. For example, what is a “FAQ” section of a website? Maybe doing a little IA would help bring things into a context and a dialog with a user. Maybe actually familiarizing yourself with content could provide a website that makes information accessible beyond large, generalized cliches like “About us” and “FAQ”. It is my hope that everyone who reads this understands it to be a BASELINE of sorts, the ground floor of interactive media experiences.

  34. says

    “The best developed sites use a combination of XHTML and CSS”

    And most developers seem to have a hard time to get it right, validating this very page results in:

    Errors found while checking this document as XHTML 1.0 Strict!
    Result: 331 Errors, 22 warning(s)

    “Valid XHTML / CSS”

    Oh, the irony.

    Really, most people should NOT use XHTML, because they simply don’t understand what it means, they just have jumped the bandwagon some time ago, and articles like this one keep that thing going. Use HTML 4.01 strict, unless you require XHTML and know what you’re doing. But in that case you don’t need that advise in the first place.

  35. AG says

    Brilliant post very well thought out and put together – all good points.

    Page title, meta keyword, meta description are useful although the latter two not so much this day but can still help with some basic SEO. Perhaps not as much as ensuring your content is updated regularly.

    Great point on validation as validating can actually point out problems that you may put down to browser bugs but are actually markup problems that browsers such as firefox will automatically fix or disregard.

    Only two things id add and those are centered upon accessibility…

    JS: If you add that cool ajax / js toy – what about the people without javascript? Does the site functionality still remain. Correct usage of one of the many javascript librarys or indeed your own library can ensure your visitor can still navigate and utilise your site correctly without js.

    In example you want a pop up. How about you link the anchor to the pop up page but then load (in example) jquery and tell it to replace the anchor functionality with a pop up window to the src attribute??? A few minutes work but whats that mean -> This would ensure people without js get to that page and people with get the page too but in a pop.

    Images + CSS: Some people still browse sites without images and / or CSS be it from a handheld device, screen reader etc. As a developer you should check out your site in the above scenarios.

    Where you used that div with an image in for a line across your page would it not be possible to use a styled hr? That set of floated left divs – would that not be better as an unordered list with the li set to inline? Simple things that make no difference to how a normal person sees your site can make a lot of difference to how a visually impaired, mobile user or even a search engine will see your site.

    As a final note, thanks for a brilliant article – please all keep those alt tags filled in.

  36. says

    I’ll add to the overall comments and agree that this is a great post and comments. Personally, I would place usability above site design in importance (all trumped by purpose) but as this isn’t meant to be in order, it’s a nit picky point.

  37. says

    I’m glad you mentioned IE 6 …

    Cross Browser Compatibility starts with IE 6…

    Some companies use it internally, like companies that have solid windows 2000 servers — because, it never broke on them, and runs their intranet web apps perfectly.

    CIO says “If it ain’t broke, don’t fix it…especially if costs a chunk of cash!”

    Also…there are a lot of slightly less technologically inclined areas of the world that are just starting to getting online — a lot of the time you’ll see that they have older PCs…because that what they were able to get their hands on…

    To ignore the potential interaction with these new older-tech techies – would be wrong on multiple levels… Unless you’re building some sort of advance visual site that will never validate anyways, you’ve forgotten what it means to be a web designer trying to convey info/data to people.

  38. says

    I definitely agree with most of these points — but I feel like some of it is redundant. By striving for valid XHTML/CSS, aren’t we striving for cross-browser compatibility? Isn’t that the same key element?

    Also, you say you’ll cover SEO in another post, but aren’t many of these elements shared — such as compressed images, valid markup, syndication services, cross-browser performance and analytics software?

    Finally, I’d like your comments on site design. Do you think site design has to be original or can it be out-of-the-box? By that I mean, if I launch a blog and find a very appealing theme for it, one that is on par with my own design skills, does that detract from the design of the website?

    Best,
    Adam

  39. says

    Look at all your great comments! I took a lot longer on this post than I normally would because it was so well organized and helpful. Kudos to you! I like the idea of keeping the most important info above the fold (plus your definition of what that entails). I’ll be back to read more!

  40. says

    Hi Selene, im just passing by to say a big THANK YOU.

    One very important thing is bookmark sites, (i reached here from Digg)

    I saw many people “Digg” ing there own sites, which is good and drives lot of traffic :)

    This should become a W3C standard!!

    good luck, and thanks again

  41. says

    - website header/branding links to website home
    - useful 404 page
    - rss feed for search results
    - open search capability
    - sitemaps protocol 0.9 support
    - link rel for “home”, “up”, “sitemap”, “search”
    - pingback (for blogs)
    - mobile css

  42. says

    @Jesse — After the last digg I optimized the server a lot, and placed several caching measures into effect.

    We were much better prepared for this one, and didn’t even slow down very much :-)

  43. says

    Great post,

    I think #15 is often overlooked… but it makes or brakes a website.

    You need to know your visitors’ browsing patterns, how they find your site, how long they stay etc in order to make any necessary amendments to your site.

    And to know which of your marketing efforts are more effective and which are not.

    “You can’t control what you can’t measure” – Tom DeMarco

  44. says

    Great article, but i think that the first thing a user search is the contents. A site may be ugly to see, but if the contents are good and helpful, then the site is good.
    The first thing to treat is the content.

  45. Nancy says

    This mainly for “M”

    There IS a difference between an “about us” page and “FAQ” About Us is about the company and the people behind the product or service. It is ABOUT US. FAQ is geared towards information about the product or service. Where you can buy it; how to use it, return information, warranties, etc.

    Too many web designer are not familiar with marketing. I don’t mean Internet Marketing, I mean traditional “how do you grab someone’s attention and give them the info on the website in so they want to buy” marketing. They are good at code, at CSS, at putting widgets in place etc. Someone needing a website should use someone who learned marketing and design, then either gives the work to a programmer or is able to fill the last step himself/herself. Since few people can be a Jack-of-all-trades it’s better to find a marketing person who has a programmer/website person to complement the work.

    Also – as for the site map. It’s NOT for the visitor. It’s for the search engines. It is a separate function from the navigation.

  46. says

    A very nice post! Well explained and very clear.
    I agree on most points, but not on valid code.
    In an ideal world, every website would have valid xhtml and css. Unfortunately, there is no such thing. Cross browser compatibility means you need to use unsupported elements every now and then (especially for IE6). Also, what is valid CSS? Valid css 2.1, 3.0?

    I try to write valid code, but sometimes, it just isn’t worth it. If your site looks perfect in every major browser, but the code isn’t 100% valid, who cares…

  47. wintervssummer says

    I very much love summer :)
    Someone very much loves winter :(
    I Wish to know whom more :)
    For what you love winter?
    For what you love summer? Let’s argue :)

  48. workhomemoney says

    Excellent post. I always look to it whenever creating a website.

    Websites are really crucial for small businesses. A great websites can really help to grow the business and customers. Thanks for the information. I will write about it in my blog htttp://www.workhomemoney.com

  49. says

    These points are all very useful. Different people put different emphasis on different parts, but you can’t go wrong by doing all of it well. I took over a very tired and out of date website with little or no visibility (pretty dire considering is was essential to the business!) now it gets a lot of hits, and using analytics I can track where they have gone and how long for. Still struggling with Blog stuff though!!

  50. says

    it is also very important that all weblinks are accurate and work, unlike the one I put on the comment above!!
    One question re sitemaps should a search engine sitemap include every page on a website, or just the key ones that you want indexing?

  51. baby-lu says

    Very useful files search engine. f-torrents(.)com is a search engine designed to search files in various file sharing and uploading sites.

  52. says

    Great article.
    Design / appearance / easy to use for end users/ content are the main keys to be successful.
    I have use those principles for years and i strongly recommend them to anyone.
    cheers

    David

  53. says

    Great article!

    Something I’d include with “meaningful content” and “web optimized images” is content and images that don’t violate copyright.

  54. says

    Nice Post
    These are all great elements to incorporate into a website. Definitely a must and sometimes often overlooked by those just starting out.

  55. says

    I’ve been meaning to add the sitemap and the bottom navigation to my site for a while, then searched ‘seo techniques’ and found this article….. So – just finished adding those two things. Thanks for the inspiration!

  56. says

    ” content is king” is a big trick for us at http://www.fcbarcelonatickets.com – as our field of action is highly competitive and highly defined – every want to watch the top goals, top fouls, best free kick … we are strugling to find a unique content, after a long brain storming session we will land on our directors hobby and try to create a mix of art and football to be viewed in are new blog : BarcaTizzy awaiting all from the 10 of april.

  57. says

    I know everyone’s probably gonna hate me for this…but…does anyone think the web’s losing it’s edge, i mean when it started way back, it was all about the ‘information highway’ then round the 90′s designers realized what a great ‘creative toy’ it could be and all sites came with bells and whistles, now it’s done a full circle and it’s all about the CONTENT…sites aren’t being DESIGNED anymore, most of them are just being typed out and uploaded. This is all good and well for some, but wheres the CREATIVETY, where’s the FUN…people want 2 things at the moment..a site that loads IMMEDIATELY! and all the information right under thier nose (like a medical leaflet..) do these same people want to know the end of a movie or book before they can enjoy it. I’d appreciate any comments on this, but web ‘design’ seems to be getting more and more ‘restricted’ due to the publics demand for instant answers.

  58. says

    Hi Selene

    Thanks thanks!
    Great article for novice like myself who need basics somewhere.
    Should naming page/pics and objects be of major concern too? anywhere
    thanks again.
    Tubuna – PNG

  59. says

    Thank you all. For some of us out there this information is golden. For many small business owners the website is not a key part of the day to day operations. Moreover, it can be scary and confusing. This list helps me “grade” my site and gives me a to-do list for improving.

  60. says

    Doing a quick research for design and elements and came across this helpful article, stating the required basics of a good website. Lo and behold its written by my fave designer, Selene!

  61. says

    This really is my second visit your website. I found a lot of interesting things inside your blog particularly its dialogue. I guess I’m not the one one enjoying it! Sustain the good operate.

  62. says

    These things are very important and they help us work with more pleasure,and for better results.A newsletter subscriber i think is an important tool to consider.

  63. says

    Thanks for the tips. I can see this post is a couple of years old, but it’s still a helpful guide for beginners to the website developing world like me!!

  64. says

    I think the most important thing is having an actual professional web developer AND designer building it is the one thing you need to do. Don’t do it yourself, don’t get a relative or friend, and always spend money, it will always be worth it.

  65. says

    RE:15 things- WOW! Thank you so much for sharing all your wisdom and GREAT ideas.
    I am the owner of a small painting & Decorating business and I am just getting a website going and really needed some guidance.

    After reading *15 things- it was so helpful and easy for for me a contractor with average computer skill to follow and understand what you were saying and what works or does not work you really know what you are doing Selene and have helped my small company
    keep up the GREAT WORK, Perry the Tradesman/

  66. says

    Hey There. I found your blog using msn. This is an extremely well written article. I’ll be sure to bookmark it and come back to read more of 15 Key Elements All Top Web Sites Should Have | FreelanceFolder . Thanks for the post. I’ll definitely return.

  67. says

    Found this article, really great! I would add only one but the most important key element (in my opinion). The top site must alway provide only high quality service and quality products. Website can have all described elements for success but it will fail if it doesn’t meet client’s expectations.

  68. says

    Wow ! Points 13, and 14 are most useful and most companies not aware of it. While trying to becoming an SEO consultant, I find these very useful and worth. Thank you so much.

  69. says

    You ever feel that itch for a niche? It does appear that everybody is talking about niche money makers and fusion bot technology and hyperbolic traffic herding. Anyway, I discovered a niche profit building tool that is a great way to begin building some serious niche specific income on autopilot. If that sounds like fun to you, here is a link to the informational video. http://tinyurl.com/8xtaf8g

  70. says

    Having read this I believed it was really enlightening.
    I appreciate you finding the time and effort to put this informative article together.
    I once again find myself personally spending way too much
    time both reading and posting comments. But so what, it was still worth it!

  71. Karishma says

    Amazing and very useful post. I am just getting started on this stuff and 3 of your blogs have helped me a lot. Thank you :)

  72. says

    fooliotron
    October 29th, 2008 at 7:48 pm
    I’m glad you mentioned IE 6 …
    Cross Browser Compatibility starts with IE 6…
    Some companies use it internally, like companies that have solid windows 2000 servers — because, it never broke on them, and runs their intranet web apps perfectly.
    CIO says “If it ain’t broke, don’t fix it…especially if costs a chunk of cash!”
    Also…there are a lot of slightly less technologically inclined areas of the world that are just starting to getting online — a lot of the time you’ll see that they have older PCs…because that what they were able to get their hands on…
    To ignore the potential interaction with these new older-tech techies – would be wrong on multiple levels… Unless you’re building some sort of advance visual site that will never validate anyways, you’ve forgotten what it means to be a web designer trying to convey info/data to people.

  73. says

    Hello! Do you know if they make any plugins to safeguard against hackers?
    I’m kinda paranoid about losing everything I’ve worked
    hard on. Any recommendations?

  74. says

    Thanks for the well written post, Selene. Even after four years, it is still as useful as when you first wrote it. As a web designer (many years ago), I learnt many of these tips the hard way, especially when Google kicks you in the wrong place! The content of this article are as relevant as ever and it is helping me in deciding the next upgrade to my website for a responsive design. God Bless. Brother John

  75. says

    We are 24 hours locksmiths’ service provider in Santa Monica. We help you for everything from simple lock installation to advanced auto and residential locksmith services.

  76. says

    The martial arts are intended to teach self-defense, self-control, and self-confidence.
    You’re probably also hoping that this location is not far away and you don’t
    have to spend a lot of money to get there. To achieve this level, you need to have your work recognized publicly so that it can be purchased for its own consumption by
    museums and private collectors.

  77. says

    This post is 4 years old and still very useful. Shows how timeless good information is. It might be good to add a 16th that addresses mobile browsers as that’s the way things are going. Not sure if you heard but Facebook announced recently mobile usage surpassed PC usage. Very impressive.

    Thanks again for the post.

  78. says

    “I was not there that day,” Don says, “but visited the fellowship a few years later and saw the results-a revival where many fellowships and ministries were born. Select the right chainsaw essential for your function. Many operators sharpen the blades themselves, but it is worth considering getting the advice of a professional after some use, as you need to ensure the blades are sharpened to the correct angle.

  79. says

    With havin so much content do you ever run into any issues of
    plagorism or copyright infringement? My
    website has a lot of exclusive content I’ve either created myself or outsourced but it seems a lot of it is popping it up all over the web without my agreement. Do you know any methods to help prevent content from being ripped off? I’d truly appreciate it.

  80. says

    Everyone loves what you guys are up too. Such clever work and exposure keeps me reading!
    Keep up the fantastic work. I’ve added you guys to my personal blogroll.

  81. says

    With havin so much content and articles do you ever run into
    any issues of plagorism or copyright infringement?

    My blog has a lot of completely unique content I’ve either authored myself or outsourced but it seems a lot of it is popping it up all over the internet without my authorization. Do you know any ways to help prevent content from being ripped off? I’d truly
    appreciate it.

  82. says

    Have you ever thought about adding a little bit more than just your articles?
    I mean, what you say is fundamental and everything.
    Nevertheless imagine if you added some great visuals or video
    clips to give your posts more, “pop”! Your content is excellent but
    with pics and clips, this blog could certainly be one of the best in its
    niche. Fantastic blog!

  83. says

    Good day! I just wish to give an enormous thumbs up for the great information you have got
    here on this post. I shall be coming back to your blog for more soon.

  84. says

    Thanks for your marvelous posting! I genuinely enjoyed reading it, you might be a great author.
    I will make sure to bookmark your blog and will come back later on.
    I want to encourage you to continue your great posts, have a nice evening!

  85. says

    I like the helpful information you supply in your articles.
    I’ll bookmark your weblog and test once more right here frequently. I am relatively sure I will learn lots of new stuff proper here! Best of luck for the following!

  86. says

    Every step is nice for designer when read this post, it is content useful and most relevant information for web tips . I am Also a designer at Miracle Web Solutions Pvt Ltd Company Delhi

  87. says

    Hi there my beloved! I must express that this particular blog post rocks !, good authored and come together with about many important infos. I have to appearance excess blogposts in this way .

  88. says

    First off I would like to say excellent blog! I had a quick question in which I’d like to ask if you do not mind. I was interested to find out how you center yourself and clear your head before writing. I have had a difficult time clearing my thoughts in getting my thoughts out. I do take pleasure in writing but it just seems like the first 10 to 15 minutes are generally lost just trying to figure out how to begin. Any suggestions or hints? Cheers!

  89. says

    Appreciating the commitment you put into your site and in depth
    information you present. It’s great to come across a blog every once in a while that isn’t the same old rehashed material.
    Wonderful read! I’ve bookmarked your site and I’m including your
    RSS feeds to my Google account.

  90. says

    Have you ever considered creating an e-book or guest authoring on other
    websites? I have a blog based upon on the same ideas you discuss
    and would love to have you share some stories/information.

    I know my readers would appreciate your work. If you
    are even remotely interested, feel free to shoot me
    an e mail.

  91. says

    I’m truly enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often.
    Did you hire out a designer to create your theme?
    Exceptional work!

  92. says

    Establishing a web presence in the form of a dedicated website for
    your business is critical for your online marketing plan.
    So, to overcome this issue you can able to prefer few of the agents on online
    with readily made comparison. A large organization such as Coca Cola even has a website (
    to cater to merchandise and collectibles enthusiasts.

  93. says

    Hey there! I could have sworn I’ve been to this site before
    but after reading through some of the post I realized it’s new to me.
    Anyhow, I’m definitely delighted I found it and I’ll be bookmarking and checking back frequently!

  94. says

    We are a bunch of volunteers and opening a brand new scheme
    in our community. Your site provided us with valuable info to work
    on. You’ve performed a formidable task and our entire community will be grateful to you.

  95. says

    Its such as you learn my mind! You appear to grasp so
    much approximately this, such as you wrote the ebook in it or
    something. I believe that you can do with some p.c.
    to pressure the message house a little bit, but other than that, that is fantastic blog.
    A fantastic read. I’ll certainly be back.

  96. says

    My coder is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the costs. But
    he’s tryiong none the less. I’ve been using WordPress on numerous websites for about a year and am worried about switching
    to another platform. I have heard great things about blogengine.net.
    Is there a way I can import all my wordpress posts into it?
    Any help would be really appreciated!

  97. says

    Great post enjoyed reading it and learning. Seo is a mine field at times and with google changing its algorithim all the time it gets very frustrating.You spend hours doing your site and then start to rank for google to make a change and whip you away again. I enjoy reading articles like this but the bottom line is none of us really know what google wants its a game we play and some play it well and others do not. Have saved this blog anyway and look forward to future updates

  98. says

    Its a great article about seo. You write with such knowledge and passion. I have to admit the internet as me at a bit of a loss and i never seem to understand exactly what search engines are looking for, this article was very helpful and has made me realise i need to change the way i do my blogs. With the new hummingbird and the rest of googles animals i am always left confused with seo. Can you explain a bi tmore about these trackbacks i see left on your comments please?

  99. says

    I know this if off topic but I’m looking into starting my own weblog and was curious
    what all is needed to get setup? I’m assuming having a blog like
    yours would cost a pretty penny? I’m not very web smart so I’m not 100% sure.
    Any suggestions or advice would be greatly appreciated.

    Many thanks

  100. says

    Interesting take you have on seo. I myself find things have changed a lot since you wrote this article and since google has thrown out so many new updates. I enjoyed reading your article all the same. Seo is hard work and you have to keep at or your competition can catch you out. You just never know where you stand half of the time it is an on going battle and an ongoing struggle. I used to seo a lot about social media and how that affects seo. But decided to move on in to the adult section for a bit as it seems a little easier. Good luck and hop you update soon . Best regards Michael blogs

  101. says

    There arre a variety of ways of clearing the search history in the Android Market.
    Wouldn’t it be nice if you knew how to download PS3
    games to your PS3 system, and could download
    all of your PS3 games from the Internet. One or more of these fixes should have worked for your
    stuck downloads. Do you feel as though you’re stuck in a rut,
    and that your life has more potential than is being realised.
    Buut when if you are on a trip or travel without computer at hand.
    Simply click on External Mirror 1 annd your Zune driver download will begin.

  102. says

    Hey fantastic blog! Does running a blog similar to this take a large amount of work?
    I’ve very little knowledge of computer programming but I
    was hoping to start my own blog in the near future.
    Anyway, if you have any ideas or tips for new blog owners please share.
    I know this is off topic nevertheless I just wanted to ask.
    Thanks a lot!

  103. says

    Hello there, just became aware of your blog through Google, and found that it is really informative.
    I’m gonna watch out for brussels. I’ll be grateful if you continue this in future.
    Lots of people will be benefited from your writing.
    Cheers!

  104. says

    Thanks for any other informative blog. The place else could I
    am getting that type of information written in such an ideal method?
    I have a challenge that I’m simply now working on, and I have been on the look out for such info.

  105. says

    We stumbled over here by a different web address and thought I might check things out.

    I like what I see so now i am following you. Look forward to finding out about your web page
    for a second time.

  106. says

    Los modelos estrella de larga chaqueta de plumón blanco, muchas de las grandes estrellas de la afluencia de la gente le encanta usar esta chaqueta, se está tirando el viento, contra el frío, cálido y elegante. Dentro de los suéteres de viaje y camisas, pantalones vaqueros y botas de nieve de costura, muy cálido.

  107. says

    This is a great site full of great advice and information. I am now just starting to learn about seo and trying to rank my webcam chat site but its proving very difficult as you probably know how annoying google can be at times. I only wish people would use bing or yahoo more as i find google is all over the place at the moment and search reults seem strange at times. Anyway just wanted to thank you for taking the time to write this article

  108. says

    Websites are crucial for small businesses. A great website can really help to grow the business and customers. Thanks for the information.

Trackbacks

  1. [...] Decide how many pages you want on your web site (such as home page, about us, contacts, products etc.)  and what each page should say. Type up your copy and edit it well before you give it to us. The more complete and accurate you can be in the beginning, the easier the process goes and the less costly your site will be. There are no absolute rules, but remember you want people to easily read and navigate the information you are presenting to them. Think about the most important things for your customers to find on your web site. Do you have images/photos that you want to use? Remember you can not use images that someone else owns without paying for them. We have access to many images and can edit any you may supply to us. [...]

  2. [...] to understand how essential their content is to a successful web site. In this great blog entry, 15 Key Elements All Top Web Sites Should Have, ‘Meaningful Content’ comes in as element [...]

  3. [...] My last post referenced the sitemaps used by web visitors to help them navigate through your site themselves. However, there’s another version — XML sitemaps — that are used by the search engines in order to index through your site, as well. [...]

  4. [...] 15 Key Elements All Top Web Sites Should Have | Freelance Folder | The Blog For Freelancers And Web-…. I think you'd also love these stories:Seth Godin Hints About Web DesignBread and Butter Front and CenterMy Favorite Design Links of the WeekAdobe Photoshop Elements 8 Is Out – Great For ChurchesWhy Clients and Creatives Need to Come Together [...]

  5. […] nauka slowek angielskich za darmo Make an effort to decrease the stress in your daily life.Anxiety and stress could cause a diabetic’s blood sugar levels in people suffering from diabetes. You can also discover a variety of inhaling and exhaling workouts, especially given that you can do them practically anyplace. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>