I'm beginning to build my first mobile web app and I'll be using a combination of html5, css3, javascript, and at the end I'll be wrapping it up with Phone Gap (Cordova) then deploying it out to both the Android and iPhone marketplaces. I won't be using anything else like java, php, or c#.. This is strictly front-end based, so the questions below are in retrospect to the this and will play a big role in creating my mobile workflow.
As I'm fairly seasoned in the above front-end technologies, mobile apps are a different world, which leaves me with some questions...
Mobile App Questions (Workflow)
1.) Should I build it with 1 page (single page app) or multiple pages? I know I could us an AJAX solution here to give the "1 page" look/feel, but what's the smartest solution?
2.) Ad placement, in retrospect to 1 page/multi-page apps, I assume multiple pages would be a smarter choice? The more refreshes the better for CPM or is this considered bad practice? ...or can I achieve ad refreshes with smart AJAX placement inside a 1 page app?
3.) Gestures vs. buttons and css - I've been building responsive websites for the last year and have noticed that I can achieve a lot of effects with css alone (i.e. hover, focus, active, overflow... to name a few). When is it necessary to use gestures? Hammer.js seems to be doing a pretty good job of these effects and I'll definitely be taking a closer look at that plugin.
4.) CSS3 Animations vs. Jquery Animations vs. WebGL Animations - What's best? According to this link, CSS 3 wins... But I've heard about css3 REALLY slowing things down (i.e. using border-radius). What's safe to use for a mobile app?
5.) The "back" button on android phone, I assume it's used just like a web browsers back button.. So if I build a "1 page app" that could be a bad choice if a user clicks "back" then immediately exits your application. I'm sure I could use an alert box to question the user first, just curious on if their is any recommended solutions?
6.) The "settings/options" button on an Android phone, I assume it will do nothing if I don't tell it to... But, if I wanted to tell it to do something how could I?
7.) File System - What's the best way to access the file system (opening media, saving media, saving media to "custom app folder name", sharing media to facebooks/twitter/instagram, accessing contacts, texting, email, etc...), Since I'm only using front-end technologies, what's the best ways to handle this? It seems like I've read somewhere that Sencha and/or Phone Gap have JS solutions for this.., what's your preferred way and how does it actually work?
8.) Testing - When I start implementing all of these "File System" commands, how on earth do I test this? I'm of course coding on a computer, Will Android and IOS emulators really do the trick or will I have to manually load my mobile app to a server and check? Is their a way to test locally with my phone? (that'd be cool :)
9.) Performance - I know performance is key with any application but ESPECIALLY mobile apps. I use jQuery (hey, I'm a UI guy :), and I know I'll be using a few other smart scripts so mobile phones will play nicely (SouthStreet Progressive Enhancement Workflow)... but how much is TO MUCH?? In the future if I wanted to use more powerful js libraries such as knowckout.js or angular.js, how would this effect the performance of a REAL html 5 mobile app?
These are the questions that are running through my mind right now. If anyone has some good knowledge of a tutorial that explains these things or if anyone can point me in a good direction I'd really appreciate it! I also hope that these questions will help other poor lost souls like myself ;)
Related
Got a problem, and I am pretty sure there is a solution for this.
Currently we have a Website that sells goods & integrates with a thirty party for shopping cart. The shopping cart integration is through standard web re-direct.
Product works well on desktop browser. Its not that bad on browsers on tablets. Not so great on phone browsers. The problem on mobile device is for obvious reasons, as the pages are optimized.
The standard approach we can do is go about optimizing for mobile browsers, and be happy. My team is flying with optimizing for mobile web, because they think apps will be very difficult to do.
If we choose to go the native app model, is developing a library or package for each platform the only way? I am thinking, no in current world with so much technology advancement. I am not a fan of browser view on device, not the smooth experience.
Are there other options available? I was looking at HTML5 hybrid applications, but can't put a finger to be sure that will work for what I am looking for.
Frameworks aside, often times you can use a stylesheet meant for mobile devices and hide everything that is not absolutely vital. You could also consider WML, but I think you could live without it IMAO.
Writing apps for the iOS will require an investment in Apple developer tools and training in Objective-C. Android will call for Java and Eclipse, to name a few things.
When it comes to "native apps", you will need to code for whatever platform you are depending on. The number of platforms you work with is entirely up to you, but yes, each new platform may require a different implementation.
Personally, I would add some specialized markup/styles to make as many browsers as possible happy. If you want to expand, try to see where your target audience really lies and reach out to them on any medium you can afford to build on. I would zone in on specialized applications if there are benefits really worth chasing down that road.
Hybrid applications is a good option, but probably the devil in a box.
The hybrid approach with HTML5 fits your developer, because they will still use HTML, CSS and JS (e.g. with PhoneGap), but on the other hand you will get an medium satisfying UI (what you said you are not a fan of).
Pure native applications is probably a bit too much of all good, if your web app runs fine in a browser.
A way could be to go with compiled hybrid and cross-platform compatible solutions like xamarin or appcelerator, especially appcelerator uses JS, which is an advantage for you. This could result in a native UI (implemented in JS) and shared business logic code. So there are two benefits for you; first, just use JS, second, shared business logic code -> less work.
Other alternative would be to go with responsive or adaptive websites, realized with the help of CSS.
If you are looking for developing a hybrid app (phonegap + angularJS + backend), I would like to recommend Monaca. I've just recently discover it. It is very cool since it has phonegap inside its framework and its own backend. Moreover, it also has a fast and lightweight UI framework called OnsenUI which is based on Topcoat and AngularJS.
Even it is a hybrid app but it will give users the native application feel since it also provides native components to use in your hybrid apps. What is impressive about it, you don't even need to build and install your app to your device every time during development. That's what I love the most about this.
I hope it helps since I think it is just like what you are asking for. I'm just a novice developer and I find it is very easy to use.
I've been developing a travel planning site - tripgrep.com - which is built on appengine, GWT and smartgwt, among other technologies. It is still early days, and the site is now working well on my development environment, which is either a windows or mac computer.
However, I am frequently talking up the website to my friends when we are at a bar or other venue, so I am standing there while they try to access the site via an iPhone, Android or Blackberry - I've witnessed all three. It has been painfully obvious that the browser based frontend takes a long time to download on a mobile device. I am pretty sure this is because of the javascript download for SmartGWT.
So, I would like to look at alternatives to SmartGWT.
What I like about SmartGWT is that it has a reasonable look and feel out of the box - I don't need to learn any design or css and it has an office application look. This is considerably better than the GWT built-in widgets, which just get a blue border. The better look-and-feel is why I went with SmartGWT early on. However, the slow load times are killing me on these mobile demos. So now I want a fast loading widget alternative that has good look-and-feel out of the box.
The features I care about are: tabs, good form layout, Google maps API integration, grid data viewing. If those are all available in a library that loads quickly on a mobile device, then that's the library I want.
Your best bet is probably just to use the standard GWT widgets and learn how to style them to your liking. SmartGWT's automatic styling is nice, but as you've noticed, it comes with a price.
Even GWT's standard widgets, which are lighter, could still be trimmed down for maximum speed, so if you're really adventurous you could roll your own light-weight widgets that do only what you need them to do.
You can try mgwt-also called mobile gwt...(available at http://code.google.com/p/mgwt/ )
You could write a wrapper for jqTouch... that would be cool.
Write a seperate View for your model, specifically for either a) mobile devices or b) iPhone speicfically (see "iui" f.ex.). That is the very best way to do it.
I have an existing website running. I want this site to be able to be viewed on mobiles smart phones as well. I am ready to shave off some stuff, but would like to know how can I test this and are there any tools/guidelines on how to repurpose the site to be best viewed on mobile phones ? How to detect on the web site whether a mobile phone or a PC is hitting the site and accordingly serve the appropriate content.
There are few factors to consider such as:
- screen size
- touch vs non-touch
To detect whether the mobile phone hitting your site, you can simply verify the user agent.
There is a good article on this at A List Apart which will answer your implementation questions: Put Your Content in My Pocket
You can test by setting the user agent of your browser to that of mobile device. This can be done in safari under the develop settings, or firefox has various plugins.
And a tip, don't use anything that requires hover functionality. Touch screens don't hover.
You will find out it's a strange new world at http://mtld.mobi/
First decision you should make is which mobile platforms you want to support, then start coding...
As some one mentioned http://mtld.mobi/ is the best place to start for resources but for testing I would use http://ready.mobi that will test and debug your site and provide interface to viewing your website in mobile platforms.
First you need to decide what platforms/browsers you are going to support. If it is only smart phones like Android/Iphone/Blackberry it would be a pretty safe bet that as long as the website works in crome and isn't VERY javascript intensive and the site is catered for smaller screens it would be fine.
That is the theory in practise mobile is mobile and real world testing is the only way to go for 100% coverage.
With all the different mobile phone browsers and the mobile market being so diverse I'm having a hard time deciding on a way to create a text based online game for mobile phones.
I was thinking about using HTML / CSS / Javascript for front-end and Python CGI for server-side (with a DB).
Now this seems like a very obvious choice... BUT I'm having a hard time finding the "limits" to each one... by that I mean at what point will a popular web browser stop 'supporting' a technology. Like when it comes to HTML I assume you cant use HTML5 features in all popular mobile browsers... or maybe some allow JS but not jQuery... or maybe some don't allow some common CGI features or DOM is weird... I do not know.
I have read a few different tutorials on various mobile web browser development but nothing really helps to answer my question.
So what I'm asking is basically:
What languages/technologies do you recommend for a Text based mobile online multiplayer turn based browser game that will need to dynamically load a lot of info?(front front end to back end)
What are some common limitations between popular mobile web browsers I should look out for? I want to be compatible with all popular mobile web browsers.
One of the things to keep in mind is that there is a plethora of mobile browsers out there (Look here for details). So you are probably better off starting with iphone, android and blackberry and maaaybe opera mini browser support. These browsers have sophisticated java script support and you would be able to provide a good user experience. Later on you can work on supporting other mobile browsers.
Regarding your questions, if you look at these browser specs (and they are readily available on Internet) you will see that you will be able to use quite a bit of web technologies (HTML, CSS, Javascript, etc). That wont be a showstopper for you. Designing for a small screen, and a great user experience on small screens, that will make or break your game.
I'm trying to determine what kinds of interactions a mobile website can handle. For example, I obviously can't track page-level dragging operations because this scrolls on mobile browsers. So, I'm looking for demos that can tell me what interactions work, how well, and hopefully for information about how consistently that is across mobile devices. For example, I'd like to know if I had a page that fit on the screen, would my page elements receive mouse move events when I drag my finger? I could test that myself, but I figure there are probably lots of things that could be tested, so I was hoping there was something like the ACID test, but for mobile UI interactions.
I don't think I've ever seen such a thing, but the thing to remember is the browser is just one key factor in the interaction between your application and the user. The capabilities of the device itself is a large part of what you can and cannot do. For one, the iPhone has a full JavaScript stack and CSS rendering ability as well as the ability to "click". However, on a BlackBerry you're going to lose a lot of that CSS and JavaScript functionality. Also, with Nokia handsets you're going to be dealing with a different beast. The best way to develop for something like this would be to either use a framework/device template like the ASP.NET Mobile platform, or to go as close to basic HTML as you can.
There is no silver bullet, and you're just going to have to try to cover as much market share as you can. One thing I can share, is that the more standards compliant and semantic your markup, the better it will render across the devices. Sometimes, you can even get away with just coding the site once provided your site degrades well when CSS and JS are not available.