Basically it creates smooth scrolling effect when a user clicks on an anchor tag that points to a different part of a page, mostly likely a very long page. Often times, in this kind of situation, the page jumps so quick that I have to look for the URL in the browser’s address bar to see if I’m still on the same page. And for a lot of users, this can be confusing sometimes. This little script, once included in the “head” tag, will make this kind of scrolling go slower. Although It’s still a pretty fast scrolling motion, it slows down enough to make user aware that he is being redirected to a different section on the same page.

Another benefit of the approach is that the scrolling subtly reveals the other part of the page as well, which is a nice way to encourage user to explore other part of the page.

Typically I’m not a big fan of implementing fancy but less practical effects on a web page using javascripts. They do have a cost to load and for most of the users, visual effects wear out after the initial “oohs and ahs”. However, this one is a great implementation to address an issue that is too trivial for browser but valuable for web designers.

The first is the big flyout from the “MY FAVORITES” menu. Basically when you move your mouse over an item, a flyout will pop out. I know it has its own merit, and the feature gives visitors shortcuts under the main category. But a big flyout box that fills out most part of the web page can be quite annoying, especially sometimes it was triggered by an accidental hover over the links. Any most of time I just want to click on the menu and go to my favorite subject – with this flyout action, I have to deal with some “delay” before getting where I want to go.

My suggestion: make the flyout smaller, simpler and more importantly, to load quicker.

Same place, “MY FAVORITES” list can get longer and there is not enough slots to display all of them,  to find the rest of the favorites, I have to click on a little “>” button to sort of go to the second page of the favorites.

Why not make this one a flyout then? Definitely the right feature for the right place.

Update:

Looks like Yahoo just updated their page design. Now when you hover over the left menu, a much smaller flyout will show, which you can click on to open the quick view. Much better design than kicking open the annoying page view blocker directly.

Recently I wanted to make uploading photos easier one my site. I want my user to be able to upload any number of photos all at once, and be able to view the uploading progress as well. Since the basic html does not provide this kind of capability and nor does the client side script like JavaScript, “plugins” have to be used. I basically have two options to use: Java Applet or Adobe Flash. Microsoft Silverlight is another tool which can create rich client on the browser, but since it is still a relatively new player in the field I didn’t put a lot of considerations in it.

Two real life examples are Flickr’s photo uploading tool and Facebook’s photo application. Flickr uses Flash and Facebook uses Java Applet respectively. Both of the uploaders are integrated nicely to match the style and flavor of their sites and most importantly are easy to use. In a quick comparison, Flickr’s uploader is light and straightforward. You can select multiple files and see the actual progress during uploading. But the Facebook counterpart lets you to view your computer’s file system from the tool so making file selection is easier. Plus it has some simple photo manipulation functionality like rotating the photos in place.

Flickr’s photo uploader

Facebook’s Photo Uploader

To choose which technology to use we have to look at pros and cons, which probably varies in individual situations. I’ll try to provide some key areas that I found useful to take into consideration when making the decision. Although I ended up choosing the Applet, the decision was largely based on the fact that I’m more familiar with Java and there is really no time for me to pick up Flash and go from there. For some, Flash might be a better choice.

Browser compatibility Plugin technology

Almost all the modern browsers today support Java and Flash. And there is no need to write different versions of application to deal with the browser issues. However, due to the fact that Java and Flash themselves are constantly being upgraded it is necessary to watch the code and make sure it is supported by different Java or Flash versions out there. I think when Adobe released Flash 10 there was some security implementation that broke a lot of Flash app. Sun has been very good on making the newer version of Java backward compatible. Although the newest Java technology is at version 1.6, it is backward compatible to 1.4 and 1.5, which pretty much covers all Java versions out there on user’s machines.

Both Java Applet and Flash requires the plugins to be installed so browsers can display them correctly. Sometimes they come with the browser installation by default. I don’t have any data but it seems both Java plugin and Adobe Flash plugin have good penetration on the popular browsers today (Firefox, IE etc.).

The slowness when loading Applet, at least the very first time.

Applet is slow to load because the browser has to start Java JVM first then start the Applet. A user’s machine may be hung for a few seconds to get over this. So if an applet is a beast and a user has a slow internet connection it won’t look to well. I would say this was a more serious problem a couple of years ago than now. Sun has been improving the Java browser plugin technology and the loading time has been much better with the modern browsers today. I noticed a significant difference between Firefox 3.5 and IE6 on the same machine, with FF beating IE hands down.

