Smashing Mobile Web Development

Mobile Web Examples

You can learn and draw inspiration from a plethora of mobile websites. Sometimes it’s even hard to see the difference between mobile web apps and native applications. The following examples demonstrate what you can do with the mobile web.

• Facebook: Facebook’s user interface (UI) changed a lot over the last six to eight months, but its developers are committed to providing the best user experience no matter what device is being used. With a combination of CSS and HTML5 elements, Facebook developers were able to mask their native iPhone app to look similar to their web app. Facebook uses the geolocation element in HTML5 to grab your location and help you check into your favorite spots. To help the website load faster, the user uses caching on the browser HTML5. I touch on these features later in the book and explain how to use them in your own applications. The difference between the Facebook web app and native applications is so minimal that many users can’t tell the difference. When this occurs, you know you’ve done your job right.

• Twitter: Twitter’s UIs also changed significantly since launching in 2008. In fact, when the service first launched there was no official mobile app to use this service. Developers used the Application Programming Interface (API) from Twitter to develop the first Twitter applications that became popular on the market. Realizing that sharing 140 characters is important on both the desktop and the mobile device, Twitter changed ...