I want to convert my HTML site into iPhone or Droid compatible site. How can I do that? - iphone

My website is really very simple HTML based site. My site is located here: http://www.threesite.com
How can I convert this simple HTML site compatible with iPhone or Droid? Do I need to convert the same into PHP based site and then convert? Your help will be much appreciated.

5 Ways to Create or Convert into Mobile Phone Website.
The easiest way is to use Google's tool, because it converts your existing site automatically. I've tried it on your site and it looks nice.
If you want to tailor the site yourself, you have two options: Building an app or rewriting HTML. A site app makes your site highly customizable and professionally-looking, but it requires a lot of effort and separate development for each platform (iPhone, Android, Blackberry, Symbian, ...), and. it requires your users to specifically download your app.
If you choose to convert the existing HTML to a mobile-friendly site, it will be (mostly) cross-platform, and you can follow the guidelines here.

This is very interesting question especially these days when mobile visibility has never been more important.
For more complex website I would use some online mobile site converter service, such as duda mobile or bmobilized.
These services will give you just mobile - 'm' version of a website, but with long bad urls, and unless you pay for responsive package, the site won't work on tablets.
Maybe the best solution is to use joomla or word press and pick some responsive template and build the website from scratch. Building one responsive site is better solution than having multiple instances for each device...
examples:
a) duda service
If you wander what duda can do for you, just as an example, check this site crazyscarygames.com and check out his 'm' counterpart "m.crazyscarygames" for mobile devices. this is just an example.
b) script
If you would go for full responsive site, this is an example of purity III template on this website monkeygamesworld.com ... m.monkeygamesworld.com
And remember, always do all redirects from htaccess.
There's a google tool that you can use in the end to verify how your site works on android
google.com/webmasters/tools/mobile-friendly
just enter url and hit 'analyze'
also make sure that your robots.txt is setup well, in order to allow google bot do its scan properly throughout necessary directory structure in order to access all resources.
ok, hope that helps

Related

PhoneGap Cordova Browser based and app

Let say were starting a website from the ground up and want to also create apps.
Could you just create the website with a REST API's and have it work on browser and PhoneGap? Would there be a conflict with Cordova plugins you may use?
So the design is responsive and its all HTML, CSS and Javascript and connects to a REST API (log in, reg, messages, db calls, etc) for the browser website and apps.
This way you can use the same code for everything and can still use some of the great Cordova plugins for the app to make it more flexible.
Would this work?
I posted this answer else where but I think it is relevant here.
Unfortunately for your app to pass Apple App store approval it will have to provide some basic functions and display correctly without an internet connection. This means at a minimum, if you plan to generate content on a server you will probably need the Cordova plugin for network information:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-network-information/
I would make sure you are familiar with the Apple Human Interface Guidelines:
https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
You will probably also need to bundle any JavaScript. Apple is very picky about apps that download code (this can include JavaScript).
This is a section from the iOS developer Agreement.
3.3.2 Except as set forth in the next paragraph, an Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exceptions to the foregoing are scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store.
Another big concern is performance. How will your app handle a poor 3G or even 2G connection? Do you need to cache the responses from the API and only download them if they have changed on the server?
If a user is browsing your website on a browser they know they need an internet connection, if they are using your app they want it to work when online and offline.
Edit
Apple commonly uses this reason for rejection for website only apps.
We found that the experience your app provides is not sufficiently different from a web browsing experience, as it would be by incorporating native iOS functionality.
While your app content may differ from your web site or other existing sites, the experience it provides does not differ significantly from the general experience of using Safari, as required by the App Store Review Guidelines.

HTML5 web app vs Native mobile apps

