Front-end development is becoming always more complex and build a web page isn’t just related to styling it, but we have to deal with performance, memory heap, reflow, networking, and also the simple and even more powerful CSS is not just a visual consequence of properties and values, but we have to think to it how a set of rules that have to be read and elaborated by different browsers so that each of those have a cost in terms of calculus computational and since the memory and the CPU are not unlimited disregard the complexity of code can cause serious damage. Here is my experience on how I solved an unpleasant crash on iPad.
What is happen in fact was the consequence of not have handled the edge case how Luke Wroblewski teaches us.
The project was to build different kind of modules such as Slider, Video, Gallery, Texts and so on, that can be assembled by an Editor to create a single-page individually.
The goal was achieved, and the page was well designed to be responsive and be navigated with touch devices. But what about of a page composed of more than 15 galleries with about 400 images not optimized and more than 10 youtube videos? Yes. It crashed on Ipad and now I think it’s pretty normal considering the amount of html and resources.
How I solved.
What I did first of all was to dismember the page until found the problem, and the problem was the amount of html that became generated by the gallery plugin, this means that also reducing the amount of images, the problem was still there, because in this case, the page was too complex to be elaborated by a mobile devices.
Then I tried to use the simplest solution I know to reproduce a scroller on mobile, and it worked! What I did was to use the css property “overflow: scroll” on a image container, then, simulate a gallery, realizing in fact a fake gallery but with the same design and user experience like using a plugin.
The solution is pretty easy to implement, and combined with a lazy loading images it worked like a charm!