Head First Mobile Web

Mobile web usage is exploding. Soon, more web browsing will take place on phones and tablets than PCs. Your business needs a mobile strategy, but where do you start? Head First Mobile Web shows how to use the web tech- nology you¡¯re already familiar with to make sites and apps that work on any device of any size. Put your JavaScript, CSS media query, and HTML5 skills to work, and then optimize your site to perform its best in the demanding mobile market. Along the way, you¡¯ll discover how to adapt your business strategy to target specific devices.

-Navigate the increasingly complex mobile landscape
-Take both technical and strategic approaches to mobile web design
-Use the latest development techniques?including Responsive Web Design and server-side device detection with WURFL
-Learn quickly through images, puzzles, stories, and quizzes

We think your time is too valuable to waste struggling with new concepts. Using the latest research in cognitive science and learning theory to craft a multi-sensory learning experience, Head First Mobile Web uses a visually rich format designed for the way your brain works, not a text-heavy approach that puts you to sleep.

ÀúÀÚ : Lyza Danger Gardner

Lyza Danger Gardner (@lyzadanger) is a dev. She has built, broken and hacked web things since 1996. Curiously, Lyza was actually born and raised in Portland, Ore., the town where everyone wants to be but no one seems to be from.

Lyza started college early and cobbled together a motley education: a BA in Arts and Letters from Portland State University, followed by a master¡¯s program in computer science at the University of Birmingham (UK).

Lyza has written a lot of web applications (server-side devs, represent!), defeated wily content management systems, optimized mobile web sites, pounded on various APIs, and worried a lot about databases. Fascinated by the way mobile technology has changed things, she now spends a lot of time thinking about the future of the web, mobile and otherwise.

Since co-founding Cloud Four, a Portland-based mobile web agency, in 2007, Lyza has voyaged further into the deep, untrammeled reaches of Device Land, exploring the foibles and chaos of mobi... le browsers and the mobile web. She has an odd set of anachronistic hobbies and it has been said she takes a fair number of photographs. She owns a four-letter .com domain. We¡¯ll bet you can guess what it is and go visit her there.

ÀúÀÚ : Jason Grigsby

After spending over a decade as a desktop web developer, Jason joined forces with the three smartest people he knew and started Cloud Four. Since co-founding Cloud Four, he has had the good fortune to work on many fantastic projects including the Obama ¡®08 iPhone App.

He is founder and President of Mobile Portland, a non?profit dedicated to promotion and education of the mobile community in Portland, Oregon. Jason is a sought?after speaker and consultant on mobile technology.

You can find him blogging at http://cloudfour.com, his personal site http://userfirstweb.com and on Twitter as @grigs.Jason¡¯s expertise includes information architecture, usability, and emerging technology like social media. He has been a featured speaker at various organizations on topics ranging from web analytics to web site performance.

Copyright
Dedication
Advance Praise for Head First Mobile Web
Praise for other Head First books
About the Author
Intro: How to Use This Book

Chapter 1. Getting Started on the Mobile Web: Responsive Web Design
Section 1.1. Get on the mobile bandwagon
Section 1.2. Something odd happened on the way to the pub
Section 1.3. If mobile phone web browsers are so great...
Section 1.4. What¡¯s so different about the mobile web?
Section 1.5. Responsive Web Design
Section 1.6. An example of a responsively designed site
Section 1.7. Different CSS in different places
Section 1.8. CSS media queries
Section 1.9. The current structure of the Splendid Walrus site
Section 1.10. Analyze the current CSS
Section 1.11. What needs to change?
Section 1.12. Identify the CSS that needs to change
Section 1.13. Steps to creating the mobile-specific CSS
Section 1.14. Ta-da! Mobile-specific CSS
Section 1.15. The rest of our structural...Copyright
Dedication
Advance Praise for Head First Mobile Web
Praise for other Head First books
About the Author
Intro: How to Use This Book

