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.
Related
After checking a few dozen articles I am still in the dark how to actually implement a responsive ux-design (I really understood the layout part). A simple example: Bootstrap (CSS framework) collapses toolbar buttons into one drop-down button on mobiles. That's all I need! I'd like to understand just the basics of this very behavior. Does it requires only CSS, or do I need JavaScript too? I actually don't know any other way than JavaScript.
In my apps (IDEs), I usually have lots of toolbar buttons and at a certain breakpoint or width I guess I will have to put them just into a dropdown button, in one way or another, right? The obvious things such as re-arranging layout containers per break-point/width are a piece of cake with CSS; at least this is how it looks.
Update, I am working only with JS based widgets. Mostly generating all HTML.
You can make multiple (for different screen sizes) menus, dropdowns or navbars etc. And then use media queries to just display one of them at a specific screen width ( ie display: none for others). And I think Bootstrap works similarly (It might also use JS).
In this way your design will become responsive, although it will increase file size.
Check GRID. It's a (great) simple guide to responsive design.
http://adamkaplan.me/grid/
After doing lots of research and development; there is basically nothing standard out there for a JS based solution. I checked Dojo, Sencha and some others paid stuff. At the end I did end up with custom JS code. Media queries did only help to some degree, actually just when it comes to moving and sizing layout containers and pictures; but that's pretty much it. Its even better to do it in JS only since calculations become far more accurate and interfere less with your Code.
So to me 'responsive design' has actually no mean at all; its great for regular web-sites but really not for complex ux.
back to square one,
g
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!
Can somebody throw some light as to what are the various ways this Site is using to be responsive. Especially how is the top and left navigation changing to drop down , when you when you re size the browser.
http://www.smashingmagazine.com
I am sure this doesn't use twitter bootstrap. Are they any better ways to go responsive without leveraging twitter bootstrap.
Responsive design has been around in name longer than Twitter Bootstrap, and in principal it has been around for even longer.
Are they any better ways to go responsive without leveraging twitter
bootstrap.
"Better" is subjective, but there are many ways:
Another out of the box framework
Media queries
JavaScript to adjust the page layout (your own, or something like Masonry)
Floating elements which wrap based on width
Percentage-based layouts
All of the above
The site you linked to actually has good info on responsive design: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
These frameworks look interesting:
http://framelessgrid.com/
http://webexpedition18.com/articles/responsive-css-frameworks/
http://foundation.zurb.com/
Can someone suggest a JS menu script that would be able to support menus such as those that are made here http://www.brightstarr.com/US/Pages/Default.aspx ?
I've been searching the web but can't quite phrase it correctly so I always end up either on Superfish or some other plain dropdown menu?
What I need is support for big menus, broken apart in sections with optional images support (image per menu link).
The particular page doesn't seem to use JS for their menu at all - just CSS leveraging the :hover pseudoclass. Found a tutorial here. The bottom line is that you write all the markup your dropdows require, season them with CSS styles to taste (and position!), and finally put the :hover in place in your stylesheet to just make the submenus appear when you want them to.
Soh Tanaka's Mega Menu is the classic example of setting up this style of menu. I'd go so far as to say it's the gold standard for mega menu scripts. After building the tutorial, it should be easy to do anything you want inside the divs for each relevant area.
The best part about using a pre-done solution with a tutorial like this is that not only do you get to learn, but it's also been well tested and revised.
If the above example is a little too strict with <li> elements, you might try this tutorial from SitePoint
I would just search for plugins for your favorite javascript framework. There are probably about 1000 if you search "jquery drop down menu plugin". The big sizes and adding of images is pretty standard in the ones I've used as well since they are just divs. I don't know if you are used to working with jquery but I am sure there are plugins for all the other big frameworks out there as well.
I wrote the menu for the BrightStarr Site. It doesn't use JS at all, I tried lots of techniques before deciding on this and I choose this for the simple reason that it performs much better on mobile devices than any other JS solution I've come across.
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.