Tag Archives: ios

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.

Image

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.

Image

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 Image Follow me on Twitter Image Follow me on Facebook Image 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.

Image

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.

ImageOn 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 Image Follow me on Twitter Image Follow me on Facebook Image Follow me Google+

Mobile site testing overview (Mobilizing websites with responsive design and HTML5 part 9)

Posted on by
4

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

After your mobile site starts look complete in a development browser (e.g. desktop Firefox+Firebug combo) then it is time to begin testing it in actual mobile browsers. This blog post gives you introduction and some general tips for mobile browser testing. Each platform (iOS, Android, others) are dealt separately in the future blog posts, so don’t forget to follow.

1. The micro battle field of browser vendors

Like with desktop where you test your site across browsers you need to test the mobile site in different mobile browsers. The testing is important because mobile browsers use different browser engines and different engine versions. Thus, sometimes output differences are expected and you need to iron out the ugliest issues.

The major mobile browser engines are WebKit on Safari/Android, Opera (Presto) and Firefox (Gecko). You luckily could say that mobile Internet Explorer’s market share is so minor that you might want to bother for it currently. Microsoft is constantly improving its mobile browser, but currently it is not in a state to match the competition in feature wise and we’ll look forward to see what Windows Phone 8 will give us.

There exist two popular after market browser (Opera Mini, Firefox Mobile) with their own engines. Opera Mini is a thin client browser and special considerations with e.g. Javascript interaction must be followed to make the sites behave well. Firefox Mobile can be installed on Android devices. There exist several “browsers” in app stores for iOS and Android, but they are simply wrappers around the native operating system WebKit component and do not contribute significantly to HTML rendering bits. Opera Mini, being the most popular mobile browser in the world by “shipped devices” count is preferred in developing countries due to capability to run low end phones, or anything having CPU and battery power. Don’t forget to test on these also.

The good news are that if the mobile browser support CSS3 media queries, as used in the mobilization strategy of this tutorial, then they are likely to have very good support for HTML5, CSS3 and other modern goodies. The fixing and workaround work found during the testing is usually less than what it takes to make the site run older Internet Explorer.

If you need to define compatibility list of browsers e.g. for an offer I recommend use this jQuery Mobile mobile browser grading table. It gives you an overview how “good” mobile browsers are.

2. Accessing different mobile browsers on devices and simulators

If you aren’t a mobile developer you might not have access to a real test device repository. Luckily, the simulators by the mobile vendor themselves are pretty good nowadays and you don’t need to be physically able to access the every device out there.

It is desirable to minimally have one iOS and/or one Android device for testing. If you are targeting popular iOS devices (iPhone, iPad) it’s pretty hard to get around the fact that you need to get a Mac. Apple tools are only for Apple computers, like Microsoft mobile tools are only for the latest Windows 7.

There exist generic remote testing services for mobile phones, but they often are costly and not a substitute for the real thing.

3. No shortcuts to testing happiness

Warning: Do not use browser+<iframe>-based “mobile simulator” or whatever crap web search throws on you.

These so called simulators are usually pitiful attempts to grab web traffic for ad money without actually adding any value to testing. Running <iframe> based simulator in your web browser is simply the same as opening the page in your desktop web browser directly, with the window size shrink.

Shortening URLs

Typing on the mobile devices is cumbersome. Use URL shortening services like bit.ly to shorten your test page URLs, so you can type them in faster on touch screen or keypad.

4. Desktop web browser testing

If you need to alter HTML code or main CSS when mobilizing a legacy website you still want to see that your HTML changes did not introduce issues on the desktop browsers, especially older and problematic Internet Explorers. Here are some desktop testing resources, but I’d hope to hear of more pointers and services so please comment.

5. Internet Explorer virtual machines

How to automatize the installation all Internet Explorers on OSX and Linux using VirtualBox and one liner shell script.

6. Remote page rendering services

Please refer to this Smashing Magazine article for list of cross browsing testing tools.

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

Zoom-on-rotate fix for WebKit mobile browsers (Mobilizing websites with responsive design and HTML5 part 8)

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.

After adding meta viewport tag for your mobile site its width is properly formatted for mobile browsers. However, there exists a common glitch you should be aware of.

On iOS devices, and on some Android devices, the mobile browser re-zooms the web page when the device orientation changes. The browser applies heuristics and try to determine a new zoom level after the rotation, but sometimes the result is not desirable. When you rotate from the portrait mode to the landscape mode, the page zooms in too much.

In our case, the project client specifically requested to disable this little feature if possible, as it was irritating the test users on iPad devices.

This can be worked around by resetting the viewport with Javascript after the orientation changes.

An example code going into HTML <head> section:

  <!--

    Don't break scale on iPad rotate.

    By default iPad re-zooms the page when the device orientation changes.
    The heuristics here do not work always; our page got zoomed in
    though it should be max zoomed out.

    This snippet fixes the situation so that you can still zoom in, but when
    the device is rotated the scale is restored.

   -->
<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>

Please edit the scales part of the code for the desired min and max scaling level.

Note: Dynamic viewport manipulation is badly supported on older Android devices and contains many pitfalls.

1. More info

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