Responsive Design

A jQuery Mobile UI will render responsively across different display sizes. For example, the same UI will display appropriately on phones (see Figure 1–9) or larger devices such as tablets, desktops, or TVs (see Figure 1–10).

Figure 1–9. Phone Display

Figure 1–10. Tablet/Desktop/TV Display

The Build Once, Run Anywhere Myth

Is it possible to build a single application that is universally available for all consumers (phones, desktops, tablets)? Yes, it is possible. The Web provides universal distribution. jQuery Mobile provides cross-browser support. And with CSS media queries we can begin tailoring our UI to best fit the form factor. For example, on small devices we can serve small images with brief content whereas on larger devices we may serve up larger images with detailed content. Today, most organizations with a mobile presence typically support both a desktop Web and a mobile site. There is waste any time you must support multiple distributions of an application. The rate at which organizations are embracing mobile presences, combined with their need to avoid waste, will drive the build once run anywhere myth to fruition.

Responsive Forms

In certain situations, jQuery Mobile will create responsive designs for you. The following figures show how well jQuery Mobile’s responsive design applies to form field positioning in portrait versus landscape mode. For instance, in the portrait view (see Figure 1–11) the labels are positioned above the form fields. Alternatively, when repositioning the device in landscape (see Figure 1–12) the form fields and labels appear side-by-side. This responsive design provides the most usable experience based on the devices available to screen real estate. jQuery Mobile provides many of these good UX principles for you without any effort on your part!

Figure 1–11. Responsive Design (portrait)

Figure 1–12. Responsive Design (landscape)CopycopyHighlighthighlightAdd NotenoteGet Linklink