Today, I am not going to post some CSS3 tricks on Webkit, or stuff like that. Instead, I post a list mobile browsers, since I am often asked about mobile / WAP browsers by engineers, product managers, and mobile-curious or mobile-newbie people.

I gathered 30+ major browsers I have worked with (plus a few I have never even seen), and categorize by the markup that browsers can render – WML, CHTML, XHTML-MP, and HTML4.

So, here you go. If you find some mistakes, let me know!

I have categorized only with the markup type, and did not sub-categorize these browsers. However, if I would, I may want to grade XHTML-MP devices with page memory size (=”deck size”, yes I said deck size), and screen resolution for UI design purpose.

To grade full-HTML browsers, you need to spend massive time and effort on testing rendering capability with CSS, and Javascript DOM compatibility, events, etc. Actually, PPK has done excellent work on mobile browser testing, so you can simply visit Quirksmode.org!

One of the recent awesome news for mobile web developer is that “the browser guy” Peter-Paul Koch, known as PPK of Quirksmode.org has jumped onto mobile world, backed up by Vodafone. (See his blog).

I have been working for mobile phones since I joined Nokia in 2005, then Yahoo! later, I have been frustrated with luck of information on mobile browsers. Although Nokia was pioneering sharing information on S60 WebKit browsers, still there was not enough so I had to run many tests by myself without much help from anybody else, and recorded some quirks found a little bit at the time. So PPK’s work on compatibility test table is the one of the best resource I can have!

Anyway, PPK made his visit to Yahoo! last week and the video of his presentation is now on YUI Theater!

Also, his slides are availabe at SlideShare:

• Yahoo presentation: JavaScript Events
• Google presentation: The Open Web goes mobile
  

Bitstream has launched a new mobile browser called Bolt, which is a J2ME browser and use WebKit as a rendering engine.

Instead of writing a review on this new WebKit browser, I decided to just do some quick CSS3 test on variety of WebKit browsers!
If you rather read the review, I recommend WAP Review. There’s a very detailed great article on Bolt there.

WebKit browsers I used

1. WebKit Nightly for Mac OS X (as a Control)
   Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_4; en-us) AppleWebKit/528.11+ (KHTML, like Gecko) Version/4.0dp1 Safari/526.11.2
2. iPhone Safari
   Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20
3. Chrome by Google
   Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.43 Safari/525.19
