How to Create Smooth Infinite Scrolling with HTML5
LinkedIn shares the challenges and solutions developed from its iPad app / HTML5 backbone overhaul to improve responsiveness and reduce page reloads.
LinkedIn has an Universal iOS app, but since no app in the world can download all the data on the professional network site, the app accesses data from its servers, they face a challenge: how to serve HTML5 web content as smoothly and responsively as a native app?
Developed for iPad, LinkedIn Engineering “5 techniques for smooth infinite scrolling in HTML5” explains their rational:
“When we started the iPad project, we thought through how we can create an engaging content consumption experience for our users. We decided to present the articles, network updates, and other similar content as a “stream”: an infinite, swipe-able view.
Mobile devices have less memory and CPU power compared to Desktop computers. If you render a very long list in the HTML, you run the risk of crashing the device. This makes it challenging to build large, interactive HTML5 apps for mobile devices.”
Implementation details on their site, describing their fail attempts and what works: unloading images, hiding pages, removing pages, avoid scaling and box-shadow, and minimize DOM nodes.
Their techniques in action:
More mobile app developers should do what LinkedIn does. (Hint Tweetbot / Pulse}
ObamaPacman tip to LinkedIn: compress large PNG images and make it into JPG or GIF. I’ve taken a 348KB image, enlarged it, and exported it as 98KB without noticeable change in image quality.
- Apple Adds: CBS, National Geographic, Nike, Spin to HTML5 enabled sites
- Online Documents Serving Company, Scribd, Dropping Flash for HTML5
- Apple Highlights iPad Ready Next Generation HTML5 Websites
- Leaked: CBS Making Website iPad Ready with HTML5 Video Playback
- Vimeo Starts HTML5 Video Embedding Support