Monthly Archives: 2012-2

Testing mobile sites on Nokia Series 60, Series 40 and Meego (Mobilizing websites with responsive design and HTML5 part 13)

Posted on by
2

This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post.

This blog post gives you intro how to test mobile sites in Nokia phones, with one exception. Windows Phone phones will have their own blog post following soon after this post.

1. Series 60 and Meego

N8 is the most notable Series 60 phone. Though Series 60 is at the end of its life, it still represents around 30% of world smartphones. Series 60 was the first OS to use WebKit, but unfortunately Nokia decided to develop its own Web Run-time Javascript based development environment instead of focusing delivering good HTML5 experience on the browser. Sadly, HTML5 experience is not that good, but acceptable, somewhere little bit behind Android Browser.

N9, the best phone in the world, is the first and the last Meego phone ever produced. It’s market share is unknown. Most developers prefer this phone due to its Debian/X11 based operating system. You can apt-get install software into your phone.

2. Remote Device Access

Nokia has remote service to access Meego- and Series 60 (Symbian) phones in a publicly accessible “phone cloud”. This is the recommended option for testing your mobile site on these phones unless you have a device yourself. This service seriously kicks ass and I hope other vendors would provide such free service for developers.

Remote Device Access cloud accessible phones are real devices, not emulated ones.

The service requires

  • Sign Up
  • A web browser
  • Java run-time, with Web Start bootstrap. Note that the service uses Java Web Start, not Java applet, though it does not make any difference.

Remote Device Access does not have Windows or Series 40 phones as writing of this.

When you open the service you can request ~30 minutes usage time for a device and remotely access it over Java application. The phone is fully yours, there really aren’t any limitations (beside making calls and such).

N9 running in a window from Nokia Remote Device Access service

There is some lag when using the service, but you can can withstand it to get the mobile site testing done.

3. Series 60 simulator and SDK

Series 60 simulator is based on recompilation of Series 60 components for Windows and emulating some Symbian OS features.

Some features of SDK

  • Windows only
  • Pain to set up
  • Awful to use

Skip it.

4. Series 40

Nokia Series 40 phones are wide-spread in developing world due to their cheap price, physical durability and long battery life.

Nokia low end Series 40 operating system is closed, proprietary and not very portable. There does not exist much testing tools for this OS, outside the phones themselves.

Newer Series 40 phones have a WebKit based browser, older phones some proprietary browsing engines which really can’t do even the basic CSS.

Opera Mini, based on Java ME, is popular third party aftermarket browser available for Series 40 devices and making the web surfing actually pleasurable. You can recommend using Opera Mini for your Series 40 users.

These phones are cheap, so just buy the most popular Series 40 of your target market.

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

Testing mobile sites on Firefox Mobile, Opera Mini and other aftermarket browsers (Mobilizing websites with responsive design and HTML5 part 12)

Posted on by
2

This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post.

Firefox Mobile and Opera Mini are popular after market browsers the user can install on their device. They offer additional functionality and speed over the stock browsers. You should also test your mobile sites with these browsers.

There also exist plethora of other after market browsers, especially for Android platform. I am not sure how popular they are, but they all are based on the same WebKit engine shipped with the Android platform, so they generally yield the same rendering output as the Android Browser stock browser does and separate testing is not needed.

1. Opera Mini

Opera Mini has over 100 millions users and it is the most popular mobile web browser.

Opera Mini is not a full web browser – it’s a thin client. The pages are rendered in a server-farm in a Norway where Opera comes from. The servers send a compact subset of the webpage page to the handset instead or raw HTML, CSS and Javascript. This allows even the most low powered devices render complex web pages.

The thin client strategy in web page rendering is also used by Kindle Fire.

2. Opera Mini simulator

Opera Mini Simulator is a Java applet which you can run in your web browser.

3. Opera Mini on devices

You can install Opera Mini on any device, including low-end phones and iOS devices.

Sadly, Opera Mini offers little debugging tools because the pages are rendered on remote servers. Your best shot is use Opera Mobile to render the pages, as the underlying Presto rendering engine is the same.

Opera Mini, even if being thin client, can execute Javascript on page load and click handlers on the server side, but the execution time is limited (around one second).

4. Opera Mobile (not mini)

Opera Mobile (not mini) is a full browser which you can install various handsets, including Android, Nokia and Windows Mobile.

Opera Dragonfly debugging tools support remote debugging on the mobile devices. You can use desktop debugging tools to inspect a page running in a mobile phone. A very handy feature for all mobile web developers.

5. Firefox Mobile (a.k.a. Fennec)

You can install Firefox Mobile on Android devices. There also exists community maintained port for Meego mobile platform and unofficial builds for iOS and webOS. The current builds use native Android UI and mobile optimized version of Gecko rendering engine. For more complex (web)  pages the speed of the browser beats Android Browser stock browser. Firefox Mobile is also the only currently shipped mobile browser supporting WebGL.

A Firefox Mobile PC built exists for Microsoft Windows, OSX and Linux and is suitable for testing purposes. Note that some effort might be needed to make it run,  as these builds are not officially supported.