Chapter 1. Getting Started on the Mobile Web: Responsive Web Design
Section 1.1. Get on the mobile bandwagon
Section 1.2. Something odd happened on the way to the pub
Section 1.3. If mobile phone web browsers are so great...
Section 1.4. What¡¯s so different about the mobile web?
Section 1.5. Responsive Web Design
Section 1.6. An example of a responsively designed site
Section 1.7. Different CSS in different places
Section 1.8. CSS media queries
Section 1.9. The current structure of the Splendid Walrus site
Section 1.10. Analyze the current CSS
Section 1.11. What needs to change?
Section 1.12. Identify the CSS that needs to change
Section 1.13. Steps to creating the mobile-specific CSS
Section 1.14. Ta-da! Mobile-specific CSS
Section 1.15. The rest of our structural CSS
Section 1.16. Put it together
Section 1.17. What¡¯s wrong with a fixed-width layout, anyway?
Section 1.18. How is fluid better?
Section 1.19. Go fluid
Section 1.20. The fluid formula
Section 1.21. Continue your fluid conversion
Section 1.22. Context switching
Section 1.23. What¡¯s wrong with this picture?
Section 1.24. Fluid images
Section 1.25. Are we there yet?
Section 1.26. Details, details
Section 1.27. Remember to be responsible
Section 1.28. That¡¯s a responsive site!
Section 1.29. Responsive design is also a state of mind

Chapter 2. Responsible Responsiveness: Mobile-first Responsive Web Design
Section 2.1. Just when you thought it was time to celebrate...
Section 2.2. Is there really a problem? How do we know?
Section 2.3. Waitress, will you take my order please?
Section 2.4. What to do when things aren¡¯t blazing fast
Section 2.5. Don¡¯t let its looks fool you, that¡¯s a BIG page
Section 2.6. There¡¯s gold in ¡¯em HAR hills
Section 2.7. 10,000-feet view: Show statistics
Section 2.8. Find the drags on page speed
Section 2.9. Where did that Google Maps JavaScript come from?
Section 2.10. What¡¯s with the big pictures?
Section 2.11. It looks mobile friendly, but it isn¡¯t
Section 2.12. Mobile-first Responsive Web Design
Section 2.13. What is progressive enhancement?
Section 2.14. Let¡¯s turn this web page around
Section 2.15. Am I on a new page or not?
Section 2.16. Fix the content floats
Section 2.17. Mobile-first media queries
Section 2.18. Surprise! The page is broken in Internet Explorer
Section 2.19. Use conditional comments with a media query
Section 2.20. How are we doing?
Section 2.21. One src to rule them all
Section 2.22. How Sencha.io Src works
Section 2.23. That¡¯s a blazing-fast mobile web page
Section 2.24. Zoom, zoom, pow...
Section 2.25. The right to zoom?
Section 2.26. Back to our regularly scheduled project
Section 2.27. On second thought, a map would be useful
Section 2.28. Build a pseudo-media query in JavaScript
Section 2.29. Add the JavaScript to the On Tap Now page
Section 2.30. These widgets aren¡¯t responsive
Section 2.31. Move iframe attributes to CSS equivalents
Section 2.32. Remove attributes from the JavaScript
Section 2.33. No one should have trouble finding the pub now
Section 2.34. The map overlap is back
Section 2.35. Let the content be your guide
Section 2.36. Time to bend and stretch that browser
Section 2.37. Breakpoints to the rescue

Chapter 3. A Separate Mobile Website: Facing less-than-awesome circumstances
Section 3.1. Creature Comforts has agents in the field
Section 3.2. How can agents get and share the info they need?
Section 3.3. Send mobile users to a mobile-optimized website
Section 3.4. Sniff out mobile users
Section 3.5. Getting to know user agents
Section 3.6. User agents: spawn of Satan?
Section 3.7. Straight talk: Most major sites have a separate mobile website
Section 3.8. When what you really want to do is (re-)direct
Section 3.9. Take a peek at the script
Section 3.10. How does the script work?
Section 3.11. Make a mobile mockup
Section 3.12. Special delivery...of complicating factors
Section 3.13. Not all phones are smartphones...not by a sight
Section 3.14. Let¡¯s keep it basic: Meet XHTML-MP
Section 3.15. Why would we want to use that old thing?
Section 3.16. Keep your nose clean with XHTML-MP
Section 3.17. By the way, scrolling sucks
Section 3.18. One last curveball
Section 3.19. Access keys in action
Section 3.20. So, are we good to go?
Section 3.21. What went wrong?
Section 3.22. Fix the errors
Section 3.23. Mobile-savvy CSS
Section 3.24. Hmmm...something is missing
Section 3.25. The button look is sorely missed!
Section 3.26. Great success!

