- 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.
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
- Title: Head First Mobile Web
- Release date: December 2011
- Publisher(s): O'Reilly Media, Inc.
- ISBN: 9781449364458
You might also like
Jump Start Responsive Web Design, 2nd Edition
It used to be so simple. You made a website or application to work on a …
Head First iPhone and iPad Development, 3rd Edition
Let's say you have a killer app idea for iPhone and iPad. Where do you begin? …
Responsive Web Design, Second Edition
Since its groundbreaking release in 2011, Responsive Web Design remains a fundamental resource for anyone working …
The Responsive Web
The Responsive Web is an easy-to-read introduction to responsive web design packed with instantly useful tips …