15 Key Elements All Top Web Sites Should Have
Posted October 28, 2008 in Tools/Resources, Web Design 208 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
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.
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
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
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.
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.
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:
- 30+ Examples of Big, Bold, and Beautiful Website Navigation Menus
- 10 SEO Techniques All Top Web Sites Should Use
- 15 Incredible WordPress Theme Customizations
- 10 Essential Plugins Every Modern Wordpress Site Should Have
- Top 10 Biggest Website Redesigns of All Time
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 businesses.
-
We recently discussed the 15 Key Elements All Top Web Sites Should Have. This post focused on elements relating to…
[Read More...] -
Search engine optimization, or SEO, is a very complicated science. While no one knows exactly how Google ranks websites, we…
[Read More...] -
One of the many benefits to WordPress, one of the most popular blogging platform and Content Management System (CMS), is…
[Read More...]
The Unlimited Freelancer is Now Only $19
Unleash the true potential of your business. Get The Unlimited Freelancer and start transforming your freelance business,
now only $19.
Try searching "Getting Clients" or "Productivity"
FreelanceCommunity
Free Resource: Massive Web UI and Button Set
This is a free photoshop set provided by MediaLoot with hundreds of free buttons, boxes, and other useful web elements.5 Fresh and Useful jQuery Plugins Were Born in November 2009
In November 2009, 5 jQuery plugins were born that are new and useful for web designers. Read this post to learn more.How Well Do You Understand CSS Positioning?
The css position property seems easy to grasp, but it works a little differently than it appears on the surface.
Free Report
Sign up for our product discount list to get a free copy of Why Some Freelancers Thrive and Others Barely Survive. You can unsubscribe anytime.
Popular Articles
- SEO Techniques All Top Websites Should Use
- When a Client Can't Afford You: Why It's Still Better to Bid High
- How To Stop Scrambling For Clients And Get A Steady Stream Of Paying Gigs
- A Simple Way To Stop Clients From Rejecting Your Proposals
- 3 Reasons Your Rates Are Still Low (And How To Start Raising Them)
208 Comments
Mike Smith
October 28th, 2008 at 3:30 pmI 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 pmGreat post with excellent tips for a successful website design.
Thanks!
Josh McGlinn | MCG Studio
October 28th, 2008 at 3:32 pmA plethora of insights. Great work as usual. Thanks for info Selene!
ImJustCreative
October 28th, 2008 at 3:33 pmWow, 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 pmYou 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 pmGREAT, GREAT POST! Thank you!
One2One_2
October 28th, 2008 at 3:44 pmGreat post. I need to implement some of those changes. Thanks!
Afovea
October 28th, 2008 at 3:52 pmThis is now my new ‘tick sheet’ when designing. Great post!
Anca
October 28th, 2008 at 3:55 pmThank 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 pmWow! 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 pmWow! 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 pmI’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 pmTerrific 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 pmGreat 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 pmGreat 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 pmI 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 pmThanks 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 pmThat’s for the post, great tips to keep in mind
Jon Phillips
October 28th, 2008 at 7:45 pmOk, 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 pmHey 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 pmAn awesome list! I wish all my clients knew these things!
Paul
October 28th, 2008 at 9:09 pmGreat 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 pmExcellent post Selene
I have to agree with Tyler about SEO, otherwise FANTASTIC!
Web Design Fanboy
October 28th, 2008 at 11:01 pmExcellent 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 pmTable-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 amHow 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 amNice 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 amexcelent 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 amGreat read. Definately agree that SEO is a major factor today
Jim Fitzsimmons
October 29th, 2008 at 8:36 amOutstanding! Makes me want to rewrite my about page.
Alessandro
October 29th, 2008 at 9:46 amI 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 amFor 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 amExcellent Post. Well said. Great Job.
Ian
October 29th, 2008 at 10:01 amThanks for the article.
However, shouldn’t your own site validate?
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ffreelancefolder.com%2F15-top-site-elements%2F
Natalie
October 29th, 2008 at 10:04 amCongrats 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 amValidation is useful but not the most important thing. Not even close. Get done, get paid.
Ben Good
October 29th, 2008 at 10:13 amNice 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 amA 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 amOK fair enough…please forgive me :)
I like the design anyway!
Ian
October 29th, 2008 at 10:23 amBut oh….
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.idesignstudios.com%2Fblog%2F
Nik
October 29th, 2008 at 10:25 amWell, 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?verbose=1&uri=http%3A%2F%2Fwww.idesignstudios.com
@Natalie – Thanks so much! :)
@ALL – still continued thanks for the positive feedback!
Ian
October 29th, 2008 at 10:42 amI 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 amCredibility and respect among whom? Clients don’t care. Other web designers? I don’t care.
Ian
October 29th, 2008 at 11:25 amIt’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 amNobody 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 pmYahoo 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 pmReadable 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 pmExcellent 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 pmGreat post, Very helpful, Thanks selene.
bangbouh stock
October 29th, 2008 at 4:10 pmExcellent info for the novice as well as the professional. Thanks!
michael
October 29th, 2008 at 4:20 pmOne word: microformats
Article Directory
October 29th, 2008 at 4:26 pmGreat list and very useful article.
Patrick Sweeney
October 29th, 2008 at 4:27 pmAlso 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 pmGreat 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 pmnice and useful list!
M
October 29th, 2008 at 4:57 pmThese 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 pmI 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 pmI 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 pmAbout 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 pmI 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 pmGreat post ladies and getlemans.
Jasmine
October 29th, 2008 at 6:04 pmGreat Article… Adding to my Favorites.
Jesse Wilder
October 29th, 2008 at 6:10 pmAbsolutley excellent pointers in every aspect! Well done!
Jiff
http://www.online-anonymity.kr.tc
M
October 29th, 2008 at 6:20 pmAnd 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 pmNice 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 pmGreat 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 pmBrilliant 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 pmI’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 pmI’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 pmI 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 pmYou need incoming links from other websites
Stephanie
October 29th, 2008 at 10:54 pmLook 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 amHi 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 amReally 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 amExcellent article ,there will always browser compatibility problem with Internet Explorer as firefox is fine
Louie
October 30th, 2008 at 3:41 amYou have the gift of pure awesomeness! Dugg! ;)
Leafy Designz
October 30th, 2008 at 6:42 amyea man a REAL good article…
A must bookmark
Miniclip
October 30th, 2008 at 7:55 amThanks for the great article. Bookmarked and Stumbled !
Rishi
October 30th, 2008 at 8:06 amGreat 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 amNice article…Thanks
Midla
October 30th, 2008 at 1:11 pmVery 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 pmvery usefull article
Bran
October 30th, 2008 at 6:59 pmGreat post!
After reading number 14, I thought it is worth plugging Smushit – which is an amazing image optimizer for the web. Check it out:
http://www.smushit.com/
Jesse Vlasveld
October 30th, 2008 at 7:23 pmA little obvious, but good nonetheless.
How did those 1400+ diggs treat the site?
Mason Hipp
October 30th, 2008 at 7:30 pm@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 :-)
Dainis Graveris
October 31st, 2008 at 1:10 pmYes… I have no words to say – so detailed and great post..damn..:) thanks..for share..really, read through everything and so true..
Mokokoma Mokhonoana
November 2nd, 2008 at 3:21 pmGreat 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
Ap
November 5th, 2008 at 1:29 pmGreat 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.
Selene M. Bowlby
November 6th, 2008 at 7:47 amOnce again, Thanks for all the great comments on the post and for sharing your own suggestions!
Many of you mentioned SEO, and might want to check out the latest post which covers some of the main elements of SEO (including a bit on social media):
10 SEO Techniques All Top Web Sites Should Use
Valeria | TimelessLessons
November 6th, 2008 at 8:10 amGreat work as usual. Thanks you Selene for the reminders.
aalmeida71
November 6th, 2008 at 11:46 amThis is really cool for web design. http://www.artdigitalonline.com
Nancy
November 6th, 2008 at 5:27 pmThis 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.
DaverRH
November 6th, 2008 at 10:55 pmRe: Validation…
Write clean, good code. Validation isn’t important.
Amit Nanda
November 7th, 2008 at 6:04 amA Very Nice Article…
Thanks, for the website tips
EverybodyGeek
November 18th, 2008 at 7:45 pmA 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…
Thorpe Obazee
November 19th, 2008 at 2:01 amReally interesting. I will be implementing these things for a pet project of mine.
wintervssummer
November 29th, 2008 at 1:26 pmI 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 :)
workhomemoney
December 3rd, 2008 at 3:48 pmExcellent 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
Hargate
December 23rd, 2008 at 5:27 amThese 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!!
Hargate
December 23rd, 2008 at 7:55 amit 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?
Mark Richardson
December 28th, 2008 at 11:38 pmGot to love google Analytics. And you’re right… downright addictive.
Purses Shaw
January 13th, 2009 at 5:43 amWow..it’s great information.
thanks
Wolf
February 6th, 2009 at 4:42 pmGreat and helpful article!
Thanks a lot.
Sam
February 20th, 2009 at 7:07 pmthanks for the insights….!!!!!!!
baby-lu
April 12th, 2009 at 3:58 pmVery useful files search engine. f-torrents(.)com is a search engine designed to search files in various file sharing and uploading sites.
David
May 5th, 2009 at 11:46 amGreat 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
AV eddy
August 8th, 2009 at 1:48 pmGreat article!
Something I’d include with “meaningful content” and “web optimized images” is content and images that don’t violate copyright.
Website Redesign New York
August 11th, 2009 at 8:09 amAn interesting and informative article. Thanks for sharing your great work.
Kate
September 1st, 2009 at 9:16 amAll true, also could be nice to add couple interesting details for website, like here: http://www.flashreseller.com/. And useful, and attracts visitors, and easy to install :)
bags
September 2nd, 2009 at 8:29 amThe right article at the right time for me. Thanks for pulling these examples together.
kenzie
September 24th, 2009 at 11:19 amu need more interesting things
Eswar
October 8th, 2009 at 2:14 amIt’s very usefull.
Jaivardhan Joshi
October 24th, 2009 at 12:42 amThis is really a good post!
Mustafa Balaban
November 15th, 2009 at 8:43 pmsuper ;)
graphic design colleges
January 18th, 2010 at 7:28 pmHaving a clear navigation seems like such a simple usability design rule, but I still always see sites that are super hard to navigate!
Adres Tarifi
January 19th, 2010 at 11:24 am=]
Togrul
February 5th, 2010 at 2:47 amGreat post!!
Surely lots of great ideas and tips to use.
Thanks a lot,
Togrul
Trackbacks