Preface

In your pocket is a device that has changed the lives of billions of people all over the world. The third personal screen (after the TV and the computer) is the most personal one, and bringing our services to it is one of the key business priorities of this decade.

Mobile development, however, is a more challenging activity than desktop development. Platforms are severely fragmented, and developers have to work with minimal resources. Fortunately, the mobile web makes it easier to deal with this fragmentation, allowing developers to create applications that run on many more platforms than native (or installable) applications. As we will see later, the mobile web and installable applications are not enemies. In fact, they work together very well.

All of that sounds great: billions of devices, web technologies, multiplatform solutions…where’s the problem? More than half of your desktop web skills and the tips, hacks, and best practices you already know simply do not apply on the mobile web. The mobile web demands new usability patterns, new programming best practices, and new knowledge and abilities.

At the time of this writing there are almost no books, websites, or training courses focused on concrete mobile web programming. We don’t need vague information like “this may not work on some phones”; we need real, fresh, and working data. On which devices does a solution not work? Why? Is there another solution? That is why I’ve written this book: to help developers in programming mobile websites.

You may feel that you are advanced enough to go directly to the code, but I encourage you to start from the beginning of the book if you are new to the mobile world. This is another universe, and every universe has its own rules.

P.1. Who This Book Is For

This book is for experienced web developers who want to learn what’s different about designing for the mobile web. We will talk about HTML, CSS, JavaScript, Ajax, and server-side code as if you have experience with all those technologies. If you are a web designer with some basic programming skills, you will also find this book useful.

We will cover HTML 5 features, but don’t worry if you don’t have any experience with this new upcoming version yet; we will cover it from the ground up, and your HTML 4 and XHTML 1.0 knowledge will be enough.

If you are an individual freelancer, if you work for a company in the areas of programming or web development, or if you work in a web design studio, this book is for you. Perhaps you need to create a mobile application or client for a current desktop service, you want to add new services to your portfolio, or you need to migrate an old WAP site to newer devices.

Or perhaps you are a widget developer or a Rich Internet Application programmer, using desktop offline technologies like Google Gears or Adobe AIR. This book will teach you how to use your current skills to create offline mobile applications and browser-based solutions.

You may also be a Web 2.0 entrepreneur with—or looking for—a great idea for mobile devices, and you want to analyze what you can do with current mobile browsers. This book investigates compatibility device by device and discusses advanced features you can implement.

The book will also be useful if you are wondering how to identify devices and deliver proper and compatible content for ad campaigns, to sell content or to deliver free content to mobile users.

P.2. Who This Book Is Not For

We don’t really want to cut anyone out of the possibility of reading this book, but there are a lot of people who aren’t likely to enjoy it. If you are a graphic designer, you will not find detailed tips and practices in this book, and you are likely to only enjoy the first three chapters.

If you are a web designer without programming skills, Chapters Chapter 1 through Chapter 7 are the ones you should read line by line; the rest will be useful to review so you know the capabilities you can request from a developer.

If you are a native mobile developer (iPhone, Android, Symbian, Java ME, Windows Mobile), some web knowledge will be required in order to understand and follow all the samples in this book.

This is also not a book for learning basic HTML, CSS, or JavaScript. You will not find detailed samples or step-by-step instructions on how to implement every task. It is assumed that you are experienced enough to create code on your own or, at least know how to find out by searching on the Web.

If you are a manager, a CTO, a project leader, or an entrepreneur without any web knowledge, you will find the first four chapters useful: they describe the state of the art in this market and should help you decide how to organize your team.

P.3. What You’ll Learn

This book is an advanced reference for the mobile web today, and it is the most complete reference available at this time. This may seem an ambitious claim, but it is the truth. This book draws upon a mix of experience and very detailed research and testing not available in other books, websites, or research papers about the mobile web.

Programming the Mobile Web will teach you how to create effective and rich experiences for mobile web browsers, and also how to create offline applications or widgets that will be installed in the devices’ applications menu.

We will not talk only about the star devices, like the iPhone and Android devices; we will also cover mass-market platforms from Nokia, Sony Ericsson, Motorola, BlackBerry, Palm, Windows Mobile, and Symbian.

