I would like to use the same HTML markup for both mobile and full size viewing modes. Do you think I should follow jQuery mobile's anatomy convention regardless? Eg. data-role="page", etc. mixed with full-size markup
I think you should use responsive themes regardless using jquery or anything.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices (from mobile phones to desktop computer
monitors)
In my opinion, you should go for CSS3 to handle page layout for your targeted screen sizes. jQuery mobile will not get fit for desktop view(UI look and feel). go for different styling for desktop view and mobile view.
jquery mobile is a framework that makes webpages look like native apps.
You use it to enhance your 'standard' HTML based webpages, so it's like adding on another layer to your webpage that makes it feel and operate like a native mobile app.
It is possible to use it for both desktop and mobile browsers, and for simple implementations even use the same basecode to do this.
See Mobile Graded Browser Support here for supported browsers:
http://jquerymobile.com/gbs/
Also the HTML markup used on mobile browsers and desktop browsers is the same markup, so technically there is no 'full-size markup'.
jquery mobile Enhances HTML, it is not a replacement for it.
Related
The basic problem is to detect mobile and tablet devices with JavaScript. I have a scrollbar plugin, and I only would like to display it on desktop browsers. I would like to use the mobiles/tablets default scrollbar if possible.
I decided to detect devices without the user-agent string, but focusing on mobile and tablet specific JS properties. Here are the properties I found useful to detect mobile/tablet browsers. I would combine them to make it work as accurate as possible.
window.screenX can not be different from 0 on mobile/tablet
window.orientation is "undefined" on the most desktop browsers
I you can help me with this, I would appreciate it. Is there any way to detect mobile/tablet browser in more accurate way?
Here is the link to another SO that covers detecting devices using javascript or jQuery.
Edit: However it does appear to utilize userAgent in the more popular answer. The second most popular answer does not use userAgent. It uses CSS media queries to detect, and Javascript checks against the media query to determine the device.
Hope this helps!
What is the best way to detect a mobile device in jQuery?
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.
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!
I'm building a draggable timeline of sorts for a new project using some simple jquery ui features and have run into a problem regarding mobile devices.
Namely, drag and drop just doesn't work on touch screen devices like that. I've noticed any video players you pull up run proprietary plugins on your phone so moving the timeline around is not an issue. But, seeing as I'm not really doing video, I was hoping for some sort of work around.
Thoughts?
You could try to use JQuery Mobile Drag and Drop
See here for some documentation.
NOTE Using JQuery mobile will work on some phones, but not all phones. Older Blackberries, HTC Phones, and many other ones cannot handle many JQuery Mobile calls. Look at this page for more information on compatability
What are cons to use sIFR, in terms of , development time, accessibility, speed and mobile devices?
Some cons Which i know.
Rendering speed of pages will be slow
because of it use JavaScript and
FLASH both
sIFR text will not be shown in Iphone
safari and blackberry. and if it will
be shown in other mobile browsers
then browsing will be more slow.
JavaScript and Flash player both
needed in user's browser
If we try to select sIFR text along
with normal text or two sifr text than selection
highlight will not be shown for sIFR
text.
Sifr has differene style mecanism so
we will need to look after style in
sifr-config.js, sifr.css and our own
project's css. some time for some
cross browser problems we will have
to see in all files.
We cannot put sifr js at bottom if we
will do then sifr text will be load
after other elemts
Some pros Which i know.
cross browser compatibility for
desktop browsers
text can be selected, copy and paste
graceful degradation (if JS will be disable then simple text will be shown, and even if CSS is we can see normal text)
screen reader compatible
sifr text is scalable also
My question are:
How much site will be slow if i use
sIFR in compare to simple text?
Is there any Free or open source, easy to implement, lighter solution With all features of sifr + iphone and blackberry compatibility but without Flash needed.?
sIFR is slowly becoming an outdated and overly complicated technique. Shaun Inman the designer who invented it now relies on Cufon instead. See this post where he even says:
"Fast-forward three years. Cufón is sIFR’s heir apparent."
http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon
But let's talk about sIFR. The pros:
Fairly reliable cross-browser.
Works with any modern JS enabled browser with flash 7/8 installed.
Cons:
It can be a PAIN to setup. It's not that easy to maintain but it's not a nightmare.
Text does not resize properly if the user adjusts their browsers text size.
It breaks in fluid layouts.
It won't work on mobile browsers that don't support flash (and even then I don't know if the mobile version of flash is capable of supporting sIFR
It's latent / slow loading. The browser has to perform a lot of calculations to properly replace HTML elements with flash movies and calculate the text dimensions for the flash movie to render.
Bottom line is it's very limited and fast becoming out of date. My advice would be to look into Cufon:
http://cufon.shoqolate.com/generate/
Or rely on a service like TypeKit and only support nice fonts in modern browsers:
http://typekit.com/
Remember it doesn't need to look the same in every browser. Just provide acceptable solutions for each. In all due respect waiting for sIFR to take place on a page loading in IE6 is much more annoying than just seeing helvetica instead of the font your designer fell in love with.
Disclaimer I am a designer and have worked as a designer for several agencies during my career!
the main con of sIFR is cufon it's faster, smaller and flash free. BUT you can't select the replaced text anymore.
sIFR is the best solution as far as I know, but I would avoid using it on mobile devices though.
Maybe you can make some mix of Cufon and sIFR, where you use Cufon for the mobile part and sIFR for the other browsers.