Author: admin
-
versus Multi-Page Documents
You will need to identify page access trends to determine which strategy makes most sense from a bandwidth and response time perspective. Multi-page documents will consume more bandwidth on their initial load but they only require a single server request and as a result their sub-pages are loaded with very fast response times. A single-page…
-
Setting the Page Title of an Internal Page
It’s important to note that the title of an internal page will be set according to the following order of precedence: IMPORTANT: When linking to a page that contains multiple pages, you must add rel=”external” to its link. This will perform a full-page refresh. It is required because jQuery Mobile cannot load a multi-page document into the DOM…
-
Multi-Page Template
jQuery Mobile supports the ability to embed multiple pages within a single HTML document as shown in Listing 2–3. This strategy can be used to prefetch multiple pages up front and achieve quicker response times when loading sub-pages. As you can see in the example below, the multi-page document is identical to the single-page template we…
-
jQuery Mobile Page Enhancements
How does jQuery Mobile enhance the markup for an optimized mobile experience? For a visual, refer to Figure 2–2. Figure 2–2. jQuery Mobile Page Enhancements Diagram By now you should feel comfortable designing a basic jQuery Mobile page. You have been introduced to the core page components (page, header, content, footer) and have seen the resulting DOM…
-
jQuery Mobile Page Template
A jQuery Mobile page template is shown in Listing 2–1. Before we continue any further, let’s get up and running. Copy the HTML template (ch2/template.html), paste it on your desktop and launch it from your favorite browser. You are now running a jQuery Mobile app that should look identical to Figure 2–1 regardless of what browser you are…
-
Accessible
jQuery Mobile apps are 508 compliant by default, a characteristic that is valuable to anyone.4 In particular, government or state agencies require their applications to be 100% accessible. Furthermore, mobile screen reader usage is rising. According to WebAIM5, 66.7% of screen reader users use the screen reader on their mobile device. __________ 4 508 Compliance is…
-
Themable Styling
jQuery Mobile supports a themable design that allows designers to quickly re-style their UI. By default, jQuery Mobile provides five themable designs with the flexibility to interchange themes for all components including page, header, content, and footer components. The most useful tool for creating custom themes is ThemeRoller3. Restyling a UI takes minimal effort. For…
-
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…
-
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…