I'm hardly trying to find a good solution for creating smooth animations on mobile devices, especially on android.
First I found out that using javascript is no option -> android is SOO sadly slow with it
Then I found CSS-transitions -> android still horrible lagging
Then I found this script and seems to work fine (webkit transformation?)
Can you tell me how to do it right? Maybe there are better ways..
Also I don't really want to use a third-party script, even if it is lightweight.
android supports css transitions since at least version 2.1 http://caniuse.com/#search=transition
what are u exactly aiming at? what browsers, and on what devices are you testing? keep in mind that slowness could be happening because hardware and not software limitations
Related
been a few weeks trying different ways to detect a cross-domain iframe click on mobile without success.
I have tried all that has come through, all plugins, all forum tips, and yet i can't get a way to do it.
I coded whatever way i through will work and i got no positive results.
Some plugins are working on newest phones like s6/7 (maybe for other older phones too?) using blur events but i need a reliable solution that will work with most to date phones.
Maybe there is a workaround with touchstart function for mobile..
I lost my chances into believing that there's a way to do it so today i am asking here maybe someone figured it out.
Thank you.
Ps this is a demo of a plugin called iframetracker.
Can someone tell me if it works on old mobiles? http://cdn.rawgit.com/vincepare/iframeTracker-jquery/master/demo/index.html
The answer in short is No.
Regarding your plugin, on the github, it states very clearly:
About mobile devices
This plugin doesn't work on mobile devices such as smartphones and tablets, because this hardware uses a touchscreen instead of a mouse as click input. This design makes the boundary monitoring trick useless
This is why you won't find a solution for your issue.
There is no known work around for your particular problem with touch screen devices.
I'm trying to figure out how to streamline my development process for responsive design. The standard way is to design mobile first by using media queries going from mobile to desktop sizes.
The issue I'm seeing is supporting IE7 and IE8. The solution everyone is going to, is to use response.js. What about supporting those who disable javascript? Is there something I'm not seeing?
EDIT: I know the its a super small percentage of users that have JS disabled. It's a requirement for this project.
Mobile First follows the path of Graceful degradation. To put it simply, "We provide backward support up to this point only, or you get nothing". And for older browsers, you will get nothing. This is the path of polyfills, patches and workarounds which is what scripts are trying to do.
On the other hand, Progressive Enhancement caters all basic functionality only up to what the browser can do. It's like "We support everything up to the latest which you support". This is what you are trying to do, and what you should be doing.
So let's exploit the fact that CSS is cascading. Initially use a fixed or fluid layout, then the responsive layout. For browsers that don't understand media queries will simply disregard it, leaving your fixed or fluid styles to shine through.
Mobile browsers support media queries or have JS most likely turned on. Wap browsers also live happily with fluid layouts.
*For JS, 95% of users have JS on. The other 5% are people that
have outdated browsers (Mosaic?)
are not desktop browsers at all (crawlers, proxies, scrapers)
wap browsers (except some browsers like Opera Mini which run a few JS on load)
and paranoid people who fear JS.
*Now, how much of those are actually a browser? Most likely #3 and #4. What are the chances that it's IE? 1/3? What's the probability of hitting 1/3 of half of 5% of the population in order to use a pure CSS, no JS approach?
Don't rely on the fact that possibilities exist. Those are extreme situations that in the real world, only happen 1% out of a billion. As people from UX would say: demographics.
*exaggerated estimates
It's 2013. If someone has js disabled, they know their web experience is going to suck. Not just on your site, but everywhere. It's less than 1% of users, so don't worry about it. You can/should basically assume js is enabled.
Just make a fixed width version at desktop size for older IE's using conditional comments for an ie.css sheet. (See http://html5boilerplate.com/ for a great example of this)
Respond.js often runs really slowly and is far harder to debug then "traditional fixed width" IE 7,8. So it's way more work to support (even if it weren't part of your project requirements to support non-js users).
Thing about it from the end user's perspective. If I needed to borrow grandma's beige tower running IE 7, I'd rather have a faster, fixed-width site then a buggy, slow responsive site. Also these are old computers with users used to fixed width sites anyways.
Also consider looking into using SASS to help with the breakpoint madness. My favorite mixin is "Breakpoint". Check out their documentation here related to supporting browsers that don't support media queries. In short you add a variable to a media query to see "export to my IE.css = true" then these become the core components of your ie.css sheet and there's less custom IE work to do.
https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks
So I built what I hoped would become a simple android game. I first built a web version to getting it working (http://scolvin.com/ballgame) then moved it to PhoneGap and used accelerometers to control the game. The only problem (and it's a show stopping problem) is that the result is horrifically slow (updates i guess about once a second instead of ever 20ms ish).
Is this just how slow phonegap is, with no current solution? Or is there some golden bullet I'm missing?
The game uses easeljs and box2d-web.
What's odd is it seems to run at a reasonable speed on android chrome, but very slow on android's "browser" (which I seem to recall is based on firefox?) and in phonegap which presumably uses the same html renderer/js interrupter.
I've tried simplifying the game, getting rid of as much as i can, using setInterval rather than accelerometer.watchAcceleration all to no avail.
It's a problem of the Android Browser
See the following answer:
Sencha Touch 2 - Android Performance
(It's for Sencha Touch, but i think the main points of the answer are the same)
Instead of using setInterval() for FPS thing, you must use requestAnimationFrame() It is far more efficient
iOS 5+ and Android 3+ use hardware acceleration for Canvas, so you will need atleast those devices for solid performance. Anything before iOS 5.0 and Android 3.0 will use CPU using software-rendering.
So need to keep that in mind
Is the performance issue with rendering or reading the accelerometer? Maybe you could create a demo mode to check how it behaves without user input.
Hello I have implemented Dropkick.js on to my site and now have some very very good looking select elements. However when I look at it on a iOS system I am not able to scroll down my options.
I have read the documentation of Dropkick.js and it suggests that I try and use scrollability.js however I cannot for the live of work out to make this work.
Does anyone have any experience of using this and dropkick.js - or does anyone have any suggestions to alternatives?
I have never used DropKick.js and scrollability.js together, but I can tell you from experience that DropKick doesn't have native mobile support since it was built for desktop browsers and not phones.
Since mobile phone browsers usually have their own handler for the tag, a lot of JavaScript plugins don't have proper support for phones because their code actively removes and replaces it with a of their own design or doesn't even use tags in the first place.
If you're looking to make your site work on both iOS/mobile browsers and Desktops, I recommend using SelectBox.js from A Beautiful Site.net even though it's a little bit more difficult to style than DropKick.js.
If you're looking for a purely mobile solution, I would recommend just using pure CSS to style your as seen HERE since it's simpler, quicker, and leaves tags in place.
Hope this helps!
Seems that with handheld devices on the rise, one has to start taking them into account more and drop IE6 instead.
With that in mind, it has come to my attention that certain things don't work as well as can be or at all on say, my iphone.
what seems to break includes (but not limited to):
mouseover/mouseout events (can break almost anything)
CSS pseudos :hover as well, naturally (breaks nav CSS-only menus, for instance)
DOUBLE CLICKS - it zooms instead of the event handler
CSS-related issues (minute, it seems to work just like in Chrome w/o the gradients + some font-size issues)
the real question is: do you have any guidelines, articles or whatever that can cover things below or any advice you can give.
where do you start in order to transliterate the experience for desktop users over to mobile ones? do you try to make a separate skin for mobile devices or do you alter / fix your site to work as best as possible - how much maintenance and work is involved in either approach
are there any frameworks (CSS or JS) that can abstract that and do the graceful degradation where required? boilerplate comes to mind, jquery-mobile mootools-mobile (power tools)?
what do you replace things like the ones above with, click events?
how do you incorporate swipes into a web app? can you handle and respond to finger zooms? should you?
additional events like shake, tilt - do they bubble to the browser window?
do you do anything to accommodate awkward OS elements like select, checkbox and radio?
resource management - do you use a detection layer that will only send whatever files are particular to the device as opposed to generic js libs that can deal with both?
as for device support, I am interested in droid and ios only so javascript support will be pretty good - would you drop your main framework and go with a micro js lib instead?
and finally - do you have any impressions on how viable handheld devices are for e-commerce and monetisation (currently and in the near future). I would like to make sure from a business standpoint that the dev work will be worth the expenditure and we're not going to go after buzzword gimmick like '#socialmedia'. any data on conversion values in comparison to the desktop ones? this can help me gauge if these are used as a quick browsing instrument or can actually do the full monty.
any examples of a site that does a great job of working in mobile and desktop at the same time or through different designs, I would like to see them and find what's even possible.
thanks in advance.
You've just asked a lot of questions I've been asking myself recently. I can't give great answers yet as I'm still researching and exploring. but here are some useful links.
Rethinking the mobile web
Mobile emulators
How to build a mobile site
I hope this is at least a little helpful.
I can answer the conversion rate/business viability part of your question.
I had the chance to see Omniture numbers for some very, very big ecommerce interests and the answer is that conversion can be somewhat less, somewhat more, or about the same. There was a pretty good amount of variance depending on the device and the seller's site.
It's what you'd expect though, I think. The quality of the mobile/tablet experience varies a lot right now depending on how well each business optimized for mobile (and for which mobile devices). I think conversion varies a lot as a result.
following link should help. To make website like a nativeapp, jQuery plays amazing role
http://blog.2partsmagic.com/2012/07/developing-web-application-ipad-android-tablet/