Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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.
share|improve this question
1  
Write HTML5 and JS. Compile to native applications using PhoneGap –  Raynos Jun 23 '11 at 16:34
2  
Does this belong here or in SO? –  Konrad Garus Jun 23 '11 at 16:54
add comment

5 Answers 5

  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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
4. Use @media in your CSS to server different CSS to mobile devices. –  Raynos Jun 23 '11 at 16:57
add comment

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.

share|improve this answer
    
Thank you. With HTML/JS resources I meant: I do know and have some experience with HTML/JS for desktops and I'm looking for resources that tell you what changes if you do it for phones (support for different screen size/orientation, good practices, known caveats and solutions...). –  Konrad Garus Jun 28 '11 at 21:31
    
You are right there are situations where you can't really use JavaScript alone for tasks that would be critically important to an application. Also look at www.sproutcore.com, this is quite portable to the mobile devices as well. –  nikhil Jun 29 '11 at 8:13
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.