O'Reilly logo

Head First Mobile Web by Jason Grigsby, Lyza Danger Gardner

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

How to use this Book: Intro

image with no caption

In this section, we answer the burning question: “So why DID they put that in a Mobile Web book?”

Who is this book for?

If you can answer “yes” to all of these:

  1. Do you have previous web design and development experience?

    Note

    It definitely helps if you’ve already got some scripting chops, too. We’re not talking rocket science, but you shouldn’t feel visceral panic if you see a JavaScript snippet.

  2. Do you want to learn, understand, remember, and apply important mobile web concepts so that you can make your mobile web pages more interactive and exciting?

  3. Do you prefer stimulating dinner-party conversation to dry, dull, academic lectures?

this book is for you.

Who should probably back away from this book?

If you can answer “yes” to any of these:

  1. Are you completely new to web development?

  2. Are you already developing mobile web apps or sites and looking for a reference book on mobile web?

  3. Are you afraid to try something different? Would you rather have a root canal than endure the suggestion that there might be more than one true way to build for the Web? Do you believe that a technical book can’t be serious if there’s a walrus-themed pub and an app called the Tartanator in it?

this book is not for you.

image with no caption

[Note from marketing: this book is for anyone with a credit card. Or cash. Cash is nice, too. - Ed]

We know what you’re thinking

“How can this be a serious mobile web development book?”

“What’s with all the graphics?”

“Can I actually learn it this way?”

And we know what your brain is thinking

Your brain craves novelty. It’s always searching, scanning, waiting for something unusual. It was built that way, and it helps you stay alive.

So what does your brain do with all the routine, ordinary, normal things you encounter? Everything it can to stop them from interfering with the brain’s real job—recording things that matter. It doesn’t bother saving the boring things; they never make it past the “this is obviously not important” filter.

How does your brain know what’s important? Suppose you’re out for a day hike and a tiger jumps in front of you. What happens inside your head and body?

Neurons fire. Emotions crank up. Chemicals surge.

And that’s how your brain knows...

image with no caption

This must be important! Don’t forget it!

But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. You’re studying. Getting ready for an exam. Or trying to learn some tough technical topic your boss thinks will take a week, 10 days at the most.

Just one problem. Your brain’s trying to do you a big favor. It’s trying to make sure that this obviously nonimportant content doesn’t clutter up scarce resources. Resources that are better spent storing the really big things. Like tigers. Like the danger of fire. Like how you should never again snowboard in shorts.

And there’s no simple way to tell your brain, “Hey brain, thank you very much, but no matter how dull this book is, and how little I’m registering on the emotional Richter scale right now, I really do want you to keep this stuff around.”

image with no caption

Metacognition: thinking about thinking

If you really want to learn, and you want to learn more quickly and more deeply, pay attention to how you pay attention. Think about how you think. Learn how you learn.

Most of us did not take courses on metacognition or learning theory when we were growing up. We were expected to learn, but rarely taught to learn.

But we assume that if you’re holding this book, you really want to learn about mobile web development. And you probably don’t want to spend a lot of time. And since you’re going to build more sites and apps in the future, you need to remember what you read. And for that, you’ve got to understand it. To get the most from this book, or any book or learning experience, take responsibility for your brain. Your brain on this content.

The trick is to get your brain to see the new material you’re learning as Really Important. Crucial to your well-being. As important as a tiger. Otherwise, you’re in for a constant battle, with your brain doing its best to keep the new content from sticking.

image with no caption

So just how do you get your brain to think that mobile web development is a hungry tiger?

There’s the slow, tedious way, or the faster, more effective way. The slow way is about sheer repetition. You obviously know that you are able to learn and remember even the dullest of topics if you keep pounding the same thing into your brain. With enough repetition, your brain says, “This doesn’t feel important to him, but he keeps looking at the same thing over and over and over, so I suppose it must be.”

The faster way is to do anything that increases brain activity, especially different types of brain activity. The things on the previous page are a big part of the solution, and they’re all things that have been proven to help your brain work in your favor. For example, studies show that putting words within the pictures they describe (as opposed to somewhere else in the page, like a caption or in the body text) causes your brain to try to makes sense of how the words and picture relate, and this causes more neurons to fire. More neurons firing = more chances for your brain to get that this is something worth paying attention to, and possibly recording.

A conversational style helps because people tend to pay more attention when they perceive that they’re in a conversation, since they’re expected to follow along and hold up their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” is between you and a book! On the other hand, if the writing style is formal and dry, your brain perceives it the same way you experience being lectured to while sitting in a roomful of passive attendees. No need to stay awake.

