Monday, June 30, 2008

Top 10 Navigation Menus

The navigation menu is a fundamental part of a web design, no longer is it okay to simply have a load of hyperlinks linking to the different main pages of a website.

It is now normal to see hover effects on menus and in this collection I am going to show you my favourite 10 I have seen over the past month. Enjoy!

Behance | Click to view site

The behance.net menu is one of my very favourite, the colours used are an amazing choiceand the tab effect on the menu makes it a lot easier to navigate than say a drop down menu.

Apple | Click to view site

Apple has always been one of the leaders in design and this menu really compliments this idea. I expecially like the engraved look on the text and the way that apple use their logo as the homepage link.

Jive Software | Click to view site

What I love most about this menu is the hover effect, its sharp and similarly to Behance the colours complement each other very nicely.

OurMemoryOf | Click to view site

I like the way that the menu stands out with the use of the drop shadow and the hover effect is very nice with the use of the arrow pointing into the page, nice effect.

FreelanceSwitch | Click to view site

A technique that is starting to spread is the two line navigation menu and FreelanceSwitch is a great example of this. I like the way that the hover effect just makes the text stand out more.

Baritchi | Click to view site

Not quite a navigation menu that you see on every page but the homepage of Baritchi deserves a mention in this list, some great effects on this page make it a pleasure to use, the simplicity of the website design as well makes the navigation menu stand out a lot more.

Design Militia | Click to view site

Another example of the 2 line navigation menu, Design Militia is a lot simpler than the FreelanceSwitch example but still has a very good effect. Is it just me or are you noticing a lot of these menus are using a similar colour scheme, bright blue and dark gray (hmmm).

Simple.art | Click to view site

Luckily this isn’t the only navigation menu, theres a text based one above the image, but its still quite a nice effect to have it on the image as well. This is a nice site design by the way, so check it out if you have time.

Navigant Consulting | Click to view site

This i smore of a funkier menu but still very nice, I especially like the semi-transparent drop down menu, and the use of different colours, orange, green and blue.

Karim Zurita | Click to view site

Image based menus work really well sometimes and this is an example of a great looking one. The clean look and engraved effect between each icon really makes it look professional along with the great looking icons themselves. It is positioned nicely in the top center of the page with the logo underneath making it clear that it is a navifation menu.

Source: Help-Developer

Top 10 Ajax Lightboxes

Welcome to my countdown of the top 10 AJAX lightboxes. A lightbox is a box that appears on top of a webpage, normally with the rest of the page greyed out with a semi transparent look. The lighbox itself can hold content such as images or text.

In this countdown I will show you 10 of the best, all are free to use and can really add a sense of professionalism to your site, especially if you site is an image gallery or a portfolio site. Anyway onto the list:

prettyPhoto | More Details

Lightbox 2 | More Details

Lightview | More Details

Multibox | More Details

Facebox | More Details

YUI Lightbox | More Details

Smoothbox | More Details


Lightbox++ | More Details


Lytebox | More Details

iBox | More Details



Source: Help-Developer

Why Less Is More And How To Unlock the Web

Features, I’ve recently come to realize, can be obstacles. Problems. The more powerful an application is, the more specialized it is, and thus with increased power its intended audience shrinks, and ironically, it becomes more, not less, vulnerable to competition.

Specialization, traditionally, is a good thing. But, as Alexander Bard and Jan Söderqvist argue in their Netocracy, those who overspecialize will not do very well in the age of the Internet. Want to succeed? Be influential in as many important networks as possible, they argue.

Even in this fast moving age specialization can be ok if you’re a person, but what if you’re a service, catering to thousands or millions of people? Sure, if the conditions around you don’t change much, you can satisfy the needs of a certain group very well, but if you exist in a fluid, everchanging medium such as the Internet, where everything shrinks and expands and overlaps all the time, the power that you offer might work against you in the end.

From this notion a new paradigm has arisen. Less is more. Simplicity is power. Create a solid foundation, and let others build a thousand different houses, each catering to a different need, and you’ll never go out of fashion. Simplicity is the key that unlocks the web. Bear with me.


The Twitter Dilemma

I, as many other authors, have bashed my head against the wall thinking: how is it possible that Twitter remains popular despite their frequent technical problems and the fact that there are other similar services out there which offer more? It is an unprecedented situation: normally, a service with solid competition which has the advantage of not having technical difficulties that prevent their user base from using the service (whether or not Twitter’s competition is better with this regard is debatable, but based on current data anything seems to be more reliable than Twitter) would have been dead and buried ages ago. Twitter, however, endures. Why?

The answer is simple: Twitter belongs to a new breed of services, perhaps accidentally discovered, that win by doing less, not more. It’s a foundation upon which hundreds of new applications were built, yet, in itself, it is little more than an API for a simple one-to-many short message broadcast system. I, myself, have thrown my hands up in frustration and tried to find an alternative I can stick with - Pownce, Plurk, and countless others. Unfortunately, it seems, all these services are too good to be a viable alternative.

Unlocking The Web



