Building simple cHTML sites for the less-capable Phone/PDA/textmode browsers seems to be my passion lately, and so I thought I share some statistics with you. As you might know, the new OSNews “mobile” pages went live last weekend and we got some preliminary results: Around 0.85% of all OSNews impressions browse with at least one of the supported mobile devices (about 2,000 daily page views out of an overall average of 170,000). About 1,100 of these 2,000 page views are unique hits.
The most used browsers are the text mode Lynx and Links, followed by AvantGo. These three browsers account for more than 65% of the browsers using the mobile site.
The rest are usually PocketPCs or Smartphones, a Siemens M55/S55 phone user (you know who you are 🙂 who seems to browse a lot with his UP.Browser, w3m, ELinks, JPluck, Plucker, PalmOS online browsers, Opera on Symbian & on Zaurus (please turn off the “small rendering” Opera feature when browsing OSNews.com, renders better without it), a few Danger HipTop/Sidekicks, some BlackBerries and many more different phone/embedded/TV browsers. (Note to new users: WAP-only browsers should use our WAP site instead of our c/HTML one. Also, J-PHONE and non-Opera SonyEricsson browsers will be redirected to another special page which is even lighter than our normal mobile page).
The latest gem found in our stats was this one: tSi Mozilla/5_EXPERIMENTAL (AmigaOS 4.1 ALPHA; PowerPC).
I would like to urge webmasters on other sites to start building a simple version of their site (easy to render, no complex tables, no nested tables, no frames, your best bet is cHTML for best compatibility with such browsers). In Japan many people are using their phones as the only way to get information, while more capable PDA browsers are now around and people are buying PDAs with Wi-Fi built-in, so it becomes even more important to be able to serve pages that are “compatible” and render well on small screens (120×100 is OSNews mobile site’s minimum requirements).
Usually the way to test these browsers is via emulators (and Linux/Unix for the textmode browsers), which in most cases are available for a free download. I have compiled a comprehensive list of mobile/textmode/embedded user agents not found elsewhere in one place (there are many user agent lists online (including browscap.ini in use with get_browser() PHP function) but none focusing directly on mobile/text browsers — this one is good but still incomplete for example) and I am willing to share our PHP mobile detection code with any webmaster truly interested in adding a mobile version to their site (just send me an email).
POST/PHP-Nuke webmasters can activate their AvantGo module to automatically create easy-to-render pages, however Nukes don’t automatically redirect the user to the right page based on the user-agent, neither they recognize any other mobile browser except AvantGo itself.
The site looks good on my SE P900 phone, using Opera 6.3 for Symbian OS
Thank you Chris, BTW, I just updated the article to add this: “please turn off the ‘small rendering’ Opera feature when browsing OSNews.com, renders better without it“.
Eugenia, it seems you have worked you magic again. I don’t know what they pay you but it can’t be enough.
Eugenia I shudder to think of what would happen if you started your own business or started developing on your own.
You’re a powerhouse that has transformed this site to one I prefer to all of Slashdot’s efforts. I hope you continue to find outlets for your seemingly boundless energy. I’d try to hire you if I ran a company
Thank you Cal.
>I don’t know what they pay you
“Kinder” chocolates! What more a woman really needs?
???
Click its link in the story to learn. Why ask if there is a link to its spec page?
In short, cHTML is a subset of HTML 3.x. Only important/much-used tags are included, just to make the life of most phone browsers (usually running on about 12-16Mhz CPUs and 192-256 KB RAM) easier.
Howdy
Have you played with XHTML yet Eugenia ? IIRC I think alot of the newer gateways transform it on-the-fly to what ever their device uses … I`m probably wrong/dreaming but might be worth a look … also alot of the new nokias seem to handle XHTML directly, I wish I had the time to look into this but alas uni work never seems to end *sigh*.
Great job with the entire site by the way, easily one of my favorite sights!
Unfortunately, not all browsers out there support XHTML (including most phone/PDA browsers). Especially Amiga, RISC OS, BeOS (Net+) browsers (which we have direct interest in having them well-supported). It is the nature of OSNews to render well on most weird/old systems, because we report on these systems. I still remember when we upgraded our PHP and the nl2br() function that I use in our comment’s section changed and instead of producing <BR> it was now producing < br / > and that broke a handful of these browsers (Net+ too which we have quite a few hits with) making the comment’s section looking really ugly!
Last week I added support for 3 AtariST browsers for example, and I can tell you, these browsers don’t know what XHTML means. cHTML on the other hand, is a much more older/defined subset of HTML and for the time being is the only realistic option to have a uniformed rendering result by the large majority.
i like the format, i am on my p800 now! could you do the same with newmobilecomputing?
I might do something like it in the future for NMC (in fact it makes a lot of sense for NMC to have a better mobile format – currently only text mode and AvantGo have support on NMC, and only for the frontpage). Not sure yet though, it took me about 3 days to convert osnews.com, so it ain’t so time consuming I guess.
I’m guessing by the look of the site, but isn’t NMC using the same php script to render as OSnews? If so shouldn’t it be more or less easy transition?
NMC uses an older version of osnews’ code, more than a year-old code. A few things are done differently on that version.
In Pocket IE, I’m getting a wierd result with the back button, sometimes. When useing the back button while viewing a article’s comment page I am often returned to a old version of OSnews. It is a very old version in fact, pre new mobile page. When I type in the URL or use my Favorites I get a fresh version every time though.
This is a known cache bug on IE, it has to do with its corrupted cache (bug happens on the desktop version of IE as well). Please do the following for IE:
1. Completely flush off your cache (start clean).
2. Make sure the “Every Visit to the Page” is set.
neato…a ppc article the first time i browsed this site with anew ipaq!
Finally, a site that renders well under links/lynx! For those of use that sometimes use console mode only, this is a god send!
Sorry, tired. I meant “For those of us that sometimes use console mode only” 🙂
Here’s a place where to find cHTML: http://www.w3.org/TR/1998/NOTE-compactHTML-19980209/
If I remember correctly it originated from Access for Docomo’s iMode browsers, but I may be wrong here.
,,tSi Mozilla/5_EXPERIMENTAL (AmigaOS 4.1 ALPHA; PowerPC)” — looks like a hoax to me 🙂
User agent I use : SonyEricssonT610/R101 Profile/MIDP-1.0 Configuration/CLDC-1.0
The thing support WAP 2.0, but OSNEWS serves some invalid HTML (uppercase isn’t valid XHTML, and hence cannot be valid WAP 2.0). There’s no particular reason to use uppercase HTML tags, accept to reduce compatibility with touchy browsers
Betcour, I have the SonyEricsson emulators here. They don’t work in general. Terrible quality of both the emulation software and the software they try to emulate. Seeing them having such quality, I don’t think I will ever purchase a SE phone. As I said in the article, if your browser is mostly made for WAP (as in the SE case), use our WAP site, not our cHTML one. The only page that I successfully loaded up with the SonyEricsson browsers (God make them c/HTML browsers), is this one: http://www.osnews.com/jphone.php
You may use that page instead the normal osnews.com pages to get your headlines.
BTW, I just managed to get he BlackBerry simulator up, for latest model, 7510:
http://www.osnews.com/img/6223/blackberry-7510.png
The SE browser crashes in our story tables, the header renders ok (http://www.osnews.com/header-text.php) so it is not a matter of uppercase tags (our header file has uppercase tags as well), it is just that the SE browser is mostly WAP and it can’t handle multiple tables or something (not nested, but still a complex table layout for such a WAP-only browser). Just use the URL I gave you, or only use our WAP site for the SE browser.
Looks pretty nice on the browser of my Nokia 3650!! I just couldn’t figure out which button at the bottom of an entry I must click to “read more”… There is one for comments, print and “more of this subject” or something…
If a news story has a “read more” part, it will display as text “Read more” just after the actual teaser text of the story in the frontpage (like it shows here: http://img.osnews.com/img/6191/mobile3.png). If a story doesn’t have a “read more” part, it will close the white background cell and it will just display the 4 icons you mentioned. The four icons are:
1. Comments
2. Email to a Friend
3. Printer Friendly
4. Related stories
BTW Mixali, what browser did you use with this SymbianOS phone? Opera’s or Nokia’s?
Mike, don’t answer that question, I know the answer: You used an Opera browser. I just checked the last minute’s stats.
Betcour, I managed to load with my SE simulator a whole page!
It was the above news story about GTK+. Apparently the HTML part of the SE browser is just extremely buggy. I can get a shot of it if you want, but it seems its major problem is that it has size limitations for pages (anything about 6-7 KB seems to completely clong the browser). Our wap site is your best bet I am afraid, except if you decide to buy a new phone that has a more capable browser.
Thanks for the quick reply (and I’m surprised you got my actual name :p)
I’m using Nokia’s browser. Kinda slow but otherwise just fine. AFAIK Opera for Series 60 doesn’t work with Wap over GPRS (needs Internet Access Point and I’m a pre-paid subscriber, so I don’t get one…)
Are you sure your phone doesn’t come with Opera? You see, my stats are saying that you are actually using this:
Mozilla/4.1 (compatible; MSIE 5.0; Symbian OS; Nokia 3650;424) Opera 6.10 [it]
I don’t think Nokia’s browser uses Opera’s user agent, so you must be having Opera installed there.
>I’m surprised you got my actual name
Apo pou nomizeis oti eimai kai ego?
Actually my UA is Nokia3650/1.0 (4.13) SymbianOS/6.1 Series60/1.2 Profile/MIDP-1.0 Configuration/CLDC-1.0. I’m pretty sure I don’t use Opera on my phone :p
Usually I first check the osnews wap site to check the headlines, and if I see something I want to read in detail I check the full mobile site.
>Apo pou nomizeis oti eimai kai ego?
Ela, patrida!
Thanks Eugiena, I guess I’ll stick to plain WAP 1.0 then.
That being said, I still think using uppercase HTML tags or CSS keywords is a bad idea. XHTML specifically says that they have to be lowercase (the W3C compliance test will fail if they are uppercase), and since older HTML specs accept both you have nothing to loose going lowercase. And this is also mendatory for WAP 2.0 since WAP 2.0 is a subset of XHTML.
>Thanks Eugenia, I guess I’ll stick to plain WAP 1.0 then.
Betcour, please have a look again. I made a change specifically to SonyEricsson browsers. As long the SE browser doesn’t use opera, you will be automatically redirected here instead: http://www.osnews.com/jphone.php and from there you will be able to explore other stories if you wish. But at least you won’t be getting any crashes right in the front page.
Just tried and indeed it works fine, thanks very much
Well Eugenia, the site seems to work just fine on my Siemens ST55, which uses the OpenWave browser.
Eugenia,
I just updated the article to add this: “please turn off the ‘small rendering’ Opera feature when browsing OSNews.com, renders better without it”.
You can actually do this yourself in the mark-up. If you add media=”handheld” SSR will automatically be disabled.
See these links for more information about developing for the mobile versions of Opera:
http://www.opera.com/products/smartphone/dev/
http://my.opera.com/community/dev/device/
And for a demo, use Opera for Win/Lin and go to http://my.opera.com/. Then hit SHIFT-F11. You will see the same site styled with the handheld stylesheet.
Yes, I got the tip about “media=handheld” 30 mins after I posted that. Problem was, adding the “media=handheld” to the CSS line, breaks all other mobile browsers that kinda support CSS. NetFront (which is the most used online browser on PalmOS and it has a version for PocketPC as well) will *completely* ignore all CSS after adding that line about handheld there. Spoofing Mozilla 1.6 will also do the same.
So, I had to do some more coding and isolate the Opera strings. If a string is mobile browser and also is an Opera string, only then I include the media=”handheld” in the CSS line, otherwise I leave it as before.
Dag, do you have a way to get for me a screenshot of how Opera renders osnews on your emulators/devices? Thanks!
That’s too bad. It’s all based on standard CSS media types so the other browsers should not screw things up like that.
Here is a screenshot of what your site looks like with Opera on a P900: http://people.opera.com/don/misc/osnews_p900.png (pretty nice 🙂
As for emulator, we simply use Opera for Windows or Linux for our development. While there are some differences between v7 on desktop and the Symbian versions (currently Opera 6), it still works pretty well. Just hit SHIFT-F11 to enter “Handheld” mode.
The WAP version works nicely on my phone (Motorola V400). It would be nice if there were links to the articles, or full article description. Sometimes the headers do not convey the full news item.
Eugenia,
Did you try something like:
<link media=”handheld, screen” …>
alternatively:
<link …>
<link media=”handheld>
That might also solve the problems with the other browsers.
Just tried it with my Dreamcast, and I only get the normal Page.
Your ua.php says:
Mozilla/3.0 (DreamKey/2.0)
http://temp.funtech.org/DSCN0379.JPG
That’s because I have another user agent for another Dreamcast browser. I will now add your user agent so from now on you will get the right one. Please retry! It would be great if you could upload one more shot with the now fixed page! Thanks!
>Did you try something like:
><link media=”handheld, screen” …>
I have inline CSS, I don’t call an external CSS script for better compatibility. Thanks for the shot!
looks realy good
http://temp.funtech.org/DSCN0380.JPG
You could switch out of inline CSS, and put it in an external file. Then, setup the file to be multiple files (true cascading). Keep the first file simple: fonts, colors. Add more depth in the next file: layout, etc.
This would work because many browsers that do not support CSS well will not use the second file. Keeping it simpler for them. They will not choke on unknown or poorly implemented CSS. At the same time, they will be able to degrade nicely and still display all the content.
There might be a tutorial on http://www.cssvault.com about layering the css properly.
That´s me Eugenia, if you have stats from pre-mobile times you might notice that I am browsing osnews since October thru html2wap proxy
hehe, indeed. I was checking the stats, and I see you browsing *a lot* with your phone.
Your agent seem to be either:
SIE-M55/10 UP.Browser/6.1.0.5.c.6 (GUI) MMP/1.0
or
SIE-M55/10 UP.Browser/6.1.0.5.c.6 (GUI) MMP/1.0 UP.Link/1.1 (Google WAP Proxy/1.0)
My husband was happy as well (he works developing the browser you are using 🙂
Well, OpenWave is a good browser, but mine can`t handle more than 6-7 KBs of HTML I think. I can only open the start page of the jphone OSNews variant, and i don`t have enough RAM to open the stories. That`s strange, because M55 have 512 KB of RAM?!. That`s why i am using osnews thru Google`s html2wml proxy, which strips down everything to pure text. It`s perfectly readable, but i can`t post comments (<input>s are stripped as well). I am dreaming about a fully-functional WAP page, but I guess WAP will die, as gopher did . Nevermind, keep the good work GPRS traffic is cheap here (Austria).
That’s about right. Those systems aren’t very dynamic in terms of memory (not dynamic at all, actually). On the M55 the browser can’t ever access all 512KB of memory, it is restricted to a much smaller part of the memory (I know all too well, I’m the guy who maintains the memory managers for those browsers).
If you get a chance, maybe you can have a look at Sharp’s GX10-20-30 series. The GX10 has almost the same browser as the M55, but with much more RAM. The GX20 and 30 have a more recent version of the browser, with quite a few improvements.
Well, at least M55 has a real filesystem. I am able to mount it under Linux (siemensfs kernel patch needed). There is a firmware update for my phone, i am wondering if they upgraded the browser as well…