Chapter 1, and Chapter 2, introduce the mobile world: they will help you understand who is who in this market, what platforms you should care about, how to know your users, and how mobile browsing works (covering all the mobile browsers currently available in the market). We will also cover the history of the mobile web, including WAP and Mobile Web 2.0.

Chapter 3, focuses on architecture, design, and usability, presenting a quick review of the tips, differences, and best practices for defining the navigation structure; the design template; and the differences for touch devices.

We will install our development and production environment in Chapter 4, which covers all the emulators, tools, and IDEs we will need to use for our work and what is required on the server side.

Chapter 5, and Chapter 6, focus on markup coding; we will review every standard (mobile and not) that we can use, with a full compatibility table presented for each one. We will cover what happens with standard code (including links, images, frames, and tables) and how to deal with mobile-specific markup, like call-to actions and viewport management for zooming purposes. Every feature will be tested for almost every important browser today, so we know what we can use on every platform. We will also cover how SVG and Adobe Flash work on the mobile web.

In Chapter 7, we will start our journey in CSS Mobile and look at how to deal with standards and differences in attribute support. We will see how CSS 2.1 and CSS 3 work on mobile browsers and what advanced extensions we can use on some devices. Chapter 8, deals with JavaScript, starting with how standard dialogs and pop-ups work and passing through DOM compatibility and touch event support.

We will continue adding best practices for mobile web development in Chapter 9, covering Rich Internet Application technologies including Ajax support, Dynamic HTML, and new features of HTML 5, such as offline support, database storage, and form enhancements.

We start our work on device detection, discoverability, and content delivery in Chapter 10, working on the server side. We will explore solutions for all server platforms and look at some samples in PHP to detect devices, transform output, and deliver content.

Location-Based Services (LBS) will be covered in Chapter 11, along with geolocation and maps support for mobile devices. We will talk about standard and nonstandard APIs, server-side solutions, and best practices to locate the user and to show map information.

Chapter 12, will be the gem for everyone looking to bypass the browser barrier and create offline applications with icons in the user’s home or applications menu using strictly web technologies. We will cover web apps for iPhone and Android devices, hybrid application development, and the widget platforms available today in other platforms, including JavaScript API extensions. Store distribution (free or premium) will be also covered in this chapter.

Chapter 13, illustrates how we can test and debug mobile web applications and how to measure and enhance our mobile web performance. Finally, in Chapter 14, we will talk about distribution and social networks in a Web 2.0 environment, covering mobile search engine optimization (SEO), mobile advertisement, distribution techniques including QR codes, and mobile social network integration, with Facebook and Twitter as samples.

P.4. Other Options

There aren’t many resources available today for multiplatform mobile web development. You will find specific information and books for the iPhone and maybe for Android, but that’s about it. Other available books (at present, not more than three) are outdated or do not contain much real information, having plenty of “maybes,” “perhapses,” and “be carefuls.”

If you need to learn web technologies, there are plenty of books and resources available. Take a look at http://www.oreilly.com/css-html and http://www.oreilly.com/javascript for some lists.

If you want to get information on the mobile web for specific platforms, here are some resources you can explore:

• Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark (O’Reilly)

• Palm webOS by Mitch Allen (O’Reilly)

• BlackBerry Development Fundamentals (Addison-Wesley Professional)

• Practical Palm Pre webOS Projects (Apress)

• Developing Hybrid Applications for the iPhone (Addison-Wesley Professional)

• Safari and WebKit development for iPhone OS 3.0 (Wrox)

• AdvancED Flash on Devices (Friends of Ed)

If you want a complement to this book in the areas of design, performance, and advanced programming, I recommend the following books:

• Mobile Design and Development by Brian Fling (O’Reilly)

• Programming the iPhone User Experience by Toby Boudreaux (O’Reilly)

• JavaScript: The Good Parts by Douglas Crockford (O’Reilly)

• High Performance JavaScript by Nicholas Zakas (O’Reilly)

• High Performance Websites by Steve Souders (O’Reilly)

• Even Faster Web Sites by Steve Souders (O’Reilly)