Download instructions for PC/Mac:

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

Testing mobile sites on Android and its emulator (Mobilizing websites with responsive design and HTML5 part 11)

Posted on by
3

This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post.

This blog post deals testing mobile sites for Android devices. Android comes with a browser called Android Browser (very Germanic naming habits they have…). It is developed separate from Google Chrome which saw its first mobile release recently. Android also features many after market browsers which will be dealt separately in an upcoming blog post.

Android Browser’s WebKit based rendering engines is a moving target and support for HTML5 and CSS3 vary greatly between Android releases. For example, HTML5 <video> support is known to be broken to the point you cannot really use it. It also does other funny stuff. JIT Javascripting support was introduced in Android 2.3.

Because there are no forced firmware updates and carries and OEMs are being more evil than Google, Android version market share is very fragmented. Currently the most popular Android versions are 2.2 and 2.3. Android 4.0 (Ice Cream Sandwitch) is generally under on 1% depending on the markets.

Luckily, unlike with IE, Android mobile devices broke down quite fast and we don’t need to bear with old buggy browser releases for unforeseeable future, only for the next few years.

1. Android Emulator

Android SDK and emulator run on all Microsoft Windows, Linux and OSX, the SDK being most versatile of all mobile vendor SDKs. Android SDK is free – no registration needed.

Download Android SDK

Note: Android emulator is an actual emulator, not simulator. It emulates the full device, including executing ARM processor code on your CPU. It is 1:1 emulation. However, the price for this accuracy is that the emulation speed is sluggish as a brown bear waking up on Finnish winter morning. Testing sites on the emulator is painful – testing on the actual device with proper logging support (see below) is recommended.

Note: There is x86 Android port coming up and if someone has more information if x86 emulators already exist and if you could run Android Browser on then I’d like to know. Running native processor code should greatly speed up the emulation experience.

For Android SDK, get the Eclipse IDE plug-in. It features nice logging options and quick start for different emulator versions.

Android emulator allows you to experience with different screen sizes and DPI ratios.

2. Android Devices

Android devices are cheap and for testing you should easily get low end Android smartphone under 150 USD. SIM card is not necessary, you can test mobile sites over WLAN connection.

The device speed is an also an issue – many Android devices are equipped withß underpowered CPU and GPU. When you test for Android, get the cheapest possible device (ZTE) to make sure you’ll get the crappiest user experience out of it – this is what the most of Android users will get. Don’t get expensive phone like Samsung Galaxy or Nexus.

3. Logging and debug console output

Android emulators and devices have a logging capability called LogCat. console.log() output is directed to LogCat log stream.

4. Screenshots

Taking screenshots on the Android device itself is pain – special debugger commands are needed. Samsung has made its own screenshot shortcut for Android devices.

 

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

Testing mobile sites on iPhone, iPad and the simulator (Mobilizing websites with responsive design and HTML5 part 10)

Posted on by
1

This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post.

iPhone might not be the market leader, but its users are known to be the most picky of phone folk. Thus, always make sure your mobile site works in iPhone. Here are tips for testing your site for iPhone.

1. iPhone / iPad Simulator

iPhone/iPad/iOS emulator comes with iOS SDK. The SDK access costs 100 USD per year and the SDK only available on OSX platforms only.

You basically must have a Mac to do any  iOS development, there is no way around it. There exist “Hackintosh” attempts for running OSX in a virtual machine or non-Apple hardware, but these methods tend to be slow and cumbersome or have various software issues. Mac Mini is the cheapest Mac you can get for this work and is perfectly sufficient.

The simulator is good for testing basic mobile sites. If you are relying on animations and Javascript then you need to test on actual device(s) too, because these two are subsystems which seem to differ between the simulator and the actual device mainly because of timing and racing conditions.

To get iOS SDK access register yourself at

http://developer.apple.com

Pro tip: Alt+mouse press does the pinch and zoom gesture in the simulator, so you can test your web page zooming features. There is no fully simulated support for touch gestures, though.

iPhone Simulator in action

Though Apple assumes you run iPhone simulator through XCode you can also run it separately. Just keep the simulator icon in Dock.

2. iOS devices

If you cannot afford iPhone you can always buy iPod Touch which comes with the same Mobile Safari software as iPhone. There practically exist no differences between iPhone and iPod Touch browser experience – only the lack of GPS might cause some issue if you are developing location based services.

iPad also has the same WebKit browser engine, but it has different screen resolution and some other slightly differential behavior, so it is not suitable for your mobile site testing needs. But remember that most “mobile” tricks like CSS3 media queries or viewport <meta> tag apply on iPads too, so you might accidentally break your site on tables when building mobile version.

On the right 2nd gen iPod Touch. It is no longer valid for testing as it did not receive iOS 5 update. If you are buying an used iPod Touch for testing make sure its the latest model.

3. Console

Mobile Safari has a simple console for reading log messages on the simulator and iOS devices. You can enable it from the device Settings.

4. Easy screenshots from iOS simulator

Below is a link to a screenshot application to take cropped screenshots from iOS simulator. The screenshots in this tutorial where taken using this application.

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+