Websites on the Frontier
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.
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");
}