15 Key Elements All Top Web Sites Should Have

Posted October 28, 2008 in Tools/Resources, Web Design 161 Rockin' Comments »

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.

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 / Navigation Along 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 Information Nothing 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 Subscription If 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!

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

About the author: Selene M. Bowlby is a web designer and front-end web developer with over 10 years of professional experience in the design industry. After taking the "freelance plunge" in 2008, she runs her company, iDesign Studios full time, where she specializes in creating custom web sites for other small businesses.

Grab the Full RSS Feed

161 Rockin' Comments

Mike Smith
October 28th, 2008 at 3:30 pm

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
frank
October 28th, 2008 at 3:30 pm

Great post with excellent tips for a successful website design.

Thanks!
Josh McGlinn | MCG Studio
October 28th, 2008 at 3:32 pm

A plethora of insights. Great work as usual. Thanks for info Selene!
ImJustCreative
October 28th, 2008 at 3:33 pm

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
Joann Sondy
October 28th, 2008 at 3:37 pm

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
Sarah Hudson
October 28th, 2008 at 3:44 pm

GREAT, GREAT POST! Thank you!
One2One_2
October 28th, 2008 at 3:44 pm

Great post. I need to implement some of those changes. Thanks!
Afovea
October 28th, 2008 at 3:52 pm

This is now my new ‘tick sheet’ when designing. Great post!
Anca
October 28th, 2008 at 3:55 pm

Thank you for sharing this with us. It helps a lot, especially to me, who I’m just starting getting my blog together. :)
Mason Hipp
October 28th, 2008 at 3:58 pm

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
Selene M. Bowlby
October 28th, 2008 at 4:13 pm

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! :)
Kevin
October 28th, 2008 at 4:19 pm

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.
Tyler Hayes
October 28th, 2008 at 4:23 pm

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.
Roy Morejon
October 28th, 2008 at 4:36 pm

Great post Selene,

You covered all the major points and gave some great tips.

Thanks for the info.
Michael Martine - Remarkablogger
October 28th, 2008 at 4:42 pm

Great job, Selene. This is thorough–a good resource. I think perhaps another top element has to be conversion. The primary conversion act should be obvious and easy to understand.

PS - thanks for the link! :)
Damon
October 28th, 2008 at 4:49 pm

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…
Selene M. Bowlby
October 28th, 2008 at 5:27 pm

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! ;)
Diane
October 28th, 2008 at 7:37 pm

That’s for the post, great tips to keep in mind
Jon Phillips
October 28th, 2008 at 7:45 pm

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!
frank
October 28th, 2008 at 7:55 pm

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
Brandon
October 28th, 2008 at 9:05 pm

An awesome list! I wish all my clients knew these things!
Paul
October 28th, 2008 at 9:09 pm

Great post. I was thinking of writing something like this for myself to follow, but you’ve done it for me. Thanks
Erin
October 28th, 2008 at 9:21 pm

Excellent post Selene

I have to agree with Tyler about SEO, otherwise FANTASTIC!
Web Design Fanboy
October 28th, 2008 at 11:01 pm

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…
Jonathan Drain, Dungeons & Dragons Blogger
October 28th, 2008 at 11:12 pm

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.
Jumping Dog Design
October 29th, 2008 at 2:05 am

How about usability design. An understanding of your visitors and what THEY need from your site in the in “time poor information rich” internet.
Dexter | Tech At Hand Dot Net
October 29th, 2008 at 4:12 am

Nice article. I found this out via twitter.. Well said
Selene M. Bowlby
October 29th, 2008 at 5:33 am

@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!
Rob
October 29th, 2008 at 5:40 am

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

Thanks again!
jason millward
October 29th, 2008 at 5:44 am

Great read. Definately agree that SEO is a major factor today
Jim Fitzsimmons
October 29th, 2008 at 8:36 am

Outstanding! Makes me want to rewrite my about page.
Alessandro
October 29th, 2008 at 9:46 am

I think there’s a 16th key element: the printable version of this page. ;-)
Obviously, a great article.

Thank you
Alessandro
dgfrancisco
October 29th, 2008 at 9:54 am

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
Reji
October 29th, 2008 at 9:58 am

Excellent Post. Well said. Great Job.
Ian
October 29th, 2008 at 10:01 am

Thanks for the article.

However, shouldn’t your own site validate?

http://validator.w3.org/check?.....lements%2F
Natalie
October 29th, 2008 at 10:04 am

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.
Michael Martine - Remarkablogger
October 29th, 2008 at 10:11 am

Validation is useful but not the most important thing. Not even close. Get done, get paid.
Ben Good
October 29th, 2008 at 10:13 am

Nice post Selene!
Mason Hipp
October 29th, 2008 at 10:17 am

@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 :-)
Justin - YGG
October 29th, 2008 at 10:19 am

A host that has a great up time, and is reliable. All this fancy design work is for not if no one can access your site!
Ian
October 29th, 2008 at 10:21 am

