Popular posts

Well there is no one true way IMO. It all depends on what you are working on at that particular moment. That said, I find that there are less headaches when using the following approach:

• Employ a pre-processor framework like Sass so you can leverage variables, nested media queries, and mixins (the latter will save you a ton of time since you can write up some generic animation functions for yourself).
• Start with the smallest viewport size and set everything up as you would like for it to be. Once done, move out to the next largest viewport you intend to work on and see where things are at. Chances are there will be only a few things to adjust. Use media queries to adjust what needs to be tweaked.

If you need to get really crazy, libraries like TweenMax from Greensock can really help you out. You'll need to employ a good amount of math for responsive work since you will need to calculate your item positioning based on viewport size etc.

The approach you outlined is perfectly valid assuming your client/boss is cool with it. Excessive animation on mobile devices usually looks kinda janky anyways. Anyways, hope my 2 cents helps!