But pictures and conversational style are just the beginning.

Here’s what WE did

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s concerned, a picture really is worth a thousand words. And when text and pictures work together, we embedded the text in the pictures because your brain works more effectively when the text is within the thing the text refers to, as opposed to in a caption or buried in the text somewhere.

We used redundancy, saying the same thing in different ways and with different media types, and multiple senses, to increase the chance that the content gets coded into more than one area of your brain.

image with no caption

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, and we used pictures and ideas with at least some emotional content, because your brain is tuned to pay attention to the biochemistry of emotions. That which causes you to feel something is more likely to be remembered, even if that feeling is nothing more than a little humor, surprise, or interest.

image with no caption

We used a personalized, conversational style, because your brain is tuned to pay more attention when it believes you’re in a conversation than if it thinks you’re passively listening to a presentation. Your brain does this even when you’re reading.

We included loads of activities, because your brain is tuned to learn and remember more when you do things than when you read about things. And we made the exercises challenging-yet-doable, because that’s what most people prefer.

image with no caption

We used multiple learning styles, because you might prefer step-by-step procedures, while someone else wants to understand the big picture first, and someone else just wants to see an example. But regardless of your own learning preference, everyone benefits from seeing the same content represented in multiple ways.

We include content for both sides of your brain, because the more of your brain you engage, the more likely you are to learn and remember, and the longer you can stay focused. Since working one side of the brain often means giving the other side a chance to rest, you can be more productive at learning for a longer period of time.

image with no caption

And we included stories and exercises that present more than one point of view, because your brain is tuned to learn more deeply when it’s forced to make evaluations and judgments.

We included challenges, with exercises, and by asking questions that don’t always have a straight answer, because your brain is tuned to learn and remember when it has to work at something. Think about it—you can’t get your body in shape just by watching people at the gym. But we did our best to make sure that when you’re working hard, it’s on the right things. That you’re not spending one extra dendrite processing a hard-to-understand example, or parsing difficult, jargon-laden, or overly terse text.

We used people. In stories, examples, pictures, etc., because, well, you’re a person. And your brain pays more attention to people than it does to things.

image with no caption

Here’s what YOU can do to bend your brain into submission

So, we did our part. The rest is up to you. These tips are a starting point; listen to your brain and figure out what works for you and what doesn’t. Try new things.

image with no caption

Cut this out and stick it on your refrigerator.

  1. Slow down. The more you understand, the less you have to memorize.

    Don’t just read. Stop and think. When the book asks you a question, don’t just skip to the answer. Imagine that someone really is asking the question. The more deeply you force your brain to think, the better chance you have of learning and remembering.

  2. Do the exercises. Write your own notes.

    We put them in, but if we did them for you, that would be like having someone else do your workouts for you. And don’t just look at the exercises. Use a pencil. There’s plenty of evidence that physical activity while learning can increase the learning.

  3. Read “There Are No Dumb Questions.”

    That means all of them. They’re not optional sidebars—they’re part of the core content! Don’t skip them.

  4. Make this the last thing you read before bed. Or at least the last challenging thing.

    Part of the learning (especially the transfer to long-term memory) happens after you put the book down. Your brain needs time on its own, to do more processing. If you put in something new during that processing time, some of what you just learned will be lost.

  5. Drink water. Lots of it.

    Your brain works best in a nice bath of fluid. Dehydration (which can happen before you ever feel thirsty) decreases cognitive function.

  6. Talk about it. Out loud.

    Speaking activates a different part of the brain. If you’re trying to understand something, or increase your chance of remembering it later, say it out loud. Better still, try to explain it out loud to someone else. You’ll learn more quickly, and you might uncover ideas you hadn’t known were there when you were reading about it.

  7. Listen to your brain.

    Pay attention to whether your brain is getting overloaded. If you find yourself starting to skim the surface or forget what you just read, it’s time for a break. Once you go past a certain point, you won’t learn faster by trying to shove more in, and you might even hurt the process.

  8. Feel something!

    Your brain needs to know that this matters. Get involved with the stories. Make up your own captions for the photos. Groaning over a bad joke is still better than feeling nothing at all.

  9. Create something!

    Apply this to your daily work; use what you are learning to make decisions on your projects. Just do something to get some experience beyond the exercises and activities in this book. All you need is a pencil and a problem to solve...a problem that might benefit from using the tools and techniques you’re studying for the exam.

Read me

