Disclaimer: This is a list that will be part of the upcoming book for Friends of Ed about Web Development with Web Services and APIs. I thought it’d be interesting to preview it here and see what you think.

[link:http://cabanadigital.com/weblog/2006/10/14/%c2%bfque-hace-a-un-buen-sitio-web/#more-173,en español]

Following are some ideas about what makes a successful web site in the web environment these days. Some of this may sound very obvious, but it is a good idea to remind ourselves of the benefits of these ideas.

It is about content.

If you don’t have any interesting content (or content that is also available on hundreds of other sites) you will not reach many people no matter how much you polish the surface of your site.

It is about sharing.

If you put content on the web, it is there for people to see, download and maybe use. You can protect your rights by choosing and displaying a license agreement and copyright information (there is a great “create your own license” tool available at Creative Commons) and there is simply no sense in trying technical tricks to prevent people from downloading your images or copying your texts. When you develop sites these days, you will use a lot of content and programs other people developed. It is only fair to return the favor.

Without people sharing their tools and content for free the web would have never grown as big and exciting as it is now.

It is about access.

If your content is made available to everyone on the web regardless of ability and technical environment you are much more likely to be found and talked about than when you try to block out groups of users or expect a defined technical environment. Your computer is not a representation of everyone on the web and you simply cannot expect people to get a larger monitor, faster computer or install certain browsers or plugins just to access your site. If your content is interesting enough, they may, but I wouldn’t count on it.

It is about communication.

Allow people to communicate with you. Let them comment on your information and offer them easy ways to connect to you. Offer your information in easy to syndicate formats (like RSS) and contact and link to other sites with similar information. This may sound counterproductive – after all, why should you send them visitors you want to keep – but these other sites are likely to link to you as well. The more sites link to you, the higher you will climb in search engine results.

It is about availability.

This may sound paradox but spreading your content on the web and different sites may be a much more efficient way to make it available than keeping it on one server. Of course you need to use the right sites to do so. We live in exciting web times where you can upload your photos to flickr and connect to other picture enthusiasts, upload videos to youtube , share links at del.icio.us and documents at writely.

All of these sites are backed up by large corporations with good servers and even if your site is down for a day, they’ll still be out there. Advertising your site as the source of these bits of data on the other sites will drive people back to it and you can use the APIs they offer to easily include the data in your site.

It is about patience.

As with anything that is really good, you need to spend some time on a great web site.

You will not skyrocket the search engine results in the first few weeks (sometimes even months). Don’t get discouraged by that, instead try to increase your communication with other people in your area of interest – they will link you and you will show up in the Googles and Yahoos of this world.

Having a web site also means that you will get a lot of feedback that is annoying or plain rude. Don’t dwell on that, but pick out information that may be related to real issues and solve these instead. However, it is your site, and there will always be people who don’t like what you have to say or offer – no need to please everybody.

It is about knowing your audience.

Your assumptions of how a web site in your area of expertise should look like might be totally off the mark. Ask people who are interested what they expect, or ask them what they hate about other sites that offer similar content.

It is about playing to your strengths.

If you are not good with words, don’t try too hard but stick to information and what excites you about the subject your site covers. You can also get help from someone close who can put your ideas into words. The same applies if you are good with words but bad with design or structuring information. Don’t try to tackle everything yourself, but instead get some peer review and input to make the end product talk for itself.

It is about offering instead of pushing.

Don’t force anything on your visitors. Videos and Music should not start unless the visitor chose to start them. In addition, offer them as downloads. If you link to PDFs or other media formats, say so in the link as a lot of people will choose to download these instead of reading them in the browser.

It is about keeping it simple.

Don’t try to overcomplicate anything on your web site. Make it obvious what the menu is and what is available. Make it easy to search the site and to contact you. Make it obvious who is behind the site and what the purpose of the site is. Be honest about yourself and people will like you for it. There are far too many one-man-show web sites trying to appear as a whole corporation or network on the web already.

Read your content over and over again – any word that can be omitted or any sentence that could be phrased easier is a win. People on the web are busy and not all of them are native speakers of your language. Don’t make it hard for them.

Furthermore, the web is a secondary media. People do other things while reading your site and don’t take all the content in – instead they scan for interesting words. Steve Krug explains this in How we really use the Web.

It is about advertising without annoying.

Make sure you pick an easy to remember URL and advertise it. With this we don’t mean buying advertising space, but doing simple things like adding the URL to your email footer, stationary or other promotional material. Footers reach further than you may think if you participate on forums and mailing lists.

[update]

It is about freshness.

A web site that doesn’t change at all needs to have amazing content or it will not get any visitors in the long term. It is crucial that you get initial visitors, but also oimportant to keep them coming back, talk about your offers and attract new visitors. Update often and with good content and people will come back. If you use a blogging system as your CMS updates also mean that the RSS feeds change and subscribers get automatically notified.

One of my greater annoyances on the web is sites that automatically focus a form field when the page has loaded. Supposedly this should make it easier for you to use the product, as you are to log-in anyways, but there is one real problem with this.

If you try the demo page for a normal autofocus and start typing in your details, it can happen that you are already in the middle of your password when the page is ready and the focus gets shifted to the email field. I have seen this happening in Internet Cafes, where people inadvertedly revealed their passwords that way.

The reason is the simplicity of the scripts applied to focus the field when the page has loaded, which sometimes is as rudimentary as:

window.onload = function() {

document.getElementById( ‘email’ ).focus();

}

	

Now, I wondered how to make that better. A simple solution would be not to use onload on the window (and thus waiting for the document and all dependencies to be loaded before you proceed) but use onAvailable or equivalent solutions on the element itself instead. However, if the element to highlight is not the first, that would still make it possible to enter other data until the focus gets taken away from you.

Next I considered to read out the event target when the page has loaded and assume that if the target has a node name, someone is entering data. That proved to be to flaky (as [link:http://setmajer.com/,Chris Kaminski,colleague met] predicted, darn you!) as MSIE told me undefined whenever.

Thus, I dug deeper into my memory of form elements and unveiled the idea of value versus defaultValue. The latter, rather less known is the value set in the HTML attribute, whereas the value is the value of the field. Value changes when the user enters data or changes the element’s state (in case of checkboxes), but defaultValue doesn’t.

Using this information it is easy to set up a better autofocus script that will not focus the element when any of the data in the form deviates from the original settings in the HTML.

window.onload=function(){

var isfocused = false;

var elms = [‘email’,’pw’];

for(var i=0;i
var elm = document.getElementById(elms[i]);

if(elm !== undefined){

if(elm.value != elm.defaultValue){

isfocused = true;

}

	
}

}
	
if(isfocused != true){

document.getElementById(‘email’).focus();

}
	
}

All you need to edit is the elms array listing the IDs of all elements to check :-).

Recently I have discovered a really sad pattern of behaviour in the webdevelopment world and its communication channels (blogs, mailing lists, forums, IM): People don’t share information as they are afraid that it may sound too trivial, not relevant or has been discussed to death already.

This is happening in companies, too: new developers hold back in asking questions or showing others what they have done and how they solved a certain problem as they fear it may make them sound inexperienced and helpless.

It is an overused expression, but there really are no stupid questions. Repeating them over and over again without taking on information you get in answers makes you appear stupid, but the question in itself stays relevant.

There is no gain in all of us being smug about knowing it all and not really caring to ask for help with small nagging issues in favour of spending days to solve them ourselves. Asking a colleague is not a weakness but simply shows that you care about the problem and you want a second opinion to test your approach (XP fans will remember the pair programming idea).

I have some blog posts here that get an amazing amount of hits that some people asked me why I ever bothered to put them up. Things like “[link:http://www.wait-till-i.com/index.php?p=204,How to remove the border around a linked image]”, “[link:http://www.wait-till-i.com/index.php?p=257,Using CSS classes to avoid loops], [link:http://www.wait-till-i.com/index.php?p=19,Printing Background Images] or [link:http://www.wait-till-i.com/index.php?p=251,Linking an Icon and a text and apply a roll-over state]. This proves to me that the demand is there, and that things we consider “Common Knowledge” might not be that common.

There is a rather cool site that got into the direction of offering information like this, called [link:http://bitesizestandards.com/,Bite Size Standards]. However, after an initial honeymoon period of posts it seems to have gone back to bed for a beauty sleep.

In my current work, [link:http://www.kid666.com/blog/,Tom Croucher,colleague friend] tries to start implementing something called “Lightning Talks”, which are 5 minute presentations of someone of the team to the team about a certain issue and how to solve it, followed by a 10 minute question and answer session.

Battling the Common Knowledge Myth

Now, as a web site like bitesize standards means work and dedication and filtering, I propose another idea:

Let’s post a lot of these small “Issue – Solution” blog posts and simply use a unified Technorati tag for them, for example “[tag]webdevtrick[/tag]”. That way other bloggers or sites can get the feed on that tag and show them, and we can advertise the idea on mailing lists every time the same question gets asked. Consider it a decentralised FAQ with Technorati as the aggregator.

I’ll publish results here, and simply will start doing that myself, so even if I am wrong with this idea, it doesn’t cost me much time.

If you ever wondered how flexible web applications with hundreds of objects that need event handling are built, the trick behind it is called “Event Delegation”.

I didn’t come up with it, and it is nothing new either, but as some people seem to get confused when the term crops up, I’ve written a quick example why event delegation helps keeping web apps light and fast.

I just enhanced the site search here with an autocomplete option using the [link:http://developer.yahoo.com/yui/autocomplete/,YUI AutoComplete Widget]. Just type in anything and you’ll get a list of post titles to choose from. Selecting the title automatically gets you to the entry.

I had this dynamic first, using a PHP script to poll the database, but it seems the load is too much. Anyone interested in a step – by – step how to do it yourself?