Mobile Web Applications: Top CSS techniques for optimal performance
Building mobile web applications with great performance can be hard. Animations with low framerates, sloppy transitions between screens, developing with HTML for mobile requires some work to achieve good results. Facebook CEO Mark Zuckerberg stated that one of the company’s biggest mistakes was deciding to use HTML5 when it wasn’t there yet. Does this mean that we should give up on Web development and hire a dozen of developers for three different native platforms?
No, a lot has changed since then, mobile browsers perform better, devices have better hardware and the whole web ecosystem evolved with new CSS3 and JavaScript features.
Using current techniques and leveraging HTML5 and CSS3 you can now achieve native-like experiences. Let’s go through some of the most powerful ones.
Flexbox layouts
Say goodbye to issues related to fixed position on mobile browsers or JavaScript hacks to ensure that elements stay where you want them.
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Flexbox also allows complete control of columns, rows, element order, spacing and alignment. It can be used to define the screen layout and also other elements structure.
In this example, we have a basic layout with 3 DIV elements, the middle one is 3 times bigger than the others:
.layout {
display: flex;
flex-direction: row;
}.a, .c {
flex: 1;
}.b {
flex: 3;
}
With a simple rule, the layout can be changed to better fit a mobile phone screen:
.layout {
flex-direction: column;
}
Take advantage of the GPU
Animations are a great way to boost user experience and usually draw the line between static web pages and rich applications. Smooth animations provide a native-like experience to the user, so, they need to achive as much frames per second as possible, 60 being the ideal number.
To achieve smooth animations, we need to remove load of the main thread by avoiding reflows and repaints. Properties like opacity and transform will run on the compositor thread (handled by the GPU), and even though we’re not animating elements in 3D space, we can enable 3D rendering. Even when animation other properties, applying transform: translateZ(0); already triggers GPU acceleration in modern browsers, even for mobile!
The example below, recorded from an iPhone 6, shows the real impact of using translateX instead of left to create a simple off-canvas menu animation. On low end devices, the difference is even bigger.
Let CSS do the work
These are great times for CSS, some new properties will spare hundreds of lines of JavaScript with way better performance.
For instance, momentum scroll for mobile devices would require a lot of JavaScript, now, using -webkit-overflow-scrolling: touch; we achieve the same result with native-like performance.
Another great example is -webkit-position: sticky; sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. Doing this with JavaScript requires onScroll events, which are so heavy for mobile devices that webkit browsers do not allow them.
There are a lot of great examples out there to show that with HTML we can build apps with great performance when using the right tools and techniques, even some iOS or Android games are built using HTML!
These were some of the techniques that we used to make Silk UI Framework, a real competitor for mobile app development, using OutSystems Platform.
The ideas shared in this post resulted partially from the research project RADicalize, which was supported by the EU and PT2020.