Chapter 4. Deciding Whom to Support: What devices should we support?
Section 4.1. How do you know where to draw the line?
Section 4.2. Step away from the keyboard for a second
Section 4.3. Things you don¡¯t support vs. those you can¡¯t support
Section 4.4. Ask questions about your project
Section 4.5. Ingredients for your magic mobile potion
Section 4.6. Draw from your cupboard of tools and data
Section 4.7. How do I know my customers have the right stuff?

Chapter 5. Device Databases and Classes: Get with the group
Section 5.1. A panic button for freaked-out students
Section 5.2. The button is for mobile phones only
Section 5.3. Mobile device data sources to the rescue
Section 5.4. Meet WURFL
Section 5.5. WURFL and its capabilities
Section 5.6. WURFL: Clever API code
Section 5.7. We can build an explore page, too
Section 5.8. An explore page: Setting up our environment
Section 5.9. A good start!
Section 5.10. A quick one-two punch to improve our explore page
Section 5.11. Put capabilities to work
Section 5.12. Ask WURFL the right questions
Section 5.13. Initialize the device and get the info ready
Section 5.14. Is this thing mobile?
Section 5.15. Danger, Will Robinson!
Section 5.16. Make the page a bit smarter with WURFL
Section 5.17. The panic button: For phones only
Section 5.18. Herding devices
Section 5.19. Device classes
Section 5.20. The picture just got a lot bigger
Section 5.21. Evaluate the home page wearing mobile-tinted glasses
Section 5.22. Group requirements into multiple mobile flavors
Section 5.23. Rounding out our device classes
Section 5.24. Let¡¯s get this show on the road
Section 5.25. Get acquainted with the matching function
Section 5.26. What¡¯s going on in that switch statement?
Section 5.27. Use the matching function to test capabilities
Section 5.28. The home stretch
Section 5.29. Well, let¡¯s see...how¡¯d it go?
Section 5.30. Fill in the gaps in the device class tests
Section 5.31. Make something actually happen with device classes
Section 5.32. Always tread with care and come prepared
Section 5.33. We need a bigger safety net
Section 5.34. A stitch in time

Chapter 6. Build a Mobile Web App Using a Framework: The Tartanator
Section 6.1. HTML5...app...what do these words even mean?
Section 6.2. How ¡°traditional¡± websites typically behave
Section 6.3. How applike websites often behave
Section 6.4. A Tartans Unlimited mobile HTML5 web app
Section 6.5. The master plan for phase 1 of the Tartanator
Section 6.6. ...or you could use a mobile web framework
Section 6.7. Why use mobile web app frameworks?
Section 6.8. Our choice for the Tartanator: jQuery Mobile
Section 6.9. Build a basic page with jQuery Mobile
Section 6.10. Mark up the rest of the page
Section 6.11. And we¡¯re off!
Section 6.12. The HTML5 data-* attribute
Section 6.13. Our list: Better, but not quite there
Section 6.14. Link to multiple pages with jQuery Mobile
Section 6.15. The meat of the Tartanator: The tartans themselves
Section 6.16. We¡¯ve given you a head start on the list
Section 6.17. Drop in the rest of the tartans
Section 6.18. Filter and organize a list
Section 6.19. Our tartan list is nicer now
Section 6.20. It¡¯s time to show the early Tartanator work to Ewan
Section 6.21. Tricks to make it feel more like an app
Section 6.22. Add a footer toolbar
Section 6.23. Make the toolbar snazzy
Section 6.24. Finalize the structure
Section 6.25. Time to make that tartan-building form
Section 6.26. Tartans: patterns like recipes
Section 6.27. Translate tartan patterns to a form
Section 6.28. Build an HTML5 form
Section 6.29. It¡¯s time to add some basic fields
Section 6.30. Lists within lists let the users add colors
Section 6.31. Color-size ingredient pairs: The color select field
Section 6.32. Color-size field pairs: The size field
Section 6.33. Link to the form