Hi I have been recently exploring some of the Javascript mobile frameworks that can be used for developing mobile web apps like Sencha, JQTouch, JQuery mobile etc.
I know the adv and disadvantages of both.
I just need some recent stats which show the market's adoption or opinion.
I tried three ways to develop mobile applications.
First method is to use frameworks that will take your html/css/js files and package them into mobile applications depending on your targets (BlackBerry, iPhone, Android, ...). I used PhoneGap (known today as Cordova). I didn't like it at all because the UI's rendering is so ugly on some devices and the user experience is broken. I had to use it with jQuery Mobile because it gave me a good UI design start. I tried some Phonegap Android generated applications on my personal device and it's really horrible. Some of them got rejected by Apple because of that ...
Second method is to use Appcelerator Titanium SDK. One word to sum it up: Awesome. One language to use (javascript) to create your UI/Controller. It's so easy to learn, so powerful to develop with and it has many out-of-the-box functionnalities (like facebook API, Yahoo Query Language, ...) that will allow you to put in place solutions easily for both Android and iPhone. BlackBerry is coming soon. What I liked the most is that it converts the written Javascript into the targetted platform with the default UI. It's really great. And, above all, the UI is easily customizable (with a css like system).
Personally, I put in place apps that can: Take a photo with the device then send it to a remote server, send messages to twitter/facebook, advanced geolocation, etc.
Third method: Native! It would take time if you target both iPhone and Android but, the big advantage is that you can create anything you want without being tied to a Framework for areas such as games, augmented reality , etc.
In my opinion, if you want to create simple applications with some nice features (weather, twitter feeds, sending on a facebook wall, ...), use Appcelerator Titanium SDK.
It converts your code into NATIVE.
If you have time to spend learning native languages, do it. It's the best way ;)
Hope it helps.
Regards.
I've summed up my thoughts on the whole "native vs. web" discussion in a blog post here: http://www.springenwerk.com/2011/09/thoughts-on-mobile-ui-design.html
In a nutshell: You can't get around getting to know the platform you are targeting if you want to provide a great user experience. Plus, you shouldn't try to mimic native UI/UX in a web application, it will only disappoint your users.
here are some pros and cons of native apps vs. web apps:
Native apps:
Native apps have more security
Native apps have higher user engagement, it has higher click-through rate (CTR) among the ad-serving publishers
When it comes to aesthetics and overall user experience, it is incredibly difficult for web apps to trump native apps
you don't have to buy a server and maintain it, therefore, for small businesses it is the ideal solution, not web apps which require a server.
Web apps:
it's cross platform - that means your one app will work on both iphone and android
cheaper and faster to develop and maintain
you will find programmers easier than native apps
updates are easier
Check out this post for some more opinion - http://www.thorntech.com/2013/01/html5-vs-native-apps-which-will-win-the-mobile-app-development-battle/
In particular, the last paragraph is worth noting. If you go down the path of building an HTML5 app, it is worth having some type of background "syncing" of content so you are not always pulling it from the web in real time. The app will be much more responsive if you load HTML pages from disk.
From my experience, the success rate of a native apps are much better than html or javascript based ones. I do not have sufficient numbers to back it up, but these are some issues that may crop up when trying to build html5 apps for different platforms. e.g.
Browser OS or webkit differences can cause unexpected bugs, css issues that could take quite a while to debug.
Your app is running on top of a webkit browser engine which takes up additional resources.
Older or non-smart phone devices may not have a modern webkit engine.
Nevertheless if you have good web skills over native, then getting an app to the market the quicket and cheapest route would be html5. Some apps lend very well for html5 such as data listing, and text content driven apps. I have written a writeup on HTML5 vs Native on my blog. Hope its useful.

Any good free website template or theme for wordpress or joomla to demo my phone apps?

I want to build a site to introduce my phone apps and guide users to the app store. is there any good theme or template for me to get start?
I need to put all my apps together and have separate page for single one.
I have 3 app supporting websites all of these are done using wordpress. Generally I found that I pick the template that suits my fancy but one thing I do for sure - enable mobile theme such as this (there are bunch if you search for "wordpress mobile")
I usually create one tab (page) that is loadable from my app and serves as Help page

iPhone + Android App to view Blog

What would be the best way to write an app for the iPhone OS and the Android OS that allows access to a web blog (posted on blogspot.com)? Are there ways to manipulate the incoming data from the website to fit the UI of the phones, or will I have to re-do a lot of the blogs?
Any help would be nice! And thank you in advance!
The easiest way in both would be to integrate the browser in the web app but perhaps restrict it to the blog.
For example, your app would open and have its own UI, but displaying the actual blog content would be done in an integrated browser (such as a WebView in Android).
Doing it this way isn't the best as it wouldn't be the best experience for the user, but it has the added benefit of keeping all the blog's design and extras, as well as javascript functionality.
"Manipulating incoming data from the website" (otherwise known as scraping) would be tricky for modern blogs since they usually contain so much customised content and are nowadays more like websites with blogs than just regular blogs.
I guess your best bet is to use Phonegap open source framework.
Since it basically creates local webapps and both platforms have very similar browser capabilities this should be a good fit for your intended application.

How to direct my users to my iPhone enabled site?

I have made an iPhone friendly version of my site, that I want to direct my users to.
The big question now is how to direct my users to this site. There are a few alternatives:
Redirect the user based on the user agent, e.g. if the user agent sent by the browser contains "iPhone" or android or whatever.
If the user agent matches the above criteria, display a notice on the original site telling the user that an iPhone version is available.
Which one is the most user-friendly? Another dimension to consider is the SEO aspect. How do I show Google that my site is iPhone capable?
I recently found some relevant posts on the Google Webmaster Tools homepage:
Help Google index your mobile site
Running Desktop and mobile versions of your site
phidah above has some good links, but remember: always include a link to view the desktop version. nothing is more frustrating than a limited mobile version when the desktop works just fine on the iPhone. there are exceptions, of course - for example if your desktop is mostly flash :p
This strikes me as more of a user experience question than a programming design decision. I would build either solution depending on what makes sense for your site, and your users. If you do go the redirect route, and the content on both version of the site are the same, I wouldn't worry to much about google. If the content is different, I would make sure both sites are visible to googlebot.
Nearly every site that I visit that has a mobile/iPhone version that just redirects me automatically, and then at the bottom there is a link to go to the full version if I want.
For SEO I don't think this would hurt anything, since web crawlers aren't run on mobile devices.
Check out the links below.
web dev kit
and for css info on detection
css Info
it is some of the better info I have found, hope it helps.
Kirk