HTML and CSS Reference
In-Depth Information
CHAPTER 3
Building for the Mobile Web
The success of any mobile web application relies on two factors: design and performance.
For mobile app design, we must have a consistent look and feel across all platforms. For
better performance, we must have offline capabilities, animations on the UI, and back‐
end services that retrieve and send data via RESTful or WebSocket endpoints. To put it
simply, your app is constrained by two ever-changing speeds: the speed of the device
CPU/GPU and the speed of the Internet. The UI is handled by device hardware, such
as the GPU, when doing native-like animations and transitions through CSS, and your
backend services are limited to the current Internet connection speed of the mobile
device.
In this chapter, we'll discuss how to design, create, and tune your mobile web app to be
better looking and more performant. The chapter starts with a brief explanation of how
apps should look for mobile devices then jumps into a low-level explanation of
hardware-accelerated CSS and how to debug it. From there, you'll learn what it takes to
build an offline mobile application and how to bring all the code together into one
application to create a native-like mobile web app that is capable of handling intermittent
Internet connections. Lastly, you'll examine today's most popular mobile frameworks
to get an understanding of when or if you should add a community-supported frame‐
work to your project.
Mobile Web Look and Feel
The “native versus Mobile Web” debate isn't about which programming model will win.
It's about what we can build until HTML5-like technologies catch up. We have three
choices:
• Pure native approaches, which are clearly winning today in terms of overall appli‐
cation responsiveness
