I hope to show a dynamic generated HTML page on my mobile application. This HTML file is in fixed structured. Include forms, Images, and buttons. However, when it comes to different mobile platform, like ios and android. And also different cell phone, like android from sumsung or other company. The display result are different. Some of them are very bad. This problem is heavier for android system since there are many different company using this system.
For now I'm using a method that when user using the application, the application will send request with the cell phone model user use. And the server side will choose the correct HTML template for that phone. That means I have to write a HTML template for every phone. Consider the increase phone models these days, I don't think it is a wise idea.
I hope if someone could help me came up a solution to sovle this problem. Either a solution that will dynamic generate HTML templates based on user's cell phone model, or a universal way to create a HTML will fits all mobile display.
Thank you!
If I am understanding correctly your problem I would highly recommend using Twitter Bootstrap to design your html pages. This is very easy to use and with this you can design webpages which resize themselves as per the screen. The responsive css defined in twitter bootstrap handles all screen sizes for you and renders html pages on the fly as per screen size without hampering/distorting the look and feel of your html code.
You can get the source and learn everything about it from here http://twitter.github.com/bootstrap/
This is a demo page made using twitter boot strap. You can try and open it in a browser window and then resize the window to see how the page contents re-arrange themselves
http://brocknunn.com/bootstrap-untame/
Also following are some tuts which help you get up to speed with Twitter Bootstrap
http://untame.net/2012/07/twitter-bootstrap-part-1-what-is-bootstrap-anyway/
http://untame.net/2012/07/twitter-bootstrap-part-2-design-a-responsive-homepage/
I just used this for one of my Android apps where I had custom html pages. It saved me a lot of effort and time. I only had to invest a few hours to learn how things need to be arranged in the html page and I was all set. I hope this will help you in greatly reducing your manual effort and save a lot of time.
Hope it helps.
Try to adjust your design to scale things in relative sizes. Android has a technique for sizing applications for different devices, you should do the same and create a generic site template for a range of devices.
For example, work with percentages, and provide a different template for devices that have screen sizes over 5 inches.
I would definitely recommend giving phone gap a look (http://phonegap.com/)
Also, you should definitely be using percentages in your css to be compatible across all resolutions (including desktop and laptop)
Gone are the days of being able to say this is what my site looks like you better make your resolution match it!!
Also consider offering just 2 types of site a mobile (with all images made smaller) and a desktop which has the fuller sized images.
Related
This is mainly a question for someone who has adequate experience with mobile development in both android and ios, and knows about mobile application optimizations and performance, so please refrain from answering generic solutions like "choose what you like or what suits your preference etc".
So, I am developing a mobile app for ios and android in phonegap, and it has graphics for almost all possible social medias like facebook, twitter, snapchat. My questions is whether I should maintain the icons/graphics for each media as individual files, or as a combined sprite image.
I understand on web sprites are the best options, but since these graphics are embedded in the app, it should not be a problem for the mobile app. Only thing I am concerned about is how the number of embedded images and icons in the app will affect the performance of the app.
I prefer to keep each social media icon in separate file because it is used at various places in the app with different styles and sizes, so using a sprite in that place would mean taking care of background size, image width all individually, whereas with the individual icons it is very straight forward. Also makes it easy to add/change medias to the app without modifying existing graphics.
So if someone can please tell me what effect will it have on keeping individual icons and graphics within the phonegap app instead of sprites and whether it is the better option or not!
i have worked with a android for over two years and i have realized that pngs are the best format to work with in android application and for JPEGs the best practise is to use a hyphen to name the JPEGs eg image_one.jpeg
Using png's will be the best format as they have never failed.I would gladly help if u need more assistance
I would like to create an application that support in both Android and iPhone.
It will be a interactive system for people to chat,share photos, etc.
So, it will consist lo-gin system, and all information for users will stored in mysql.
The question is here, should I write two sets of code for Android and iPhone or use some cross platform tools such as Phonegap + jQueryMobile for development.
1)I am wondering if html + css + javascript can complete all the functions that I want to include in this application if I use Phonegap.For example, how to handle the data transfer when loading data from db, should I create many .html for different pages. And the performance of using Phonegap...
2)Also, how about the time of development. Suppose there is one developer for Android, and one for iPhone. If we develop separately, we cannot help each other. On the other hand, web may be easier and we can research on this together.
3)Then, for the UI, it is easier for native language. But it is much difficult for web to make the things like mobile application.
I have asked a lot of questions. But I really think about this kind of issue for a long time and this is the time for me to have the decision.
Can anyone help me and give me some idea? Really thx....
Consider these Factors & Make your own wise decision,
which coding technique are you familiar with (HTML, CSS, JS) or (Java, C#).
For your First Question about data transfer from db,(your question is not clear internal db or server side db) if internal db Here is My QuestionI couldn't find the solution with the given answers, Help me if you can solve the same.(if you are talking about server side db) both for native & Cross platform it has to be achieved by API's
Time of Development is less in PhoneGap, when consider for both platforms since you are coding for both platforms simultaneously.
UI is Easier in Native ONLY when you go with Default styles,
For example consider yourself adding a Customized Button in *.png format.
you are gonna add single button multiple times in multiple sizes. If you wanna achieve clicked or Hover Effect you are Gonna add 2 more Customized Buttons. Which makes totally 3 images for single click for single Screen & Single Orientation, to achieve Correct Quality, u have to add same image in different sizes in ldpi, mdpi, hdpi, x-hdpi, no-dpi which finally brings you 5x3=15 images for single Button.(imagine the size of your app). Finally you have to add few lines of Codes to achieve Clicked effect
The same can be achieved in CSS with few lines of Codes(hardly 5 KB). Many animations also can be achieved easily with js.
UI can be changed when ever you want with change in few lines of codes.UI - PhoneGap Wins your app runs in Browser, both Android & iOS use the same browser engine Webkit, but still significant differences even in Webkit
Here are few more issues in PhoneGap,
Performance Native wins. In PhoneGap your browser has to load js, CSS which gives you notable delay, which cannot be ignored. If you want awesome UI go with CrossPlatform. To achieve performance choose Native.
Finally time to take decision.
It depends on what your requirements are. Evaluate if all your requirements are possible with Phonegap. For a list of supported features see: http://phonegap.com/about/features
Note that you can only use the native phone functionality that phonegap provides.
The development time depends on various factors, such as complexity, size of project and developer skill. I think the main difference here is developer skill, as the complexity and size of project are the same.
This is a tradeoff you have to make. An example phonegap application can be found here:
http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/
1.If you build application using cordova with more page, you app will get slow and some time it will get more bugs of design. So it
is better if you use single html page with different dives for each
pages and use "display: none;" from your java script or JQuery to
show and hide you current pages.then your application will more
fast.
there a lot of plugins in cordova those are supporting for both iOS and android so you don't need a iOS developer or android
developer if you have proper html and css design like responsive web
site.
UI won't be problem if you build a responsive html pages using bootstrap
I am wondering what changes ( if any ) that I should consider making to a website to make it more friendly to mobile devices. I am focusing mainly on use in landscape mode. I know i can remove sidebars and that type of think but I am more interested in some simple and basic adjustments rather than fully accommodating mobile use ( in other words i estimate a low use of the site in mobile and there is not a budget to develop a dedicated mobile site/app ). I guess I already know about fallback images for flash and maybe increasing text size but is there anything else ?
For Android friendliness, check out the myriad tips suggested here: Tips for optimizing a website for Android's browser?
For iOS friendliness, this blog post has some good tips: Designing an iPhone-friendly Website
The primary concern is to have it display reasonably well scaled, for which you will need to use the viewport tag. Other than that you'll need to worry about the various javascript/css inconsistencies between webkit, safari, etc.
Also, since the user is likely to be on a weak connection, you should go back to 1990s style concern over your code and image weight. Try to keep things as light as possible to reduce download times. The rule of thumb used to be, no individual page should be larger than 100k.
This may be controversial, but in my opinion you should avoid using frameworks (jquery, etc) that download a ton of functions, of which you then use practically none. Unless your site is really dependent on it, just write your own functionality and save the bandwidth.
And of course if iPhone is your concern (or any iOS device) then Flash is a non-starter.
I would suggest to use as little dynamic elements as possible. Avoid things like divs with inner scrolling.
In the end it is important to test your site on a touch controlled device because that's the main difference.
I have recently completed the development of an iPhone application in phonegap and we are now completing the Android version of the application and I was hoping to turn to the SO community for some answers in best practice for getting your app to look right across every device. My approach was going to be to use sencha.io for all of the images and use em/percentage based flexible layout across the app so it scales based on available screen real estate. Is this approach fair, does anyone
have recommendations for workflow or implementaion?
Thank you in advance,
JN
In order for your app to look the same across all devices, use HTML5 and CSS (which you are already using with PhoneGap, correct?)
You must decide whether or not you want your android app to look like your iPhone app, or if you want it to look differently on a Android app, or if you want it look like your app regardless of platform.
Regardless of what route you take, the key to this to use well written and well formed HTML and CSS. When i say well written, i mean to not have any layout or styling depending on HTML and do all layout and styling with CSS.
From my personal experience, you are on the right track with percentage/em.
As for sencha.io, i have never heard of that. But i personally don't see what that does that you can't do with just CSS and HTML5.
Be sure to test on as many different devices as you can!
As a side note, i would recommend not using many images to help users reduce load times and data usage.
we have a number of SWFs we want to repurpose as Android apps, but are having trouble finding some information.
I realise that Android is spread across a lot of different Hardware but are there any standardised resolutions? If not how would you go about resizing the Stage depending on the screen?
Secondly can SWFs be uploaded to the Android store and if not what is the best way to mantain the SWF functionality whilst converting it to a format that can?
Any other advice you think important would be helpful.
Thanks.
Here's the Android docs (with some representative screen sizes at the foot of the page): http://developer.android.com/guide/practices/screens_support.html
First of all, in order to deploy your app to the Android store you need to publish it as an AIR file. (Note that this needs the Android device to have AIR on it: https://market.android.com/details?id=com.adobe.air).
You can get the screen resolution for the app using the flash.system.capabilities:
trace(Capabilities.screenResolutionX);
trace(Capabilities.screenResolutionY);
or via flash.display.screen when using AIR as this contains additional screen information.
Finally you also need to bear in mind the screen orientation (see http://www.adobe.com/devnet/flash/articles/screen_orientation_apis.html). You may want to consider multi-touch as well, and review you app from the UI point of view to take on board the different user experience of Android compared with the web.
Good luck!
Try GAF Converter. it is goood solution for porting swf files to Android. it supports numerous features and I think it will help you.