37 posts
  • Sells items exclusively on Envato Market
  • Located in France
Potae says

Hello. I saw that many of you (in html templates) choose to disable css3 animations on mobile devices (through js). Is there something I should know? Is it related to performance issues or anything else? Thanks!

By the way. Is this a good way to detect mobile devices?

isMobileDevice = ( ( navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone|IEMobile|Opera Mini|Mobi/i) ) || ( $(window).width() < 768 ) ? true : false );

Or is it enough to use /Mobi and width? Or msMaxTouchPoints and /Mobi ?

PS: I saw some templates that disabled parallax backgrounds on mobile devices as well. I do not have much experience with mobile devices and what is good and what is not.

1148 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
fillerspace says

I would avoid doing browser sniffing through user agent, because it is unreliable and hard to maintain. Users can change the user agent value for various reasons, which may lead to unexpected behavior. You could use the window width as a good approximation, and you could use media queries so you don’t need JS.

21 posts
  • Sells items exclusively on Envato Market
  • Has sold $40,000+ on Envato Market
  • Won a Most Wanted contest
  • Has collected 1+ items on Envato Market
+4 more
audemedia says

or you can use conditionizr

http://conditionizr.com/
37 posts
  • Sells items exclusively on Envato Market
  • Located in France
Potae says

Hmm, ok. And what about animations and parallax backgrounds on mobile devices? Should I disable them?

1148 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
fillerspace says

Hmm, ok. And what about animations and parallax backgrounds on mobile devices? Should I disable them?

They should be disabled on all browsers and platforms! :evilgrin:

618 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $250,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
+8 more
theAlThemist says

I am using modernizr and scripts which are not recommended to use on touch devices (like parallax for example) I am calling with $(“body.no-touch #your_selector”).your_script(); etc.

37 posts
  • Sells items exclusively on Envato Market
  • Located in France
Potae says

I am using modernizr and scripts which are not recommended to use on touch devices (like parallax for example) I am calling with $(“body.no-touch #your_selector”).your_script(); etc.

Ok, so you’re not using animations or parallax on mobile devices, and I like your method. But can you tell me why don’t you use animations on mobile devices? That was the question. Performance penalties? I mean, for the smartphones that are now on the market, I think some animations work good. I do not have a smartphone to verify.!!!

1148 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
fillerspace says

But can you tell me why don’t you use animations on mobile devices? That was the question. Performance penalties? I mean, for the smartphones that are now on the market, I think some animations work good. I do not have a smartphone to verify.!!!

Animations are OK on the latest smartphone and tablet models, but older or cheaper models have poor performance with lots of animation. Since you can’t really target new vs old devices, better to disable all animation for mobile.

37 posts
  • Sells items exclusively on Envato Market
  • Located in France
Potae says


But can you tell me why don’t you use animations on mobile devices? That was the question. Performance penalties? I mean, for the smartphones that are now on the market, I think some animations work good. I do not have a smartphone to verify.!!!
Animations are OK on the latest smartphone and tablet models, but older or cheaper models have poor performance with lots of animation. Since you can’t really target new vs old devices, better to disable all animation for mobile.

Thank you fellow. That’s what I wanted to know.

by
by
by
by
by
by