You are previewing Programming the Mobile Web.

Programming the Mobile Web

Cover of Programming the Mobile Web by Maximiliano Firtman Published by O'Reilly Media, Inc.
  1. Programming the Mobile Web
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Who This Book Is For
      2. Who This Book Is Not For
      3. What You’ll Learn
      4. Other Options
      5. If You Like (or Don’t Like) This Book
      6. Conventions Used in This Book
      7. Using Code Examples
      8. How to Contact Us
      9. Safari® Books Online
      10. Acknowledgments
    3. 1. The Mobile Jungle
      1. Myths of the Mobile Web
      2. The Mobile Ecosystem
      3. Mobile Knowledge
      4. Brands, Models, and Platforms
      5. Technical Information
      6. Market Statistics
    4. 2. Mobile Browsing
      1. The Mobile Browsing Experience
      2. Mobile Web Eras
    5. 3. Architecture and Design
      1. Website Architecture
      2. Design and Usability
    6. 4. Setting Up Your Environment
      1. Setting Up a Development Environment
      2. Production Environment
    7. 5. Markups and Standards
      1. First, the Old Ones
      2. Current Standards
      3. XHTML Mobile Profile and Basic
      4. CSS for Mobile
      5. Confusion
    8. 6. Coding Markup
      1. Heading Structure
      2. The Document Body
      3. Plug-ins and Extensions
    9. 7. CSS for Mobile Browsers
      1. Where to Insert the CSS
      2. Selectors
      3. CSS Techniques
      4. Common Patterns
      5. CSS Sprites
      6. WebKit Extensions
    10. 8. JavaScript Mobile
      1. Supported Technologies
      2. Coding JavaScript for Mobile Browsers
    11. 9. Ajax, RIA, and HTML 5
      1. Ajax Support
      2. JavaScript Libraries
      3. WebKit CSS Extensions
      4. Mobile Rich Internet Applications
      5. HTML 5
    12. 10. Server-Side Browser Detection and Content Delivery
      1. Mobile Detection
      2. Content Delivery
      3. Multimedia and Streaming
      4. Content Adaptation
      5. Mobilizing WordPress and Other CMSs
    13. 11. Geolocation and Maps
      1. Location Techniques
      2. Detecting the Location
      3. Showing a Map
    14. 12. Widgets and Offline Webapps
      1. Mobile Widget Platforms
      2. Standards
      3. Platforms
      4. Widget Design Patterns
    15. 13. Testing, Debugging, and Performance
      1. Testing and Debugging
      2. Performance Optimization
    16. 14. Distribution and Social Web 2.0
      1. Mobile SEO
      2. Mobile Web Statistics
      3. Mobile Web Advertising
      4. Mobile Web Social Features
    17. A. MIME Types for Mobile Content
      1. Markup and Script MIME Types
      2. Image MIME Types
      3. Mobile Content MIME Types
      4. Audio and Video MIME Types
      5. Widget and Webapp MIME Types
    18. Index
    19. About the Author
    20. Colophon
    21. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

Mobile Knowledge

If you are not (up to now) a part of the mobile world, we need to discuss some things before we start analyzing the devices and before we do any coding. I know you want to start coding right now, but believe me that your project will be more successful if you know the environment.

Display

I know what you’re thinking: “you’re going to talk me about the small screen problems.” Yes, I was going to start with that. A mobile device has a very small screen compared with a desktop. While in desktop development we talk about 17-, 19-, and 21-inch screen sizes (diagonally), in mobile development we talk about 1.5, 2.3, or 3 inches. It’s really a big difference. Similarly, while in desktop development we talk about 1024×768 pixel resolution, in mobile development we talk about a quarter or half of that.

Resolution

Resolution is the primary concern in mobile design. How many pixels (width and height) are available on a given device? This was the only portability problem for many years in the area of mobile development.

Note

Portability refers to the ability of a mobile application to be used on multiple devices with different hardware, software, and platforms.

