How to test a web application on an iPad and other tablets without buying them? - ipad

Is there a trustworthy way to test iPad compatibility of a web application without buying the device itself? What about other tablets, do they provide any emulators?

If you have a Mac, just register with Apple (for free) and download the iOS SDK. It includes a program called 'iOS Simulator', which you can launch directly without knowing anything about Xcode/etc and includes Mobile Safari just like a real iPad. Since WebKit is exposed to iPad programmers for use in their programs, I'd expect the simulation to render identically to the real thing and, in practise, have never noticed any differences.
The iOS Developer Centre is here. Sadly, I have no experience of other tablets.

This is past mid-2012, now there are plugins or settings for User-Agent that "emulate" the connections for ipad (ios4 & ios5). Well it tricks the server into thinking that it is a different device.
For example, using Chrome, press F12 and click on settings (bottom right) and one of the tabs allows you to emulate the different devices.
safari - http://www.dummies.com/how-to/content/how-to-activate-user-agent-switcher-in-safari.html
FF needs plugin: https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
IE8 - http://www.howtogeek.com/howto/18450/change-the-user-agent-string-in-internet-explorer-8/
IE9/10 - anyone can help?

Related

Is necessary purchase some physical devices (smartphone/tablets) for develop/test a mobile website?

I'm currently developing a mobile website with jquery mobile, not exactly responsive web design. I know I can develop the project in the browser on my desktop PC with some plugins or use some online services or simulators available. But I'm not sure if I missing something really important for test.
Example:
touch/swype events or viewport rotation.
Is necessary purchase some physical devices (smartphone/tablets) to develop/test the project? Why?
Intro
First don't let anyone tell you it is not necessary to purchase a real devices for a test purpose. I will tell you why from an Android perspective, same thing, just in a much smaller manner also goes for iOS development.
Good sides of an emulator testing
It is free, you only need a computer which will run your emulator.
You can test your applications in different cases (different screen resolutions, different OS versions)
Faster I/O and network operations but this is not so much a good point if you calculate how much everything else is slow.
Bad sides
It is slooooooooow, if you never tried to use it you can comprehend how slow it is (iOS emulator is fast like hell in a comparison). It doesn't matter if you have a top of a line hardware PC or Mac it is just that slow.
Emulator is simply to darn buggy, there will be a lot of times when application will work just fine on a read device and it will brake on an emulator.
This also goes other way around, sometimes application will work just fine on an emulator but will brake on a real device, in some case it will not work at all or it will not work on some devices. This is usually a case when working with hybrid applications. for some reason Android web view acts differently on real devices and on an emulator.
Emulator simply don't have some functionalities to interact with a hardware nor it can successfully emulate it. Hardware connection it can emulate even don't work correctly sometimes.
I have talked about how slow it is (because of a converting ARM bytecodes to x86 ones on the fly) but from a graphics standpoint it tends to be even slower so don't expect to do any game development on it.
Real devices comes with much more preinstalled software which may slower your application or in some ways enhance its functionalities.
Real world GPS testing is out of a question
Final notes
If you are intending to work with iOS only emulator can be used to do much of a development. Sheer lack of different screens sizes and hardware diversity makes it a perfect platform for a test purposes. Android on the other hand is completely different story, its emulator is simply useless for test purposes. I have several real Android devices, ranging from Android 2.1 + , different screen sizes and finally hardware architecture. You don't need to believe me but everything I mentioned play a significant role while testing Android applications.
If your main concern is testing your jQuery Mobile application I would still advise you a use of a real device in case of Android while in case of iOS you can successfully use emulator. Android is problematic because transition effects are to darn slow and that includes everything else that requires animations. Swipe will not be a problem and I can vouch it works just fine. Second real problem is a device rotation. jQuery Mobile sometimes can have a problem with it, mostly when used with non responsive 3rd party jQuery plugins (carousels, sliders ....). Third problem is mentioned in my list of bad sides, basically web view used in a emulator acts different then one in a real phone so sometimes you will see one thing in your real device and one thing in your emulator.
It is not necessary to purchase such a device.
For Android there is an emulator provided by the Android Development Kit (ADK). You can use it to configure multiple emulated devices with defferent screen sizes, etc. to test for multiple resolutions and Android (browser) versions.
[edit] Though to really test it for iphones you would need that emulator too I suppose, to make sure the website is correctly displayed in the provided browser.
[edit 2] To test "real" smartphone apps (not webapps), it is better to have a real device at hand.
This very much depends to which level you want to test it before you are happy to hand it over for the usage. After you do that and someone reports a defect, will you be able to see where is the problem (if it works on your PC)?
The development itself can be done in your browser, you can even simluate swipe events by dragging mouse. You don't even need any simulators, you can just make chrome window smaller (most of the devices are using some version of webkit, same as chrome).
However, once it comes to testing, I wouldn't feel great if I didn't know how it looks on the device itself. So I think having at least one device (ideally two with different OS and resolution) is always beneficial.
I would also be unsatisfied if I was working on something of which I could not see the result :)

Testing a website for mobile?

