HTML5 on mobile web browsers - html

I need your advice guys. I am developing a web browser application for mobile phones and it will be pure html5. I want that web browser application (not native application) to run on every mobile phone's web browser and my questions are
How I am going to adjust layout for different screen resolution? How can I achieve cross-platform compatibility make it look ok on every device. Do I need to do have a CSS file and have layouts for different resolutions.
If I need to have layouts, is there any cross platform mobile web browser application developing tool that gets html5 files and generates modified htlm5 files with layouts for different resolutions?
Thanks for your time...

To automatically adapt the screen resolution, you can use 3rd party framwork such as http://jquerymobile.com , http://jqtouch.com , and http://www.sencha.com/products/touch/ . But the widest cross browser compatibility is jQueryMobile, take a look at http://jquerymobile.com/gbs/
I don`t really know about the tools what you want. But so far I developed by using framework, so cross browser compatibilty will be less painful. I write the code by using 'commonly used IDE' such as Aptana, and Eclipse with JSDT.
I dont think you can access phone hardware feature by using pure javascript. For GPS, Ive never tried to use HTML5 geolocation API on mobile web apps. But there is 3rd party bridging tools to make your HTML5 web apps to have access on hardware device and ported as native apps, it is http://phonegap.com .
Hope this help you, Correct me if I`m wrong :D

Related

Are there good alternatives to Flash on both mobile and desktop?

