If I hear the WWW being compared to the Wild West one more time, I’m gonna have the urge to punch a baby (there aren’t any babies in the audience, are there?). Sure, the modern web is a wild and crazy place. Now, frankly, I think this is awesome, but it begs the question. How does a reputable company or service provider make a name for themselves in such a lawless world?

You can be sure that no matter how much time you spend developing the perfect site, following every rule in the book of SEO and standards compliance, rest assured, someone will either be doing it better, or soon will be. For the vast majority of the web (forget about eBay for a second, such a behemoth is the exception) you succeed by doing one or two things, and doing them extremely well. This focus is best split into two areas.

The First Focus

First, of course, is the “what” of your website. What does your website offer? Why is it even on the web?

The Second Focus

Second, is the design and functionality of your site. Something within this vast world of possibilities must stand out. If you have a great idea and fail here, the web might not be the arena for you.

If you’re lucky, you can get by focusing on one or the other, but who wants to bet on luck to succeed? An example site with such a singular focus would be Craigslist. Craigslist has zero design going for it. Functionality? Forget about it; the site could be transported back five, maybe ten years and still function exactly the same. Besides simplicity, Craigslist is awesome because it provides a service that everyone needs, and yes, it’s free. But forget about them. The following is a list of sites that are doing it right on both fronts.

The Shining Examples

Netflix

The first site that came to mind when I sat down to write this post was Netflix. Sure, providing movies through the mail is a fantastic idea, Netflix came to the table with a stacked deck, but they didn’t stop there. Netflix realized that people love to watch movies, but they don’t always know just which movies to watch. The problem Netflix faced was how to provide their users with the movies that they love. But just how is a website supposed to know that? Based on your previous rankings of films you’ve seen, Netflix utilizes a sophisticated algorithm to deliver just that. And they are constantly improving it. Or, with the Netflix Prize, they’ve come up with an innovative way to not just have a great algorithm, but to have the best.

And talk about great design. The interface is clean and intuitive (if you don’t have a membership, you’re going to miss most everything unfortunately). Everything is just where you expect it to be to the point that the interface becomes unnoticed, just as a good user interface should be. It gets you to where you want to be.

Facebook

I have to mention the website that is popular enough these days to induce groans just by being mentioned. (That’s when you know you’ve really made it. Pissing off hipsters.) In almost no time, Facebook can connect you with just about everyone you’ve ever know in your life. That’s a small exaggeration, but not by much.

What I really admire about Facebook, as a front-end developer myself, is just how well they use JavaScript to enhance the user experience, with modal windows that appear when necessary, and just as quickly fade to get out of your way. Their library is fast, and they’ve designed it in the right way so it plays nice with the outside world, meaning, it doesn’t take much for outside developer’s to integrate their own work.

iGoogle

iGoogle has been my start page of choice for some time now. It is more than just a portal. At any time I can open up my browser, quickly scan iGoogle, and have an accurate, if summary, picture of all that is going on in the web. At least, the parts that I care about. iGoogle is fully customizable down to the overall theme you choose to display your widgets in. Mix and match which widgets you want to show, and then customize each one of those to fit you perfectly.

Service? Check. Functionality? Forget about it. Design? Your choice. It looks as good as you want it to, with just a couple clicks. I don’t want to give too much away, I want you to go and play with it. You’ll never turn back.

Mozilla Dev

There are countless technical resources for the developer, some of which are much more exhaustive than Mozilla Dev. But really, who wants to wade through all that when one is looking for a quick answer and needs to get back to work? It is the combination of both the service and the design of the site that makes it such a success. As a developer, I can find the JavaScript reference I am looking for, load up the page, and find the answer I need without barely even reading. A quick scan will do it. Compare this to MSDN.

Here is a common JavaScript function for a popup, window.open. Let’s compare the two reference sites. Here is Mozilla Dev and here is MSDN. The clean separation on Mozilla, combined with clear headers, allows the reader to find answers right away. You have to pore over material on MSDN, deciphering tiny italics in a serif font (code in a serif font?? really??). Oh, and just as the final nail in the casket, Mozilla has real world examples and a beautiful graphic that clearly describes what each parameter does. This all comes as no surprise for anyone who’s ever tried to debug code in Internet Explorer. Microsoft would rather JavaScript remained some arcane secret, and will only taunt you with cryptic error messages if your code breaks.

One Less-than-Stellar Example

Pandora

I can hear you screaming already. “What?! Pandora is awesome!” I know, I love it too. It has the first focus down perfectly. However, in the long run I think Pandora will come up short against rival services like last.fm, and others, fast emerging. First of all, I am generally not a fan of a Flash website. It’s a great format for playing movies in, and many designer’s websites look gorgeous in Flash, but for utility it is sorely lacking.

