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.
Related
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 :)
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.
There are basically two issues that are confusing us:
Will a Blackberry app made for mobile phones work on the Blackberry tablet? I see that there is a tablet SDK as well.
Do we have to make a separate versions of Blackberry app for different mobile phones?
The reason we ask this is because we come from the Android environment where we can use one SDK to make app which will work on all mobile phones and tablets as well.
The BlackBerry Smartphone SDK is different from the BlackBerry PlayBook Tablet SDK.
The smartphone applications are written in Java (RIM's version of J2ME, essentially), while for now, there are two editions of the PlayBook Tablet SDK: WebWorks, for development with web technologies like Javascript, HTML, and CSS, and one that is Adobe Flash/Actionscript/Air based. I think there is also one in development with C++ as a foundation.
You can start with the BlackBerry Developer zone - it covers development for both smartphones and tablets:
http://us.blackberry.com/developers/
The BlackBerry Tablet SDK for Adobe AIR can be found here: http://us.blackberry.com/developers/tablet/adobe.jsp
The BlackBerry Tablet WebWorks SDK can be found here: http://us.blackberry.com/developers/tablet/webworks.jsp
Information about development for the BlackBerry smartphones can be found here: http://us.blackberry.com/developers/javaappdev/
For smartphone development, you would probably want to target the minimum RIM OS that would include the most devices owned by your target customer base.
Right now, RIM claims that more than 96% of BlackBerry smartphones can be reached using SDK 4.5 or higher.
RIM keeps an up-to-date set of statistics on this: http://us.blackberry.com/developers/choosingtargetos.jsp
Typically, if you're targeting recent devices (4.7 and newer), then you don't need to worry about splitting your code to target multiple devices, as long as the UI is written without making any assumptions as to screen size, etc.
If you're targeting anything older than 4.7, then it may benefit you to make two versions - one for touch screen devices, and one for devices that aren't touch-screen. The touch-screen API is introduced in 4.7, and while it's somewhat backward compatible, in our experience, while you need the touch-screen API available for devices that support it, it's best to leave it out for older devices that do not have support for the touch API or the virtual keyboards that come with it.
If you're going to split the code, RIM's compiler does come with a C/C++ - style preprocessor which comes in very useful.
I'm looking to make a single-page web app that works exclusively on the iPad, like Gmail on the iPad and the iPad User Guide. An app like this must be made using a framework that allow web pages to behave in ways much more akin to iPad's native applications (momentum scrolling, split-view panes, UIKit-style interface), but done completely in HTML5, CSS3, and JavaScript (with WebKit and Safari extensions like iOS-specific multi-touch and gesture events).
The only public framework I've found that targets the iPad in this matter is Sencha Touch. Naturally, Google and Apple aren't sharing the libraries they've written (ie. PastryKit, AdLib, etc). Are there any others (the open-source only license for Sencha Touch is prohibitive, and jQTouch is only for small-screen devices like the iPhone 4, and not the iPad)? How would I go about writing momentum scrolling and split-view panes like this? Any good resources/tutorials/books/links on these advanced topics?
For a lot of reasons, people want to write web apps for the iPad that can compete with native.
I don't think you'd have to do it yourself. The sencha touch commercial license is free, so you won't have to open up your own code. On the iPad it looks really good.
You can also use PhoneGap to put a native wrapper around it so most users won't notice it's a web app.
Jquery mobile is also an option but it doesn't look as good as sencha, IMHO
Sencha Touch license
PhoneGap
Also checkout App Titanium... You develop in Javascript, but it renders your app as native code...
Take a look at SproutCore and:
http://blog.sproutcore.com/post/531215199/introducing-sproutcore-touch
http://touch.sproutcore.com/hedwig/
http://www.npr.org/webapp
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?