In one of my website I use Twitter Bootstrap 2.3. I love its responsive behaviour, media queries in mobile devices. But it lacks of mobile features (especially linked listviews) So I need to use a framework that would handle mobile version of my website.
After some research I found that jquery mobile, sensa touch, jqtouch, iui, mobilize.js, zepto are possible candidates.
What would be your recommendation for a javascript framework/plugin for mobile pages, that would work well with twitter bootstrap ?
Possible related questions:
Bootstrap list view like jqm
twitter-bootstrap vs jquery-mobile
Using Bootstrap with jQuery Mobile
Also read this: Twitter Bootstrap Navbar: [Left Button -— Center Text -— Right Button]? II
I think i should be possible to build a mobile interface with Twitter's Bootstrap (3). And yes you're right (linked) listviews will miss. Maybe check http://getbootstrap.com/components/#list-group first. Of course you will need to write some code to handle the actions.
Other points to consider: Navigation and page structure. Frameworks like jQuery mobile serve more pages on one url, see: http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-navmodel.html while sencha use a MVC approach. Consider http://getbootstrap.com/javascript/#tabs (or http://getbootstrap.com/javascript/#scrollspy maybe) to mimic such structures.
Other examples, see: How to make a JS horizontal content slide from px to % responsive a nice interface with TB by #boblet which adopt to mobile very well now: http://bootply.com/73715. David Panzarella started a clean mobile navbar with icons: Bootstrap 3 RC2 Navbar with Multiple Collapses And a alternative mobile navigation stucture can be found here: Toggle sidebar on mobile device with Twitter Bootstrap 2.x
Good luck
If you are ready to mess up with Bootstrap and other several frameworks together then make sure you have sound knowledge in jQuery, JavaScript, CSS.
Each framework has their own way of enforcing styles etc, so if you are to combines multiple platforms together, you will often encounter issues such as the expected style from expected framework is not being applied.
I’d recommend you to stick with jQuery Mobile. jQuery Mobile 1.3 has great deal of Responsive design concepts. In the release notes itself they’ve mentioned that they are working hard to support Responsive designs. Read the official documentation provided by jQuery Mobile. This will give you a good head start.
Disclaimer : I have used only Twitter Bootstrap and jQuery Mobile. But I’ve heard from people other Mobile frameworks are not as flexible as jQuery Mobile. Also remember Sencha touch is very fast compare to jQuery Mobile but bit difficult for absolute beginners to get started.
I would recommend iUI since i'm working on it (eh eh) and because it's more or less an empty canvas you can "draw" whatever you want on.
JQuery Mobile or Sencha are nice, but they come with dozens or buttons & UI elements you might not need for a website. It's even getting a mess if you want to give a custom look to your mobile website when everything is predefined.
afaik, Zepto is only a lighter JQuery, so that wouldn't solve you linked listviews issue that much...
Please, give a try to my iUI v2 project, Emy, that you can try here:
http://www.emy-library.org/demos/
Still a few bugs to fix but i'm damn close to the initial release. Big difference compare to iUI are HTML5 syntax, custom animations, full documentation and WindowsPhone support.
http://www.emy-library.org/documentation/1.0/getting-started.html
Cheers!
Related
I have read many "bootstrap vs. jQuery mobile" articles. It is quite clear that they both have different aims. So what about combining them?
Besides other, I like the responsive layout features of bootstrap. On the other hand I also like the "page" approach and the possibilities of jQuery mobile (including swipe events etc.) and transitions.
Are there professional projects combining both? Or anybody tried to do so and failed?
I know Using Bootstrap with jQuery Mobile looks like a similar question but it is outdated (refering to bootstrap 2).
Conclusion
I would not recommend combining JQuery Mobile and Bootstrap for complex projects.
JQM Knowledge
We are building a series of sophisticated web application all using the JQuery Mobile (JQM) Framework. We have spent over a year producing this and now have pretty reasonable knowledge of JQM.
Positives: Some of the features are useful such as persistent footers and the mobile friendly components which give the HTML5 app a pretty native feel.
Negatives: We have had to disable quite a lot of features of JQM such as preloading pages to create the complex functionality we required.
The end result is good as we have fooled iOS developers into thinking it was native.
Bootstrap Knowledge
I have also recently produced a responsive website using bootstrap to advertise the above JQM product and that has worked out very well (http://www.sure-sense.com).
The Combo
I tried to combine the bootstrap with the JQM project on a dashboard application but that has quickly highlighted that the 2 frameworks are not compatible. The CSS of JQM marks up the components on top of the bootstrap CSS and the results are some components looking like JQM and others like bootstrap.
Personally I think jQuery Mobile has more features than you really need, also it locks you into a way of building which isn't flexible. It starts to get buggy and messy when you have many panels with different animations and usually gets you 80% of the way very quickly, but then takes a long time to do custom things.
I would use twitter bootstrap and then add plugins to support features you need.
Bootstrap has lots of unofficial plugins you can add to imitate the functionality of jQuery Mobile:
http://bootsnipp.com/resources
there is a guide here to use the swipe events from jQuery Mobile only:
http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/
Or you can use your own plugin to manually add the swipe events:
http://stephband.info/jquery.event.swipe/
If you want an expandable sidebar menu you can easily add it yourself:
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
http://jsfiddle.net/Osis/Mns8q/
http://codepen.io/krichnafsky/pen/cuhkL
http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
For one-person work, I don't think it really matters what single solution or combo to be chosen since it's all you and the very only "you" to make them work.
However, for a team work piece, in a company or even an enterprise, the work contains Making template + Implementing applcation and the responsiblilities go to creative design team and IT team, respectively. So the final solution need to be OK with both these 2 teams.
For our company, CD team tends to use BootStrap cause they are requested to make many custom, special-effect web templates, however IT team already did some jQM applcation and they like to use it for future development work, thus a conflict.
In the long run, "User requirement" overcomes the conflict and we are now going to use BootStrap template and trying to avoid using jQM in our main mobile web applicaton development, at best.
A pitty but need-to-accept choice.
In one of my mobile app projects, I decided to use Bootstrap & JQM together. I used JQM widgets then dedicated Bootstrap for handling the structure of the layout. The simple reason is, I wanted better control of the grids since Bootstrap have a higher number of grids than JQM which has a very limited layout control. I also want to use spanning across grids which is very much possible in Bootstrap but not in JQM. Although, overriding some CSS codes is possible to be able to achieve my goal in JQM, it's not a smart thing to do.
Just be ready to fix some minor conflicts in the naming conventions used by the two different UI frameworks if you're planning to do the same thing.
What is main feature of Sencha Touch over jQueryMobile I don't understand.
as per my knowledge about this two technology:
1) jQueryMobile have very simple data attribute feature for design app for cross mobile platform but as compare to Sencha Touch.
2) Sencha Touch have new concept and their structure to implement designing for page is very difficult compare to jQuery Mobile.
Then What is significance of Sencha and jqueryMobile and What is their own area in Which they both play role significantly ?
Intro
Unlike jQuery Mobile Sencha Touch (just like App Framework) is made specifically to work on mobile platforms and it is highly optimized. Where jQuery Mobile is made to work equally on desktop and mobile devices and it is not optimized like Sencha Touch. This is not bad for jQuery Mobile but it also means jQuery Mobile is not best solution form mobile hybrid applications.
Good side of Sencha Touch
It is several times faster then jQuery Mobile, you can find several benchamark articles if you google a bit. From my experience Sencha Touch mobile applications works much much smoother then jQuery Mobile ones. Again this is not an attack on jQuery Mobile, Sencha is highly optimized not to mention build to run only on web kit browsers.
Much better application packaging system then Phonegap which is usually used with jQuery Mobile
Did I say it is FAAAAAAST, a little bit slower then App Framework but still extremely fast.
Excellent documentation with huge number of tutorials and video examples.
vs. the bad
Unlike jQuery Mobile don't expect Sencha Touch to work on a desktop browsers. First it is optimized to work on a smaller devices and it will work only on web kit browsers which makes it unusable for Firefox, IE8+ ....
It uses complex and alien syntax, specially to someone coming from jQuery Mobile or jQuery like syntax.
Development application is a paid app so you need to expect initial expenses.
Don't expect native app feeling, mobile apps made with HTML5 will never have 100% native feel.
Unlike Sencha official documentation jQuery Mobile is still much more represented on the internet
Final advise
If Sencha Touch is not something you are willing to spend time on and jQuery Mobile is too sluggish for you, consider using PhoneJS or Kendo UI. Unlike Sencha Touch, they are built on jQuery, but unlike jQuery they are fast as Sencha Touch.
There is also a jQuery fork, special for mobile devices called Zepto.JS. You have a lot of extra mobile events like swipe and it's a lot smaller and faster than the regular jQuery lib. Downside is that you don't have the UI elements like you have in Sencha Touch or jQuery Mobile, but you have a lot of freedom. And it's MIT licensed. I like that a lot.
I've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.
I'm working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!
I know there are a number of frameworks to help make web applications on Mobile Safari/Webkit look and behave like native applications (eg, jQTouch), but are there any more light-weight libraries that help out at a slightly lower-level?
eg, I might want to add some animations on certain touch events to reproduce an iPhone style swipe.
I don't want to create an iPhone web application as such, just enhance an existing site with a few special touch events.
It's not so difficult to create this stuff by directly using the touch events that the device provides, but some of the iPhone animation styles are quite complex to reproduce. eg, the bounce when you get to the end of a scroll bar, etc... Just wondering if anyone has done the work and wrapped it up into an open source library.
This doesn't answer your question completely, but since you mentioned bounce scrolling specifically, TouchScroll was just released on Tuesday.
I am looking for the same thing, JavaScript frameworks free from IE stuff..
So far
XUI
http://code.google.com/p/xui-js/
SLY
http://github.com/digitarald/sly
Coming Soon
jQuery for touch devices (not jqtouch) http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/
http://zeptojs.com/ is all you want.
It's jQuery trimmed for webkit mobile. Excellent library with (brand new) great documentation. Handles ajax, dom selection, touch events. Does not have UI components.
Very lightweight.