Enterprise Web Development

Chapter 10. Responsive Design: One Site Fits All

Up until now, we’ve been writing and rewriting the desktop version of the Save The Child application. Will it look good on the small screen of a mobile device? Beginning with this chapter, we’ll deal with mobile devices, too.

Let’s discuss different approaches to developing a web application that can work on both desktop and mobile devices. There are three choices:

Seperate versions of native applications

In addition to your web application that works on desktops, develop a separate version of the native application for multiple mobile devices. Development of native mobile applications is not covered in this book.

Single HTML applications with multiple UIs

Develop a single HTML5 web application, but create various UI layouts that will be applied automatically, based on the screen size of the user’s device.

Hybrid applications

In addition to your web application that works on desktops, develop a hybrid application. This web application on steroids works inside the mobile browser but is packaged as a native app and can invoke the native API of the mobile device, too. Chapter 13 is dedicated to hybrid applications.

This chapter focuses the second approach, called responsive web design (RWD). This term was coined by Ethan Marcotte in his article, “Responsive Web Design.” The concept that underlies RWD is that the design of the web page changes, responding (reacting) to the display size of the user’s device. We’ll modify the design ...