Table of Contents
- Head First Mobile Web
- Advance Praise for Head First Mobile Web
- Praise for other Head First books
How to use this Book: Intro
- Who is this book for?
- We know what you’re thinking
- And we know what your brain is thinking
- Metacognition: thinking about thinking
- The technical review team
- Safari® Books Online
1. Getting Started on the Mobile Web: Responsive Web Design
- Get on the mobile bandwagon
- Something odd happened on the way to the pub
- If mobile phone web browsers are so great...
- What’s so different about the mobile web?
- Responsive Web Design
- An example of a responsively designed site
- Different CSS in different places
- CSS media queries
- The current structure of the Splendid Walrus site
- Analyze the current CSS
- What needs to change?
- Identify the CSS that needs to change
- Steps to creating the mobile-specific CSS
- Ta-da! Mobile-specific CSS
- The rest of our structural CSS
- Put it together
- What’s wrong with a fixed-width layout, anyway?
- How is fluid better?
- The fluid formula
- Continue your fluid conversion
- Context switching
- What’s wrong with this picture?
- Fluid images
- Are we there yet?
- Remember to be responsible
- That’s a responsive site!
- Responsive design is also a state of mind
2. Responsible Responsiveness: Mobile-first Responsive Web Design
- Just when you thought it was time to celebrate...
- Is there really a problem? How do we know?
- Waitress, will you take my order please?
- What to do when things aren’t blazing fast
- Don’t let its looks fool you, that’s a BIG page
- There’s gold in ’em HAR hills
- 10,000-feet view: Show statistics
- Find the drags on page speed
- What’s with the big pictures?
- It looks mobile friendly, but it isn’t
- Mobile-first Responsive Web Design
- What is progressive enhancement?
- The current structure of the On Tap Now page
- Am I on a new page or not?
- Fix the content floats
- Mobile-first media queries
- Surprise! The page is broken in Internet Explorer
- Use conditional comments with a media query
- How are we doing?
- One src to rule them all
- How Sencha.io Src works
- That’s a blazing-fast mobile web page
- Zoom, zoom, pow...
- The right to zoom?
- Turn zooming back on
- Add a link to the map
- These widgets aren’t responsive
- Move iframe attributes to CSS equivalents
- No one should have trouble finding the pub now
- The map overlap is back
- Let the content be your guide
- Time to bend and stretch that browser
- Breakpoints to the rescue
- Our mobile-first responsive design is complete
3. A Separate Mobile Website: Facing less-than-awesome circumstances
- Creature Comforts has agents in the field
- How can agents get and share the info they need?
- Send mobile users to a mobile-optimized website
- Sniff out mobile users
- Getting to know user agents
- User agents: spawn of Satan?
- Straight talk: Most major sites have a separate mobile website
- When what you really want to do is (re-)direct
- Take a peek at the script
- How does the script work?
- Make a mobile mockup
- Special delivery...of complicating factors
- Not all phones are smartphones...not by a sight
- Let’s keep it basic: Meet XHTML-MP
- Why would we want to use that old thing?
- Keep your nose clean with XHTML-MP
- By the way, scrolling sucks
- One last curveball
- Access keys in action
- What went wrong?
- Fix the errors
- Mobile-savvy CSS
- Hmmm...something is missing
- The button look is sorely missed!
- Great success!
4. Deciding Whom to Support: What devices should we support?
- How do you know where to draw the line?
- Step away from the keyboard for a second
- Things you don’t support vs. those you can’t support
- Ask questions about your project
- Ingredients for your magic mobile potion
- Draw from your cupboard of tools and data
- How do I know my customers have the right stuff?
5. Device Databases and Classes: Get with the group
- A panic button for freaked-out students
- The button is for mobile phones only
- Mobile device data sources to the rescue
- Meet WURFL
- WURFL and its capabilities
- WURFL: Clever API code
- We can build an explore page, too
- An explore page: Setting up our environment
- A good start!
- A quick one-two punch to improve our explore page
- Put capabilities to work
- Use WURFL to help differentiate content
- Ask WURFL the right questions
- Initialize the device and get the info ready
- Is this thing mobile?
- Danger, Will Robinson!
- Make the page a bit smarter with WURFL
- The panic button: For phones only
- Herding devices
- Device classes
- Expanding a lucrative part of AcedIt!’s business
- Evaluate the home page wearing mobile-tinted glasses
- Group requirements into multiple mobile flavors
- Rounding out our device classes
- Let’s get this show on the road
- Get acquainted with the matching function
- What’s going on in that switch statement?
- Use the matching function to test capabilities
- The home stretch
- Well, let’s see...how’d it go?
- Fill in the gaps in the device class tests
- Make something actually happen with device classes
- Always tread with care and come prepared
- We need a bigger safety net
- A stitch in time
6. Build a Mobile Web App Using a Framework: The Tartanator
- HTML5...app...what do these words even mean?
- How “traditional” websites typically behave
- How applike websites often behave
- A Tartans Unlimited mobile HTML5 web app
- The master plan for phase 1 of the Tartanator
- Why use mobile web app frameworks?
- Our choice for the Tartanator: jQuery Mobile
- Build a basic page with jQuery Mobile
- Mark up the rest of the page
- And we’re off!
- The HTML5 data-* attribute
- Our list: Better, but not quite there
- Link to multiple pages with jQuery Mobile
- Get to work on tartans.html
- Take the list from blah to better
- Drop in the rest of the tartans
- Filter and organize a list
- It’s time to show the early Tartanator work to Ewan
- Make Tartanator feel more applike: to-dos
- Add a footer toolbar
- Make the toolbar snazzy
- Finalize the structure
- Make the header sticky, too
- Time to make that tartan-building form
- Follow the tartan recipe
- Translate tartan patterns to a form
- Build an HTML5 form
- It’s time to add some basic fields
- Lists within lists let the users add colors
- Color-size ingredient pairs: The color select field
- Color-size field pairs: The size field
- Link to the form
7. Mobile Web Apps in the Real World: Super mobile web apps
- It looks nice...
- Mobile apps in the real world
- Ready, set, enhance!
- Make a better form
- A widget to manage the list of colors and sizes
- A peek under the hood
- So, that’s the frontend enhancement...
- ...and now for the backend
- The two sides of generate.php
- One last thing!
- Offline is important
- A basic recipe to create a cache manifest
- Dev tools to the rescue
- Serve the manifest as the correct content-type
- Victory is (finally) ours
- How geolocation works
- How to ask W3C-compliant browsers where they are
- Start in on the Find Events page: The baseline
- Let’s integrate geolocation
- Nothing found
8. Build Hybrid Mobile Apps with PhoneGap: Tartan Hunt: Going native
- Opportunity knocks again
- How do hybrid apps work?
- Bridge the web-native gap with PhoneGap
- Get acquainted with PhoneGap Build
- How will the app work?
- Keep track of discovered tartans
- Anatomy of the Tartan Hunt project
- Download your apps
- Choose your adventure
- Who’s seen what? Store found tartans
- What can localStorage do for us?
- Check out what a browser supports
- Use a function to show which tartans are found
- The toggle and toggleClass methods
- You found a tartan, eh? Prove it!
- Rope in PhoneGap to take pictures
- PhoneGap is almost ready for its close-up
- Now we’re ready for the mediaCapture API
- How will we handle the success?
- It always looks a bit different in real life
- It’s just a bit anonymous
- We nailed it!
9. How to Be Future Friendly: Make (some) sense of the chaos
- Now what?
- Time to dispel our collective illusions of control
- A future-friendly manifesto
- If you can’t be future proof, be future friendly
- App today, web page tomorrow
- It’s a long journey: Here are some guideposts
- Look toward the future
A. Leftovers: The top six things (we didn’t cover)
- #1. Testing on mobile devices
- #2. Remote debugging
- #3. Determine which browsers support what
- #4. Device APIs
- #5. Application stores and distribution
- #6. RESS: REsponsive design + Server-Side components
B. Set Up Your Web Server Environment: Gotta start somewhere
- What we need from you
- Only available locally
- Windows and Linux: Install and configure XAMPP
- Get going with XAMPP
- Mac folks: It’s MAMP time
- Make sure you dock at the right port
- Access your web server
- phpInfo, please!
- C. Install WURFL: Sniffing out devices
D. Install the Android SDK and Tools: Take care of the environment
- Let’s download the Android SDK
- Get the right tools for the job
- Hit the Install button and go make some coffee
- Do virtual devices dream of electric sheep?
- Create a new virtual device
- Let ’er rip!
- Apps on, apps off
- Find the right PATH
- About the Authors
|j / →||Next chapter|
|k / ←||Previous chapter|
|f||Increase font size|
|g||Decrease font size|
|t||Toggle the table of contents|
Site wide shortcuts
|h||Go to the homepage|
|r||Go to recommended page or get a new recommendation|
|u||Scroll up to top of page|
|esc||Close modal windows|
|?||Toggle this panel|
|/||Focus search (where present)|
|j / →||Select next card|
|k / ←||Select previous card|
|↑||Select card above it|
|↓||Select card below it|
|tab||Focus next element inside card|
|esc||Remove selection from card|
|m||Show more cards (if more button present)|
Focused Cards (?)
|d||Remove recommended card|
|Shift enter||Go to chapter|
Shortcuts may be disabled from the settings page.