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.
Chapter 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
What’s wrong with this picture?
Are we there yet?
Remember to be responsible
That’s a responsive site!
Responsive design is also a state of mind
Chapter 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
Chapter 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
Hmmm...something is missing
The button look is sorely missed!
Chapter 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?
Chapter 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
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
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
Chapter 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
Chapter 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
Chapter 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!
Chapter 9 How to Be Future Friendly: Make (some) sense of the chaos
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
Appendix Leftovers: The top six things (we didn’t cover)
Lyza Danger Gardner (@lyzadanger) is a dev. She has built, broken and hacked web things since 1996. Curiously, Lyza was actually born and raised in Portland, Ore., the town where everyone wants to be but no one seems to be from.
Lyza started college early and cobbled together a motley education: a BA in Arts and Letters from Portland State University, followed by a master’s program in computer science at the University of Birmingham (UK).
Lyza has written a lot of web applications (server-side devs, represent!), defeated wily content management systems, optimized mobile web sites, pounded on various APIs, and worried a lot about databases. Fascinated by the way mobile technology has changed things, she now spends a lot of time thinking about the future of the web, mobile and otherwise.
Since co-founding Cloud Four, a Portland-based mobile web agency, in 2007, Lyza has voyaged further into the deep, untrammeled reaches of Device Land, exploring the foibles and chaos of mobile browsers and the mobile web. She has an odd set of anachronistic hobbies and it has been said she takes a fair number of photographs. She owns a four-letter .com domain. We’ll bet you can guess what it is and go visit her there.
After spending over a decade as a desktop web developer, Jason joined forces with the three smartest people he knew and started Cloud Four. Since co-founding Cloud Four, he has had the good fortune to work on many fantastic projects including the Obama ‘08 iPhone App.
He is founder and President of Mobile Portland, a non?profit dedicated to promotion and education of the mobile community in Portland, Oregon. Jason is a sought?after speaker and consultant on mobile technology.
You can find him blogging at http://cloudfour.com, his personal site http://userfirstweb.com and on Twitter as @grigs.Jason’s expertise includes information architecture, usability, and emerging technology like social media. He has been a featured speaker at various organizations on topics ranging from web analytics to web site performance.
This book is changing the way I think about web design in general. It's exactly what I've been looking for for a few years now. As the authors state, there is no magic bullet to creating web experiences for all screens, but there are fundamental principles. If you abide by those, you'll be able to create elegant solutions for an awkward and volatile reality. I really appreciate the contemplation of deeper issues this book manages to cover, all the while remaining easy to follow. Well done!
Bottom Line Yes, I would recommend this to a friend
First of all, I am a big fan of the Head First series. That doesn't necessarily mean I have read all the books in the series. However, for the most part, the books that I have read have consistently reinforced my knowledge in that subject area. By creatively repeating the concepts via different perspectives, like two inanimate objects engaged in a debate, interviewing of a new technology, bubble speeches, etc, the books are a pleasure to read and absorb. I feel that the authors have put a lot of work into making difficult concepts easier to understand.
The Head-First Mobile book is an exceptional book. The mobile development space is obfuscated by the variety of technologies, devices, screen sizes, and so on. This book dispels the complexity and puts everything in perspective. For example, it talks about responsive web design in which you can adjust the formatting of your content dynamically depending on the device that is asking for the content, all done using the same HTML and CSS file. How cool is that! Later chapters talk about intermediate and advanced concepts like mobile-optimized websites, device databases, and mobile development frameworks. All in all, this book does a great job of demystifying the complex workspace of mobile application development and clearly explains how to design and develop bullet-proof websites.
Bottom Line Yes, I would recommend this to a friend