book

Head First Mobile Web

by Lyza Danger Gardner, Jason Grigsby

December 2011

Intermediate to advanced

480 pages

12h 40m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Head First Mobile Web
Dedication
Advance Praise for Head First Mobile Web
Praise for other Head First books
How to use this Book: Intro
Who is this book for?Who should probably back away from this book?We know what you’re thinkingAnd we know what your brain is thinkingMetacognition: thinking about thinkingHere’s what WE didHere’s what YOU can do to bend your brain into submissionRead meSoftware requirementsThe technical review teamAcknowledgmentsSafari® Books Online
1. Getting Started on the Mobile Web: Responsive Web Design
Get on the mobile bandwagonThe time is nowSomething odd happened on the way to the pubIf mobile phone web browsers are so great......shouldn’t this just work?What’s so different about the mobile web?Responsive Web DesignThe recipe for Responsive Web DesignAn example of a responsively designed siteDifferent CSS in different placesMedia types, meet media featuresCSS media queriesCSS: How different is different?The current structure of the Splendid Walrus siteAnalyze the current CSSWhat needs to change?For mobile, we need to go from this...Identify the CSS that needs to changeSteps to creating the mobile-specific CSSTa-da! Mobile-specific CSSThe rest of our structural CSSShared structural CSSOur desktop structural CSSWhat’s next?Put it togetherOne last thing...What’s wrong with a fixed-width layout, anyway?The layout doesn’t adapt to other window sizesHow is fluid better?The layout adapts as the window changes sizeGo fluidThe fluid formulaA closer lookContinue your fluid conversionOur updated CSS ruleContext switchingWhat’s wrong with this picture?Fluid imagesA sad farewell...Are we there yet?Spiff up the mobile CSSDetails, detailsSet up flexible fontsFix the YouTube videoRemember to be responsibleThat’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?Can I get a proxy to set up my proxy?What to do when things aren’t blazing fastDon’t let its looks fool you, that’s a BIG pageThere’s gold in ’em HAR hills10,000-feet view: Show statisticsFind the drags on page speedWhere did that Google Maps JavaScript come from?One line to download them allMike hid the map with CSSWhat’s with the big pictures?Fluid images are huge imagesIt looks mobile friendly, but it isn’tMobile-first Responsive Web DesignWhat is progressive enhancement?Benefits of mobile-first designLet’s turn this web page aroundThe current structure of the On Tap Now pageAm I on a new page or not?Fix the content floatsMobile-first media queriesPut your CSS house in orderSurprise! The page is broken in Internet ExplorerInternet Explorer’s escape hatch: conditional commentsUse conditional comments with a media queryHow are we doing?Play taps for the header imageGoing old school with image optimizationOne src to rule them allA responsive image server to the rescueHow Sencha.io Src worksNo great solutions for <img> tagsOne final tweak: optimized beer label imagesThat’s a blazing-fast mobile web pageZoom, zoom, pow...Zoom in on the viewport <meta> tagThe right to zoom?Turn zooming back onBack to our regularly scheduled projectAdd the map back using JavaScriptOn second thought, a map would be usefulAdd a link to the mapBuild a pseudo-media query in JavaScriptRemove the commented-out iframe codeAdd the JavaScript to the On Tap Now pageThese widgets aren’t responsiveMove iframe attributes to CSS equivalentsMatch styles to attributesRemove attributes from the JavaScriptNo one should have trouble finding the pub nowThe map overlap is backLet the content be your guideTime to bend and stretch that browserInstall the bookmarklet in your browserOptional: Install an extensionBreakpoints to the rescueShrink the humongous beer labelsGoing to one column soonerOur mobile-first responsive design is complete
3. A Separate Mobile Website: Facing less-than-awesome circumstances
Creature Comforts has agents in the fieldHow can agents get and share the info they need?An increasing need for mobile webSend mobile users to a mobile-optimized websiteSniff out mobile usersGetting to know user agentsUser-agent archaeologyUser agents: spawn of Satan?What browsers are these?Straight talk: Most major sites have a separate mobile websiteSome things seem more natural on the server side......and the User-Agent header is our best clueWhen what you really want to do is (re-)directGet ye to the scriptTake a peek at the scriptHow does the script work?Make sure your working environment is seaworthyMake a mobile mockupA few tweaks to the mobile redirect scriptSpecial delivery...of complicating factorsOpera Mini, huh?Not all phones are smartphones...not by a sightHow many phones does India have, anyway?And, hey, feature phones aren’t all that badLet’s keep it basic: Meet XHTML-MPWhy would we want to use that old thing?Keep your nose clean with XHTML-MPBy the way, scrolling sucks...thank goodness for access keysOne last curveballAccess keys in actionGet some validationSo, are we good to go?What went wrong?Fix the errorsMobile-savvy CSSSounds simple in theoryHmmm...something is missingWhere’d the numbers go?Bye bye, buttonsThe 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 secondWhat’s this line we need to draw?Things you don’t support vs. those you can’t supportDon’t be a meanie about itAsk questions about your projectIngredients for your magic mobile potionDraw from your cupboard of tools and dataHow do I know my customers have the right stuff?