How can this be? The web, most experts agree, is a platform - a platform for any service that has to do with information of any kind. Unfortunately for developers, as far as platforms go, it’s a very undefined one; there is no universal API for the Internet. Furthermore, the damn thing changes all the time. Web portals were once huge; now they seem clumsy and cluttered, because many new applications have created more elegant ways to start your online day. If you want to develop an application for the Internet, you must first find a way to channel and organize the information that’ll flow through; if you jump on the wrong train here in the very beginning, your application might be doomed.

Some smart developers have thus began to understand that it’s better to build a very simple service that caters to a very basic need, and slap an API on top, than to try and create a specific, complex service that does a lot right from the start. The first type of service, if executed well, has shown to be very resilient: once it breaks the initial attention barrier, competing against it is practically impossible.

By catering to a basic need, creating a service that satisfies it in a simple way and opening it up through an API, you’ve unlocked, or perhaps deciphered, a small part of the web as a platform. You’ve created a mini platform which everyone is going to use because it’s, simply put, good enough. As long as people have a need to send short messages to other people from wherever they are, Twitter is going to be a highly sought for commodity. Unless someone else makes it even more simple.


Less Is More

Add a couple of features to Twitter and it’s Wordpress. Why is a Wordpress minus a couple of features so popular? You have to stop thinking in the traditional way and adopt the new “less is more” philosophy to understand that.

By far the most popular application that thrives from being simpler than its competitors is Google Search. Remember the way search engines looked before Google? Yahoo, with its unbelievably crowded homepage at the time of Google’s advent was probably the worst offender, but Lycos and others were no better. Google Search was very, very good at what it did, and that’s the reason it became so popular, but even beyond the inner workings of its algorithm it was very difficult to compete with it because the site consisted of almost nothing, sans a text form, a logo and some text. How do you top that? Apparently, no one has come up with the answer to that one, yet.

Another such application is FriendFeed. Having come to the game of lifestream aggregators late, it swept everyone off their feet and competitors like Profilactic and Second Brain have received very little press ever since. This is because, again, it does very little: it takes data from your various social profiles, creates a stream out of it and lets users comment and “like” single items. In fact, it’s eerily similar to Twitter, and now - just like in Twitter’s case - applications that bring new functionality to FriendFeed, like NoiseRiver, have started to appear. Would FriendFeed have done better if they provided this exact functionality from the start? I’m betting no, and here’s why.

Distribution Vs. Complexity


Once upon a time, if you wanted to create a successful application, one of the keys to success was to offer a lot of features your competitors don’t have. Adobe’s Photoshop is one such application. If you need to edit some photos, it’s the best, period, because it has every tool you could possibly need.

But this is the disconnected world we’re talking about. On the web, things change. It’s not only important what you can do; you also want to be able to do it from wherever you want; you want to plug in into other services, you want to work together with other people. Furthermore - and this goes even more for mobile applications and services - on the Internet, complexity is looked down upon. People don’t want big applications that can do everything; they want simple, widgety applications that cater to a specific service.

Partly, this is because complexity makes web applications slow and clumsy. Partly, it is because the attention span of an average Internet user has shortened, and partly, it is because his willingness to learn the nuts and bolts of a complex application has diminished. Most importantly, it is because the Internet constantly changes and it’s really hard to build something big and complex on such shaky grounds.

Is it thus smart to create a lot of small apps, each aimed at a different niche? It’s definitely a sound approach. But I think an even better one is to find the lowest common denominator, an underlying basic need that connects all these various niches, cater to that, open it up and let mashups do the rest. This way, people can choose exactly which features they want to use, and your application becomes a fluid, modular service that can be as simple or as complex as the use wants it to be.


The Magic Formula


Determine a basic need -> Create a service that satisfies it in the simplest way possible -> Open it up.

It sounds simple, but it’s not; determining a basic human need, like the need to share photos or the need to communicate with short text messages is a hit and miss affair. A service like FriendFeed could not have existed 15 years ago; explaining it to someone 30 years ago would sound like science fiction. Yet, today, the need to aggregate all your social networking data in one place seems to be a very important need for many humans. Will it ever be a basic human need, like the need to communicate? I can see the naysayers shake their heads in disgust, but it’s hard to predict what the future will bring. Aggregation and organization of data might play a very big part in our lives really soon.

The other part of the equation is equally elusive. How much is too much? Would Twitter be as successful as it is if it had looked more like Twhirl from the very beginning? Who knows. But I believe now that in many cases it is better to reduce the number of features to a minimum, open the application up via an API, and let the community build on what you have started. This synergy will make your application far more valuable than it would be if it had all these extra features itself.

The few that manage to get this formula right will build mini platforms upon which everything else on the web will be built. By unlocking little parts of the web they will each cater to a different need, and as long as that need is shared by a large number of people, it will be impossible to compete against them. And I’m sure that’s a position everyone wants to be in.

[All images courtesy of sxc.hu]

Source: Mashable

AdSense Becomes a Video Distribution Network with Help from Family Guy

