Smashing Mobile Web Development

Design Aesthetics

The premise of mobile web development theory is to keep one code base across multiple platforms. Still, it is important to look at different design aesthetics that power the differences between each device. By paying attention to the details and designing your app to look and feel like a native app on a platform, you provide a much better experience for your users.

Dialog boxes

When designing for mobile web, you need to account for the bandwidth limitations of cellular networks. Certain processes may take no time at all to complete on a desktop web browser, but everything is different on a mobile device. As a best practice, always display the progress of some action on the screen. This can be done with a loading symbol or other methodologies. Without seeing this loading box, users may get discouraged with your app if they do not know whether it is currently loading.

iOS design patterns

With iOS, typically most applications have two navigation bars: one at the top indicating the page you’re currently on, and a navigation bar at the bottom, which has links to different pages. Prior to iOS5, there was no way to keep your top and bottom navigation bars static when the user scrolled the inner content between them. Now, by using the CSS3 property, overflow-scroll: touch, developers have the option to create native-like scrolling within their web applications.

Android design patterns

On Android devices, the general design pattern is to have an action bar at the top of ...