5

I have read the book "Mobile first" by Luke WROBLEWSKI and many other readings on that topic. I'm a web developer and now I'm really convinced that "mobile first" or "progressive enhancement" is the way to go.

Now I'm looking for a framework to achieve this.

JQuery mobile annonce they are "mobile first" but I have given a try during some days and now I would tend to say "No it's not". You can't mix it with other frameworks; it does tricks like keeping all pages in the DOM (forcing the load using ajax) so it doesn't make my life easier. Trying to use it to make progressive enhancement and finish by a desktop version without unload it, seems impossible. I mean you don't want to have big buttons with a desktop computer so I guess I will need to just drop the js&css of the framework and that sounds weird. I don't even know if it's possible.

JQuery mobile looks like a framework to achieve a dedicated mobile web version of your site with a look&feel as an native apps more than a mobile first website.

So please could someone tell me where I'm wrong: * is jQuery mobile really "mobile first"? * could I do progressive enhancement (with desktop as last target) with jquery mobile ? in case of yes, please tell me how.

Here is the corresponding page telling that jquerymobile is mobile first: http://view.jquerymobile.com/1.3.0/docs/intro/#ProgressiveEnhancement

I have also try zurb's foundation and it works well but do not provide enough widget or tools to provide nice mobiel UI. Mix both would be the great point but it will need a lot of works (CSS conflict + may be JS conflict) and I don't even know if it's possible.

Any advices on how do you use jquery mobile in a mobile first context will be welcomed !

Gajotres
  • 57,309
  • 16
  • 102
  • 130
toutpt
  • 5,145
  • 5
  • 38
  • 45
  • To make this question more constructive, can you provide examples of frameworks that jQuery Mobile conflicts with, and elaborate more on what you mean by *finish by a desktop version without unload*? (FWIW, page DOM caching and AJAX loading can both be disabled, globally or selectively.) – Frédéric Hamidi Mar 29 '13 at 09:59
  • I have tried to improve the question. I really want to find a solution to do mobile first / progressive enhancement to have also a nice UX on desktop – toutpt Mar 29 '13 at 10:15
  • 1
    This is subjective, but check out the [1.3 Demo Center](http://view.jquerymobile.com/1.3.0/). It is implemented with jQuery Mobile, and renders quite well on desktops IMHO. – Frédéric Hamidi Mar 29 '13 at 10:19

2 Answers2

8

Basic Idea

Lets start from the beginning, for everyone to understand, definition of mobile first is:

Mobile First is the idea that web sites should first be designed for mobile devices, including only those tasks/items that website visitors use most. Then as screen real estate increases, add in tasks/features as needed based on user priority.

Quotation taken from here.

Advantages and disadvantages of jQuery Mobile

From my experience there isn't any existing framework that can be fully categorized under mobile first. jQuery Mobile is closed but not enough.

First, I can agree with your statement that jQuery Mobile can't be used with other frameworks. jQM is a heavily customizable framework and it can be, to full extent, customizable to almost very other available framework.

If you want to use backbone or knockout that it can be customized to their MVP or MVC architecture. If you want to use it with similar framework they use only jQM functionality you want. You only need to Google it.

But, and I will repeat it constantly, currently jQM is not a good "out of box" platform for desktop development. This is simply the fact. While it do provide widgets adapted to desktop browsers they still look like over sized mobile widgets.

Second big disadvantages is their official documentation. While heavily detailed in some segments it has a ton of errors, non existing examples, lacking API descriptions. IT looks like someone explained you what car is but forgot to mention how to drive it correctly.

Good Example

This can be fixed, unfortunately only with a heavy customization. And by the definition this is not a mobile first framework. But to make my point more precise here's a good example of jQM usage in mobile/desktop environment: Mobile Songmeanings. Respect to that developers, they did a beautiful job of merging mobile with desktop. Unfortunately this is but a beautiful drop in a ocean of mediocrity.

Common Solution

Most common fix to this problem is usage of jQM for mobile devices and jQ UI for desktop environment. We should also add a Modernizer into this mix cause we need it to:

  • separate mobile environment from desktop one
  • create a dynamic content loader (js and css) depending on a detected environment

Final Thought

If you want easy out of box solution then I don't advise jQuery Mobile usage. It takes few months of hit and miss learning, development and testing, good and bad sides, how to use it with other frameworks and such to fully understand it.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
1

Moff.js - Javascript Mobile First Framework. It follows all mobile first techniques and requirements. You can create mobile first page easy. First create page for mobile device, then load additional parts of page by user request or by extending window to large devices like tablet or desktop. This is article about its capabilities.

Kadir A. Fuzaylov
  • 11
  • 1