OK fair enough…please forgive me :)
I like the design anyway!
Ian
October 29th, 2008 at 10:23 am

But oh….
http://validator.w3.org/check?.....%2Fblog%2F
Nik
October 29th, 2008 at 10:25 am

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.
Selene M. Bowlby
October 29th, 2008 at 10:36 am

@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?.....tudios.com

@Natalie - Thanks so much! :)

@ALL - still continued thanks for the positive feedback!
Ian
October 29th, 2008 at 10:42 am

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.
Michael Martine - Remarkablogger
October 29th, 2008 at 11:20 am

Credibility and respect among whom? Clients don’t care. Other web designers? I don’t care.
Ian
October 29th, 2008 at 11:25 am

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!
Michael Martine - Remarkablogger
October 29th, 2008 at 11:40 am

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.
Selene M. Bowlby
October 29th, 2008 at 11:54 am

@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 ;)
Ethan Gardner
October 29th, 2008 at 12:08 pm

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.
Meryl Evans
October 29th, 2008 at 2:36 pm

Readable content. Too many sites’ design uses a light gray or other light color that makes it hard to read (I have excellent vision, thank you).
jyoseph
October 29th, 2008 at 2:49 pm

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.
Danilo
October 29th, 2008 at 3:43 pm

Great post, Very helpful, Thanks selene.
bangbouh stock
October 29th, 2008 at 4:10 pm

Excellent info for the novice as well as the professional. Thanks!
michael
October 29th, 2008 at 4:20 pm

One word: microformats
Article Directory
October 29th, 2008 at 4:26 pm

Great list and very useful article.
Patrick Sweeney
October 29th, 2008 at 4:27 pm

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.
rumblepup
October 29th, 2008 at 4:32 pm

“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.
Greg
October 29th, 2008 at 4:36 pm

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.
siim
October 29th, 2008 at 4:43 pm

nice and useful list!
M
October 29th, 2008 at 4:57 pm

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.
Deadprogrammer
October 29th, 2008 at 5:11 pm

I wrote an article about this sort of stuff 7 Things You Can (Mostly) Do Without in Your Web Business. Good design is first in my list too.
Dill Nates
October 29th, 2008 at 5:31 pm

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.
M
October 29th, 2008 at 5:45 pm

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”.
Wind Twister
October 29th, 2008 at 6:02 pm

I am definitely going to take most of the advice and implement even more with all new pages. THanks.
Online hry zdarma
October 29th, 2008 at 6:04 pm

Great post ladies and getlemans.
Jasmine
October 29th, 2008 at 6:04 pm

Great Article… Adding to my Favorites.
Jesse Wilder
October 29th, 2008 at 6:10 pm

Absolutley excellent pointers in every aspect! Well done!

Jiff
http://www.online-anonymity.kr.tc
M
October 29th, 2008 at 6:20 pm

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.
Fabryz
October 29th, 2008 at 6:40 pm

Nice list, tagging it!
John Bokma
October 29th, 2008 at 6:58 pm

“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.
Jay | Wealthy Affiliate Insider
October 29th, 2008 at 7:07 pm

Great post for my webdesign folder in my google bookmarks. I’ll have to use this as a checklist when I build my next site re-do the others.
AG
October 29th, 2008 at 7:08 pm

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.
Tao - board games Canada
October 29th, 2008 at 7:24 pm

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.
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.
Adam
October 29th, 2008 at 7:56 pm

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
ntopics
October 29th, 2008 at 9:55 pm

You need incoming links from other websites
Stephanie
October 29th, 2008 at 10:54 pm

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!
medopal
October 30th, 2008 at 1:00 am

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
Rose
October 30th, 2008 at 3:03 am

Really GREAT post Selene! Thank you very much.
I am looking for articles like this to share with my team. :-)
venkat
October 30th, 2008 at 3:03 am

Excellent article ,there will always browser compatibility problem with Internet Explorer as firefox is fine
Louie
October 30th, 2008 at 3:41 am

You have the gift of pure awesomeness! Dugg! ;)
Leafy Designz
October 30th, 2008 at 6:42 am

yea man a REAL good article…

A must bookmark
Miniclip
October 30th, 2008 at 7:55 am

Thanks for the great article. Bookmarked and Stumbled !
Rishi
October 30th, 2008 at 8:06 am

Great tips, will look into implementing some of those.

Thanks
Cherouvim
October 30th, 2008 at 8:56 am

- 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
kiran
October 30th, 2008 at 11:45 am

Nice article…Thanks
Midla
October 30th, 2008 at 1:11 pm

Very good article indeed. I personally think some type of Analytics such as Google’s is a must for all site owners.
hasan
October 30th, 2008 at 1:21 pm

very usefull article
Bran
October 30th, 2008 at 6:59 pm

Great post!

After reading number 14, I thought it is worth plugging Smushit - which is an amazing image optimizer for the web. Check it out: