Mobile browser testing

From MediaWiki.org

Jump to: navigation, search

For issues previously identified and resolved, please see the archives.

It would be nice if we could test MediaWiki's behavior more regularly in browsers for mobile and handheld devices. I'm collecting resources I come across here:

[edit] Development and testing claims

Device Browser Owner
(simulated) Opera Mini brion
iPhone Mobile Safari brion
iPhone Mobile Safari Lisa Ridley
PalmTX Palm Blazer v4.3 pfctdayelise
Palm Treo 700p Blazer Aerik
HTC Hero Android Browser, Steel Ge0rgecz

Contents


[edit] Opera Mini

Opera Mini is a client-server variant of Opera, whose client side can run on many Java-enabled mobile phones and other handheld devices. There is a simulator which runs the client side as a Java applet in a desktop web browser. Nice! VERY convenient and easy to test.

Additionally, regular Opera can be switched into a "small-screen mode" which is similar to the rendering of Opera Mini.

[edit] Issues

  • Anchor links seem to jump to the top of the page, making the 'navigation' and 'search' accessibility links and the table of contents kind of unproductive
  • Infoboxes seem to take absurdly large amounts of screen real estate before you get to content in many articles :P
  • Css and Js are not read, which render a very different presentation that on a classical browser.

As of January 2008, the version in the simulator renders pages very much like they appear on a "grown-up" browser, requiring you to zoom in to read anything.

Looks and behaves a *lot* like Mobile Safari, but without a touchscreen that seems awkward to me. :)

As with the iPhone, the much improved HTML and CSS etc support is verrrrry welcome, but to make the site more easily usable we should still look into a good handheld stylesheet.

[edit] Windows Mobile

Windows Mobile / PocketPC / Windows CE / whatever it's called this week powers a lot of PDAs and fancier mobile phones, and comes with some variant of Internet Explorer.

Microsoft supplies an emulator which runs on Windows PCs and includes OS images for Windows Mobile including IE. Unfortunately I haven't had any luck getting networking up, so haven't managed to connect to anything to see how it's going. I'm not sure if this is because of some quirk of Parallels' network bridging, so it might be easier on a real Windows PC.

[edit] PlayStation Portable

The webbrowser of the PlayStation Portable is a NetFront browser. It doesn't render MediaWiki correctly, especially in Smart-Fit and Just-Fit modes.

What could help is supplementing MediaWiki by using useragent sniffing to adapt the layout (by CSS) to a resolution of 480x272 px. That should work to make it doable to use MediaWiki on a PlayStation Portable.


[edit] iPhone

See iPhone issues for more information.

iPhone and iPod Touch ship with a Safari variant, running on the WebKit engine. It's pretty complete, with very good HTML, CSS, and JS support.

A general impression of rendering can be tested reasonably well just by pulling up Safari 3 on a Mac or Windows box (or even a current WebKit-based browser on Linux, I imagine), however the zoom behavior and usability of forms is hard to test without an actual device handy.

[edit] Issues

General layout and sizing are not very convenient with the stock MonoBook skin, but MediaWiki is fully functional.

Editing a page or section that spans more than a few lines is impossible due to the lack of a scrollbar within the edit form textbox (a limitation of the Safari Mobile browser due to the inherent design feature "pinch in" and "pinch out", and the "flick to scroll" feature of the browser display screen).

Some custom styles and a more linear layout would be beneficial.

Have added support for home screen bookmarking icons.


[edit] Android

Smart phones running on Android mobile platform ships with Browser running on the WebKit engine. Its compatible with Google Chrome for Windows or Linux. You can use emulator.exe (from Android SDK) for testing Browser behaviour without having your own Android phone.

How to install and run Android emulator and integrated web browser:

  1. download lastest Android SDK (zip package here)
  2. unzip into (c:\android for example)
  3. use Start->Run.., and type cmd (command line) in
  4. use commands c: and cd "c:\android\tools\" to set active folder
  5. create android virtual device (AVD) using command: android create avd -n cupcake -t 2
  6. launch emulated cupcake device: emulator -avd cupcake
  7. ... whenever you need to start that same emulator again, just repeat steps 3,4 and 6.

[edit] All mobile device browsers

  • ergonomy not fit for small-sized screens. Links that we would need to reach easily are at the bottom (harder to get to since the page is longer on a smaller screen), like the search form.
  • at the bottom of the page, information about mediawiki, copyright etc. should be put on a separate page and replaced with a link so as to not bother user with 2-3 screens of footnotes.
  • Inline .css formatting (which occurs when formatting instructions are imbedded in templates and page content rather than pulling from style sheets) is frequently geared toward the display of information in a full-sized browser. While it is possible to implement utilization of external stylesheets based on the device accessing the site, it is not possible at this time to conditionally utilized inline style sheets in templates and content.
  • The display of tables (content formatted using wikitable markup or html <table>, <thead>, <th>, <tr> and <td> tags) can be problematic for tables that extend beyond the display width of portable devices; some of these devices will truncate the table at the width of the display and do not provide a mechanism for scrolling to the right to see the remaining content.