1 tech update © 2015 AgileThought, LLC. All rights reserved. This document is for informaonal purposes only. AgileThought makes no warranes, expressed or implied in this summary. 877.514.9180 | agilethought.com | Scky HTML5 & CSS3 Navigaon For Hybrid Mobile Applicaons Summary AgileThought delivered a modular, secure, payroll processing system applicaon based on a service-oriented architecture (SOA). It increased system availability to 100%, reduced the average logon me by 83%, shrank the hardware footprint by 50% and cut IT expenses by 50%. Challenge Presented Through the development process the need for both a top and boom navigaon was idenfied. The challenge was creang this navigaon with only HTML5 and CSS3 without the use of a library such as jQuery Mobile. Furthermore, this navigaon needed to display and perform flawlessly on all plaorms and phones. Our Soluon The inial soluon and a widely adopted method for creat- ing a scky header/footer navigaon is with the CSS property “posion:fixed.” While this works without an issue on desk- top browsers, there are performance issues when tesng on smartphones. The boom navigaon “hops” around when scrolling down on a screen as shown to the right. The soluon that proved to perform the best was to ulize the “posion:absolute” property for the header, body wrap- per and the footer. This allowed for smooth scrolling with no element jumping or jiers. A user can fluidly step through the applicaon and trigger interacons without noceable perfor- mance issues. Final Performance The finished applicaon’s navigaon performed well across mulple devices and plaorms. By maintaining lightweight HTML5 and CSS3 with minimal Javascript, the applicaon felt exactly like a nave applicaon. By taking this lightweight ap- proach, we were able to establish a plaorm that enabled the use of CSS3 transions and Google Maps integraon with very marginal performance differences. Fixed posion boom elements “hop” as user scrolls {