Jquery Mobile or Responsive Design?

Question

I've been doing a lot of research on building Responsive design. So I came across this article from here:

Is it redundant using jQuery Mobile and a responsive layout /CSS media queries?

And it got me thinking. Won't Responsive Design replace making a Jquery Mobile website? Because responsive design is the same thing JQ Mobile does but better because you have more control over each area. Correct me if I am wrong I was just wondering and learning! So why would anyone want to use JQuery Mobile or even using JQ Mobile with a responsive design?

Answer 1

you probably won't use jquery mobile if you are supporting desktop screens too. Jquery mobile is more useful when it comes to mobiles and tablets.

Responsive design on the other hand enables you to display information on your website and keep it readable and usable irrespective of the screen size. Refer Twitter Bootstrap if you want to support all the screen sizes.

Update

Normally you have different UI for desktop and mobile/tablets. So based on the screen-size you can decide how each component(header, navbar, sidebar, body, footer) will be laid out on the viewport and how the design should be.

For example your website will have a single column layout for mobiles and 2-column layout for tablets as against your desktop version.

Answer 2

The JQuery Mobile icons can be the size you want as long as it's 14px...

While this is not entirely true, you must have a very good understanding of how CSS is used in JQuery Mobile to change the size of icons, let alone change them in media queries.

Buttons can have text and/or icons. It would be nice to have buttons with both icon and text on a desktop PC, and only an icon on a mobile device. Well this seems to be even harder because the format of the button is specified by giving btn-* classes to the <button> (or <a>) element. For instance:

<a href="#caddy" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-caddy ui-nodisc-icon ui-alt-icon">Caddy</a>

or:

<a href="#order" class="ui-btn-a ui-corner-all ui-btn ui-btn-icon-right ui-icon-carat-r">Checkout</a>

So JQuery Mobile adds more constraints to what you can do with CSS, thus making it harder to build responsive interfaces.

Answer 3

It's better to go with jQuery mobile if you are targeting mobile and handheld devices with smaller screens than a desktop.

The advantange with jQuery Mobile is that it provides you with some extra features like page events, page transitions, theming etc. It's easier ans simpler compared to writing code to perform all those manually.

Also, jQuery Mobile uses more of a fluid layout which means your pages fit in most of the screen sizes. Where as responsive design lets you display/hide information based on the screen size.

Answer 4

If you are creating a responsive design web application, may I suggest you follow the Mobile-first approach which basically means you design and build your applications for mobile first instead of doing it after the PC version is done?

Here's an example taken from the article:

 /*Large screen styles first - Avoid*/
.product-img {
  width: 50%;
  float: left;
}
@media screen and (max-width: 40.5em) {
  .product-img {
    width: auto;
    float: none;
  }
}
/* mobile first approach */
@media screen and (min-width: 40.5em) {
  .product-img {
    width: 50%;
    float: left;
  }
}

In that way, you may feel the jQuery mobile is redundant in your development process. Of couse, as others have mentioned, jQuery mobile comes in handy when you want to build a separate app for mobiles and tablets.

Answer 5

if you want to build mobile site then you have to use jQuery mobile, if u want to have support for desktop browser and for mobile browser, then you have to use bootstrap or foundation framework to make responsive website.