4. HTC Dream Android
   Mozilla/5.0 (Linux; U; Android 1.0; en-us; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2
5. Nokia N95 8GB
   Mozilla/5.0 (SymbianOS/9.2 U; Series60/3.1 NokiaN95_8GB/10.0.021; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413
6. Bolt 0.74 on Nokia N95 8GB
   Mozilla/5.0 (X11; 78; CentOS; US-en) AppleWebKit/527+ (KHTML, like Gecko) Bolt/0.741 Version/3.0 Safari/523.15

CSS3 Styling I tested

.opracity {opacity: .5;}
.textShadow {text-shadow: #777 2px 2px 2px;}
.textShadows2 {text-shadow: rgba(0,0,255, .7) 3px 3px 2px, rgba(255,0,0, .7) -3px -3px 2px;
.ellipsis{text-overflow: ellipsis; width: 200px; overflow: hidden;}
.borderRadius {background-color: #666; color: #fff; width: 200px; padding: 10px; -webkit-border-radius: 10px;}
.boxShodow{-webkit-box-shadow: #000 3px 2px 6px; width: 200px; padding:5px;}
.strokeAndFill{-webkit-text-stroke: 1px green; -webkit-text-fill-color: #ccc; font-size: 2em; }
.borderImg{-webkit-border-image: url(button.gif) 0 13 0 13 stretch stretch; border-width: 0px 13px; padding: 5px 0 7px;}

Results

Summary

* Basic feature is spported, but not multiple shodows.
** Not degraded gracefully. Contents become unreadable so should be avoided.

Additional Notes

Besides the CSS3 test, it is noticeable that Bolt does not honer css font size, weight and header with H tag. This is happening to another J2ME browser, Opera Mini 4 (not tested here since Opera Mini is not WebKit-based). Additionally, like Opera Mini, Bolt uses proxy for rendering and compression. Data is passed through proxy before sending to device.

Here comes Fennec!!! (Release note)

It’s been a whole year since Firefox first announced that they were developing for their mobile version, after the not-so-successful Minimo for WinMo, and they finally released this public alpha for Nokia N810, whose default built-in browser is already Mozilla-based MicroB.

Unfortunately neither I or my beloved DeviceAnywhere has N810 device, so I tried the one for Mac OS.
Because this is for N810 WVGA screen, so the browser window is set 800×480 pixel, and support touch screen (so you need flick the screen to navigate). I am wondering how comfortable with the UI on other smaller screen devices, or how non-touch screen UI would look like. (Or are they even planning to support one?)

Anyway, I was playing around and tested some pages quickly:


(left) Startup screen, and (right) Yahoo! search.



(L) My twitter home page. Editting was a bit pain because I don’t see a cursor on this emulator. (R) Run Acid3 test. 90/100 is good (better than iPhone Safari but doesn’t beat the latest Webkit which gets perfect score).



(L) iCuteOverload. Looks like it supports iUI nicely. I need to take out the “-webkit” prefix to see if border-image works on Fennec. (R) Some tests on event – not seems to support (both results “true” on iPhone Safari)


Anyway, overall I think this is pretty sweet. I am excite to see the battle among Webkit – Apple vs. Google, and vs. Mozilla.Also, if you are lucky enough own N810, try install it on your device!

Today, Opera launched Widget SDK, enabling web developers to deploy web apps on desktop, TV and mobile devices. Unlike Apple’s iPhone $99 SDK, it is free of charge.

Watch the step-by-step instruction video:

More Mobile App/Widget SDKs:

• Apple: iPhone SDK
• Google: Android SDK
• Yahoo!: Blueprint SDK (this is what I am working for)
• Nokia: Widset
• Openwave: Mobile Widget
• Plasmo: Widget

OMG, OMG, OMG!!! A Hello Kitty mobile phone charger!!!

The Charger comes with cables that compatible with Nokia, Motorola, and Sony Ericsson major devices, and powered by three AAA batteries.

OK, I am sick of being judged with stereotypes and prejudice, but one thing I know about myself that perfectly fit a typical “Japanese girl” is the Hello Kitty obsession.

I admit that I want one really bad!!!

Source (and the photo):
IntoMobie

自分がコアメンバーの一員として制作したプロダクトが日本のニュースでも紹介されているなんてちょっと嬉しいかも。

Anyway, it’s pretty sweet that I can show what I’ve been working my ass off for, to my friends and family in Japan. I wish we could launch this in Japan, as well as Europe and Asia that we’re planning to launch soon. But since Y! Japan is operated separately from us, I dunno if they will…

Well anyway, I’ve tried oneSearch in Japanese (see the screenshot), although we are not supporting Japan. Well, the temperature is shown in fahrenheit in weather section, because well of course, this is a US product. -will I18N’d later… Pretty neat, right? Seriously Y! Japan should consider, since Apple will start selling iPhone there sooner or later. I guess.

I found more news by searching just now:

• 【2008 International CES】米Yahoo!、「Yahoo! Go 3.0」を発表。
• ヤフーのヤンCEO、CESで講演–「Yahoo Go 3.0」ベータなどを披露
• Yahoo!，モバイル機器向けアプリ開発プラットフォームや「Yahoo! Go 3.0」を発表
• Yahoo!、モバイルサービスを刷新
  

We finally launched Yahoo! Mobile Web beta (http://beta.m.yahoo.com) for limited high-end devices including iPhone, Nokia N-Series, also Windows Mobile incl. Moto Q, Palm Treo this morning.

Next project – launching for more devices, and int’l support for 3GSM. Nearly all engineers gave up Vegas… so can we go to Barcelona next month instead? Pretty please por favor?