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. Now with Geolocation has been updated and now includes geolocation support. If your browser supports it your country should automatically find and select your country. If not, it will fall back to IP based country lookup. Geolocation is a HTML 5 feature that is supported by Safari on the iPhone 3.0 OS, Firefox 3.5 and Google Chrome. is an application that tells you what and when your next federal holiday is. Currently it’s available for people in: Australia, Canada, France, Germany, India, Nigeria, United Kingdom and United States.

Fall 2009 Web Browser Outlook

The names are familiar: Firefox, Google Chrome and Safari. These relatively new browsers have been shaking the foundations of Internet Explorers complete victory over Netscape. These new browser are implementing fresh ideas and breaking out of the crusty browsers of the early 21st century. With the second browser wars in full swing, lets see where things stand and what’s coming.

Mozilla Firefox 3.6

The Firefox team is focusing on startup performance, JavaScript performance, lightweight themes, and a few new features for developers. Firefox 3.6 is expected to arrive Nov 2009.

After that, Firefox 3.7 will boast a revamped user interface, a WebGL implementation and ongoing speed and responsiveness improvements.

Safari 5?

Safari 4 was just released, and we have not heard any official statement from Apple what features Safari 5 will include, but looking at WebKit we can see what core browser technologies are being developed. WebKit has added geolocation support, HTML 5 draggable, and HTML 5 forms patterns and required attributes. What directly user visible changes will Apple make? We will have to wait and see.

Internet Explorer 9?

The next version of IE is still quite a ways out (3 years if you look at the release time-frame of IE 7 and 8 ) but it’s expected to boast many new HTML 5 features including native video and audio playback. Internet Explorer 9 should be quite a feature packed release with HTML 5 goodness, better performance, and improved standards support.

Opera 10.10

Opera 10 was just released this month but the team is working on Opera 10.10 with Unite. So far we’re waiting to hear more from the Opera team about what they are working on.

Google Chrome 4

With Google Chrome 3 being released, the Chrome team and external developers are hard at work making the browser cross platform with support for OS X and Linux. User end features include bookmark synchronization, extensions and surly will include more JavaScript performance enhancements.

Metatunnel by FRequency - WebGL Demo
Metatunnel by FRequency - WebGL Demo

Overall the competition looks quite healthy and browsers are being enhanced to be the Operating System of the future.

WebGL Coming in Firefox 3.7

Vladimir Vukićević, the pioneer of bringing the well known OpenGL standard to the web, has just blogged using Firefox to render Spore creatures. Check it out, it’s a pretty impressive demo of this upcoming web standard.

Development on what would become WebGL started back in 2007 with Canvas 3D as an extension for Mozilla Firefox 3.0. Since then it has grown from a single project to an open web standard through the Khronos standards group. The standard is currently under development with a target release date of first half 2010.

Firefox isn’t the only web browser to be experimenting with WebGL, Google and Opera have also pledged to support this standard. The WebKit source code has recently picked up preliminary support.

The web has mostly stayed 2D, but with the advent of CSS Transforms and WebGL, the browser is moving into new territory. The web is evolving into the most important platform of the future.

Upcoming Web Browser: Mozilla Firefox 3.6

With Mozilla Firefox 3.6 the team is shifting to a shorter release schedule, so enhancements reach users sooner. It’s quite likely we’ll see more incremental releases, including Firefox 3.6 which is scheduled for release just six months after Firefox 3.5.

The next version of Firefox will be faster because of improvements to the TraceMonkey JavaScript engine and because of a focus on improving startup time performance. An asynchronous location bar and improved scrolling on Windows should also provide a noticeable speed improvement. The next version will feature the Gecko 1.9.2 rendering engine.

Dromaeo in Firefox 3.6

UI changes include tab previews of other open websites when you use the CTRL-TAB keyboard shortcut (currently you must turn it on with the browser.ctrlTab.previews config option), and lightweight themes that don’t require a restart.

CSS3 Features for web developers:

For a concise list of changes, see the Firefox 3.6 for developers wiki page.

Estimated Release Date: January 2010 Update: according to a draft roadmap, release date is set for November 2009.

Download Firefox 3.6 Alpha 1