It is no secret that contemporary CSS is a web developer’s greatest ally in the process of developing a cross-platform compatible, mobile friendly website. Here at Mission Bay Media, we know that mobile users–people browsing from phones and tablets–make up a large and ever-growing chunk of almost any site’s traffic, so we strive to use nothing but the best techniques to ensure sleek websites that run well, however they might be viewed. This is why we take the time to update ourselves regularly on the new methods and tricks available in HTML5 and CSS3: because clever CSS and HTML work can avoid large javascript files and run faster in browsers. That being said, for more advanced applications, of course, javascript is often still necessary to bridge the gaps in what CSS can and can’t do and to ensure that whatever functionality we set out to built is finished in the lightest, smoothest, and most professional way possible.
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.
I realize this is supposed to be an article about the advantages of new CSS tricks for developing mobile websites. So you may be asking yourself: “why is he also talking about jQuery?” Well I did mention at the start that sometimes a bit of javascript is needed to bridge the gaps in the functionality of CSS. One problem often encountered on iOS for mobile sites has to do with the timing of CSS animations when browsing on an iPhone. The problem seems not to be very prevalent on Android phones, but both have their own difficulties to overcome when developing websites optimized to their platforms. By default, CSS animations on iPhone will not fire until the user stops scrolling down the page. Now depending on how you built your CSS animations (specifically what the state of the element is in your first defined keyframe and the animation-fill-mode property set on the animation) this little detail can range from minor annoyance to project-stopping problem. Of course, here at Mission Bay Media, we’ve come up with a few different solutions for the different applications that this problem has reared its head in.
If you’re particularly apt with CSS, you might be wondering what options a developer has available to target iOS devices with a clever media query. To address this question, a “min-device-pixel-ratio” media query will catch new iPhones. However, you’ll also be catching certain new Mac computers and Android phones with pixel-dense screens where the animations are already performing fine. The only way to target just iOS browsers is to implement a javascript/jQuery “user agent string” search for the keywords used by iOS browsers. The user agent string is a short String returned to a website by the user’s browser that contains useful information for developers attempting to target based on OS/browser. Once you’ve done this (perhaps in the document.ready() function), then use jQuery to append a special class to your animated elements that corresponds to different css instructions for animation-fill-mode or even different keyframe definitions. Once you have that class in there, it is fairly straightforward to develop a bit of further jQuery that fixes a listener to the page scrolling and fires the CSS animation when each element comes into the viewport. With this combination of CSS and jQuery/javascript, CSS handles the stuff it is best at and javascript fills in the gaps in CSS’s capabilities, making a no-compromise, lightweight, and fully-functioning mobile page or web app a breeze to develop–and more importantly, to use.
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.