Flash, on the other hand feels much lighter, probably due to the fact that Flash is a smaller tool. But the smaller size also comes with limitations in terms of the application capabilities.

Nonetheless I’ll give Flash one point here.

Application capability

Since Applet is written in Java language it pretty much has everything that Java provides — minus those restricted by the security constraints of course. The rich GUI interface and user interactions and programming APIs are extensive. So it definitely has more capabilities than Flash can provide. Using the file uploader as an example, with Java I can develop GUI interface that user can only view and select multiple files from harddrive, but also drag and drop files to a certain destination, which is a pretty regular task on a desktop. With the rich image libraries available Applet can also have a lot more “pre-processing” power like reducing image size, rotating image to a certain orientation and converting images or adding watermarks, etc. Although it is debatable whether whether we should put this kind of the processing functionality on the client side, because it will most certainly make the client heavy to load and expensive to run, the capability is there. Choosing wisely, they are great additions to your web site.

Since Flash is lacking the capability on interacting with desktop things listed above are impossible to be implemented. So I give Applet a point here.

Code development and IDE

Java is a mature programming language and the development support reflects this. Learning the language aside, it is quite easy to set up a development environment and start coding. Flash on the other hand, has a smaller developer base and there is less information on the web that I can use to pick up this tool quickly. I might have a little bias here since I’m more familiar with Java. Flash to me, is a lot like a designer’s tools.

So I give my bias point to Java.

Available products

There are products already developed in both camps. Some of them are free and some of them require a fee. Nothing can beat free, but you get what you paid for. Especially for web apps, a nice demo is far from production. The paid product usually goes through better testing by the developer than Joe’s little free app.

I listed the ones that I found with good quality and support tracking record below.

- Applet

The free jUploader

The jUploader is developed by William JinHua Kwong and it can be downloaded from SourceForge. It seems to be actively maintained. The jar file for basic version is about 370k in size. I’m sure it can be reduced with Java bytecode obfuscator and shrinker software.

The app itself is quite good and documentation is sufficient. However the GUI interface is not as polished as the next candidate: JumpLoader.

JumpLoader – can be free, but will cost if you want the source

JumpLoader is developed by jmaster and it is the best I have seen so far. Depending on your requirement you can have a just simple file uploader or quite sophisticated pre-uploading image processor, you can see the demos here. The app itself it very customizable from the functionality to user interface. But it comes with a price. The “small” version is over 500k in size, which is still too large in my opinion.

- Flash

SWFUpload

This is the free Flash uploader that I like. And it looks similar to the one in Flickr. If you have the Flash development and don’t mind putting some work you might want to seriously consider this one.

Element-IT  MultiPowUpload

I didn’t download and try the product out myself. But based on the demo I like the features that MultiPowUpload provides. Notice that with the base code was under 100k in size. With some plugin, the Flash code is still in the 100k to 200k range.

Like I mentioned I generally prefer the paid version unless the software has enough open source developer support.

As web evolves the difference between a browser and a desktop application is less and less noticeable. Hopefully you find this post helpful to make a decision if you are in a similar situation. Also feel free to make a comment if I missed something here.

In Windows dialog approach (Yes, no or cancel) but a user has to read the whole dialog to determine what to do next, versus a Mac user can just glance through the button labels and know what to do. The difference is small and subtle, yet it demonstrate in every single little detail, there is always room for better design.

I don’t really know the reason. Maybe reddit and digg has given me more than enough news and stories that I need on a daily basis. But I do think the design of the Mixx.com home page has something to do with my lack of using it and it should be improved.

Not allocating the prominent space to the stories

On Mixx home page, the logo and navigation menu take up most of space. Below it is the popular photos section. Frankly I think these small photos with no description or a headline is a waste of the space. The actual submitted stories are pushed down below in kind of in a “mix” which does not draw immediate attention. Reddit and digg, are doing much better on present the popular storied using the good part of the page and big font.

Not emphasize the stories

Social news site is about stories. Digg and Reddit, though have the totally different approch on designing their home page, both show that the stories and contents have the highest priority. Both show a lot of headlines, emphasize the titles (using the noticable font on the page), and made sure visitors can get tight into it from the home page. On the contrary, Mixx shows less and tuck them in below the fold. And the short titles are unattractive, at least to me. This may be related to the Mixx users who actually submit the story, but I think Mixx should encourage the submitters to put more content in the title like a lot of redditors do.