There are no mobile device standards regarding screen resolution. One device may have a resolution of 128×128 pixels, and another 800×600. But if we talk about devices sold from 2007, we can separate most of them into four basic groups:

  • Low-end devices: 128×160 or 128×128 pixels

  • Mid-end devices (group #1): 176×220 or 176×208 pixels

  • Mid-end devices (group #2) and high-end devices: 240×320 pixels

  • Touch-enabled high-end devices and smartphones: 240×480, 320×480, 360×480, 480×800, 480×854, or 640×960 pixels

Note

Touch devices typically have a higher resolution than devices with a keyboard because no space needs to be reserved for the keypad.

Today, the most widely available screen resolution is 240×320 pixels. This is also known as QVGA (Quarter VGA), because the 1990s VGA standard was 640×480 pixels. An iPhone 3GS, for example, has a resolution of 320×480 pixels; this is known as HVGA (Half VGA).

There are also still a lot of devices with custom resolutions. Web technologies will simplify this problem for us, as we’ll see later in this book.

Physical dimensions

The resolution isn’t the only thing we can talk about with regard to a mobile device’s screen. One feature as important as the resolution is the physical dimensions of the screen (in inches or centimeters, diagonally or measured as width/height), or the relation between this measure and the resolution, which is known as the PPI (pixels per inch) or DPI (dots per inch). This is very important, because while our first thought may be that a screen with a resolution of 128×160 is “smaller” than a screen with a resolution of 240×320, that may be a false conclusion.

One of the phones I owned back in 2006, thanks to a gift from Nokia, was an N90. The device was like a brick, but the great (or not so great, as it turned out) feature was its resolution: 352×416. The problem was that the screen size was very similar to those of other devices on the market at the time that used resolutions like 176×208. Therefore, I couldn’t use any game or application on the device, or browse the Web; I needed a magnifier to see the normal font size. Every programmer thought that more available pixels meant a bigger screen, so why bother increasing the font? “Let’s use the extra space to fit more elements,” everyone thought. Wrong.

Note

In June 2010, Apple presented iPhone 4, the first device with a “retina display,” that is a display with 326 pixels per inch (ppi). The human retina has a limit of 300 ppi at a certain distance, so this device with 960×640 in landscape mode has more pixels per inch that the ones we can really see. This is perfect for images and zoom-out viewing, but remember that we need to zoom in or have large fonts to perfectly read text.

The Nokia N90 has a display size of 1.36″ × 1.6″ (3.45 cm × 4.07 cm) = 259 PPI (or 0.0979 mm dot pitch), in comparison with other devices with a similar screen size, which have between 130 and 180 PPI.

Note

You can find an online PPI and DPI calculator at http://members.ping.de/~sven/dpi.html.

Aspect ratio

A device’s aspect ratio refers to the ratio between its longer and shorter dimensions. There are vertical (or portrait) devices whose displays are taller than they are wide, there are horizontal (or landscape) devices whose displays are wider than they are tall, and there are also some square screens, as shown in Figure 1-4. To complicate our lives as programmers even more, today there are also many devices with rotation capabilities. Such a device can be either 320×240 or 240×320, depending on the orientation. Our websites need to be aware of this and offer a good experience in both orientations.

Mobile devices may have horizontal screens, vertical screens, or even square screens.

Figure 1-4. Mobile devices may have horizontal screens, vertical screens, or even square screens.

Input methods

Today, there are many different input methods for mobile devices. One device may support only one input method or many of them. Possibilities include:

  • Numeric keypad

  • Alphanumeric keypad (ABC or QWERTY)

  • Virtual keypad on screen

  • Touch

  • Multitouch

  • External keypad (wireless or not)

  • Handwriting recognition

  • Voice recognition

And of course any possible combination of these, like a touch device with an optional onscreen keyboard and also a full QWERTY physical keyboard (see Figure 1-5).

The Nokia N97 mini has a full slider QWERTY keyboard and, when closed, an onscreen touch keyboard.

Figure 1-5. The Nokia N97 mini has a full slider QWERTY keyboard and, when closed, an onscreen touch keyboard.

If you are thinking that QWERTY sounds like a Star Trek Klingon’s word, go now to your keyboard and look at the first line of letters below the numbers. That’s the reason for the name; it’s a keyboard layout organized for the smoothest typing in the English language that was created in 1874. This layout is preserved in many onscreen keyboards (see Figure 1-6).

The iPhone and iPod Touch use an onscreen virtual keyboard when the user needs to type something on a website.

Figure 1-6. The iPhone and iPod Touch use an onscreen virtual keyboard when the user needs to type something on a website.

Other features

We could talk for hours about mobile device features, but we’ll focus on the ones that are useful for us as mobile web programmers. Key features include:

Geolocation

Many devices can detect the geographical location of the users using one or many technologies, like GPS, A-GPS, WPS (WiFi Positioning System), or cell-based location tracking.

Phone calls

Yes, mobile devices also make phone calls!

SMS (Short Message Service)

Most devices allow you to create text messages to send to other devices or to a server, with a length of up to 160 7-bit ASCII characters (or 140 8-bit ASCII characters, or 70 Unicode chars), or to concatenate many messages for a larger text.

MMS (Multimedia Message Service)

Mobile devices often allow users to create messages with text and attachments, such as images, videos, or documents.

Application installations

Many devices allow the user to download and install an application using OTA (Over-The-Air). This means that we can serve applications to a device from our websites.

The best content for your career. Discover unlimited learning on demand for around $1/day.