What do you do for an encore once you’ve built the largest contextual advertising network on the Web? Apparently in Google’s case, use it to air cartoons. According to The New York Times, the Google Content Network will soon launch, debuting with short webisodes of a show called “Cavalcade” developed by Family Guy creator Seth MacFarlane.

The shows will be distributed via the thousands of web sites that run Google AdSense code, featuring pre-roll advertising and a few other formats so the publisher still earns revenue. Here’s the really interesting part though: the web sites where Cavalcade will be shown are being selected by Google’s existing contextual algorithms. That means that Google will be able to display the show only to those likely to be interested – in Cavalcade’s case “typically young men” according to the Times.

The potential for this type of system is pretty massive because everyone wins. Publishers serve something way more interesting than a typical banner or text ad, advertisers get to reach their target audience with video, and Google gets more data based on how the shows perform on different web sites. Also, video ads traditionally have much higher CPMs than text or display ads, meaning it’s potentially a lot more money that can be pumped through the AdSense ecosystem if the format proves successful.

As for Cavalcade, the show will have 50 different two-minute episodes. Presumably, short enough so people will watch the whole thing, but long enough to squeeze in a few ads. It will certainly be an interesting experiment to watch.

Source: mashable.com

30+ Must-Have Updated Firefox 3 Extensions

firefox
We’ve put together a list of 30+ must-have Firefox 3 extensions that we know you’ll enjoy, whether you’ve upgraded to Firefox 3 and are looking for something new to add to your browser, or have yet to make the upgrade and are looking for a reason.

We cover everything from useful tools to social bookmarking and more. Let us know which extensions are your favorites.

Colorful Tabs

ColorfulTabs
- Having too many tabs open can lead to a lot of confusion, but this extension will assign your tabs different colors so you can tell them apart easier.

Adblock Plus - The popular, yet controversial extension has been updated to work with the latest version of the browser, and it’s still doing what it does best: blocking ads.

ChatZilla - Add an IRC client to your browser so you can chat in it directly without having to open any other applications.

ColorZilla
- An extremely handy tool for Web developers to let them see the RGB and Hex values of any color on a Web page.

Del.icio.us Toolbar - Quickly add bookmarks to your Del.icio.us account, edit tags and access your account.

Digg - Lets you know if the page you are viewing has been dugg, how many it has received, recent comments and more.

DownThemAll - A popular extension that assists you in downloading multiple files from a page with just a few clicks.

Facebook Toolbar - Gives you notifications of new mail and pokes on your Facebook account.

firebug

Firebug - A mainstay of the developer community, Firebug strips down Web pages quickly and lets you work on JAVA, HTML, CSS and more, directly inside the browser.

FireGestures - Use five different mouse gestures to control various functions of Firefox.

Flagfox - See a flag in the status bar that tells you what country the server is in for the website you are on. You can then look up more detailed information on the server, giving you some extra security in case the site is a fake.

FlashBlock - Annoyed with Flash animations that play on sites when you launch them? FlashBlock will stop them from playing.

Foxmarks - Have more than one computer? Then you have to have Foxmarks. It synchronizes your bookmarks across multiple computers and gives you access to them via their website.

FoxyTunes - Gives you control over multiple media players directly from your browsers to save you the effort of changing windows.

Forecastfox - Weather forecasts brought to you by the people at AccuWeather.com.

Google Toolbar - Gives you the ability to search Google from a toolbar, access to your mail, auto fill forms and several other features.

Greasemonkey
- Greasemonkey is the necessary extension to run the ceaseless stream of Greasmonkey scripts that allow you to customize sites from Facebook to Gmail.

Gspace

GSpace - Gmail gives you nearly 7 GB of free storage. With Gspace, you can turn some or all of that into free online storage of files that you can access from anywhere.

IETab - Sometimes you just have to look at some things in Internet Explorer due to coding issues. Well, using a tab inside of Firefox is a far sight better than having to open up IE itself.

MeasureIt - An extension perfect for designers that allows you to measure the dimensions of any section of a page to figure out how much real-estate it is occupying.

Meebo - Gives you a sidebar with all of your buddies from the various instant messenger services that Meebo supports such as AIM and MSN.

NoScript - An important extension in your security arsenal as it prevents scripts from running in the background of a website without your express permission.

QuickRestart - One of the most annoying things about adding a new extenstion to Firefox is the down time while it restarts the browser to work properly. This extension speeds up the process.

Reload Every - Allows you to set your tabs to reload every few seconds or minutes, handy for sites like Twitter.

Sage-Too - A lightweight RSS reader you can integrate into your browser.

StumbleUpon Toolbar
- Allows you to stumble pages from a convenient toolbar, add comments, view what has been said and more.

Twitterfox

TwitterFox - A Twitter client that resides down in your status bar.

Update Notifier - You’ve been adding all these extensions, but it’s easy to forget to check to see when they’ve been updated. This puts the notifications out front where it’s easy to keep track of them.

Video DownloadHelper
- Assists you in finding and downloading videos from over 500 websites all over the world.

WebMail Notifier - Get notifications of new email in your status bar for services such as Hotmail, Gmail, Yahoo Mail and more.

Source: mashable.com