5. Device Databases and Classes: Get with the group
A panic button for freaked-out studentsThe button is for mobile phones onlyBut how do we know someone is on a mobile phone?Mobile device data sources to the rescueMeet WURFLWURFL and its capabilitiesThere’s more than one flavor of WURFLWe’ll be using the PHP APIWURFL: Clever API codeA tree of devices and their familiesIt’s time to install WURFL on your computerWe can build an explore page, tooSteps for building our explore pageAn explore page: Setting up our environmentDirectory structure for the explore pageA good start!But we can make it betterA quick one-two punch to improve our explore pagePut capabilities to workUse WURFL to help differentiate contentSteps to successAsk WURFL the right questionsInitialize the device and get the info readyIs this thing mobile?Danger, Will Robinson!Now, use that valueMake the page a bit smarter with WURFLMaking phone calls with linksThe panic button: For phones onlyFirst, let’s get the valuesNow, let’s evaluate themHerding devicesSort once, then goDevice classesThe picture just got a lot biggerExpanding a lucrative part of AcedIt!’s businessAn early look at what it has in mindEvaluate the home page wearing mobile-tinted glassesCombining device data with logical groupingGroup requirements into multiple mobile flavorsA fuller mobile experienceA simplified experience for simpler phonesRounding out our device classesOh, by the way, tabletsWhere to draw the lineOur device class lineupLet’s get this show on the roadBut, first...And we’re off!Get acquainted with the matching functionWhat’s going on in that switch statement?Some examplesUse the matching function to test capabilitiesThe home stretchWell, let’s see...how’d it go?Looks like something went a bit wrongFilling in the gapsFill in the gaps in the device class testsMake something actually happen with device classesWe’ll treat unsupported devices similarly to desktop browsers...for now, at leastAlways tread with care and come preparedWURFL’s “generic” is pretty genericSo what?We need a bigger safety netAccidental success is not good enoughA stitch in time
6. Build a Mobile Web App Using a Framework: The Tartanator
HTML5...app...what do these words even mean?HTML5 is a specific thing......but it has come to represent more...and what, exactly, is a web app?How “traditional” websites typically behaveHow applike websites often behaveA Tartans Unlimited mobile HTML5 web appThe master plan for phase 1 of the Tartanator...or you could use a mobile web frameworkWhy use mobile web app frameworks?Our choice for the Tartanator: jQuery MobileBuild a basic page with jQuery MobileStart basicInclude jQuery mobile code componentsMark up the rest of the pageAnd we’re off!The HTML5 data-* attributeBuild more of the TartanatorMake it a jQuery Mobile listOur list: Better, but not quite thereLink to multiple pages with jQuery MobileThe meat of the Tartanator: The tartans themselvesGet to work on tartans.htmlWe’ve given you a head start on the listTake the list from blah to betterDrop in the rest of the tartansFilter and organize a listOur tartan list is nicer nowIt’s time to show the early Tartanator work to EwanTricks to make it feel more like an appMake Tartanator feel more applike: to-dosAdd a footer toolbarConstruct a navbarPut buttons in the navbarMake the toolbar snazzyFinalize the structureMake the header sticky, tooTime to make that tartan-building formTartans: patterns like recipesFollow the tartan recipeTranslate tartan patterns to a formBuild an HTML5 formForm structureIt’s time to add some basic fieldsGive jQuery Mobile hints about the fieldsLists within lists let the users add colorsColor-size ingredient pairs: The color select fieldColor-size field pairs: The size fieldLink to the form...and give users a way back
7. Mobile Web Apps in the Real World: Super mobile web apps
It looks nice...It talks the talk......but it needs to walk the walkMobile apps in the real worldTo-dos: custom user tartan pattern implementationReady, set, enhance!We did the right thingNow let’s enhanceMake a better formA custom widget for the color select fieldA widget to manage the list of colors and sizesTake it for a spinA peek under the hoodSo, that’s the frontend enhancement......and now for the backendA quick tour of tartan generationThe two sides of generate.phpRequested with AJAXForm posted directlyOne last thing!Two out of three is a great startBut we’re not done yetOffline is importantMake it manifestA basic recipe to create a cache manifestThe deceptively simple syntax of a cache manifestUnfortunately, the devil is in the detailsDev tools to the rescueServe the manifest as the correct content-typeVictory is (finally) oursIt’s time for some location-aware searchable eventsHow geolocation worksHow to ask W3C-compliant browsers where they areHandling the info getCurrentPosition gives usStart in on the Find Events page: The baselineLet’s integrate geolocationNothing found
8. Build Hybrid Mobile Apps with PhoneGap: Tartan Hunt: Going native
Opportunity knocks againHow do hybrid apps work?Bridge the web-native gap with PhoneGapPhoneGap BuildIs your development environment ready to go?Get acquainted with PhoneGap BuildHow will the app work?Keep track of discovered tartansHow we’ll get from here to thereAnatomy of the Tartan Hunt projectWe’re already almost organized for PhoneGap BuildDownload your appsChoose your adventureInstall on an emulatorInstall on a real deviceReady, aim, fire!Hey, what about BlackBerry?Nice work, hotshot!Store which tartans users have foundWho’s seen what? Store found tartansWhat makes localStorage so special?What can localStorage do for us?Meet the getter and the setterCheck out what a browser supportsBut wait...the story isn’t over yetUse a function to show which tartans are foundThe toggle and toggleClass methodsLet’s look at that code chunk againYou found a tartan, eh? Prove it!There’s an API for thatUnleash the power of PhoneGapRope in PhoneGap to take picturesPhoneGap is almost ready for its close-upNow we’re ready for the mediaCapture APIHow will we handle the success?And what if it goes wrong?It always looks a bit different in real lifeIt’s just a bit anonymousReally stuck?We nailed it!
9. How to Be Future Friendly: Make (some) sense of the chaos
Now what?It’s complicatedTime to dispel our collective illusions of controlA future-friendly manifestoIf you can’t be future proof, be future friendlyThere are no silver bulletsApp today, web page tomorrowRemove PhoneGap referencesIt’s a long journey: Here are some guidepostsLook toward the future
A. Leftovers: The top six things (we didn’t cover)
#1. Testing on mobile devices#2. Remote debuggingWEb INspector REmote (weinre)How weinre worksRunning your weinre serverExplore the weinre inspector#3. Determine which browsers support whatLists of which browsers support whatTest what your browser supportsOr do both at the same time...#4. Device APIsWhat are device APIs?Standards set by DAP and WACThese sound great. Why aren’t they in the book?#5. Application stores and distributionReality check: most apps lose moneyEveryone and his brother has a store......and now web apps are joining in as wellSome nonexpert advice#6. RESS: REsponsive design + Server-Side componentsFuture of RESS
B. Set Up Your Web Server Environment: Gotta start somewhere
What we need from youOnly available locallyWindows and Linux: Install and configure XAMPPDownload the web server package softwareWindows folks, you’re upGet going with XAMPPLinux users, here’s your stuffThere’s a ton more information onlineMac folks: It’s MAMP timeKind of like falling off a logMake sure you dock at the right portOn a Mac......and on Windows and LinuxAccess your web serverGet at the root of itphpInfo, please!
C. Install WURFL: Sniffing out devices
Who’s got the brains?Download the APIAnd who’s got the brawn?Getting the two to work togetherA bit of filesystem housekeepingTake note!WURFL PHP API code pathResources pathCase closed!
D. Install the Android SDK and Tools: Take care of the environment
Let’s download the Android SDKSteps to a happy Android SDK environmentGet the right tools for the jobInstall platforms and toolsHit the Install button and go make some coffeeDo virtual devices dream of electric sheep?Create a new virtual deviceLet ’er rip!Apps on, apps offTo installTo uninstallPATH-findingFind the right PATHMac peopleWindows peopleWhew! You did it!
Index
About the Authors
Copyright

Content preview from Head First Mobile Web

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

The mobile web feels like that gifted kid in the class. You know, kind of fascinating, capable of amazing things, but also a mysterious, unpredictable troublemaker. We’ve tried to keep its hyperactive genius in check by being mindful of constraints and establishing boundaries, but now it’s time to capitalize on some of the mobile web’s natural talents. We can use progressive enhancement to spruce up the interface in more precocious browsers and transform erratic connectivity from a burden to a feature by crafting a thoughtful offline mode. And we can get at the essence of mobility by using geolocation. Let’s go make this a super mobile web app!

It looks nice...

Now that we’re done with phase 1, the Tartanator has that mobile-web-app sheen.

It talks the talk...

There are buttons. And navbars. And cool page transitions. We’re loading content selectively with AJAX. We’re reducing bandwidth, requests, and JavaScript DOM processing. And jQuery Mobile is helping to make our HTML5 form elements look and feel mobile friendly.

Take heart. It may seem like building phase 1 was full of sound and fury, signifying nothing. But we’ve laid ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Head First iPhone and iPad Development, 3rd Edition

Publisher Resources

ISBN: 9781449324773Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design