I have an html website with a Flash-based interactive online course. At the moment the course works fine on all desktop browsers, but obviously not on mobile.
My question is, what is the best alternative? How can I make my course mobile compatible? Is HTML5 the solution? If so, is HTML5 compatible with all desktop browsers?
Thanks.
HTML VS FlASH, lol
Html 5 is generally supported by everything BUT it depends on what you want to do exactly... Animations are limited in certain browsers for example windows explorer:
Visit my site with Chrome and also windows explorer you will notice a difference of interactivity
www.myobject.net
The upside to flash is 95% of desktops have flash installed if my memory serves me correctly whilst html features are supported by about 30% of desktops at current..
Mobile phones(smart phones don't really support much flash content at this current time.Adobe air can be installed on portable devices to show your flash content but this is a big ask for such things..
If you provide me a link to the website you want to have on mobiles i would get an idea more of what you want to do, and if html5 be the solution for you. " is your site 3d, or 2d has certain elements on it... heaps to be answered :)

Making Widgets using CSS3 and HTML5

I really admire the power of HTML5+CSS3 combo and I know that a browser is needed to run them(pretty obvious).
But I was wondering that is there any way that I can make Desktop Widgets/Apps (like a clock or weather app) using HTML5 and CSS3(Javascript for logic)?
(I know that for mobiles, phonegap is the solution but what for desktop?)
Check out: http://www.tidesdk.org/
It allows you to create multi-platform desktop apps with HTML5, CSS3 and JavaScript

Features phone vs Smartphone: can features phone run Web based application?

i was reading an article about smartphones and features phones, and i was surprised to see that smartphones share only the 28% of the global MArket. In Africa, Asia, South American and so on there are still plenty of featured phones.....Than thanks to Java platform and Brew can run just a few third part made applications.
Now i was also reading another article about native app vs Web applications. Web application are crossplatform and thaks to html5 the gap between them and native apps is gonna be smaller.
My question is, Can features phone (or at least a part of them) run Web applications? SO Web applications are actually targeting also features phone........You just need a browser to run web app, do they have it? And are they gonna support html5 or only html4?
First off, the phrase "Feature phones" has no exact definition. All it really means is that they have less capabilities than "smart phones", but more capabilities than a "simple phone".
One of the capabilities that a smart phone is usually better at is the quality of the browser. Feature phones usually have a less full-featured browser that will likely not support much of HTML5 and usually be somewhat behind the capabilities of a recent smartphone as they are usually trying to work with smaller memory and a slower processor.
Plus, you can generally expect smaller screens and more limited user interaction making it more difficult to interact with a web app.
If you are going to build web applications for feature phone browsers, they would have to be incredibly basic. In my experience, feature phone browsers don't even fully support HTML4. Maybe they've changed since I last had a feature phone, but web browsing in general was almost pointless on my old feature phone. Web pages looked horrible, connection speeds were horrible (less than 3G), and the screen was way too small. Any web applications built for feature phones would have to pretty much be text-only to be usable.
Nokia Asha series support web app. Though they are not smartphone but can work like them except some features.

Html5Boilerplate or Html5Boilerplate Mobile for mobile-first website?

Now that Html5Boilerplate has reached version 2.0 and is oriented around mobile-first design, should Html5Boilerplate Mobile still be used for mobile-first sites? Just wanted to ask b/f I dig through the code of each.
It appears one of the obvious differences is that Html5Boilerplate has switched from CSS reset to normalize, and added mobile-first aspects like respond.js and mobile media query sections. Standard boilerplate appears more active on Github as well. Anyone have any opinion about these two?
Stealing this answer mostly from our mailing list thread on the subject...
HTML5Boilerplate is the one you should use if you are getting started
on websites. It is optimized to work and adapt on mobile browsers.
Mobile HTML5 Boilerplate is optimized for web apps that are explicitly
written to have different UX while on devices other than the desktop.
This means they might want to imitate the UI of native applications
or be close to it.
They may make heavy use of touch-based UI paradigms and other
interactions that are not possible on a desktop browser.
They explictly use media queries and other ways to detect a
non-desktop browser and serve an experience that is different.
When I say web apps, I mean websites that are used intensively to
accomplish certain tasks (like twitter.com / gmail.com / facebook.com
/ admin interface of wordpress.com ). These sites are required to take
advantage of the space available and help users accomplish their tasks
with minimal effort no matter what device.
On the other hand, we do have websites that users visit occasionally
because they found it on some friend's email or on reddit which has
content but users rarely interact with it (other than just visiting it
or at most leaving a comment), in which case html5 boilerplate would
be a good template to use. This would be a good option for most sites
that are content-rich and require minimal user interaction.
Unfortunately for us, mobile platforms are also creating silos by
specifying custom meta tags to use to optimize for their platform.
E.g. Apple recommends using apple-touch-icon meta tag to specify
things specific to webkit mobile browsers. Nokia has its own. We did
not want html5boilerplate to add such cruft to the defaults, but this
would be necessary for someone writing an application tailored to take
advantage of non-desktop devices. There is already a lot of
consistency, but we wish there was more standardization of mobile
optimizations.
We are planning an update to the mobile version with the newer files
as well, but there is no significant disadvantage to using it today. We do not yet have a meeting point where we could just have one project, but we are hoping in the future it does
merge into one :)
No, Html5Boilerplate Mobile should not be used for new projects; it is deprecated.
A deprecation notice was added in July 2015 to the project's GitHub repo (as of this answering -- Aug 2016 -- that was the most recent commit):
The H5BP team decided to no longer maintain Mobile Boilerplate since
HTML5 Boilerplate seems to be a good starting point for any kind of
project.
It depends on approach. Use HTML5 BP if you are going to have same mark-up for you mobile and desktop website. but if you are making separate website for mobile then go for Mobile Boiler Plate

Mobile view for a web site

Is it true to say that when we want to write a mobile view of a web page, we will create a static web page? I mean, no updates, ajax, javascript or things like that?
Modern mobile browsers have very ample support for javascript, HTML and CSS features, so no, it doesn't need to be a static web page unless you're targeting outdated/non-smart devices.
Take a look at Quirksmode javascript compatibility tables for mobile and caniuse.com feature tables for HTML/CSS.
I think here you can find the answer.
You could also use jQTouch for iPhones/Androids
I know that if I open a web page and I choose desktop view It will be like a pc and I will see everything but I thought when I choose mobile view it will be more optimized and with no fancy ads with flash or something like this.You know what I mean?