This is a learning experience, not a reference book. We deliberately stripped out everything that might get in the way of learning whatever it is we’re working on at that point in the book. And the first time through, you need to begin at the beginning, because the book makes assumptions about what you’ve already seen and learned.

We expect you to know HTML and CSS.

If you don’t know HTML and CSS, pick up a copy of Head First HTML with CSS & XHTML before starting this book. We’ll explain some of the more obscure CSS selectors or HTML elements, but don’t expect to learn about that foundational stuff here.

We expect you to feel comfy around web scripting code.

We’re not asking you to be a world-class JavaScript expert or to have done a graduate computer science project using PHP, but you’ll see examples using both languages throughout the book. If the merest notion of a for loop makes you hyperventilate (or if you have no idea what we’re talking about), you might consider tracking down a copy of Head First PHP & MySQL or Head First JavaScript and then heading on back here.

We expect you to know how to track things down.

We’ll be blunt. The mobile web is an enormous topic, and mastering it involves expanding your existing web development skills. There are too many things to know about the Web for any one person to memorize, whether it’s a detail of JavaScript syntax or the specifics of a browser’s support for an HTML5 element attribute. Don’t be too hard on yourself. Part of the toolset of a good web dev is keeping your Google chops sharp and knowing when and how to hit the Web to look up info about web topics. We bet you’re good at that already.

We expect you to go beyond this book.

It’s a big and beautiful mobile web world out there. We hope we can give you a shove to start you on your journey, but it’s up to you to keep up your steam. Seek out the active mobile web community online, read blogs, join mailing lists that are up your alley, and attend related technical events in your area.

The activities are NOT optional.

The exercises and activities are not add-ons; they’re part of the core content of the book. Some of them are to help with memory, some are for understanding, and some will help you apply what you’ve learned. Don’t skip the exercises. They’re good for giving your brain a chance to think about the ideas and terms you’ve been learning in a different context.

The redundancy is intentional and important.

One distinct difference in a Head First book is that we want you to really get it. And we want you to finish the book remembering what you’ve learned. Most reference books don’t have retention and recall as a goal, but this book is about learning, so you’ll see some of the same concepts come up more than once.

The Brain Power exercises don’t have answers.

For some of them, there is no right answer, and for others, part of the learning experience of the exercise is for you to decide if and when your answers are right. In some of the Brain Power exercises, you will find hints to point you in the right direction.

Software requirements

As for developing any website, you need a text editor, a browser, a web server (it can be locally hosted on your personal computer), and the source code for the chapter examples.

The text editors we recommend for Windows are PSPad, TextPad, or EditPlus (but you can use Notepad if you have to). The text editors we recommend for Mac are TextWrangler (or its big brother, BBEdit) or TextMate. We also like Coda, a more web-focused tool.

If you’re on a Linux system, you’ve got plenty of text editors built in, and we trust you don’t need us to tell you about them.

If you are going to do web development, you need a web server. You’ll need to go to Appendix ii, which details installing a web server with PHP. We recommend doing that now. No, seriously, head there now, follow the instructions, and come back to this page when you’re done.

For Chapter 5, you’ll need to install the WURFL (Wireless Universal Resource FiLe) API and data. And for Chapter 8, you’ll need the Android SDK and some related tools. You guessed it: there are appendixes for those tasks, too.

You’ll also need a browser—no, strike that—as many browsers as possible for testing. And the more mobile devices with browsers you have on hand, the better (don’t panic; there are many emulators you can use if you don’t have hardware).

For developing and testing on the desktop, we highly recommend Google’s Chrome browser, which has versions for Mac, Windows, and Linux. Learning how to use the JavaScript console in Google’s Chrome Dev Tools is well worth the time. This is homework you need to do on your own.

Last of all, you’ll need to get the code and resources for the examples in the chapters. It’s all available at http://hf-mw.com.

Note

The hf-mw.com site has the starting point of code for all the chapters. Head on over there and get downloading.

Note

The code and resources for the examples in the chapters are all available at http://hf-mw.com.

The technical review team

image with no caption

Trevor Farlow is an amateur baker, recreational soccer player, and part-time animal shelter volunteer. When he’s not walking dogs, scoring goals, or perfecting his New York–style cheesecake, he can be found learning the art of product ownership in a lean, mean, agile development team at Clearwater Analytics, LLC.

