What, if any, support is there for CSS3 in mobile browsers? The specific browsers I'm curious about are the ones used in the iPhone, Android, and Blackberry phones. Any links to relevant resources would also be greatly appreciated.
Both iPhone and Android systems use WebKit as the rendering engine in their mobile browsers. I believe Blackberry are moving to Webkit as well at some point. This engine has some of the best support for parts of CSS 3 available at the moment, as well as quite a lot of proprietary extensions.
I would recommend researching what is available in WebKit, and then testing.
A great resource for support tables is http://www.quirksmode.org where PPK is doing more and more mobile browser testing to answer just these kind of questions.
You can try acid3.acidtests.org and http://www.css3.info/selectors-test/test.html on the respective browsers to check some compatibility, but that may not be an exact determining factor of full compatibility. However I don't think any of the mobile browsers currently fully support CSS3.
a do quirksmode.org specifically this page: http://www.quirksmode.org/webkit.html
In the BlackBerry Documentation for Developers, there is a documentation for the BlackBerry Browser, including CSS Reference - BlackBerry Browser. There is no specific mention of CSS3, but that document lists supported CSS properties.
There is also a BlackBerry Widget web standards support page that states 4.7.1 and 5.0 have partial support for CSS 3 color and full support for CSS 3 marquee, CSS 3 media queries, CSS 3 namespaces and CSS 3 selectors.
well when i mind internet i found usefull source to you i hope it will help you more excellent description on mobile browser compatablity
Related
Sorry for this very basic question but it's important to know.
I never used this kind of framework before and i am interested by trying ionic !
We can build html5/AngularJS apps with this framework, but is it only to generate native code for mobile apps or can we also use our code for the web app (should we maintain 2 different code ?) ?
Check out the browser support section
Ionic is focused on building native/hybrid mobile apps rather than
mobile websites.
While you can get support from webkit, there isn't much support for other desktop browsers because, well it's just not what we want to focus on :)
It is browser competible, however not officially supported.
I took a look to the new Financial Times web application for mobile and I read this article about that, it's HTML5 web application. It seems to be an interesting way to deploy web application for multiplatform mobile (Android, iOS, Blackberry, Windows Mobile). How is it possible to create that kind of application? Just HTML and Css for mobile and Java or .NET app for the dynamic content generation, isn't it?
What do you think about that?
It's a nice idea, but there're problems too:
1) Not every mobile web browser has the same standards, which creates problems. Some for example support HTML 5, others do not. Some only support *3GP videos, others support a variety of formats. Mobile Safari supports TIFF images, other web browsers tend not to.
2) There're a lot of different screen sizes to handle if you're aiming at multiple platforms. We all know the screen sizes for iOS devices because there aren't that many. But in Android's case, there're a lot of different sizes which you'll have to be prepared for.
Just my two cents :)
Check out this article (http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/) for some examples on how to get started.
As i am going to develop mobile web app for all devices. My question is, if the browser is not support html5 kind of stuff, Whether Sencha will support HTML4?
Thanks in advance,
srini
[sencha person] #Sri. Sencha Touch works on Android 2.1 and Apple iOS ONLY for release 1.0, and will be supporting RIM, Nokia etc. devices as they add modern browsers to their phones that can support javascript and CSS at reasonable performance and correctness.
[Update: We've tested the new RIM Blackberry Torch, and will be adding it to our support list - probably in release 1.1]
A majority of existing phones (Nokia featurephones etc.) are not capable of running a web application because they lack javascript performance, CSS support and even full HTML capabilities. In our (opinionated) view, the only phones (today) that can support a proper web app experience are Android 2.1+ and Apple iOS.
Well, I cannot give a definitive answer, but given that ExtJS (the name until recently) still supports Internet Explorer 6, I'd guess so. They are double-licensed as GPL + proprietary license, so cannot just drop support for something outdated since that would piss some/many paying customers.
I'm beginning the process of learning the ins and outs of developing sites for mobile web browsers. Are there any good resources/communities online that discuss mobile specific site development issues?
My initial understanding is that to cover different phones you need to build one site that is enabled for browsers with the webkit engine (iphone, android, etc.) and another more basic site for other older browsers, is this assumption correct?
Also what does developing for webkit mean exactly? How is it different than just using javascript/css/html? Is it the same except that you limit yourself to webkit specific functions and css? I looked on the webkit site, but it didn't explain it in those terms.
Are there any other snafus I need to watch out for when developing for mobile browsers?
Your assumption is correct, you will need to develop multiple versions of your site targeted at different browser types.
Webkit is the engine used by Safari (mobile Safari), Chrome, and Andriod Browser (mobile Chrome?) you can use standard Javascript, XHTML, and CSS, the main thing, is making your site "fat-finger-friendly" since these devices are all driven by touch screens.
What I mean by "fat-finger-friendly" is that you have large links/buttons that are easy to hit with your finger, most mobile browsers are good at approximating which link you intended to touch, but if you have alot of stuff jammed together, it frequently gusses wrong.
Another consiteration is screen size, and thus the width/height of your site.
The best illustration I have of this is from Ars Technica -- checkout their site in your desktop browser, then check out their site in your mobile browser. Its a very slick version of the site. (http://www.arstechnica.com/)
Webkit is rendering engine designed to allow web browsers to render web pages. It provides the set of classes to display the web content in windows and implement different features which are provided by browser (such as links, fwd/backward etc).
You don't need to build the different sites for different rendering engines such as webkit. Designing of mobile web site should consider the screen size and how different components look/behave in different rendering engines.
Look at this question for more details of how to build the mobile friendly site.
If you want to support older browsers, then you should have multiple sites. But take a look at mobile browser stats first to decide if it's worth it. If you just want to make your existing website work for iPhone/Android or other phones with A-grade browsers, then you can customize with a mobile friendly CSS (for small screens). But to get good performance on mobile devices on slow/unreliable connections, you probably need to have a separate stripped down html.
Apple has a very good guide to help you optimize your site for iPhone. Most of it will also work on modern mobile browsers:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Peter Paul Koch has done an excellent research on different mobile browsers. He has several articles, but this one is a good start:
http://www.quirksmode.org/mobile/browsers.html
Like Nate Bross mentioned, you should optimize for touch devices. Unfortunately it's very difficult to know if a device has touch or not, since there is no media query for it. You can do user agent sniffing for some devices, but I don't recommend it. More discussion here: Optimize website for touch devices
For the moment, I detect touch events (with an exception for Chrome). If this returns true, I inject a touch CSS. A bit nasty, but the other options are worse:
function() {
if( /Chrome/i.test(navigator.userAgent) ) {
return false;
}
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
You specifically asked for sites for mobile web browsers, but you might also check out the possibilities of creating a mobile web app. It looks like an iPhone app (or Android for that matter), but it's built with the help of HTML5. You can do pretty slick animations with the CSS3 in the webkit image, and iPhone also has meta tags to hide the Safari navigation toolbars. Users can then bookmark your page to their home screen, and it will work just like a normal iPhone app. Of course you're limited to the browser and it's performance. But you can create multiplatform apps :) HTML5 + JS is the only multi-mobile-platform language Steve Jobs approves, and with the help of PhoneGap you can even get it into the AppStore!
If web-app sounds interesting you should check out jQTouch, jQuery CSS Transition plugin and of course Building iPhone apps with HTML, CSS and JavaScript by Jonathan Stark.
If your site is pretty simple (just content delivery) I'd suggest a service like mobify: http://mobify.me/
A lot of big publications use it, and I have too. In fact, Ars Technica (which Nate Bross pointed to in an earlier reply) uses this service to display their mobile content.
You have control over style, and that's about it, so if your site is more complex it might not be for you. Otherwise, it's a good service. You can have a mobile site up almost as quickly as it takes for the DNS for your mobile site's address to update.
I disagree that you need to build multiple versions of a Web site.
One simple HTML5 Web site will work across all mobile browsers and desktop browsers too.
The beauty of the latest developments of HTML5 is that you could use new Iphone/Android features like Geolocation, and older browsers will simply ignore the JS code if you carefully put it within try catch statements.
For "fat finger" type problems you can serve a different CSS which makes buttons bigger if you really must. Good browsers should make default buttons easy to press in any case.
Keep it simple and you won't have to see these fragmented & costly device dependent approaches. Write HTML5 by hand and use a validator. Good luck!
Most smartphones use modern browser engines that have implementing HTML 5 (or at least partially). Should I start using HTML 5 for my web application ? Where can I find a list of browser engines used by most popular devices (iPhone,Android,etc.) ? My application doesn't have to work on older desktop browsers.
Depending on how commercial/critical your web page is, the answer differs.
If it is CRITICAL that it works on ALL smart-phones, use HTML4, with a view to upgrading it to HTML5.
If it is preferable that it works on most smart-phones HTML5 will be fine. Even where it is not supported, the page will render - it just won't look like you intend. I'm using HTML5 with a couple of additions that help older browsers to render it correctly.
I did a browser test of HTML 5 (with the helpers for older browsers) with the following results:
http://www.stevefenton.co.uk/Content/Blog/Date/200907/Blog/HTML-5-Browser-Test/
According to this post (iPhone developers abandoning app model for HTML5?), it seems that starting to use HTML 5 is feasible.
Unless you only cares iphone, 5 is not well supported for "most" smartphones.
If you really want good compatibility on smartphones, you'd better keep with 4.
The Wikipedia mobile browsers page has a decent table at the moment.
On the “most popular devices” issue, if you’ve got any information about phones used by your app’s intended audience, that’ll be more valuable than general popularity.
Having said that, I think in general the iPhone’s sales figures are significantly ahead of everyone else, and the iPhone has great HTML5 support. I’d go ahead with HTML5, as I think the other smartphones will either catch up with their HTML5 support, or disappear.
Android’s pretty much the only other smartphone with significant sales, right? I think Google’s keen on HTML5.