Smashing Mobile Web Development

Chapter 5: Mobile Web Structure

When developing for mobile web, you must change your whole mindset when you design the structure of your web app. With standard web pages, mouse clicks and keyboard inputs are the mechanisms you program to allow your users to use an app, and therefore are the primary events. With mobile, click methods become touch events, onmouseover events do not exist, and the CSS:hover method doesn’t work as designed. It’s possible in the future that mobile devices will incorporate technology to make use of :hover method, however at this time it doesn’t provide the desired effects as it does on standard desktop browsers. How a user interacts with your web app is important. You can’t design and develop by just testing it on a web browser; testing on a touch device can provide some interesting insights.

In this chapter, you start to build the framework around Corks, which involves setting up some global templates, including the header, footer, and top navigation. We discuss a popular feature on iOS called Full App Mode, which allows a user to create a home screen icon for an app, and remove the bottom and top bars of Safari. These tweaks are very helpful for making your app feel more native.

Android doesn’t have a comparable function; however, users can “pin” your web app to their home screen for easy access. Android browsers don’t have a bottom navigation bar because the device has an actual back button.

In addition, this chapter discusses onTouch events and ...