- 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.
Supplemental Material available at: http://hf-mw.com/
Table of contents
- 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
- Title: Head First Mobile Web
- Release date: December 2011
- Publisher(s): O'Reilly Media, Inc.
- ISBN: 9781449302665
You might also like
40 Algorithms Every Programmer Should Know
Learn algorithms for solving classic computer science problems with this concise guide covering everything from fundamental …
Designing Data-Intensive Applications
Data is at the center of many challenges in system design today. Difficult issues need to …
Head First Design Patterns, 2nd Edition
You know you don’t want to reinvent the wheel, so you look to design patterns—the lessons …