O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Professional Mobile Web Development with WordPress®, Joomla!®, and Drupal®

Professional Mobile Web Development with WordPress®, Joomla!®, and Drupal®

by James Pearce
Publisher: Wrox
Release Date: April 2011
ISBN: 9780470889510
View table of contents
Start reading

Book Description

How to develop powerful mobile Web sites using popular content management systems (CMS)

Mobile is the hottest thing going—and developing content for mobile devices and browsers is even hotter than that. This book is your guide to it all—how to design, build, and deploy sites, blogs and services that will work brilliantly for mobile users. You'll learn about the state-of-the-art of mobile web development, the tools available to use, and the best practices for creating compelling mobile user interfaces. Then, using the most popular content management systems, WordPress, Joomla!, and Drupal, you'll learn how to building world-class mobile web sites from existing platforms and content.. The book walks you through each platform, including how to use third-party plug-ins and themes, explains the strategies for writing your own logic, how to switch between mobile and desktop, and much more.

  • Provides a technical review of the mobile landscape and acquaints you with a range of mobile devices and networks

  • Covers topics common to all platforms, including site topologies, switching between mobile and desktop, common user interface patterns, and more

  • Walks you through each content management platform—WordPress, Joomla!, and Drupal—first focusing on standard plug-ins and themes and then exploring advanced techniques for writing your own themes or logic

  • Explains the best practices for testing, deploying, and integrating a mobile web site

  • Also explores analytics, m-commerce, and SEO techniques for mobile

Get ahead of the the mobile web development curve with this professional and in-depth reference guide!

