1. Open Handbrake.

2. Select the source video file.

3. Under Destination, pick where you want to write the new video file.

4. Under Output Settings, the format should already be MP4, if not choose that.

5. Check the box that says "Web optimized". Don't forget, this step is important!

6. Under the Video tab, make sure the Video Codec is H.264 (x264), and Framerate is "Same as source".

7. There are a number of ways you can change the quality / file size. I think the safest thing to do is to make the Average Bitrate 960 kbps, and leave everything else on the default settings. 700 kbps would be as low as I would go, and 1500 kbps is the maximum. Try a couple different bitrates, and use the lowest bitrate possible with acceptable video quality.
   • If there is noticable frame skipping on PC's, decrease the bitrate to 1000 kbps or lower.

8. If you want to adjust the picture size, click the "Picture Settings" button in the top toolbar.
    • change Anamorphic to None.
    • Make sure "Keep Aspect Ratio" is checked. Adjust the width, and let the height change automatically.
    • the video width should be 640 or less. The height should be 360 or less.

9. Click start and wait for the video to encode. 

 

If using Final Cut Pro, you can follow these instruction to export video directly as web optimized MP4:
http://www.kylegilman.net/2011/02/25/making-mp4-h-264-videos-in-apple-compressor/

If there's an issue with color fidelity, video looking "cold" or "faded", I recommend downloading the custom x264 encoder from this site:
http://www003.upp.so-net.ne.jp/mycometg3/
After you download it, copy x264Encoder.component to Mac HD/Library/QuickTime/