Books & Videos

Table of Contents

  1. Chapter 1 Getting Started on the Mobile Web: Responsive Web Design

    1. Get on the mobile bandwagon

    2. Something odd happened on the way to the pub

    3. If mobile phone web browsers are so great...

    4. What’s so different about the mobile web?

    5. Responsive Web Design

    6. An example of a responsively designed site

    7. Different CSS in different places

    8. CSS media queries

    9. The current structure of the Splendid Walrus site

    10. Analyze the current CSS

    11. What needs to change?

    12. Identify the CSS that needs to change

    13. Steps to creating the mobile-specific CSS

    14. Ta-da! Mobile-specific CSS

    15. The rest of our structural CSS

    16. Put it together

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

    18. How is fluid better?

    19. The fluid formula

    20. Continue your fluid conversion

    21. Context switching

    22. What’s wrong with this picture?

    23. Fluid images

    24. Are we there yet?

    25. Remember to be responsible

    26. That’s a responsive site!

    27. Responsive design is also a state of mind

  2. Chapter 2 Responsible Responsiveness: Mobile-first Responsive Web Design

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

    2. Is there really a problem? How do we know?

    3. Waitress, will you take my order please?

    4. What to do when things aren’t blazing fast

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

    6. There’s gold in ’em HAR hills

    7. 10,000-feet view: Show statistics

    8. Find the drags on page speed

    9. Where did that Google Maps JavaScript come from?

    10. What’s with the big pictures?

    11. It looks mobile friendly, but it isn’t

    12. Mobile-first Responsive Web Design

    13. What is progressive enhancement?

    14. The current structure of the On Tap Now page

    15. Am I on a new page or not?

    16. Fix the content floats

    17. Mobile-first media queries

    18. Surprise! The page is broken in Internet Explorer

    19. Use conditional comments with a media query

    20. How are we doing?

    21. One src to rule them all

    22. How Sencha.io Src works

    23. That’s a blazing-fast mobile web page

    24. Zoom, zoom, pow...

    25. The right to zoom?

    26. Turn zooming back on

    27. Add the map back using JavaScript

    28. Add a link to the map

    29. Build a pseudo-media query in JavaScript

    30. Add the JavaScript to the On Tap Now page

    31. These widgets aren’t responsive

    32. Move iframe attributes to CSS equivalents

    33. Remove attributes from the JavaScript

    34. No one should have trouble finding the pub now

    35. The map overlap is back

    36. Let the content be your guide

    37. Time to bend and stretch that browser

    38. Breakpoints to the rescue

    39. Our mobile-first responsive design is complete

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

    1. Creature Comforts has agents in the field

    2. How can agents get and share the info they need?

    3. Send mobile users to a mobile-optimized website

    4. Sniff out mobile users

    5. Getting to know user agents

    6. User agents: spawn of Satan?

    7. Straight talk: Most major sites have a separate mobile website

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

    9. Take a peek at the script

    10. How does the script work?

    11. Make a mobile mockup

    12. Special delivery...of complicating factors

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

    14. Let’s keep it basic: Meet XHTML-MP

    15. Why would we want to use that old thing?

    16. Keep your nose clean with XHTML-MP

    17. By the way, scrolling sucks

    18. One last curveball

    19. Access keys in action

    20. What went wrong?

    21. Fix the errors

    22. Mobile-savvy CSS

    23. Hmmm...something is missing

    24. The button look is sorely missed!

    25. Great success!

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

    1. How do you know where to draw the line?

    2. Step away from the keyboard for a second

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

    4. Ask questions about your project

    5. Ingredients for your magic mobile potion

    6. Draw from your cupboard of tools and data

    7. How do I know my customers have the right stuff?

  5. Chapter 5 Device Databases and Classes: Get with the group

    1. A panic button for freaked-out students

    2. The button is for mobile phones only

    3. Mobile device data sources to the rescue

    4. Meet WURFL

    5. WURFL and its capabilities

    6. WURFL: Clever API code

    7. We can build an explore page, too

    8. An explore page: Setting up our environment

    9. A good start!

    10. A quick one-two punch to improve our explore page

    11. Put capabilities to work

    12. Use WURFL to help differentiate content

    13. Ask WURFL the right questions

    14. Initialize the device and get the info ready

    15. Is this thing mobile?

    16. Danger, Will Robinson!

    17. Make the page a bit smarter with WURFL

    18. The panic button: For phones only

    19. Herding devices

    20. Device classes

    21. Expanding a lucrative part of AcedIt!’s business

    22. Evaluate the home page wearing mobile-tinted glasses

    23. Group requirements into multiple mobile flavors

    24. Rounding out our device classes

    25. Let’s get this show on the road

    26. Get acquainted with the matching function

    27. What’s going on in that switch statement?

    28. Use the matching function to test capabilities

    29. The home stretch

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

    31. Fill in the gaps in the device class tests

    32. Make something actually happen with device classes

    33. Always tread with care and come prepared

    34. We need a bigger safety net

    35. A stitch in time

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

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

    2. How “traditional” websites typically behave

    3. How applike websites often behave

    4. A Tartans Unlimited mobile HTML5 web app

    5. The master plan for phase 1 of the Tartanator

    6. Why use mobile web app frameworks?

    7. Our choice for the Tartanator: jQuery Mobile

    8. Build a basic page with jQuery Mobile

    9. Mark up the rest of the page

    10. And we’re off!

    11. The HTML5 data-* attribute

    12. Our list: Better, but not quite there

    13. Link to multiple pages with jQuery Mobile

    14. Get to work on tartans.html

    15. Take the list from blah to better

    16. Drop in the rest of the tartans

    17. Filter and organize a list

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

    19. Make Tartanator feel more applike: to-dos

    20. Add a footer toolbar

    21. Make the toolbar snazzy

    22. Finalize the structure

    23. Make the header sticky, too

    24. Time to make that tartan-building form

    25. Follow the tartan recipe

    26. Translate tartan patterns to a form

    27. Build an HTML5 form

    28. It’s time to add some basic fields

    29. Lists within lists let the users add colors

    30. Color-size ingredient pairs: The color select field

    31. Color-size field pairs: The size field

    32. Link to the form

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

    1. It looks nice...

    2. Mobile apps in the real world

    3. Ready, set, enhance!

    4. Make a better form

    5. A widget to manage the list of colors and sizes

    6. A peek under the hood

    7. So, that’s the frontend enhancement...

    8. ...and now for the backend

    9. The two sides of generate.php

    10. One last thing!

    11. Offline is important

    12. A basic recipe to create a cache manifest

    13. Dev tools to the rescue

    14. Serve the manifest as the correct content-type

    15. Victory is (finally) ours

    16. How geolocation works

    17. How to ask W3C-compliant browsers where they are

    18. Start in on the Find Events page: The baseline

    19. Let’s integrate geolocation

    20. Nothing found

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

    1. Opportunity knocks again

    2. How do hybrid apps work?

    3. Bridge the web-native gap with PhoneGap

    4. Get acquainted with PhoneGap Build

    5. How will the app work?

    6. Keep track of discovered tartans

    7. Anatomy of the Tartan Hunt project

    8. Download your apps

    9. Choose your adventure

    10. Who’s seen what? Store found tartans

    11. What can localStorage do for us?

    12. Check out what a browser supports

    13. Use a function to show which tartans are found

    14. The toggle and toggleClass methods

    15. You found a tartan, eh? Prove it!

    16. Rope in PhoneGap to take pictures

    17. PhoneGap is almost ready for its close-up

    18. Now we’re ready for the mediaCapture API

    19. How will we handle the success?

    20. It always looks a bit different in real life

    21. It’s just a bit anonymous

    22. We nailed it!

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

    1. Now what?

    2. Time to dispel our collective illusions of control

    3. A future-friendly manifesto

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

    5. App today, web page tomorrow

    6. It’s a long journey: Here are some guideposts

    7. Look toward the future

  1. Appendix Leftovers: The top six things (we didn’t cover)

    1. #1. Testing on mobile devices

    2. #2. Remote debugging

    3. #3. Determine which browsers support what

    4. #4. Device APIs

    5. #5. Application stores and distribution

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

  2. Appendix Set Up Your Web Server Environment: Gotta start somewhere

    1. What we need from you

    2. Only available locally

    3. Windows and Linux: Install and configure XAMPP

    4. Get going with XAMPP

    5. Mac folks: It’s MAMP time

    6. Make sure you dock at the right port

    7. Access your web server

    8. phpInfo, please!

  3. Appendix Install WURFL: Sniffing out devices

    1. Who’s got the brains?

    2. And who’s got the brawn?

    3. Getting the two to work together

    4. A bit of filesystem housekeeping

    5. Take note!

  4. Appendix Install the Android SDK and Tools: Take care of the environment

    1. Let’s download the Android SDK

    2. Get the right tools for the job

    3. Hit the Install button and go make some coffee

    4. Do virtual devices dream of electric sheep?

    5. Create a new virtual device

    6. Let ’er rip!

    7. Apps on, apps off

    8. Find the right PATH