Clever CSS for Mobile Websites With No Compromise
in CSS, JQuery, iPhone, Android, Mobile-friendly, Web Design | February 9, 2016
Use Transform Translate/Scale
The basic idea of this technique is that when you have something complicated (say a CSS animation that involves moving/changing multiple elements in a container of set proportions), it is easier to put in in a grandparent container with full width, perhaps defined in a media query, then transform the container containing the complicated structure using transform: scale. Using multiple containers like this is necessary because for now, each element can only have one transform property assigned to it from CSS. So if you are working on an animation that already uses scale or something of that nature, wrapping it in an extra container or even a grandparent container becomes a necessity. However, doing so can prevent the nightmare (or impossibility) of attempting to rewrite animation keyframes or positioning instructions for every different screen size. Simply varying the scale and positioning of a good container or two can translate the complicated element you wished to include with no compromise and less hours committed.
This technique may initially appear to be more problematic than helpful due to the seemingly unpredictable nature of where the element ends up after being scaled. This may have been the case if it wasn’t for our friend “transform-origin.” The transform-origin property is supported in virtually all modern browsers
and sets exactly that: the origin of the transform being applied. If you are sizing from the center, try transform-origin: 50% 50%; or if you are sizing from the top and left then transform-origin: top left; should do the trick for you. The property is widely supported and accepts the arguments you would expect in CSS. Ultimately, we decided it is worth writing about here because it is an often forgotten trick useful in developing complicated and uncompromising full-featured mobile websites and webapps.
So transforms are a clever and lightweight method for achieving complicated things on mobile websites. But is there any way they can be even better? The answer to this question is yes. Because of the way contemporary smartphones’ chip architecture is designed, many smartphones kick in a faster graphics processor on a separate chip when the phone believes it is doing something 3D. Even for simple 2D transforms, this other chip can execute our directions more smoothly and with better performance. So to achieve so-called “hardware-accelerated” transforms when your transform is being animated, it is good practice to write targeted CSS rules (in a media query, perhaps) that use transform: translate3D (supported virtually everywhere
) and scale3D even when you are not doing anything 3D. Simply write in a z-value of zero every time the property is used to “trick” mobile devices into using their more powerful chips to handle your animation when possible and increase mobile performance.
Timing CSS Animations with jQuery
If you found this article helpful, have questions or want to start a mobile friendly project with us today, don’t hesitate to contact us
via the contact form on our main page to get more information on how Mission Bay Media can best work with you or your company to make your web project a reality.