You are previewing Programming the Mobile Web, 2nd Edition.

Programming the Mobile Web, 2nd Edition

Cover of Programming the Mobile Web, 2nd Edition by Maximiliano Firtman Published by O'Reilly Media, Inc.
  1. 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
  2. 1. The Mobile Jungle
    1. The Mobile Ecosystem
      1. What Is a Mobile Device?
      2. Mobile Device Categories
    2. Brands, Models, and Platforms
      1. Apple iOS
      2. Android
      3. Windows
      4. Nokia
      5. BlackBerry
      6. Samsung
      7. Sony Mobile
      8. Motorola Mobililty
      9. Amazon
      10. LG Mobile
      11. HTC
      12. HP and Palm
      13. Firefox OS
      14. Ubuntu for phones
      15. Chinese platforms
      16. Other Platforms
      17. Smart TV Platforms
    3. Technical Information
  3. 2. Understanding mobile web
    1. Myths of the Mobile Web
      1. It’s Not the Mobile Web; It’s Just the Web!
      2. You Don’t Need to Do Anything Special About Your Desktop Website
      3. One Website Should Work for All Devices (Desktop, Mobile, TV, etc.)
      4. Just Create an HTML File with a Width of 320 Pixels, and You Have a Mobile Website
      5. Native Mobile Applications Will Kill the Mobile Web
      6. People Are Not Using Their Mobile Browsers
    2. What is the mobile web?
      1. Differences
    3. Mobile Web Eras
      1. WAP 1
      2. WAP 2.0
    4. The Mobile Browsing Experience
      1. Browsing Types
      2. Zoom Experience
      3. Reflow Layout Engines
      4. Direct Versus Cloud-based Browsers
      5. Multipage Experience
      6. Web Engines
    5. Fragmentation
      1. Display
    6. Market Statistics
  4. 3. Browsers and Web Platforms
    1. Web platforms that are not browsers
      1. HTML5 Webapps
      2. Web Views
      3. Pseudo-browsers
      4. Native Web apps, packaged apps and hybrids
      5. Ebooks
    2. Mobile Browsers
      1. Preinstalled Browsers
      2. User-Installable Browsers
      3. Browser Overview
  5. 4. Tools for mobile web development
    1. Working with Code
      1. Adobe Dreamweaver
      2. Adobe Edge Tools
      3. Microsoft Visual Studio and WebMatrix
      4. Eclipse
      5. Native web IDEs
    2. Testing
      1. Emulators and Simulators
      2. Real devices testing
      3. Remote Labs
    3. Production Environment
      1. Web Hosting
      2. Domain
      3. Error Management
      4. Statistics
  6. 5. Architecture and Design
    1. Mobile Strategy
      1. When to get out of the browser
      2. Context
      3. Server Side Adaptation
      4. Progressive Enhancement
      5. Responsive Web Design
      6. RESS
    2. Navigation
    3. Design and User Experience
      1. Touch Design Patterns
      2. Tablet Patterns
      3. Official UI Guidelines
      4. What not to do
  7. 6. Markups and Standards
    1. First, the very Old Ones
      1. WML
    2. Current Standards
      1. Politics of the Mobile Web
      2. Delivering Markup
    3. XHTML Mobile Profile and Basic
      1. Available Tags
      2. Official Noncompatible Features
      3. Creating Our First Compatible Template
      4. Markup Additions
    4. Mobile HTML5
      1. Creating our first HTML5 template
      2. Syntax Rules
      3. New elements
    5. CSS for Mobile
      1. WCSS Extensions
      2. CSS 3
    6. HTML5 Compatibility levels
      1. Testing your browser
    7. Confusion
  8. 7. Basics of Mobile HTML5
    1. Heading Structure
      1. Title
      2. Website icon
      3. Home Screen icons
      4. The viewport
      5. Changing the navigation method
      6. Removing automatic links
      7. Meta data for sharing
      8. Hiding URL address bar
      9. Native app integration
    2. The Document Body
      1. Main Structure
    3. HTML5 Mobile Boilerplate
    4. The content
      1. Block Elements
      2. Lists
      3. Tables
      4. Frames
      5. Links
      6. Accessibility
  9. 8. HTML5 Forms
    1. Form design
    2. Form elements
      1. Select lists
      2. Radio buttons and checkboxes
      3. Buttons
      4. Hidden fields
      5. Text input fields
      6. Range slider field
      7. Date input fields
      8. File selection fields
      9. Non-interactive form elements
    3. Form Control Attributes
      1. Placeholder
      2. Auto focus
      3. Autocomplete
      4. Validation input attributes
      5. Read only
      6. Safari extensions
      7. Firefox extensions
      8. XHTML mobile <code xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="literal">inputmode</code>
      9. Additional form attributes
    4. Form validation
      1. HTML5 validation
      2. WAP CSS validation
  10. 9. Feature and device detection
    1. Possible problems
      1. Possible solutions
    2. Informational websites
      1. Can I use
      2. MobileHTML5.org
      3. Web Platform
    3. Client-side detection
      1. HTML Fallbacks
      2. CSS Fallbacks
      3. Vendor Prefixes
      4. JavaScript fallbacks
      5. Modernizr
      6. Polyfills
      7. Platform detection
    4. Server-side detection
      1. HTTP
      2. Detecting the Context
      3. Cloud-based browsers
      4. Mobile detection
      5. Transcoders
      6. Device Libraries
  11. 10. Images and Media
    1. Images
      1. Image formats
      2. Using the img element
      3. Responsive Images
      4. Local pictograms
    2. Multiple density screens
      1. Using vector-based solutions
      2. Providing one single image
      3. Providing image alternatives
      4. SVG
      5. Canvas
    3. Adobe Flash
    4. Video
      1. Containers and Codecs
      2. Delivering video
      3. HTML5 video element
      4. Streaming
      5. Object embedding
      6. Video compatibility
    5. Audio
      1. Invisible audio player
      2. Web Audio API
      3. Audio Compatibility
  12. 11. CSS for Mobile Browsers
    1. Where to Insert the CSS
    2. Media Queries
      1. CSS3 Media Queries
    3. Selectors
    4. CSS Techniques
      1. Reset CSS Files
      2. Text Format
    5. Common Patterns
      1. Display Properties
      2. Rounded corners
      3. Border Image
      4. Pseudoclasses
      5. Backgrounds
      6. Scrollable areas
      7. Content
      8. Opacity
      9. Cursor management
      10. Selection management
      11. Touch Callout
      12. Highlight color
      13. Appearance override
    6. CSS Sprites
      1. Samples and Compatibility
      2. CSS Sprites Alternatives
      3. CSS3 Modules
      4. Gradients
      5. Reflection
      6. Masks
      7. Transforms
      8. Transitions
      9. Animations
      10. CSS Filter Effects
      11. CSS Regions and Exclusions
      12. CSS New Values and Units
  13. 12. JavaScript Mobile
    1. Coding for Mobile Browsers
      1. HTML5 script extensions
      2. Code Execution
      3. Cloud-based browsers
      4. JavaScript debugging and profiling
      5. Battery consumption
    2. Background execution
      1. Status detection
      2. Background tab notification trick
      3. Background execution compatibility
      4. Push notifications
    3. Supported Technologies
      1. Document Object Model
      2. Selectors API
      3. JSON
      4. Binary Data
      5. Web Workers
      6. HTML5 APIs
      7. Native webapp APIs
    4. Standard JavaScript behavior
      1. Standard dialogs
      2. History and URL management
      3. Manipulating windows
      4. Focus and scroll management
      5. Timers
      6. Changing the title
      7. Cookie management
      8. Event Handling
    5. JavaScript Libraries
      1. Mobile Libraries
    6. UI Frameworks
      1. Sencha Touch
      2. jQuery Mobile
      3. Enyo
      4. Montage
      5. iUI
      6. jQTouch
      7. JavaScript Mobile UI Patterns
  14. 13. Offline, Storage and Network
    1. Offline webapps
      1. The manifest file
      2. Reusing the manifest
      3. Accessing online resources
      4. Updating the package
      5. Deleting the package
      6. JavaScript API
      7. Compatibility and limits
    2. Client-side Storage
      1. Web Storage
      2. Web SQL Database API
      3. Indexed Database API
      4. FileSystem API
      5. User’s power
      6. Debugging storages
    3. Network communication
      1. Ajax
      2. Server Sent Events
      3. Web Sockets
  15. 14. Geolocation and Maps
    1. Location Techniques
      1. Accuracy
      2. Indoor Location
      3. Client Techniques
      4. Server Techniques
      5. Asking the User
    2. Detecting the Location
      1. W3C Geolocation API
      2. Carrier network location APIs
      3. IP Geolocation
    3. Maps and Navigation app integration
      1. Google Maps for Android
      2. iOS Maps
      3. Bing Maps
    4. Showing a Map
      1. Google Maps API v3
      2. Google Maps Static API
      3. Nokia Here
  16. 15. Device Interaction
    1. Mobile-specific URIs
      1. Making a call
      2. Sending email
      3. Sending an SMS
      4. Other communication apps
      5. Adding a contact to the phonebook
      6. Integrating with other applications
    2. JavaScript APIs
      1. Touch
      2. Gestures
      3. Sensors
      4. Network Information
      5. File Management
      6. Full Screen
      7. Web Notifications
      8. Camera
      9. Battery
      10. Vibration
      11. Other APIs
  17. 16. Native and installed Webapps
    1.  
      1. Pros and Cons
      2. Architecture
    2. Standards
      1. Packaging and Configuration Standards
    3. Official platforms
      1. iOS Web apps
      2. Symbian standalone webapps
      3. Windows 8 Store apps
      4. Mozilla Open Web Apps
      5. Chrome apps
      6. Samsung Web apps
      7. BlackBerry WebWorks
      8. Nokia S40 webapps
      9. Nokia Symbian webapps
    4. Apache Cordova / PhoneGap
      1. Template creation
      2. Cordova WebView
      3. CordovaJS
      4. Plugins
    5. Distribution
      1. iOS AppStore
      2. Android stores
      3. BlackBerry AppWorld
      4. Microsoft Windows Store
      5. Microsoft Windows Phone Store
    6. Full screen apps Patterns
      1. Multiple Views
      2. Layout
      3. Input Method
      4. One-View Widget
      5. Dynamic Application Engine
      6. Reload my webapp
  18. 17. Content Delivery
    1. MIME Types
      1. Static definition
      2. Dynamic definition
    2. File Delivery
      1. Direct linking
      2. Delayed linking
      3. OMA Download
    3. Application and Games Delivery
      1. iOS applications
      2. Android applications
      3. Windows applications
      4. Java ME
  19. 18. Debugging and Performance
    1. Debugging
      1. Server-Side Debugging
      2. Markup Debugging
      3. Client-Side Debugging
    2. Performance Optimization
      1. Measurement
      2. Best Practices
  20. 19. Distribution and Social Web 2.0
    1. Mobile SEO
      1. Spiders and Discoverability
      2. How Users Find You
      3. User Fidelizing
    2. Mobile Web Statistics
      1. Google Analytics for Mobile
      2. Yahoo! Web Analytics
      3. Mobilytics
    3. Monetizing your website
      1. Mobile Advertisement
    4. Mobile Web Social Features
      1. Authentication and sharing APIs
      2. Share Content
  21. 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. Webapp MIME Types
  22. Index
  23. About the Author
  24. Colophon
  25. Copyright
O'Reilly logo

Chapter 19. Distribution and Social Web 2.0

So, you’ve finished your mobile web application and you are ready to go to market (or so you think). However, your work isn’t over yet. In this chapter, we are going to analyze some search engine optimization tips, and talk about how to get users to actually visit our mobile websites and encourage them to come back again and again.

We will also explore how to monetize mobile websites using advertising and how to merge our applications with some social features, such as SMS, RSS, and social networks.

Mobile SEO

Search engine optimization (SEO) refers to a set of best practices that you can follow to allow your website to be in the best possible place in a search engine.

In general, typical desktop SEO techniques apply to mobile websites, too, but some extra care must be taken. As we’ve already discussed, generating too much code (metadata) and too much text for keyword crawling is not the best solution for the mobile web.

The first thing we need to understand is that mobile search users are not the same as desktop search users. Mobile users are typically searching for something very specific, and we should do our best to facilitate access to those resources.

Mobile search engines (Google, Yahoo!, Bing) localize the search results, so if your service is location-based, you should make sure that your location is properly defined in your text and code. In mobile search engines, the user only types a few characters and the engine tries to suggest ...

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