Don’t expect your scroll-wheel to work. Want to tab to the next input field? I don’t think so. And if we look under the hood we get to read some strange code.


function setPromotionalTickerLink(url) {
// do nothing. (but we're leaving this function here because legacy ads call it.)
}



// jh.9.28.2009 - redirect homepage requests from host "pandora.com" to "www.pandora.com"
// required for js->tuner communication, which presently expects same host (down to the subdomain)
if (document.location.href.indexOf("//pandora.com") != -1) {
document.location.href = document.location.href.replace(/\/\/pandora.com/, "//www.pandora.com");
}


So you already know how to send/receive data with javascript do you? Good. Let’s beef those javascript skills up even further then. The catch, as it were, to saving data from an HTML form, is in treating each type of HTML element differently. Or rather, to realize that they all behave differently and that you’re going to have to build your javascript to treat them differently to. In short, make it play nice-like with the other kiddies.

Plain vanilla text inputs are easy enough.

getValue = document.form.inputName.value;

or

getValue = document.getElementById('inputID').value;

But how do we handle checkboxes? What about the select element? First, let’s assume that we do only have plain text inputs in our form. Unlikely in the real world, but it will give us a base function, which makes use of the super awesome built in js function, getElementsByTagName. It should be noted that this always returns an array of HTML elements.

/*
form here is the HTML form object
An easy way to pass this from your page to the function:
<form name="formName" onsubmit="saveForm(this);">
*/
function saveForm(form)
{
  // key is the primary key in the db
  // this would most likely be a hidden input in your form
  // I use it as a base to start building the query string
  // we want to create something that looks like
  // ?key=keyValue&input1=value1&input2=value2
  var q = (form.key ? '?key='+form.key.value : '?key=');

  var els = form.getElementsByTagName('input');

  //parse input elements
  for(var i=0;i<els.length;i++)
  {
      // for those familiar with php, escape is similar to urlencode
      // we need our data safe to pass in a url
      q += '&' + els[i].name + '=' + escape(els[i].value);
  }
}

This core function forms the basis for the rest of the exercise. We just need to work on ‘playing nice’ with the other elements. For the checkbox:

for(var i=0;i<els.length;i++)
  {
    if(els[i].type=='checkbox')
    {
      // I usually give my checkboxes values of 1 or 0
      // so we just check if it is checked, and pass
      // the value accordingly
      q += '&' + els[i].name + '=' + //-->
        (els[i].checked==true ? els[i].value : '0');
    }
    else
    {
      q += '&' + els[i].name + '=' + escape(els[i].value);
    }
  }

And the select element. The important thing to note about the select element is that we really don’t care about its values at all. It doesn’t even have any! OK, so you can often get away with grabbing the value from it, but what we are really doing is getting the values from its children; the option elements:

var sels = form.getElementsByTagName('select');

for(var i=0;i<sels.length;i++)
  {
    q += '&' + sels[i].name + '='
    for (var j=0; j<sels[i].options.length; j++)
    {
      if (sels[i].options[j].selected)
      {
        q += escape(sels[i].options[j].value)+',';
      }
    }
  }

OK, so learning time is over. If you are in a hurry like most developers and just scrolled down to the finished product, here you go. The whole function is here, with textarea thrown in to boot, free of charge.

function saveForm(form)
{
  // key is the primary key in the db
  // this would most likely be a hidden input in your form
  var q = (form.key ? '?key='+form.key.value : '?key=');

  var els = form.getElementsByTagName('input');

  //parse input elements
  for(var i=0;i<els.length;i++)
  {
    if(els[i].type=='checkbox')
    {
      q += '&' + els[i].name + '=' + //-->
        (els[i].checked==true ? els[i].value : '0');
    }
    else
    {
      q += '&' + els[i].name + '=' + escape(els[i].value);
    }
  }

  //parse textarea elements
  var tels = form.getElementsByTagName('textarea');

  for(var i=0;i<tels.length;i++)
  {
    q += '&' + tels[i].name + '=' + escape(tels[i].value);
  }

  // parse select elements
  var sels = form.getElementsByTagName('select'); 

  for(var i=0;i<sels.length;i++)
  {
    q += '&' + sels[i].name + '='
    for (var j=0; j<sels[i].options.length; j++)
    {
      if (sels[i].options[j].selected)
      {
        q += escape(sels[i].options[j].value)+',';
      }
    }
  }

  // this would be a call to an ajax handline function,
  // passing the url of our php file to save the data as
  // an argument
  sndReq('common/saveFormData.php'+q);
}