Building for Mobile with Device Orientation

Mozilla Firefox 3.5 and Firefox for Mobile 1.0 (Fennec) both have support for modifying a web applications look based on screen dimensions and current orientation. These abilities give web developers the power to build better web applications for mobile devices and the ability to optimize the browsing experience when screen space is constrained.

CSS Orientation Properties

Web applications look and feel is defined by a CSS file, so therefore the Firefox developers made it super easy to tie current orientation and screen dimensions into which CSS file to load.

For examaple: If the browser is in portrait mode, a single CSS media parameter will specify which styles to use:

@media all and (orientation: portrait) { ... }

In the same way, you can create a custom CSS stylesheet for users who are browsing with a screen size between 500 and 700 pixels:

@media screen and (min-width: 500px) and (max-width: 700px) { ... }

Orientation Events

Firefox 3.6 adds support for orientation events in JavaScript, so you can get current updates of how the user is holding their mobile device:

window.addEventListener("MozOrientation", handleOrientation, true);

Once you register the event handler, the handleOrientation function will receive an object specifying the x, y, and z value of the devices current position:

function handleOrientation(orientData) {
var x = orientData.x;
var y = orientData.y;
var z = orientData.z;

With those parameters and a game timer, you can probably build the Labyrinth game.

For those of your that are ready to start experimenting with this API right away, Mozilla Developer Center has the full Firefox orientation documentation.

The Cost of Endorsing H.264

As you’ve probably heard, both YouTube and Vimeo have released beta support to their massively popular websites to play videos using the HTML5 video tag instead of Flash. While I am glad the video sites are finally switching to the native HTML video tag, I am perplexed why they have gone with the non-free option.

Firefox, Safari, Google Chrome, and soon Opera all support the HTML5 video tag with the ability to play Ogg Theora encoded videos (except Safari). On the other hand, H.264 is only supported by Google Chrome and Safari. Both of these formats do the same thing, they specify a compression standard that allows for efficient playback at relatively small file sizes. There are a number of technical differences, but generally, they preform relatively the same. The big difference between the two is that Ogg Theora is royalty free and available for anybody to use, while H.264 is encumbered by patents held by the MPEG LA association. This same organization will charge anybody who uses it a hefty royalty fee starting in 2011.

If you have a personal blog and want to put a video on your website using H.264 this means you need to have to hire a lawyer to create a deal with the MPEG LA to allow you to use their codec. This will either cost you a lot of money, or they will not allow you to do it. They do have the right to simply deny you if they don’t feel like it.

However, if you use the open Ogg Theora format, you are free to simply upload the video to your website to start using it, the same as uploading an image. Ogg Theora is not covered by any patents and is royalty free.

I don’t understand why both YouTube and Vimeo are both going the non-free route. Is it simply because they have the money to pay MPEG LA? Whatever the case, endorsing H.264 encoded videos as the format for video on the web is an option for large companies with money to pay, but it’s completely the wrong choice for blog writers and any small or medium sized organization.