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:
Read more: Mobile Web Applications: Top CSS techniques for optimal performance.
No comments:
Post a Comment