I had this wonderful opportunity to speak at OpenWebCamp III at Stanford University on this weekend, and I feel very honor to be there with so many great speakers and attendees.

Apparently, I have been doing mobile development longer than most of people, I picked the subject on developing mobile web, and how it has been changed and what we can do next.

I covered the topics including:

• How the mobile development has changed from WML, XHTML-MP, HTML4 and finally HTML5 with CSS3
• Legacy to HTML5: using input attributes to make easier for a user to type on phone
• Dealing with smarter phones: Viewport and Media-queries
• High DPI display: CSS pixel != Device pixel
• Device API

My slides, “WAP to HTML5: Mobile web – past, present, and future” is available in html5, not Powepoint or Keynotes so I couldn’t post it on SlideShare!

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!

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!

Google launched the Gears Geolocation API for mobile on last week on their official Goolge code blog, and Mobile Blog, with a screenshot of a sample mobile site, Rummble and video demo of lastminute.com of UK.

On mobile devices with Gears installed, Javascript functions grab the cell-ID of nearby cell towers or GPS (if either is available) to improve the postion fix.

The two methods:
getCurrentPosition() makes a single, one-off attempt to get a position fix.
watchPosition() watches the user’s position over time, and updates the position changes.

Also,
lastPosition get an approximate position fix

The bad news is that API is available on Internet Explorer, Firefox and IE Mobile (selected devices only – incl. Samsung Blackjack II, HTC Touch Dual, TyTN, Palm Treo750 etc.) and will be available on Android. I was going to try it with S60, until I read the line on the announcement.

The good news is that they are currently implementing the editor’s draft of the W3C Geolocation specification with Microsoft and Mozilla guys.

Today, I had a chance to attend dev.mobi developers’ session at Palo Alto.

I am actually a user of their web tools and documentations, and really like the way they are trying to set standard for developers.

In today’s session, I was able to find out more about their ongoing projects. Paul Nerger of dotMobi, explained the interesting new product from them is called Device Atlas. This is a comprehensive database of mobile device information, such as hardware info, OS, browser. supported graphic format etc., with easy-to-follow GUI. The first version was just released a few months ago and they are now working on new features such as integrations with Ready.mobi test suite, W3C checker Firefox plugin, providing analytics and competitive benchmarking.

One of the biggest pain for me to work on mobile web is a cross-browser issue. Surely there’re thousands of mobile devices means thousands of different browsers. I already appreciate for the OMA and WURFL for the data, so with more partners like Nokia, Vodafone, Volantis etc. Device Atlas seems to be so promising fore more accurate info.The data is available as json files. So for example, to get the screen resolution of a certain device, get the UA and simply call its json data.

By the way, just like me, Paul doesn’t like the term “WAP”. I do use the term to distinguish it from desktop web, but I always felt some sort of awkwardness to say it. Yeah, WAP rhymes with crap, right Paul!

OK, I guess 3GSM is an old name, now it’s called Mobile World Congress.

Anyway, although it’s been pretty crazy and sad weeks for Yahoo, inc., my team kept me busy working on WAP products to be announced on MWC.

For this beta, despite we wanted virtually all WAP2 xhtml-devices, I barely managed the popular devices including Blackberry 87xx/88xx and Razr V3/6/9 excl. the original V3.

Although there’s more work to be done, at least the beta was launched during MWC. However, RIM had Blackberry network outage at that time…

Also, Blueprint dev kit is now available.

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

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!、モバイルサービスを刷新
  ]]> http://girliemac.com/blog/2008/01/10/sweet-ygo-web-made-news-in-japan-too/feed/ 0 http://girliemac.com/blog/2008/01/09/yahoo-mobile-beta-finally-launched-so-we-can-sleep/ http://girliemac.com/blog/2008/01/09/yahoo-mobile-beta-finally-launched-so-we-can-sleep/#comments Thu, 10 Jan 2008 05:56:00 +0000 admin http://girliemac.com/blog/2008/01/09/yahoo-mobile-beta-finally-launched-so-we-can-sleep/

  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?

  

  ]]> http://girliemac.com/blog/2008/01/09/yahoo-mobile-beta-finally-launched-so-we-can-sleep/feed/ 0 http://girliemac.com/blog/2007/11/16/android-uses-webkit/ http://girliemac.com/blog/2007/11/16/android-uses-webkit/#comments Sat, 17 Nov 2007 03:06:18 +0000 admin http://girliemac.com/blog/2007/11/16/android-uses-webkit/

  My guess was wrong.

  I somehow thought Google will partner with Firefox as a defaul browser for their new mobile project (now “Android”), however, Google’s choice was WebKit, accordeing to their SDK. Actually now I think this is a wise choice, since many (mobile) web devs are familiar with developing with WebKit thanks to Apple to make iPhone popular. And needless to say, WebKit for mobile including Nokia N-series is the one of the beat browser around.Anyway, as the storonger-than-ever WebKit is gaining even more power, “Sarfin’ Safari” (Webkit.org’s blog) has announced new features for Safari 3:

  1. Enhanced Rich Text Editing
  2. Faster JavaScript and DOM
  3. Faster Page Loading
  4. SVG
  5. XPath
  6. New and Improved XML Technologies
  7. Styleable Form Controls
  8. Advanced CSS Styling
  9. Reduced Memory Use
  10. Web Developer Tools
  ]]> http://girliemac.com/blog/2007/11/16/android-uses-webkit/feed/ 0 http://girliemac.com/blog/2007/11/10/opera-mini-out-of-beta/ http://girliemac.com/blog/2007/11/10/opera-mini-out-of-beta/#comments Sat, 10 Nov 2007 19:26:09 +0000 admin http://girliemac.com/blog/2007/11/10/opera-mini-out-of-beta/

  Looks like Opera Mini 4 is now official. I just updated Opera Mini on N95 and played around.

  Although I don’t know if there’s any new features added from Beta 4, the nice new features added for 4 (compared to 3) includes “mini” version of the entire web page, just like Nokia’s WebKit, and landscape mode.

  The page rendering speed seems to be just as fast as I expected – faster than WebKit.

  As long as I’ve been testing on the beta and now this official 4, as a web developer, I am happy with the improvement on CSS support. So many pages that looked like crap on Opera 3, are now beautifully rendered. It supports better table layout and more semantic markups (Now, I can use the strong, H1 tags etc. without making terrible mess) and CSS3 including media queries. Although limited, it supportes some JavaScript events as well.

  Also, Opera launched a developers’ community site called Dev Opera recently, to help us developing better on Opera.

  ]]> http://girliemac.com/blog/2007/11/10/opera-mini-out-of-beta/feed/ 0