19
Open Web Camp III
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!
22
Classification of Mobile Browsers
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!
| WML Browsers (WAP 1.x) | |
|---|---|
| Openwave earliy browsers 4.x | |
| Early Nokia browser | |
| Early Obigo browser | |
| CHTML Browsers (Common in Japan) | |
|---|---|
| CHTML browsers | Compact-HTML browsers |
| Compact NetFront | |
| i-mode browsers (CHTML / XHTML) | NTT Docomo |
| XHTML Browsers (WAP 2.x – XHTML-MP / WML) | |
|---|---|
| WebKit | Nokia S40 |
| Nokia S60 – earlier versions, or “Services” browser | |
| NetFront by Access | Palm Blazer 3.x - |
| Sony Ericsson WAP browser | |
| Blazer by Handspring | original browsers before accured by Palm |
| Openwave 6.x | Siemens |
| Sharp | |
| Sanyo | |
| Motorola | |
| Toshiba | |
| Blackberry by RIM | Blackberry browser- earlier version ~4.3? (*) |
| Obigo by Teleca | |
| Polaris by InfraWare | |
| Helio | |
| Motorola MIB | |
| HTML Browsers | |
|---|---|
| WebKit | Nokia S60 3rd gen., “Web” Mini-map browser |
| Apple Mobile Safari | |
| Google Android | |
| Palm WebOS | |
| Iris, by Torch Mobile (now RIM) | |
| Bitstream Bolt (Proxy) | |
| MOTOMAGX (Motorola Linux devices) | |
| Gecko | Mozilla Minimo (dead?) |
| Mozilla Fennec | |
| Maemo (aka MicroB) | |
| Skyfire | |
| Opera (proxy) | Opera Mobile |
| Opera Mini | |
| Nintendo DSi | |
| Nintendo Wii | |
| Blackberry by RIM | Blackberry browser ver.4.6+ (I am not sure about 4.4 and 4.5) |
| Microsoft Internet Explorer (was Microsoft Pocket IE) | (earlier versions do not support CSS?) |
| NetFront 3.x ? | Sony Ericsson browsers |
| Sony PlayStation / PSP browsers | |
| Palm Blazer 4.x | |
| Amazon Kindle | |
| Teleca | Teleca Browser V3.x ? (LG Voyager) |
| Danger (now by Microsoft) | Sidekick |
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!
27
QuirksMode on Mobile!
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:
23
WebKit Comparison on CSS3
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
- 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 - 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 - 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 - 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 - 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 - 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
WebKit Nightly – This is how everything should look like.
iPhone Safari
Chrome and Android Browser
Nokia “Web” and Bolt on N95 8GB
* note: Android’s actual screen res is 320×480. The screenshot is not an actual size. (Obviously this is a photograph!). Also the screenshot for iPhone is from emulator but I tested on an actual device as well.
Summary
| Properties | WebKit Ntly | iPhone | Chrome | Android | Nokia | Bolt |
|---|---|---|---|---|---|---|
| opacity | Y | Y | Y | Y | N | N |
| text-shodow | Y | Y* | N | N | N | N |
| text-overflow (ellipsis) | Y | Y | Y | Y | Y | N** |
| border-radius | Y | Y | Y | Y | N | N |
| -webkit-box-shodow | Y | Y | Y | Y | N | N** |
| -webkit-text-stroke | Y | Y | N | N | N | N |
| -webkit-text-fill | Y | Y | Y | Y | N | Y |
| -webkit-border-image | Y | Y | Y | Y | N | Y |
* 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.
18
Meet Fennec, a little brother of Firefox
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!
21
Opera Lanches Widget SDK
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
27
OMG, Hello Kitty Mobile Phone Portable Charger!!!
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
10
Sweet! Y!Go Web Made News in Japan too
自分がコアメンバーの一員として制作したプロダクトが日本のニュースでも紹介されているなんてちょっと嬉しいかも。
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:
9
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?