I got a ASP.NET MVC website that is working fine in most desktop browers, now I need to make a version for mobile and my though is to use CSS Media Queries for this but I have no clue on how to test the page during development? Is there any desktop application that can be used like a mobile browser?
If all you want to do is test the media queries firing on certain viewport widths simply reduce the width of your browser. You can watch the UI change as different media queries fire.
You can also use browser plugins to define and set viewport resolutions. I use "Resize Window" for Chrome.
There is an Android emulator out there that you can download and run on the desktop, but this is mostly used for testing device specific features.
When it comes down to it the best way to test mobile websites is on the devices you are targeting.
you can try with
if (Request.Browser.IsMobileDevice == true)
{
....
}
To test your website you can use Chrome, there is a nice features included in it. You can change the user-agent and, then, emulate à resolution of an Ipad, Iphone or any smartphone.
It's pretty usefull to test responsive design and stuff :)
Well, in addition, be carefull it's only "simulation" it never remplace some real tests but it's nice for conception and pre-production process !
Here is a link about the change user agent feature of chrome : http://googlesystem.blogspot.fr/2011/12/changing-user-agent-new-google-chrome.html
I would suggest 3 tools that can help you:
Adobe Shadow http://labs.adobe.com/technologies/shadow: It lets you sync up the website you're viewing on your desktop browser to your mobile through the Adobe Shadow App, and you can use Chrome's dev tools on the mobile site through this method.
Remote Debugging with Chrome on Androids https://developers.google.com/chrome/mobile/docs/debugging: like Adobe Shadow you can debug and test your site through the chrome dev tools. However, you'll need an Android phone running on ICS.
Lastly, if you have the Xcode - you can use the iPhone simulator to view your sites. It is very accurate, you don't get the realtime debugging like you would with the previous two, but you can test your site on the fly after each update.

Debugging web app in iPad Simulator

I am developing a web app for iPad and testing it on Safari on Mac and Safari on iPad Simulator. Now there are some issues with CSS in iPad Simulator which work quite well in Safari on Mac.
Now my question is,
Is there a powerful debugging tool for Safari in iPad Simulator?
When running safari in an XCode device simulator, the desktop Safari (v6) Develop menu shows those devices. From there, you can fire up the developer tools (DOM browser etc.) for the mobile browser. This helped me debug an mobile safari css issue without hardware.
Note: As of iOS6 this is not the correct way of doing remote debugging, leaving this answer for historical reasons but you should look into remote inspection with Safari, here is a good article: http://jeffreysambells.com/2012/09/22/ios-safari-web-inspector
Have a look at this, (a bash script I wrote) https://gist.github.com/2241976. It will allow you to open the iPad simulator and run Webkit's remote inspector, which will look just like this.
iWebInspector is quite a powerful tool for the iOs simulator's Safari.
It uses the same inspector as Chrome and it works nicely (I've used it myself and found it really helpful).
From their website
iWebInspector is a free tool to debug, profile and inspect web
applications running on iOS Simulator (iPhone or iPad). You can check
resources, see and change HTML & CSS, use breakpoints on JavaScript
code, create charts and more just as if you were on Safari for
Desktop, Chrome or Firebug.
It works for any web in Safari -the web browser-, for a chrome-less
webapp (full-screen) and also for apps using UIWebView -including
PhoneGap applications-.

Mobile Website: Framework focused on Symbian and Blackberry

I received the task to add a mobile-friendly version of our website. Apps for iPhone and Android already exist (and their browsers are really good), so the focus of this website lies on Symbian and Blackberry devices.
As I am a lazy programmer, I wanted to use some frameworks that help me in developing this website. I have found numerous frameworks like iUI or iWebkit that focus on iPhone and Android devices and bring a very nice look and feel to mobile websites. And there are other frameworks like PhoneGap which focus on building applications for mobile devices.
But I have not found a framework that is targetted on mobile websites for Symbian and / or Blackberry. Is there something like that or do I have to start from scratch? Or are the browsers for these devices so bad that I have to write very basic HTML?
Jonas
I only know mobile web templates for UI in nokia phone. They are good for blackberry too
BlackBerry browser isn't awful, it gets an Acid3 score of 93/100.
I do the clear majority of my web-browsing on my BlackBerry, almost all of it in Opera Mini. I haven't even tried the Acid tests on Opera Mini, I know it'd just be a waste. :) But, Opera means I don't have to do side-to-side scrolling, back and forward are lightning fast (retrieved from memory when they can), it has rudimentary tabs, and the latency is probably 1/10th or better the latency of the native browser.
I'd rather see your application work well in Opera than work perfect in the native browser.

Protect iPad settings

I am developing a web application to be run in iPad safari. The iPads will be provided to the customers and the question is - I want to allow access only to the safari browser and not other applications that can be found in the iPad, especially the iPad settings. Is there anyway I can do that in iPad?
You are basically talking about turning the iPad into a kiosk, meaning a computer that cannot be controlled locally beyond a subset of chosen functionality. In other words, the user is not in charge. In practice, every iPhone and iPad is a kiosk, because Apple is in charge. The only way to take control away from Apple is to jailbreak the device.
The extent to which Apple is willing to share the reins is the iPhone Configuration Utility which does not allow you to disable settings, although you can disable Safari.

Resources