Camtasia Studio is a flexible program. If you want to create an HTML5 video, all you have to do is click on the Produce and Share tab at the top of the interface, choose the MP4 Smart Player (Flash – HTML5), accept the default settings and the software will render a file. On the surface, it seems simple and it is, until you use the video on a mobile device.
If you´ve optimized your production for mobile devices, chances are all will be well but if you haven´t you will likely run into problems with formatting, text size, audio quality, video compression, etc. In this article we look at 7 tips to improve your HTML5 video experience with Camtasia Studio.
1 1. Text
One of the first things you need to consider is text. Here are some quick tips for mobile fonts and formatting:
· Black text on a white background is best – reverse type should be avoided. If you do use it, do so sparingly.
· Use a high contrast font. Fonts on colored or heavily textured backgrounds can be hard to read.
· Make sure you give letters room to breathe.
· Use a single column layout only.
· When creating paragraphs, keep them short. This makes them easier to read.
2 2. Color
Simple is best. Use only 3 to 4 colors for your presentation and stay away from heavily textured backgrounds. If you have too many colors you run the risk of overwhelming your user.
3 3. PowerPoint Presentations
When using PowerPoint presentations the slides should be clear and easy to read. Here are some things to keep in mind:
· Make sure to use a large font.
· If you use decorative fonts, use them sparingly. If you do use them, make sure they are easy to read.
· Use bullet points.
· Do not use complex charts, illustrations or images. They will be difficult, if not impossible to see.
· Avoid complex or heavily textured backgrounds.
· Do not use paragraphs.
· For body text, use a San Serif font such as Arial or Verdana. These are easy to read.
4 4. Images
Images should be large and clear. If they are too small, what you want to convey will become lost. The same goes for illustrations.
5 5. Animations and Video
Like images, animations and videos should be large, clear, and easy to understand. They should also be short and to the point. If they run too long you run the risk of losing your audience.
6 6. Consider the Bandwidth
With mobile bandwidth can be extremely important. If your file is large it could take a long time to load on a slow connection. Below are some settings you can experiment with for your products (based on the suggestions of Alex Olthoff of TechSmith):
· When producing an HTML5 video the recommended setting is MP4 with Smart Player (up to 1080p). This setting gives you the “best of all worlds” in regard to the compromise between quality and file size.
· If you are having download issues with your files, the thing that will affect it most is the “Quality Slider” as seen here: http://screencast.com/t/W4f0JmoD. In the Custom Production settings, it is set by default to 50% (as in the screen shot above), but you can lower that to about 40% if you need to save on file size.
· Also, if you don’t have a lot of high-motion content in your video, you can set the frame rate to 15fps and it won’t affect the quality at all.
· For audio, 128kbps is a good starting point. If you need to make the file size smaller, you can reduce that to 96kbps, but don´t go much lower than that. That said, the quality slider will make the biggest difference regarding you file size, not the audio settings.
7 7. Other Options
You can use the MP4 with Player (up to 720) to create your videos. The result will play on the iPad, iPhone, and Android. If you host the videos on Screencast.com the videos will play on all those devices. Interactivity such as quizzing, the table of contents and hotspots will also work.
Hosting is an important consideration. It must be able to support streaming video. This is one issue that causes trouble for many a user. You might want to consider hosting your videos with a service such as Wistia or Amazon S3. While you could use Youtube, it´s not perfect and sometimes videos will “stall” during playback.
The last step is testing and you will want to do that on a variety of devices. One option is: http://resizemybrowser.com/. Other options are: Mobile Moxie and mobiForge.
