My W3C speech on Web browsing + a full explanation - 2

CONTINUED FROM HERE



Now that we’ve reviewed the browsers’ approach to rendering pages / textual page content originally designed for at least 800-wide screens on 176…640-wide screens, let’s turn our attention to other questions like (easily) controlling the browsers – for example, scrolling pages using hardware buttons.

There are several ways you can easily scroll a Web page up and down without using the touchscreen. The most common way of doing this is using the D-pad.

1. If you stick to using the D-pad, under IEM, by default, you’ll end up using link scrolling (as opposed to page scrolling). This can be a pain in the back, particularly on pages that have several links on them (you end up having to press Down several times to be able to scroll to new contents); fortunately, it can be altered on the Registry level (with a Registry hack). Most IEM plug-ins (PIEPlus, MultiIE at least) allow for doing this on the GUI level, making Registry hacks unnecessary.

Some browsers / plug-ins even allow for supplying the one-page-at-a-time scroll amount in percents. The screenshot in the slide shows exactly this with NetFront, where you can easily set this.

2. If you (also) utilize other buttons for at least page scrolling down, you can still use the D-pad for link scrolling (assuming you prefer one-handed use and don’t want to touch the screen to follow a link) by assigning the Page Down operation to any hardware button. This has thoroughly been explained in the Button Enhancer Bible.

3. Also, if you have a volume slider on your handset, you can use the jog dial / volume controller with the excellent SmartSKey utility; most of the browsers support this.

4. Under Settings / Buttons, you can also directly assign the “Page Up” and “Page Down” functionality to any hardware button (or, for that matter, even special buttons, jog dials and volume sliders with advanced, third-party button enhancer utilities like AE Button Plus.)

Note that, as far as Symbian is concerned, it Nokia S60 Web makes navigation pretty easy with its minimap accessed by pressing and holding the up/down button. So does the built-in Web browser with the latest, 4.5/4.6 version of BlackBerry. Finally, don’t forget that Opera Mini and Opera Mobile support page scrolling using the numeric buttons on phones that do have these – then, you can still use the D-pad to scroll link by link (or, if you use Mobile View [that is, One Column mode] with Opera Mini, left/right to scroll pages).