Table of Contents

  1. Copyright
  2. ABOUT THE AUTHOR
  3. ABOUT THE TECHNICAL EDITOR
  4. CREDITS
  5. ACKNOWLEDGMENTS
  6. INTRODUCTION
    1. WHO THIS BOOK IS FOR
    2. HOW THIS BOOK IS STRUCTURED
    3. WHAT YOU NEED TO USE THIS BOOK
    4. CONVENTIONS
    5. SOURCE CODE
    6. ERRATA
    7. P2P.WROX.COM
  7. I. The World of the Mobile Web
    1. 1. Introducing the Mobile Web
      1. 1.1. THE INEVITABILITY OF A MOBILE WEB
      2. 1.2. A BRIEF HISTORY OF THE MOBILE WEB
        1. 1.2.1. Early Technologies
        2. 1.2.2. i-mode in Japan
        3. 1.2.3. Wireless Access Protocol
        4. 1.2.4. Dawn of the Modern Mobile Web
      3. 1.3. A NEW MEDIUM
      4. 1.4. REVISITING ASSUMPTIONS
      5. 1.5. MOBILE WEB CONSIDERATIONS
        1. 1.5.1. Recognizing Mobile Users
        2. 1.5.2. Thematic Consistency
        3. 1.5.3. Brand Consistency
        4. 1.5.4. A Dedication to Usability
        5. 1.5.5. Remember Mobile
      6. 1.6. SUMMARY
    2. 2. A Technical Overview of the Mobile Web
      1. 2.1. THE TECHNICAL CHALLENGES OF MOBILE DEVICES
        1. 2.1.1. Physical Constraints
        2. 2.1.2. Device Diversity
        3. 2.1.3. Browser Characteristics
        4. 2.1.4. Speed and Power
      2. 2.2. THE MOBILE NETWORK
        1. 2.2.1. Data Networks
        2. 2.2.2. Throughput and Latency
        3. 2.2.3. An Introduction to Transcoding
        4. 2.2.4. Firewalls and Security
      3. 2.3. OTHER MOBILE TECHNOLOGIES
        1. 2.3.1. Apps and App Stores
        2. 2.3.2. Mobile Widgets
        3. 2.3.3. Messaging and Short Codes
        4. 2.3.4. Bar Codes
        5. 2.3.5. Geolocation and Augmented Reality
      4. 2.4. SUMMARY
    3. 3. Keeping Abreast of Developments
      1. 3.1. HOW DEVICES ARE CHANGING
        1. 3.1.1. Physical Characteristics
          1. 3.1.1.1. Screen Technology
          2. 3.1.1.2. Input Mechanisms
          3. 3.1.1.3. Other Hardware Components
        2. 3.1.2. Network Technology
        3. 3.1.3. Operating Systems
      2. 3.2. WEB AND MOBILE WEB EVOLUTION
        1. 3.2.1. Markup
        2. 3.2.2. Styling
        3. 3.2.3. Scripting
        4. 3.2.4. Embedded Media
        5. 3.2.5. Client APIs
      3. 3.3. WHERE TO GO FOR HELP
        1. 3.3.1. Standards Bodies
        2. 3.3.2. Vendor Communities
        3. 3.3.3. Operator Programs
        4. 3.3.4. Independent Resources
      4. 3.4. SUMMARY
    4. 4. Major Mobile Web Browsers
      1. 4.1. THE WEBKIT BROWSERS
        1. 4.1.1. Mobile Safari
          1. 4.1.1.1. Configuring the Viewport
        2. 4.1.2. Android
        3. 4.1.3. Nokia Implementations
        4. 4.1.4. Other Implementations
        5. 4.1.5. Mobile Internet Explorer
        6. 4.1.6. Opera Mobile and Mini
        7. 4.1.7. Other Browsers
      2. 4.2. SUMMARY
    5. 5. The Mobile Toolbox
      1. 5.1. WORKING WITH YOUR EXISTING WEBSITE
        1. 5.1.1. Simple Static Techniques
        2. 5.1.2. Taking Managed Content Mobile
        3. 5.1.3. Crafting New Mobile Experiences
      2. 5.2. BUILDING AFRESH FOR MOBILE
        1. 5.2.1. Mobile Users as First-Class Citizens
        2. 5.2.2. Sharing Existing Data
      3. 5.3. SERVER TECHNOLOGIES
        1. 5.3.1. Web Servers and Mobile
        2. 5.3.2. Languages and Frameworks
      4. 5.4. DEVELOPMENT TOOLS
        1. 5.4.1. IDEs and Code Editors
        2. 5.4.2. Mobile SDKs and Emulators
        3. 5.4.3. Testing Tools
      5. 5.5. SUMMARY
  8. II. General Mobile Techniques
    1. 6. The Anatomy of a Mobile Site
      1. 6.1. SITE STRUCTURE AND CONCEPTS
        1. 6.1.1. Information Architecture
        2. 6.1.2. Entry Points and URLs
      2. 6.2. NAVIGATION AND MENU SYSTEMS
        1. 6.2.1. Navigational Lists
        2. 6.2.2. Decorating Menus
        3. 6.2.3. Breadcrumbs
        4. 6.2.4. Header and Footer Navigation
        5. 6.2.5. Paving Mobile Pathways
        6. 6.2.6. Switcher Links
      3. 6.3. PRIMARY SITE CONTENT
        1. 6.3.1. Text and Typography
        2. 6.3.2. Pagination
        3. 6.3.3. Embedding Images and Media
          1. 6.3.3.1. Other Media
        4. 6.3.4. Forms
      4. 6.4. INVOKING OTHER DEVICE CAPABILITIES
      5. 6.5. STYLING WITH CSS
        1. 6.5.1. CSS Considerations for Mobile
        2. 6.5.2. Optimizing CSS
      6. 6.6. THE STATE OF JAVASCRIPT
      7. 6.7. SUMMARY
    2. 7. Switching Between Mobile and Desktop Browsers
      1. 7.1. BROWSER DETECTION
        1. 7.1.1. Looking at Headers
        2. 7.1.2. User-Agents and Transcoders
        3. 7.1.3. A Simple Detection Algorithm
        4. 7.1.4. Using Device Database Recognition
      2. 7.2. WURFL
        1. 7.2.1. DeviceAtlas
        2. 7.2.2. Detection on the Client Side
      3. 7.3. THEME AND SITE SWITCHING
        1. 7.3.1. Theme Selection
        2. 7.3.2. Remembering User Choice
        3. 7.3.3. Using Mobile Domains
      4. 7.4. SUMMARY
    3. 8. CMS UI Patterns for Mobile
      1. 8.1. REGISTRATION AND LOGIN
        1. 8.1.1. Form Design
        2. 8.1.2. Field Validation
        3. 8.1.3. Tuning the Mobile Experience
        4. 8.1.4. Login Refinements
      2. 8.2. CONTENT LISTS
        1. 8.2.1. Access Keys and Pagination
        2. 8.2.2. Decoration
        3. 8.2.3. Fold-ups
        4. 8.2.4. Search Results
      3. 8.3. GALLERIES
      4. 8.4. USER CONTRIBUTION
      5. 8.5. SUMMARY
    4. 9. Designing for Mobile Devices
      1. 9.1. COMMON PHILOSOPHIES
        1. 9.1.1. Preserving the Brand
        2. 9.1.2. Reusing Native Design Patterns
        3. 9.1.3. Mobile First
        4. 9.1.4. Mobile Interface Design
      2. 9.2. CLIENT-BASED MOBILE DESIGN
        1. 9.2.1. Introducing Media Queries
        2. 9.2.2. Responsive Design
        3. 9.2.3. Scaling Images
      3. 9.3. SERVER-BASED MOBILE DESIGN
        1. 9.3.1. Embracing Diversity
        2. 9.3.2. Designing for Device Groups
        3. 9.3.3. Combining Approaches
      4. 9.4. SUMMARY
    5. 10. Mobile Templates and Libraries
      1. 10.1. IWEBKIT
      2. 10.2. NOKIA WEB TEMPLATES
      3. 10.3. JQTOUCH
      4. 10.4. JQUERY MOBILE
      5. 10.5. SENCHA TOUCH
      6. 10.6. SUMMARY
  9. III. Major CMS Platforms
    1. 11. Basic WordPress Mobilization
      1. 11.1. AN INTRODUCTION TO WORDPRESS
        1. 11.1.1. Posts, Pages, and Comments
        2. 11.1.2. Media and Links
        3. 11.1.3. Themes and Widgets
        4. 11.1.4. Plug-ins
      2. 11.2. DOTMOBI WORDPRESS MOBILE PACK
        1. 11.2.1. Installation
        2. 11.2.2. Configuration
          1. 11.2.2.1. Switcher Settings
          2. 11.2.2.2. Widgets
          3. 11.2.2.3. Rendering
          4. 11.2.2.4. Analytics
        3. 11.2.3. Configuring and Extending the Theme
        4. 11.2.4. Mobile Administration
      3. 11.3. WPTOUCH
        1. 11.3.1. Installation
        2. 11.3.2. WPtouch Theme
        3. 11.3.3. Configuration
      4. 11.4. WORDPRESS MOBILE EDITION
      5. 11.5. MOBILEPRESS
      6. 11.6. WORDPRESS MOBILE APP
      7. 11.7. SUMMARY
    2. 12. Advanced WordPress Mobilization
      1. 12.1. DEVELOPING YOUR OWN MOBILE THEME
        1. 12.1.1. Headers and Footers
        2. 12.1.2. Post Lists
        3. 12.1.3. Post and Page Detail
        4. 12.1.4. Comments
        5. 12.1.5. Menu and Navigation
      2. 12.2. USING WORDPRESS HOOKS AND FILTERS
        1. 12.2.1. Theme Selection
        2. 12.2.2. Content Rewriting
        3. 12.2.3. Pagination
        4. 12.2.4. Image Adaptation
      3. 12.3. SUMMARY
    3. 13. Basic Drupal Mobilization
      1. 13.1. AN INTRODUCTION TO DRUPAL
        1. 13.1.1. Nodes and Content Types
        2. 13.1.2. Modules
        3. 13.1.3. Blocks
        4. 13.1.4. Themes
        5. 13.1.5. Taxonomy
      2. 13.2. THE DRUPAL MOBILE PLUGIN MODULE
        1. 13.2.1. Installation
        2. 13.2.2. Configuration
        3. 13.2.3. Reviewing the Experience
      3. 13.3. MOBILE TOOLS
        1. 13.3.1. Installation and Configuration
        2. 13.3.2. Controlling Redirects
        3. 13.3.3. Mobile Roles
      4. 13.4. MOBILE THEME
      5. 13.5. USING NOKIA MOBILE THEMES
      6. 13.6. OTHER THEMES
      7. 13.7. SUMMARY
    4. 14. Advanced Drupal Mobilization
      1. 14.1. DEVELOPING YOUR OWN MOBILE THEME
        1. 14.1.1. Headers and Footers
        2. 14.1.2. Nodes and Lists
        3. 14.1.3. Menu and Navigation
        4. 14.1.4. Blocks
        5. 14.1.5. Comments
      2. 14.2. CREATING A DRUPAL MODULE
        1. 14.2.1. Theme Selection
        2. 14.2.2. Content Rewriting
      3. 14.3. WORKING WITH OTHER MODULES
        1. 14.3.1. CCK
        2. 14.3.2. Views
      4. 14.4. SUMMARY
    5. 15. Basic Joomla! Mobilization
      1. 15.1. AN INTRODUCTION TO JOOMLA!
        1. 15.1.1. Articles
        2. 15.1.2. Sections and Categories
        3. 15.1.3. Menus
        4. 15.1.4. Extensions
      2. 15.2. WAFL
      3. 15.3. AUTO TEMPLATE SWITCHER
      4. 15.4. MOBILEBOT
      5. 15.5. MOBILE JOOMLA!
      6. 15.6. TAPTHEME
      7. 15.7. SUMMARY
    6. 16. Advanced Joomla! Mobilization
      1. 16.1. DEVELOPING A MOBILE TEMPLATE
        1. 16.1.1. Sections and Categories
        2. 16.1.2. Articles
        3. 16.1.3. Front Page
        4. 16.1.4. Modules and Menus
      2. 16.2. CREATING A JOOMLA! PLUGIN
        1. 16.2.1. Theme Selection
        2. 16.2.2. Content Rewriting
      3. 16.3. SUMMARY
  10. IV. Enhancing and Launching Your Site
    1. 17. JavaScript Frameworks
      1. 17.1. JQUERY MOBILE
        1. 17.1.1. Posts List
        2. 17.1.2. Post and Page Detail
      2. 17.2. SENCHA TOUCH
        1. 17.2.1. Application Structure
        2. 17.2.2. Modeling the CMS Data Store
        3. 17.2.3. User Interface
        4. 17.2.4. Displaying Posts
      3. 17.3. SUMMARY
    2. 18. Testing and Debugging Mobile Sites
      1. 18.1. USING DESKTOP CLIENTS
        1. 18.1.1. Mozilla Firefox
        2. 18.1.2. Desktop WebKit Browsers
      2. 18.2. MOBILE EMULATORS
        1. 18.2.1. iPhone and iPad
        2. 18.2.2. Android
        3. 18.2.3. BlackBerry
        4. 18.2.4. Nokia Series 40 and Symbian∧3
        5. 18.2.5. Palm webOS
        6. 18.2.6. Opera Mobile
        7. 18.2.7. Windows Mobile
      3. 18.3. ONLINE TEST LABS
        1. 18.3.1. DeviceAnywhere
        2. 18.3.2. Perfecto Mobile
        3. 18.3.3. Forum Nokia Remote Access
        4. 18.3.4. mobiReady
        5. 18.3.5. W3C Validators
      4. 18.4. TESTING WITH REAL HANDSETS
      5. 18.5. SUMMARY
    3. 19. Final Touches
      1. 19.1. DEFENDING YOUR SITE
        1. 19.1.1. Whitelisting
        2. 19.1.2. Avoiding Transcoding with Headers and Markup
      2. 19.2. UNDERSTANDING MOBILE TRAFFIC
        1. 19.2.1. Log Files
        2. 19.2.2. Mobile Analytics
          1. 19.2.2.1. PercentMobile
          2. 19.2.2.2. Google Analytics
        3. 19.2.3. Mobile Search
          1. 19.2.3.1. Mobile Crawlers
          2. 19.2.3.2. Search Interfaces
      3. 19.3. MONETIZATION
        1. 19.3.1. Mobile Ad Networks
          1. 19.3.1.1. AdMob
          2. 19.3.1.2. Google AdSense
        2. 19.3.2. Mobile Commerce
      4. 19.4. SUMMARY
  11. V. References
    1. A. Further Reading
      1. A.1. STANDARDS
        1. A.1.1. Web Markup
          1. A.1.1.1. XHTML for Mobile
          2. A.1.1.2. XHTML-MP
          3. A.1.1.3. Comparison of Mobile Markups
          4. A.1.1.4. HTML 5
        2. A.1.2. Style Sheets
        3. A.1.3. JavaScript
          1. A.1.3.1. HTML 5 APIs
        4. A.1.4. Network APIs
      2. A.2. BEST PRACTICES
      3. A.3. VENDOR GUIDELINES
    2. B. Useful Sites
      1. B.1. CMS DEVELOPER RESOURCES
        1. B.1.1. WordPress
        2. B.1.2. Drupal
        3. B.1.3. Joomla!
      2. B.2. MOBILE WEB COMMUNITY RESOURCES
        1. B.2.1. mobiForge
        2. B.2.2. mobiThinking
        3. B.2.3. Wireless Industry Partnership
        4. B.2.4. Mobile Monday
        5. B.2.5. Ajaxian
        6. B.2.6. Mobile Web Programming
        7. B.2.7. Quirksmode
        8. B.2.8. mobile-web
        9. B.2.9. wmlprogramming
      3. B.3. INDUSTRY COMMUNITIES
    3. GLOSSARY