Chapter 7. Mobile Web Apps in the Real World: Super mobile web apps
Section 7.1. It looks nice...
Section 7.2. Mobile apps in the real world
Section 7.3. Ready, set, enhance!
Section 7.4. Make a better form
Section 7.5. A widget to manage the list of colors and sizes
Section 7.6. A peek under the hood
Section 7.7. So, that¡¯s the frontend enhancement...
Section 7.8. ...and now for the backend
Section 7.9. The two sides of generate.php
Section 7.10. One last thing!
Section 7.11. Two out of three is a great start
Section 7.12. Offline is important
Section 7.13. A basic recipe to create a cache manifest
Section 7.14. Unfortunately, the devil is in the details
Section 7.15. Serve the manifest as the correct content-type
Section 7.16. Victory is (finally) ours
Section 7.17. How geolocation works
Section 7.18. How to ask W3C-compliant browsers where they are
Section 7.19. Start in on the Find Events page: The baseline
Section 7.20. Let¡¯s integrate geolocation
Section 7.21. Nothing found

Chapter 8. Build Hybrid Mobile Apps with PhoneGap Tartan Hunt: Going native
Section 8.1. Opportunity knocks again
Section 8.2. How do hybrid apps work?
Section 8.3. Bridge the web-native gap with PhoneGap
Section 8.4. Get acquainted with PhoneGap Build
Section 8.5. How will the app work?
Section 8.6. Keep track of discovered tartans
Section 8.7. Anatomy of the Tartan Hunt project
Section 8.8. Download your apps
Section 8.9. Choose your adventure
Section 8.10. Nice work, hotshot!
Section 8.11. Who¡¯s seen what? Store found tartans
Section 8.12. What can localStorage do for us?
Section 8.13. Check out what a browser supports
Section 8.14. Use a function to show which tartans are found
Section 8.15. The toggle and toggleClass methods
Section 8.16. You found a tartan, eh? Prove it!
Section 8.17. Rope in PhoneGap to take pictures
Section 8.18. PhoneGap is almost ready for its close-up
Section 8.19. Now we¡¯re ready for the mediaCapture API
Section 8.20. How will we handle the success?
Section 8.21. It always looks a bit different in real life
Section 8.22. It¡¯s just a bit anonymous
Section 8.23. We nailed it!

Chapter 9. How to Be Future Friendly: Make (some) sense of the chaos
Section 9.1. Now what?
Section 9.2. It¡¯s complicated
Section 9.3. A future-friendly manifesto
Section 9.4. If you can¡¯t be future proof, be future friendly
Section 9.5. App today, web page tomorrow
Section 9.6. It¡¯s a long journey: Here are some guideposts
Section 9.7. Look toward the future

Appendix A. Leftovers: The top six things (we didn¡¯t cover)
Section A.1. #1. Testing on mobile devices
Section A.2. #2. Remote debugging
Section A.3. #3. Determine which browsers support what
Section A.4. #4. Device APIs
Section A.5. #5. Application stores and distribution
Section A.6. #6. RESS: REsponsive design + Server-Side components

Appendix B. Set Up Your Web Server Environment: Gotta start somewhere
Section B.1. What we need from you
Section B.2. Only available locally
Section B.3. Windows and Linux: Install and configure XAMPP
Section B.4. Get going with XAMPP
Section B.5. Mac folks: It¡¯s MAMP time
Section B.6. Make sure you dock at the right port
Section B.7. Access your web server
Section B.8. phpInfo, please!

Appendix C. Install WURFL: Sniffing out devices
Section C.1. Who¡¯s got the brains?
Section C.2. And who¡¯s got the brawn?
Section C.3. Getting the two to work together
Section C.4. A bit of filesystem housekeeping
Section C.5. Take note!

Appendix D. Install the Android SDK and Tools: Take care of the environment
Section D.1. Let¡¯s download the Android SDK
Section D.2. Get the right tools for the job
Section D.3. Hit the Install button and go make some coffee
Section D.4. Do virtual devices dream of electric sheep?
Section D.5. Create a new virtual device
Section D.6. Let ¡¯er rip!
Section D.7. Apps on, apps off
Section D.8. Find the right PATH

Index