Mobile web development rudiments

Question

How does one get started with web development for mobile devices (including phones)? I know some old good HTML & JS, but I'm wondering what the modern way is.

To make it concrete, I need to implement a client for an enterprise app. Think of a login-protected dashboard for managers.

Given that I only have basic knowledge and have never implemented such applications, what do I need to take into account when choosing platform and technology?

1. Shall I go for Android / iPhone, or HTML & JS, or HTML5? What are the general pros and cons that I need to consider?
2. How can I test an Android app on desktop without using a phone?
3. Same question about testing HTML/JS or HTML5 (the mobile version needs to be different from desktop, and I would like to see it exactly as if it was a phone).
4. What resources (preferably online) do you recommend for learning the rudiments? I mean especially HTML & JS: What does the site need to be like to work great on smartphones (and not only on desktops)? I mean possible UI glitches, limited support for some HTML/JS features, page size, and whatever other important details are there.

Answer 1

1. If this is an enterprise app targeted at a segment of the enterprise (CxO ?) - find out what phone devices they use. They could well be issued with BlackBerries - find out what types.

2. Install the Android SDK and use the emulator that comes with it.

3. There are a lot of mobile browser emulators you can install, but a quick/simple approach is to use http://iphonetester.com/. If you want to see exactly how it looks on a mobile phone, use http://deviceanywhere.com/

4. http://www.stackoverflow.com - there are already a lot of questions on this issue and the answers point to good online resources. I know this because I've learned a lot from it.

Answer 2

I think HTML5/JS (don't forget jQuery) would be the most flexible, but you should try to avoid doing UI and other stuff yourself and elevate existing libraries and frameworks.

Check out iUI for a simple library mimicking iPhone native UI. More complex and hard to learn, but more advanced library Sencha (AFAIU it can generate native-looking UI for different platforms). There are also solutions like rhomobile where you write your app in ruby and they generate your app with embedded web server in it.

PhoneGap is probably the only decent complementary framework to work with hardware functions from HTML5 apps. Also you can check out AppMobi for app distribution and updates management. ApiGee if your app needs to talk to other webservices.

For native apps (not HTML-based) check out CoronaSDK.

Lots of info, I know. But you will save dev time by doing research and reusing libraries.

Answer 3

For an enterprise app you'll need to keep browser compatibility in mind, so HTML & JS is your best bet, with backwards-compatible HTML5 where you can, and iPhone/android hints that will help those devices render.

But this could be a big task - you'll need to keep in mind XSS & XSRF & SQL/etc injection attacks, or your client may become very displeased with you if they're hacked.

Remember than many companies end up with a LOT of IE users, hence my statement on technology choice.

To consider mobile and desktop browsing, you'll have a few options.

1. Detect the browser's user-agent and redirect for mobile
2. Get a template that has been designed to display nicely on mobile
3. Keep a very simple design largely based on floating elements that can fall to the next line after the full width of a smaller mobile screen is used.

There are undoubtedly a ton of sites out there on this, but I've only done it as a thought-experiment myself, so I'm afraid I can't recommend one google result over another. Hopefully, though, you can start looking in this direction.

Answer 4

Let me try to answer your question step by step.

Shall I go for Android / iPhone, or HTML & JS, or HTML5? What are the general pros and cons that I need to consider?

Both the android and the iPhone are excellent platforms, But in my opinion iPhone platform is superior to that of android. For one, it doesn't have changes that frequently and the app store is also excellent if you want to make money from your app. Android has its own marketplace too but the apple app store is better. Additionally if you wish to develop for the iPhone, you must have a mac, a PC wont do. So you might want to factor in the cost of a mac too which is pretty steep if you're just starting out.

How can I test an Android app on desktop without using a phone?

We have the android emulator to test android apps, but keep in mind that it can only test fairly basic apps. There are certain features like the GPS, Accelerometer and other touch related features that are best tested on a real device. I wouldn't recommend that you release an app without actually testing it on a physical device. The same would apply to the iPhone too.

Same question about testing HTML/JS or HTML5 (the mobile version needs to be different from desktop, and I would like to see it exactly as if it was a phone).

This is easier than you would think, you can setup the css for various mediums, so that your website looks different on every device. Do consider jQuery Mobile, its an excellent platform.

What resources (preferably online) do you recommend for learning the rudiments? I mean especially HTML & JS: What does the site need to be like to work great on smartphones (and not only on desktops)? I mean possible UI glitches, limited support for some HTML/JS features, page size, and whatever other important details are there.

It would depend on the level of your knowledge about HTML, The W3Schools is an excellent place for reference documentation. You will learn best by actually doing stuff.

Best of luck with whatever app you are developing.

Answer 5

I agree with many of the answers with regards to using HTML 5 and jQuery Mobile. If you have .Net development experience (like me), and you don't want to use MVC 4, which is still in beta, you can create an MVC 3 Web application and enable it for mobile browsers. The key to doing this is to detect the "User Agent" string on the request. From there, you can determine if the request is originating from a desktop/laptop browser or from a mobile device.

"Mobile-enabling" a Web application solves the problem of your app running on multiple devices, and requires you to only maintain one codebase. Check out this post for a quick way to get up-and-running with a mobile MVC 3 application using jQuery and HTML5:

http://tekprolixity.blogspot.com/2012/04/instant-mvc-3-mobile-app.html