Just found out that default editor in WordPress is also based on TinyMCE, which is quite an endorsement. I particularly like the capability to resize the editor’s size in TinyMCE.

Stock image sites – where you can buy

I use a couple of sites to buy images: stockxpert.com and istockphoto.com. You can get both jpeg or vector images from these sites. Stockxpert.com offers are a little bit cheaper. In my experience, istockphoto.com’s images have slightly better quality.

This has been my best method to aquire the vector images for icons and logos. If you know a little bit about Adobe Illustrator, you should be able to get some vectors files and use them in different places with some simple tweaks.

Use a local graphic designer

Originally I was looking to get some local talent to help me out but it never worked out. I once worked with a graphic designer who work on some design projects for fortune 500 companies on a logo design. Her draft work was just some pensil scribbles on a piece of paper and her rate will double as soon as she touches a computer. Plus she tried to get me to sign a contract so any future change has been done by her only. A friend told me the best way to go is to hire someone just out of school but I haven’t tried that myself.

Use ODesk to hire some designers

ODesk.com is a place to hire the freelancers. You can create your project and get people to bid on it. Since the people for hire are from all over the world often time you can find some talent with very cheap rate.

My ODesk experience was a mixed bag. I worked with someone who had tons of hours (total hiring hours by ODesk) but the work was at most mediocro. Sometimes it appeared he didn’t even read my requirements in the email. And he was never shy about asking for good ratings at the end of the project. Once he even IMed me to “request” better rating because it affects his ODesk rating history. Mind you I wasn’t even the one who gave him the one star that he probably deserves. He was FOR SURE blocked from my GTalk.

I also worked with some designers who made great work for one project but came up short on the other.

My advise on hiring on ODesk is to find someone who’s new or hasn’t many hours accumulated yet.

Get free images online

Although Google image search can find a lot of images, they are mostly copyrighted and it is illegal to directly use them on your websites. This site: yotophoto.com , can find the free-to-use images for you.

We can use a javascript to implement this.

/** checkChange.js **/ 

var alertLeavingPage = false; /* flag to turn on the alert */
var pageInputChanged = false; /* the flag of changes made */

// The onbeforeonload is called before the page is changed. It is not a standard
// method. But it is supported by IE and FF.
window.onbeforeunload = function(theEvent) {
   if (pageInputChanged == true && alertLeavingPage == true) {
      if (typeof theEvent == 'undefined') {
         theEvent = window.event;
      }
      if (theEvent) {
         theEvent.returnValue = "You have made some changes on this page, please click OK to discard the changes or Cancel to stay on the page.";
      }
   } else {
      return;
   }
}

/*
 * The method should be called on the page where the change needs to be tracked.
 * The form ID needs to be provided so the change event can be registered on certain form elements.
 */
function trackChange(formId) {
   var formElem = document.getElementById(formId);
   if (formElem) {
      for (var i=0; i<formElem.elements.length; i++) {
         var inputElem = formElem.elements[i];
         if (inputElem.type) {
            var inputType = inputElem.type.toLowerCase();
            if (inputType == 'text' || inputType == 'radio' ||
                inputType == 'checkbox' || inputType == 'select-one' || inputType == 'textarea') {
               inputElem.onchange = setChangedFlag;
            }
         }
      }
      // turn on the alert flag
      alertLeavingPage = true;
   }
}

/*
 * The method which is tied to a change event.
 */
function setChangedFlag(evt) {
   pageInputChanged = true;
}

Of course you will need to include this script to the web page. Besides that, you also need to call the trackChange() method to register the form elements that we want to track. So a form Id needs to be set in order to register. A sample html page look like following: 

<html>

<form id="the_form_id" action="" onsubmit="alertLeavingPage=false; /* no reminder for submission */"> 

</form> 

<script type="text/javascript">
<!– //
trackChange('the_form_id');

// –></script>

</html> 

Once they are added into the page, the user should see this prompt when they leave the page with un-submitted inputs. 

The method only detects whether there has been any change activity and it won't be able to tell whether there is change being made. For example, if someone checks a checkbox and unchecks it the script will think there has been change made.