Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

    Start ReadingShareBuy Print Version
    Head First Mobile Web
    1ebooken
    Subscriber Reviews • Browse Similar Topics

    Overview

    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.

    Subscriber Reviews

    Average Rating: 3.25 out of 5 rating Based on 4 Ratings

    "Good review of Mobile Web Dev" - by maa on 05-JUN-2012
    Reviewer Rating: 1 star rating2 star rating3 star rating4 star rating5 star rating
    I liked the review for someone who is a web developer.
    Good job.
    Report as Inappropriate

    Table of Contents

     

    View Sample

    Head First Mobile Web

    View Sample

    Dedication

    View Sample

    Advance Praise for Head First Mobile Web

    View Sample

    Praise for other Head First books

    View Sample

     

    View Sample
    How to use this Book: Intro
    View Sample

    Who is this book for?

    View Sample

    We know what you’re thinking

    View Sample

    And we know what your brain is thinking

    View Sample

    Metacognition: thinking about thinking

    View Sample

    The technical review team

    View Sample

    Acknowledgments

    View Sample

    Safari® Books Online

    View Sample
    1. Getting Started on the Mobile Web: Responsive Web Design
    View Sample

    Get on the mobile bandwagon

    View Sample

    Something odd happened on the way to the pub

    View Sample

    If mobile phone web browsers are so great...

    View Sample

    What’s so different about the mobile web?

    View Sample

    Responsive Web Design

    View Sample

    An example of a responsively designed site

    View Sample

    Different CSS in different places

    View Sample

    CSS media queries

    View Sample

    The current structure of the Splendid Walrus site

    View Sample

    Analyze the current CSS

    View Sample

    What needs to change?

    View Sample

    Identify the CSS that needs to change

    View Sample

    Steps to creating the mobile-specific CSS

    View Sample

    Ta-da! Mobile-specific CSS

    View Sample

    The rest of our structural CSS

    View Sample

    Put it together

    View Sample

    What’s wrong with a fixed-width layout, anyway?

    View Sample

    How is fluid better?

    View Sample

    The fluid formula

    View Sample

    Continue your fluid conversion

    View Sample

    Context switching

    View Sample

    What’s wrong with this picture?

    View Sample

    Fluid images

    View Sample

    Are we there yet?

    View Sample

    Remember to be responsible

    View Sample

    That’s a responsive site!

    View Sample

    Responsive design is also a state of mind

    View Sample
    2. Responsible Responsiveness: Mobile-first Responsive Web Design
    View Sample

    Just when you thought it was time to celebrate...

    View Sample

    Is there really a problem? How do we know?

    View Sample

    Waitress, will you take my order please?

    View Sample

    What to do when things aren’t blazing fast

    View Sample

    Don’t let its looks fool you, that’s a BIG page

    View Sample

    There’s gold in ’em HAR hills

    View Sample

    10,000-feet view: Show statistics

    View Sample

    Find the drags on page speed

    View Sample

    Where did that Google Maps JavaScript come from?

    View Sample

    What’s with the big pictures?

    View Sample

    It looks mobile friendly, but it isn’t

    View Sample

    Mobile-first Responsive Web Design

    View Sample

    What is progressive enhancement?

    View Sample

    The current structure of the On Tap Now page

    View Sample

    Am I on a new page or not?

    View Sample

    Fix the content floats

    View Sample

    Mobile-first media queries

    View Sample

    Surprise! The page is broken in Internet Explorer

    View Sample

    Use conditional comments with a media query

    View Sample

    How are we doing?

    View Sample

    One src to rule them all

    View Sample

    How Sencha.io Src works

    View Sample

    That’s a blazing-fast mobile web page

    View Sample

    Zoom, zoom, pow...

    View Sample

    The right to zoom?

    View Sample

    Turn zooming back on

    View Sample

    Add the map back using JavaScript

    View Sample

    Add a link to the map

    View Sample

    Build a pseudo-media query in JavaScript

    View Sample

    Add the JavaScript to the On Tap Now page

    View Sample

    These widgets aren’t responsive

    View Sample

    Move iframe attributes to CSS equivalents

    View Sample

    Remove attributes from the JavaScript

    View Sample

    No one should have trouble finding the pub now

    View Sample

    The map overlap is back

    View Sample

    Let the content be your guide

    View Sample

    Time to bend and stretch that browser

    View Sample

    Breakpoints to the rescue

    View Sample

    Our mobile-first responsive design is complete

    View Sample
    3. A Separate Mobile Website: Facing less-than-awesome circumstances
    View Sample

    Creature Comforts has agents in the field

    View Sample

    How can agents get and share the info they need?

    View Sample

    Send mobile users to a mobile-optimized website

    View Sample

    Sniff out mobile users

    View Sample

    Getting to know user agents

    View Sample

    User agents: spawn of Satan?

    View Sample

    Straight talk: Most major sites have a separate mobile website

    View Sample

    When what you really want to do is (re-)direct

    View Sample

    Take a peek at the script

    View Sample

    How does the script work?

    View Sample

    Make a mobile mockup

    View Sample

    Special delivery...of complicating factors

    View Sample

    Not all phones are smartphones...not by a sight

    View Sample

    Let’s keep it basic: Meet XHTML-MP

    View Sample

    Why would we want to use that old thing?

    View Sample

    Keep your nose clean with XHTML-MP

    View Sample

    By the way, scrolling sucks

    View Sample

    One last curveball

    View Sample

    Access keys in action

    View Sample

    What went wrong?

    View Sample

    Fix the errors

    View Sample

    Mobile-savvy CSS

    View Sample

    Hmmm...something is missing

    View Sample

    The button look is sorely missed!

    View Sample

    Great success!

    View Sample
    4. Deciding Whom to Support: What devices should we support?
    View Sample

    How do you know where to draw the line?

    View Sample

    Step away from the keyboard for a second

    View Sample

    Things you don’t support vs. those you can’t support

    View Sample

    Ask questions about your project

    View Sample

    Ingredients for your magic mobile potion

    View Sample

    Draw from your cupboard of tools and data

    View Sample

    How do I know my customers have the right stuff?

    View Sample
    5. Device Databases and Classes: Get with the group
    View Sample

    A panic button for freaked-out students

    View Sample

    The button is for mobile phones only

    View Sample

    Mobile device data sources to the rescue

    View Sample

    Meet WURFL

    View Sample

    WURFL and its capabilities

    View Sample

    WURFL: Clever API code

    View Sample

    We can build an explore page, too

    View Sample

    An explore page: Setting up our environment

    View Sample

    A good start!

    View Sample

    A quick one-two punch to improve our explore page

    View Sample

    Put capabilities to work

    View Sample

    Use WURFL to help differentiate content

    View Sample

    Ask WURFL the right questions

    View Sample

    Initialize the device and get the info ready

    View Sample

    Is this thing mobile?

    View Sample

    Danger, Will Robinson!

    View Sample

    Make the page a bit smarter with WURFL

    View Sample

    The panic button: For phones only

    View Sample

    Herding devices

    View Sample

    Device classes

    View Sample

    Expanding a lucrative part of AcedIt!’s business

    View Sample

    Evaluate the home page wearing mobile-tinted glasses

    View Sample

    Group requirements into multiple mobile flavors

    View Sample

    Rounding out our device classes

    View Sample

    Let’s get this show on the road

    View Sample

    Get acquainted with the matching function

    View Sample

    What’s going on in that switch statement?

    View Sample

    Use the matching function to test capabilities

    View Sample

    The home stretch

    View Sample

    Well, let’s see...how’d it go?

    View Sample

    Fill in the gaps in the device class tests

    View Sample

    Make something actually happen with device classes

    View Sample

    Always tread with care and come prepared

    View Sample

    We need a bigger safety net

    View Sample

    A stitch in time

    View Sample
    6. Build a Mobile Web App Using a Framework: The Tartanator
    View Sample

    HTML5...app...what do these words even mean?

    View Sample

    How “traditional” websites typically behave

    View Sample

    How applike websites often behave

    View Sample

    A Tartans Unlimited mobile HTML5 web app

    View Sample

    The master plan for phase 1 of the Tartanator

    View Sample

    Why use mobile web app frameworks?

    View Sample

    Our choice for the Tartanator: jQuery Mobile

    View Sample

    Build a basic page with jQuery Mobile

    View Sample

    Mark up the rest of the page

    View Sample

    And we’re off!

    View Sample

    The HTML5 data-* attribute

    View Sample

    Our list: Better, but not quite there

    View Sample

    Link to multiple pages with jQuery Mobile

    View Sample

    Get to work on tartans.html

    View Sample

    Take the list from blah to better

    View Sample

    Drop in the rest of the tartans

    View Sample

    Filter and organize a list

    View Sample

    It’s time to show the early Tartanator work to Ewan

    View Sample

    Make Tartanator feel more applike: to-dos

    View Sample

    Add a footer toolbar

    View Sample

    Make the toolbar snazzy

    View Sample

    Finalize the structure

    View Sample

    Make the header sticky, too

    View Sample

    Time to make that tartan-building form

    View Sample

    Follow the tartan recipe

    View Sample

    Translate tartan patterns to a form

    View Sample

    Build an HTML5 form

    View Sample

    It’s time to add some basic fields

    View Sample

    Lists within lists let the users add colors

    View Sample

    Color-size ingredient pairs: The color select field

    View Sample

    Color-size field pairs: The size field

    View Sample

    Link to the form

    View Sample
    7. Mobile Web Apps in the Real World: Super mobile web apps
    View Sample

    It looks nice...

    View Sample

    Mobile apps in the real world

    View Sample

    Ready, set, enhance!

    View Sample

    Make a better form

    View Sample

    A widget to manage the list of colors and sizes

    View Sample

    A peek under the hood

    View Sample

    So, that’s the frontend enhancement...

    View Sample

    ...and now for the backend

    View Sample

    The two sides of generate.php

    View Sample

    One last thing!

    View Sample

    Offline is important

    View Sample

    A basic recipe to create a cache manifest

    View Sample

    Dev tools to the rescue

    View Sample

    Serve the manifest as the correct content-type

    View Sample

    Victory is (finally) ours

    View Sample

    How geolocation works

    View Sample

    How to ask W3C-compliant browsers where they are

    View Sample

    Start in on the Find Events page: The baseline

    View Sample

    Let’s integrate geolocation

    View Sample

    Nothing found

    View Sample
    8. Build Hybrid Mobile Apps with PhoneGap: Tartan Hunt: Going native
    View Sample

    Opportunity knocks again

    View Sample

    How do hybrid apps work?

    View Sample

    Bridge the web-native gap with PhoneGap

    View Sample

    Get acquainted with PhoneGap Build

    View Sample

    How will the app work?

    View Sample

    Keep track of discovered tartans

    View Sample

    Anatomy of the Tartan Hunt project

    View Sample

    Download your apps

    View Sample

    Choose your adventure

    View Sample

    Who’s seen what? Store found tartans

    View Sample

    What can localStorage do for us?

    View Sample

    Check out what a browser supports

    View Sample

    Use a function to show which tartans are found

    View Sample

    The toggle and toggleClass methods

    View Sample

    You found a tartan, eh? Prove it!

    View Sample

    Rope in PhoneGap to take pictures

    View Sample

    PhoneGap is almost ready for its close-up

    View Sample

    Now we’re ready for the mediaCapture API

    View Sample

    How will we handle the success?

    View Sample

    It always looks a bit different in real life

    View Sample

    It’s just a bit anonymous

    View Sample

    We nailed it!

    View Sample
    9. How to Be Future Friendly: Make (some) sense of the chaos
    View Sample

    Now what?

    View Sample

    Time to dispel our collective illusions of control

    View Sample

    A future-friendly manifesto

    View Sample

    If you can’t be future proof, be future friendly

    View Sample

    App today, web page tomorrow

    View Sample

    It’s a long journey: Here are some guideposts

    View Sample

    Look toward the future

    View Sample
    A. Leftovers: The top six things (we didn’t cover)
    View Sample

    #1. Testing on mobile devices

    View Sample

    #2. Remote debugging

    View Sample

    #3. Determine which browsers support what

    View Sample

    #4. Device APIs

    View Sample

    #5. Application stores and distribution

    View Sample

    #6. RESS: REsponsive design + Server-Side components

    View Sample
    B. Set Up Your Web Server Environment: Gotta start somewhere
    View Sample

    What we need from you

    View Sample

    Only available locally

    View Sample

    Windows and Linux: Install and configure XAMPP

    View Sample

    Get going with XAMPP

    View Sample

    Mac folks: It’s MAMP time

    View Sample

    Make sure you dock at the right port

    View Sample

    Access your web server

    View Sample

    phpInfo, please!

    View Sample
    C. Install WURFL: Sniffing out devices
    View Sample

    Who’s got the brains?

    View Sample

    And who’s got the brawn?

    View Sample

    Getting the two to work together

    View Sample

    A bit of filesystem housekeeping

    View Sample

    Take note!

    View Sample
    D. Install the Android SDK and Tools: Take care of the environment
    View Sample

    Let’s download the Android SDK

    View Sample

    Get the right tools for the job

    View Sample

    Hit the Install button and go make some coffee

    View Sample

    Do virtual devices dream of electric sheep?

    View Sample

    Create a new virtual device

    View Sample

    Let ’er rip!

    View Sample

    Apps on, apps off

    View Sample

    Find the right PATH

    View Sample

    Index

    View Sample

    About the Authors

    View Sample

    Copyright

    Extras

    The publisher has provided additional content related to this title.


    Description
    Content

    Visit the catalog page for Head First Mobile Web

    • Catalog Page

    Visit the errata page for Head First Mobile Web

    • Errata