While certainly not as widely used as Flash content (any more), Java applet support is still nice to have – some (mostly internal and/or enterprise front-end) pages (still) use Java applets. For Windows Mobile, there are several solutions - Java Virtual Machines (JVM's). BB and Symbian have absolutely no applet support.

IEM depends on JVM plug-ins (as is the case with Flash plug-ins). Only two JVM’s have applet support (JVM’s with no Applet support are IBM J9 (it’s MIDlet / Personal Java only) and Mysaifu (it’s application-only)):

* Insignia Jeode; last version dates back to 2003 (came with the iPAQ 5550 – and previous iPAQ models. Most of these are locked to either the iPAQ brand or the given model). Today, as Insignia / Esmertec has stopped developing it (because they have moved to producing MIDlet managers), it can in no way be acquired legally

* CrEme: this is without doubt the best JVM to run applets. Unfortunately, it’s not meant for non-OEM customers, albeit they do have a downloadable 30-day trial on their homepage

Unfortunately, unlike with the Flash (Lite) plug-ins, Opera Mobile can’t make use of these plug-ins.

As far as the other browsers are concerned, the following two browsers have a built-in JVM:

* NetFront 3.1+: acceptable quality / compatibility (unfortunately, worse than Jeode / CrEme – as is the case with Access’ own Flash support in NetFront)

* Thunderhawk: in order to avoid producing a huge install (even older, non-fully-fledged Java runtime libraries easily add 1-2 Mbytes to the static size of the program [let alone newer JDK’s like 1.5+], which is pretty low – around 700 kbytes – with TH) and still provide full (!) JDK 1.5+ compatibility, the BitStream folks have gone for a strictly client-server solution, the server-side actively interpreting and executing the applet and just sending its GUI as a static image to the client. It, while it indeed offers full JDK1.5+ compatibility, has some cons compared to all the other solutions using local code execution: the images are low-res, slow-to-refresh and can cause excess data usage as the image of their GUI needs to be downloaded to the client every, say, second.

There’s absolutely no applet support in Opera Mini/Mobile or Minimo. In addition, currently, the WebKit-based browsers (Iris etc.) don’t support applets either - as with the Flash plug-in. Hope at least this changes in the future.



There’re some additional Web technologies that have become pretty standardized. You may have noticed Internet Explorer, Firefox or Opera don’t contain any kind of a Flash plug-in on the desktop Windows. The situation is exactly the same on mobile operating systems: few browsers or operating systems come with Flash support built-in (the two most important exception being NetFront on Windows Mobile and Symbian S60’s Nokia S60 Web with Flash Lite 2 / 3).

Flash being by far the most important additional technology requiring a plug-in (with most browsers), let’s take a deeper look at the Flash support on all these mobile operating systems. Let’s start with Windows Mobile.

IEM (all versions starting with PPC2k2) and Opera Mobile (as of version 8.65+) both have a somewhat restricted Flash 7 plug-in (and Flash Lite 2, in addition). It’s quite outdated and, of course, doesn’t support the latest technologies. It isn’t particularly efficient either; for example, its YouTube / other Flash video playback performance is plain sub-par.

NetFront has a built-in Flash engine, which is even inferior to the Flash 7 plug-in: it’s buggy, (even) less compliant and has major CPU usage bugs.

There’s absolutely no Flash support in Minimo, Opera Mini and Thunderhawk.

As far as BlackBerry, Symbian and the iPhone are concerned, they have absolutely no full Flash support. Symbian, however, supports Flash Lite 3 (depending on the model and the firmware used) – unlike Windows Mobile. Flash Lite will be discussed in the next slide(s).

(The screenshot shows the full Flash-based Bomberman, one of my favorite real-world Flash tester games, running in IEM.)



Flash Lite 3, which has recently been released for some past and recent Symbian S60 3rd edition models as firmware upgrades, has excellent support for YouTube and other, Flash-based Web video repositories. It’s, unfortunately, not available for Windows Mobile / BlackBerry / iPhone (as yet). For WM, it’s coming; for the other two mobile operating system, nothing is certain.

The two screenshots show Nokia S60 Web on the v21 firmware-based N95 playing back YouTube videos; the bottom left in Landscape (the video shrinked to the QVGA screen size); the one on the right on the original size in Portrait (hence the vastly oversized video). I haven’t provided similar screenshots on Windows Mobile because the Flash 7 plug-in on WM is very slow & inefficient and it’s almost impossible to use it to play back any Flash videos. Fortunately, a lot of alternative methods for playing back YouTube exist for all these operating systems; this is the subject of the several following slides.



As many users spend a lot of time watching YouTube (and other) Web videos, it’s definitely worth elaborating on the alternative technologies of playing them back.

First, let’s elaborate a bit on the two major formats YouTube content is delivered: the high-quality H.264 & FLV (with accordingly high data usage) returned by the firewall-friendly HTTP protocol, and the low-quality, low-(QQCIF) resolution 3GP (returned via the firewall-unfriendly RTSP protocol). We, of course, will mostly be interested in the high-quality version – unless we really need to decrease data usage and/or use a low-resolution mobile device like a MS Smartphone with a 176*220 screen.

The desktop YouTube Web interface isn’t the best for mobile usage (slow, huge – over 300 kbytes – pages; only Symbian + Flash Lite 3 is able to play back inline videos). There is a mobile version created and supported by YouTube, which

* Already supports all the functionalities of the desktop (account, upload etc)

* Is compatible with most mobile platforms having an RTSP / 3GP player like RealOne – no additional player needs to be installed

* Already has all the videos, unlike a year ago when it became public

However, it’s lower-quality 3GP only (no FLV / H.264) and requires RTSP. That is, it can be vastly inferior in most cases and, therefore, should be avoided.

The screenshot shows the results of a search using the native mobile YouTube interface (which, again, should be avoided, unless you absolutely don’t need the vastly enhanced video and audio quality of the FLV / H.264 videos).



Let’s continue with alternate YouTube technologies – ones that don’t depend on the Flash plug-in (because of the slow and flaky Flash plug-in on Windows Mobile) or are usable on other platforms like the BlackBerry. Fortunately, there are several of them; one of the most important is vTap.

vTap has native clients for all mobile platforms. From the Windows Mobile one (see the upper right screenshot), you can even initiate video playback (this client is highly recommended and useful because it’s capable of searching on not only YouTube but also other video sites), while you can’t do the same from the BlackBerry one.

This also means you’ll need to turn to other solutions to stream YouTube videos to your BlackBerry handheld; an example of these solutions is vTap’s Web interface (not the standalone client) depicted in the three screenshots at the bottom, showing searching for clips, opening them as a stream and, finally, the media player rendering it. (Note that the rendered contents is invisible in the screenshot on the bottom right. This isn’t a bug.)



Finally, one of the several alternative YouTube playback solutions is YTPocket, which depends on the external TCPMP FLV playback support (under Windows Mobile). The two screenshots show the results of a search and, then, initiating a download (and the consequent invocation of TCPMP for viewing).



Let’s move on to another, completely different, but, for users of non-unlimited data plans, very important question: reducing data usage. This, incidentally, can prove very helpful for users over unlimited, but very slow (for example, GPRS, like Vodafone’s non-3G dial-up) connections.

There are several ways of optimizations and major data usage saving; this slide discusses the way you can drastically lower the data usage by employing server-side (gzip) encoding, which is supported by all mobile browsers (for example, on WM, starting with the PPC2k PIE; that is, it has had support for eigth years).

As a rule of thumb, if you can, you should check the Accept-Encoding header (telling you whether the client is able to process gzip-compressed responses) along with the User-Agent HTTP header to find out whether it’s a mobile client (should you only want to return GZIP’ed contents for mobile users if you find GZIP compression is using too much CPU on your Web server). If you go this way, keep in mind that several mobile users “spoof” their User-Agent headers so that servers never return mobile-specific contents to them. With some of these clients (most importantly, IEM), you’ll want to look for specific extended (X-) HTTP headers to be able to make a distinction between desktop and mobile clients - that is, correctly identify mobile ones.

Note that several content manager and forum engines (e.g., vBulletin) support GZIP’ing “out of the box” if it identifies the client as a mobile device.



Unfortunately, if you are just a user and can’t ask a webmaster to return compressed (GZIP’ed) contents upon receiving requests from mobile clients but still want to (vastly) decrease your data usage, you’ll need to do some client-side work. There are two main categories of doing this.

The first group, largely consisting of the free Toonel and the commercial (between 30…50 US$ - cheaper for recurring customers) OnSpeed, runs a “proxy” on your Java-capable and/or Windows Mobile-based mobile device and configures (or, forces you to manually configure) your browser to access the Web through it. The proxy takes care of compression by being connected to another, invisible server. The advantage of this solution, compared to the next, is mainly that you 1. don’t need to pay attention to visiting a mediator Web page to do the conversion for you and 2. you will always receive full Web pages, not dumbed-down ones without, for example, scripting.

The second group consists of Web services like Skweezer, MobileLeap, Google Mobile etc. They are easier to initially set up than the apps in the first group (absolutely no need to install third-party apps on your mobile); however, they’re a bit harder to use and, as has already been pointed out, they can royally mess up Web pages. Most IEM plug-ins like MultiIE, PIEPlus and Webby automatically support the online services; the first two (Toonel / OnSpeed) can be used with all Windows Mobile Web browsers allowing for proxy usage (that is, everything except Opera Mini and TH – not a problem though as they’re content-stripped / compressed already).



Let’s turn to an entirely different subject: compliance with different (important) Web standards. Let’s start with AJAX, which is getting more and more ubiquitous. Opera Mobile and Minimo have the best support for it; the two screenshots show these (OM on the left, Minimo on the right) rendering the entirely AJAX-based Google Image.

Unfortunately, IEM is (still) pretty weak when it comes to AJAX support, even as of WM 6.1. So is NetFront as of the currently commercially available 3.3; fortunately, 3.4+ is already much better. (But, again, currently, there’re only restricted Technical Previews of 3.5 you may not want to use because of the restrictions). Thunderhawk and Opera Mini both have rather poor support.

JavaScript support is pretty similar to this. The bad JS support of IEM results in, for example, Yahoo Mail buttons’ not working – a major problem with many users. The same stands for for example address autocompletion in Google Mail; currently, only Opera Mobile and Minimo support it (they have the best JavaScript compliance).



Still on the subject of Web standards compliance, let’s take a look at the compatibility with CSS. In this area, Opera Mobile is without doubt the best as of version 9.xx. Version 8.65 (the one officially and commercially available; screenshot on the left) is a bit worse in this respect. Minimo is the second (screenshot on the right). The slide also shows how the desktop (9.x-series) Opera renders the test page (the only desktop browser to render it without any glitches – see the referenced article for more screenshots of other desktop browsers if interested).



Let’s go on with evaluating the CSS2 (Acid 2) test results. This slide shows how NetFront 3.3 and IEM render the test. As can clearly be seen, they (particularly IEM) have nothing to write home about.



Still on the subject of Web standards compliance, let’s see the results of W3C’s brand new “Web Compatibility Test for Mobile Browsers” suite. First, let’s see how the Windows Mobile-based Web browsers render this suite.

This slide shows IEM in WM6.1 (left), the 5-year-old WM2003 (middle) and 7-year-old PPC2002 (right). As can clearly be seen, the Web standards compliance of IEM is only a tad better than that of its very old PPC2002 ancestor.



Let’s continue with the same W3C test suite, looking at the Opera Mobile and Mini results. The left screenshot shows Opera Mobile 9.33, which delivers almost flawless results (showing it’s indeed based on the new, 9.x-series kernel), as opposed to version 8.65 (2nd shot). Opera Mini 4.1 (on the right) delivers acceptable results – still much better than, say, IEM (see previous slide).



Let’s take a look at the third (and last) Windows Mobile W3C test slide showing the current Techincal Preview of NetFront 3.5 (left); the WebKit-based Iris browser (middle) and Minimo 0.20 (right). As can clearly be seen, none of them really excel – Opera Mobile 9.x is just far better than any of them.



Now, having finished with Windows Mobile, take a look at other mobile platforms. In the lower row, you can see the WebKit-based Symbian Nokia S60 Web (left), iPhone’s Safari (middle). The built-in browser coming with BlackBerry 4.2 (right) follows; the latest (still beta), 4.5 BlackBerry version (topmost) shows the new BB operating system indeed delivers a bit better results than the previous one – but still much-much inferior to even Opera Mini (which, incidentally, runs flawlessly on the BlackBerry).



Finally, in order to give you a complete picture of what you can expect of desktop browsers, an overview of their rendering the same test. (On the bottom: Firefox 3 beta5 (left); Internet Explorer 8 beta (middle); IE7 (right); on the top: Opera 9.5.). As can clearly be seen, Opera is by far the best and even the latest version of IE8 is far-far inferior than even the latest 3-series Firefox.



Now, let’s discuss the techniques needed to avoid certain HTML / page layout constructs that simply can’t be rendered by (some) mobile Web browsers. The most important stumbling block is that of frames: both IFrames and standard ones. First, let’s take a look at the latter.

With IEM (as opposed to most other major browsers) the number of (standard, not i-) frames is restricted (10/12 at most for pre-WM6/WM6+, respectively). One of the most widely known example of the affected pages is freemail.hu. The pictures show IEM (on the left) was simply unable to display the page in its entirety, unlike Opera Mobile (right), which has no frame limitations. Make sure you avoid an excess number of frames if you want to make your portal accessible to even IEM clients and you don’t have a specific mobile version!



Now, let’s take a look at Inline Frames (IFrame). They are in no way supported by pre-WM6 IEM and Thunderhawk. The former is shown in the screenshot on the left, showing the pre-WM6 IEM’s inability to render the contents of the test page. NetFront and Opera Mobile, on the other hand, have no problems rendering this area (neither has Opera Mini).

The lack of IFrame support also means no Gmail / Yahoo Mail dynamic address completion (which works in Opera Mobile and Minimo) is possible because they’re entirely based on IFrames.



This slide shows IEM coming with WM6 has indeed added support for Iframes and has raised the number of standard displayable frames to 12.



This slide explains some common cookie handling-related problems with NetFront and Thunderhawk. The text speaks for itself; no need to explain it further (rather than following the links to my original, lengthy articles and elaboration).



The next few pages elaborate on the language & encoding problems and internationalization (on Windows Mobile), which will be pretty important for you if you display / host / try to access pages not (only) using non-Western languages – or, for that matter, even special punctuation like “.

First, NetFront handles the HTTP character encoding header (Content-Type) vs. meta tag entirely differently from the other browsers. It is, unfortunately, buggy when 8859-1 is used along with special 8859-1 punctuation – for example, if you write your posts in Word and don’t disable its automatic character substitution enabled (and active) by default.

Opera Mobile is pretty problematic at POSTing (NOT displaying /rendering!! Only when user interaction / form-based posting takes place) some contents; for example, special 8859-1 punctuation and everything different from 8859-1.

To easily fix these problems, if you’re a webmaster and know your pages do contain some special punctuation coming from, say, Word and want it to be rendered by NetFront or editable and (re)POSTable by Opera Mobile correctly, do convert dynamically (in the runtime) all these characters to their 8859-1, “plain” equivalents.

If an Opera Mobile client edits a non-8859-1 document (like an article or a forum post), convert all special Unicode characters (like ő and ű) to HTML char entity codes (ő and ű with ő and ű, respectively). These entity codes are correctly POSTed back by the browser.



As has already been mentioned, Thunderhawk uses its own, Western-only character set. It contains absolutely no other characters. Even when the operating system does support the given character set (and is able to render all the characters well), Thunderhawk won’t and just display a hyphen as a placeholder upon encountering them (the text in the screenshot shows some of these). Therefore, in order to correctly display non-Western, but easily 8859-1-mappable languages (typically, Eastern-European languages not using Cyrillic characters belong to this category), as a webmaster, you may want to check for ThunderHawk User-Agents and substitute the characters accordingly when encountering a TH client.



Some Web pages (and Web frameworks / content handlers) allow for easy internationalization – that is, dynamically returning a different-language page upon encountering a special HTTP request header. This slide elaborates on this and lists the two browsers (PIE and Minimo) that do let for setting this particular header. Unfortunately, the other browsers need an external HTTP request header rewriter proxy running anywhere (including your own PDA) to gain access to this functionality.

The two screenshots show IEM rendering b2evo’s login screen in English and Finnish (with automatical swithcing between them; no need for user interactions / language selection via links on the page), depending on the preferred language flag sent by the client.



Unfortunately, several mobile browsers don’t really shine at Web standards compliance either when it comes to downloading and saving binary files to the local file system on these handhelds.

The problems most users face:

* Content-Type: text/plain response problems with binary content: IEM & NF don’t try to decide whether the body is binary and blindly render it – as opposed to IE on desktop Windows. No such problems exist with other Windows Mobile browsers. That is, make sure Content-Type is correctly set on the server to allow for binary downloading to IEM & NF! Alternatively, if you are just a user and have no effect on the webmaster’s correctly setting this header, either use an IEM plug-in allowing for saving link targets, use a standalone HTTP downloader tool like Adisasta WinMobile Download Accelerator 2+ or HandyGet - or switch entirely to a different browser.

* NF and Opera Mobile send out download requests twice, while other browsers – including desktop ones – only do this once. This is why for example downloading from RapidShare doesn’t work in these browsers. If you’re a webmaster, the solution is simple: never reject double download requests. If you’re a mobile client only, switch to IEM – at least for the time of download.

* Referer-related problems: before WM5, PIE (and Thunderhawk even now) don’t pass the Referer header. Therefore, if you’re a webamin, don’t blindly trust the Referer header always being sent in order to deny out-site download requests. Just make a User-Agent test to check whether download requests not containing a Referer header originate from PIE and TH. If they do, you can safely let them download.

Note that you can greatly speed up your Web (and FTP) downloads by using multithreaded downloader clients (like FlashGet on desktop). Currently, two of them are worth mentioning:

* The just-released Adisasta WinMobile Download Accelerator 2.0 (do NOT use older versions because they’re slow!)

* HandyGet 1.6



The final slide discusses the opposite of the previous one: uploading files to Web. File upload is supported by all browsers (except for TH); IEM starting with WM5. As Opera Mini 4.1+ also supports it, you can even upload from the otherwise not very capable BlackBerry platform.

If you have a browser that isn’t upload-capable, then, switch to another browser that can. And, if you’re a webmaster hosting a page with file upload capabilities (like all forum engines, social network pages etc. allowing for attachment / image upload), you will need to ask your mobile clients to do the same. Alternatively, if you’re absolutely sure some of your clients won’t want to touch other browsers, you may also want to provide FTP upload support or, if you only look for text input, a HTML textarea to paste their text to.

The left screenshot shows PIE under WM2003SE. As can clearly be seen, there’s no “Browse” button (and file path field) in it – while the WM5+ screenshot (on the right) already displays (and lets for using) it, showing it (still) didn't have upload support.



That's all, folks - hope you liked this all :) And, yes, feel free to ask questions even here, even now.

Cross-posted to (might be worth checking out for additional info / discussions!): PPCT, AximSite, XDA-Developers, BrightHand, HowardForums, MoDaCo, Opera Mini forums, Symbian-freak.

As far as i know, desktop

As far as i know, desktop browsers support what so-called hosts file to make the connection faster. Does this also supported by mobile browsers?

Syndicate content