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.
Related
I want to make a mobile version of a website (you know, those with .m in the URL). How is this done, and what is different from a regular website? Can I still make my website in HTML/CSS/JavaScript, or do I also need some additional tools for mobile sites?
Final question - is there a difference viewing a mobile website on an Android phone versus an iPhone?
Thanks.
How is this done?
In the same way as you do websites, is just HTML/CSS/JS and a bit more.
What is different from a regular website?
Basically but not only:
The display size is the biggest (or in this case, the smaller) difference, you have to take care of small displays and viewports.
The user will interact with the finger and not with the mouse, so the clickable area must be bigger.
Can I still make my website in HTML/CSS/JavaScript, or do I also need some additional tools for mobile sites?
Yes you can (and should) use just HTML/CSS/JS but check for the different video/audio tags already on webkit mobile.
Is there a difference viewing a mobile website on an Android phone versus an iPhone?
Both come from webkit but they have small differences (like the touch events) but for mostly websites the differences are minimal.
A website, even a mobile one, is still a website, which means you'll use the same stuff as for any other normal website : HTML, CSS, Javascript, images...
The main thing you'll generally have to think about are :
Mobile devices often have small screens, and various resolutions,
Mobile networks are not really fast, and sometimes have awful ping ; so, your pages must be lightweight, and not include too many external files/images.
Touch-screens mean you'll have to put some spaces arround the things that must be clickable (to prevent the user from clicking the wrong link because two are too close)
iPhones and recent Android devices have some quite advanced browsers ; there should not be that many differences between them (you might find more differences between android 1.6 and 2.3 than between android 2.3 and iPhone ; and there are also many different browsers on android) -- still, don't forget testing on as many devices as possible
You can make your mobile version using HTML/CSS just like any other website. There are guidelines you can follow to help you with the process. Search Google.
You can also look at platforms that help you put things together like jqTouch
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.
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!
I am going to develop a content rich application that ideally should have been an iPhone-app, but since I'm short on time, I will stick with technologies that I can, such as JQuery, CSS and HTML. The more mobile devices my site runs on besides iPhone, the better.
A brief search on the web leaves me with the impression that there are three tools I may use: iWebkit, JQTouch and iUI. I have toyed about with JQTouch, which I find impressive and simple to use.
With simplicity comes lack of customizability; I would very much like to have sliders and other cool features in my GUI.
Any comments on which of these three to go for?
I've talked about this subject a couple of days ago in a WebTuesday meeting, here are the slides of the presentation:
http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview
I talk about the following frameworks / technologies:
iUI
jQTouch
WebApp.net
iWebKit
SproutCore / Cappuccino
Yahoo! Blueprint
I personally have used iUI, and then later jQTouch, which I literally fell in love with.
I actually just finished writing and article comparing iUI and jQTouch. In my opinion, go with jQTouch because it covers a greater selection of WebKit browser phones like the Palm Pre, Droid and Nexus One.
It will be a slightly larger in file size because it includes the core jQuery library. But if you are already using jQuery in your site, that shouldn't matter.
You check out my article here: http://www.heinencreative.com/archives/articles/iui-vs-jqtouch/
I have done a short list of frameworks for this type of development see here and am working on an article comparing but the holiday and work intervened.
Personally i have done a site in iUI which was a conversion from a Mac Widget, so reused a lot of code. It was relatively easy to do, the code is solid (for iUI) and there is a site where there is support.
JQTouch looks good and so does iWebkit. Quickconnect is well supported and has a book associated with it (which by now should be wildly out of date) and Quickconnect claims to be useable for other mobile platforms as well.
Only hasving lloked i would probably go for JQTouch next time around as it will have mainstream support just with it being based on JQuery.
jQTouch and iUI work with QuickConnect Hybrid framework and PhoneGap.
jQTouch is jQuery web GUI framework for mobile devices (e.g. iPhone, Android, etc.).
iUI is javascript web GUI framework for mobile devices (e.g. iPhone, Android, etc.).
While QuickConnect and PhoneGap are Hybrid framework for mobile devices. For example in iOS, QuickConnect and PhoneGap use Xcode + iOS SDK + Javascript, while in Android, the two use Java + Android SDK + Javascript.
I use these frameworks, jQTouch is better than iUI at the moment. QuickConnect is also better than PhoneGap. However, PhoneGap is popular since it address other mobile OSes aside from iOS and Android. QuickConnect has support for iOS and Android.
I've gone with JQTouch for some prototyping as it seemed the best fit, and the most convenient for my needs.
Yet I would not recommend to build your main business around a webbased iPhone app. Even though it has quite a good set of features, it just doesn't feel responsive enough, and getting to get the app look perfectly like UX designed it can be some pain in the ass, as not the whole set of iPhone UI elements are implemented.
Yet I have to say that it was a matter of minutes to get a service-consuming app running that looks like a real iPhone app.
Jqtouch has the community support and also certain very helpful libraries now for persistence HTML5 support with inmemory db and even more so very fluid appearence.
I've started with iUI a way back but i'm now using jQTouch wich i find much better, specially if you like working with jQuery like me. Havent tried iWebkit though, but from what i've seen of it it can't compete with JQT.
We have a rather simple site (minimal JS) with plain html and CSS. It is a simple mobile interface for our main application.
We are running into trouble because we have more than one column and several browsers seem to force single columns.
Through some searching I ran into 2 meta tags.
<meta name="MobileOptimized" content="220" />
<meta name="viewport" content="width=320" />
With these we have a good 'scaled' view for IE Mobile and the iPhone. We have not run into any problems with palm's Blazer. But Blackberry is another matter.
Does the Blackberry have a simple way to control the view of the browser as well? By simple I mean without making a special page for that device.
I wouldn't bother making a "medium" version for the iPhone etc, iPhone users can just look at your real web page easily enough. Have your full version and a single column version, and you'll reach the largest audience with minimal work.
To answer your question though, there's no good way to make the Blackberry do anything other than 1 column views. You can get it to look fairly professional, as CSS and simple javascript still apply, but you'll have to lose a lot of your horizontal real estate.
My recommendation would be to create two or three versions of the site:
Full blown site for modern desktop browsers (if it's a very heavy application)
Site with minimal JS and CSS for good mobile browsers and Desktop browsers (IPhone and SkyFire come to mind)
Site with no JS, single column and mostly just plain text.
The reason is that coding for 3-4 desktop browsers is hard enough. Don't kill yourself over another hundred devices to code for and create a simple page that just puts out information.
Remember the basic design principle of web development: Users don't care. They want information, or functionality. It will look a whole lot better for you if you had a simple, clear layout for bad mobile browsers (IE or Blackberry) then try to hack up something that eventually becomes a maintainability nightmare and potentially make you look bad if somebody uses yet another mobile browser and you have not written the phone-specific site for yet.
BlackBerry (from OS 4.6 and higher) supports both the meta-viewport tag as well as the meta-HandheldFriendly tag. See the "Content Design Guidelines" document at http://na.blackberry.com/eng/support/docs/subcategories/?userType=21&category=BlackBerry+Browser for details.