Brad Frost is a mobile web strategist and frontend developer at R/GA in New York City, where he works with large brands on mobile-related projects. He runs a resource site called Mobile Web Best Practices (http://mobilewebbestpractices.com) aimed at helping people create great mobile web experiences.

Stephen Hay has been building websites for more than 16 years. Aside from his client work, which focuses increasingly on multiplatform design and development, he speaks at industry events and has written for publications such as A List Apart and .net Magazine. He also co-organizes Mobilism, a highly respected mobile web design and development conference.

Ethan Marcotte is an independent designer/developer who is passionate about beautiful design, elegant code, and the intersection of the two. Over the years, his clientele has included New York Magazine, the Sundance Film Festival, the Boston Globe, and the W3C. Ethan coined the term Responsive Web Design to describe a new way of designing for the ever-changing Web and, if given the chance, will natter on excitedly about it—he even went so far as to write a book on the topic.

Bryan Rieger is a designer and reluctant developer with a background in theatre design and classical animation. Bryan has worked across various media including print, broadcast, web, and mobile; and with clients such as Apple, Microsoft, Nokia, and the Symbian Foundation. A passionate storyteller and incessant tinkerer, Bryan can be found crafting a diverse range of experiences at Yiibu—a wee design consultancy based in Edinburgh, Scotland.

Stephanie Rieger is a designer, writer, and closet anthropologist with a passion for the many ways people interact with technology. Stephanie has been designing for mobile since 2004 and now focuses primarily on web strategy, frontend design, and optimization for multiple screens and capabilities. A compulsive tester and researcher, Stephanie is always keen to discover and share insights on mobile usage, user behavior, and mobility trends from around the world.

Andrea Trasatti started creating WAP content in 1999 on the Nokia 7110, which in Europe was considered groundbreaking at the time. Andrea has led both WURFL and DeviceAtlas from their earliest days to success, and during those years built vast experience in device detection and content adaptation. You can find Andrea on Twitter as @AndreaTrasatti, regularly talking about mobile web and new trends in creating and managing content for mobile.

Acknowledgments

Our editor:

Thanks (and congratulations!) to Courtney Nash, who pushed us to create the best book we possibly could. She endured a huge raft of emails, questions, ramblings, and occasional crankiness. She stuck with us throughout this book and trusted us to trust our guts. And thanks to Brian Sawyer for stepping up at the end and taking us over the finish line.

image with no caption

The O’Reilly team:

Thanks to Lou Barr for her unfathomably speedy and masterful design and layout magic. We’re seriously blown away here. Thank you. Our gratitude goes to Karen Shaner and Rachel Monaghan for all the help juggling drafts, reviewers, and details!

Thanks to the rest of the O’Reilly folks who made us feel so welcomed: Mike Hendrickson, for suggesting this crazy idea in the first place; Brady Forrest, for introducing and championing us; Tim O’Reilly, for being the genuine, smart, and nice guy that he is; and Sara Winge, for her graciousness and overall awesomeness.

Our thanks:

Jason and Lyza work with the smartest people ever at Cloud Four. Our epic thanks to fellow cofounders Aileen Jeffries and John Keith, and the rest of the Cloud Four team: Matt Gifford, Chris Higgins, and Megan Notarte. This book is really a product of our collective mobile web obsession, and they, more than anyone, championed and endured this effort. Thanks a billion million zillion, you guys.

image with no caption

We’d also like to thank the mobile web community. In particular, we’d like to thank Josh Clark, Gail Rahn Frederick, Scott Jehl, Scott Jenson, Dave Johnson, Tim Kadlec, Jeremy Keith, Peter-Paul Koch, Brian LeRoux, James Pearce, Steve Souders, and Luke Wroblewski. We’re proud and thankful to be part of this community.

Lyza’s friends and family:

Thanks to Bryan Christopher Fox (Other Dev), without whose coding chops, insight, support, and all-around supergenius this book would not have been possible.

Huge shout-outs to my friends and family, who still seem to put up with me despite my long-term disappearance into Book Land. Thanks to Autumn and Amye, who showed stunning tenacity in the face of my constant unavailability. Thanks, Mike, always. And thanks to Dad, who always shows me how to find aesthetic and new adventure. Finally, thanks to Huw and Bethan of Plas-yn-Iâl, Llandegla, Wales, a fantastic, sheep-happy place where about a quarter of this book was written.

Jason’s friends and family:

Thank you to my family for all of their support. Our parents, Jan, Carol, Mark, and Doanne, were a tremendous help in keeping our sanity as we juggled book writing, family, and moving.

Special thanks to my wife, Dana Grigsby, for making it possible for me to work on a book while we raised a baby and a preschooler and moved into a new house. I couldn’t have done it without you.

Safari® Books Online

image with no caption

Safari® Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.

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.

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

Start Free Trial

No credit card required