• Website Optimization Andrew B. King (O’Reilly)

You may also want to begin in the native mobile development world. For that, you should explore some of these books:

• Learning iPhone Programming by Alasdair Allan (O’Reilly)

• Head First iPhone Development by Dan Pilone and Tracey Pilone (O’Reilly)

• Android Application Development by Rick Rogers et al. (O’Reilly)

• Beginning iPhone 3 Development (Apress)

• Beginning Java ME Platform (Apress)

• Qt for Symbian (John Wiley & Sons)

• Professional Microsoft Smartphone Programming (Microsoft Press)

P.5. If You Like (or Don’t Like) This Book

If you like—or don’t like—this book, by all means, please let people know. Amazon reviews are one popular way to share your happiness (or lack of happiness), and you can leave reviews on this book’s website:

http://www.oreilly.com/catalog/9780596807788/

There’s also a link to errata there, which readers can use to let us know about typos, errors, and other problems with the book. Reported errors will be visible on the page immediately, and we’ll confirm them after checking them out. O’Reilly can also fix errata in future printings of the book and on Safari, making for a better reader experience pretty quickly.

We hope to keep this book updated for future mobile platforms, and will also incorporate suggestions and complaints into future editions.

P.6. Conventions Used in This Book

The following font conventions are used in this book:

Italic

Indicates pathnames, filenames, and program names; Internet addresses, such as domain names and URLs; and new items where they are defined.

Constant width

Indicates command lines and options that should be typed verbatim; names and keywords in programs, including method names, variable names, and class names; and HTML/XHTML element tags.

Constant width
        bold

Used for emphasis in program code lines.

Constant width italic

Indicates text that should be replaced with user-supplied values.

---

Note:

This icon signifies a tip, suggestion, or general note.

---

---

Warning:

This icon indicates a warning or caution.

---

P.7. Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Programming the Mobile Web by Maximiliano Firtman. Copyright 2010 Maximiliano Firtman, 978-0-596-80778-8.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com.

P.8. How to Contact Us

We have tested and verified the information in this book to the best of our ability, but you may find that features have changed (or even that we have made a few mistakes!).

The author has created a blog to maintain updated information and links for this book; it is available at http://www.mobilexweb.com.

Please let us know about any errors you find, as well as your suggestions for future editions, by writing to:

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

800-998-9938 (in the U.S. or Canada)

707-829-0515 (international/local)

707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

http://www.oreilly.com/catalog/9780596807788/

To comment or ask technical questions about this book, send email to:

bookquestions@oreilly.com

For more information about our books, conferences, Resource Centers, and the O’Reilly Network, see our website at:

http://www.oreilly.com

P.9. Safari® Books Online

With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.

P.10. Acknowledgments

I want to thank first all the members of my family, including my parents, Stella Maris and Edgardo, my brother, Sebastián, and my lovely wife, Ani, who have supported me during the writing of this book and all of my projects.

Second, thanks to the many anonymous people who have helped with samples, tutorials, testing, and documentation during the last 10 years. Without them, I could not have learned as much as I have and gained experience in this minefield.

I want to thank my technical reviewers, who helped find some bugs and fill in some information gaps: Fantayeneh Asres Gizaw, Gabor Torok, Amit Kankani, Chris Abbott, and Kyle Barrow. A special thanks to Luca Passani, CEO of WURFL-Pro, whose technical review was great work and helped me understand the transcoding background.

Some opinions were collected from sources at many important companies, like Cathy Rohrl from Weather.com. Thanks to all of you for taking time to answer my questions.

Some of the real testing for this book was done thanks to the DeviceAnywhere.com service. I want to thank Maria Belen del Pino, Ryan Peterson, and Josh Galde from DeviceAnywhere; your support was definitely helpful in making this book.

A special mention to Rachel Head, copyeditor of this book, who did a really great job making this book a perfect read even with my not-so-perfect English.

Finally, to Simon St.Laurent at O’Reilly Media, thanks for all your help and for trusting me when I presented this risky project.

Creating a book about the mobile web was really a challenge, but it was worth it. Enjoy!