pakidesigner.com

A burning question that’s been tossed around for years — “Why isn’t Firefox on my phone?” — has finally been answered.

Firefox will begin showing up on mobile devices at the end of this year. I got the chance to test a beta version of Firefox on a pre-release mobile device. The browser, code-named Fennec, is the closest thing yet to a real, desktop-class browser for mobiles.

It does almost everything Firefox on the desktop does, and with the speed, stability and support for web standards one would expect from a browser branded with the Firefox name.

Last week, Wired.com received a Nokia N900 for review. The black, brick-style phone has a touchscreen and a physical keyboard. It runs Maemo, Nokia’s operating system based on Debian Linux, and Maemo has its own, dedicated build of Fennec. I installed Fennec for Maemo Beta 4, the latest stable release, and spent a few days surfing with it.

All the features that endear us to Firefox — tabbed browsing, the smart URL bar, easy bookmarking and history management, spellchecker, password manager, an innovative user interface — are present and working properly. There are still some sticky bugs, but it’s already very usable.

While the mobile web of just a few years ago was clunky, slow and unsatisfying, today’s mobile web is a whole new bag. The iPhone’s Mobile Safari and Google’s Android browser (both based on the same open source WebKit engine), along with the Opera Mobile browser are feature-rich tiny machines. Mobile bandwidth is still limited, but fast enough and getting faster. Cities are blanketed in Wi-Fi hotspots. Flash support is incomplete, but improving quickly. Most of us can see the light at the end of the tunnel when we won’t need the desktop for all but the most serious tasks.

Mozilla has remained largely absent from this revolution until now. Firefox will first be made available for devices running Windows Mobile and Maemo. Later, a version is expected for Android. There won’t be a version of Firefox for the BlackBerry, for Symbian or for the iPhone any time soon, (Mozilla execs get asked the iPhone question all the time, and their answer is always the same — Apple’s restrictions on the device are too tight for Mozilla’s browser to be able to function properly).

Performance is what this browser will be judged on, and at least on the N900, the Fennec team should expect high marks. Pages load very quickly and I encountered few rendering problems in my tests. I hit all my usual destinations: Gmail, Google Reader, Craigslist, Wired, Twitter, Facebook and FriendFeed. Of course, I followed scores of links out to other sites.

Since it’s built on the same code as Firefox (actually, it’s based on Firefox 3.6 code, which hasn’t even made it to the desktop yet), Fennec has excellent support for web standards, Ajax, microformats and for advanced CSS layouts. Flash support is coming soon. The latest nightly builds have it, but it’s buggy — Mozilla’s QA blog notes there are syncing issues with audio and video. The beta I used didn’t have Flash capability.

The N900’s screen is touch-sensitive, so double-tapping on an image or paragraph of text zooms in cleanly without a page refresh. You can see the page element get sharper as you zoom in — just like the iPhone’s browser. Text flows cleanly around images and hardly ever spills out of bounding boxes.

One notable flaw in Fennec is that words often appear a little crushed. Most sites I visited showed kerning and letter spacing issues (Wired.com is one example). On a few sites (like Craigslist) text showed up perfectly fine. Results varied on the rest. These inconsistencies are probably due to a combination of the text styling the website author has chosen and the fact that most sites don’t yet know what to do with Fennec’s user-agent string — the bit of code identifying it as a mobile browser. Websites will serve mobile-optimized sites to mobile browsers, which is why you’ll sometimes get redirected to a different URL or served bigger text when you hit some websites with your iPhone or BlackBerry.

Fennec is such an unknown entity on the web that most sites don’t know it’s a mobile browser. Leading up to launch, we’ll see more sites recognizing it for what it is — a browser running on a tiny screen.

One fix is to install an add-on that lets you change the user-agent string and impersonate a more widely-used mobile browser (this is called “spoofing”), but such an add-on doesn’t exist yet. Visiting the page for the most popular user-agent spoofer for Firefox shows at least one fan has already requested a Fennec version.

Thankfully, Fennec’s page-rendering problems are largely contained to text kerning and spacing. But it gets worse when you zoom in. There’s already a bug report filed for the kerning issues, and they should be fixed before 1.0 arrives.

The only other notable problem is page sluggishness when scrolling. It doesn’t seem to matter whether the page is fully loaded, whether it’s weighed down with JavaScript, or whether you’re using the keypad or your finger. Fennec is an equal-opportunity page sluggifier.

One Mozilla engineer I e-mailed says the team has been trying to get rid of one of the browser’s visual tics — a slight, side-to-side “jitter” that sometimes happens when you place your finger on the screen to drag it — and that the fix they’ve applied has inadvertently caused the sluggishness to show up in this beta. It should improve in the next beta release.

Beyond performance, the next most critical ingredient for a browser is a well-designed user interface. Fennec has one.

Just as with Firefox’s “Awesome bar,” the Fennec address bar does triple-duty — it’s a URL bar, a Google search box and a history and bookmarks search tool. Results are suggested as you type, and on the N900, it’s snappy.

Swiping the page left or right exposes two additional banks of controls. Swipe to the right and you get a tab manager. It shows thumbnails of all your open browser tabs and a big plus sign you use to open a new tab.

Swipe to the left and you get forward and back controls, the Star button to mark a page as a favorite and a button that brings up the Settings panel.

With the latest versions of Safari, Firefox, Opera and Google Chrome all supporting CSS’s new @font-face rule, you might think web designers everywhere would be rushing to add fancy fonts to their websites. But of course, most aren’t. So why, if designers have been bemoaning the state of typography in the browser since the dawn of the web, hasn’t the recent growth of @font-face support turned things around?

There’s actually another, much more complicated problem with @font-face that stops it from being the panacea for your font woes: licensing.

Unfortunately, the font foundries which create, sell and license fonts have thus far been reluctant to embrace licensing terms that would allow designers to serve fonts via @font-face legally. The foundries fear pirates would be able to steal fonts much more easily if the files were published in the wild on the web.

There are some possible solutions to this, such as third-party middlemen like Typekit. However, involving yet another layer of complexity (and potential failure) to your web stack isn’t anyone’s idea of fun. So what’s a designer to do?

It turns out there are actually some fonts that you use with @font-face today. Font Squirrel, one of our favorite places to find free fonts has an entire section devoted to @font-face compatible fonts.

Two things to keep in mind with Font Squirrel’s list: First, as the site says, “Font Squirrel makes no guarantee that our interpretation of each license is correct,” which means make sure you read it yourself and possibly contact the creator to clarify. And second, some of these fonts are downright ugly.

But not all of them. Designer Francesco Mugnai recently posted a nice roundup of some of the best @font-face candidates from the Font Squirrel collection, including two of our favorites, Museo Sans and Anivers.

Of course, even with legal fonts and decent browser support, @font-face isn’t for every project. However, if you’re sick of Flash solutions like sIFR tired of being limited to only the six fonts found on nearly every PC, Font Squirrel’s list of @font-face compatible free fonts could be the solution you’ve been searching for.