Tilting the web — really?

Here's a gem for you, courtesy of Engadget:

Firefox 3.6 will support accelerometers, make the internet seasick (video).

Right.  I can't wait to write CSS for this.  Are you kidding me??

If you look at the picture of this browser, you can see that the frame of the browser window stays locked in place on the screen, and sure enough - as the screen is tilted, the rendering within the browser is tilted to compensate.

Mozilla Firefox
Image via Wikipedia

Can this really be considered a feature people want or need on their devices?  Here's the bottom line, Firefox:  You're running on a rectangular device, no matter how it's tilted.  There are only two reasonable layouts on a rectangular device:  portrait and landscape.  For everything in the middle, I'm going to go out on a limb here and stipulate that if someone is holding a device at an angle, it's probably because the viewer is at an angle, and thus, wants to turn the device to match their aspect.

Let's also not forget that a screen rendered at non-square angles is going to introduce all sorts of fun graphical artifacts as you re-render at a constantly-changing angle.  Remember that our fonts and graphics are optimized for a rectangular pixel layout, and anything other than square is going to require interpolated rendering of everything on the screen (which, being a mobile device, by the way, is probably of lower resolution than our desktops.  Take a look at this image:

Engadget tilted on screen
Engadget tilted on screen

Ignore, if you're able, the weird optical illusion that makes the rest of your screen now look like it's tilted to the right.  This image, in fact, shows the mobile version of Engadget's home page tilted about fifteen degrees to the left.  Note that while this is certainly still readable, the fonts show significant pixelation -- they're blurry and jagged.

You can also see that the screen is cut off on four corners.  This is because the size of the canvas that will fit perfectly inscribed within the fixed physical screen changes as the angle of tilt changes.  I'm sure there's a geometric formula that can be used to figure this out, and it would be more or less complicated depending on whether you hold the aspect ratio of the canvas constant (which could work right up to the point where you switch from portrait to landscape).  In any event, the size is going to change, and that means that you either change the size of the HTML canvas, reflowing text, images, etc., or you do still more interpolation and rendering to account for the smaller canvas size you're painting.  Either way, I think the user loses.

Can you just picture the bugs that are going to come in once people start using this?

  • Your app blinks when I tilt the screen.
  • When I tilt my screen, I can see everything just fine, but when I tilt it back, the left side of the text is cut off.
  • When I tilt on FireFox, your app works fine, but when I tilt on Chrome, it doesn't work at all.
  • I got a migraine because of your app.
  • What's with the screen swimming around??

Can anyone, anywhere really come up with a scenario where I, as a user of a mobile device, am going to hold my device at an angle and hope that my software can figure out how to render a pixelated, ugly version of the app I'm using at an angle that now, no longer matches the angle of my screen, and (dare I add) keyboard?

On behalf of all web developers everywhere on Earth, Firefox, I implore you:

Stop the madness!!

Reblog this post [with Zemanta]