Head first mobile web (brain friendly guides)

Advance Praise for Head First Mobile Web“If you have been considering buying a book about mobile development that is cross‑browser andcross‑vendor, you should stop right now and buy Head First Mobile Web. It’s written by amazingly smartpeople [who] have great experience on mobile and don’t stop at one platform, but work on all of them.Many developers spend days arguing [whether] they should go native or web. This book smoothlygoes from introductory topics to advanced ones, giving you all the needed information to createexciting content for mobile.”— Andrea Trasatti, leader of the DeviceAtlas project and cocreator ofthe WURFL repository of wireless device capability information“A pragmatic introduction to the chaotic world of mobile web development as it is today, with aglimpse of how we can and should approach it for tomorrow. Head First Mobile Web successfullypresents practical techniques all readers can use immediately, while giving plenty of foundation andresources for more experienced developers to build upon.”— Stephen Hay, web designer, developer, speaker, andcofounder of the Mobilism conference“Hands-on from the get-go, Head First Mobile Web provides an excellent introduction to the challengesand opportunities available when exploring the next chapter in web design.”— Bryan and Stephanie Rieger, founders of yiibu.com

Praise for other Head First books“Head First Object-Oriented Analysis and Design is a refreshing look at subject of OOAD. What sets this bookapart is its focus on learning. The authors have made the content of OOAD accessible [and] usable forthe practitioner.”— Ivar Jacobson, Ivar Jacobson Consulting“I just finished reading HF OOA&D, and I loved it! The thing I liked most about this book was its focuson why we do OOA&D—to write great software!”— Kyle Brown, Distinguished Engineer, IBM“Hidden behind the funny pictures and crazy fonts is a serious, intelligent, extremely well-craftedpresentation of OO analysis and design. As I read the book, I felt like I was looking over the shoulder ofan expert designer who was explaining to me what issues were important at each step, and why.”— Edward Sciore, Associate Professor, Computer Science Department,Boston College“All in all, Head First Software Development is a great resource for anyone wanting to formalize theirprogramming skills in a way that constantly engages the reader on many different levels.”— Andy Hudson, Linux Format“If you’re a new software developer, Head First Software Development will get you started off on the right foot.And if you’re an experienced (read: long-time) developer, don’t be so quick to dismiss this.…”— Thomas Duff, Duffbert’s Random Musings“There’s something in Head First Java for everyone. Visual learners, kinesthetic learners, everyone canlearn from this book. Visual aids make things easier to remember, and the book is written in a veryaccessible style—very different from most Java manuals.… Head First Java is a valuable book. I cansee the Head First books used in the classroom, whether in high schools or adult ed classes. And I willdefinitely be referring back to this book, and referring others to it as well.”— Warren Kelly, Blogcritics.org, March 2006“Rather than textbook-style learning, Head First iPhone and iPad Development brings a humorous, engaging,and even enjoyable approach to learning iOS development. With coverage of key technologies includingcore data, and even crucial aspects such as interface design, the content is aptly chosen and top-notch.Where else could you witness a fireside chat between a UIWebView and UITextField!”— Sean Murphy, iOS designer and developer

Praise for other Head First books“Another nice thing about Head First Java, Second Edition, is that it whets the appetite for more. Withlater coverage of more advanced topics such as Swing and RMI, you just can’t wait to dive into thoseAPIs and code that flawless, 100,000-line program on java.net that will bring you fame and venture-capital fortune. There’s also a great deal of material, and even some best practices, on networking andthreads—my own weak spot. In this case, I couldn’t help but crack up a little when the authors usea 1950s telephone operator—yeah, you got it, that lady with a beehive hairdo that manually hooks inpatch lines—as an analogy for TCP/IP ports…you really should go to the bookstore and thumb throughHead First Java, Second Edition. Even if you already know Java, you may pick up a thing or two. And ifnot, just thumbing through the pages is a great deal of fun.”— Robert Eckstein, Java.sun.com“Of course it’s not the range of material that makes Head First Java stand out, it’s the style and approach.This book is about as far removed from a computer science textbook or technical manual as you can get.The use of cartoons, quizzes, fridge magnets (yep, fridge magnets…). And, in place of the usual kind ofreader exercises, you are asked to pretend to be the compiler and compile the code, or perhaps to piecesome code together by filling in the blanks or…you get the picture.… The first edition of this book wasone of our recommended titles for those new to Java and objects. This new edition doesn’t disappointand rightfully steps into the shoes of its predecessor. If you are one of those people who falls asleep witha traditional computer book, then this one is likely to keep you awake and learning.”— TechBookReport.com“Head First Web Design is your ticket to mastering all of these complex topics, and understanding what’sreally going on in the world of web design.… If you have not been baptized by fire in using somethingas involved as Dreamweaver, then this book will be a great way to learn good web design. ”— Robert Pritchett, MacCompanion“Is it possible to learn real web design from a book format? Head First Web Design is the key to designinguser-friendly sites, from customer requirements to hand-drawn storyboards to online sites that workwell. What sets this apart from other ‘how to build a website’ books is that it uses the latest researchin cognitive science and learning to provide a visual learning experience rich in images and designedfor how the brain works and learns best. The result is a powerful tribute to web design basics that anygeneral-interest computer library will find an important key to success.”— Diane C. Donovan, California Bookwatch: The Computer Shelf“I definitely recommend Head First Web Design to all of my fellow programmers who want to get a grip onthe more artistic side of the business. ”— Claron Twitchell, UJUG

Other related books from O’ReillyjQuery CookbookjQuery Pocket ReferencejQuery MobileJavaScript and jQuery: The Missing ManualOther books in O’Reilly’s Head First seriesHead First C#Head First JavaHead First Object-Oriented Analysis and Design (OOA&D)Head First HTML with CSS and XHTMLHead First Design PatternsHead First Servlets and JSPHead First EJBHead First SQLHead First Software DevelopmentHead First JavaScriptHead First PhysicsHead First StatisticsHead First AjaxHead First RailsHead First AlgebraHead First PHP & MySQLHead First PMPHead First Web DesignHead First NetworkingHead First iPhone and iPad DevelopmentHead First jQueryHead First HTML5 Programming

Beijing • Cambridge • Farnham • Kln • Sebastopol • TokyoLyza Danger GardnerJason GrigsbyHead First Mobile WebWouldn’t it be dreamy if therewere a book to help me learn how tobuild mobile websites that was morefun than going to the dentist? It’sprobably nothing but a fantasy…

Head First Mobile Webby Lyza Danger Gardner and Jason GrigsbyCopyright © 2012 Cloud Four, Inc. All rights reserved.Printed in the United States of America.Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editionsare also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com.Series Creators: Kathy Sierra, Bert BatesEditor: Courtney NashDesign Editor: Louise BarrCover Designer: Karen MontgomeryProduction Editor: Kristen BorgProduction Services: Rachel MonaghanIndexer: Ginny MunroePage Viewers: Katie Byrd, Danny Boomer, the Future-Friendly Helmet, and TephraPrinting History:December 2011: First Edition.The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. The Head First series designations,Head First Mobile Web, and related trade dress are trademarks of O’Reilly Media, Inc.Many of the designations used by manufacturers and sellers to distinguish their products are claimed astrademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademarkclaim, the designations have been printed in caps or initial caps.While every precaution has been taken in the preparation of this book, the publisher and the authors assume noresponsibility for errors or omissions, or for damages resulting from the use of the information contained herein.No feature phones were harmed in the making of this book.ISBN: 978-1-449-30266-5[M] Katie ByrdDaddy, can youplay now?TephraFuture FriendlyDanny Boomeraka /dev/cat

To the phenomenal women in my family: my sister, Maggie;Momula, Fran; Aunt Catherine; stepmother, Christie; and above all,to the memory of my grandmother, Pearl, whose fierce and literateindependence inspired generations. —LyzaTo my parents for buying that Commodore 64 so many years ago;to my lovely wife, Dana, without whose support and understandingthis book wouldn’t have happened; and to Katie and Danny—yes,Daddy can play now. —Jason

viiithe authorsLyza Danger Gardner (@lyzadanger) is a dev. Shehas built, broken, and hacked web things since 1996.Curiously, Lyza was actually born and raised inPortland, Oregon, the town where everyone wants tobe but no one seems to be from.Lyza started college early and cobbled together amotley education: a BA in Arts and Letters fromPortland State University, followed by a master’sprogram in computer science at the University ofBirmingham (UK).Lyza has written a lot of web applications (server-sidedevs, represent!), defeated wily content managementsystems, optimized mobile websites, pounded onvarious APIs, and worried a lot about databases.Fascinated by the way mobile technology has changedthings, she now spends a lot of time thinking about thefuture of the Web, mobile and otherwise.Since cofounding Cloud Four, a Portland-based mobileweb agency, in 2007, Lyza has voyaged further into thedeep, untrammeled reaches of Device Land, exploringthe foibles and chaos of mobile browsers and the mobileweb. She has an odd set of anachronistic hobbies,and it has been said that she takes a fair number ofphotographs. She owns a four-letter .com domain. We’llbet you can guess what it is and go visit her there.In 2000, Jason Grigsby got his first mobile phone.He became obsessed with how the world could bea better place if everyone had access to the world’sinformation in their pockets. When his wife, Dana,met him, he had covered the walls of his apartmentwith crazy mobile dreams. To this day, he remainsbaffled that she married him.Those mobile dreams hit the hard wall of reality—WAP was crap. So Jason went to work on the Webuntil 2007, when the iPhone made it clear the timewas right. He joined forces with the three smartestpeople he knew and started Cloud Four.Since cofounding Cloud Four, he has had the goodfortune to work on many fantastic projects, includingthe Obama iPhone App. He is founder and presidentof Mobile Portland, a local nonprofit dedicatedto promoting the mobile community in Portland,Oregon.Jason is a sought-after speaker and consultant onmobile. If anything, he is more mobile obsessed nowthan he was in 2000 (sorry, sweetheart!).You can find him blogging at http://cloudfour.com;on his personal site, http://userfirstweb.com; and onTwitter as @grigs. Please say hello!LyzaJason

ixtable of contentsTable of Contents (Summary)Table of Contents (the real thing)Your brain on mobile web. Here you are trying to learn something,while here your brain is, doing you a favor by making sure the learning doesn’tstick. Your brain’s thinking, “Better leave room for more important things, likewhich wild animals to avoid and whether setting this BlackBerry Bold on fireis going to activate the sprinkler system.” So how do you trick your brain intothinking that your life depends on knowing mobile web?IntroWho is this book for? xxiiWe know what you’re thinking xxiiiAnd we know what your brain is thinking xxiiiMetacognition: thinking about thinking xxvThe technical review team xxxAcknowledgments xxxi Intro xxi1 Getting Started on the Mobile Web: Responsive Web Design 12 Responsible Responsiveness: Mobile-first Responsive Web Design 433 A Separate Mobile Website: Facing less-than-awesome circumstances 914 Deciding Whom to Support: What devices should we support? 1375 Device Databases and Classes: Get with the group 1516 Build a Mobile Web App Using a Framework: The Tartanator 2177 Mobile Web Apps in the Real World: Super mobile web apps 2678 Build Hybrid Mobile Apps with PhoneGap: Tartan Hunt: Going native 3139 How to Be Future Friendly: Make (some) sense of the chaos 357i Leftovers: The top six things (we didn’t cover) 373ii Set Up Your Web Server Environment: Gotta start somewhere 387iii Install WURFL: Sniffing out devices 397iv Install the Android SDK and Tools: Take care of the environment 403 Index 417

xtable of contents1Responsive Web Designgetting started on the mobile webGet on the mobile bandwagon 2Something odd happened on the way to the pub 4If mobile phone web browsers are so great… 5What’s so different about the mobile web? 6Responsive Web Design 10Different CSS in different places 12CSS media queries 13The current structure of the Splendid Walrus site 15Analyze the current CSS 16What needs to change? 17Identify the CSS that needs to change 18Steps to creating the mobile-specific CSS 19What’s wrong with a fixed‑width layout, anyway? 26How is fluid better? 27The fluid formula 28Continue your fluid conversion 29Context switching 31What’s wrong with this picture? 32Fluid images and media 33Remember to be responsible 36That’s a responsive site! 40Responsive design is also a state of mind 41Hey there! Are you ready to jump into mobile?Mobile web development is a wildly exciting way of life. There’s glamour andexcitement, and plenty of Eureka! moments. But there is also mystery and confusion.Mobile technology is evolving at bewildering speed, and there’s so much to know!Hang tight. We’ll start our journey by showing you a way of making websites calledResponsive Web Design (RWD). You’ll be able to adapt websites to look great on awhole lot of mobile devices by building on the web skills you already have.styles.cssindex.html

xitable of contents2Mobile-first Responsive Web Designresponsible responsivenessThat’s a beautiful mobile site. But beauty is only skin deep.Under the covers, it’s a different thing entirely. It may look like a mobile site, but it’sstill a desktop site in mobile clothing. If we want this site to be greased lightning onmobile, we need to start with mobile first. We’ll begin by dissecting the current siteto find the desktop bones hiding in its mobile closet. We’ll clean house and startfresh with progressive enhancement, building from the basic content all the wayto a desktop view. When we’re done, you’ll have a page that is optimized regardlessof the screen size.Very small screens(feature phones)Small screens(smartphones)Medium screens(tablets)Larger screens(desktops and TVs)ProgressiveenhancementbasedonscreensizeandclientfeaturesJust when you thought it was time to celebrate… 44Is there really a problem? How do we know? 45What to do when things aren’t blazing fast 47Don’t let its looks fool you, that’s a BIG page 48There’s gold in ’em HAR hills 49Find the drags on page speed 51Where did that Google Maps JavaScript come from? 53It looks mobile friendly, but it isn’t 55Mobile-first Responsive Web Design 56What is progressive enhancement? 57Fix the content floats 60Mobile-first media queries 61Surprise! The page is broken in Internet Explorer 62One src to rule them all 68Zoom in on the viewport <meta> tag 72The right to zoom? 73Add the map back using JavaScript 74Build a pseudo-media query in JavaScript 76Add the JavaScript to the On Tap Now page 77These widgets aren’t responsive 79Move iframe attributes to CSS equivalents 80Remove attributes from the JavaScript 81The map overlap is back 83Let the content be your guide 84Breakpoints to the rescue 87

xiitable of contents3Facing less-than-awesome circumstancesa separate mobile websiteThe vision of a single, responsive Web is a beautiful one…in which every site has one layout to rule them all, made lovingly with a mobile-firstapproach. Mmm…tasty. But what happens when a stinky dose of reality sets in? Likelegacy systems, older devices, or customer budget constraints? What if, sometimes,instead of mixing desktop and mobile support into one lovely soup, you need to keep’em separated? In this chapter, we look at the nitty-gritty bits of detecting mobile users,supporting those crufty older phones, and building a separate mobile site.Creature Comforts has agents in the field 92How can agents get and share the info they need? 93Send mobile users to a mobile-optimized website 96Sniff out mobile users 97Getting to know user agents 98User agents: spawn of Satan? 101Straight talk: Most major sites have a separate mobile website 104When what you really want to do is (re-)direct 105Take a peek at the script 106How does the script work? 107Make a mobile mockup 108Special delivery…of complicating factors 110Not all phones are smartphones…not by a sight 113Let’s keep it basic: Meet XHTML-MP 114Why would we want to use that old thing? 115Keep your nose clean with XHTML-MP 116By the way, scrolling sucks 119One last curveball 119Access keys in action 123What went wrong? 124Fix the errors 125Mobile-savvy CSS 127Hmmm…something is missing 132The button look is sorely missed! 133Great success! 134

xiiitable of contents4What devices should we support?deciding whom to supportDefinitionof whereto drawthe lineThere aren’t enough hours in the day to test on every device.You have to draw the line somewhere on what you can support. But how do youdecide? What about people using devices you can’t test on—are they left out in thecold? Or is it possible to build your web pages in a way that will reach people on devicesyou’ve never heard of? In this chapter, we’re going to mix a magic concoction of projectrequirements and audience usage to help us figure out what devices we supportand what to do about those we don’t.How do you know where to draw the line? 138Step away from the keyboard for a second 139Things you don’t support vs. those you can’t support 140Ask questions about your project 142Ingredients for your magic mobile potion 144Draw from your cupboard of tools and data 145How do I know my customers have the right stuff? 150

xivtable of contents5Get with the groupdevice databases and classesSetting the bar for the devices we support doesn’t take careof a few nagging issues. How do we find out enough stuff about our users’mobile browsers to know if they measure up before we deliver content to them? How dowe avoid only building (lame) content for the lowest common denominator? And how dowe organize all of this stuff so that we don’t lose our minds? In this chapter, we’ll enterthe realm of device capabilities, learn to access them with a device database, and,finally, discover how to group them into device classes so that we can keep our sanity.A panic button for freaked-out students 152Mobile device data sources to the rescue 154Meet WURFL 155WURFL and its capabilities 156WURFL: Clever API code 159We can build an explore page, too 160An explore page: Setting up our environment 161A quick one-two punch to improve our explore page 168Put capabilities to work 170Use WURFL to help differentiate content 170Initialize the device and get the info ready 172Is this thing mobile? 172Make the page a bit smarter with WURFL 176The panic button: For phones only 177Device classes 181Expanding a lucrative part of AcedIt!’s business 182Evaluate the home page wearing mobile-tinted glasses 183Group requirements into multiple mobile flavors 184Rounding out our device classes 185Get acquainted with the matching function 191What’s going on in that switch statement? 192Use the matching function to test capabilities 193Fill in the gaps in the device class tests 200We need a bigger safety net 211A stitch in time 212

xvtable of contents6The Tartanatorbuild a mobile web app using a framework“We want an app!” Just a year or two ago, that hallmark cry generally meantone thing: native code development and deployment for each platform you wantedto support. But native isn’t the only game in town. These days, web‑based apps formobile browsers have some street cred—especially now that hip cat HTML5 andhis sidekicks, CSS3 and JavaScript, are in the house. Let’s dip our toes into themobile web app world by taking a mobile framework—code tools designed to helpyou get your job done quickly—for a spin!Hmmm...it’s...nice,but can you makeit feel more...like anative app?HTML5…app…what do these words even mean? 219How “traditional” websites typically behave 220How applike websites often behave 221The master plan for phase 1 of the Tartanator 224Why use mobile web app frameworks? 225Our choice for the Tartanator: jQuery Mobile 226Build a basic page with jQuery Mobile 228Mark up the rest of the page 229The HTML5 data-* attribute 231Link to multiple pages with jQuery Mobile 234Take the list from blah to better 241Drop in the rest of the tartans 243Filter and organize a list 244Add a footer toolbar 249Make the toolbar snazzy 250Finalize the structure 251Time to make that tartan-building form 253Translate tartan patterns to a form 255Build an HTML5 form 256It’s time to add some basic fields 257Lists within lists let the users add colors 258Color-size ingredient pairs: The color select field 259Color-size field pairs: The size field 260Link to the form 262

xvitable of contents7Super mobile web appsmobile web apps in the real worldThe mobile web feels like that gifted kid in the class.You know, kind of fascinating, capable of amazing things, but also amysterious, unpredictable troublemaker. We’ve tried to keep its hyperactivegenius 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 moreprecocious browsers and transform erratic connectivity from a burden to afeature by crafting a thoughtful offline mode. And we can get at the essenceof mobility by using geolocation. Let’s go make this a super mobile web app!It looks nice… 268Mobile apps in the real world 270Ready, set, enhance! 274Make a better form 275A widget to manage the list of colors and sizes 276A peek under the hood 277So, that’s the frontend enhancement… 278…and now for the backend 280The two sides of generate.php 281One last thing! 282Offline is important 284A basic recipe to create a cache manifest 285Dev tools to the rescue 286Serve the manifest as the correct content-type 287Victory is (finally) ours 297How geolocation works 298How to ask W3C-compliant browsers where they are 299Start in on the Find Events page: The baseline 301Let’s integrate geolocation 303Nothing found 309

xviitable of contents8Tartan Hunt: Going nativebuild hybrid mobile apps with PhoneGapSometimes you’ve got to go native. It might be because you needaccess to something not available in mobile browsers (yet). Or maybe your client simplymust have an app in the App Store. We look forward to that shiny future when we haveaccess to everything we want in the browser, and mobile web apps share that sparklyallure native apps enjoy. Until then, we have the option of hybrid development—wecontinue writing our code using web standards, and use a library to bridge the gapsbetween our code and the device’s native capabilities. Cross-platform native appsbuilt from web technologies? Not such a bad compromise, eh?Hybrid AppBridgeOpportunity knocks again 314How do hybrid apps work? 317Bridge the web-native gap with PhoneGap 318Get acquainted with PhoneGap Build 321How will the app work? 322Keep track of discovered tartans 323Anatomy of the Tartan Hunt project 324Download your apps 328Choose your adventure 329Who’s seen what? Store found tartans 334What can localStorage do for us? 335Check out what a browser supports 339Use a function to show which tartans are found 340The toggle and toggleClass methods 341You found a tartan, eh? Prove it! 344Rope in PhoneGap to take pictures 345PhoneGap is almost ready for its close-up 347Now we’re ready for the mediaCapture API 348How will we handle the success? 349It always looks a bit different in real life 350It’s just a bit anonymous 351One last thing! 353We nailed it! 354

xviiitable of contents9Make (some) sense of the chaoshow to be future friendlyResponsive Web Design. Device detection. Mobile webapps. PhoneGap. Wait…which one should we use?There are an overwhelming number of ways to develop for the mobile web.Often, projects will involve multiple techniques used in combination. Thereis no single right answer. But don’t worry. The key is to learn to go with the flow.Embrace the uncertainty. Adopt a future-friendly mindset and ride the wave,confident that you’re flexible and ready to adapt to whatever the future holds.Now what? 358Time to dispel our collective illusions of control 361A future-friendly manifesto 362If you can’t be future proof, be future friendly 364App today, web page tomorrow 365It’s a long journey: Here are some guideposts 366Mix up a batch of mobile goodness 369Look toward the future 371

xixtable of contents#1. Testing on mobile devices 374#2. Remote debugging 376#3. Determine which browsers support what 382#4. Device APIs 384#5. Application stores and distribution 385#6. RESS: REsponsive design + Server-Side components 386What we need from you 388Only available locally 389Windows and Linux: Install and configure XAMPP 390Get going with XAMPP 391Mac folks: It’s MAMP time 392Make sure you dock at the right port 393Access your web server 394phpInfo, please! 396iiiThe top six things (we didn’t cover)Gotta start somewhereleftoversset up your web server environmentEver feel like something’s missing? We know whatyou mean… Just when you thought you were done, there’s more.We couldn’t leave you without a few extra details, things we just couldn’tfit into the rest of the book. At least, not if you want to be able to carrythis book around without a metallic case and caster wheels on thebottom. So take a peek and see what you (still) might be missing out on.You can’t spell “mobile web” without the “web.” There are no twoways about it. You’re going to need a web server if you want to develop for the mobileweb. That goes for more than just completing the exercises in this book. You needsomewhere to put your web-hosted stuff, whether you use a third-party commercialweb hosting service, an enterprise-class data center, or your own computer. In thisappendix, we’ll walk you through the steps of setting up a local web server on yourcomputer and getting PHP going using free and open source software.

xxtable of contentsIndexWho’s got the brains? 398And who’s got the brawn? 399Getting the two to work together 400A bit of filesystem housekeeping 401Take note! 402Let’s download the Android SDK 404Get the right tools for the job 405Create a new virtual device 408Find the right PATH 413 417iiiivSniffing out devicesTake care of the environmentinstall WURFLinstall the Android SDK and toolsThe first step to solving device detection mysteriesis a bit of legwork. Any decent gumshoe knows we’ve got togather our clues and interrogate our witnesses. First, we need to seekout the brains of the operation: the WURFL PHP API. Then we’ll go trackdown the brawn: capability information for thousands of devices in a singleXML data file. But it’ll take a bit of coaxing to get the two to spill the wholestory, so we’ll tweak a bit of configuration and take some careful notes.To be the master of testing native Android apps, you needto be environmentally aware. You’ll need to turn your computer into a nicelittle ecosystem where you can herd Android apps to and from virtual (emulated) orreal devices. To make you the shepherd of your Android sheep, we’ll show you how todownload the Android software development kit (SDK), how to install some platformtools, how to create some virtual devices, and how to install and uninstall apps.

you are here 4 xxithe introhow to use this bookIntroI can’t believe theyput that in a mobileweb book!In this section, we answer the burning question:“So why DID they put that in a Mobile Web book?”

xxii introhow to use this book123Who is this book for?Who should probably back away from this book?If you can answer “yes” to all of these:If you can answer “yes” to any of these:this book is for you.this book is not for you.[Note from marketing: this book isfor anyone with a credit card. Orcash. Cash is nice, too. - Ed]Do you have previous web design and developmentexperience?Do you want to learn, understand, remember, andapply important mobile web concepts so that you canmake your mobile web pages more interactive andexciting?Do you prefer stimulating dinner-party conversationto dry, dull, academic lectures?123Are you completely new to web development?Are you already developing mobile web apps or sitesand looking for a reference book on mobile web?Are you afraid to try something different? Would yourather have a root canal than endure the suggestionthat there might be more than one true way to build forthe Web? Do you believe that a technical book can’tbe serious if there’s a walrus‑themed pub and an appcalled the Tartanator in it?It definitely helps if you’ve alreadygot some scripting chops, too. We’renot talking rocket science, but youshouldn’t feel visceral panic if yousee a JavaScript snippet.

you are here 4 xxiiithe introGreat. Only450 more dull,dry, boring pages.We know what you’re thinkingAnd we know what your brain is thinking“How can this be a serious mobile web development book?”“What’s with all the graphics?”“Can I actually learn it this way?”Your brain craves novelty. It’s always searching, scanning, waiting for somethingunusual. It was built that way, and it helps you stay alive.So what does your brain do with all the routine, ordinary, normal thingsyou encounter? Everything it can to stop them from interfering with thebrain’s real job—recording things that matter. It doesn’t bother savingthe boring things; they never make it past the “this is obviously notimportant” filter.How does your brain know what’s important? Suppose you’re out fora day hike and a tiger jumps in front of you. What happens inside yourhead and body?Neurons fire. Emotions crank up. Chemicals surge.And that’s how your brain knows…This must be important! Don’t forget it!But imagine you’re at home, or in a library. It’s a safe, warm, tiger‑free zone.You’re studying. Getting ready for an exam. Or trying to learn some toughtechnical topic your boss thinks will take a week, 10 days at the most.Just one problem. Your brain’s trying to do you a big favor. It’s trying to makesure that this obviously nonimportant content doesn’t clutter up scarce resources.Resources that are better spent storing the really big things. Like tigers.Like the danger of fire. Like how you should never again snowboardin shorts.And there’s no simple way to tell your brain, “Hey brain, thank youvery much, but no matter how dull this book is, and how little I’mregistering on the emotional Richter scale right now, I really do wantyou to keep this stuff around.”Your brain thinksTHIS is important.Your brain thinksTHIS isn’t worthsaving.

xxiv introhow to use this bookSo what does it take to learn something? First, you have to get it, and then make sureyou don’t forget it. It’s not about pushing facts into your head. Based on the latestresearch in cognitive science, neurobiology, and educational psychology, learningtakes a lot more than text on a page. We know what turns your brain on.Some of the Head First learning principles:Make it visual. Images are far more memorable thanwords alone, and make learning much more effective (upto 89% improvement in recalland transfer studies). Italso makes things moreunderstandable.Put the words withinor near the graphics theyrelate to, rather than on the bottom or on another page, and learners will be up to twice aslikely to solve problems related to the content.Use a conversational and personalized style. In recent studies, studentsperformed up to 40% better on post-learning tests if the content spoke directly tothe reader, using a first-person, conversational style rather than taking a formal tone.Tell stories instead of lecturing. Use casual language. Don’t take yourself too seriously.Which would you pay more attention to: a stimulating dinner-party companion, or a lecture?Get the learner to think more deeply. In other words, unless you actively flex yourneurons, nothing much happens in your head. A reader has to be motivated, engaged, curious,and inspired to solve problems, draw conclusions, and generate new knowledge. And for that,you need challenges, exercises, and thought-provoking questions, and activities that involveboth sides of the brain and multiple senses.Get—and keep—the reader’s attention. We’ve all had the“I really want to learn this, but I can’t stay awake past page one”experience. Your brain pays attention to things that are out of the ordinary,interesting, strange, eye-catching, unexpected. Learning a new, tough, technicaltopic doesn’t have to be boring. Your brain will learn much more quickly if it’s not.Touch their emotions. We now know that your ability to remembersomething is largely dependent on its emotional content. You remember whatyou care about. You remember when you feel something. No, we’re not talkingheart‑wrenching stories about a boy and his dog. We’re talking emotions likesurprise, curiosity, fun, “what the…?” , and the feeling of “I rule!” that comeswhen you solve a puzzle, learn something everybody else thinks is hard, orrealize you know something that “I’m more technical than thou” Bob fromEngineering doesn’t.We think of a “Head First” reader as a learner.Watch out, mobile web!Here we come!

you are here 4 xxvthe introIf you really want to learn, and you want to learn more quickly and more deeply,pay attention to how you pay attention. Think about how you think. Learn howyou learn.Most of us did not take courses on metacognition or learning theory when we weregrowing up. We were expected to learn, but rarely taught to learn.But we assume that if you’re holding this book, you really want to learn aboutmobile web development. And you probably don’t want to spend a lot of time. Andsince you’re going to build more sites and apps in the future, you need to rememberwhat you read. And for that, you’ve got to understand it. To get the most from thisbook, or any book or learning experience, take responsibility for your brain. Yourbrain on this content.The trick is to get your brain to see the new material you’re learning asReally Important. Crucial to your well-being. As important as a tiger.Otherwise, you’re in for a constant battle, with your brain doing its best tokeep the new content from sticking.Metacognition: thinking about thinkingI wonder how Ican trick my braininto rememberingthis stuff...So just how do you get your brain to think that mobileweb development is a hungry tiger?There’s the slow, tedious way, or the faster, more effective way. The slow way is aboutsheer repetition. You obviously know that you are able to learn and remember even thedullest of topics if you keep pounding the same thing into your brain. With enoughrepetition, your brain says, “This doesn’t feel important to him, but he keeps looking atthe same thing over and over and over, so I suppose it must be.”The faster way is to do anything that increases brain activity, especially differenttypes of brain activity. The things on the previous page are a big part of the solution,and they’re all things that have been proven to help your brain work in your favor. Forexample, studies show that putting words within the pictures they describe (as opposed tosomewhere else in the page, like a caption or in the body text) causes your brain to try tomakes sense of how the words and picture relate, and this causes more neurons to fire.More neurons firing = more chances for your brain to get that this is something worthpaying attention to, and possibly recording.A conversational style helps because people tend to pay more attention when theyperceive that they’re in a conversation, since they’re expected to follow along and hold uptheir end. The amazing thing is, your brain doesn’t necessarily care that the “conversation”is between you and a book! On the other hand, if the writing style is formal and dry, yourbrain perceives it the same way you experience being lectured to while sitting in a roomfulof passive attendees. No need to stay awake.But pictures and conversational style are just the beginning.

xxvi introhow to use this bookHere’s what WE did:We used pictures, because your brain is tuned for visuals, not text. As far as your brain’sconcerned, a picture really is worth a thousand words. And when text and pictures worktogether, we embedded the text in the pictures because your brain works more effectivelywhen the text is within the thing the text refers to, as opposed to in a caption or buried inthe text somewhere.We used redundancy, saying the same thing in different ways and with different mediatypes, and multiple senses, to increase the chance that the content gets coded into more thanone area of your brain.We used concepts and pictures in unexpected ways because your brain is tuned fornovelty, and we used pictures and ideas with at least some emotional content, because yourbrain is tuned to pay attention to the biochemistry of emotions. That which causes you tofeel something is more likely to be remembered, even if that feeling is nothing more than alittle humor, surprise, or interest.We used a personalized, conversational style, because your brain is tuned to pay moreattention when it believes you’re in a conversation than if it thinks you’re passively listeningto a presentation. Your brain does this even when you’re reading.We included loads of activities, because your brain is tuned to learn and remembermore when you do things than when you read about things. And we made the exerciseschallenging‑yet-doable, because that’s what most people prefer.We used multiple learning styles, because you might prefer step-by-step procedures,while someone else wants to understand the big picture first, and someone else just wantsto see an example. But regardless of your own learning preference, everyone benefits fromseeing the same content represented in multiple ways.We include content for both sides of your brain, because the more of your brainyou engage, the more likely you are to learn and remember, and the longer you can stayfocused. Since working one side of the brain often means giving the other side a chance torest, you can be more productive at learning for a longer period of time.And we included stories and exercises that present more than one point of view,because your brain is tuned to learn more deeply when it’s forced to make evaluations andjudgments.We included challenges, with exercises, and by asking questions that don’t always havea straight answer, because your brain is tuned to learn and remember when it has to workat something. Think about it—you can’t get your body in shape just by watching people atthe gym. But we did our best to make sure that when you’re working hard, it’s on the rightthings. That you’re not spending one extra dendrite processing a hard-to-understandexample, or parsing difficult, jargon-laden, or overly terse text.We used people. In stories, examples, pictures, etc., because, well, you’re a person. Andyour brain pays more attention to people than it does to things.Structured content (HTML)Presentation (CSS)Behavior (JavaScript)

you are here 4 xxviithe introSo, we did our part. The rest is up to you. These tips are astarting point; listen to your brain and figure out what worksfor you and what doesn’t. Try new things.12345 Drink water. Lots of it.Your brain works best in a nice bath of fluid.Dehydration (which can happen before you everfeel thirsty) decreases cognitive function.Make this the last thing you read beforebed. Or at least the last challenging thing.679 Create something!Apply this to your daily work; use what you arelearning to make decisions on your projects. Justdo something to get some experience beyond theexercises and activities in this book. All you needis a pencil and a problem to solve…a problem thatmight benefit from using the tools and techniquesyou’re studying for the exam.Listen to your brain.8 Feel something!Your brain needs to know that this matters. Getinvolved with the stories. Make up your owncaptions for the photos. Groaning over a bad jokeis still better than feeling nothing at all.Pay attention to whether your brain is gettingoverloaded. If you find yourself starting to skimthe surface or forget what you just read, it’s timefor a break. Once you go past a certain point, youwon’t learn faster by trying to shove more in, andyou might even hurt the process.Talk about it. Out loud.Speaking activates a different part of the brain.If you’re trying to understand something, orincrease your chance of remembering it later, sayit out loud. Better still, try to explain it out loudto someone else. You’ll learn more quickly, andyou might uncover ideas you hadn’t known werethere when you were reading about it.Part of the learning (especially the transfer tolong-term memory) happens after you put thebook down. Your brain needs time on its own, todo more processing. If you put in something newduring that processing time, some of what youjust learned will be lost.Read “There Are No Dumb Questions.”That means all of them. They’re not optionalsidebars—they’re part of the core content!Don’t skip them.Do the exercises. Write your own notes.We put them in, but if we did them for you,that would be like having someone else doyour workouts for you. And don’t just look atthe exercises. Use a pencil. There’s plenty ofevidence that physical activity while learningcan increase the learning.Slow down. The more you understand,the less you have to memorize.Don’t just read. Stop and think. When thebook asks you a question, don’t just skip to theanswer. Imagine that someone really is askingthe question. The more deeply you force yourbrain to think, the better chance you have oflearning and remembering.Cut this out and stick iton your refrigerator.Here’s what YOU can do to bendyour brain into submission

xxviii introhow to use this bookRead meThis is a learning experience, not a reference book. We deliberately stripped out everythingthat might get in the way of learning whatever it is we’re working on at that point in thebook. And the first time through, you need to begin at the beginning, because the bookmakes assumptions about what you’ve already seen and learned.We expect you to know HTML and CSS.If you don’t know HTML and CSS, pick up a copy of Head First HTML with CSS &XHTML before starting this book. We’ll explain some of the more obscure CSS selectors orHTML elements, but don’t expect to learn about that foundational stuff here.We expect you to feel comfy around web scripting code.We’re not asking you to be a world-class JavaScript expert or to have done a graduatecomputer science project using PHP, but you’ll see examples using both languagesthroughout the book. If the merest notion of a for loop makes you hyperventilate (or ifyou have no idea what we’re talking about), you might consider tracking down a copy ofHead First PHP & MySQL or Head First JavaScript and then heading on back here.We expect you to know how to track things down.We’ll be blunt. The mobile web is an enormous topic, and mastering it involves expandingyour existing web development skills. There are too many things to know about the Web forany one person to memorize, whether it’s a detail of JavaScript syntax or the specifics of abrowser’s support for an HTML5 element attribute. Don’t be too hard on yourself. Part ofthe toolset of a good web dev is keeping your Google chops sharp and knowing when andhow to hit the Web to look up info about web topics. We bet you’re good at that already.We expect you to go beyond this book.It’s a big and beautiful mobile web world out there. We hope we can give you a shove tostart you on your journey, but it’s up to you to keep up your steam. Seek out the activemobile web community online, read blogs, join mailing lists that are up your alley, andattend related technical events in your area.The activities are NOT optional.The exercises and activities are not add-ons; they’re part of the core content of thebook. Some of them are to help with memory, some are for understanding, and somewill help you apply what you’ve learned. Don’t skip the exercises. They’re good forgiving your brain a chance to think about the ideas and terms you’ve been learning in adifferent context.The redundancy is intentional and important.One distinct difference in a Head First book is that we want you to really get it. And wewant you to finish the book remembering what you’ve learned. Most reference books don’thave retention and recall as a goal, but this book is about learning, so you’ll see some of thesame concepts come up more than once.

you are here 4 xxixthe introThe Brain Power exercises don’t have answers.For some of them, there is no right answer, and for others, part of the learningexperience of the exercise is for you to decide if and when your answers are right. Insome of the Brain Power exercises, you will find hints to point you in the right direction.Software requirementsAs for developing any website, you need a text editor, a browser, a web server (it can belocally hosted on your personal computer), and the source code for the chapter examples.The text editors we recommend for Windows are PSPad, TextPad, or EditPlus (butyou can use Notepad if you have to). The text editors we recommend for Mac areTextWrangler (or its big brother, BBEdit) or TextMate. We also like Coda, a moreweb‑focused tool.If you’re on a Linux system, you’ve got plenty of text editors built in, and we trust youdon’t need us to tell you about them.If you are going to do web development, you need a web server. You’ll need to go toAppendix ii, which details installing a web server with PHP. We recommend doing thatnow. No, seriously, head there now, follow the instructions, and come back to this pagewhen you’re done.For Chapter 5, you’ll need to install the WURFL (Wireless Universal Resource FiLe) APIand data. And for Chapter 8, you’ll need the Android SDK and some related tools. Youguessed it: there are appendixes for those tasks, too.You’ll also need a browser—no, strike that—as many browsers aspossible for testing. And the more mobile devices with browsers youhave on hand, the better (don’t panic; there are many emulators you can useif you don’t have hardware).For developing and testing on the desktop, we highly recommend Google’sChrome browser, which has versions for Mac, Windows, and Linux.Learning how to use the JavaScript console in Google’s Chrome Dev Toolsis well worth the time. This is homework you need to do on your own.Last of all, you’ll need to get the code and resources for the examples in thechapters. It’s all available at http://hf-mw.com.The hf-mw.com site has the startingpoint of code for all the chapters.Head on over there and get downloading.The code andresources for theexamples in thechapters are allavailable athttp://hf-mw.com.

xxx introThe technical review teamthe review teamStephen HayBryan RiegerAndrea TrasattiTrevor Farlow is an amateur baker, recreational soccer player,and part-time animal shelter volunteer. When he’s not walkingdogs, scoring goals, or perfecting his New York–style cheesecake,he can be found learning the art of product ownership in a lean,mean, agile development team at Clearwater Analytics, LLC.Brad Frost is a mobile web strategist and frontend developerat R/GA in New York City, where he works with large brandson mobile-related projects. He runs a resource site called MobileWeb Best Practices (http://mobilewebbestpractices.com) aimed athelping people create great mobile web experiences.Stephen Hay has been building websites for more than 16years. Aside from his client work, which focuses increasingly onmultiplatform design and development, he speaks at industryevents and has written for publications such as A List Apart and.net Magazine. He also co-organizes Mobilism, a highly respectedmobile web design and development conference.Ethan Marcotte is an independent designer/developer whois passionate about beautiful design, elegant code, and theintersection of the two. Over the years, his clientele has includedNew York Magazine, the Sundance Film Festival, the Boston Globe,and the W3C. Ethan coined the term Responsive Web Design todescribe a new way of designing for the ever-changing Web and,if given the chance, will natter on excitedly about it—he evenwent so far as to write a book on the topic.Bryan Rieger is a designer and reluctant developer with abackground in theatre design and classical animation. Bryan hasworked across various media including print, broadcast, web,and mobile; and with clients such as Apple, Microsoft, Nokia,and the Symbian Foundation. A passionate storyteller andincessant tinkerer, Bryan can be found crafting a diverse rangeof experiences at Yiibu—a wee design consultancy based inEdinburgh, Scotland.Stephanie Rieger is a designer, writer, and closetanthropologist with a passion for the many ways people interactwith technology. Stephanie has been designing for mobile since2004 and now focuses primarily on web strategy, frontenddesign, and optimization for multiple screens and capabilities. Acompulsive tester and researcher, Stephanie is always keen todiscover and share insights on mobile usage, user behavior, andmobility trends from around the world.Andrea Trasatti started creating WAP content in 1999 on theNokia 7110, which in Europe was considered groundbreaking atthe time. Andrea has led both WURFL and DeviceAtlas fromtheir earliest days to success, and during those years built vastexperience in device detection and content adaptation. You canfind Andrea on Twitter as @AndreaTrasatti, regularly talkingabout mobile web and new trends in creating and managingcontent for mobile.Brad FrostStephanie RiegerEthan MarcotteTrevor Farlow

you are here 4 xxxithe introAcknowledgmentsCourtney NashLou BarrThe O’Reilly team:Thanks to Lou Barr for her unfathomably speedy and masterful design and layout magic.We’re seriously blown away here. Thank you. Our gratitude goes to Karen Shaner andRachel Monaghan for all the help juggling drafts, reviewers, and details!Thanks to the rest of the O’Reilly folks who made us feel so welcomed: Mike Hendrickson,for suggesting this crazy idea in the first place; Brady Forrest, for introducing andchampioning us; Tim O’Reilly, for being the genuine, smart, and nice guy that he is; andSara Winge, for her graciousness and overall awesomeness.Lyza’s friends and family:Thanks to Bryan Christopher Fox (Other Dev), without whose coding chops, insight, support, andall-around supergenius this book would not have been possible.Huge shout-outs to my friends and family, who still seem to put up with me despite my long-termdisappearance into Book Land. Thanks to Autumn and Amye, who showed stunning tenacity in theface of my constant unavailability. Thanks, Mike, always. And thanks to Dad, who always shows mehow to find aesthetic and new adventure. Finally, thanks to Huw and Bethan of Plas-yn-Iâl, Llandegla,Wales, a fantastic, sheep-happy place where about a quarter of this book was written.Our editor:Thanks (and congratulations!) to Courtney Nash, who pushed us to createthe best book we possibly could. She endured a huge raft of emails, questions,ramblings, and occasional crankiness. She stuck with us throughout this bookand trusted us to trust our guts. And thanks to Brian Sawyer for steppingup at the end and taking us over the finish line.Jason’s friends and family:Thank you to my family for all of their support. Our parents, Jan, Carol, Mark, and Doanne, werea tremendous help in keeping our sanity as we juggled book writing, family, and moving.Special thanks to my wife, Dana Grigsby, for making it possible for me to work on a book while weraised a baby and a preschooler and moved into a new house. I couldn’t have done it without you.Our thanks:Jason and Lyza work with the smartest people ever at Cloud Four. Our epic thanks tofellow cofounders Aileen Jeffries and John Keith, and the rest of the Cloud Four team:Matt Gifford, Chris Higgins, and Megan Notarte. This book is really a product of ourcollective mobile web obsession, and they, more than anyone, championed and endured thiseffort. Thanks a billion million zillion, you guys.We’d also like to thank the mobile web community. In particular, we’d like to thank Josh Clark,Gail Rahn Frederick, Scott Jehl, Scott Jenson, Dave Johnson, Tim Kadlec, Jeremy Keith, Peter-Paul Koch, Bryan LeRoux, James Pearce, Steve Souders, and Luke Wroblewski. We’re proudand thankful to be part of this community.

xxxii introhow to use this bookSafari® Books OnlineSafari® Books Online is an on-demand digital library that lets you easilysearch over 7,500 technology and creative reference books and videos tofind the answers you need quickly.With a subscription, you can read any page and watch any video from our library online.Read books on your cell phone and mobile devices. Access new titles before they are availablefor print, and get exclusive access to manuscripts in development and post feedback for theauthors. Copy and paste code samples, organize your favorites, download chapters, bookmarkkey sections, create notes, print out pages, and benefit from tons of other time-saving features.O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digitalaccess to this book and others on similar topics from O’Reilly and other publishers, sign up forfree at http://my.safaribooksonline.com.

this is a new chapter 1getting started on the mobile web1Responsive Web DesignHey there! Are you ready to jump into mobile?Mobile web development is a wildly exciting way of life. There’s glamour andexcitement, and plenty of Eureka! moments. But there is also mystery and confusion.Mobile technology is evolving at bewildering speed, and there’s so much to know!Hang tight. We’ll start our journey by showing you a way of making websites calledResponsive Web Design (RWD). You’ll be able to adapt websites to look great on awhole lot of mobile devices by building on the web skills you already have.Dashing, exciting, fascinating,and oh-so-popular...but am Iready to take the plunge?

2 Chapter 1it’s a mobile worldGet on the mobile bandwagonThere’s a pretty good chance you own a mobile phone. We know that notsimply because you bought this book (smart move, by the way!), but becauseit’s hard to find someone who doesn’t own a mobile phone.It doesn’t matter where you go in the world. Mobile phones are being usedeverywhere, from farmers in Nigeria using their mobiles to find whichmarket has the best price for their crops, to half of Japan’s top 10 best-sellingnovels being consumed and written—yes, written—on mobile phones.At the beginning of 2011, there were 5.2 billion phones being used by the6.9 billion people on Earth. More people use mobile phones thanhave working toilets or toothbrushes.The time is nowSo yeah, mobile is huge, but it’s been big for years. Why should you get onthe mobile bandwagon now?Because the iPhone changed everything. It sounds clichéd, but it is true.There were app stores, touchscreens, and web browsers on phones before theiPhone, but Apple was the first to put them together in a way that made iteasy for people to understand and use.Are you ready to get onthe mobile bandwagon?

you are here 4 3getting startedThe iPhone is fantastic, but people use a lot ofdifferent phones for a lot of different reasons.And the most popular phones are likely to change.We have no way of knowing what the the leading phones will bewhen you read this book. Three years ago, Android was a mereblip on the radar. In 2011, it is a leading smartphone platformworldwide.Mobile technology changes quickly, but there are a few things wefeel confident about:Everyone has iPhones. Andif they don’t, are they reallygoing to browse the Web?Every new phone has a web browser in it.You can probably find a new phone that doesn’t have a webbrowser in it, but you have to look pretty hard. Even the mostbasic phones now come with decent browsers. Everyone wants theWeb on their phone.1Mobile web usage will exceed desktop web usage.Soon the number of people accessing the Web via mobile phoneswill surpass those who use a computer. Already, many people saythey use their phones more frequently than their PCs.2The Web is the only true cross-platform technology.iPhone, Android, BlackBerry, Windows Phone, WebOS, Symbian,Bada—there are more phone platforms than we can keep track of.Each one has its own specific programming hooks, meaning that ifyou want to write software for each, you have to start from scratcheach time.Mobile web has its own challenges, but there isno other technology that allows you to createcontent and apps that reach every platform.3So you’re in the right spot at the right time. Mobile web is taking off,and you’re ready to ride the rocketship. Let’s get started!

4 Chapter 1meet the splendid walrusSomething odd happened on theway to the pubMike is the proprietor of The Splendid Walrus, a pub with aclever name and a cult-like following of local beer enthusiasts.Mike always has unusual beers on tap and highlights severalof them on his website.Before he realized his lifelong dream of pub ownership, Mikewas a web developer. So he had no trouble putting together arespectable website for The Splendid Walrus himself.The Splendid Walruswebsite is prettysweet—I used to do thisfor a living, after all.http://www.splendidwalrus.com

you are here 4 5getting startedIf mobile phone web browsers are so great…Mike built the Splendid Walrus website several years ago, whenmobile browsing was still rudimentary and uncommon. It was madefor—and tested in—desktop browsers like Firefox, Internet Explorer,and Safari.Lots of newer mobile browers have good reputations. They’reincreasingly sophisticated and powerful, and starting to feel like someof their desktop counterparts.…shouldn’t this just work?Mike had a rude awakening when he looked at the Splendid Walrussite on his iPhone 4. It didn’t look so hot on a friend’s Androiddevice, either.Here’s how the Splendid Walrussite looks on an iPhone 4… …and here’s how the sitelooks on a MotorolaBackflip Android phone.

6 Chapter 1the brave new world of mobile web designThere are 86 billion different mobile web browsers.OK, not quite that many. But when you’re developing for themobile web, sometimes it feels this way. Unlike the handfulof leading desktop browsers, there are hundreds of differentmobile browsers. Yikes.1Mobile devices are smaller and slower.Yeah, we know. Newer mobile devices are state-of-the-artpocket computers. But they still pale in comparison to desktop(or laptop) computers in terms of processing power. Mobilenetworks can be flaky and downright poky, and data transfer isnot necessarily free or unlimited. This means we’ll need to thinkabout putting our sweet but enormous, media-rich, complexsites on a performance-savvy diet.3Support for web technologies varies wildly.On older mobile browsers (or even recent ones on less powerfuldevices), you can pretty much forget about reliable CSS orJavaScript. Even the newest browsers lack support for somethings, support them in bewilderingly different ways, or haveweird bugs. It’s the Wild West out here, folks!2Mobile interfaces require us to rethink our sites.Just because a mobile browser can render a desktop websitewith few hiccups doesn’t mean it necessarily should. Screens aresmaller; interactions and expectations are different.People with mobile devices use all sorts of input devices: fingers,stylus pens, the little nubbins they have on BlackBerry devices.Typing and filling out forms can be tedious at best. Squintingat type designed to fit a desktop browser window can give yourusers headaches and fury. You get the idea.4What’s so different about the mobile web?And just when youthink you’re on topof all of them, anew one will pop upin, like, Thailand.My iPhone has the Safari webbrowser on it. My site looks greatin desktop Safari, so why does itlook all messed up on my phone?

you are here 4 7getting startedHere’s how Mike’s iPhone 4 renders the Splendid Walrus website. It doesn’t look sogreat. Can you spot the problem areas? Mark any problems you see.1324

8 Chapter 1exercise solutionDid you spot some of these problem areas?1234The navigation linksare all tiny and toosmall to read or click.1The three-columnlayout feels tight onthis screen resolution,and the text is hardto read.3The embeddedYouTube videodoesn’t work.2There is a weird gapon the right edgeof the screen.4This is confusing and embarrassing.I want my customers with mobiledevices to see a nice site. I’m outof my depth here. Can you help?

you are here 4 9getting startedFrank: Hold on a minute. We know that Mike makes a bigdeal out of using clean, semantic HTML markup and usesCSS to control layout and styling as much as possible.Jim: And? That’s great and professional, but how does ithelp us make this better?Frank: Well, let’s think about this a bit. When I look at theCSS he’s using for the Splendid Walrus site, I see a lot ofwidths and sizes defined to fit within a 960-pixel box. It lookslike he’s designed the site on a 960-pixel grid, with threemain columns.Jim: …and most mobile devices have resolutionsconsiderably less than 960 pixels. Also, three columns seemslike a lot for a smaller screen.Frank: So…I have to wonder…what if we could use differentCSS for mobile devices? Say, maybe, CSS designed to lay out in320 pixels, which is the width of a lot of smartphone screens?And maybe reduce the number of columns?Jim: Nice idea, Frank. But I don’t see how we could do thatwithout a lot of server-side programming. I mean, how do weget mobile devices to use completely different CSS?Frank: You know how Jill just got back from the AwesomeCool Mobile Web Camp conference and is all excited aboutthat thing called Responsive Web Design?Jim: How could I forget? It’s all she’s been talking about.Frank: Well, she says it’s getting a lot of attention fromweb developers and it sounds like it involves, at least inpart, applying different CSS for different situations, withouthaving to do heavy‑duty programming. Apparently it’sespecially useful for developing mobile websites. I can’t reallyremember the details, but maybe we should check it out.Jim FrankUgh! What a mess! We’re totallygoing to have to start from scratch...

10 Chapter 1responsive web designResponsive Web Design (RWD) is a set of techniqueschampioned by web designer Ethan Marcotte. Sites designedwith this approach adapt their layouts according to theenvironment of the user’s browser, in large part by doing somenifty things with CSS.Depending on the current value of certain browser conditionslike window size, device orientation, or aspect ratio, we canapply different CSS in different circumstances. By rethinking theway we do page layouts, we can make formerly one-size-fits-allcolumn and grid layouts flow more naturally across a continuumof browser window sizes.Responsive Web DesignRead Ethan’s original article forA List Apart about RWD athttp://bit.ly/nRePnj.RWD is one of the simplestand quickest ways to makea website work handsomelyon a lot of devices—and youcan use the web skills youalready have.CSS3 media queriesEvaluating certain aspects of the current browserenvironment to determine which CSS to apply.1Fluid-grid layoutsUsing relative CSS proportions instead of absolutesizes for page layout elements.2Fluid images and mediaMaking our images and media scale to fit withinthe size constraints of their containers by usingsome CSS tricks.3The recipe for Responsive Web DesignThere are three primary techniques for building aresponsively designed website:We can apply different CSS rulesbased on things like browser windowwidth, aspect ratio, and orientation.RWD uses percentages insteadof pixels as units for columnsand other layout elements.Fluid images and media keep within thebounds of their parent elements, scalingproportionally with the rest of the layout.

you are here 4 11getting startedstyles.cssindex.htmlCSS media queriesdetermine which ofthe CSS to apply towhich environments.We deliver the sameHTML and CSS to alldevices and browsers.A multicolumn, biglayout when there’splenty of roomSomewhatsimpler layoutas the windowwidth decreasesStreamlined,single‑column layoutfor narrower displays.An example of a responsively designed siteThis is just one example ofa responsive design approach.

12 Chapter 1selective cssDifferent CSS in different placesIf you’ve been doing web development for some time (and areCSS-savvy), you might be friends with CSS media types already.We can use @media rules to apply CSS selectively.CSS media type declarations inside of a CSS file look like this:@media screen { /* CSS Rules for screens! */ }Another way to use media types to apply CSS selectively is fromwithin a <link> in your HTML document.The rules between thebraces will only apply whenthe content is rendered ona screen.“screen” is a media type.<link rel="stylesheet" type="text/css" href="print.css" media="print" />“print” is another media type.You have certain features—your age, your height—and so do mediatypes. And just like The Splendid Walrus might want to establish a rulethat requires the minimum age of patrons to be 21 before they applyalcohol, we might want to define certain CSS that we only apply tobrowser window widths within a certain range.We’re in luck! width, along with color and orientation, is oneof the media features defined in CSS3 for all common media types.So, again, media types have media features.Media features on their own don’t get us very far. We need a way to askthe browser about the states of the ones we care about and, well, dosomething about it. That’s where CSS3 media queries come in.Media types, meet media featuresReferencing the print media type like this is a common approach tocreating print stylesheets—that is, CSS styles that only get applied whenthe content is printed.The rules in this external stylesheet will only be applied ifthe content is rendered on a print device (that is, a printer).screenwidthaspect-ratioorientation“screen” is a usefulmedia type.A few of the “screen”media type’s media features.P.S. There are more. But theseare the most useful to us.heightMedia TypesUp CloseCommon (and useful) media typesinclude screen, print, and all.There are other, less common mediatypes like aural, braille, and tv.Curious? If you’re the kind ofperson who reads technical specs forfun or to satisfy curiosity, you cansee all of the media types definedin CSS2 on the W3C’s site atwww.w3.org/TR/CSS2/media.html.

you are here 4 13getting startedCSS3 media queries arelogical expressions thatevaluate the currentvalues of media featuresin the user’s browser.If the media queryexpression evaluates asTRUE, the containedCSS is applied.@media screen and (min-width:480px) { /* CSS Rules */ }“screen” media type, we meet again!“min-” is a media query prefix. Ratherintuitively, it means we want to queryabout a minimum width.“width” is a media featurewe want to evaluate on the“screen” media type.CSS media queriesThis means: are we presently rendering content on a screen,AND is the window currently at least 480 pixels wide?Yes? OK! Apply these CSS rules.Another example:Unsurprisingly, there isalso a “max-” prefix.@media all and (orientation: landscape) {}Translating CSS media queries: You try it! Match the media query and its meaning.@media print and (monochrome) {}@media screen and (color) { }<link rel="stylesheet" type="text/css"href="my.css" media="screen and (color)" />Apply these styles to allmedia types when inlandscape orientation.Apply these styles toblack‑and‑white printers.Apply these rules tocolor screens.Apply the rules in this externalstylesheet to color screens.@media print, screen and (monochrome) { }Logical “or” is represented by acomma. Yep, it’s a bit confusing.“monochrome” is a media featureof the “screen” media type. Itis either TRUE or FALSE.Is this being rendered on a printer OR is it being renderedon a screen that is monochrome (black and white)?Yes? Use these styles!These CSS rules will only getapplied if the media queryevaluates to TRUE.

14 Chapter 1@media all and (orientation: landscape) {}@media print and (monochrome) {}@media screen and (color) { }<link rel="stylesheet" type="text/css"href="my.css" media="screen and (color)" />how different?Were you able to decipher the media queries?Apply these styles to allmedia types when inlandscape orientation.Apply these styles toblack‑and‑white printers.Apply these rules tocolor screens.Apply the rules in this externalstylesheet to color screens.OK. Now I can understand mediaqueries and maybe even write my own.But what am I doing here? How do I writethe CSS for mobile devices?We’ll only writedifferent CSSfor those layoutelements that needto be differentfor mobile.CSS: How different is different?We have a tool that lets us apply different CSS to differentsituations. But now what?Don’t panic. We do need to write some mobile-friendly CSS, butwe’re not going to have to start from scratch. Nor are we going tohave to have totally different CSS for our mobile devices—we canshare a lot of what’s already there.To generate our mobile-friendly layout, we’ll:Check out the current layout of splendidwalrus.com andanalyze its structure.Identify layout pieces that need to change to work better onmobile browsers.Generate mobile-adapted CSS for those identified elements.Organize our CSS and selectively apply the mobile anddesktop CSS using media queries.Media type of “all,” you ask? Yep. This is whatwe use if we want to look at the same mediafeature across all media types

you are here 4 15getting started<div class="navigation">...</div><div class="header">...</div><h1>...</h1><div id="visit" class="column">...</div><div id="points" class="column">...</div><div id="main" class="column">...</div><div class="footer">...</div>div.navigationdiv.header<h1>div#visitdiv#maindiv#pointsdiv.footerThe current structure of the Splendid Walrus siteTake a peek at the index.html file for the Splendid Walrus site in the chapter1directory. If you use your imagination and strip out the content, you cansee a basic HTML page structure like this:The current, desktop-oriented CSS lays out the page like this:The three maincontent columns Putting the righthandcolumn before the centercolumn in the markup isan old trick of the webdesign trade: it makes iteasier to handle layoutsusing CSS floats.Let’s go look at the CSS thatdefines the layout and figure outwhat needs to change to adapt itto be mobile-sized.

16 Chapter 1now showing css analysis/* Structure */body, .header, .navigation, .footer {width: 960px;}.header, .navigation, .footer {clear: both;}.column {margin: 10px 10px 0 0;}.navigation {min-height: 25px;}.navigation ul li {width: 320px; /* 960/3 */}.header {background:url(images/w.png) no-repeat;height: 200px;}#visit {width: 240px;float: left;}#points {width: 240px;float: right;}#main {margin: 10px 260px 0 250px;width: 460px;}Open the styles.css file for theSplendid Walrus site.There’s a bunch of CSS at the topof the file, but we don’t have toworry about that. We can sharethe same colors, typography, andstyling across both desktop andmobile variants.What we care about is thestructural CSS, near thebottom of the file.The body is 960 pixelswide. The header, footer,and navigation elementsspan the full width.Because these elementsspan the full width, makesure nothing is floatingnext to them.Each column (visit, right, andpoints) has a 10px margin attop and a 10px margin atright (a.k.a. a “gutter”).The navigation links are in a <ul>.Lay it out horizontally andmake each <li> span 1/3 of thepage width.Each <li> gets 1/3 ofthe page width becausethere are three links.The header has a backgroundimage, so it needs to be200px high to show all ofthe image.The left and rightcolumns are each 240pixels wide and float.The main column usesmargins to positionitself—it doesn’t float.clear:both just ensuresthat these elementsstart on a new “line”—that is, that nothingis next to them.It seems like the maincolumn should be 480 pixelswide (960 minus the two240-pixel left and rightcolumns). But it’s 460 pixelswide to account for the two10-pixel gutters betweenthe columns.Analyze the current CSS We’re only interested in the structuralpart of the CSS file.Its left margin of 260pxand right margin of 250pxposition it in the window.

you are here 4 17getting started We’re not going to have torewrite all of the CSS.We just need to adapt some ofthe structural layout elements.The rest—typography, colors, and whatnot—canstay basically unchanged.div.navigationdiv.headerdiv.header<h1><h1>div#visitdiv#visitdiv#maindiv#maindiv#pointsdiv#pointsdiv.footerdiv.footerWhat needs to change?Reduce three columns to a single column.In the original, desktop layout, three columns felt“crunched” on a mobile screen.2Make the page and its structural elementsfit within 320 pixels.As Frank mentioned on page 9, 320 pixels is acommon screen resolution for mobile devices.1For mobile, we need to go from this……to thisdiv.navigation960 pixels320 pixelsA single-column layoutsized for a 320-pixelbrowser widthA three-column layout designedto fit in 960 pixels

18 Chapter 1mobile css adaptationsIdentify the CSS that needs to changeWe need to change the widthof the page and the header,navigation, and footer elements.We need to adapt thenavigation link widths tofit the smaller screen.We need to remove thefloats and change thewidth of the visit andpoints columns.The highlighted code will need to beadapted for our mobile version.We don’t need this rule inour mobile version (but itdoesn’t hurt anything).This is actually fine: wewant the navigation linksto be at least this tall.styles.cssBecause nothing is floatedin our mobile layout, clearsaren’t necessary./* Structure */body, .header, .navigation, .footer {width: 960px;}.header, .navigation, .footer {clear: both;}.column {margin: 10px 10px 0 0;}.navigation {min-height: 25px;}.navigation ul li {width: 320px; /* 960/3 */}.header {background:url(images/w.png) no-repeat;height: 200px;}#visit {width: 240px;float: left;}#points {width: 240px;float: right;}#main {margin: 10px 260px 0 250px;width: 460px;}The “columns” on the mobilelayout will lay out vertically, nothorizontally. Let’s add some spacebetween columns (vertically) butget rid of the gutter.We don’t need the margins forpositioning anymore (#mainwill span the full width), andwe need to change the width.We’ll use the same backgroundimage for the header, so thiscan stay the same.It might seem like we would needto adjust the 200px height here,but we don’t because we’ll use thesame image.

you are here 4 19getting startedbody, .header, .footer, .navigation {}.column {border-bottom: 1px dashed #7b96bc;}.navigation ul li {}#visit, #points, #main {}width: 320px;width: 106.6667px;width:320px;Get rid of the CSS rules we don’t need.2Change the width of the highlighted CSS rules.1Factor out the common CSS rules.3Steps to creating the mobile-specific CSSmargin: 10px 0;This border is to add somevisual separation to thecolumns (now vertical) asthey lay out on the page.We’ll do this in just a minute.Mobile CSS MagnetsUse the magnets to build the mobile-specific CSS.

20 Chapter 1mobile css in four rulesTa-da! Mobile-specific CSSWait a minute. Some ofthe CSS rules disappeared.Where’d they go?They didn’t disappear……they just don’t need to be contained inside ourmobile-specific CSS. Why? Because the CSSrules in question are going to be the same forboth layouts (desktop and mobile).We’ll put the shared CSS outside the mediaqueries so that we don’t have to have the sameCSS rules in two places. Let’s do that now.And we’re done! These four CSS rules are all themobile-specific layout we’ll need. Now we need to besure they’ll get used by mobile devices.And how will we do that? Our old friend Mr. MediaQuery to the rescue! We’ll generate a media queryshortly to apply this CSS to devices with a browserwindow of 480 pixels wide or narrower.Why 480 pixels? That’sthe resolution for the“long side”(a.k.a. “landscapeorientation”) of manypopular smartphones.body, .header, .footer, .navigation {}.column {border-bottom: 1px dashed #7b96bc;}.navigation ul li {}#visit, #points, #main {}Mobile CSS Magnets Solutionwidth: 320px;width: 106.6667px;width:320px;margin: 10px 0;

you are here 4 21getting started.header, .footer, .navigation {clear: both;}.header {background:url(images/w.png) no-repeat;height: 200px;}.navigation {min-height: 25px;}The rest of our structural CSSOur desktop structural CSSWe still need to have good CSS for desktop browsers!After we remove the common structural CSSrules, here’s what we end up with for thedesktop‑specific CSS structure.We’ll need to use a media query so that onlyviewports 481 pixels and wider apply this CSS.Check out the current layout ofsplendidwalrus.com and analyze its structure.Identify layout pieces that need to changeto work better on mobile browsers.Generate mobile-adapted CSS for thoseidentified elements.Organize our CSS and selectivelyapply the mobile and desktop CSSusing media queries.What’s next?Let’s check in on our to-do list for creatingstructural CSS that works for both desktopand mobile browsers:Shared structural CSSSee? Told you! None of the CSS actuallydisappeared. Here’s the shared structuralCSS that we identified on page 18, factoredout and ready to go.body, .header, .footer, .navigation {width: 960px;}.column {margin: 10px 10px 0 0;}.navigation ul li {width: 320px; /* 960/3 */}#visit {width: 240px;float: left;}#points {width: 240px;float: right;}#main {margin: 10px 260px 0 250px;}

22 Chapter 1one last thing…Color, typography, and basic layoutCommon structural CSS (page 21)Put it togetherchapter1index.htmlstyles.csspoint.pngsample.jpgimages}@media screen and (max-width:480px) {}@media screen and (min-width:481px) {You’re going to need a viewport <meta> tag in the index.html file. These tags helptell the browser how “zoomed in” to render the content. We’ll be taking a look at theseguys a bit later on, but for now, just take our word for it: you’ll want one of these.<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>The Splendid Walrus: Public House and Spirits</title>One last thing…Here’s how we’ll put together the updated version of styles.css.w.pngstyles.cssindex.htmlWe didn’t makeany changes to thispart of the CSS.Desktop structural CSS (page 21)Mobile structural CSS (page 20)

you are here 4 23getting startedTest DriveOnce you’ve made these changes, load the index.html file inyour desktop browser and resize the window to less than 481pixels wide to see the mobile-friendly layout.Watch out, mobile web!Here we come!The page still looks the samein desktop browsers……until the browser windowwidth is less than 481pixels. Then you can see themobile‑optimized layout!Edit the index.html file.Drop in the viewport <meta> tag from page 22.1Open the styles.css file.You’ll be replacing the structural CSS rules near the bottomof the file. Remove the existing rules for structural elements.2Add the common rules.Add the shared structural CSS rules from page 21.3Add the desktop- and mobile-specific CSS.Add the desktop rules (page 21) and mobile rules (page 20).4Wrap the desktop- and mobile-specific CSS in media queries.Add the media queries (page 22).5Do this!

24 Chapter 1neat proportionsFrank: This is really frustrating. I thought the mobile CSS we created would fix this.Jill: Your CSS makes the layout fit on a smaller screen, but it’s still pretty rigid. Imean, look what happens if I put my iPhone in landscape orientation.Frank: Ugh. The layout is still 320 pixels wide…but on a 480-pixel screen. Am Igoing to have to write different CSS for every single different possible viewport size?!Jill: See, this is where Responsive Web Design practices could help us. Rightnow, you’re delivering a rigidly sized structure to all browsers whose currentwindow is 480 pixels wide or smaller, no matter what the actual specific browserwindow width is. That’s not very flexible. I mean, not all mobile devices have a320‑pixel‑wide browser window.Responsive design helps us adapt our layout to different situations. Instead ofdictating the exact size of elements—that is, using pixel-based measurements in ourstructural CSS like we are now—we can use a proportional layout, which adaptsmuch better for different users.Frank: Proportional? Is that like ems and percentages and stuff in CSS?Jill: Yeah, sort of. We can use percentages instead of pixels when we code up ourlayout. That way, content stretches and shrinks to fill available space—kind of likewater filling in gaps. That’s why this kind of layout is often called a fluid layout.And, by the way, this will help us fix that wayward image as well.Frank: So, all of that work with media queries was wasted time.Jill: Not at all! Media queries are a big part of what makes responsive design work.The next step to move towarda responsive design—one thatwill work more comfortablyon more devices andbrowsers—is to convert ourfixed, pixel‑based layout to aproportional, fluid-grid layout.The YouTube video is stillbroken on this iPhone.This photo is wider than320 pixels, breaking outof the layout.Frank JillThis is a good start, but there’s a bit of a problem.If I scroll down on my iPhone, you’ll see that the photo istoo big for the page. It breaks the layout.

you are here 4 25getting startedTonight’s talk: Fixed Grid meets Fluid GridFluid Grid:Hey, Fixed Grid. I know you’ve been around a whileand seen a lot of action. But, no offense, there are afew problems with your philosophy.I mean…you’re kind of a relic. Your rigidly defineddimensions make you seem brittle and inflexible.That is, you’re not responsive.You don’t respond to changes in your user’senvironment. You stay the same, always.At the cost of your users. Look at what happens whenwe look at you in different browser window sizes.Stuff is cut off, or there’s a bunch of blank space.Maybe that worked in your day, but these days thereare simply too many kinds of browsers and devices. Ifyou’re willing to let go of pixel-perfect layouts—hey,they’re a holdover from the old print days of yore,anyway—and let your content flow, like water, intothe available space in the browser window, you canreally adapt for different situations.Fixed Grid:What’s that? What’s a young upstart like you knowabout philosophy?Responsive?What’s wrong with tradition? I’m staying true towhat the designer intended! 960 pixels wide, with240-pixel columns on the left and right.If users don’t like it, they should straighten up, get ahaircut, and use a standard browser.Well, pipsqueak, show me what you’ve got.

26 Chapter 1oh, for a pixel-perfect worldWhat’s wrong with a fixed‑widthlayout, anyway?If the whole world were full of browsers whose windows werealways the same size, it would be a safe, pretty world in whichdesigners could have pixel-perfect control over what a websitelooked like.Unfortunately, the Web has never been this controllable.Sometimes we try to design around “standard” window widthslike 640, 960, or 1,024 pixels. But that is mostly an illusion:there is no standard browser window size. And that’s beforeyou even start thinking about mobile devices.Sure, the fixed-grid layout for The Splendid Walrus looks fineat 960 pixels wide.In a wider window, the entire layout is still only 960 pixels wide,leaving a blank gap of wasted space at the right side of thescreen. Hmmm.Left and rightcolumns are 240pixels wide…always.The site viewed in a700-pixel windowThe site viewed in a1,200-pixel windowThe entire width isconstrained to 960 pixels.The site in a960-pixel windowThe layout doesn’t adapt to other window sizesBut in a narrower window, look what happens. The columnwidths stay the same, which means content gets cut off and theuser has to scroll horizontally. Ick.The right columnisn’t visiblewithout scrolling.

you are here 4 27getting startedFluid-grid layouts use proportional units (percentages)instead of pixels for widths. We can stay true to thedesigner’s vision of having the left and right columnsspan one-quarter of the page width by defining theirwidths as 25%, instead of 240 pixels.How is fluid better?We’re about to convert both thedesktop and mobile CSS from fixedto fluid grids. Can you think of someways this might help solve some ofthe problems Jill found with the siteon mobile browsers?The layout adapts as the window changes sizeIn different window widths, the content flows, like water, to fillthe available spaces in the layout. The left and right columnsalways take up 25% of the window, and content is not clippedin narrower windows, nor is there any empty space in widerwindows.A fluid version of the layoutat 960 pixels. It doesn’tlook very different rightnow, does it?A fluid versionof the layoutat 700 pixelsA fluid versionof the layoutat 1,200 pixelsLeft and right columns areproportional: 25% of thewindow’s width.

28 Chapter 1go with the flowGo fluidThe fluid formulaTo convert a pixel-based layout to a proportional, fluid one,use this formula:TargetContextResultThe size of theelement, in pixelsThe size ofthe containing“context,” in pixelsOur new, proportional CSSrule, as a percentage.960 pixels240pixels240pixels460pixels960 pixelsA closer lookLet’s take a look at what this means, using the Splendid Walrussite’s desktop layout.We start with a context on which to base our proportions. Inthis case, our reference design is 960 pixels wide. We wantour resulting, fluid layout to have the same proportions as thecurrent design does. So we’ll base our calculations on that960-pixel baseline.The navigation, header, and footer all span the full width of thepage. That makes the fluid formula very easy to apply indeed!960 pixels960 pixels100%Convert the pixel-based layout to a fluid one, usingproportional widths instead of fixed.Make the default body font size 100% so our page’s fontscan scale up and down proportionally.Fix the broken YouTube video.Fix the image that is too wide.There are a number of things we’ll need to do to address the problemsJill found and move toward a responsive design.If we’re going to make ourlayout fluid, we’ll wantto be sure our fonts areflexible, too.

you are here 4 29getting startedThe left and right columns are both supposed to be 240 pixels wide, relativeto the 960-pixel containing context. To get a proportional measurement, usethe fluid formula again:240 pixels960 pixels25%The columns span a quarterof the page width. So thisfeels pretty intuitive, right?The main, center column is a bit different. It doesn’t float. Instead, marginsare used to position the element. But that’s just fine. We can still use thefluid formula to convert the pixel-based margin sizes to percentages:260 pixels960 pixels27.0833333%#main {margin: 10px 260px 0 250px;}250 pixels960 pixels26.0416667%Our currentCSS rule#main {margin: 10px 27.0833333% 0 26.0416667%;}Finish converting the structural desktop CSS rulesin styles.css to proportional widths. You’ll want toedit each of the six CSS rules within the mediaquery for window widths of 481 pixels or greater.Continue your fluid conversionOur updated CSS ruleQ:Why are there so many decimal places inthese numbers? Do we really need all that?A:We’re demonstrating the purist fluid-gridapproach here, which builds CSS units exactly as thenumbers come off the calculator.Realistically, browsers round these very long numbers.And—a bit concerningly—they round them in slightlydifferent ways.So, it’s up to you. You might consider rounding thenumbers down to one or two digits past the decimalpoint. Another approach is to leave some play inyour layout—a percentage or two not accounted forat all. Your grid won’t be as precise, but you avoidsome of the pitfalls of rounding issues and make yourarithmetic less rigorous.Q:Wait. Why is the top margin on .main still10px? Isn’t that…wrong?A:Vertical layout is a totally different beast thanhorizontal. We can’t use the 960px context becausethe height of the design is never really a knownquantity, and vertical layout using percentages is atricky affair, supported in different (and sometimespoor) ways in different browsers. Using pixels like thisfor vertical margins is OK.

30 Chapter 1fluid desktop css@media screen and (min-width: 481px) {body, .header, .footer, .navigation {width: 100%;}.column {margin: 10px 1.04166667% 0 0;}.navigation ul li {width: 33.333333%;}#visit {width: 25%;float: left;}#points {width: 25%;float: right;}#main {margin: 10px 27.0833333% 0 26.0416667%;}}Let’s take a look at that fluid desktop CSS.Not so fast!Sometimes the “context” can change…So, to convert to a proportional width,we divide the pixel width of an elementby the overall layout width, right?960960100%32096033.333333…%24096025%109601.04166667%We figured thisout on page 29.

you are here 4 31getting startedContext switchingMike has a new monthly special that he wants to post on theSplendid Walrus site. Instead of text and a single image in themain column, as it is now, he wants to display the beer labelsof two very special, limited-edition stouts—floated next to eachother. In our pixel-based reference design, this looks like:960 pixels240pixels240pixels460pixels960 pixels220pixels#main img.label {width: 220px;margin: 5px;float: left;}These <img> tags havea class of “label.”It’s tempting to think that the formula for converting theseimage widths to be fluid would be:Does this formula look right to you?Mike’s pixel-basedCSS widths220 pixels960 pixels22.916667%Hey. I’m going to start offeringsome new beer specials, and I want tobe able to feature those on the site—can you adjust the design?220pixels

32 Chapter 122.916667%220 pixels960 pixelswatch your contextsWhat’s wrong with this picture?240pixels240pixels960 pixelsThe context changed!If we set the images to span 22.9166667%, they will span 22.916667%all right—22.916667% of their containing element.The containing element of these images isn’t body (100% width,or 960 pixels in our reference design), it’s div#main, which has awidth of about 460 pixels (47.91667% of 960 pixels in proportionalparlance). So we have just told the images to span a little less than 23%of 460 pixels—too small!Instead, we set the context in our formula to bethe reference width of the containing element,which in this case is 460 pixels.220 pixels460 pixels47.826087%240pixels240pixels460pixels960 pixelsNew context: widthof div#main, thecontaining element.Do this!div.maindiv.mainSetting image widths as percentages?Turns out, this is on the right track tofixing one of our other problems with themobile layout. Remember that photo thatis too big and messes up the page width?We can use a variant of what we’re doinghere to fix that!This is what you’ll get if you set the width ofimg.label to be 22.916667%. Uh oh.The images are now justunder 50% of the width ofdiv#main—that’s more like it.

you are here 4 33getting startedFluid imagesThere’s a lot of power in this little gem of CSS:A sad farewell…Most great things don’t come without a bit of sacrifice. Touse the fluid technique on images and media, we have toforego our old friends: the width and height attributes.The CSS rule above will override a width attribute but willnot affect a height attribute. That means that, if we useheight and width attributes, we could end up with animage that scales its width but not its height. End result: asad‑looking squished image in the wrong aspect ratio.OK, there are some workarounds for this, and removingthese attributes is not awesome. But we’re going to jettisonthe height and width attributes for now.With this quick addition, we help to prevent any image orembedded media object from being wider than its containingelement. Because they are limited to 100% width—100% of thewidth of their containing element—images and media obey theirparents and don’t try to break outside of the boundaries. Nice!Fluid imagesand media, likefluid grids, scaleproportionallywithin the layout.img, object {max-width: 100%;}Ka-pow!And media! Fluid images are nota get-out-of-jail-freetechnique.Just because an imagescales down on anarrower screen doesn’t mean that itisn’t still, at heart, a large image. An800 KB JPEG is still an 800 KB JPEG,even if it’s crammed down into a120-pixel-wide column.In Chapter 2, we’ll talk abouttechniques to deliver different imagesto different devices and browsers,saving on otherwise wasted bandwidthand processor power (required to dothe actual scaling).Still, it’s a powerful technique, and onedefinitely worth having in your arsenal.

34 Chapter 1fluid mobile css@media screen and (max-width: 480px) {body, .header, .footer, .navigation{width: 320px;}.column {margin: 1em 0;border-bottom: 1px dashed #7b96bc;}.navigation ul li {width: 106.6667px;}#visit, #points, #main {width: 320px;}Are we there yet?We’re making progress toward a responsive design that adapts to moredevices. But we have a few things left to track down:We still need to convertthe mobile CSS (we did thedesktop CSS already).We did this using thefluid images technique.Spiff up the mobile CSSThere are just a few mobile-specific CSS rules we need to convert to be fluid.current (fixed) updated (fluid)Convert the pixel-based layout to a fluid one, usingproportional widths instead of fixed.Make the default body font size 100% so our page’s fontscan scale up and down proportionally.Fix the broken YouTube video.Fix the image that is too wide.@media screen and (max-width: 480px) {body, .header, .footer, .navigation {width: 100%;}.column {margin: 1em 0;border-bottom: 1px dashed #7b96bc;}.navigation ul li {width: 33.333333%;}#visit, #points, #main {width: 100%;}Hey! Now that we’reproportional here, these tworules are exactly the same asthe desktop ones (see page 30).Might as well put them in thecommon structural CSS insteadof having them in two places.

you are here 4 35getting startedLet’s take care of a few remaining details to make ourupdated version of the Splendid Walrus site totally responsive.Details, detailsFont Sizes Up CloseSet up flexible fontsSo far, our layout is adaptive, but the fonts are stodgyand rigid. Just as percentages are the fluid ying to pixels’fixed‑width yang, ems are proportional font-size units. Mikeused ems in his original CSS, so we’ll just add the followingrule to the <body> element to be extra thorough:1em = 100% ≈ 12pt ≈ 16pxbody {background: #f9f3e9;color: #594846;font: 100% "Adobe Caslon Pro","Georgia", "Times New Roman", serif;}With this edit to the CSS rule for the <body>element, we’re setting the baseline font sizefor the page to be 100%. But what does 100%mean? Here’s a quick-and-dirty (and approximate)rule of thumb:But recall that we aim to adapt our content tothe user’s environment. If a user has changedthe browser’s font size, 100% is going torepresent a different absolute size.Also keep in mind that fonts on mobile devicesare a complex thing, and that in some cases,1em might equate to a (significantly) differentpoint or pixel size.Lots of mobile devices don’t support Adobe Flash. The markupfor the embedded YouTube is out of date: YouTube now providesan iframe-based embedding snippet that will work just fine on aniPhone (and other modern devices). We need to edit the index.htmlfile and replace the current embed code.<iframe src="http://www.youtube.com/embed/O-jOEAufDQ4" style="max-width:100%"></iframe>Fix the YouTube video<object width="230" height="179"type="application/x-shockwave-flash"data="http://www.youtube.com/v/O-jOEAufDQ4?fs=1&hl=en_US&rel=0"><embedsrc=... /></object>Instead of this(Flash-only) versionUse this!This baseline font-size reset is the CSS equivalent of dotting ouri’s and crossing our t’s: it’s setting an explicit reference againstwhich the other font sizes in the CSS are defined. Not a big deal;just keeping things tidy!YouTube’s newer embed code determines theappropriate video format to use dependingon the browser. It can supply HTML5 videoinstead of Flash for devices—like Mike’siPhone—that support it. We simply grabbedthis newer snippet from the “embed” section ofthis video’s YouTube page.This technique isn’t limited toFlash! Other media can be madefluid this way, as well.

36 Chapter 1flex your rwd musclesEdit the styles.css fileEdit the index.html fileEdit the CSS rules within the media query for lower-resolution devices.Convert these widths to be proportional (page 34).1Identify the structural CSS rules that are common between both mobileand desktop variants now that they are proportional (page 34). Removethese rules from the media-query-specific sections and put them in thecommon structural section of the CSS file.2Add the CSS from page 33 to implement fluid images (and media).3Update the CSS rules for the <body> element to add a proportionalfont size baseline (page 35).4Replace the Flash-only embedded YouTube with the smarter, iframevariant on page 35.5OK! Let’s get all of these changes in place to give The Splendid Walrus a mobile-friendly sitethat uses Responsive Web Design techniques.Let ’er rip!Save your changes and load the index.html page in any web browser.6Try resizing your browserwindow and watching thecontent adapt.Remember to be responsibleJust like fluid image resizing doesn’t actually reduce the file size ofimages, neither does fluid media change the size of the actual media.It’s up to you to determine whether using video (or other multimedia) onmobile devices is worth the file size and processor oomph required forplayback.

you are here 4 37getting startedQ:OK. I’ve seen ems as units in CSS,but I don’t quite get it. What’s the point?A:1em is—unspectacularly—arepresentation of the current font size, in thecurrent context. That doesn’t sound terriblyexciting. But the magic comes when youdefine your font sizes in relation to this. So,if you set your <h1> element to display at1.5em, it will be 150% of the baseline fontsize of its containing element.You can actually use the same fluid formulato generate fluid, em-based font sizes fromfixed font sizes. To create a fluid versionof an 18-point font in a context where thebaseline font is 16 points, you can do18/16 = 1.125em (target/context =result).Q:Wait. Why is it 1.125em instead of112.5%?A:Mostly tradition and clarity, but emsdo tend to work a smidge better acrossplatforms. It is common web practice todefine block element widths in percentagesand font sizes in ems. With some reallyteeny exceptions, percentages and ems areinterchangeable for font sizes. About thoseteeny exceptions: we set the <body>element font-size to 100% to accountfor them.Q:Is there any other use for CSSmedia queries beyond the mobile web?A:Definitely. An example: just as mobiledevices often represent the lower end ofthe screen resolution spectrum, some of thenewer widescreen monitors and televisionshave very high resolution. Sometimes itmakes sense to adapt a layout—say, to addmore columns—for these window widths.Q:What actually caused the weirdgap at the right side of the screen in theexercise way back on page 7?A:This one’s iPhone-specific. Whendisplaying a web page “zoomed out” (i.e.,when it’s acting like a desktop browser),mobile Safari on the iPhone assumes aviewport width of 980 pixels. Before mobileoptimization, the Splendid Walrus layout was960 pixels wide, which leaves an awkward,20-pixel gap on the right.Q:What’s the deal with the “3” in“CSS3 media queries”?A:There are several versions of CSS. It’stempting to say that there are three, but thesituation is a bit more cloudy. CSS2, whichwas published as a “recommendation” wayback in 1998, is the flavor with which mostweb developers have had a longstandingfamiliarity. Media types were introduced withCSS2.CSS3 is a different beast than earlierversions of CSS, in that it is modularized—there are something like 40 differentmodules, instead of a single big, complexspec. Fortunately, the Media Queries moduleis one of the more complete and stable.Q:If CSS3 isn’t all the way “done,” dobrowsers support it?A:Like we said, it’s a jungle out there.Adoption for some of the more completepieces of CSS3 is becoming widespread, but,as we’ll see a bit later, is far from somethingthat can be assumed in the mobile space.Q:Why does the right column showup before the main column in the mobilelayout?A:The div#points content comesbefore the div#main content in theHTML markup. In the desktop layout, floatsare used to position the #points content,such that it appears to the right of the#main content. The mobile layout doesn’tuse floats, and as such, the content isdisplayed in the order it occurs in the HTML.Q:You skipped the @import syntaxfor media types. And can I use @importsyntax with media queries?A:@import syntax doesn’t get a lot oflove. So little, in fact, that we didn’t evenmention it. But, yes, it absolutely works forincluding stylesheets based on media typesand for media queries, too.

38 Chapter 1exercise solutionLet’s walk through the resulting CSS file and look at our changes..header, .footer {clear: both;}.header {background:url(images/w.png)no-repeat;height: 200px;}.navigation {min-height: 25px;}img, object {max-width: 100%;}.navigation ul li {width: 33.333%;}.header, .footer, .navigation {width: 100%;}body {background: #f9f3e9;color: #594846;font: 100% "Adobe Caslon Pro", Georgia,"Times New Roman", serif;}This is right near thetop of the CSS file.…shared typography, colors,borders, etc. (shared,nonstructural CSS)…Shared structural CSSTo save space, we won’t showthese rules here.

you are here 4 39getting started@media screen and (min-width:481px) {.column {margin: 10px 1.04166667% 0 0;}#visit {width: 25%;float: left;}#points {width: 25%;float: right;}#main {margin: 10px 27.0833333% 0 26.0416667%;}}@media screen and (max-width:480px) {.column {margin: 1em 0;border-bottom: 1px dashed#7b96bc;}#visit, #points, #main {width: 100%;}}And now, the resolution-specific structural CSS.Structural CSS for largerbrowser windows (e.g., desktop)Structural CSS for smallerbrowser windows (e.g.,mobile devices)

40 Chapter 1the walrus is splendidly responsiveThat’s a responsive site!TODOScreen shots at various window sizesYou guys made bigimprovements, andhardly touched theHTML at all!The photo fits correctlyon this Android Nexus Sphone, thanks to the fluidimages technique.Looking good on the MotorolaBackflip (Android)We’re using the same header background image inour mobile-optimized CSS, even though it’s gettingseriously cut off. Can you think of how to use RWDtechniques to use a different image (to save onbandwidth and improve performance)?

you are here 4 41getting started The mobile web is not unlike the Wild West—it’s fullof surprises and adventure. The mobile web browserlandscape is diverse, and, sometimes, crazy-making. Just because we can use the same layout on a mobiledevice as in a “traditional” browser doesn’t mean wenecessarily should. Responsive Web Design (RWD) is a collection ofapproaches to make our web content adapt to the user,not the other way around (forcing the user to look atrigidly formatted pages). RWD is a combination of CSS3 media queries, fluid-grid layouts, and fluid images. It’s also a way ofthinking about layout and content. CSS3 media queries let us apply CSS selectively todifferent user environments based on the current valueof relevant media features. Media types (e.g., screen, print, projection)have media features (width, color,monochrome, orientation). It’s these mediafeatures we evaluate in our media queries. A CSS media query is a logical expression. When itevaluates to TRUE, the enclosed CSS rules are applied. A fluid layout is one that uses proportional widths insteadof fixed widths such that the content of the page scalesand flows naturally across a range of window widths. Fluid images are a CSS technique that keeps outsizedimages (or media) from “breaking out” of their parentelements when the parent element width is smaller thanthat of the image (or media). The images and mediascale down as the parent element scales down. Using a simple font-size reset on the <body>element and defining font sizes in ems or percentageskeeps our type fluid.=Letting go of pixel-perfectlayouts and instead designing ourcontent to adapt to different(browser or device) environmentsResponsive design is also a state of mindFluid-grid layoutsCSS media queriesFluid images/mediaA state of mind+++ResponsiveWeb Design!

this is a new chapter 43responsible responsiveness2Mobile-firstResponsive Web DesignThat’s a beautiful mobile site. But beauty is only skin deep.Under the covers, it’s a different thing entirely. It may look like a mobile site, but it’sstill a desktop site in mobile clothing. If we want this site to be greased lightning onmobile, we need to start with mobile first. We’ll begin by dissecting the current siteto find the desktop bones hiding in its mobile closet. We’ll clean house and startfresh with progressive enhancement, building from the basic content all the wayto a desktop view. When we’re done, you’ll have a page that is optimized regardlessof the screen size.Darling, I don’t care if you are cold.If you knew how much optimization ithad taken to look this good, you’d weara bikini on the beach in winter, too.

44 Chapter 2not-so-splendid walrusJust when you thought it was time to celebrate…Mike called in a panic. As a reformed web developer, he normallyresists the urge to tinker with his site, but he fell off the wagonand decided to make a few tweaks. He thinks he broke theSplendid Walrus site and needs help.Mike added pictures for all of his new brews to the On Tap Nowpage. He didn’t modify the code other than to add pictures, butnow the page is loading very slowly on mobile phones. It’s so slowthat customers have started complaining.Check out the On Tap Now page at http://hf-mw.com/ch2/chapter2/ontap.html.Sorry, guys. Not surewhat I did, but theSplendid Walrus site isnow dog slow.

you are here 4 45responsible responsivenessIs there really a problem? How do we know?Jim: Poor Mike. He knows just enough to get in trouble.Frank: Exactly. But in this case, I’m not so sure he didanything wrong. Mobile phones have slower networks andprocessors. Of course the page loads slowly.Jim: That makes sense, but it still seems slower thanexpected. Mike says that even on a WiFi network, it isunbearable. And he has a brand-new smartphone.Joe: Hmm…it sounds like we should at least look into it tosee if there is something obvious slowing it down.Frank: How will we know what’s going on? It could justbe the network or any number of things between thephone and the server.Joe: I’ve been using a plug-in for Firefox that gives you agrade on your page performance. We could use somethinglike that.Jim: That sounds awesome.Frank: Can we install plug-ins on mobile browsers?Joe: Ugh, you’re right. There’s no way to install plug-inson my phone. Some of my favorite developer tools arebrowser plug-ins. Without them, how do we know what’sreally going on?Jim: The other day, Kim was showing me how you canwatch every request that is made on our WiFi networkthrough the network router’s log page. Could we look atsomething like that and watch what the phone does?Frank: That’s a great idea. But instead, let’s use a proxyserver. It is very similar to what Kim showed you, but it isdesigned for exactly this purpose. If we hook up the phoneto a proxy server, we can see all of the web requests thatthe phone makes.The YSlow plug-in gives you a grade forperformance based on how a web page isconstructed. Get YSlow at this URL:yhoo.it/yslow. Performance is somethingevery web developer—especially mobile webdevelopers—should care about.Speaking of which, we’re going to spend alittle time looking at performance. Don’tworry. We’ll get to mobile-first ResponsiveWeb Design soon, and we promise all of thisperformance stuff is related.JimFrankJoe

46 Chapter 2wait, use a proxyWaitress, will you take my order please?A famous athlete is stricken with food poisoning the night beforea big match against his archrival. The police suspect foul playand have assigned a detective. The detective quickly startsquestioning the best witness: the waitress.The waitress took the food order, wrote down the request,and handed it to the cook. After the food was ready, thewaitress brought the food out. The waitress saw everything.Most of the time when you’re on the Web, you’re talkingdirectly to the cook. Nothing is between you and the web serverfor the page you’re visiting.But if we have a proxy server act like a waitress, it will recordboth what was ordered and delivered by the browser. Now we canbe our own detectives and dig into what actually happened.Can I get a proxy to set up my proxy?If you do a lot of mobile work, you may find it worth yourwhile to learn how to set up a proxy server. It is the best wayto see what’s going on between the phone and server.Unfortunately, setting up a proxy server can be a tad difficult.Thankfully, some kind souls at Blaze, a mobile performancecompany, have set up a free service that is the next best thingto installing your own tool.Mobile phoneProxy serverThe InternetWeb serverYou don’t need a fancy server.Your personal computer canact as a proxy server withthe right software.

you are here 4 47responsible responsivenessWhat to do when things aren’t blazing fastBlaze provides Mobitest—a free mobile performance testusing real iPhone and Android phones. Mobitest is locatedat www.blaze.io/mobile.Blaze’s Mobitest works like a proxy server. You tell it whatweb page URL you want to test and what device youwant to test with. Mobitest then puts your test request ina queue for that device.When the phone you requested is available, Blaze tracksall of the communication between its test phone and theweb server so you can see what happened.There is even a fun feature that records a video of thepage loading so you can see what someone using thatphone would see.Ready for some detective work? It’s time to figure out why the On Tap Now page is slow.Test the On Tap Now page at www.blaze.io/mobile.The On Tap Now page is at http://hf-mw.com/ch2/chapter2/ontap.html.1Look at the load time and page size.The load time tells you how long the page took to load on this phoneduring this test. The page size is the total size of all resources associatedwith the page including HTML, CSS, JavaScript, images, fonts, etc.2Try two different phones and compare speeds.Not only will the speed of networks vary, but the phones themselves mayalso vary in the speed at which they process and display pages.3Test Drive

48 Chapter 2overweight walrus pageDon’t let its looks fool you, that’s a BIG pageYikes! The test says the page is approximately 3 megabytes in size.That would be a pretty big page for a desktop browser. It’s a slow-moving elephant on a mobile phone.No wonder Mike’s customers complained about the page. It takesover 10 seconds to load on a test iPhone.What is a waterfall chart? I looked atit, and it doesn’t tell me what’s making thepage so big. Is the chart even useful?Waterfall charts are a commonweb performance report.The chart shows the files that the browserrequested from the server to build the webpage. The bars represent the length of timespent downloading a resource. The resourcesare listed in the order in which the browserrequested them from the server.But don’t go chasing the waterfall on the Blazereport page. It doesn’t have the details we needfor our detective work. We’re going to show youhow to find a waterfall that is more useful.Blaze Mobitest results pageusing an iPhoneLoad timecan varywidelydependingnetworkconditions.Blaze testson WiFi.Size of HTMLand all resourcesfor the pageClick tosee a largerversion ofthe waterfallchart.In truth, it’s too big for desktoptoo. Just because a screen is bigdoesn’t mean the connection is fast.Performance matters everywhere.

you are here 4 49responsible responsivenessThere’s gold in ’em HAR hillsThere is a nugget buried in the Blaze Mobitestresults page behind the tiny View HAR file link.Click that link, and you will go to a new sitecalled the HTTP Archive Viewer and see a moredetailed waterfall than the test results page.This waterfall chart shows us every resource thatthe browser downloaded in much more detailthan the picture of the waterfall on the Blazereport page.You’ll find the “View HAR file”link next to the Twitter andFacebook links.The preview tab contains awaterfall chart for the pagewe tested. It was generatedfrom a HAR file.Do you see any suspicious files beingdownloaded in the waterfall chart?HAR stands forHTTP Archive. Itis a file specificationthat provides astandard way torecord what happenswhen a browserrequests a web pagefrom a server.Top part of the BlazeMobitest results page.The HAR file can be usedto make waterfall charts.Read more about HAR athttparchive.org.HTTP Archive (HAR) Viewer

50 Chapter 2bloated page pie charts10,000-feet view: Show statisticsThe HAR waterfall charts show you the files that were downloaded,how the server responded, and the time it took to download. Butbefore we dig into the waterfall chart itself, let’s take a look at thehigh‑level statistics.Click the Show Statistics link on the HAR Viewer page to see a seriesof four pie charts. The chart that matters most to us is the second one,which breaks down the page by type of file. Hover your mouse overeach file type to see its total file size.Eight JavaScript files forthis page. Total size of allJS is 351 KB.So that’s why the page is so slow. There’snothing on this page that uses JavaScript, butit’s downloading eight JavaScript files. Plus theimages are almost 2.4 MB in size. We need to figureout why the images and JavaScript are so big.Whoa! There are 35 images;2.4MB for images alone.See the pie charts byclicking Show Statistics onthe HAR Viewer page.

you are here 4 51responsible responsivenessThe type of requestfrom the browser.Usually GET, but canbe POST if it’s a form.Each line shows a different filerequested to build the page.Hover to see the full URL.The web page requested.Hover over it for a pull-down menu with which youcan add more informationto the chart (e.g., thetype of file).The HTTP responsecode from the server.200 means “OK.”Size of thefile downloaded Time required todownload the fileThe bar graph shows when the file requeststarted and when the file completelydownloaded. Only a few files can bedownloaded at the same time.Find the drags on page speedNow it’s time to dig into that waterfall chart to find wherethe big images and JavaScript are coming from. Here’s akey to reading the chart.Review the waterfall chart for the On Tap Now page. Find the five largest files and examinethem. For each file, answer:The amount of communication between the browser and theserver can be overwhelming, but don’t worry. You just need tolook for two things: which resources are the largest, and where is theJavaScript coming from?Click the plus sign to get more detailsabout what the browser asked theserver and how the server responded(aka the HTTP headers).What type of file is it?1What domain is the file coming from?2If the file is an image, what is its height and width?Hint: You may need to copy the image URL and open it in a new tab ordownload the image to find the dimensions.3What does this information tell you about what you might need to do to make the page faster?Waterfall chart on the HARViewer page

52 Chapter 2exercise solutionDid you find the problems with the page? Let’s review.What type of file is it?You can determine the type of file byhovering over the filename to see thefull URL and extension. You can alsoadd a column containing the file typeso you can scan the list quickly.1Hover over the page URL.Click on the down arrownext to the URL to addthe file type column.What domain is the file coming from?Now we’re getting somewhere. Check out wherethis big, 174.8 KB JavaScript file comes from.2At 174.8 KB, this is the largestJavaScript file on the page.The large file isn’tthe only suspicious filehere. These files havestrange names.Hover your mouse over the filename to see the full URL.Maps.gstatic.com is a domain for Google Maps. The browser isdownloading JavaScript for a map that isn’t displayed on the mobile view.Many of the mysterious files are related to Google Maps.If the file is an image, whatis its height and width?Find the images with the largest filesize. Copy the URL and open themin a new window. Without evenlooking at the height and width, youcan tell that these images are farlarger than the size they appear ona small screen.3682 pixels wideSame file (121 KB) usedfor both despite thedifferent sizes at whichthe image appears750pixelshigh168pixelshigh153 pixels wideScaled sizeused on iPhone*Images are not to scale.

you are here 4 53responsible responsivenessWhere did that Google Maps JavaScript come from?When you view the On Tap Now page on a mobilephone, the page doesn’t contain a map. Why is thatJavaScript downloaded? Let’s open the page in ourdesktop browser and investigate.Hey, there’s the map. Mike must have set it up sothat it only shows up on wider screens.Hiding the map on the mobile makes some sense.It’s a bit big for a small screen. Older phones maynot be able to handle the map’s complex JavaScript,and we’ve seen that the map has a lot of overhead.So how did Mike hide the map?One line to download them allThe map is included in the page via an iframe.The iframe loads all of the components necessaryto make the map.Hey, there’s the elusive map!<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>Extremely long URL abbreviatedThis single iframe causes 47 files to be downloaded!Mike hid the map with CSSMike figured out how we used media queries tomodify the layout for mobile. He added in his ownCSS rule inside our media query. The rule Mikeadded sets the display for the iframe to none.Unfortunately, while setting the display to nonewill prevent the map from showing up, it doesn’tprevent it from downloading.@media screen and (max-width:480px) {...#map {display:none;}}taps.cssThere are many more rulesin the CSS file.The iframe has an id of map. This rule hidesthe Google Maps iframe by setting thedisplay to none.Look inside ontap.html tofind this code.

54 Chapter 2optimize those imagesWhat’s with the big pictures?The images on this page need to be put on a diet. Let’s look at the waterfallto find the biggest images and see why they’re so big.The taps.jpg file is 440.7 KB, making itthe largest file on the page.But that huge file isthe header image, and it isn’teven displayed on mobile.Right, but that doesn’t mean it’s not downloading.The taps.jpg image has been hidden from the page in the same wayas Google Maps—the display property has been set to none inthe CSS. But, as we saw with the map, setting display:nonedoesn’t stop the content from downloading.This is taps.jpg. View theOn Tap Now page in adesktop browser to seewhere the image is used.@media screen and (max-width:480px) {[Other CSS rules are here].header {display:none;}}Fluid images are huge imagesAnother thing to notice from the waterfall is that the brewlabels are all large files that range from 93 to 132 KB.They’re desktop images scaled down to fit the screenusing the fluid-image technique we learned in Chapter 1.So this isn’t a new issue, but when we only had one ortwo images on the page, it wasn’t noticeable. But whenyou put 16 brew labels on one page, suddenly the fluidimages are an anchor slowing the page down.The total size of the16 brew labels is nearly2 MB. Finding a wayto optimize theseimages is key to makingthe page faster.

you are here 4 55responsible responsivenessIt looks mobile friendly, but it isn’tJim: Well, that’s a bummer. I guess looks can be deceiving, eh?Frank: At least we can tell Mike he didn’t break the page.Joe: Yeah, any of us could have made the same mistake. Theproblems are really bad on this particular page, but I think thesame issues exist on every page on the site.Frank: So what do we do? Build a whole separate site for themobile version? Ditch Responsive Web Design?Joe: Let’s not get ahead of ourselves here. There’s got to be away to make it work. We’re so close right now. Do the imageand JavaScript problems have anything in common?Jim: It seems like all of the problems stem from the fact thatwe’re starting with desktop-appropriate content—images, maps,etc.—and then hiding that content.Frank: Exactly. We’ve got big files going to the browser bydefault and then CSS is being used to try to cover them up.But it seems that, if we’re not careful, the large files will still bedownloaded by mobile devices. That’s not the ideal fallbackbehavior if something goes wrong.Joe: What if we flipped things around and sent the smallestfiles by default?Jim: Oh, interesting. That might work. Start with the mobiletemplates first and then add on content for desktop.Frank: What you’re describing sounds a lot like progressiveenhancement.Joe: You’re right. We’ve been using progressive enhancementfor years. The only difference now is that we’re starting frommobile and progressively enhancing the document to fit thedesktop.Jim: It seems like it should work. Let’s try it out.Progressive enhancementpromotes building layeredweb pages. At minimum,everyone can see and usethe content. Those withmore capable browsers getadditional layers of styleand interactivity thatenhance the experience.

56 Chapter 2mobile first; it’s only politeMobile-first Responsive Web DesignMobile-first Responsive Web Design (RWD) is exactlywhat the name suggests: RWD techniques that start from amobile template. Despite its simplicity, there is a lot of powerthat comes from this approach.►► Basic HTML►► Simple layout►► Small images►► Limited CSS and JSVery small screens(feature phones)Small screens(smartphones)►► Add newer HTML5 features if supported►► Simple layout►► Small images, but bigger than feature-phone size►► More CSS and JSMedium screens(tablets)►► Because there is more room,we can add optional contentlike sidebars►► Multiple column layouts►► Larger imagesLarger screens(desktops and TVs)►► Add widescreen layouts►► Larger images►► For TVs, optimizenavigation for use bypeople sitting 10 feetaway who are using aremote control*These are just examples of enhancements. What you do depends on the project.ProgressiveenhancementbasedonscreensizeandclientfeaturesScreensizedictateslayoutandmediasize.UseJStotestforbrowsersupportofadvancedfeatures.

you are here 4 57responsible responsivenessStructured content (HTML)Progressive enhancement is like alayer cake. Mmm. Cake.What is progressive enhancement?Progressive enhancement views web design in a series oflayers. The first layer is the content. Combine that with semanticmarkup to create structured content. If you stop right there, youhave a document that nearly every browser in the world can read.After you’ve got the basics out of the way, you add a presentationlayer using CSS and a behavior layer using JavaScript. You neverassume the browser supports those features, but if it does, visitorsget a better experience.For many years, web developers commonly built things that onlyworked on the most advanced browsers and tried to make surethe web page degraded gracefully on older browsers. Progressiveenhancement flips this practice around.Benefits of mobile-first designMobile-first RWD isn’t that different from progressiveenhancement. Recognizing this fact, many call it content-firstdesign instead because content is the first layer of progressiveenhancement.Regardless of what you call it, starting from the most basicdocument not only reaches the most people, it also hasbeneficial side effects.Mobile first is like a small-plate diet. Simply by eating on asmaller plate, you’re likely to eat less food.The desktop home page is an all-you-can-eat buffet. All sorts ofjunk gets thrown on it.Mobile is a small plate. You have to choose carefully andprioritize your content.And once you’ve got a focused mobile site, you’re better preparedto ask the tough questions like whether or not the things thatdidn’t make the cut for mobile are really important enough toadd back in for desktop.Semantic MarkupUp CloseSemantic markup means HTMLtags and attributes that convey themeaning of the content.For example, content surrounded by an<h1> tag is more important on the pagethan content marked up with an <h2>or a <p> tag.class and id attributes can also addsemantic meaning to documents if theirvalues are things like calendar andnot presentation values like left ortop. Many web developers use classesin a standard way called microformats toprovide more semantic meaning. Learnmore at www.microformats.org.Semantic markup doesn’t mean youcompletely avoid tags like <div> and<span> that don’t add meaning. Instead,you choose the right semantic tags andattributes for the content of a pagewhenever possible.Presentation (CSS)Behavior (JavaScript)

58 Chapter 2current page structure checkLet’s turn this web page aroundBecause we’re already using RWD, making our page mobile first won’ttake too long. Here is a short list of changes we’re going to make.Make the HTML as simple as possible and swap the order of the CSSso that the mobile version is first.Fix CSS background images so that only one file gets downloaded perimage. Make sure display:none is being used appropriately.Supply different source files for <img> tags at different screenresolutions. Make sure the right size image is downloaded.Use JavaScript to add Google Maps to the page when the browser cansupport it and the document is wide enough to accommodate it.The current structure of the On Tap Now pageOpen up the ontap.html file for the Splendid Walrus site in the chapter2 directory.The file looks very similar to the document we built in Chapter 1:<div class="navigation">...</div><div class="header">...</div><h1>...</h1><div id="visit" class="column">...</div><div id="ontap" class="column">...</div><div class="footer">...</div>Two columnsinstead ofthreeInstead of a <div> called“main,” Mike has created a newcolumn with the id of “ontap.”That <div> contains the list ofcurrent beers.Because we did a good job of creating a template with semantic markup,the document is clean and simple already. It looks like our main task tomake the content mobile first will be removing the Google map.Because we’re going to need to reference the code later, let’s use HTMLcomments to prevent the iframe from being included in the page.Comment out the Google Maps iframe bysurrounding it with . Find the iframe in the #visit <div>.We’ll explain why in a bit.

you are here 4 59responsible responsivenessAm I on a new page or not?The On Tap Now page looksso similar to the home page.How can visitors tell they’re on adifferent page?Good catch. We have a problemwith the order of the content.On the home page, it was fine if the firstthing on the mobile view was the Visit Usinformation. But if the Visit Us contentrepeats on every page, visitors won’t beable to tell that the page has changedwithout scrolling down.We need to reorder the content so the OnTap Now info comes before the Visit Uscontent.<div class="navigation">...</div><div class="header">...</div><h1>...</h1><div id="ontap" class="column">...</div><div id="visit" class="column">...</div><div class="footer">...</div>Copy everything in the<div> with the visitid and paste it belowthe ontap <div>.Do this!Is the Visit Us content essential on this page? Would it be better to move itto a separate page and link to it? Or maybe leave it out of the mobile pageand add it using JavaScript if the page is rendered on a larger screen?

60 Chapter 2content floating around the pageFix the content floatsThe change we made to the order of the content broke thelayout in a desktop browser. The Visit Us section is at thebottom of the page.In Chapter 1, we mentioned how putting the right columnbefore the main column was a trick to make it easier tohandle floats for layouts. If you want a block to float nextto something, you need to put it first in the source order.Don’t worry, though. There is a simple fix here. We’ve beenfloating the Visit Us content to the left of the On Tap Nowcontent. Instead, we need to float the On Tap Now contentto the right of the Visit Us content.Open taps.css and make the following two changes.@media screen and (min-width:481px) {.column {margin: 10px 1.04166667% 0 0;}#visit {width: 31.25%;float: left;}#points {width: 25%;float: right;}#main {margin: 10px 27.0833333% 026.0416667%;}#ontap {margin: 10px 0 0 32%;}}@media screen and (min-width:481px) {.column {margin: 10px 1.04166667% 0 0;}#visit {margin: 0 68.75% 0 0;}#points {width: 25%;float: right;}#main {margin: 10px 27.0833333% 026.0416667%;}#ontap {width: 67%;float: right;margin: 10px 0 0 0;}}Change this…Change this……to this.…to this.Using 67%instead of68.75% gives usa little wiggleroom for thecolumns.Visit Us is floatingbeneath the beer labels.Before After

you are here 4 61responsible responsivenessMobile-first media queriesNow for a little housekeeping. In Chapter 1, we started with a desktop websiteand made it mobile. We’re going to turn this around and start from the simplestcontent and build up to the desktop (and beyond).But first we have a confession. Mobile first is a little bit of a misnomer when itcomes to the CSS. Before we apply any media queries for small screens, we’regoing to set all of the basic styles—for color, type, etc.—and then enhance them.There is a good reason for doing this. Many mobile browsers don’t understandmedia queries at all. So we need to make sure they at least get the basicstyle rules.Put your CSS house in orderCSS files are often like the kitchen junk drawer. It may start out organized andlogical, but over time chaos takes over. To put mobile-first media queries inplace, you may need to untangle the basic style rules from the layout rules.Fortunately, the CSS we built in Chapter 1 is already in good shape. Most of thebasic style rules are already at the beginning of the file, with the media queriesadding the layout and formatting later in the document. All we need to do is putthe mobile media query before the desktop query.CSS cascade follows thepath from small screen tolarge screen./* Wider viewports/higher resolutions (e.g. desktop) */@media screen and (min-width:481px) {[Desktop layout rules here]}/* Mobile/lower-resolution devices */@media screen and (max-width:480px) {[Mobile layout rules here]}Move the mobile media query blockabove the desktop media query.By doing this, we’re making surethe cascading effect of CSS isconsistent with our mobile-firstprogressive enhancement approach.Do this!We’ve made quite a few changes to the page:We better check to make sure things still work. Load the page in a few desktop and mobile browsersto see how it looks. Be sure to check Internet Explorer.• Removed Google Maps• Reordered the markupTest Drive• Fixed the floats• Reordered the media queriesBasicstylesSmall screenstylesLarge screenstyles

62 Chapter 2conditional comment lifelinesSurprise! The page is broken in Internet ExplorerDon’t tell us you didn’t see this coming the momentwe hinted you might want to test the page in InternetExplorer (IE). Battling IE is a rite of passage for webdevelopers. You’ve probably been scarred enough fromprevious battles that you knew there was an IE-sizedmonkey wrench awaiting us.So what’s the catch? IE doesn’t support media queries.Now before you toss the book aside and curse us forteaching something that doesn’t work in the world’s mostpopular browser, take a deep breath and relax. Thereare ways to work around IE’s (many) shortcomings.Because IE 8 and below don’t supportmedia queries, IE isn’t getting theCSS rules that create columns.We’re being a little too harsh. IE9 and abovedo support media queries, so help is coming.Internet Explorer’s escape hatch: conditional commentsMicrosoft has provided a nice tool to help web developers target codespecifically to Internet Explorer via conditional comments.This tests to see if the browser is less than (lt) IE 9 andthat it isn’t IE Mobile (!IEMobile). We exclude IE Mobilebecause it should get the mobile layout. IE9 and aboveunderstand media queries, so they don’t need the extra help.Look carefully. TheHTML commentopens on the firstline, but doesn’tclose until “-->” isincluded on the finalline. Other browserswill see this as acomment and ignoreits content.If the conditions are met, IE will do whatever is in between the opening [if]statement and the closing [endif]. The example shows a link to a CSS file,but it could be anything you would find in an HTML document.See the full syntax for conditionalcomments at http://bit.ly/ie-comments.

you are here 4 63responsible responsivenessUse conditional comments with a media queryYou probably noticed that the conditional comment points to layout.css.Time to create that file.We’re going to grab some of the rules from the current stylesheet. We’vecalled the new file layout.css because it will only be used for browsers thathave enough screen real estate that multicolumn layouts make sense.Create a blank text file called layout.css and copy thedesktop rules into it.Make sure you copy everything between the beginning and end of themedia query, but not the @media rule itself.1/* Wider viewports/higher resolutions(e.g. desktop) */@media screen and (min-width:481px) {.column {margin: 10px 1.04166667% 0 0;}#visit {margin: 0 68.75% 0 0;}#points {width: 25%;float: right;}#main {margin: 10px 27.0833333% 026.0416667%;}#ontap {width: 67%;float: right;margin: 10px 0 0 0;}}taps.csslayout.css.column {margin: 10px 1.04166667% 0 0;}#visit {margin: 0 68.75% 0 0;}#points {width: 25%;float: right;}#main {margin: 10px 27.0833333% 026.0416667%;}#ontap {width: 67%;float: right;margin: 10px 0 0 0;}Copy theserules toyour newfile.After you copy them, remove the rules and thesurrounding media query from taps.css. We’llreapply the rules to the HTML document next.

64 Chapter 2conditional loveAdd a link to the new stylesheet.For browsers that support media queries, we’re going to add a linkto the new layout.css file if the screen size is wide enough.2<link rel="stylesheet" type="text/css" href="taps.css" /><link rel="stylesheet" type="text/css" href="layout.css" media="all and(min-width: 481px)" />Add this link tagto ontap.html. This is the media query syntaxfor link tags that you learnedin Chapter 1.The 481px value for min-width wascopied from the media query weremoved from taps.css.Add the IE conditional comment.We’ve got it working for most desktop browsers. Now we just needto add the conditional comment we created earlier to finish up.3<link rel="stylesheet" type="text/css" href="taps.css" /><link rel="stylesheet" type="text/css" href="layout.css" media="all and(min-width: 481px)">The conditional comment repeats the line above it,ensuring that desktop IE sees our layout.css file.Time to test again.Check the page in a browser that supports media queries anddifferent versions of Internet Explorer. Looks good, huh?4Even our persnickety oldfriend IE is showing thelayout properly now.

you are here 4 65responsible responsivenessQ:With super-fast 4G phones on thehorizon, is performance really that big ofa deal?A:Absolutely. Even 4G phones end up onthe EDGE network occasionally (EDGE isan older, slower network). Studies show thatslow sites decrease usage and directly affectthe bottom line.Q:Why am I getting different resultsfrom the Blaze Mobitest?A:There are many reasons why thiscan occur. Page download time will changewith every test depending on network traffic.Google Maps code is different for eachoperating system and may change over time.The behavior of the phones will also changeas new versions of the operating systemsare released. For the book, we tested usingBlaze’s iOS 4.3, Android 2.2, and Android2.3 test devices.Don’t worry too much about the variationsin test results. What matters is the code andimages being downloaded unnecessarily.Q:By separating the stylesheet intotwo files, aren’t you making the site loadmore slowly?A:It is true that the number of HTTPrequests makes a big difference in thedownload speed. So we shouldn’t recklesslyadd requests. In this case, we thought itmade more sense to separate them so IEcould use the same file.Q:You mentioned that setting up aproxy server might make sense. What doyou recommend?A:There are many proxy servers,including some fantastic open source ones.We happen to be fans of a commercialproduct called Charles Proxy.Q:The lack of plug-ins seems like abig deal. How do you get anything donewithout Firebug and Web Inspector?A:It isn’t easy. First, a lot of yourdebugging work can be done in a desktopbrowser so long as you are careful to test onreal devices at some point in the process.There are also a lot of new tools that attemptto get around the plug-in limitations. TheMobile Perf Bookmarklet (http://bit.ly/mw-perf) includes many performance tools.weinre (http://bit.ly/mweinre) and OperaDragonfly (http://opera.com/dragonfly) letyou run Web Inspector on your desktopand examine what is going on in the phonebrowser.Q:It doesn’t seem like much changedwhen we switched to mobile-first mediaqueries. Why bother?A:For this page, there wasn’t a bigdifference between a desktop-first CSS fileand a mobile-first one. In our experience,however, this is the exception. With morecomplex styles, you often want the widerrules to override some, but not all, of thestyles set for smaller screens. Reorderingthe media queries ensures that the CSScascading behavior is consistent with thegoal of progressively enhancing the page asthe screen gets wider.Q:It seems like the order of contentmay often be different between desktopand mobile. How do you handle this inmore complex pages?A:Ah, you caught that, huh? Yes, thisis one of the common challenges forResponsive Web Design. In the long run,the Flexible Box Module (Flexbox) in CSS3promises an easy way to reorder content instylesheets. Combine Flexbox with mediaqueries, and you can completely reorderpages as needed. Unfortunately, Flexboxis still young and isn’t fully supported. Sodevelopers resort to JavaScript to reordercontent or combine RWD with devicedetection (see Chapter 5). Frankly, contentordering and image handling remain two ofthe biggest challenges for RWD.Q:Will the versions of IE that don’tsupport media queries see the responsivedesign? Aren’t media queries necessary?A:Internet Explorer will display thedesktop version. It will still have the fluidgrids and flexible images. But it won’tchange based on any of the media queryinstructions. If media query support iscritical, there is an open source librarycalled Respond.js that fills in support formedia queries for older IE versions. This isa fairly intensive script, so be sure to testextensively if you decide to implement it.

66 Chapter 2fix display:none with a media queryHow are we doing?We’ve got the basics in place and our CSS in order. What’s next on our list?Play taps for the header imageOur waterfall chart showed us that we had one largeCSS background image that was being hidden withdisplay:none. Despite the fact that the image nevershows up on the page, the browser still downloads the image.So let’s make sure the image is only downloaded when it isneeded. How do we do that? By putting it in a media query so itonly gets downloaded if the screen is wider than 480 pixels.But instead of creating a whole new media query, put the CSSrules in layout.css, which is already being included in the page viaa media query in the <link> tag.Remember our friend, taps.jpg,which downloads on mobile butnever shows up on the page?.header {background:URL(images/taps.jpg) repeat-x;height: 300px;}Copy these lines fromtaps.css and add themto the end of layout.css. Delete these linesfrom taps.cssafter you addthem to layout.css.Check the On Tap Now page using the Blaze Mobitest to make sure taps.jpg isno longer being downloaded. Try both iPhone and Android devices. You canuse http://hf-mw.com/ch2/ex/3/ontap.html if your copy of the page is not on apublic server.Make the HTML as simple as possible and swap the order of the CSSso that the mobile version is first.Fix CSS background images so that only one file gets downloaded perimage. Make sure display:none is being used appropriately.Supply different source files for <img> tags at different screenresolutions. Make sure the right size image is downloaded.Use JavaScript to add Google Maps to the page when the browser cansupport it and the document is wide enough to accommodate it.Test Drive

you are here 4 67responsible responsivenessIt works on iPhone,but the image is stilldownloading on Android.Android appears to still bedownloading taps.jpg.Blaze’s Mobitest says Android is still downloading theimage, but it is a false report.Blaze had to modify its phones to make them work for remote testing.This causes some occasional odd behavior.When you use a stock Android phone, the taps.jpg image will not bedownloaded.Going old school with image optimizationBack in the early days of the Web, web developers spent a lot time worryingabout image optimization. As bandwidth has increased, web developersstopped worrying about eking out every bit of performance from images.But mobile devices make image optimization paramount once again.It looks like we can make the taps.jpg image smaller with some basic webimage optimization. Changing the JPEG quality from 80 to 45 makes theimage 78 KB instead of 440 KB,and you have to look very closely tosee any difference in image quality.We’re using Photoshop to optimize thisphoto for the Web, but you can useyour favorite web image editor.For more on web image optimization,see Chapter 5 of Head First HTMLwith CSS & XHTML.Copy the optimizedversion of taps.jpg fromthe extras folder intothe images folder toreplace the original, largefile with a smaller version.We’d argue that imageoptimization hasalways been paramount.Faster connections arenever a given, even fordestkop computers.Images still not small enough?Smush them further atwww.smushit.com.

68 Chapter 2scale images to the deviceOne src to rule them allCSS images are just the beginning of our image woes. The <img>tag presents problems for every responsive design because there canonly be one value for the src attribute regardless of screen size. Sohow do we deliver the right size image?<img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">There are 16 beer labels on the OnTap Now page that use an <img> taglike this one for Benson’s Bubbler.Despite the need for multiple versions of this image depending on thescreen size, HTML only allows one value for the src.It’s tempting to replace the value of the src attribute using JavaScript.Unfortunately, most browsers look ahead at the HTML document and preloadimages before the JavaScript has been fully evaluated. This often meansone size file downloads before the JavaScript changes the src, resulting induplicate downloads and causing the browser to reflow the page layout.A responsive image server to the rescueIf the browser can’t ask the server for the right image, the server will just haveto figure it out for itself. That’s what Sencha.io Src attempts to do.We can use Sencha.io Src to deliver the best-sized image for every device.CSS can’t be used tooverride the value of thesrc attribute, either.The image resizing serviceformerly known as TinySRCSet the first part of the src tohttp://src.sencha.io/.After the slash, add the full URL ofthe image you want to have resized.Sencha.io Src will resize the image to fit the sizeof the device screen. For example, if an iPhonevisits the site, the image will be constrained to itsscreen size of 320 by 480 pixels. Do this!Update all of the brew label images in theontap.html document to use Sencha.io Src. Sencha.io Srconly shrinksimages.It doesn’t makethem bigger.Enlarging images results inpoor quality. It is better to finda higher-quality source image.<img src="http://src.sencha.io/http://[DOMAIN]/[PATH]/brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">Replace with your domain andpath to the images.

you are here 4 69responsible responsivenessHow Sencha.io Src worksSencha.io Src works like magic. You request an image from an iPhone, it gives youan iPhone-sized image. Using a feature phone? No problem—Sencha.io Src willgive you a tiny image. Sitting at your desktop? Here’s the full image.How does Sencha.io Src know what size image to deliver? It uses the browser’s user-agent string—an identifier that every browser provides—to look up the device in abig database. The database contains information about thousands of devices. Oneof the things these device databases track is the size of the screen.Once Sencha.io Src knows the screen size, it goes to work scaling the image tothe maximum width of the device. It stores the image it created in a cache for 30minutes so subsequent requests for the image at that size will be even faster.No great solutions for <img> tagsUsing Sencha.io Src has drawbacks. It relies on device detection, which canoccasionally get things wrong (as we will discuss in more detail in Chapter 5). It alsorequires you to route all your images through a third party.The reality is that there are currently no great solutions for how to handle differentimage sources for different screen sizes. But watch this space closely, because a lotof people are trying to find a better solution.One final tweak: optimized beer label imagesAs with the taps.jpg image, we can reduce the file size of the beer label images bysaving them at a slightly lower JPEG quality level. Don’t worry, we’ve optimizedthem for you. Find them in the extras/labels-optimized directory.Copy the optimized images into the brew_images folder, replacing any existing imagefiles.If you need Sencha.io Src toprovide a specific image size,it can do that for you aswell. See how at http://bit.ly/senchasrc.We should have an efficient, fast, mobile-optimized web page now. Test itusing www.blaze.io/mobile to see how we did. Select the option to have Blazerun three tests on the phone to get an average. Compare the total file sizeand download time of the new page to the original page.If your pages are not publicly accessible, you can test usinghttp://hf-mw.com/ch2/ex/4/ontap.html.What’s a user-agent string?We’ll take a closer look in thenext chapter.Why is the <img> tag sodifficult? Read more in thisseries on responsive images:http://bit.ly/rwdimgs1.Test Drive

70 Chapter 2performance, optimizedThat’s a blazing-fast mobile web pageOur diet plan worked! The On Tap Now page is 87% slimmerthan it was before. iPhone download time has gone fromalmost 12 seconds to under 3 seconds.BeforeAfterWeb performance optimization is a growingfield with many more ways to makepages faster. What other performanceimprovements could we make to this page?Mike is going to lovehow fast the site is ona mobile phone now.Can you say “Bloated, S‑L‑O‑Wloading page”?The On Tap Now page’s post-optimization results. Much better.

you are here 4 71responsible responsivenessQ:Why do browsers download CSS images that arenever used?A:The browser usually can’t know for certain that an imageisn’t going to be used. It could be an image that shows upwhen some JavaScript or CSS activity triggers it. The browserdownloads the images in advance so people don’t have to waitif an activity suddenly triggers an image to be displayed.Q:OK, so why don’t they download images that arewithin media queries?A:Originally, browsers downloaded them as well. Browsermakers have seen how developers are using media queriesand are adjusting browser behavior accordingly. All of thisis fairly new, which is why some browsers still downloadresources inside a media query that doesn’t apply.Q:Is it safe to route our images through Sencha.ioSrc? It makes me nervous.A:Being cautious is reasonable. Any time you integrate athird-party service into a critical part of your site, you’re goingto be impacted if that service goes down.Sencha has said it is committed to providing this service andthat it will remain free. At the same time, you can be sure that ifa tremendously large site started using it, Sencha would needto be compensated or it wouldn’t be able to run the service.If you don’t like Sencha.io Src, you could build a similar serviceusing the device detection tools we teach in Chapter 5.Q:Are there alternatives to Sencha.io Src? Are theresolutions to the <img> tag problem that are client side only?A:There are many different ways to handle <img> tagsin responsive designs. A lot of work is currently underway tofind a solution that doesn’t require device detection. Thereare compromises with every solution, including the one we’reusing for this project. You can find an extensive review of thetechniques at http://bit.ly/rwdimgs2.Q:What about other media? Do video and audio sufferfrom the same problems?A:In a word: yes. The HTML5 video and audio formats area little better because they allow you to define fallback versionsof the media in different file formats. If your browser doesn’tsupport the first option provided, it will look at the second one.But while better, this approach does nothing to addressnetwork speed or resolution. Someone using a mobile phoneon a wireless network probably doesn’t need an HD-qualitymovie. By contrast, Apple’s QuickTime video offers a moviereference format that delivers movies based on Internetconnection speed.Q:Is it just me, or are there a lot of unknowns andproblems related to Responsive Web Design?A:There are definitely challenges. As with any newtechnique, people are still trying to figure out what works andwhat doesn’t. RWD is bleeding edge. That’s why we’re coveringa lot of techniques in this book. It’s likely you’ll need to combinetechniques to deliver the best experience for your project.Despite the challenges, the promise of RWD inspires manypeople to strive to build more complete solutions. Things aremoving quickly when it comes to RWD.

72 Chapter 2to zoom or not to zoom?Zoom, zoom, pow…Sorry, guys! I hate to spring a newrequirement on you in the middle of yourwork, but one of my best customers has troubleseeing small text and is complaining that she can’tzoom the page. Can you fix it?Remember that viewport <meta> tag fromChapter 1? Time to look at it more closely.The viewport <meta> tag tells the browser theintended dimensions and scaling (aka zoom level) for apage. It also contains controls that can prevent users frombeing able to change the size of the page.Zoom in on the viewport <meta> tagYou’ll find the viewport <meta> tag in the <head> ofthe ontap.html document. The syntax is pretty simple.<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />What type of<meta> tag is this?Width of the viewport. Can be set inpixels or can be set to “device-width,”which tells the browser to match theviewport to the device resolution.The content attribute contains acomma-separated list of instructionsfor the browser. See all of theoptions at http://bit.ly/metaviewport.Sets the initial scale (or zoomlevel) of the page. Setting it to 1means that the document should bedisplayed at its normal scale.Declares a limit onhow much the pagecan be scaled up.There is also a similarminimum‑scale setting.The maximum‑scaleis what is preventingthe users fromzooming the page.

you are here 4 73responsible responsivenessThe right to zoom?It seems like being able to zoomis important for accessibility. Whywould anyone ever turn it off?It can make a difference for accessibility.Some web developers have gone so faras to declare that zooming on mobile is afundamental human right.We wouldn’t necessarily go that far, but zooming is important,and it should be considered carefully before it is disabled.As for why designers disable scaling, there are a few reasons.If the page is using complex touch gestures, disabling zoommakes it easier for people to swipe successfully.There is also a bug in iOS that causesthe zoom level to change when thedevice is rotated into landscapemode. The bug zooms the page in,causing the right side of the pageto get cut off.Turn zooming back onTo turn zooming back on, we need toremove the maximum-scale settingfrom the viewport <meta> tag.<meta name="viewport" content="width=device-width, initial-scale=1" />Edit the viewport <meta> tagand remove “maximum-scale=1.”Make sure you remove the extracomma after “initial-scale=1.”Do this!After you turn zooming back on,rotate an iPhone or iPod Touch tosee the iOS zooming bug in action.When you rotate an iOS device, abug causes the page to no longerfit in the viewport, cutting offthe right side of the content.

74 Chapter 2map out the final stepBack to our regularly scheduled projectWith our emergency viewport adventure out of the way, let’s take a look at ourprogress. Our fast mobile page puts us very close to a mobile-first RWD. All that’sleft to do is add the map back in if the screen is big enough.Add the map back using JavaScriptThe only remaining item is to add the map back if the browser window iswide enough. We’ve already seen that, if we hide and show the map usingCSS, the resources for the map will still get downloaded.So we’re going to need to use JavaScript to add the map when appropriate.Think of it as a JavaScript version of the media queries we know and love.Grab that Google Maps iframe code that we set aside earlier. We’re goingto need to put that back into the page in order to show the map. Let’s takea closer look at the iframe code.Remember this iframe snippet thatwe commented out? We’re going to useJavaScript to insert it into the page.Make the HTML as simple as possible and swap the order of the CSSso that the mobile version is first.Fix CSS background images so that only one file gets downloaded perimage. Make sure display:none is being used appropriately.Supply different source files for <img> tags at different screenresolutions. Make sure the right size image is downloaded.Use JavaScript to add Google Maps to the page when the browser cansupport it and the document is wide enough to accommodate it.

you are here 4 75responsible responsivenessOn second thought, a map would be usefulLocation. Location. Location.The old saying takes on new meaning when it comes to mobile phones.Because many phones can tell where you are via GPS and other forms oftriangulation, using location to provide more relevant content is common.Mike hid the map on mobile because it was too big. Now that we’ve seenhow many files it downloads, it makes sense to keep the map hidden.But that doesn’t mean a map wouldn’t be nice. So instead of embeddinga map on narrow screens, let’s link to the map.To link to the map, we’ll need a <div> that our JavaScript can reference.The <div> will contain a <p> tag with a link to the map. Why do youthink we need to order it that way?<div id="mapcontainer"><p id="maplink"><a href="http://g.co/maps/jm2pw">View Google Map</a></p></div>We’re going to need a container for the JavaScriptto reference, so we’ll add a <div> here.The id on the <p>tag will allow us toinsert the iframeabove the link forwider screens. Moreon this soon.Add the new<div> above thecommented-outiframe code.Do this!Add a link to the map

76 Chapter 2it’s kinda like a media query<script type="text/javascript">var breakpoint = 481,id = mapcontainer,viewportWidth = window.innerWidth;if (viewportWidth > breakpoint) {var mapElement = document.createElement(iframe);mapElement.id = map;mapElement.width = 300;mapElement.height = 300;mapElement.frameborder = 0;mapElement.scrolling = no;mapElement.marginheight = 0;mapElement.marginwidth = 0;mapElement.src = http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=334+NW+11th+Ave,+Portland,+OR+97209&aq=&sll=37.0625,-95.677068&sspn=58.164117,80.332031&vpsrc=0&ie=UTF8&hq=&hnear=334+NW+11th+Ave,+Portland,+Oregon+97209&t=m&ll=45.525472,-122.68218&spn=0.01804,0.025749&z=14&output=embed;document.getElementById(id).insertBefore(mapElement,maplink);}</script>Sets the breakpointvariable to 481 pixels.The breakpoint is thewidth at which themap will be added tothe page.Checks to seeif the windowviewport is largerthan the breakpointAdds a new iframeelement and assigns it tothe mapElement variableBuild a pseudo-media query in JavaScriptLet’s take a look at the JavaScript code we’re going to use to insert theiframe into the page. The code acts like a very simple media query.These lines add allof the attributesto our new iframeelement. Theattributes and theirvalues were copiedfrom the GoogleMaps iframe snippet.The URLGoogle Mapsprovides isugly. Youprobablydon’t wantto retypeit. Find acopy ofthis code inextras/map.js.This final stepadds the iframe(mapElement) intothe mapcontainer<div> (id) beforethe paragraphcontaining the link(maplink).This variable is for the id of theelement we want to add the map to.We’re using a variable to make the<div> easier to change in the future.Remove the commented-out iframe codeWe no longer need the original iframe code, so delete itfrom the HTML document.Delete these lines!

you are here 4 77responsible responsivenessDoes the JavaScript get downloaded on mobile phones?Load the page on iPhone and Android using www.blaze.io/mobile/.Check the waterfall chart to see if the Google Maps code isdownloading. If your web page isn’t on a public network, you can usehttp://hf-mw.com/ch2/ex/5/ontap.html to test.1Does the map show up on larger screens?Open the On Tap Now page in your favorite desktop browser. Doesthe map show up when the window is wider than 480 pixels?2How does the map fit into the responsive design?Try adjusting the size of your browser window. Does the map scalelike the rest of the design? Are there any problems with the map?3Time to put our work to the test. Grab ontap.html and answer the following:<div class="footer"><p>See you soon! Love, The Splendid Walrus</p></div>[INSERT SCRIPT HERE]</body></html>Open ontap.html and find thebottom of the HTML document.We’re going to add ourJavaScript as the very lastthing on the page before theclosing </body> tag.Add the JavaScript to the On Tap Now pageNow we need to add the JavaScript to the page. Because the map is anice-to-have feature and not essential, we’re going to make it one ofthe last things the browser adds to the page.Putting nonessential JavaScript at the bottom of the page is agreat way to make a page load faster. The browser will parse all ofthe HTML and CSS before it gets to the JavaScript. Our visitorswill have a usable page more quickly and won’t be stuck waitingfor the map code to load.

78 Chapter 2is the map responsive?How’s it looking? Any problems?Does the JavaScript get downloaded on mobile phones?1Does the map show up on larger screens?Yep. The map looks great in our desktop browser.2How does the map fit into theresponsive design?Uh oh. We’ve got some problems here. Themap doesn’t scale like the rest of the responsivedesign. Not only that, but there are some screenwidths where the map overlaps the beer labels.3Check the page using an iPhone on the Blaze Mobitest service.Make your way to the detailed waterfall chart by clicking the HARfile link on the results page to see all of the files downloaded.The map files are not getting downloaded. Perfect.Now what about Android? Blaze says the JavaScript stilldownloads, but it is another false report.We mentioned that Blaze had to modify its phones to make themwork for remote testing. One odd by-product of this modification isthat JavaScript running on its test phones reports the screen widthas much wider (800 pixels!) than what unmodified phones do.You’ll have to take our word for it that the JavaScript works andthe map code isn’t downloading on Android, either.Yikes. When the browser windownarrows, the map overlaps thebeer labels.The map shows up in Chrome, whichmeans our JavaScript is working.Look Ma, no Google Maps downloads.Why isn’t the map scaling likethe images on the page?

you are here 4 79responsible responsivenessThese widgets aren’t responsiveThe iframe code for Google Maps isn’tdesigned to be fluid. It hardcodes the widthto 300 pixels. I bet if we change the iframeto use CSS, we can make it fluid.Responsive Web Design is so newthat widgets like Google Maps areunlikely to be fluid by default.When companies provide widgets to embed in otherweb pages, they do everything they can to makesure the widget will work regardless of the pagelayout. That often means hardcoding things likeheight and width in the HTML itself.Dealing with poorly built third-party widgets is aproblem for nearly every mobile site. Responsivedesigns have an additional requirement thatwidgets be fluid.<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>Width and height are fixed, whichprevents the map from scaling.Many of the attributes on this iframe couldbe moved to CSS.Ideally, our HTML would only contain thecontent and markup. It wouldn’t contain anypresentation information.Which CSS properties map to theattributes used in the iframe?

80 Chapter 2use css for presentation<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>Move iframe attributes to CSS equivalentsLet’s move as many of the iframe’s attributes to CSS as possibleand make them fluid while we’re at it.First, we need to create a list of attributes we want to move to CSSby identifying which attributes are for presentation and which arecontent or metadata.MetadataPresentation Presentation Presentation PresentationPresentation Presentation ContentAll those presentation attributes belong in the CSS.Match styles to attributesSome of the attributes share the same name with their CSScomrades. We don’t have to look hard to find the CSS version ofwidth and height. Others, like frameborder, are obscureattributes. Fortunately, the CSS counterparts are still fairlystraightforward.#map {width:100%;height:100%;border:none;overflow:hidden;margin:0;}Our new CSS rulesfor the map iframe<iframeid="map"width="300"height="300"frameborder="0"scrolling="no"marginheight="0"marginwidth="0"src="http://maps.google.com..."></iframe>The iframe attributesTo make the iframefluid, we’re changingfrom a set numberof pixels to apercentage like welearned in Chapter 1.In CSS, scrolling iscontrolled by theoverflow property. Thissays we want to hide anyextra content insteadof adding scroll bars. Itaccomplishes the samething as scrolling = “no”.Add these rules tolayout.css.Do this!

you are here 4 81responsible responsivenessRemove attributes from the JavaScriptNow that we’ve got CSS doing the heavy lifting, let’s modify ourJavaScript so the presentation attributes aren’t set. Remove thelines that add the presentation attributes that we identified.<script type="text/JavaScript">var breakpoint = 481,id = mapcontainer,viewportWidth = window.innerWidth;if (viewportWidth > breakpoint) {var mapElement = document.createElement(iframe);mapElement.id = map;mapElement.width = 300;mapElement.height = 300;mapElement.frameborder = 0;mapElement.scrolling = no;mapElement.marginheight = 0;mapElement.marginwidth = 0;mapElement.src = http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=334+NW+11th+Ave,+Portland,+OR+97209&aq=&sll=37.0625,-95.677068&sspn=58.164117,80.332031&vpsrc=0&ie=UTF8&hq=&hnear=334+NW+11th+Ave,+Portland,+Oregon+97209&t=m&ll=45.525472,-122.68218&spn=0.01804,0.025749&z=14&output=embed;document.getElementById(id).insertBefore(mapElement,maplink);}</script>Find the JavaScript atthe bottom of ontap.html.Delete theselines from theJavaScript.Save layout.css and ontap.html. Load the On Tap Now page in Safari.You can use http://hf-mw.com/ch2/ex/6/ontap.html if it’s more convenient. Howdoes the map look?Test Drive

82 Chapter 2map misbehaviorNo one should have trouble finding the pub nowThe map got a little full of itself, didn’t it? It nearly took over the wholeleft column. Soon it will start singing, “I’m the map, I’m the map” to getour attention—unless we tame it.If you make the window narrow, you can begin to see why the mapmight be trying to get our attention. The map gets squeezed until itturns into a thin, tall strip that is completely unusable.We still want the map to scale, but we need to set some boundaries onhow far it scales in each direction.The height of the map is too big.Setting the height to 100% makes the map longerthan the tallest image on the page. Let’s keep themap a little more under control by setting theheight to 400px.1height: 400px;Add this line to the#map CSS rule.Hey look, the map is wearing skinny jeans.When the window gets narrow, the map gets so thinthat most of the information cannot be seen. We needto set a minimum width so that the map doesn’t gobeanpole on us.2#map {width:100%;height:400px;border:none;overflow:hidden;margin:0;min-width: 200px;}After addingthe two new lines,your #map rule inlayout.css shouldlook like this.These screenshots are fromSafari. Other browsers behavedifferently. The map isn’t doingwhat we want in any of them.

you are here 4 83responsible responsivenessThe map overlap is backThe map is covering up the beer labelsagain when the window is narrow.Moving the iframe presentation attributesinto CSS was the first step. Now we needto take a fresh look at our media queries.In Chapter 1, we used media queries to switch the layoutat 480 pixels. We determined that width based on thewidth of popular smartphones.What we’re seeing with the map is that we need to lookat the content of the page when we make decisionsabout where to apply media queries.I thought the whole reason formaking the iframe fluid was to get rid ofthe overlap. We’ve got everything in CSS now,but the map is still covering up the beer labelswhen you make the browser window narrow.

84 Chapter 2become one with your contentThere’s a problem with using 480 pixels as our breakpointfor the media query. Not every phone has the same width.And even if a majority of them do today, who’s to say that540 pixels won’t be the most common size in the future?A better approach is to let your content be the guide onwhen to make changes to the layout.We’re not asking you to commune with your content untilit starts to speak to you. But if you adjust the size of yourbrowser window until things don’t look right, the contentwill tell you a lot.Maybe images are getting too small. Maybe the columnsare too narrow.When those things happen, that’s where you need abreakpoint. Then you can craft a media query to changethe presentation at that breakpoint.Let the content be your guideWe shouldn’t pay so much attentionto typical mobile and desktop screensizes. When the content breaks thelayout, it is telling us to adjust ourmedia queries and JavaScript.

you are here 4 85responsible responsivenessTime to bend and stretch that browserWe need to put our content through its paces by making the page asbig and as small as we can while watching for when the layout breaks.But before we do that, we need some way of knowing how big thescreen is when something looks wrong on the page. The easiest way todo this is to install a bookmarklet that will show you the window size.A bookmarklet is a little bit of JavaScriptstored in a browser bookmark.The Window Size bookmark inSafari’s bookmark bar.When you click the Window Sizebookmarklet, it adds the size ofthe window in the upper-leftcorner.Install the bookmarklet in your browserGo to http://bit.ly/window-resize and drag the link labeled Window Sizeinto your bookmarks toolbar to create the bookmarklet. Click thebookmarklet to activate it. Resize your browser and watch the numberschange in the upper-left corner of the browser window.Optional: Install an extensionThere is an extension for Google Chrome that not only will showthe window size, but will also resize your window to match commonscreen resolutions. You can get it at http://bit.ly/chrome-resizer.The Web Developer Toolkit (http://bit.ly/webdevtoolkit) will displaypage size in the title bar along with a bunch of other useful tools.It works in Firefox and Chrome.clickLoad the On Tap Now page in the browser with the Window Size bookmarklet(or a browser extension). Activate the bookmarklet. Resize the browser.Write down the width of the browser when the layout breaks or thecontent looks odd.

86 Chapter 2sharpen solution610 pixels: Beer labels touch the map.At around 610 pixels, the labels touch the map.If we’re going to create a new breakpoint toaddress this problem, we’ll need to do it beforethey touch. This means instead of using 610,we’ll use 640 pixels as the breakpoint.1,200 pixels: Huge beer labels.As the browser gets wider, the beerlabels become ridiculously big.Where they become too big is anaesthetic judgment. For our tastes,they start getting too big whenthe browser is 1,200 pixels wide.Did you see other problems as you resizedthe browser? How significant do you think aproblem needs to be before it makes senseto address it with an additional media query?Let’s review some of the trouble spots that show upwhen you resize the browser.Where’s thewhitespace gone?

you are here 4 87responsible responsivenessBreakpoints to the rescueAll in all, not too bad. Just a couple of small tweaks to theCSS should do it.Shrink the humongous beer labelsThere are currently three beer labels in each row. When thepage gets wider, there is room for four beer labels per row.Create a media query for windows wider than 1,200 pixelsthat changes the beer labels to four across the page.@media screen and (min-width:1201px) {.taplist li {width: 25%;}}This change only happens if thewindow is bigger than 1,200 pixels.Setting the width of the list item (li)containing the beer labels to 25% willput four labels on each row. Add these rulesto layout.cssGoing to one column soonerEven if the beer labels didn’t overlap with the map, thelayout is getting very crowded at 640 pixels. Insteadof adding a new breakpoint to address the overlap, wecan move our existing media query from 480 pixelsto 640 pixels.Making this change will convert the layout to a singlecolumn and hide the map. This has the added benefitof applying the single-column layout to phones biggerthan 480 pixels.<link rel="stylesheet" type="text/css" href="layout.css"media="all and min-width: 641px)">Set min-widthto 641px.ontap.html<script type="text/javascript">var breakpoint = 641,...</script>/* Mobile/lower-resolution devices*/@media screen and (max-width:640px){Set breakpointin JavaScriptto 641px.taps.cssSet max-widthto 640px.It’s common to make images smallerproportionally as screens get wider.Our HTML, JavaScript, and CSS all reference480 pixels, so we’ll need to update all three.

88 Chapter 2slimline, responsive—it’s a whole new walrusWidescreen view with four beer labels per rowNarrower views go to onecolumn and hide the map.Lightweight andfast on mobileOur mobile-first responsive design is completeYou can usehttp://hf-mw.com/ch2/ex/8/ontap.htmlto run your own speed tests.Make the HTML as simple as possible and swap the order of the CSSso that the mobile version is first.Fix CSS background images so that only one file gets downloaded perimage. Make sure display:none is being used appropriately.Supply different source files for <img> tags at different screenresolutions. Make sure the right size image is downloaded.Use JavaScript to add Google Maps to the page when the browser cansupport it and the document is wide enough to accommodate it.You guys rock! The pageis fast and looks great.Drinks are on the house.

you are here 4 89responsible responsivenessQ:What exactly is a viewport?A:Imagine taking a sheet of cardboardand cutting out a rectangle in the middle ofit. Lay that rectangle over your monitor soyou can only see the portion of the web pagethat shows through the rectangle. That’swhat a viewport does for web pages.Q:So the viewport <meta> tagtells the browser what size to make theviewport?A:Exactly. By default, iOS sets theviewport to 980 pixels. If you’ve optimizedyour page for smaller screens, settingthe <meta‑viewport> tag lets thebrowser know to set the viewport accordingly.Q:What are breakpoints?A:Breakpoints are just a fancy way ofdescribing the resolution at which a designerdecides to change the layout of a page. Thisis usually done via media queries checkingto see if a page is narrower or wider than acertain number of pixels.A complex responsive design may havemultiple breakpoints, including some thatmake wholesale changes to the layout aswell as some minor breakpoints that onlymake a few targeted tweaks to fix minorlayout issues.Q:I don’t want to prevent peoplefrom zooming, but that iOS bug is prettyheinous. Is there any way to enablezooming and not have a broken page?A:You can find a JavaScript workaroundat https://gist.github.com/901295.Q:Why does the overlap with the mapoccur in the first place?A:Because the map is an element thatdoesn’t scale with the browser window.When the window is small, the browser can’tscale the map any smaller, so the left columnends up overlapping the right column.Q:Doesn’t adding a min-widthto the map break the responsive designby creating an element that doesn’t scalewith the browser window?A:Technically, yes. It seems like a decentsolution here because we’ve modified themedia queries to address overlappingcontent. Another option would have been touse media queries to adjust the dimensionsof the map and proportions of the columns. Adding media queries to an existing desktop site maymake it look good on mobile, but doesn’t mean that it ismobile optimized. Because most mobile browsers don’t support plug-ins,there are fewer tools to assist mobile web developers. Using a proxy server or a testing solution like BlazeMobitest can help you see what is actually gettingdownloaded by a mobile browser. HTTP archive files and waterfall charts are essentialperformance tools. Mobile-first Responsive Web Design helps optimizeweb pages by making sure that smaller resources aredownloaded by default. Mobile-first RWD is another form of progressiveenhancement that uses screen size to determine howto enhance web pages. Designing for mobile first forces you to focus on whatreally matters, thus helping you remove cruft frompages. Internet Explorer 8 and below do not support mediaqueries. Conditional comments are a workaround. JavaScript can augment media queries by testing forscreen size and adding content when appropriate. Instead of designing breakpoints based on the typicalscreen resolutions, let the content dictate theresolutions at which you need to modify the layout.

this is a new chapter 91Beautiful, harmonious,responsively designed websitesthat work for all browsers anddevices known to man...was it allbut a wonderful dream?a separate mobile website3Facing less-than-awesomecircumstancesThe vision of a single, responsive Web is a beautiful one...in which every site has one layout to rule them all, made lovingly with a mobile-firstapproach. Mmm…tasty. But what happens when a stinky dose of reality sets in? Likelegacy systems, older devices, or customer budget constraints? What if, sometimes,instead of mixing desktop and mobile support into one lovely soup, you need to keep’em separated? In this chapter, we look at the nitty-gritty bits of detecting mobile users,supporting those crufty older phones, and building a separate mobile site.

92 Chapter 3creature comfortsCreature Comforts has agents in the fieldCreature Comforts International is a worldwide, nonprofit agency thathelps treat sick or injured livestock in areas hit by natural disastersand provides support to affected farmers and ranchers. Until recently,the organization relied on voice communications or the occasionalruggedized laptop for their agents to coordinate personnel and supplies.Creature Comforts servesa lot of areas where the health andsafety of livestock is tantamount tothe citizens’ financial well-being andrecovery after a disaster.Creature Comforts’VP of CommunicationBut being able to access andexchange information—quickly—aboutpeople and supplies in our system isgetting harder as we grow.

you are here 4 93a separate mobile siteHow can agents get and share the infothey need?Creature Comforts is not a new organization; its roots go back overtwo decades. It already has a lot of internal infrastructure, includinga significant “traditional” web presence built on a proprietary contentmanagement system (CMS)....but our currentwebsite doesn’t look good orwork well on mobile phones.We’ve got peopleworldwide who need tostay in touch and get informationwhile in the field. We have webtools for that already...An increasing need for mobile webIncreasingly, the Creature Comforts staff is finding that the mostreliable—and often only—connectivity in the field is via the localcellular network. Land-based Internet connections are hard to find,require more equipment, and restrict mobility.Creature Comforts needs a mobile website: one that can support awide array of devices on a wide array of connections.

94 Chapter 3sometimes separation makes senseFrank: I’ve got a bit of bad news. Creature Comforts doesn’t havea very big budget. There are some internal politics involved. And itwould take a huge effort to extract the group’s administrative andcontent‑publishing processes from its older, proprietary CMS. We can’ttouch the desktop site, at least for now.Jim: Doesn’t that make our job impossible?Frank: No, but it might require a bit of compromise. CreatureComforts’ website is big and complicated, but the only part the groupfeels it is vital to make mobile-optimized is its so-called ComfortsLogistics Portal. This web application lets agents give and receiveupdates and coordinate scheduling and supply drops. This part of thedesktop website is relatively contained and has APIs that we can use.Jim: I don’t get it. How do we selectively change only part of the site?Frank: In this case, I think we’re going to need to develop a separatesite for mobile users.Jim: That sounds messy.Frank: The mobile web can be a messy job. You know that. We needto make this work, and work reliably, for a lot of people scatteredaround the globe. This is not the spanking-new-smartphone crowd,either. A lot of the staff members’ devices are donated, older phones,and the mobile connections in some of the areas they serve are spottyat best. We need a lean, simple, and functional mobile website thathelps these folks get their jobs done. We simply can’t wrangle theirexisting desktop stuff into what we need.Sometimes it makessense to create aseparate, standalonesite for mobile devices. Scared of programming?Don’t sweat it too much.There is some talk of APIs and webapplications whirling around, butwe won’t make you do any of the heavy lifting. Leavethe programming up to us—your job is to help usmake it look good and work well on the mobile web.JimFrankThis sounds like a great project. Can’t wait to get inand make the agency’s CMS deliver more mobile-friendlycontent and use some responsive design goodness.

you are here 4 95a separate mobile siteQ:What does a content management system (CMS) do?A:A web CMS is a combination of editing, publishing, and rightsmanagement tools for creating and managing web content. SomeCMSes are quite full-featured and provide an environment fordeveloping web applications quickly (sometimes these are calledcontent management frameworks, or CMFs).CMSes let administrative users, who might not be familiar with HTMLmarkup or web design, create and manage content.There are CMSes in both the open source and commercial spaces,written in every programming language you can think of. Examplesinclude WordPress, Drupal, DotNetNuke, Joomla!, and SharePoint.Larger or specialized organizations sometimes create their own CMSsoftware.Most CMSes also handle the publishing of content, using templatingsystems or other mechanisms. This can make the transition tosupport mobile devices tricky, as, in many cases, the content istangled up with presentation layers.This is the situation with Creature Comforts. Its CMS, designedseveral years ago, has only one set of templates. Retoolingthe system from the ground up would be too expensive for theorganization right now.Q:Is adapting for mobile devices a problem with every webCMS?A:The number of CMSes out there is bewildering. Some are moreeasily adapted for mobile devices than others. The problem of mixingcontent, logic, and presentation is certainly one suffered by manypopular CMSes.The development communities and companies behind many CMSesare actively working on subsequent releases that are optimized fordelivering content to different types of clients. And forward-thinkingfolks in the mobile web world are reimagining ways of structuringcontent—treating content more systematically, like application data,to makes its reuse across multiple platforms more straightforward.APIs Up CloseAPIs (application programming interfaces) are systematized,clearly defined interfaces created so that different software systemscan talk to one another. An example of a popular API on the Web isthe Twitter API. The Twitter API defines a set of methods that webprogrammers can use to retrieve and alter data in the Twitter system.The Creature Comforts web application team coded the part ofthe website that allows agents and admins to manage people andsupplies among the far-flung teams. As part of this development, theteam created an API that can be used to get and update informationfor team members and materials.The API returns structured data that our mobile web dev team canuse to build a mobile web version of the Creature Comforts site.Unlike its CMS, CreatureComforts’ API doesn’tconflate logic and presentation.So it will make our mobileoptimization a lot easier.

96 Chapter 3hold while your request is redirectedSend mobile users to amobile-optimized websiteDifferent kinds ofdevices and browsersrequest the website (e.g.,www.example.com).A script on the web serverexamines the incoming requestand attempts to determinewhether the client is mobile.Mobile clients are redirectedto the mobile site.Desktop clients stay on thedesktop-oriented site.m.example.com www.example.comSometimes it’s necessary to have a separate websitefor mobile devices and desktop browsers. Often,you’ll want your users to be able to go to a singledomain—e.g., www.example.com—and automaticallyget routed to the appropriate site based on theirdevices.www.example.com

you are here 4 97a separate mobile siteSniff out mobile usersTo make this setup work—rerouting mobile devices to themobile-optimized site—the web server needs to know if anincoming request comes from a mobile device or not.How can you “know”which browsers are mobile?We’re going to make a stab atdetermining whether a user ison a mobile device or not bylooking at the User-Agent HTTPheader sent by the browser.There are other techniques, but user-agentdetection is a very common server-sideapproach for device detection.A user-agent string is apiece of text that servesas a sort of ID card fora client application (inour case, web browsers).Each unique browser isa unique user agent.This technique is commonlycalled “user-agent sniffing.”“User agent” is oftenabbreviated to “UA.”

98 Chapter 3user-agent sniffing (seriously)Getting to know user agentsMozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, likeGecko) Chrome/14.0.792.0 Safari/535.1Why would the user agent for Chrome on Windows mention Safari? What’sKHTML, and how is it “like” Gecko? Like your appendix or the stumpy legremnants in whales, some of this is evolutionary cruft.The vestigial “Mozilla compatibility flag” (Mozilla/5.0 in the example above) ispractically omnipresent to this day, though it doesn’t mean much anymore. Mentionsof Mozilla, KHTML, Gecko, or WebKit are UAs’ way of claiming that their layoutengines are comparable to or “better” than those. At the time of this writing, allWebKit-based browsers on mobile devices except for Android mention “Safari” intheir user-agent string (Apple originally developed WebKit, basing it on KHTML).Web browsers—and, yes, that includes mobile browsers—send a User-Agentheader as part of the HTTP request whenever the browser sends a requestfor a web page or resource.User-agent strings have long been used (and misused) by webmasters to identify(and misidentify) browsers. Way back in the misty history of the 1990s, so-calleduser-agent sniffing was the bane of millions of users faced with ubiquitous “Thissite better viewed in Internet Explorer” (or Mozilla or Netscape or whatever thepreferred browser flavor was at the time).Chrome 14 running onWindows Vista…of course!User-agent archaeologyThe structure of user-agent strings today is a curious and sometimes confoundingpatchwork of convention, confusion, and trickery. Full order has never successfullybeen imposed over how they are written. So you can end up with things like:Request lineRequest headersRequest body (if any)Simplified structure of an HTTP requestHost: www.example.comAccept: text/html,application/xhtml+xml,application/xmlAccept-Encoding: gzip,deflate,sdchReferer: http://www.example.com/fooUser-Agent: Opera/9.64(Windows NT 5.1; U; en) Presto/2.1.1GET /pretty.png HTTP/1.1

you are here 4 99a separate mobile siteMozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML,like Gecko) Chrome/14.0.792.0 Safari/535.1Let’s take a deeper look at the pieces of some real-lifeuser-agent strings.Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0;Trident/3.1; IEMobile/7.0; SAMSUNG; SGH-i917)BlackBerry9700/5.0.0.442 Profile/MIDP-2.1 Configuration/CLDC-1.1VendorID/612Chrome 14 running onWindows Vista (we metthis on page 98).A Samsung phone runningWindows Phone 7A BlackBerry9700 (Bold)User Agents Way Up CloseMozilla/5.0Mozilla/4.0Windows NT 6.0Windows Phone OS 7.0BlackBerry9700/5.0.0.442IE Mobile/7.0Chrome/14.0.792.0AppleWebKit/535.1Trident/3.1KHTML, like GeckoSafari/535.1MSIE 7.0Profile/MIDP-2.1SAMSUNG; SGH-i917Configuration/CLDC-1.1VendorID/612Browser name and versionLayout engine (Tridentis IE’s layout engine).Platform, OS, and versionThis browser is“compatible with”or historicallybased upon…Java runtime formobile devicesJava ME frameworkspecificationIdentifies thevendor/carrier…miscellaneous elementsAnalyze some of the piecesThis Samsung sends modelinfo. While not rare, thisisn’t necessarily common.

100 Chapter 3whats my purposeLayout enginePresto/2.1.1You’ve seen a few user-agent strings dissected. Now you try it. Match each snippet,extracted from the user-agent strings above, to its purpose.Mozilla/5.0 (Linux; U; Android 2.1; en-us; ADR6200 Build/ERD79)AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en-US) AppleWebKit/534.1+(KHTML, like Gecko) Version/6.0.0.246 Mobile Safari/534.1+Opera/9.64(Windows NT 5.1; U; en) Presto/2.1.1Apple WebKit/534.1+Windows NT 5.1Mozilla/5.0Version/6.0.0.246KHTML, like GeckoOpera/9.64Layout engineOS, platform, and versionHistorical/compatible flagHistorical/compatible flagBrowser versionBrowser name and version32Answers on page 102.1

you are here 4 101a separate mobile siteUser agents: spawn of Satan?So, if we use user-agent sniffing tofigure out which devices are mobile,isn’t that just enforcing the sameold bad behavior that created theuser-agent mess in the first place?Well, sort of.Utter the term “user-agent sniffing” loudly in a room full ofweb developers, and you’ll invariably get some stern looks ofdisapproval and a couple of urgent, strangled sounds.User-agent sniffing rubs a lot of developers the wrong way. We’vealready seen how complex user-agent strings can be. In addition,user-agent spoofing, in which a user (purposely or not) configureshis or her browser to send a different UA header, is common. Andthere are thousands upon thousands of unique UAs, with moreentering the market every single day.Detecting mobile browsers by sniffing user agents on the servercan definitely seem like an inelegant and inaccurate hack. Butsometimes it’s the best (if crude) tool for the job.Can you think of some reasons why user-agentsniffing might be a necessary evil?

102 Chapter 3exercise solutionSOlUTion Not all user-agentstrings followconsistent patterns.Some user-agent stringsmake a lot more sensethan others. User agents don’t alluse the same constituent parts, andsome are outright peculiar. There aresome basic patterns that most follow,but don’t rely on that too much. Don’tworry! We have some good tools toaccount for (most of) this.Layout enginePresto/2.1.1Apple WebKit/534.1+Windows NT 5.1Mozilla/5.0Version/6.0.0.246KHTML, like GeckoOpera/9.64Layout engineOS, platform, and versionHistorical/compatible flagHistorical/compatible flagBrowser versionBrowser name and versionPresto is theOpera browser’slayout engine.What browsers are these?Curious about the example user-agent strings used for thisexercise (on page 100)? Here are the clients they came from,unmasked for you:A Droid Eris (aka HTC Desire) Androidphone running the Android 2.1 browser1Opera 9 running on Windows XP2BlackBerry 9800 (Torch) running theBlackBerry OS 6 browser3Compare the BlackBerry Torch (OS 6) UA on page 100against the BlackBerry Bold (OS 5) UA on page 99.Different, huh? As of OS 6, BlackBerry browsers usethe WebKit layout engine, and their UA strings look alot more like other WebKit browsers.

you are here 4 103a separate mobile siteQ:What about the other parts of user-agent strings on page 99 that you didn’texplain? What does en-us mean? Whatdoes U mean?A:The “en-us” is language information,and means that the browser and its interfaceelements are localized for English, US-style. The “U” indicates that the browserhas “strong” security (as opposed to “I” for“weak” security, or “N” for no security at all).To analyze other various bits of user-agentstrings like this, make a trip to the ever-so-useful www.useragentstring.com.Q:Is there seriously a different useragent for every build, release, version,platform, device, whim, and vendor outthere?A:Pretty much.Q:Does anything else sendUser‑Agent headers besidesbrowsers?A:Several other kinds of applicationsthat make requests to web servers alsosend User-Agent headers. Theseinclude, but aren’t limited to, search engines,crawlers, and various Internet bots (bothbenign and nefarious). Sometimes webserver logs capture user-agent informationabout unusual things that are accessingour sites, like a web viewer built into, say, anote-taking desktop application, or a webbookmarking tool, or a monitoring service thatpings a site to make sure it is operational.Q:Why would people “spoof” theirbrowser’s user agent?A:Why would anyone purposely asktheir browser to “lie” for them, you ask?A few reasons. Two common motivationsare privacy and the desire for a specificexperience. Some users don’t want to shareinformation about what browsers they areusing. In other cases, a user might wantto try to see web content in a particularway. A popular example is the “desktopmode” available in several mobile browsers.By turning this on, users are often (andsometimes unknowingly) causing thebrowser to send a different User-Agentheader, one that looks more like a desktopbrowser. Sometimes this is done sanely,and is just fine—Windows Phone 7 desktopmode user agents are relatively easy to spot.But not always. Take a look at the user-agent string that one of the Android versionsof the mobile browser Skyfire sends when indesktop mode:Mozilla/5.0 (Macintosh;U; Intel Mac OS X 10_5_7;en-us) AppleWebKit/530.17(KHTML, like Gecko)Version/4.0 Safari/530.17If that looks an awful lot like desktop OSX Safari, that’s because that user agentis completely identical to one of the useragents for desktop Safari.Q:But if someone has gone to thetrouble of disguising his mobile browseras a desktop one, shouldn’t we respecthis wishes and give him a desktopexperience?A:Though this is a delicate question ofphilosophy, we tend to lean toward “yes,”and fill in the gaps with responsive design(which will adapt to the environment nomatter who or what the browser claims to be,assuming the browser is modern enough tosupport media queries and the like). There’sa bit of a gray area in terms of whether usersknow what they’re doing or not, but, hey, asfar as we’re concerned, you should get whatyou ask for. Disagreement abounds betweendevelopers on this point. There be dragons.Tread lightly.Q:Hey, you totally neglected tomention UAProf.A:Many mobile devices send UAProf(User-Agent Profile) headers when makingrequests, often (but not always) as thex-wap-profile request header. TheUAProf specification gives mobile handsetmanufacturers a way to provide informationabout the device. Usually, a link to thelocation of the UAProf is provided in therequest header.This sounds pretty good, but unfortunately,not all devices and browsers send UAProfheaders. Additionally, a rather unpleasantpercentage of the links to UAProfs arenot valid. And there is inconsistency in theamount and quality of the data in the UAProffiles themselves.Q:OK, so, there are a million billionuser agents and UAProfs aren’t allthat reliable, yet you claim that thereis a sane and reasonable way to douser‑agent‑based detection?A:In Chapter 5, we’ll be meeting someorganizations and projects whose entireexistence is concerned with tracking useragents and building databases of metadataabout them and other data sources likeUAProfs. Until then, we’ll keep it simpleand use a basic server-side script to lookfor user-agent strings that bear the primaryhallmarks of mobile browser user agents.

104 Chapter 3user-agent sniffing isnt all badStraight talk: Most major sites have aseparate mobile websiteThe majority of the world’s biggest websites have a separate mobile site,and a majority of those use some form of user-agent sniffing to routetraffic. If user-agent sniffing is so derided, why is this the case? Theremust be some goodness in the user-agent approach.Some things seem more natural on the server side…Redirecting incoming traffic to a mobile site is something that fitsnaturally on the server side. If we’re sending mobile requests off to aseparate site—something that we’ll need to do for Creature Comforts—decisions are best made before content is sent to the client.…and the User-Agent header is our best clueThe User-Agent header, while imperfect, is the moststraightforward and reliable clue the server has about therequesting browser. There are a few other HTTP request headersthat provide hints to a client’s “mobileness,” but none so ubiquitousas that maddening User-Agent header. It’s the best option in apile of not‑so‑great alternatives. And, while we’ve gone to certainlengths to point out where user-agent sniffing can go wrong (hey,devil’s advocate!), most of the time it can be used accurately, especiallywhen wielded responsibly.We can use a simple, freelyavailable script to performbasic mobile devicedetection.OK. Say we do build a separate mobilesite. How exactly are we going to see the useragents of requesting browsers...and how are wegoing to get the mobile traffic to the new, mobileversion of Creature Comforts?

you are here 4 105a separate mobile siteWhen what you really want to do is (re-)directWouldn’t such a scriptneed to go on Creature Comforts’existing(desktop) web server so it candetect mobile browsers and redirect themto our mobile site? I thought we couldn’tmake any changes to the existing site.Good catch. Fortunately, Frank andJim have been able to work withCreature Comforts’ IT department.We’ll be able to put a simple redirect script onthe agency’s existing web server. The web teamat Creature Comforts will include the mobiledetection script at the top of each page, so thatmobile traffic can be redirected.Get ye to the scriptTime to make a quick trip towww.detectmobilebrowsers.com. There you’llfind a free, simple mobile detection script.We want to be sure you have the latestversion, so go get it now! Make sure todownload the PHP version.The script is available formany different languagesand platforms. We want thePHP version.

106 Chapter 3script tamingTake a peek at the script<?php$useragent=$_SERVER[HTTP_USER_AGENT];if(preg_match(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i,$useragent)|| preg_match(/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt|kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-/i,substr($useragent,0,4)))header(Location: http://detectmobilebrowser.com/mobile);?> The script might look a bitbeastly right now, but we don’thave to do much to tame it.When you first open updetectmobilebrowser.php in your preferred text editor, youmight find it a bit…brutal-looking. But fear not. We’regoing to walk you through the basics of how it works,but, really, all you have to do to get it to work is make acouple of small changes—and we’ll show you how.123detectmobilebrowser.php.txtThis is the script!The one youdownload mightnot look exactlythe same (itmight be a newerversion), but itshould be similar.Do this!Rename this fileredirect.php and save itinside the chapter3 folder.

you are here 4 107a separate mobile siteIt grabs the requesting browser’s user-agent string.In PHP, this is accessible in the global$_SERVER[HTTP_USER_AGENT] variable.1It uses some carefully crafted regular expressions.There are two regular expressions here. Both look at theuser-agent string and see if it matches known mobile values.You can probably spot some obvious snippets like “hiptop” or“symbian.” But there are some more obscure things in here aswell—these regular expressions were developed by people whoreally know the mobile landscape!2It redirects browsers whose user-agent stringmatches either of the regular expressions.If the browser’s user-agent string matches either of theregular expressions, the script sets a Location header withthe designated place to redirect mobile traffic.3How does the script work?The script examines the user-agent string and determineswhether it seems mobile—and if so, it redirects. It doesthis in three steps:By default, mobile traffic is redirectedto www.detectmobilebrowser.com/mobile —we’ll need to change this.Make sure your workingenvironment is seaworthyA few safety checks before we continue!The next sections—and many more in thebook—require you to have a working webserver that allows you to use PHP. Thiscan be your own computer, or you canuse a hosting provider; we’re not picky.But if you haven’t done so yet, go now toAppendix ii and find information abouthow to get yourself squared away.A regular expression, a.k.a.“regex” or “regexp,” is aformal means of matchingpatterns in strings.

108 Chapter 3tweak your redirect scriptJim: Hey, Frank, how are you going with getting started on Creature Comforts’mobile site?Frank: I thought it might be a bit much to try to handle writing code to workwith the agency’s APIs and do the mobile design at the same time, so I’vewhipped up some quick mockups for us to start with. One thing at a time, right?Jim: Sounds good. Did you use responsive stuff?Frank: Well, yes and no. I used proportional widths, but figured we’re workingwith older phones that might not understand media queries and other thingsthat make responsive designs work so well. I took the desktop HTML templatesfor the current Agent Portal landing page dashboard thingy, simplified the heckout of them, and refactored the CSS to be mobile-friendly. I used some sampledata so we don’t have to worry about functionality or APIs or anything for now.Jim: What about the mobile device detection and redirect script? How are wegoing to test that?Frank: Well, you heard that we’ll ultimately put it on Creature Comforts’ serverand those folks will call it from every page they serve. But for now, we’ll want totest it locally to check out how the redirect will behave.<?php$useragent = $_SERVER[HTTP_USER_AGENT];$mobile_location = http:// . $_SERVER[HTTP_HOST] . /index_mobile.html;if(preg_match(...))header(Location: . $mobile_location);?>A few tweaks to the mobile redirect scriptWe’ll need to make a few customizations to the redirect script so that we can see itin action. We’ll want to add a new line to define where the script should redirectif it sees a mobile user. The PHP $_SERVER[HTTP_HOST] variable is thename of the web host that the script is running on.We’ll also want to edit the line that sends the Location responseheader—we want to redirect mobile traffic to our mobile mockup, not thewww.detectmobilebrowser.com site.The name of the web host (e.g.,“www.example.com,” “localhost,”or “10.0.0.2” or somesuch ifyoure doing your work on yourown computer)Make a mobile mockupJust as there are requestheaders (like User-Agent), HTTPresponses (sent back by theserver) also have headers.redirect.php

you are here 4 109a separate mobile sitePut the contents of the chapter3 folder at the root ofyour web server.If you don’t want to put the files at the document root, no biggie. Just besure to update the path in the line that defines $mobile_location.1Make the edits from page 108 in the redirect script.Open the redirect script again in your text editor (if it’s not openalready). Make the edits in the script and save it.2Edit index.php.Add the following line to the very top of the index.php file:<?php require_once(redirect.php); ?>Save the file.3View the mockup in a mobile browser (emulator or real life).4The mockup viewed onan iPhone 4—simple,but it works. These are just mockups.The mobile mockups we’ll be usingthroughout this chapter are just that—mockups. They use sample data torepresent what the site will look like when “plugged into”real data APIs. The data represented is imaginary, andmany links aren’t functional. Don’t worry about it!There’s noneed for PHPprocessing in thisfile, so we’ll justmake it .html.index.phpchapter3index_mobile.htmlredirect.phpstyles.csscows.jpgCSS backgroundimageextrasStuff for later;ignore for now.This is theredirect scriptyou downloadedand edited.Test DriveCopy the contents of thechapter3 folder to your webservers document root.

110 Chapter 3opera miniSpecial delivery…of complicating factorsHey, Frank. I checked with theteam that handles distributing phones toour staff, and it says that a lot of the phones arerunning a browser called Opera Mini.I also overnighted you a package of some of thecommon phones we’re using so you cantest them out.Because it’s made to supporta wide range of (oftenlower-end) phones, OperaMini acts a bit differentlythan full-featuredsmartphone browsers.Opera Mini, huh?Hotshot browsers like BlackBerry’s WebKitbrowser and iOS’s Safari get a lot of glory, butdon’t discount Opera Mini! The sister browsersOpera Mini and Opera Mobile are the mostpopular mobile web browsers in the world.In the middle of 2011, for example, Operareported over 110 million users. Thataccounted for more than half of mobile webtraffic in India, and over 90% of mobile webtraffic in Nigeria.Opera Mini is especially popular in places whereconnectivity is slow, or data is expensive or limited.Opera Mini is actually a mobile transcoder.This means that when a user goes to a web pagein Opera Mini, the request is routed throughOpera’s servers, where web pages and resourcesare compressed and optimized for mobile devices.This optimization means fewer bytes are ultimatelydelivered to the device—resulting in a faster (andoften cheaper) experience.Opera Mini isn’t just adeveloping-world concern. It’salso quite popular on featurephones in the US and Europe.

you are here 4 111a separate mobile siteLet’s see how the mobile mockup looks in the Opera Mini 4.2 simulator. Use the web-embeddedOpera Mini simulator to view the mockup at http://hf-mw.com/ch3/ex/1/.Make some notes about what looks different (or, alas!, broken). Can you find at least four differencesbetween the way the mockup looks in the Opera Mini simulator versus the iPhone or Androidsimulator (page 109)?Do this!We’re going to be looking at the mobile mockup in Opera Mini4.2. Fortunately, Opera has a convenient, web-based simulator(it’s a Java Applet) that you can use. Point your web browser at:http://www.opera.com/mobile/demo/?ver=41324Cool. It’ll be handy to have thesephones on hand for testing. On theother hand, wow. Some of these phones arepretty old and obscure...and I wonder how themockup will look on Opera Mini.

112 Chapter 3exercise solution123The mockup looks pretty different in Opera Mini 4.2, huh? Let’s look at some ofthe places where it differs or is weird. We found five trouble spots.The <h1> and <h2> tags are not styledand are quite small. Because of this, thebackground image in the header seemskind of silly.1Text formatting is not getting appliedvery well. Italic text is not italic, andbold text is not bold.3Instead of rounded corners, we getsquare ones.4The status message uses overflow:scroll, which is an absolute no-no on allmobile devices. Content is cut off, andscrolling is not working.5We can’t reallystyle any of theheading elementsin Opera Mini.This one’s a doozy.Bonus points ifyou noticed thison the iPhone orAndroid already!3452The entire page is too wide and disappearsoff the right side of the screen.2Q:Why do I have to view this example on http://hf-mw.com?Why can’t I use my own copy?A:Opera Mini is a proxy browser. That means that all web trafficgoes through an Opera server. So, the example mockup and othercode bits have to be hosted somewhere that Opera’s servers canreach.If you are doing your work on your own computer, you may well havean IP address that is not visible to the entire Internet (a so-calledinternal IP address only visible to the network you are connected to).If you are doing work on a hosting provider or otherwise have theweb pages for Creature Comforts on an externally accessible webserver, you can certainly use your own copy.

you are here 4 113a separate mobile siteNot all phones are smartphones…not by a sightIn many of the countries that Creature Comforts works in, seeing asmartphone is a rarity. In India, smartphones sales are projected to be lessthan 6% of the total phones sold during 2011. No big deal…right?How many phones does India have, anyway?As of August 2011, India had over 850 million mobile phone subscribers.This makes India second only to China in total number of mobile phones.While smartphones are a rarity in India, mobile phonesare more common than toilets!This is no joking matter. The UNissued a report comparing theeasy access to mobile phones topoor sanitation infrastructure.Emerging markets aren’t the only places wherefeature phones outnumber smartphones.Only recently did the sales of smartphones exceed featurephones in the United States. Sometime in 2012, smartphoneswill finally represent the majority of phones in America. Thesame is true of most European countries.When you see reports about the explosive growth of smartphones,keep in mind that even with that growth, it will take quite sometime before all of those old phones have been replaced.And, hey, feature phones aren’t all that badSure, they cause us heartache with their older, quirkier browsersand often poor connections, but feature phones have made ahuge difference in the lives of many people around the world.If you want to see some serious innovation, travel to a countrywith an emerging market and watch how they use mobile phonesfor everything from farming to banking.For many, a phone isn’t a cute, pocket-size, lesser version of amodern computer. It is their primary connection to the world.What if my users aren’t in India? In theUS, everyone uses smartphones. I shouldn’thave to worry about those feature phones.

114 Chapter 3meet xhtml-mpLet’s keep it basic: Meet XHTML-MPIf you look again at index_mobile.html, you’ll see that themockup currently uses this DOCTYPE declaration:<!DOCTYPE html>That’s the DOCTYPE for HTML5, an excellent and excitingchoice for robust websites and web apps in this modern world,but not necessarily right if we want to reach and support thekinds of mobile devices that the Creature Comforts staffmembers use. It’s time to introduce you to our newest friend,XHTML Mobile Profile (XHTML-MP).XHTML-MP is a flavor of XHTML developed specifically tosupport mid-level and feature phones with fair to middling webbrowsers. It’s a few years old now—and increasingly overlookedin favor of its sexier, younger cousin, HTML5—but it’s still usefulfor projects like the Creature Comforts mobile site.<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN""http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">Ready BakeDOCTYPELet’s convert the mockup page to be an XHTML-MP document. Edit theindex_mobile.html file and replace the HTML5 DOCTYPE (top line of thefile) with the following two lines:This is the DOCTYPE forXHTML-MP version 1.2.That’s the most recent version.And yes, we know we said“two lines,” but it doesn’t allfit onto the page.XHTML Mobile Profileis a subset of the desktop(X)HTML you know and love.It’s a streamlined version ofHTML designed to performwell on a lot of differentmobile browsers. And alot of mobile browsers aredesigned to support it.XHTML-MP is a kindof XML, so we need thisXML declaration, too.index_mobile.html

you are here 4 115a separate mobile siteWhy would we want to use that old thing?All we did was change theDOCTYPE declaration. Thatseems totally pointless. Whycan’t I just use HTML5?…but something actually did happen as aresult of our DOCTYPE change.If you load http://hf-mw.com/ch3/ex/2 in the OperaMini 4.2 simulator, you’ll see a striking change.Explicitly using XHTML-MP as our DOCTYPEchanged the way the browser behaves!No longer do we have the content escaping the boundsof the page. Instead, the buttons and floats all fit withinthe page width.Turns out, Opera Mini takes the HTML5 DOCTYPEas a “hint” that it is supposed to behave a bit morelike a desktop browser. That means layout that haspercentage-based widths—responsive layouts, forexample—might not work exactly as we expect.Hey, look at that!The content fits onthe screen now.We admit it. On the surface, usingXHTML-MP doesn’t seem very thrilling…It doesn’t support some of the things we like to usein our HTML, and modern phones are increasinglysupportive (or at least tolerant) of HTML5 markup. Our job is not done here:we can’t just change theDOCTYPE and call it a day.We’ve changed the DOCTYPEto XHTML-MP, but that doesn’tmean that the markup is valid XHTML-MP markup. We also need to make somechanges to our code to make it actuallyXHTML-MP.

116 Chapter 3mobile-specific DOCTYPE benefitsIt ensures support on many older mobile browsers.Though most mobile browsers won’t choke and die when they encounteran HTML5 document, they might. And some of the features supportedin HTML5 just plain won’t work on a lot of older phones.1It reminds us of potential mobile pitfalls and keeps us honest.If a feature isn’t supported in XHTML-MP, there is quite likely a reason. UsingXHTML-MP and staying within its bounds keeps us from wandering off intodangerous territory. Just like mobile-first RWD keeps us focused on constraints,cleanliness, and the tasks at hand, so too does XHTML-MP provide aframework within which to create a widely supported mobile website.2Q:Apparently I missed the memo. What’s a DOCTYPE?A:A DOCTYPE (more formally, a document typedeclaration) is a short piece of text at the top of SGML and XMLdocuments that informs the client (i.e., browser) which DTD toevaluate the document against.Q:Too many acronyms. SGML and XML documents?DTD?A:HTML is descended from SGML (Standard GeneralizedMarkup Language), while XHTML is a kind of XML (and thusis more rigidly structured than its “X”-less kin), so both warrantDOCTYPEs.Document type declarations (DTDs) are formalized definitionsof what elements (tags, attributes, etc.) are allowed, and where,in the type of document they describe. Each specification ofHTML and XHTML has its own DTD.Nominally, associating a document with its intended DTD wouldallow the rendering client to go validate the document againstthat DTD. In real-life web browsers, this doesn’t happen—webbrowsers never actually go out and validate against DTDs.Q:So what’s the point of a DOCTYPE, and why dobrowsers insist on them?A:Browsers perform a kind of “sniffing” (not too differentfrom our own user-agent sniffing earlier) on DOCTYPEs.While they don’t formally validate documents, they use theDOCTYPE as a hint about what “mode” to assume and how torender the content.Remember the Opera Mini situation, wherein changing theDOCTYPE from HTML5 to XHTML-MP (or XHTML-Basic)caused the layout mode to change? That’s a good example ofthis at work.Other browsers use the DOCTYPE to determine whether torender the content in “standards” mode or in “quirks” mode, abackward-compatible, more tolerant mode.As of HTML5, all pretense of the browser going out and actuallylooking at a DTD has been dismissed, which is why one endsup with the short and simple <!DOCTYPE html> (no URLto a DTD).Keep your nose clean with XHTML-MPIt’s not always a thrill a minute, but using a mobile-specific DOCTYPEhelps us because:

you are here 4 117a separate mobile site We need to keep our markup tidy.We’re pretty serious about that “chokeand die” thing. Mobile browsers(especially older ones) are less fault-tolerant of poorly formed markup thantheir desktop counterparts. You need to be diligentabout validating your markup—bad markup can causemobile browsers to crash, or, even worse, wretchedthings like making the phone reboot entirely. Ick.Grumpy Mobile Web Developer: You’re lookinga bit long in the tooth there, XHTML-MP. Howlong until you buy the proverbial farm, or sell it toHTML5?XHTML-MP 1.2: I’m not dead yet! Some peoplethink I’ve been put out to pasture, but I’m a useful oldcoot. I keep those older mobile browsers in line. Youcan depend on me. I can help keep you out of trouble.GMWD: What kinds of trouble can you keep me outof?XHTML-MP 1.2: You want examples? OK. What’sthe point of having an anchor (<a>) tag with atarget of _new or _blank if you’re on a mobiledevice? Many mobile browsers won’t let you open anew window from a link. So, I don’t support targets.Oh, and, frames—those are dangerous mojo. I don’tsupport any frames, not even those fancy-pantsiframes.GMWD: No iframes? Bah.XHTML-MP 1.2: Don’t forget that my XHTML-MPfamily—ever since my granddad XHTML-MP 1.0was a boy—brings you access keys.GMWD: Access keys?XHTML-MP 1.2: The entire XHTML-MP lineagegives you the accesskey attribute on anchor (<a>)tags. That lets you assign digits 0–9 as shortcut keysfor those anchors. This can be very nice on phonesthat have numeric keypads. It can also help cut downon tedious scrolling.GMWD: So…XHTML-MP invented access keys?XHTML-MP 1.2: Well, technically that was passeddown through generations, from WML throughC-HTML to us. It’s quite an heirloom.GMWD: WML? C-HTML?XHTML-MP 1.2: I’m not dead yet, but those guyssure are. Wireless Markup Language (WML) isgradually being phased out entirely. It’s quite differentthan HTML, and my family replaced it as thepreferred mobile markup variant.C-HTML (Compact HTML) was used a lot in Japanin days of yore by DoCoMo. Some people call itiMode. You want emoticons? C-HTML has emojiin spades. But what it doesn’t have fills volumes: notables, no CSS, no images. Oh, and no color. Ah, yes,the good old days.XHTML-MP ExposedThis week’s interview:Why bother with XHTML-MP?

118 Chapter 3right back to basicsJim: So, Frank, you think we should use XHTML-MP?Frank: It sounds like the safest bet. It looks like we need to keep itclean and simple for these older browsers.Jim: Is that going to require us to make other changes?Frank: It’s cool that the XHTML-MP DOCTYPE fixed the floated<div>s in Opera Mini, but I’m starting to feel really paranoid aboutfloats on those older browsers. I know it’s a bit old-school, butI was thinking of using tables to lay out the dashboardinformation.Jim: I thought HTML tables were relics of the ’90s, man.Frank: Usually I avoid them like the plague, but they’re not, like,invalid. And this dashboard stuff does feel like tabular data. I’m justnot convinced that floated, <div>-based columns are going to workreliably in all of the mobile browsers we need to support.Jim: Yeah, tables are kind of uncool, but I guess we know thatthey’ll work. Also…what about all that CSS we already wrote for themockup?Frank: I’m feeling a bit overwhelmed by which HTML tags aresupported and what kind of CSS support we can depend on.I think I’d like to take this one thing at a time. I want to figure outwhich HTML elements are valid and supported on these phones, first.So, I’m going to strip out all the CSS for now and add itback later.Hey, guys. One last thing before you doanother round of mockups. Some of the feedbackfrom Creature Comforts is that it feels like users onphones with small screens have to scroll through alot of links to get to their dashboard section...Any ideas?We can assign access key attributes to thelinks in the #tools <div> to give quicker accessto the dashboard and the other links.Without having to doso much scrolling

you are here 4 119a separate mobile siteOne last curveballOK, there’s something we neglected to tell you. If thismakes you want to throw up your hands and makevery irritated noises, we understand.XHTML-MP 1.2 was supersededby XHTML-Basic in 2008. Sorry.XHTML-Basic 1.1 gives you everything thatXHTML-MP 1.2 did, with a few bonuses. You getthe target attribute on anchor tags back (not that we’resuggesting that you use that, necessarily). You also get a fewtreats like <sup> and <sub>. Bottom line: you don’t loseanything you already had in XHTML-MP 1.2. There are a whole lot ofconfusing markup optionsfor mobile devices, butwe’ll stick to XHTML-Basicfor the rest of this chapter.Sorry we made you go through that, but it wasfor your own good. The mobile web markuplandscape is complicated, and you should have asense of what’s out there. Now we’ll stop flailingaround and stick with XHTML-Basic. It’s not toohard: we’ll just need to identify what tags aren’tsupported, and avoid them. And we won’t evenworry about CSS styling or layout right now.By the way, scrolling sucksNot everyone has the luxury of a touchscreen. On many phones,the way to navigate through web pages is to use a key or a cursorto scroll through the content. In many interfaces, each clickableitem is highlighted as the users scroll down the page, giving theman opportunity to follow the links. The more links and content,the more scrolling.…thank goodness for access keysThe accesskey attribute on the anchor (<a>) tag lets us assigna numeric shortcut key to any anchor, reducing the amount ofpotential scrolling for our users. This lets users use the numberkeys on their phones to access links quickly. Access key syntaxlooks like this:<a href="#dashboard" accesskey="1">Your Dashboard</a>The access key number assigned to a link doesn’t show upautomatically, so it’s often handy to use ordered lists (<ol>)instead of unordered lists (<ul>) for lists of links (assuming thefirst item in the list uses accesskey 1).Also, XHTML-MP 1.2does still work—justfine—in mobile browsers.Access keys let users use theirnumeric keys as shortcuts!

120 Chapter 3test drive<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN""http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">Convert the document to XHTML-Basic.Replace the current DOCTYPE tag with the following:1Remove the CSS for now.Delete the CSS <link> tag; we’ll deal with CSS later.2Convert the <ul> in the #tools <div> to an <ol>.This will make numbers show up next to the links and helpswith the next step.3Add accesskey attributes to the <a> tags in the#tools <div>.See page 119 for syntax hints.4Convert the floating, <div>-based #dashboard <div> to a table.Replace the content inside the #dashboard <div> with a table. Thisis a bit tedious, so you can use the ready-bake markup on page 121 (or find thiscode in the extras directory in the chapter3 folder—it’s in a file called table.txt).5Save your changed file as index.html.Save the file as index.html—we’re done testing the mobile redirectnow, so it’s easier to just use index.html.6Our plain, butfunctional, mockup onan Android device.Q:So, I know we’re going all hardcoresimplified for now, but, after changingthe DOCTYPE to XHTML-Basic, doesthe mockup we looked at on page 115 stillwork in Opera Mini 4.2?A:Yep! You can see this at http://hf-mw.com/ch3/ex/2a if you are curious.Q:Isn’t Opera Mini 4.2 pretty archaic?How many people really use that versionanymore?A:Admittedly, it’s not a recent browser.But browsers of its vintage absolutely doexist out there in the woolly wilds of MobileWeb Land. It’s a good example of the sort ofbrowser with the sort of constraints one runsinto on older feature phones in, especially,emerging markets.Q:But didn’t you just say thatsmartphones are now outselling thesedinosaur feature phones?A:Outselling doesn’t mean outnumbering.There are still vast numbers of existingolder smartphones (not really “smart” by ourcurrent standards) and feature phones. It willbe some time before they disappear.Make sure to keep the#dashboard <div>. Justreplace its contents.Test Drive

you are here 4 121a separate mobile siteReady BakeTable Code<table><thead><tr><th>Type</th><th>Details</th></tr></thead><tbody><tr><td><p>Message<br />Feb 3 8:54PM EST</p></td><td><p><a href="#">Supply Request #493-C4 Approved</a><br />Hi, Jess, Good news! I wanted to let you know that we were successful intracking down those bottles...</p></td></tr><tr><td><p>Message<br />Feb 3 1:47PM EST</p></td><td><p><a href="#">Supply Request #493-C4 Received</a><br />This is an automated message to confirm that your recent Supply Requesthas been received and is in process...</p></td></tr><tr><td><p>Event Scheduled<br />Feb 3 8:22AM EST</p></td><td><p><a href="#">Itinerary 39924 Approved LAX -> DAC</a><br />Your itinerary for event: "Bangladesh Flood Event" has been approved.Your calendar has been updated...</p></td></tr><tr><td><p>Personnel Event<br />Feb 2 9:23PM EST</p></td><td><p><a href="#">Re: Personnel Confirmation 03/05 - 03/15</a><br />Jessica! Thanks so much for committing to this operation! I thinkDr. Madling is going too and...</p></td></tr><tr><td colspan="2"><div class="morelink"><p><a href="#">More >> </p></a></div></td></tr></tbody></table>

122 Chapter 3element validationWhich elements are valid where? Use what we’ve learned and your own intuitive sense to figureout which tags and attributes are OK in which standards. An element may be OK in more than onestandard!<font><table><a target=""><sup><a accesskey=""><u><tbody><link><strong><video><iframe>XHTML-MP 1.2 XHTML-Basic 1.1 HTML5I can’t get access keys to work.The Opera Mini simulator doesn’tseem to support them, and I don’t havea phone with a hard keyboard.We promise that they do workon a lot of phones, but you don’thave to take our word for it.Access keys are actually supported in mostmajor desktop browsers, too.Answers on page 126.

you are here 4 123a separate mobile siteAccess keys in actionGet some validationRemember how we told you that it’s important to use valid markup?Let’s not just give that lip service—it’s time to validate the markup in themockup and make sure it’s up to snuff. Let’s head over to the invaluableW3C Markup Validator site to check our code.If you want to test out the access keys on the mobile markup, you canview index.html in your desktop browser. Test out the access keys by usingthe following key combinations:Chrome or Safari: CTRL-OPT [accesskey]FireFox: CRTL-[accesskey]Chrome or Safari: ALT-[accesskey]FireFox: ALT-SHIFT-[accesskey]Internet Explorer: ALT-[accesskey]Chrome: ALT-[accesskey]FireFox: ALT-SHIFT-[accesskey]http://validator.w3.orgYou can either upload theindex.html file (Validate by FileUpload) or copy and paste itscontents (Direct Input).WindowsMacLinuxCertain operating systemshortcut keys or softwareconfigurations could takeprecedence over these, soyour mileage may vary.

124 Chapter 3w3c validation errorsSo, are we good to go?What went wrong?<thead> and <tbody> tags are not supported in XHTML‑Basic(or XHTML-MP).This is likely the most glaring partially unsupported HTML module inboth XHTML-MP and XHTML-Basic. Tables are OK, but you can’t use<thead>, <tbody>, <tfoot>, <col>, or <colgroup>.1Scroll down on the results page to see details aboutthe errors. So, what’s the problem here?These three errorsare related to theunsupported <thead>and <tbody> tags in themobile mockup HTML.The third error is a side effectof the <tbody> and <thead>tags; if we remove those tags,this error will be resolved.Uh oh!

you are here 4 125a separate mobile siteThere are some improperly nested tags.Even seasoned pros make little typo-esque mistakes like this one. That’s one of thereasons to use the validator—even if you’re at the top of your game.2Fix the errors<td colspan="2"><div class="morelink"><p><a href="#">More >></p></a></div></td>Fix the markup problems in the index.html file.Remove the <thead>, </thead>, <tbody>, and</tbody> tags from the markup.1Fix the improperly nested tags. Put the </a> tagwithin the paragraph in the .morelink <div>.2Revalidate the updated code with the W3C validator.3From index.htmlBoth of these errorswere caused by amisplaced </a> tag.This isn’t actually an error—it’s thevalidator trying to give us hints as towhere to find the problem.Woot! Green means success.Test Drive

126 Chapter 3exercise solutionOK. We’ve got valid code and a basicstructure. But it’s looking super bland.Can we bring back some CSS?How’d you do identifying which tags are valid in which standards?<font><table><a target=""><sup><a accesskey=""><u><tbody><link><strong><video><iframe>XHTML-MP 1.2 XHTML-Basic 1.1 HTML5<font> and <u> areboth deprecated—use CSS instead!

you are here 4 127a separate mobile siteMobile-savvy CSSCSS Mobile Profile 2.0 (CSS-MP) and XHTML-Basic (or XHTML-MP) go together like peas and carrots. The CSS-MP standard wasdeveloped with low- to mid‑range phones in mind.What do you get in CSS Mobile Profile? Well, most of what you’ve cometo expect out of CSS2, and even a bit of CSS3. But not everything.Sounds simple in theoryBrowsers that implement CSS Mobile Profile 2.0 are supposed to supportthe required properties. But the reality is a bit of a downer. CSS supportvaries quite a bit, and the onus often falls on you, the intrepid developer,to test thoroughly and work around quirks.In addition, quite a few CSS properties and values are considered optionalin CSS‑MP, meaning browser makers can opt to support them—or not.The best way is: less chit-chat, more doing.Instead of throwing out a tedious list of supported andunsupported CSS properties in CSS Mobile Profile, let’sjump in and figure out how to adapt the existingCSS to be CSS-MP compliant.Sounds complicatedand depressing. How am Igoing to learn this stuff?

128 Chapter 3marrying xhtml-basic and css mobile profileBuckle up. Roll up your sleeves. Batten down the hatches. We’re going to go on a journey here—ajourney that, if everything goes right, will end with a loving marriage between XHTML‑Basic andCSS Mobile Profile. We’ll be editing both index.html and styles.css.Put the <link> tag back in index.html.We’re going to want to start using CSS again, so we need that <link> tag.1<head><title>Creature Comforts Agent Portal</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" /><link rel="stylesheet" type="text/css" href="styles.css" /></head>Let’s refactor styles.css to be valid CSS Mobile Profile.2* {padding: 0;margin: 0;}body {font-family: "Helvetica", "Arial", san-serif;font-size: 100%;width: 100%;background-color: #f3ffc2;background-image: url(cows.jpg);background-repeat: no-repeat;background-position: 50% 0px;}p {font-size: .95em;margin: 0.25em 0;}h1, h2, h3, h4, h5 {font-family: "Times New Roman", serif;margin: 0;color: #10508c;text-align: center;}The background-imageand background-repeatproperties are supported inCSS‑MP, but having a bigheader with a backgroundimage wastes a lot of space.Let’s just get rid of thebackground image.background-position values inpercentages and pixels are notsupported in CSS-MP, so we’dhave to change this if we werekeeping the background image.But we’re not. Device supportis iffy; heck, even support forbackground-color isn’t assured.Everything else in this CSSso far is compliant…onward!index.htmlstyles.css

you are here 4 129a separate mobile siteh3 {font-style: italic;font-weight: 100;font-size: 1.15em;}ol {width: 100%;}a {text-decoration: none;color: #096c9f;}.header {height: 150px;}#tools ol {list-style-type: none;}#tools ol li a {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;display: block;height: 1.1em;width: 94%;background-color: #fff;margin: 3%;border: 1px solid #ccc;text-align: center;padding: .6em 0;}.greeting {border: 1px dashed #10508c;border-width: 1px 0;}#dashboard {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;border: 1px solid #ccc;margin: 1em 3%;padding: .5em 0;width: 94%;}These properties tocreate rounded cornersare invalid in CSS-MP,and most of those olderbrowsers don’t supportthem, anyway. Deletethese from the CSS.styles.cssSince we last used thisCSS, we changed our <ul>to an <ol>. These ruleswill need to be updatedto reflect that.Continues over the page.

130 Chapter 3make sure to sign the pre-nup<tr class="even"><td class="event event_meta"><p><strong>Message</strong><br/>Feb 3 8:54PM EST</p></td><td class="event"><p><a href="#"><strong>Supply Request #493-C4 Approved</strong></a><br />Hi, Jess, Good news! I wanted to let you know that we weresuccessful in tracking down those bottles...</p></td></tr>Back to index.html: add some classes to the table elements.3And now back to styles.css: adapt styles to apply to thetabular markup.We switched from <div>s to tables for layout. We’ll want to get ridof some properties that no longer make sense, and make a few edits toothers.4Hey, hotshot! Applythese classes to theother three rows, too.But alternatetr.even with tr.odd.#dashboard td.event {border: 1px dashed #ddd;border-width: 1px 0 0 0;margin: .5em 0;padding: 0.5em 0;width: 100%;clear: both;overflow: hidden;}#dashboard .odd {background-color: #fff;}#dashboard .even {background-color: #eee;}#dashboard td.event_meta {width: 30%;margin: 0 2%;float: left;}We’re not floating contentanymore. In addition,browsers that implementCSS-MP are only requiredto implement the “auto”value of overflow;everything else is optional.You can’t rely on overflowin CSS-MP.Remove thesethree properties.No more floathere. And someadjustment towidth and margins.index.htmlstyles.css

you are here 4 131a separate mobile siteAdd this CSS rule to styles.css...5...and remove some unneeded rules.Find and eliminate the style rules:#dashboard div#dashboard .event_time#dashboard .event_details#dashboard .event_subject#dashboard .event_summary6Fix the #status_message <div>.7#dashboard table {border-collapse: collapse;width: 100%;}#status_message {background-color: #f8f1b2;padding: 0.25em;line-height: 1.3em;border: 1px solid #ccc;border-width: 1px 0;height: 70px;overflow: scroll;}And, finally, getrid of these.Add this new CSSrule (anywhere inthe styles.css file).Delete all of these! Beware of using the overflow property!overflow: scroll is totally taboo in Mobile Land. It’s generallynot supported on any platform, and is an interactive ickiness.The behavior of the overflow property in browsers that implementCSS-MP is varied—the only value that they are required to support is auto.Avoid relying on overflow whenever possible.styles.cssstyles.cssstyles.cssSave the files, and you’re done!8

132 Chapter 3so long, buttonsHmmm…something is missingTake a look at this screenshot from the Opera Mini 4.2 simulator of thecurrent mockup. Notice anything? We’ve lost the list numbering on our<ol>—and those numbers indicated the access keys. Uh oh.Where’d the numbers go?The numbers are still “there,” but we’ve applied CSS that makes the<li> elements look like buttons that span the full width of the window.So the numbers are off to the left of the visible content.Normally, to “bring them back,” we’d use something like:list-style-position: inside brings the numbers “inside” the<li> element and renders them (in this case) next to the contents ofthe <li> (our links). Sounds about right, huh?Unfortunately, list-style-position is not supported inCSS‑MP. So we have a problem. Maybe we’ll need to convert thelinks into a simple list of links, instead of the buttony look we have now.Then the numbers will show up again.Bye bye, buttonsWe can regain the numbered list by replacing the CSS rules for#tools ol and #tools ol li with this:#tools ol {list-style-position: inside;}However, when CreatureComforts reviewed thischange to the layout……our <ol>’s numberscome back.How the mockupcurrently looks:no access keys.P.S. The padding and margin for allelements (*) has been set to 0. So we’dneed to add a bit of margin back hereto get the numbers onto the visible page.#tools ol {margin: 0.5em 1.5em;}If we swap out the existingCSS for this new CSS…

you are here 4 133a separate mobile siteHmmm...I’d really prefer itif those utility links looked likebuttons and not just links.The button look is sorely missed!<div id="tools"><ul><li><a href="#dashboard" accesskey="1">1. Your Dashboard</a></li><li><a href="#" accesskey="2">2. Messages (2)</a></li><li><a href="#" accesskey="3">3. Your Schedule</a></li><li><a href="#" accesskey="4">4. Request Supplies</a></li><li><a href="#" accesskey="5">5. Request Personnel</a></li><li><a href="#" accesskey="6">6. Call HQ</a></li></ul></div>Creature Comforts has becomeattached to the button look andwants it back.The only way to accomplish this with validCSS-MP is to convert the list back to a<ul>, add the numbers to the content itself,and update the CSS style rules.#tools ul {...}#tools ul li a {...}Change the CSS selectors in the styles.css file and convert the <ol> to a<ul> in index.html. Don’t forget to add the access key numbers to the textcontent of the links, too!styles.cssPut the CSS that was used for#tools ol on page 129 here.Ahhh, compromises. That’sthe mobile web way!And put the CSS previouslyused for #tools ol li a here.Change the <ol> back to a<ul> again in index.html.Test Driveindex.html

134 Chapter 3the new site pushes creature comforts buttonsGreat success! It’s a big world, and there are billions (yep) ofmobile phones. Not all of them are bleeding-edgesmartphones, and sometimes you have to make yourwebsite or web app work with those phones. There are real-life circumstances: older systems,recalcitrant clients, or specific projects that makehaving a totally separate mobile website necessary. One of the ways to route mobile traffic to amobile‑specific website is to use server-side mobiledevice detection and redirection. User-agent sniffing is a popular technique forevaluating whether an incoming request is from amobile browser. User-agent sniffing examines the User-Agentheader that browsers send as part of each HTTPrequest. Users can “spoof” their user agent—knowingly or not. This is a weakness of this method. Some older mobile browsers (and current, lower-endmobile devices) implement different standards forHTML and CSS. XHTML Mobile Profile (XHTML-MP) is amobile‑specific standard used by many mobilebrowsers. It is similar to XHTML, but does not supporteverything that XHTML does. Similarly, CSS Mobile Profile (CSS-MP) is amobile‑specific flavor of CSS. XHTML-MP was superseded by XHTML-Basic1.1, which is almost the same except for a few newsupported elements. It’s important to choose the appropriate DOCTYPEfor your mobile web project and pay attention tokeeping your markup valid—bad code can makephones behave very badly.You can see the final mockup athttp://hf-mw.com/ch3/ex/5.Mockup on a BlackBerry 9330Looks fine on newersmartphones, like thisAndroid Nexus S.

you are here 4 135a separate mobile siteQ:There’s XHTML-Basic/XHTML-MP instead of HTML,and CSS-Mobile Profile instead of full-on CSS2. Is there anequivalent mobile flavor of JavaScript for mobile devices?A:Yes, there is a mobile-specific JavaScript called ECMAScriptMobile Profile, but you can’t rely on it. We’ve worked with phoneswhere the JavaScript cannot change anything on the page once itis loaded, which means most of the things you use JavaScript forcannot be done. So if you’re targeting old phones, you’re probablybetter off not relying on JavaScript.Q:What about Wireless CSS?A:Wireless CSS is a standard quite similar to CSS-Mobile Profile,but with support for fewer properties. It’s kind of on its way out, andwe don’t see any reason to use it instead of CSS-MP.Q:If you use user-agent sniffing to route mobile traffic, andyou misidentify a user’s browser either because she is spoofingher user agent or because you’re just…wrong, couldn’t she endup getting redirected and stuck on the mobile version of the site,unable to escape back to the full site?A:Well spotted! This is important! In a real-life situation, you wouldwant to provide an “escape hatch,” often in the form of a link back tothe desktop site.The link on its own isn’t enough—you need to let your redirectionscript know that the user wants the desktop site. You can accomplishthis by setting a cookie indicating this preference and not redirectingbrowsers that have that cookie set.Q:What happens if I just can’t get my site to do what Iwant in a way that is perfectly valid XHTML-Basic or CSS-MPor whatever? Does the sky fall? Do phones around the worldcrash?A:Being successful on the mobile web often means makingcompromises and trade-offs. While writing valid code is something toshoot for, it’s not always 100% feasible. But knowing the rules beforeyou break them is always a good motto to live by.Q:Do I have to use XHTML-Basic every time I want tosupport a lot of mobile browsers? It feels constrained.A:We have to pull out the classic mobile web answer for this: “itdepends.” In Creature Comforts’ case, there were a lot of older, lessfull-featured phones we needed to support. Our goals were to get aserver-side data service to render well on as many feature phones aspossible.Using HTML5 in many cases is a reasonable approach, even onolder phones. But we wanted to show you the kinds of things youneed to be aware of when targeting older devices.Q:You neglected to do so on page 127, but I do want to see anexhaustive list of supported and nonsupported properties inCSS-MP.A:Hey, you’re in luck: the CSS Mobile Profile 2.0 spec happens tobe a rather quick and easy read. You can find it athttp://www.w3.org/TR/css-mobile.Hey, developer types! How could we support users who wantthe desktop version instead? Can you think of what wouldbe needed to add a link from the mobile to the desktop site,and what modifications you’d need to make to redirect.php towrite and check for a cookie to store the user’s preference?It’s not cool to strandusers on a stripped-downmobile site if they’dprefer to escape to thedesktop version.

this is a new chapter 137Well, sure yoursite doesn’t work on thisphone, but you could have leftout the part about “out-of-datetechnophobe Luddites”...deciding whom to support4What devicesshould we support?There aren’t enough hours in the day to test on every device.You have to draw the line somewhere on what you can support. But how do youdecide? What about people using devices you can’t test on—are they left out in thecold? Or is it possible to build your web pages in a way that will reach people on devicesyou’ve never heard of? In this chapter, we’re going to mix a magic concoction of projectrequirements and audience usage to help us figure out what devices we supportand what to do about those we don’t.

138 Chapter 4all about the compromisesHow do you know where to draw the line?Every project is a series of compromises.Stakeholder desires. User experience feedback.Search engine optimization. Figuring out whatmatters for your project can seem like magic topeople who aren’t in the trenches with you.Deciding what devices you care about issimilar. You take criteria and priorities, applysome brain power, sprinkle in a little magicalinspiration, and you come up with a list ofdevices that are key to your success.Yourbrain magicCriteria andprioritiesDefinitionof whereto drawthe line

you are here 4 139deciding whom to supportStep away from the keyboard for a secondWe’ve tried to keep everything grounded and hands on so far, but we’ve reachedthat point in the movie where the actor stares off into space and contemplates atough problem. Suddenly, inspiration hits and the actor leaps into action.The difference here is that you’re the actor. You already have all of the tools youneed to decide where to draw the line.But you’re not going to find that inspiration at the keyboard, so we’ll take a briefinterlude from building stuff to talk about the abstract stuff that turns criteria andpriorities into a list of devices you support. We’re going to help focus your brain alittle and then get out of the way.Don’t worry, we’ll get back to building stuff soon. The best directors know that allthey need to do is give their actors some guidance and let the actors act.What’s this line we need to draw?Supporting every device ever made is a noble goal. Testing on every device evermade is a sure-fire path to losing your mind. You can hope to support as manypeople as possible, but to keep your sanity, you’re going to have to know the answerto three questions.Can you think of some differences betweendevices you don’t support and those that youcan’t support?What devices do we support?Which devices or types of devices are you going to testyour pages on to make sure they work as intended?1What happens to devices we DON’T support?What can you do to make sure devices that you don’ttest on are still able to use your site?2What happens to devices we CAN’T support?What message do you give people whose devices aren’tup to snuff?2

140 Chapter 4to support or not to supportDon’t be a meanie about itIf you can’t support someone’s browser, be niceabout it. He may not have the latest phone inhis pocket, but he may have access to a betterbrowser somewhere else.Besides, no one likes to be told his phone is ajalopy. Be gracious to your guests. Don’t exclude unsupported browsers.Just because you can’t verify that your pageswill work in a browser doesn’t mean youshould exclude people using that browser. Ifyou build the site using semantic markup, itwill work in many browsers—including ones you couldn’ttest on and that were not critical to your project.Things you don’t support vs.those you can’t supportOnce you know what you are going to support, everything else issomething you don’t support. So why make a distinction betweenwhat you don’t support and what you can’t support?Although you don’t explicitly support a device, that doesn’t meanwhat you’ve built won’t work on that device. If you build yourweb page using well-formed, semantic HTML and progressiveenhancement, your page will be accessible by many morebrowsers and devices than you can guarantee that it will work on.But sometimes a browser is so old and feeble that you simply can’tsupport it.For example, if you’re selling shoes online, you need to useHTTPS to keep credit card information safe. Some old phonesdon’t support HTTPS. When that happens, the best thing youcan do is tell the person that she can’t buy shoes on her phone.Devices wedon’t supportDevices wedo supportDeviceswe can’tsupport

you are here 4 141deciding whom to supportYou’re right. In many cases, progressiveenhancement means you can supporthundreds of different browsers. But yourmileage may vary.Starting with basic HTML and progressively enhancingthe document should be the starting point for mostweb pages. Browsers with advanced features getenhancements like rounded corners and gradients.However, the minimum requirements for a site or appmay be higher than basic HTML can provide. A videogame may require WebGL, a graphics library, forgame play. There is no content if the browser doesn’tsupport WebGL—that is, until a couple of years fromnow when you can progressively enhance from WebGLto WebGL 2!As they say, you have to know the rules before youknow when to break them. You should use progressiveenhancement from basic HTML unless you have a reallygood reason why it won’t work.And even then, a basic HTML document that said,“Sorry, this game requires WebGL support to play” wouldbe a nice starting point upon which to build the game.WebGL 2 doesn’texist, but it seemslikely, doesn’t it?I understand not being able to supportreally old phones that don’t have HTTPS, but Ithought if you delivered a basic HTML documentand then progressively enhanced it with CSSand JavaScript, it would work everywhere.

142 Chapter 4who, why, what, where, and whenAsk questions about your projectIt might sound like we’re teaching you to suck eggs here, but thefirst step toward figuring out where to draw the line is to thinkabout your project. Who is your audience? What functionality iscore? What features are optional? What is the best experience?The cheapest thing on thissite costs $10,000. Might as wellcall it Filthy Rich ‘R’ Us. Can weassume most customers will haverecent smartphones?The sales team needs to show the app topotential customers, but standard issue forsalespeople is a BlackBerry 4.5 phone. How canwe show off the app on such an old deviceand still make it look good on iPhones?Hmm...the travel app I’mworking on needs to knowwhere someone is to work.What if that person’s phonedoesn’t have GPS? Would zipcode be accurate enough?

you are here 4 143deciding whom to supportWe’re getting ready to expand intoJapan and South Korea. Do they use thesame phones as we do? I heard Japan hasa lot of phones not available elsewhere.Our Funny Cat Video sitewill be great on mobile, but only if thephone supports video. Which phonessupport video and have good data plansor WiFi ability?Our newest game, Enraged Avians,is graphically intense. We already know thebrowser will need to support WebGL, but nowwe’re wondering if some phones will be too sloweven if they support WebGL.

144 Chapter 4magic factorsIngredients for your magic mobile potionWhen you ask questions about your project, you’re starting to suss out the factorsthat can help you figure out which devices matter. Who is your audience and whatis it likely to use? What are must-haves versus nice-to-have features?This is where the magic comes in. Mix these factors together into a magic potionthat tells you what devices you need to support.Does this browser supportcookies? How aboutHTTPS? Video playback?Do you need access tothe phone’s location?Camera? Gyroscope?If you’re doing somethingintense, you may need to worryabout CPU speed, memory, andwhether or not CSS effectsare hardware accelerated.Does your serviceneed to be used online,or do you need tosupport offline usage?What devices areyour customers mostlikely to use?That video-intensivesite will only work wellon fast connections.Did you really think thatyou could get away withoutsupporting whatever phoneyour boss happens to use?Browser featuresConnection speedAudience usageOnline vs. offlineDevice capabilitiesHardware performanceStakeholder devices

you are here 4 145deciding whom to supportAudienceSurveyIt never hurts to ask!There are bigdifferences in thephones sold in differentparts of the world.Income, age, and (tosome degree) genderall impact whatphone someone islikely to own.Draw from your cupboard of tools and dataWhat goes into audience usage? Dig into your jar ofweb analytics to see what your current customers areusing. Expanding to a new geography? Pull out dataon the top phones in those countries to see what thecool phone is in Singapore.AnalyticsGeographicTrendsDemographicsDeviceDatabasesBig collections likethe Device AnywhereData Explorer andBrowserscope can helpanswer questions aboutwhich devices supportwhich features.Analytics can be webstatistics or other formsof tracking customer usage.Beware of analytics ifyour site has a poor mobileexperience. Garbage site in:Garbage analytics out.Is your cupboard bare? You’re in luck. Check outthis comprehensive guide to mobile statistics athttp://bit.ly/m-stats.

146 Chapter 4case studies exerciseExampleCase StudyMo Better Museums is building an app that allowsmuseum visitors to point their phone cameras ata piece of art and see an overlay containing moreinformation about the piece. It can tell which pieceof art is being viewed based on the phone’s location.Phone reception in museums can be spotty.Requirements:•• Must have: support JavaScript•• Must have: access to camera•• Must have: access to location•• Nice to have: support offline modeTime to put your magician’s hat on and worksome magic. For each case study, build arequirements list based on what the app istrying to accomplish and the target audience.The list should include must-haverequirements and nice‑to‑have features.Here’s our list ofrequirements basedon the informationin this case study.Requirements:Case StudyA politician wants an edge in aclose election. She would like anapp for volunteers to use whenthey go door-to-door to encouragepeople to vote. The app willprovide the address of people tocontact—with a map if possible—and what questions the volunteershould ask. Volunteers are inshort supply, so she would like theapp to support whatever phonethey happen to own.

you are here 4 147deciding whom to supportCase StudyBowling Boxers is the video-game generation’s version ofDogs Playing Poker. You controla boxer, based on a dog in thefamous C. M. Coolidge paintings,that is pitted in a fierce back-alleybowling competition. Renderingthe characters and all of theinsane lane action pushes thelimits of many phones.Requirements:Which requirements areminimum bars, and whichcan be supported viaprogressive enhancement?Case StudyGlobal Corp has noticed anincrease in sales in India. The VPof Sales believes India could be Global’snext big market. He would like a localizedversion of Global’s site that will work on themost popular phones in India. He wants itto be as easy as possible for customers toplace orders on their phones.Requirements:

148 Chapter 4requirements listsEXAMPLECase StudyMo Better Museums is building an app that allowsmuseum visitors to point their phone cameras ata piece of art and see an overlay containing moreinformation about the piece. It can tell which pieceof art is being viewed based on the phone’s location.Phone reception in museums can be spotty.Requirements:•• Must have: support JavaScript•• Must have: access to camera•• Must have: access to location•• Nice to have: support offline modeRequirements:•• Must have: Internetconnection•• Nice to have: ability todisplay images for map•• Nice to have: JavaScriptfor interactive mapsCase StudyA politician wants an edge in aclose election. She would like anapp for volunteers to use whenthey go door-to-door to encouragepeople to vote. The app willprovide the address of people tocontact—with a map if possible—and what questions the volunteershould ask. Volunteers are inshort supply, so she would like theapp to support whatever phonethey happen to own.Nice! Someopportunitiesfor progressiveenhancement!Don’t you hate it when someone tellsyou there is no right answer? Yeah, well,sorry about that. There are no rightanswers when it comes to requirements.So don’t fret if you have a differentanswer for these case studies. Yourexperience may give you a requirementthat we’ve missed. Trust yourexperience and instincts.Camera access is a newW3C API. So far, only thelatest version of Androidpartially supports it.

you are here 4 149deciding whom to supportCase StudyBowling Boxers is the video-game generation’s version ofDogs Playing Poker. You controla boxer, based on a dog in thefamous C. M. Coolidge paintings,that is pitted in a fierce back-alleybowling competition. Renderingthe characters and all of theinsane lane action pushes thelimits of many phones.Requirements:•• Must have: support JavaScript•• Must have: support WebGL•• Must have: fast CPU and GPU, orthe game performance will sufferCase StudyGlobal Corp has noticed anincrease in sales in India. The VPof Sales believes India could be Global’snext big market. He would like a localizedversion of Global’s site that will work on themost popular phones in India. He wants itto be as easy as possible for customers toplace orders on their phones.Requirements:•• Must have: support basic markupfor old phones•• Must have: HTTPS for checkout•• Must have: cookies for login Iteration helps youuncover extrarequirements.If you were to pullback the curtain on most mobileprojects, you’d find that the people whomade the site were uncertain about whatdevices they needed to support. Theymade the best guess they could and theniterated on it until they perfected the site.

150 Chapter 4detective workHow do I know my customershave the right stuff?Now that I havea device requirements list,how do I know if a specificphone fits my criteria?Great question. There are two mainmethods: server-side device detectionand client-side feature detection.We’re going to look at device-detectiondatabases in the next chapter.It sounds like you’re ready for this interlude to endand get back to building things. We told you thiswouldn’t take long.Now get ready to roll up your sleeves again and diginto the crazy world of device databases and the baneof web developers everywhere: user-agent strings.Don’t worry. It isn’t as bad as it sounds. By the endof the next chapter, you’ll be bossing those evil user-agent strings around. Every project draws the line somewhere on whichdevices it supports. Knowing where to draw the line is a combination ofexperience, research, and gut instinct. There is a difference between devices you don’tsupport and those you can’t support becausethey lack critical features that make it impossible touse your site. Look at your project requirements and your targetaudience to help decide where to draw the line. Progressive enhancement should be the defaultapproach. This will make your site work on manymore devices than you can officially support. Unless you know for certain that you cannotsupport a device, you shouldn’t exclude it. Newbrowsers show up all the time. Give them a chanceto prove they’re up to snuff. Don’t let mobile’s complexity overwhelm you. Youalready have all of the tools you need to knowwhere to draw the line. Trust your experienceand instincts.We looked at featuredetection in Chapter2 when we talkedabout progressiveenhancement.

this is a new chapter 151Uh, when you saidyou were going to take apeek behind the curtain, Ididn’t think you meant this one...It is possible to know a little toomuch about a user, you know...device databases and classes5Get with the groupSetting the bar for the devices we support doesn’t take careof a few nagging issues. How do we find out enough stuff about our users’mobile browsers to know if they measure up before we deliver content to them? How dowe avoid only building (lame) content for the lowest common denominator? And how dowe organize all of this stuff so that we don’t lose our minds? In this chapter, we’ll enterthe realm of device capabilities, learn to access them with a device database, and,finally, discover how to group them into device classes so that we can keep our sanity.

152 Chapter 5time to hit the panic buttonAcedIt! Test Prep hangs its hat on superior customer service. Itsgoal is to make each and every one of its students—who are hardat work nerve‑rackingly studying for career- or academic-advancingstandardized tests and certifications—feel like they have a one-on-oneconnection with tutors who are experts in their subjects.Sometimes students panic. That’s why AcedIt! wants to create a pageon its website specially attuned to its customers who are on the edge.It’s called the I’m Freaking Out! page, and its goal is simple: connectthe customer with an on-call tutor right away.A panic button for freaked-out studentsWouldn’t it be cool if a freaked-outuser on a mobile browser could see a bigred panic button that he could press andplace a phone call right away?Steve, CEO of AcedIt!

device databases and classesyou are here 4 153The button is for mobile phones onlyDesktop browsers can’t make phone calls,so the big, red panic button metaphor iskind of lost there. Steve only wants thebutton to show up on mobile phones.We have an IT guy whousually does the websitetweaks, but in this case Ithink we might need help.Frank: We might be able to do this with CSS mediaqueries based on the window width of the browser.Jill: Not in this case, I don’t think. Just because awindow is narrow in width doesn’t mean the browseris on an actual mobile phone.Frank: Right, I guess the panic button would end upshowing up on narrow windows and tablets and stuffif we used a width-based media query. Not all mobiledevices are phones, either. But what other options dowe have?Jill: Ideally, we’d have some way of gettinginformation about the user’s browser and device thatis specific enough to give us hints as to whether it’s amobile phone, not just a device with low resolutionor a narrow screen.But how do we know someone is on a mobile phone?Narrow windowdoesn’t meanmobile phone!

154 Chapter 5a little black book of browser dataresolution width = 320pxbrowser = SafariHTML table support = yeshas cellular radio = yesbuilt-in camera = yescss rounded corners = webkit(etc., etc., etc.)Mobile device data sources to the rescueMobile device databases contain detailed information aboutthe browser, platform, and hardware features of mobile devices andtheir browsers. By querying the data set with a uniquely identifyingkey—generally a user-agent string—we can get tons of attributesabout that device and its browser.Device databasecontains data aboutdevices and theircharacteristics.A device’s browser makesa request to the server.Software API helps to find amatch in the device databasefor the current user agent.A successful match gives usaccess to all sorts of dataabout the device.Information is availableabout the device’s hardware,platform, and browser.Armed with thisdata, you canadapt contentbased on a device’scharacteristics.

device databases and classesyou are here 4 155Meet WURFLWURFL (Wireless Universal Resource FiLe, usuallypronounced “wuhr-full”) is an open source devicedatabase with an enormous amount of informationabout the specific capabilities of mobile devices andtheir browsers.Recently, the longtime maintainers of the WURFLproject started a company called ScientiaMobile toprovide commercial support for WURFL.WURFL tracks details about mobile device specificsfrom ringtone formats to physical screen sizes.Not all of WURFL’s capabilities are of interest tous web developers, but you’ll find some real, usefulgems in there.Go out and try it yourself! The ScientiaMobile explorer lets youinteract with Tera-WURFL data in a web browser.Go to http://www.tera-wurfl.com/explore in amobile browser.1Visit the See my capabilities section and browse thecapabilities it returns for your mobile device and browser.2Some of the capabilities listed inthe explorer on an iPhone 4.The explorer is intended to be usedon a mobile browser. If you visit witha desktop browser, a random mobiledevice will be selected for yourcapability-viewing pleasure.You can also visit the explorer in a desktop browserand enter in any user-agent string you’d like to findcapabilities for. This can be a quick and handy way tolook up device capabilities for a known user agent. A device is not a platform isnot a browser.There is no good word meaning “adevice’s hardware characteristicscombined with its platform andOS melded with its browser.” There reallymaybe should be. WURFL’s notion of a deviceis a combination of all three, and containsinformation about hardware, OS, and browser.Terminology makes it difficult to be clear. We’reguilty, too, so keep in mind that our use of theshorthand word device likely carries some ofthe connotations of browser, hardware, and OS.

156 Chapter 5wurfl out loudWURFL and its capabilitiesWURFL provides information aboutmobile devices, their platforms, and theirbrowsers as a set of capabilities. Youcan use this information to adapt yourweb content accordingly.There are currently over 500 capabilities that WURFLtracks, grouped into a couple dozen or so categories likecss (can this browser support rounded corners? Whatabout background images?) and playback (what kinds ofmedia can this device play?).Device data is maintained in a large, single XML file thatis regularly updated. The latest version is made availableon the project’s Sourceforge page.There’s more than one flavor of WURFLScientiaMobile’s explorer is based on a particularimplementation of WURFL (the Database Edition, alsoknown as Tera-WURFL) that keeps WURFL device datain a database instead in a flat XML file. Tera-WURFLis intended to be set up as a web service or PHP librarythat mobile-oriented websites can query to get deviceinformation for user-agent strings.There are many different APIs and implementations ofWURFL, but all have one thing in common: that big ol’WURFL XML file with all of the mobile device data.The full WURFL experience is a combination of theWURFL data file (XML), the way the data is stored, andan API to interact with it.We’ll be using the PHP APIThere are WURFL APIs for a number of majorprogramming languages. We’ll be using the PHP APIand file-based data.Device who? Capabilitieswhat? What does WURFLactually do for me?Unsurprisingly, the URLis wurfl.sourceforge.net.

device databases and classesyou are here 4 157WURFL works well because of severalfactors in its favor (one of which is thatit doesn’t track every single user agent).WURFL’s developer community is constantlycontributing to the data source, meaning it isn’t leftto some poor guy alone in a dim cubicle somewheretrying to track down every new device and browseron the market—not just a thankless task, but likelyimpossible.WURFL’s various APIs’ algorithms are clever whenperforming matches on user agents. It also doesn’thurt that WURFL has been around a while, hasa proven track record, and has been used by (andcontributed to) some pretty major web players (everheard of Facebook?).And, of course, if WURFL doesn’t meet your needs,there are other device databases such as DeviceAtlas,DetectRight, and MobileAware. What makes sensefor your project depends on your needs, budget, andlicensing requirements.There are thousands and thousands ofuser agents out there. How could anybodyor any organization track all of them andall of the data about each device?!

158 Chapter 5there are no dumb questionsQ:What is ScientiaMobile?A:ScientiaMobile is a company founded in 2011 by SteveKamerman, Luca Passani, and Krishna Guda. Luca hasbeen one of the maintainers of the open source WURFLproject since he and Andrea Trasatti started WURFL in 2001.Steve created Tera-WURFL, which has become the WURFLDatabase Edition.Q:Is WURFL free? Do I have to pay for it?A:It depends. WURFL is technically open source. TheWURFL API is available under the Affero General PublicLicense v3 (AGPL), which is an open source license. TheWURFL XML database has a restricted license that onlyallows it to be used with the WURFL API.So, if you can comply with the AGPL restrictions, you don’thave to pay anything. But AGPL is more aggressive than itsGPL cousin. With AGPL, running the software on a servercounts as a distribution, which triggers provisions requiringyou to open source any derivative work.If AGPL doesn’t work for you (and, in many cases, it probablywon’t), ScientiaMobile will sell you a commercial license.Q:If I integrate WURFL with (insert your favorite opensource solution here) and build a site on top of it, do Ihave to open source the whole site?A:Short answer: buy a commercial license or talk to alawyer. ScientiaMobile.com also has a licensing FAQ.Q:Are there other things out there that do what WURFLdoes?A:Yes. WURFL is the only device database that offersan open source license, but there are several commercialdatabases. Device Atlas is probably the best knownalternative. Others include Mobile Aware and Detect Right.Q:What APIs are there for WURFL other than thePHP API?A:ScientiaMobile provides Java, .NET, and Database APIsin addition to PHP.Q:How does WURFL data get updated? More to thepoint, how would I get new data as it’s updated?A:ScientiaMobile keeps an eye out for new devices.Sometimes manufacturers provide information directly. Othertimes, people using WURFL submit the information. A largepart of the work any device database vendor does is relatedto validating information provided about new devices.Q:Who decides what capabilities get tracked byWURFL?A:ScientiaMobile picks capabilities based on suggestionsfrom the community.Q:Where is this WURFL community of which youspeak?A:The community is a mailing list. WURFL has beenaround so long that the list is called the WML programminglist. There are also conversations happening in the supportforums on ScientiaMobile.com.You can find the wml-programminglist at http://tech.groups.yahoo.com/group/wmlprogramming/.

device databases and classesyou are here 4 159WURFL: Clever API codeWhen a WURFL API tries to match an incoming useragent to a known device, it doesn’t just go belly up ifthat exact user agent isn’t in the data. As it is totallyimpossible to track every single user agent out there, theAPI matchers instead perform some clever tricks when theprecise user agent is not recognized.A tree of devices and their familiesAs the WURFL API analyzes a given user-agent string, aseries of increasingly generic fallbacks is evaluated, withthe goal of at least slotting the device into the correctfamily of related devices.You can think of WURFL’s data as a sort of tree ofdevices, with the trunk being a generic browser and eachbranch, twig, and leaf a more specific device or group ofdevices. The API tries to get as far as it can toward theexact leaf, but has the rest of the tree to fall back on if itcannot.Additionally, the WURFL data for a given device onlydefines the capabilities for that device (or group of devices)that differ from its parent device or devices. That way,the WURFL XML data file is kept reasonably small (abit under 10 MB as of mid-2011), despite the amount ofinformation it really contains.Geek BitsWURFL APIs use a combination of algorithmsto keep from getting tripped up by weird littleuser‑agent quirks.One way it finds matches is by using matchersoptimized for a given family of browsers ordevices. The most recent PHP API has a few dozenhandlers to deal with the analysis of user agents.The API first determines which handler makes themost sense for the given user agent. User agentswith the string “BlackBerry,” for example, arehanded off to the BlackBerryHandler.Each handler is savvy about the kinds ofdifferences that matter for user agents in itsfamily, which cuts down on the amount ofsuper‑specific user agents that WURFL datamaintainers have to track.The PHP WURFL API combines handlers with RISmatching (reduction-in-string—that is, removingpieces of an unrecognized user-agent string untilit ends up with one it does recognize) to get to itsend result.It’s time to install WURFL on your computerCheck out Appendix iii for installation details.

160 Chapter 5start with the underpinningsWe can build an explore page, tooOnce you have the WURFL PHP API installed, it requires a prettysmall amount of code to build a page not unlike the ScientiaMobileexplorer page. In fact, we’re going to do that right now.Wait. If ScientiaMobile’s explorer pagealready lets me get WURFL informationabout devices, why do I want to go to thetrouble of building my own version?Building the explore page will get yourhands dirty with the WURFL API, andit will use data from your own data file.Learning by doing. That’s the ticket. We’ll buildsome underpinnings here that we can reuse forother—more functional—tasks.Also, the ScientiaMobile explorer page is driven bythe so-called Database Edition of WURFL. Thedata is stored and matched slightly differently thanthe XML file-PHP API combination we’ll be using.Bottom line: the data is a bit different in little(but sometimes critical) ways.Plus, by having your own explore page, you knowthat you’re getting data from your version of thedata file, not one that is older or newer than the oneyou have.Steps for building our explore pageBy your data, wemean the currentset of data youhave in the WURFLXML file youdownloaded wheninstalling WURFL.Set up our working environment, files, and configuration for WURFL.Write a bit of (boilerplate) PHP code to initialize some WURFLobjects so that we can start accessing capability information forthe current browser and device.Organize the capability data. Build a page and output the datain an HTML table.

device databases and classesyou are here 4 161config.php.exampledevice.phpindex.phpstyles.cssYour WURFLinstallationresourcesWURFLexploreWe’ll be editing thisfile and renaming it toremove the .example.This file holds somecode that getsWURFL deviceinformation andorganizes it.Our explorepage! Displayscapabilities.Simple stylesheetfor our page.See the installation appendix if youneed help locating the resourcesor API code directories in yourWURFL install.WURFL data sourceWURFL PHPAPI codeThe configuration file will tellthe explore code where to findyour WURFL installation.chapter5An explore page: Setting up our environmentThe first order of business is to get our directory structure sortedand a configuration file created. You’ll find a starting point in theexplore subfolder of the chapter5 folder.By this point, you should have the WURFL PHP API up andrunning. You’ll need to know the location of its installation to createa configuration file (well, one that works, anyway).Directory structure for the explore page

162 Chapter 5create a config file/* WURFL_DIR needs to point to the install directory for WURFL */define("WURFL_DIR", /path/to/WURFL/);/* RESOURCES_DIR needs to point to the resources dir you want to use. */define("RESOURCES_DIR", /path/to/WURFL/resources/);config.php.exampleChange me, please! Youneed to edit these pathsto point to your ownWURFL API code andresources directories.Write once, reuse indefinitely.We’ll be reusing this config filefor the rest of the examplesin this chapter.Set up our working environment, files, and configuration for WURFL.Write a bit of (boilerplate) PHP code to initialize some WURFLobjects so that we can start accessing capability information forthe current browser and device.Organize the capability data. Build a page and output the data in anHTML table.Now we can write some code toinitialize the WURFL objects andstart getting at capabilities…You’ve got WURFL installed (we sure hope), but now we need to configure it to workin the web page we’re building. To do that, we’ll want to create a configuration file.Open config.php.example in a text editor. Make edits to the paths below as indicated, andthen save the file as config.php in the explore folder (remove the .example extension!).Don’t forget to removethe .example extension.For help with WURFLinstallation paths, seeAppendix iii.

device databases and classesyou are here 4 163<?phprequire_once(config.php);$user_agent = $_SERVER[HTTP_USER_AGENT];$wurflConfig = new WURFL_Configuration_XmlConfig($wurflConfigFile);$wurflManagerFactory = new WURFL_WURFLManagerFactory($wurflConfig);$wurflManager = $wurflManagerFactory->create();$device = $wurflManager->getDeviceForUserAgent($user_agent);This includes our newconfig file.OK! We’ve got our configuration file. Now we need to create some code that willinitialize WURFL stuff and get it all warmed up so that we can plumb its depths fordevice capabilities. Open device.php in your text editor. It’s rather empty to start with,so let’s plop in some WURFL-y code!device.php’s job is twofold: initialize WURFL objects using the User-Agent headerof the current request (that is, the user’s browser) and to organize the capability datafor the device into something we can display on a page.I’m OK with most of this,but I can’t seem to get myhead around what those lastlines of code do.Those lines instantiate several WURFL objectsand populate a device object for us.Most of this chunk is boilerplate code that we’ll cut and paste asneeded to get WURFL into shape for our use. If you’re a whizwith PHP and this innately makes sense to you, kudos, but if itdoesn’t, don’t sweat it too much.Continues over the page.device.php

164 Chapter 5capability wrangling$device = $wurflManager->getDeviceForUserAgent($user_agent);The getDeviceForUserAgent method in the WURFL_WURFLManager classtakes a user-agent string and returns the matching device (from WURFL data) as aWURFL_CustomDevice object.At this point, ifthings went right,the device capabilitiesare ready to use.Translation: We feed it a user-agentstring, and it gives us a device objectpopulated with values for the variouscapabilities.Let’s take a slightly closer look at the last line of the boilerplate code chunk from page163. It’s where we tell WURFL how to build a device object. In our case, we’re using$user_agent, which currently holds the value of the User-Agent header of therequesting client.That is, we’re instructing WURFL to take the user-agent string of the current user’sbrowser and try to find a match in its data file. If it’s successful, we’ll have a deviceobject containing the capabilities of the browser and device.Now that we have a populatedWURFL device object, let’sorganize the device’scapabilities so that we candisplay them in an HTML table.Set up our working environment, files, and configuration for WURFL.Write a bit of (boilerplate) PHP code to initialize some WURFLobjects so that we can start accessing capability information forthe current browser and device.Organize the capability data. Build a page and output the data in anHTML table.

device databases and classesyou are here 4 165Still more to do over the page.$device = $wurflManager->getDeviceForUserAgent($user_agent);if ($device) {$groups = $wurflManager->getListOfGroups();$grouped_capabilities = array();foreach($groups as $a_group) {$grouped_capabilities[$a_group] = array();$capabilities = $wurflManager->getCapabilitiesNameForGroup($a_group);foreach ($capabilities as $cap) {$grouped_capabilities[$a_group][$cap] = $device->getCapability($cap);}}}device.phpThis code chunk organizes thecapabilities of the current deviceand browser into groups.It’s totally OK if you don’tunderstand everything this PHPis doing; you can just copy thisinto the device.php file.The second job of device.php is to organize the capabilities info so thatwe can display it later. We’ll add a chunk of code to the file to organizecapabilities by WURFL group.Drop the following code into device.php and save the file. We’re donewith device.php for now.The getListOfGroups() methodsimply returns an array ofWURFL group names……and getCapabilitiesNamesForGroup()gets the names of the capabilities, um,in that group!This is how we access the valuesof individual capabilities. We’ll lookmore closely at this in a bit.

166 Chapter 5finish up<div id="devicedata"><h2>Device Data</h2><p>Device data for <?php print $user_agent; ?></p><p><strong>WURFL Device ID: <?php print $device->id; ?></strong></p><?php foreach($grouped_capabilities as $group_name => $my_caps): ?><h3 class="group"><?php print $group_name; ?></h3><dl><?php foreach($my_caps as $cap_name => $cap): ?><dt><?php print $cap_name; ?></dt><dd><?php print ($cap) ? $cap : [no value]; ?></dd><?php endforeach; ?></dl><?php endforeach; ?></div>Iterate over the collectedWURFL capability data,which is organized by group.For each group, generate a <dl>with the names and values of thecapabilities in that group.If there is no value for thecurrent capability, displaythe string “no value.”Display the capability name ineach <dt>, and the value ineach <dd>. OK, let ’er rip! Save index.php andview it in your browser.Let’s display the user agentand the id attribute of thedevice (WURFL’s ID of whatthis browser or device is).Ready BakePHP/HTMLWe’re done with device.php for now. Time to edit index.php and add some code.This part is done! Time to do this.Set up our working environment, files, and configuration for WURFL.Write a bit of (boilerplate) PHP code to initialize some WURFLobjects so that we can start accessing capability information forthe current browser and device.Organize the capability data. Build a page and output the data in anHTML table.index.php

device databases and classesyou are here 4 167A good start!You can see all of the capabilities of your desktop browser now, withcapabilities organized by group.But we can make it betterInstead of just showing the capabilities of the current browser(especially uninteresting if you’re in a desktop browser!), let’s make theexplore page display WURFL data for any user agent. We can do thisby dropping a quick HTML form into index.php and making a smallchange to device.php.Set up our working environment, files, and configuration for WURFL.Write a bit of (boilerplate) PHP code to initialize some WURFLobjects so that we can start accessing capability information forthe current browser and device.Organize the capability data. Build a page and output the data in anHTML table.

168 Chapter 5check out that user agent<div id="testform"><form method="post" action="<?php print $_SERVER[PHP_SELF]; ?>"id="useragentform"><p>Test this user agent string:</p><input type="text" name="useragent" id="useragent_field"value="<?php print $user_agent; ?>" /><br /><input type="submit" name="submit" value="Test User Agent" id="submit" /></form></div>require_once(config.php);$user_agent = (isset($_POST[useragent])) ? $_POST[useragent] :$_SERVER[HTTP_USER_AGENT];$wurflConfig = new WURFL_Configuration_XmlConfig($wurflConfigFile);In device.php, we now check to see if thereis an incoming form value (in $_POST) forthe user agent; otherwise, we default to thecurrent browser’s user agent.Add a short form that allows theentry of any user-agent string.Edit this line.A quick one-two punch toimprove our explore pageA couple of quick changes, and our explorepage will be more useful.$_SERVER[‘PHP_SELF’] is shorthand forthe currently executing script—that is, theform will post to the current page.index.phpdevice.php

device databases and classesyou are here 4 169Save all of the changes and load up theindex.php file in a web browser.The first time you load the page, you should see yourown browser’s WURFL capabilities.1Try a few mobile browser user agents.Enter some mobile browser user agents into the formand explore the resulting capabilities.2Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; DROIDX Build/VZW) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0Mobile Safari/533.1 480X854 motorola DROIDXMozilla/5.0 (webOS/1.4.5; U; en-US)AppleWebKit/532.2 (KHTML, like Gecko)Version/1.0 Safari/532.2 Pre/1.0Try these.Now you can enter anyuser-agent string andexplore the capabilities ofthe matched device. Tired of typing in user-agent strings?We’ve got you covered. You’ll find a useful_user_agents.txt file in thechapter5 folder. All of the user agents mentioned in this chapter are init, for easy copying-and-pasting goodness.A quick way to find yourbrowser’s current UA string:http://whatsmyuseragent.comTest Drive

170 Chapter 5work that wurflPut capabilities to workI’m up to my earsin capabilities. How can I dosomething useful with them?OK, time to get specific.It’s time to figure out how to use WURFLcapabilities to determine whether or notwe should show that panic button onAcedIt!’s site.(Oh, yeah, that’swhat we were up to.)Create a configuration file and add some codeto initialize some WURFL objects—that is, getinformation about the current device and make itready for us to use.Ask WURFL about the specfic capability orcapabilities we care about.Add some code to the I’m Freaking Out! pagemockup to alter the content delivered to differentdevices based on the value of capabilities.Use WURFL to help differentiate contentLet’s only show the big, red panic button on browsersthat WURFL says are mobile browsers (not just narrowscreens, à la CSS media queries). We’ll do this by usingWURFL capabilities (bet you didn’t see that coming)!Steps to successWe learned how todo this part in thelast exercise!

device databases and classesyou are here 4 171Copy the config.php file from the exploredirectory into the panic_button directory.Do this!Back on page 165, we briefly met the getCapability method for the$device object.That’s a handy method. Even if this class and instance mumbo-jumbo isgenerally Greek to you, getting at those capabilities is not too tricky, andwe’ll show you how.Getting a value for a specific capability looks like this:$value = $device->getCapability($capability_name);Name of the capability we’reasking about as a string.e.g., ‘is_tablet’ or‘brand_name’$value will either be the valueof the device’s capability as astring, or NULL if there isn’ta value.$value = $device->getCapability(is_wireless_device);$value = $device->getCapability(cookie_support);A couple of examples:Does this browser-devicecombo support cookies?Ask WURFL the right questionsconfig.phpindex.phpstyles.csspanic_buttonbutton.pngNote that when you retrieve capability values, you don’t haveto worry about what group the capability is in. Groups are anice organizational concept, but each capability is uniquelynamed and can be asked for directly. You’re not required touse capability groups to interact with WURFL.A WURFL CustomDevice object,already initialized and populated. We’ll do this in the device.phpfile in just a sec.The imagefor the panicbuttonA mockupof the I’mFreakingOut! pageWURFLconfigurationdirectory and file structureIs this a mobile device?device.phpWURFL deviceinitializationand testingWant to see info about all the WURFLcapabilities? Check out http://wurfl.sourceforge.net/help_doc.php.

172 Chapter 5ask wurflIs this thing mobile?Now we’ve got our WURFL device all warmed up. Let’s ask it stuff.WURFL has a nice baseline capability called is_wireless_device,which answers the basic question: is this a mobile device? So, it wouldseem we’d want to do something like:$device = $wurflManager->getDeviceForHttpRequest($_SERVER);$is_phone = $device->getCapability(is_wireless_device);Yeah, right?Initialize the device and get the info readyYou’ll see that we’ve given you a bit of a leg up in the panic_button folder.The device.php file already contains much of the WURFL boilerplate stuff youneed to get your proverbial house in order.We’re going to be using a different method to instantiate the device than wedid for the explore page. Instead of using a user-agent string and calling thegetDeviceForUserAgent method, we’ll tell WURFL to use whatevervalues are in the current server request (contained in PHP’s always-available$_SERVER variable).$wurflManager = $wurflManagerFactory->create();$device = $wurflManager->getDeviceForHttpRequest($_SERVER);device.phpdevice.phpTranslation: Give us devicedata for the device currentlyaccessing the server.Sounds like a TRUE/FALSE(Boolean) type of question.This method also takes hints froma couple of other HTTP headersbesides the user-agent header—but user-agent is still the mainsource of clues.

device databases and classesyou are here 4 173Danger, Will Robinson!<div id="content"><h1>Im Freaking Out!</h1><?php if ($is_phone): ?><div id="panic_button"><img src="button.png" alt="HELP!" /></div><?php else: ?><h2>Help is only a phone call away.</h2><div id="big_number">503-555-2939</div><?php endif; ?><p>Pre-test late-night jitters? A math problem that justwont budge? Our expert on-call tutors are standing by to helpyou through tough moments.</p></div>$is_phone = $device->getCapability(is_wireless_device);$is_phone = ($device->getCapability(is_wireless_device) = = = true) ?true : false;In the PHP API, all capability values are returned as strings. That meansthat the seemingly Boolean capability is_wireless_device has threepossible values: true, false, or NULL (NULL means that WURFLdoesn’t have a value at all for that capability).We need to be more explicit, or the value false will evaluate as true,and nonmobile devices will look like mobile ones. So we must make thisalteration. Replace the last line we wrote with the new version:In PHP, the string ‘false’ istruthy. If you have no idea whatthat means, that’s OK. Just usethe code below instead of thelast code snippet on page 172.The triple-equals identity operator here meansthat the value must be exactly the string of‘true’ to pass, not just any truthy value.Now, use that valueThe device.php file gets included in the index.php file, so we canaccess the code we just wrote. We want to add the following PHPconditionals to index.php.…otherwise, just show the phonenumber, real big (via a CSS style).device.phpindex.phpFor requests that qualify as mobile(per the is_wireless_device_capability),show the panic button…

174 Chapter 5are you freaking out?Make the changes from pages 171 and 173 to config.php and index.php, save thefiles, and then view the resulting I’m Freaking Out! page in a desktop browserand a mobile browser.The button doesn’t show up ondesktop browsers, even with anarrow window.The button on amobile deviceTest Drive

device databases and classesyou are here 4 175Interviewer: So, WURFL, what exactly did you bringto the table here?WURFL: Seems pretty clear. You can tell right off if thebrowser is mobile!Interviewer: There are other ways to do that, youknow. Client-side detection, basic server-side detection—WURFL: Basic mobile-or-not-mobile is sort of child’splay. You’re not using me to my full potential.Interviewer: All right, try me.WURFL: So, I challenge you to look at the page on aniPod Touch.Interviewer: OK…[a long pause while the interviewer digsthrough a drawer of mobile devices]…yep, the big red button.WURFL: Doesn’t that seem a bit…well, perhaps notwhat you intended? When’s the last time you were able tomake a phone call from an iPod?Interviewer: Great. The button doesn’t make sense oniPod Touches. Now we’re back to square one.WURFL: No, no. Like I said, you’re not using me to myfull potential. Dig deep and revisit my capabilities. I thinkyou’ll make a nice discovery or two.Interviewer: But you have over 500 capabilities! Howwill I find the right one?WURFL: You’re complaining because I’m toocomprehensive? I can’t win! Fine, I’ll give you a hint:just because the button is showing up on mobile devicesdoesn’t mean it actually makes a phone call—you haven’tlinked it yet, so it’s a pretty image, but not functional.You might think about that and take another look at mycapabilities.WURFL ExposedThis week’s interview:What’s the use of WURFL?Go look at our explore page and investigate the capabilities for aniPod Touch (where we don’t want the button to show up) versusthe capabilities for an Android Nexus S (where we do want thebutton). You might also look at a desktop browser for comparison.Can you spot a capability that will help us make the differentiationbetween a small or mobile device and an actual phone?Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_2like Mac OS X; en-us) AppleWebKit/533.17.9(KHTML, like Gecko) Version/5.0.2 Mobile/8H7Safari/6533.18.5Mozilla/5.0 (Linux; U; Android 2.3.3; en-us;Nexus S Build/GRI40) AppleWebKit/533.1 (KHTML,like Gecko) Version/4.0 Mobile Safari/533.1The button shows up onan iPod Touch…where itdoesn’t make any sense.iPod Touch UANexus S UA

176 Chapter 5to call or not to callMake the page a bit smarter with WURFLBy testing the value of has_cellular_radio, we can get a good ideaas to whether the current user is on a phone. We also need to know how weshould link the phone number such that when users click on it, it initiates aphone call.The value in the xhtml_make_phone_call_string is a hint to thesyntax we should use when linking up phone numbers such that when the link isclicked, the phone knows to instigate a phone call. For the Nexus S, this value istel:.For the iPod Touch, this value is none. The iPod Touch doesn’t make phonecalls. Desktop browsers will also return a value of none.By combining the value in xhtml_make_phone_call_string with thephone number we want to dial, we can create a working link.Making phone calls with linksMobile phone browsers recognize certain URI patterns in links as phonenumbers. When a user clicks on this kind of link, an alert box prompts her toconfirm that she really wishes to place the call.tel: is the most common URI schema for phone numbers, and works fornigh all modern smartphones. But it doesn’t hurt to use WURFL’s value in thatxhtml_make_phone_call_string field. You’ve got it anyway. Here’swhat we end up with:<a href="tel:+15035552939">Make a phone call</a>tel: links work without the countrycode (+1). But to be correct aboutthings, you should use one. Plus, itmakes you seem so worldly.The WURFL bearer capability group has a handsome capability calledhas_cellular_radio. We’ll be looking at the value of that capability to evaluatewhether the current request is coming from a phone, not just any mobile device.We’re also going to make friends with the xhtml_make_phone_call_string,as it will show us how best to create clickable phone number links for this device.If the has_cellular_radio capability is‘true’ and there is a useful value for thexhtml_make_phone_call capability, we’llconsider this a phone!

device databases and classesyou are here 4 177The panic button: For phones only$is_phone = ($device->getCapability(is_wireless_device) === true) ?true : false;$has_radio = $device->getCapability(has_cellular_radio);$phone_string = $device->getCapability(xhtml_make_phone_call_string);We can include additional tests in the device.php file to look at thehas_cellular_radio and xhtml_make_phone_call_string values.First, let’s get the valuesNow, let’s evaluate them$phone_string = $device->getCapability(xhtml_make_phone_call_string);$is_phone = false;if ($has_radio === true && $phone_string && $phone_string !== none) {$is_phone = true;}We don’t need this line anymore. ‘none’ is a meaningful value!Recall from page 173 that, in the PHP API,CustomDevice->getCapability() returns either astring (if a value is present for that capability) or NULL (onlyif WURFL does not have a value at all for that capability).The difference is critical.For WURFL-identified devices like the iPod Touch and desktop browsers,the value for xhtml_make_phone_call_string is the string none.If you treat this as a Boolean value in PHP, it will evaluate as TRUE.This is why we haveto test both forthe existence of$phone_string andthat its value is notthe string ‘none’.device.phpdevice.php

178 Chapter 5calling questionsQ:Don’t mobile phone browsersautomatically recognize phone numbersand link them for you?A:Most do, yep. But a couple things aboutthat. Most relevant to our present situation:our link was an image, not a phone number.There was no text. A phone likely would nothave recognized it.Also, various phones’ abilities to correctlyrecognize phone numbers is hit or miss.Opera Mini has a tendency to think that zipcodes with the plus-4 extension are phonenumbers. Trying to place a phone call to a zipcode has curious results, as you’d imagine.Also recall that we are being quiteformal with our phone number formatting(+15035552329). One might want to displaya slightly different string in the link text itself,yet be confident that the link itself will beformatted correctly.Q:How come there has to be thatpop‑up confirmation box after a userclicks on a phone call link? Why can’t itjust spawn a call directly?A:This is to protect the user from beingtricked. A visible phone number link mighthave one number, but the link itself another.Some poor suckers might end up callinga scammer when they thought they werecancelling their local newspaper subscription.In our case, we’re not even displaying thephone number, something that is arguablynot really a best practice. We could alsouse a CSS background image instead ofan inline image, have the phone number asthe text in the link, and use a big negativemargin in CSS to hide the text.Q:In English, please? I didn’t major inCSS in college.A:Using a large negative left margin(e.g., margin-left: -10000px)is a way to get text to go way off to the leftand be invisible. We like to visualize the textsomewhere 10,000 pixels to the left, floating inthe air somewhere in our office. But we’re weird.Q:So, we think a browser that has anon-none value for xhtml_make_phone_call_string is on amobile phone that can make phone calls,but do we know?A:WURFL has some intelligent data, butit’s not that smart (no one is). There’s noclear-cut way to be absolutely certain a useris on a functioning cellular network (versusWiFi or something else) or that there are notother things preventing the actual placementof a phone call. But, really, this gets us morethan most of the way there.Q:Couldn’t we just test that thevalue of xhtml_make_phone_call_string isn’t none andcall it done? Isn’t the test for has_cellular_radio redundant?A:You might be on to something,Smartypants.Q:Speaking of Smartypants, youglossed over it pretty quickly, but Iactually do want to know more about theWURFL objects and API.…A:Hey, we heartily encourage you to golook at the PHP classes in the API and seehow they work together. If you’ve installedthe API, you’ve got the files already, so hopto it!No more button oniPod Touch! But stillthere on iPhone!

device databases and classesyou are here 4 179After updating device.php with the changes from page 173 with the stuff onpage 177, you might realize that you don’t have an iPod Touch on hand totest the changes.To see what an iPod Touch would see, edit the device.php file. Usethe getDeviceForUserAgent() method instead of thegetDeviceForHTTPRequest() method and give it an iPodTouch user agent.You can find oneon page 175.Answers on page 180.Jim: This could get out of hand! In a more complex project—or evenAcedIt!’s site, if it adds more mobile bells and whistles—it seems like usingscattered, individual WURFL capabilities all over the code would cause alot of headache and mess. I mean, if we end up with one capability beingtested for in one template, another capability being tested somewhere else…and so on.…Frank: I agree. It seems like we’d be delivering a slightly different websiteto every possible combination of capabilities—a nightmare to thinkthrough and test.Jim: A one-way ticket to spaghetti code, yeah.Frank: But I don’t want to throw out the whole concept. Even though Ilike to try to do feature detection on the client, and we still want to makeour stuff as responsive as possible, it does seem like a device database likeWURFL can give us insight into some details that we might not be able toget from other sources.Jim: But how do we corral all of this so it doesn’t make us crazy?Frank: It seems like if we could group devices logically—instead of testingcapabilities piecemeal—we might be able to keep our sanity. Rememberhow we recently spent time thinking through how to evaluate which devicesto support by picking and choosing features and drawing the line forphones that don’t make the cut?Jim: Do I ever. I’m still somewhat cross-eyed from those exercises!Frank: It seems like we could go one step further and create buckets ofdevices that are within the group of devices we decide to support.Jim: Interesting…I think you might be on to something.

180 Chapter 5device class corralHerding devicesA device class creates a sort of logical corral into whichyou can herd devices that have certain things in common.Just as a rancher might put spotted cattle into one field,giant work horses in another, and little piglets in yetanother (can you tell we’ve never been ranchers?), we cansort our devices into virtual cubby-holes with device classes.Sort once, then goOnce our rancher identifies an animal as belonging toone of those three groups, he can make further decisionswithout having to look at the smaller details. He can feedoats to the horses without stopping to reverify that theyhave legs of a certain length or swishy tails or can supportPNG images (everyone knows that horses lack support fortransparent PNGs!).He already knows they’re horses because they’re in thehorse corral. He doesn’t have to tailor feeding to eachindividual animal (that would be a lot of horse meals tokeep track of). But, at the same time, he doesn’t feed oatsto the piglets.A device class is an abstractcollection of commoncharacteristics that definea group of devices (andtheir browsers).You can test what content gets delivered for a given device or browser by using its user agentwhen intializing the WURFL device.$wurflManager = $wurflManagerFactory->create();$device = $wurflManager->getDeviceForHttpRequest($_SERVER);$user_agent = "Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_2 like MacOS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2Mobile/8H7 Safari/6533.18.5";$device = $wurflManager->getDeviceForUserAgent($user_agent);device.php

device databases and classesyou are here 4 181Device classesAs we learned earlier, we can run incoming requests againsta device database to get device information. By grouping thecapabilities and values that matter for the site at hand, we canadapt content across an entire device class instead of chasingdown each individual capability’s value.These device class definitions, converted into code, sortdevices into one of several groups. Once our devices aresorted, we can take action without having to keep track of eachindividual constituent capability.Incoming requestsare run against adevice database.Code evaluates which device classthe device matches based ondevice data.In this hypothetical example,devices are sorted into one offour groups.Desktop-like devicesSpiffy, newersmartphonesMiddle-of-the-road smartphonesand advancedfeature phonesDevices that didn’t meetbottom-line requirementsThe bar is set here(like in Chapter 4).

182 Chapter 5study aids on the goThe picture just got a lot biggerExpanding a lucrative part of AcedIt!’s businessAcedIt! is building a standalone website for the study aids it sellsto its students. It’s realized that flashcards, practice test booklets,reference books, and the like are selling like hotcakes, but the onlyway to purchase things right now is through a printed catalog.It’s time for a change. AcedIt!’s new study-aid-specific site willnot only allow users to buy any physical product online, but willalso introduce online products like flashcards that can be usedinteractively, right on the site itself.An early look at what it has in mindIt’s early yet. Logo designs haven’t been finalized, content is stillbeing evaluated, and the design is still in simple-mockup phase.But let’s see what the company’s up to:AcedIt!’s webfolks sent thisearly mockup ofthe new site’shome page.Users can shop onlineand study now—useinteractive productsright on the site itself.AcedIt! will featureproducts in a snazzyFlash movie.The home page hasexcerpts from thecompany’s blog.These ads arefor relatedservices, like paperproofreading andlocal study groups.AcedIt!’s devsare building thesefeatures usingJavaScript andother standardweb technologies.Hey, you guys. Nice job on that panic button!Do you think you could help us mobile-optimizea big new site we’re building?

device databases and classesyou are here 4 183Evaluate the home page wearingmobile-tinted glassesThe scope of the new study aid site is much bigger than thesingle panic button page. We risk making ourselves crazy if we plandevelopment piecemeal, capability by capability. One way to frame ourdevelopment approach and make the site work well for different kinds ofusers is to group the different experiences using device classes.Combining device data with logical groupingThe process of defining device classes is related to the work we did inChapter 4. We look at the task at hand, figure out what things matter,mumble a few incantations, and come out the other side with somegeneral criteria.We know. “Group the experiences using device classes” iscatastrophically vague. Let’s start by reviewing the mockup again andweighing AcedIt!’s priorities against what we know about mobile webcharacteristics and constraints.Using Flash content isproblematic on mobiledevices. We’ll needto find an alternateformat for mobile.AcedIt! has mentionedthat it doesn’t thinkthe ads need to showup for mobile users.It seems a bitlukewarm on thewhole ad part of thesite, anyway.We might want to link tothe blog instead of havingthe content excerpts righton the page.We’ll want to adjust the layout byreducing the number of columnsand tightening up the header.There’s a lot ofcomplex CSS3 stylingthat won’t work onall devices.AcedIt! has made itvery clear that theinteractive elementson the site are ofmega importance.We need to keep the JavaScriptand AJAX (AsynchronousJavaScript and XML) devicecapabilities in mind.OK, yeah, we know. We onlyhave a rough landing-pagemockup for right now. Butthe scope will be broader onthis project…eventually.We can put the content firstand the navigation nearer tothe bottom for mobile layouts.

184 Chapter 5full-fat design vs. skinny designA fuller mobile experienceBy creating a device class that encompasses the requirementsfor the richer mobile experience, we can design something neatwithout risking poor support on lesser devices.By specifying that devices in this class must have a WebKit-based browser, we can use CSS goodies like gradients withrelative confidence. We can also rely on a certain level of decentJavaScript support.A simplified experience for simpler phonesFor narrower screens and less powerful devices, let’s be morestreamlined. And let’s not assume support for all of the modernbrowser bells and whistles.This simpler layout doesn’t provide the link to the online products,but users can still shop in the online store. This version worksfairly well down to about 176 pixels wide, at which point theproduct images in the store become difficult to see.Group requirements into multiple mobile flavorsInteractivepieces of thesite look best onscreens at least320 pixels wide.The full-fledged interactive site experience has some high demands. Mobiledevices need to have the kind of JavaScript, HTML, and CSS support that isusually found in newer, swankier browsers on smartphones. Specifically, theAcedIt! devs are targeting mobile devices running WebKit-based browsers anddesigning for screen sizes no narrower than 320 pixels.But that doesn’t mean everyone else should get the cold shoulder. Smaller,slightly less cutting-edge phones are still welcome on the site. They can buyphysical products in the online store and visit the other areas of the site. Theyjust aren’t cut out for the heavy-duty interactive experience or the hardcore CSS,for example.Instead of delivering to the lowest common denominator or kicking out devicesthat don’t quite cut it, let’s create two separate flavors of the site that makesense for each group of devices.higher_mobilesimpler_mobileNow we have a rough senseof our two mobile deviceclasses, higher_mobile andsimpler_mobile.The landing pagemocked up as itwould appear foreach device class

device databases and classesyou are here 4 185Rounding out our device classeshigher_mobilesimpler_mobiledesktoptabletunsupportedTotally RequiredBased on the priorities and requirements,it seems like the following are thebottom line. Mobile devices musthave the following to be considered“supported.”- SSL support- Cookie support- At least some JavaScript support- A resolution of at least 176pxWe now have a rough sense of two mobile device classeswe’ll want to construct. What else?Oh, by the way, tabletsAcedIt!’s devs are also working on a tablet-optimized,super-nifty, touch-driven interface for their online products.It’s not done yet, but they want to be prepared for itseventual launch by being able to identify tablets now.Where to draw the lineIt’s important to the AcedIt! folks that their visitors caneither shop online or use the online products. If visitorscan’t do either because of device constraints, the deviceand browser they are using are considered unsupported.The company’s ecommerce software requires cookiesupport and a bit of JavaScript support (not nearlyas much as the online interactive products). It is alsomandatory that, for security, devices support SSL.Our device class lineupWebKit-basedbrowsers and atleast 320px widthMinimal JavaScriptsupport and at least176px widthHey, desktop is adevice class, too!Yep, tabletsIs delinquent in anyof the totally requiredcharacteristics

186 Chapter 5interview with a device classSlightly Confused Web Developer: I’mhaving trouble getting my head around this deviceclass business. A collection of capabilities…tied toan experience?Device Class: I admit, I am a bit difficult tocapture. If I were a painting, I’d be an abstract blur.I’m a concept, a way to think about organizingcommon things so that we can create just a fewflavors of a site, instead of a million billion.SCWD: So, a device class is a set of WURFLcapabilities—Device Class: Not so fast. Remember that I’man abstract concept. We’ll be using WURFL here,but there’s no reason you have to. No reason, infact, you have to use any device database.SCWD: This is all starting to feel a bit woo-woo.Can you help me understand where the rubbermeets the road here?Device Class: OK. Let’s plan this together. ForAcedIt!, we’ll have five device classes.SCWD: Does that mean we’ll be making a versionof the website for each? That sounds like a big task.Device Class: No, we only need to focus onthe differences. For example, until the new touch-based, tablet-optimized flashcard interface islaunched, the tablet-device-class version of the siteonly differs from the desktop version in that noFlash content will be used.SCWD: OK, so we have a desktop device class,which is self-evident…and that tablet device class,which has minor differences…let’s see. What arethe differences between higher_mobile andsimpler_mobile?Device Class: As we know thathigher_mobile represents devices with largerscreens and capable WebKit-based browsers,we can be more confident that they have thehorsepower to handle some of the site’s moreintensely interactive features.simpler_mobile, by contrast, representsdevices with narrower screens and perhaps lesscutting-edge browsers. We can give them smallerimages (yay! less bandwidth). We know they supporta bit of the ol’ JavaScript, but can give them a doseof content that is less deluxe.SCWD: Wait, how do we know that thesimpler_mobile devices support JavaScript?Device Class: We will test for at least a modicumof JavaScript support. Devices that don’t have theability to modify the DOM after page load will beshunted off into the unsupported device class.SCWD: So what’s up next to keep this ball rolling?Device Class: We need to map the rightWURFL capabilities and their values to thedevice classes we want to create. After we havea logical representation of the device classes, we’llcreate code to do some actual testing and slotting.Device Classes ExposedThis week’s interview:Abstraction to execution…whatexactly is a device class?

device databases and classesyou are here 4 187Pool PuzzleTime to find the right WURFL capabilitiesand values for our device classes.Your job is to take the WURFLcapabilities and values from thepool and place them into the blankdevice classes. You may not usethe same item more than once.Note: each thing fromthe pool can only beused once!resolution_width>= 320 pixelsresolution_width< 320 pixelscookie_support = falsehttps_support = falseis_tablet = trueis_wireless_device = falseajax_manipulate_dom = falsemobile_browser =Safari OR Androidis_wireless_device = trueis_wireless_device = truehigher_mobilelesser_mobileunsupporteddesktoptabletresolution_width < 176

188 Chapter 5exercise solutionPool Puzzle SolutionNow we’ve collected the right WURFLcapabilities and values to buildour device classes.resolution_width>= 320 pixelsresolution_width< 320 pixelscookie_support = falsehttps_support = falseis_tablet = trueis_wireless_device = falseajax_manipulate_dom = falsemobile_browser =Safari OR Androidis_wireless_device = trueis_wireless_device = truehigher_mobilelesser_mobileunsupporteddesktoptabletresolution_width < 176

device databases and classesyou are here 4 189Q:Why the focus on WebKit-based browsers? Are thedevs hating on other, totally decent mobile browsers?A:WebKit-based browsers are seen by many mobile webdevs as both fairly advanced and consistent. Browsers withthe WebKit rendering engine generally have good support forHTML5, JavaScript, and CSS3.Note the word generally in the previous sentence. The problemis, there is a misconception as to just how consistent browsersbased on WebKit are. The sad truth is: there’s still a lot of chaos.Mobile platform strategist Peter-Paul Koch spells out thepitfalls of assuming consistency in mobile WebKit browsersin the thorough post “There is no WebKit on Mobile” on hisQuirksBlog (http://bit.ly/uWnFLa).Q:If mobile WebKit isn’t really a “thing,” why are webasing a device class on it?A:Consistent and reliable or no, WebKit-based browsersare what the devs have done their development on and testingfor. At this point in the project, it is too late to throw the netwider. We’re kind of following their lead on this one.Q:How is testing for the string Safari orAndroid as the mobile browser name equivalent tofinding all WebKit browsers?A:You might recall from Chapter 3 that user-agent stringsare wily creatures. Apple’s history with respect to WebKitendures in the user-agent string legacy. At time of writing, allknown mobile variants of WebKit browsers have either “Safari”or “Android” in their browser name (yes, even WebKit browserson BlackBerries and Nokia phones and whatnot).Q:If I use device classes in a project, will I always havefive?A:Nope. You might have 10, 4, or 0. Having fewer meansless complexity. Having more means more nuance.Q:What’s with the names higher_mobile andsimpler_mobile? Is there a naming convention Ineed to know about?A:Eh, we just pulled those out of a hat. They soundedabout right. We used underscores simply so we can translatethe names into code more easily. You can call your deviceclasses whatever you’d like. Within reason.Q:Now that we’ve got device classes, I can never testan individual device capability?A:You can totally still test individual capabilities. In fact, thesolution for the panic button problem was very appropriate: wewere testing for the value of a very specific capability—a valuethat might differ among devices in the same device class (aniPhone versus an iPod Touch, for example).Q:Couldn’t a device match more than one deviceclass?A:Yes. We need to arrange our device class testing codein order carefully. The first matched device class will be thedevice class we assign.Q:What the heck is the CustomDevice object Ikeep seeing in the code examples?A:CustomDevice is simply the name of the class inthe WURFL API that represents a device and its characteristics.Q:Seems like device classes are not just a mobile webthing.A:Not at all! Content and layout adaptation is a concernthat spans the entire Web. The mobile web doesn’t have amonopoly on that.Q:OK, great. I have some circles with somecapabilities and required values in them. Now what?A:Turn the page, my impatient friend. We’re going to startturning these device classes into code.

190 Chapter 5grouping groundworkLet’s get this show on the roadNow we need to convert the abstract notion of what we’re grouping intoreal code that will detect and slot devices into the appropriate device class.Here comes the sorting!Write a (PHP) function to test the individualdevice capabilities we care about in each deviceclass definition.Translate each device class’s capability requirementsinto conditional (if/then) statements in codeso we can determine which device class the currentdevice should be assigned to.But, first…Find the device_classes folder in chapter5, and then the test_classesfolder beneath it. Eureka! This is our playground for now.This is probably starting to feel pretty familiar: we need to set upa configuration file so that WURFL can be initialized. Start bycopying the config.php file from the panic_button folder intodevice_classes/test_classes.Write a simple test page (similar to our WURFLexplore page) to see how different user agents getsorted into device classes.config.phpindex.phpstyles.csstest_classesdevice.phpdevice_classes.phpdevice_classesWe’ll add to this file overthe next few pages.To cut down on busywork, wecobbled this together for you.And we’re off!Here’s what we’re going to do:A simple test page toenter user agents and seewhich device class theyget slotted into.

device databases and classesyou are here 4 191Ready BakePHPfunction device_match($capability, $comparison, $value) {global $device;if (!$device) {return FALSE;}$device_value = $device->getCapability($capability);switch ($comparison) {case ==:case ===:return ($device_value === $value);case !=:case !==:return ($device_value !== $value);case >=:return ($device_value >= $value);case <=:return ($device_value <= $value);case >:return ($device_value > $value);case <:return ($device_value < $value);case LIKE:return (strpos($device_value, $value) !== FALSE);case NOT LIKE:return (strpos($device_value, $value) === FALSE);default:return FALSE;}}The name of thecapability to testA comparisonoperator The value to testagainstMake sure the deviceobject exists.Get the value ofthe capabilityfrom the device.We test thecurrent value fromthe device againstthe value we arecurious about.Get acquainted with the matching functionYou’ll find this matching function already waiting for you inside ofdevice_classes.php. We’ll use it when we create the individual tests foreach device class.We wanted to tell you a few things about it before we started takingadvantage of it. Stand back; here comes some PHP.device_classes.phpThis functionreturns a TRUE orFALSE (Boolean)result—whetheror not the giventest passed.

192 Chapter 5dig deeperswitch ($comparison) {case ==:case ===:return ($device_value === $value);case !=:case !==:return ($device_value !== $value);case >=:return ($device_value >= $value);case <=:return ($device_value <= $value);case >:return ($device_value > $value);case <:return ($device_value < $value);case LIKE:return (strpos($device_value, $value) !== FALSE);case NOT LIKE:return (strpos($device_value, $value) === FALSE);default:return FALSE;}Depending onthe comparisonoperator supplied,the values arecompared indifferent ways.$device_value is the value of the capabilityin question on the current device.$value is the valuewe’d like to testagainst.LIKE and NOTLIKE allow us todo glob (substring)comparisons.device_match(resolution_width, <=, 240);device_match(is_wireless_device, ===, false);device_match(mobile_browser, LIKE, Safari);Some examplesThis test passes (returnsTRUE) if the device’sresolution_width value is240 pixels or smaller.This test passes if theis_wireless_device value forthis device is ‘false’.This test passes if themobile_browser valuecontains the string ‘Safari’.If $comparison is not one ofthe recognized comparisonoperators, we fail.What’s going on in that switch statement?

device databases and classesyou are here 4 193Write a (PHP) function to test the individual devicecapabilities we care about in each device class definition.Translate each device class’s capability requirements intoconditional (if/then) statements in code so we can determinewhich device class the current device should be assigned to.Write a simple test page (similar to our WURFL explore page)to see how different user agents get sorted into device classes.We wrote that matching function for you, but now it’s time for you to do a bit of work.Which tests belong to which device class?if (device_match(mobile_browser, LIKE, Safari) ||device_match(mobile_browser, LIKE, Android))if (device_match(is_wireless_device, ===, false))if (device_match(https_support, ===, false))if (device_match(cookie_support, ===, false))if (device_match(ajax_manipulate_dom, ===, false))if (device_match(resolution_width, <, 176))if (device_match(resolution_width, >=, 320))if (device_match(resolution_width, <, 320))if (device_match(is_tablet, ===, true))Use the matching function to test capabilitiesNow we have a function to test capabilities with. Time to convert ourrequired capabilities into tests.Reminder: The deviceclasses we endedup with are desktop,tablet, higher_mobile,simpler_mobile, andunsupported. We figuredout what to test foreach in the pool puzzleon page 188.

194 Chapter 5exercise solutionWe’ve got these tests sorted! Now it’s time to convert them into grouped nuggets of real PHPcode. Keep truckin’!if (device_match(mobile_browser, LIKE, Safari) ||device_match(mobile_browser, LIKE, Android))if (device_match(is_wireless_device, ===, false))if (device_match(https_support, ===, false))if (device_match(cookie_support, ===, false))if (device_match(ajax_manipulate_dom, ===, false))if (device_match(resolution_width, <, 176))if (device_match(resolution_width, >=, 320))if (device_match(resolution_width, <, 320))if (device_match(is_tablet, ===, true))higher_mobileunsupporteddesktophigher_mobileunsupportedtabletunsupportedunsupportedsimpler_mobileTime to put thecode together…This feels like it might be an appropriate testfor the desktop device class, but we’ll be weedingout desktop browsers immediately by looking atthe is_wireless_device capability…

device databases and classesyou are here 4 195Comfortable with PHP code? See if you can plunk in the missingpieces of the code chunk here. These are the device class tests,grouped and ready to go.$device_class = NULL;if (device_match(is_wireless_device, ===, )) {$device_class = desktop;}else if (device_match(https_support, , ) ||device_match( _support, , ) ||device_match(ajax_manipulate_dom, ===, false) ||device_match( , , 176)) {$device_class = ;}else if (device_match(is_tablet, ===, )) {$device_class = ;}else if (device_match(is_wireless_device, ===, true) &&device_match(resolution_width, >=, ) &&(device_match(mobile_browser, , Safari) ||device_match( , LIKE, Android) )){$device_class = ;}else if (device_match(is_wireless_device, ===, ) &&device_match( , <, )) {$device_class = simpler_mobile;}

196 Chapter 5tests at the readyAll right, now we have our tests!$device_class = NULL;if (device_match(is_wireless_device, ===, )) {$device_class = desktop;}else if (device_match(https_support, , ) ||device_match( _support, , ) ||device_match(ajax_manipulate_dom, ===, false) ||device_match( , , 176)) {$device_class = ;}else if (device_match(is_tablet, ===, )) {$device_class = ;}else if (device_match(is_wireless_device, ===, true) &&device_match(resolution_width, >=, ) &&(device_match(mobile_browser, , Safari) ||device_match( , LIKE, Android) )){$device_class = ;}else if (device_match(is_wireless_device, ===, ) &&device_match( , <, )) {$device_class = simpler_mobile;}falsefalsefalse======cookieresolution_widthresolution_width<unsupported320LIKEmobile_browsertrue320higher_mobiletruetabletAll right! Two out of three! We’re almost done now!First and foremost: is thiseven a mobile browser?Make sure this devicedoesn’t lack our baselinerequirements…Is it perhaps a tablet?Or are its browserand resolutionpretty awesome?Or maybe it’s good enoughbut not cutting-edge.Write a (PHP) function to test the individual devicecapabilities we care about in each device class definition.Translate each device class’s capability requirements intoconditional (if/then) statements in code so we can determinewhich device class the current device should be assigned to.Write a simple test page (similar to our WURFL explore page)to see how different user agents get sorted into device classes.

device databases and classesyou are here 4 197Put code into the device_classes.php file.Add the tests from page 196 into the file after thedevice_match function and save it.1View the index.php file in a browser.By default, the page will show you the device classassigned to your current browser.2Test some different user agents.Enter the user agents here into the form field to seewhich device class they get assigned to.3Mozilla/5.0 (PlayBook; U;RIM Tablet OS 1.0.0; en-US) AppleWebKit/534.8+ (KHTML,like Gecko) Version/0.0.1Safari/534.8+BlackBerry9300/5.0.0.794Profile/MIDP-2.1 Configuration/CLDC-1.1 VendorID/245PantechP2020/JIUS05172010R;Mozilla/5.0 (Profile/MIDP-2.0Configuration/CLDC-1.1; OperaMini/att/4.2.19039; U; en-US)Opera 9.50BlackBerry8330/4.5.0.77 Profile/MIDP-2.0 Configuration/CLDC-1.1VendorID/105This simple testform is coded foryou in index.php.The page displays thedevice ID and thecomputed device class forthe entered user agent.Time to pound the last few nails into our device class testing project.We want a page with a simple form that will take a user agent and spitout which device class it matches. As this is super similar to what wedid for the WURFL explore page, we’ve done it for you (yippee!).The home stretchindex.phpTest Drive

198 Chapter 5testing timeWell, let’s see…how’d it go?Looks like something went a bit wrongThe problem is that this Curve has a resolution of 320 pixels (meaning it’s toowide to qualify for the simpler_mobile class), but does not have a WebKitbrowser (meaning it fails to qualify for higher_mobile). This is going to be aproblem for other devices that have higher resolution but non-WebKit browsers.We need to fix this and make sure our device classes don’t have any other logicalholes that devices can fall through.Filling in the gapsWe have three options for how to fix the higher‑resolution‑but‑non‑WebKit‑browsersituation:We could create a new device class to handle this combination.1We could change the higher_mobile device class to allow forother, non-WebKit browsers.2We could edit the simpler_mobile device class and remove the240-pixel resolution maximum.3Why did the user agent for theBlackBerry 9300 (Curve) fail tomatch any device classes?Grouping by resolutionGrouping by browserEach option is totally valid. We have to decide which seems most ideal for theAcedIt! study aid website.This RIM Playbookwas correctlyidentified as a tablet.This Pantech smartphonequalifies as simpler_mobilebecause of its smaller screen.This BlackBerry’s browser is oldenough (version 4.5) that it doesn’tallow manipulation of the DOMafter the page is loaded.Uh oh! This user agent didn’tqualify for any device classes!Good!Good!Good!Uh oh!That is, it doesn’t havethe kind of JavaScriptsupport required.

device databases and classesyou are here 4 199Joe: Do we really need to add yet another device class? Seems like alot to wrangle.Frank: I agree. We need to strike a balance between nuance andthe number of device classes we have. It feels like we already haveabout the right number.Joe: So, what now?Frank: OK. The problem is that higher-resolution devices thatdon’t have WebKit browsers are falling through and not gettingassigned to any device classes—Joe: Aren’t there actually two problems here? One, we’re notthinking through what experience those devices should get, like yousaid. But we also don’t have a fallback, default device class overall.Seems possible something could go wrong with device detection orthere might be something else we’re not thinking of. I think we needa sort of safety net device class.Frank: Good point. For the first problem, if we’re not adding anew device class, we need to fill the gap. The question is: what ismore relevant here, device resolution or browser capabilities?Joe: AcedIt! puts a lot of focus on the interactive elements of thesite—that suggests browser capabilities matter more. But at thesame time, we were planning on delivering smaller images to thoselower-resolution devices.Frank: I think you’re right about AcedIt!’s priorities. How aboutthis for a compromise? We update the device classes such that thereisn’t a top-end resolution restriction on the simpler_mobileclass.That does mean that some higher-resolution devices get asimpler feel, but if I recall correctly, the dev team working onthe touch‑optimized flashcards is using a framework targeted toWebKit-based browsers. Heh, in fact, I think that’s why we weretesting for WebKit browsers in our higher_mobile class in thefirst place. Wow, I need to get more sleep; my memory is failing me.Joe: What about images?Frank: I think we’d do fairly well if we gave all mobile devicesmobile-optimized images that aren’t any bigger than 320 pixels inany dimension. Then we can use responsive image techniques to getus through the final mile on the device.

200 Chapter 5retest the user agentFill in the gaps in the device class tests$device_class = higher_mobile;}else if (device_match(is_wireless_device, ===, true) &&device_match(resolution_width, <, 320)) {$device_class = simpler_mobile;}else {$device_class = desktop;}Here are the changes we need to make to our device class tests: Remove this resolutionrestriction for simpler_mobile.Careful: Onlyremove one of theparentheses here.Add a fallbackdefault device class.Make the changes to the device_classes.php file and retry the user-agent strings frompage 197 in the test form.Yay! The problematicBlackBerry useragent now matchesthe simpler_mobiledevice class.device_classes.phpTest Drive

device databases and classesyou are here 4 201config.phpadapt_contentstylesdevice_classes.phpindex.phptest.phpcommon.cssdesktop.cssmobile.cssmwebkit.cssMake something actually happenwith device classesTime to take the device classes we’ve cooked up and get cracking.The goal: deliver different flavors of the landingpage mockup to different users based on deviceclasses.We’ll use our code to sort devices into device classes and deliverdifferent versions of the current AcedIt! study-aid-site mockup todifferent devices, using the wireframes we whipped up on page 184.Do this! It’s getting a bit late, and we’re alltired: to save you some time, wedid a lot of this for you.We’re going to walk through how we didit over the next several pages, but we’ll show you where tofind the finished code.Copy the configuration file from the lastexercise into the adapt_content folder. Yep.Again! This is the last time, we promise.This is the device classtesting code we justfinished up (alreadythere for you).Your configuration fileThis page allows you toenter a user agent so thatyou can view index.php asdifferent devices.CSS for thedifferentdevice classes.The HTML and CSS we’re dealing with here is pretty basic:AcedIt! is still in the early phases of development on the new site,and so we’re working with some pretty barebones mockups.We’ll treat unsupported devices similarly todesktop browsers…for now, at leastWe’re going to deliver content to the unsupported device classthat is basically the same as the desktop content, but we’llexplicitly eliminate links to the interactive flashcards section ofthe site and the online store. We’ll also not deliver Flash contentto unsupported devices.device.phpDevice initializationfile: all ready for you

202 Chapter 5content deliveryThe starting point of index.php has all versions of the content (for all deviceclasses) in it. It’s time to identify which pieces of content will be delivered(or not delivered) to users who fall into our different device classes. For eachnumber below, find the corresponding markup on the right and fill in theblanks with the appropriate device classe(es).Use this DOCTYPE for the1 device class.2 Use this stylesheet for the ,device classes.3 Use this stylesheet for the anddevice classes.4 Use this stylesheet for the device class.5 Show this version of the navigation for the ,device classes.6 Do not show these two links for the device class., and, and

device databases and classesyou are here 4 203<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN""http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"><!DOCTYPE html><html><head><title>AcedIt! Study Aids</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" /><link rel="stylesheet" type="text/css" href="../assets/common.css" /><link rel="stylesheet" type="text/css" href="../assets/desktop.css" /><link rel="stylesheet" type="text/css" href="../assets/mobile.css" /><link rel="stylesheet" type="text/css" href="../assets/mwebkit.css" /></head><body><div id="header"><h1>AcedIt! Study Aids</h1></div><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">Shop Online</a></li><li><a href="#">Study Now!</a></li><li><a href="#">Contact Us</a></li><li><a href="#">FAQ</a></li></ul></div>123456Psst…the Study Now sectionis the interactive JavaScript-based flashcard feature.Continued on next page.index.phpHere’s the markup from the index.php file. Use it to answer the questions on thepage at left.

204 Chapter 5still queuingOh, you thought you were done? At least you’re halfway there!Deliver Flash content to the7 device class.8 Don’t use Flash for the, or,device classes.9 Don’t show these sections for the ordevice classes.1011Show this version of the navigation for the anddevice classes.device class.,Hide the link to the interactive flashcards for the

device databases and classesyou are here 4 205<div id="intro"><p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante.Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdieturna sit amet risus...</p></div><div id="feature"><div id="featured_product"><p>Featured product Flash slideshow.</p><p>Static featured product image.</p></div></div><div id="ads">...</div><div id="fromtheblog">...</div><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">Shop Online</a></li><li><a href="#">Study Now!</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact Us</a></li><li><a href="#">FAQ</a></li></ul></div><div id="footer"><p>Current device class: <?php print $device_class; ?></p></div></body></html>7891011We removed a bit of the textcontent to save space here onthis page.It’s probably obvious, but theseare just placeholders until theFlash movie and static variantare developed.index.php

206 Chapter 5code conversionTime to look at the markup differences for the different device classes andconvert our decisions into code.2 Use this stylesheet for the ,device classes.3 Use this stylesheet for the and device classes.4 Use this stylesheet for the device class.Use this DOCTYPE for the1 device class.simpler_mobileWe’ll use XHTML-Basic forthe simpler mobile device class.Everyone else gets HTML5.desktop tabletunsupportedRecall that we’re treating the unsupporteddevice class—mostly—like desktop.higher_mobilesimpler_mobilehigher_mobileThis stylesheet has gradients and other fancy-pantsstuff, specifically formulated for WebKit browsers.<?php if($device_class = = simpler_mobile): ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"><?php else: ?><!DOCTYPE html><?php endif; ?><link rel="stylesheet" type="text/css" href="../assets/common.css" /><?php if ($device_class == desktop|| $device_class == tablet|| $device_class == unsupported): ?><link rel="stylesheet" type="text/css" href="../assets/desktop.css" /><?php endif; ?><?php if ($device_class == higher_mobile|| $device_class == simpler_mobile): ?><link rel="stylesheet" type="text/css" href="../assets/mobile.css" /><?php endif; ?><?php if ($device_class == higher_mobile): ?><link rel="stylesheet" type="text/css" href="../assets/mwebkit.css" /><?php endif; ?>There are elements common to bothmobile device classes in these styles.Everyone gets the aptly namedcommon.css.2341, and

device databases and classesyou are here 4 2075 Show this version of the navigation for the ,device classes.6 Do not show these two links for the device class.desktop tabletunsupportedThis is the desktop-style navigation, nearthe top of the page.unsupportedDeliver Flash content to the7 device class.8 Don’t use Flash for the, or,device classes.desktoptabletunsupportedhigher_mobilesimpler_mobileFlash and mobile devicesoften don’t play welltogether. Ditto for tablets.<?php if ($device_class == desktop|| $device_class == tablet|| $device_class == unsupported): ?><div id="navigation"><ul><li><a href="#">Home</a></li><?php if ($device_class != unsupported): ?><li><a href="#">Shop Online</a></li><li><a href="#">Study Now!</a></li><?php endif; ?><li><a href="#">Contact Us</a></li><li><a href="#">FAQ</a></li></ul></div><?php endif; ?>No online shopping orsnazzy flashcards forthese guys!56<?php if ($device_class == desktop): ?><p>Featured product Flash slideshow.</p><?php else: ?><p>Static featured product image.</p><?php endif; ?>78,Continues over the page., and

208 Chapter 5who gets what?9 Don’t show these sections on the or device classes.1011Show this version of the navigation for the anddevice classes.device class.Hide the link to the interactive flashcards for thehigher_mobile simpler_mobilehigher_mobilesimpler_mobilesimpler_mobileWe’re not showing ads on the mobile layouts, andinstead of having blog teasers on the page, we’llprovide a link to the blog subpage.This is the mobile version of the navigation,down at the bottom of the page.No interactive flashcards for these phones!<?php if ($device_class == desktop|| $device_class == tablet): ?><div id="ads">...</div><div id="fromtheblog">...</div><?php endif; ?>9<?php if ($device_class == higher_mobile|| $device_class == simpler_mobile): ?><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">Shop Online</a></li><?php if ($device_class == higher_mobile): ?><li><a href="#">Study Now!</a></li><?php endif; ?><li><a href="#">Blog</a></li><li><a href="#">Contact Us</a></li><li><a href="#">FAQ</a></li></ul></div><?php endif; ?>Only give the link tothe flashcards to thehigher_mobile class.1110

device databases and classesyou are here 4 209Try it out! Find the finished version of index.php in index_solution.php.Replace the current index.php file with index_solution.php.Navigate to test.php in your web browser and try some of the user-agentstrings from the useful_user_agents.txt file to see the different device classversions. Hit index.php directly with your desktop browser to see the desktopversion of the mockup.We tightened up our device class tests on page200, but can you think of anything other risks wemight not be considering?Test Drive

210 Chapter 5wurfl-ly genericAlways tread with care and come preparedWay back in Chapter 3, we highlighted some pitfalls of server-side device detection using user agents. There are some risks thatyou should keep in mind:Browsers don’t always send accurate user agents.Sometimes the user purposely overrides what user agent getssent, and sometimes browsers just send weird ones. This couldcause a device database to return inaccurate data.1WURFL doesn’t always find a (specific) match.WURFL doesn’t always find a successful match, or any validmatch whatsoever. You might get a generic device ID, ornothing at all.2WURFL’s “generic” is pretty genericIf you tried out the facebookexternalhit user agent in our explorepage (and if you didn’t, do it now!), you will have noticed that WURFLidentifies it as device ID generic. This is WURFL’s way of shrugging itsshoulders and saying, “hey, I tried, but I just don’t know what this puppy is.”So what?The values for capabilities for a generic device aren’t meaningful enoughto base decisions upon. It’s unlikely that the facebookexternalhitclient has a resolution_width of 90 pixels, for example. That justhappens to be the value that our WURFL data file has for generic devices.Do this!Go back to the explore page we created earlier in the chapter and enter thefollowing user agent: facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php).

device databases and classesyou are here 4 211When designing a site that uses server-side detection, take some timeto think through how the site will behave if a generic ID is returned,or if the device fails to match at all. Hint: It should still work.Accidental success is not good enoughOn the AcedIt! study aid mobile test site right now, user agents thatresult in a generic device match will receive the unsupported deviceclass (try the facebookexternalhit user agent to see). Thisis not an inappropriate device class to assign, but the assignment iskind of happening via dumb luck. WURFL data can vary a bit.Let’s compare the facebookexternalhitcapability data in our explore page againstthe data in the ScientiaMobile explorer.Visit http://www.tera-wurfl.com/explore and enter thefacebookexternalhit user agent.The first thing tonote is that the Database Edition’s variant of the genericdevice ID is called generic_web_browser.If you explore the capabilities returned for a bit, you’llfind more differences. For example, take a look at thedisplay capability group and compare it to the displaycapability group values for our “generic” device ID above.Pretty different, huh? It’s smart to get familiar with ourflavor of WURFL (the PHP API, file-based variant), andit’s a good idea that we have our own explore page.We need a bigger safety netDetail from the ScientiaMobileexplorer page capabilities for thefacebookexternalhit user agentDetail of our explore page. The genericvalues for the display group are verygeneric—we shouldn’t rely on them.

212 Chapter 5what if there’s no device at all?A stitch in timeif (!$device->id|| (!$device->isSpecific()&& $device->fallBack === root)) {/* FAIL--make sure you have a plan for this situation */}If there is nodevice ID at all…Or if the match is nonspecific and has fallen backall the way to the root (generic) deviceThe PHP API provides a few methods for determining howspecific a match was. Let’s take a peek.That seems overcomplicated.Why can’t I just test for a specificmatch and be done with it?Two reasons: error-checking goodness andthe desktop browser patch.Checking for the lack of a device ID overall feels like goodhousekeeping. We’re being tidy.The desktop browser patch we’re using with WURFLallows us to get basic information about desktop browsersas well as mobile ones.However, all matches for desktop browsers will returnFALSE for isSpecific(), as the data in the patchisn’t considered specific. By checking the fallback andmaking sure it’s not root (generic), we can avoid falselyidentifying desktop browser matches as failures.

device databases and classesyou are here 4 213Update device_classes.php in the adapt_content directory to include a test for generic IDs orlookup failures. Assign the unsupported device class in this case.Q:What is this desktop browser patch of which youspeak?A:The default installation of WURFL comes with a patchthat will identify, broadly, a set of desktop browsers as well asmobile browsers.Q:I don’t understand what parts of WURFL are theAPI parts.A:WURFL itself is just the data. The API is all the codethat interacts with it, organizes it, and so on. There are APIsfor several major programming languages.Q:What does the facebookexternalhit useragent mean, anyway?A:When someone shares a link or whatnot on Facebook,Facebook often goes and fetches some content from thatpage, and/or a representative thumbnail-ish image. This isthe user agent it uses when it does so.Q:Wouldn’t the device class testing code be better asa function/object/whatever?A:It sure would. In real life, for real projects, the codewould likely be more elegant, more organized, and morepowerful. We’re just showing you the basics here.Q:Excuse me, but if I am not mistaken, the$device variable is global. That’s stinky.A:See above.$device_class = NULL;if (device_match(is_wireless_device, ===, false)) {$device_class = desktop;}device_classes.phpHint: Code willgo in this area.

214 Chapter 5content-adapted ribbonNow we’ve battened down the hatches! All done!$device_class = NULL;if (!$device->id ||(!$device->isSpecific() && $device->fallBack === root)) {$device_class = unsupported;}else if (device_match(is_wireless_device, ===, false)) {$device_class = desktop;}device_classes.php Congratulations, you’vemastered wrangling devicecapabilities and classes.It’s a complex concept—and you made it! You even havea content-adapted web page to prove it. Good work!

device databases and classesyou are here 4 215 Device data repositories like WURFL (WirelessUniversal Resource FiLe) allow us to get at very detailedinformation about a whole lot of devices. WURFL data contains over 500 capabilities per device,organized into a couple dozen groups. We can use a device database to identify a value for agiven capability and act upon that value. WURFL’s PHP API is one of several APIs for interactingwith WURFL data. Different APIs handle and representthe data slightly differently. ScientiaMobile was founded in 2011 by some of theoriginal WURFL maintainers. The company providesopen source and commercial licenses for WURFL. Thereare alternatives if WURFL doesn’t work for you. When working on larger projects, it can be helpful togroup relevant capabilities into device classes. Device classes are abstract groupings of devices basedon common capabilities. By slotting a device into a device class, we can takefurther action upon it (e.g., delivering adapted content)without having to track individual capabilities constantly. It’s important to build in default device classes, errorchecking, and generic device handling into any codethat uses a device database for identification. Like nearly everything on the Web, server-side devicedetection is not a 100% bulletproof concept. Server-side detection and content adaptation can bemarried with client-side adaptation—the two are notmutually exclusive. We’ll be looking into this more later.How do I make a choice between server-sidedetection, which can trip up on bad or mysterioususer agents, and Responsive Web Design andfeature detection, which doesn’t have full supportin all mobile browsers?It doesn’t have to be one way orthe other. You don’t have to throwRWD out the window when you useserver-side device detection.Some very handsome things can be accomplishedwith a combination of the two. Each has its prosand cons. Making the two dance in harmony ispart of what we’ll look at in Chapter 9, as we lookto the future.

this is a new chapter 217build a mobile web app using a framework6The Tartanator“We want an app!” Just a year or two ago, that hallmark cry generally meantone thing: native code development and deployment for each platform you wantedto support. But native isn’t the only game in town. These days, web‑based apps formobile browsers have some street cred—especially now that hip cat HTML5 andhis sidekicks, CSS3 and JavaScript, are in the house. Let’s dip our toes into themobile web app world by taking a mobile framework—code tools designed to helpyou get your job done quickly—for a spin!HTML5, CSS3, JavaScript,mobile frameworks…Theysure don’t make tartans likethey used to.

218 Chapter 6decipher buzzwordsJust like the term Web 2.0 afew years ago, HTML5 and appare the buzzword darlings ofmedia and Internet folks alike.The terms mean different things todifferent people—a free-wheelingsemantic party that can be exhilaratingor frustrating.As a web dev, you may already have eagercustomers beating down your doors askingfor HTML5 and web apps specifically.So, what is it that they’re reallyasking for?I’ve heard that you can doall sorts of cool things by usingHTML5 on mobile phones, and I’vegot a great idea for an HTML5mobile web app!

you are here 4 219build a mobile web app using a frameworkAnd sometimes they justmean “anything cool I’veever seen on the Web.”Which is, well,a bit misleading.HTML5 is a specific thing…HTML5 is a specific thing. It’s an in-progress standard, an evolution of the HTMLwe know and love—the language without which there would be no Web. HTML5clarifies and improves upon the two-decade-old markup language, adding,especially, support for web apps without putting much backward compatibilityat risk.HTML5 introduces new semantic elements like <section>, <article>,<nav>, and <header>. It simplifies the syntax for some tags, gives us thepower of media with <audio> and <video> tags, and unleashes interactivitythrough new JavaScript APIs like geolocation and offline storage.…but it has come to represent moreWhen people say HTML5, they often mean the combination of HTML5 itself,super-swanky JavaScript, and CSS3 goodness—in short, the core pieces forbuilding modern, interactive web applications.…and what, exactly, is a web app?What about the web app part of an HTML5 webapp? HTML5 is a confusing enough term, butwith the word app, you’re stumbling into evenmurkier territory, full of dragons and discord.You can usually look at a website in a browserand have an sense of whether what you’relooking at feels applike or not. An emphasis onaccomplishing tasks, a layout that fits on a singlescreen, actions that don’t reload the whole page,interactivity—all have been proposed as criteriafor what is an app versus what is a regular ol’(content-centric) website.In short, no one has ever defined the word appin a way that makes everyone happy.HTML5…app…what do these words even mean?Web apps are hard todefine, but they sharecertain interactivecharacteristics thatare well suited for thestrengths of HTML5and its complementarytechnologies.

220 Chapter 6bloated page loadsI need this web page, please.I need a bit more information.Sure, here you go.Sure, here you go.How “traditional” websites typically behaveIn a traditional website model, a request for an HTML page retrievesall of the components of that page—the HTML itself, JavaScript,CSS, images, etc.Browsers are often good about caching elements, and web serverscan be configured to encourage additional caching. But this modelmeans that each interaction—form submit, link click, whatnot—results in a full-page load.The downside to this—especially when it comes tomobile devices with limited concurrent HTTP requests,bandwidth, and processing power—is that it meansrequesting and downloading assets the browser mayalready have downloaded before, and encumbers thebrowser with re-rendering content and reprocessing codethat might not have changed. It also feels less interactive.Subsequent requestsFull pages are served again asif the browser and server hadnever communicated before.Subsequent requests via form submits,clicked links, etc.Clients cache somethings (but not all).First page requestThese full-page loadsfeel less interactiveand applike.serverserverThe client requests apage from the server.The server returns the pageand all the assets needed toload it correctly.requestrequestwebpagewebpageHTMLCSSimagesJSetc.HTMLCSSimagesJSetc.clientclient

you are here 4 221build a mobile web app using a frameworkI need this web page, please.I need a bit more information.Sure, here you go.Sure, here you go.How applike websites often behaveCertain assets (images, data,JS) can be saved locally forlater or offline use.Often asynchronous requests (AJAX)Response content canbe inserted into anexisting page’s DOM.Subsequent requestsA response can be limited to thespecific content needed, avoidingthe bandwidth and processorcosts of a full-page reload.The first request gets all thevarious components of the page……and often some specialinstructions about whichassets to cache.First page requestIn a more applike model, the client tends to play a bigger role, and fewerassets are bandied around in each request. Reusable markup, code, andassets can be stored locally. Requests for changed content or data can bemade asynchronously using AJAX. These behind-the-scenes asynchronousrequests pull in specific content or assets without causing a full-page reload.Requesting only relevant pieces of content and not reloading the entire pagereduces bandwidth and processing, and improves the sense of interactivity.A lot of this interactivefeeling is accomplished throughasynchronous requests.serverserverThe client requests apage from the server.requestrequestwebpagedataHTMLCSSimagesJSetc.clientclient

222 Chapter 6turn the web tartanTartans Unlimited is an international organization that’s trying tokeep the history and culture surrounding Scottish tartans alive inother parts of the world.I have an idea for a webapp I want to build. It’ll let users findinformation about us, but—this is more fun—find and share and maybe even create theirown tartan patterns.EwanA Tartans Unlimited mobile HTML5 web appWelcome messageTartan eventsTartans!This is the main part of theidea…sounds like an app?Keep this simple…link to About Uspage for more info…I have some ideas here…notsure if they are possible!The Tartanator!Maybe call the wholeapp/site “The Tartanator”?Has a nice ring!New Website! App? - A collection of tartans:popular “traditional” onesas well as new-world anduser‑created tartans. - Make it so users cansee and explore thetartan patterns right ontheir phones. - Wouldn’t it be cool ifusers could create theirown tartans?Can this be done?Lots of imagesof tartans! - It would be nice if the appcould somehow “link into” ourinternational events database. - Could a user’s phone helpfind the nearest events?Events pageEwanA history of Tartans Unlimited.Links to information aboutthe history of tartans.About Us pageThis content isn’tready yet.Bug Patabout this. - Might want to wait untilphase 2 or phase 3 of the sitefor events stuff—complex?

you are here 4 223build a mobile web app using a frameworkJill: Hey guys, I know the requirements are pretty vague. When Italked to Ewan, I got the sense that there are two main things he wantsto accomplish with the site…or app, or whatever. There’s a chunkof content pages: info about the organization and education abouttartans. Then there’s this whole section he’s calling the Tartanator—Joe: The Tartanator? Seriously? Heh.Jill: Yeah. Actually, it seems he wants to call the whole site that, notjust one section. Anyway, it seems like it’s sort of a combination of abrowsable listing of tartan patterns to explore and, he hopes, a way forusers to create their own tartan patterns using a form—Frank: Wow. That sounds simultaneously bizarre and daunting, butpossibly fun as an implementation challenge.Joe: OK, content pages, Tartanator area…what about this note aboutan Events page?Jill: Hold your horses! I’m getting there! We’ve decided to do thisproject in two rough phases. For the first phase, we’ll build basicstructure for the content pages and implement the tartan listing. He’dalso like us to think about how an interface for users to create their owntartans would look, and maybe prototype the frontend of that.Joe: So, like, we’d build the form for creating a tartan, but it doesn’tneed to do anything yet?Jill: Something like that, yes. In phase 2, we’ll make it actually work,and we’ll also come back and work on an Events section.Frank: OK, sounds like we need to go start building a mobile web app.MacAlpine clantartanInnes clantartan Lennox clantartanTartan for thestate of OregonSome of the tartans thatwill be in the Tartanator’startan directory

224 Chapter 6the tartanator project planBuild content pages and site structure.We need to create basic sections and pages and create anoverall structure.Create the tartan listings.For the first phase, we’ll create a listing of existing populartartan patterns. The tartans section should be a browsinginterface that—of course—looks and feels applike andmobile oriented.Build a prototype of the tartan-building form.Ultimately, Ewan would like users to be able to constructtheir own tartans by using an applike mobile interface. Hewants to see what that might look like, so we’ll whip him upa prototype.The master plan for phase 1 of the TartanatorHere’s what weneed to do!Well, you could build an app from scratch…If you’re up to speed with CSS, HTML, and JavaScript,learn how to put them all together to create awesome webapps with Head First HTML5 Programming.So, we’re supposed to build a mobile web app withHTML5 and stuff. I have no idea where to begin.Do I have to build all of this from scratch?OK, enough pluggingnow. - Ed.Buy it, it’s great! The bestHTML5 Programming bookon the market. Seriously, youknow you want to.

you are here 4 225build a mobile web app using a framework …or you could use a mobile web frameworkTo build phase 1 of the Tartanator, we’re going to turbo‑boost our web aptitudeby using a mobile web framework.We’ll still be using our HTML and CSS chops, but a mobile‑oriented userinterface framework can help us get our job done faster.A framework can help us manage cross‑platforminconsistencies.Framework developers keep on top of obnoxious orcurious browser quirks that could really throw a wrench inthings, working around them in the framework’s codebaseso that we don’t have to.3 Choose and use web frameworks with care.Frameworks are powerful mojo, but they also havesome drawbacks. Many are quite hefty, and can bloatyour site’s payload by hundreds of kilobytes. Someemploy a kitchen-sink approach, including tons ofwidgets and cutesy animations that not only are large in byteunits, but can cause serious performance woes on lesser devices.Finally, make sure you evaluate a framework’s device support.Some only support one or a few major, cutting-edge platforms.A framework can help us make a website or applook mobile-friendly.Mobile-oriented frameworks generally help alter andstyle HTML elements to look and feel more mobile, oftensaving us quite a lot of time.1A framework can help us make a website or appfeel mobile.Frameworks can take the drudgery out of transitions andeffects that make a website or app feel more native, or, atleast, consistent.2Depending onthe project, youmight not want toreinvent at leastsome of the wheelsrequired for aninteractive webapp. That’s wheremobile developmentframeworks comein handy.Why use mobile web app frameworks?Let’s face it. Building complex, interactive web apps from scratch—especiallymobile web apps—can be a daunting proposition. A web developmentframework—that is, a packaged collection of interactive elements and codetools—can help give us a leg up.

226 Chapter 6jQuery MobileOur choice for the Tartanator: jQuery MobileTo build the Tartanator, we’re going to use the jQuery Mobile framework.jQuery Mobile is a user interface framework optimized for mobile devices.It’s built atop the immensely popular jQuery JavaScript library.The reason we chose jQuery Mobile for this project is that it is pretty easy touse and has an architecture that maps well to our HTML5 focus—jQueryMobile is designed in a way that hooks in easily (sometimes invisibly!) towell‑formed HTML5 markup.Also, if you’ve ever used jQuery before, you probably know how intuitive andstraightforward it feels.You’re right. It’s acomplicated landscape.Here’s where we trot out our tiredWild West metaphor about the mobileweb. But it’s true. There are no simpleanswers, and pulling off complexfeats on the mobile web often involvesthe cobbling together of severalimplementation approaches.So, no, don’t throw out everything we’vealready learned. None of the techniqueswe’ve covered so far is mutuallyexclusive, and each makes more (or less!)sense in different circumstances.Life is complex. So isthe mobile web!jQuery Mobile, like all ofthe jQuery projects, isopen source.Seems like we already have a hundred differentways to build stuff for the mobile web. ResponsiveWeb Design. Separate sites. Using device detection orfeature detection. Do I just forget about all of thatstuff and start over with mobile web frameworks?

you are here 4 227build a mobile web app using a frameworkQ:Are there other mobile frameworks out there?A:And how! There are more every day. Some other mobile webframeworks include Sencha Touch, Wink, iUI, DHTMLX Touch, andJQTouch.Q:What exactly makes up a mobile web framework?A:It depends on the framework, but most involve a combination ofJavaScript, CSS, and image (or other) assets to aid in the styling ofthe mobile experience. Some frameworks also include a server-sidecomponent to help generate (as opposed to adapt) content.Q:Wait. What about zepto.js or XUI?A:Zepto.js (very lightweight JavaScript, with jQuery syntax) andXUI (also very compact JS) both fall more on the library side of theline (versus framework). Frameworks tend to have UI components,while libraries tend to be code—in this case, JavaScript—only. Thisis a grey area; the division between library and framework isn’t easyto define.Q:So, jQuery Mobile is a mobile version of the originaljQuery library?A:Not so fast, hotshot! jQuery Mobile builds on top of jQuery. Itdoes not replace it. You’ll notice that when we start building stuff withjQuery Mobile, the first JavaScript file we include is the core jQuerylibrary.Q:So, jQuery Mobile is a JavaScript development frameworkthat extends jQuery.A:Bear with us. Yes, there is JavaScript in the jQuery Mobileframework. But jQuery Mobile is not a JavaScript framework. It’sbigger than that. It’s a user interface framework. That means it alsoincludes stylesheets, icons, and other pieces of the puzzle.Q:Do we really need to use a framework?A:Do we need to? Technically? No, not at all! In fact, weencourage you to build applike mobile websites from scratch, if that’syour bag.However, the nice thing about frameworks, and jQuery Mobilein particular, is that they take care of a lot of obnoxious,platform‑specific quirks and bugs for us. Their team of devs haslaserlike focus on the foibles of different mobile browsers.We have limited time and space here, folks. Trying to pull off whatwe need to do for the Tartanator without a framework of any sortwould be pretty hairy, not to mention the chaos of extra testing thatwould be required (as we wouldn’t have that underpinning of testedcross‑platform support).Q:I still don’t get it. How is the Tartanator an app instead ofa website?A:Because Ewan says so. No, really. The subtleties ofdifferentiation between app and site are so vague that the answersometimes seems almost arbitrary.Ewan has a vision of the Tartanator as a functional, web-basedthing. His focus is on the ability to find and create tartans, and, also,ultimately, to search for relevant events. In his mind, that makes thisan app.Q:But what if it were a site? I couldn’t use jQuery Mobilethen, right?A:jQuery Mobile is a user interface framework. It doesn’t carewhether you call what you’re making with it an app or a site. Its jobis to make things feel usable and not break across various mobileplatforms, using a combination of CSS, JavaScript, and HTML5.Q:But which mobile browsers support HTML5?A:No browser supports (all of) HTML5. Don’t panic! HTML5 ismodular, and mobile browsers are increasingly supporting more andmore pieces. Just as no modern desktop browser fully supports everysingle piece of CSS2.1, it may well be that HTML5 is never fullysupported, exactly as it is in the spec, by every browser. Oh, and thespec is still evolving. The website http://www.caniuse.com is a goodreference if you’re looking for info about specific feature support inHTML5 and the other major web technologies.

228 Chapter 6mobile-friendly markupYou can ignorethis folder fornow. We’ll showyou what’s in itin a little bit.Build a basic page with jQuery Mobile<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>The Tartanator</title></head><body><h1>The Tartanator</h1><p>The Tartanator is a community-builtassociation of groups, businesses, andindividuals bent on keeping the Scottishheritage alive overseas by promotingthe understanding and enjoyment of<strong>tartans</strong></p>.</body></html>chapter6aboutus.htmlfindevent.htmlindex.htmlextrasThe first stop on the Tartanator adventure is to learn how to build asimple page with jQuery Mobile so that we can start constructing thepages in the project. You’ll be surprised by just how easy this is.Start basicBy starting with a super-simple HTML page, you can see the basicsof jQuery Mobile at work more clearly.We’ll be meetingthese pages in afew, err, pages.chapter6 directory structure:your starting pointThe entire contents of index.html—seriously, it’s this basic!index.htmltartans This foldercomes a bitlater, too.We’re using the HTML5<DOCTYPE> tag.Include jQuery mobile code componentsOpen index.html in your text editor and get ready to plop in some jQuery Mobile. Firstthings first: include the JavaScript and CSS that will make things go.<title>The Tartanator</title><meta name="viewport" content="width=device-width, initial‑scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script></head>Include jQueryMobile’s CSS:this will styleour markup inmobile‑friendlyways.Remember thatjQuery Mobile isnothing withoutjQuery (core).The inclusion of jQuery andjQuery Mobile JavaScriptwill give our web app itsmobile‑friendly interactions.index.html

you are here 4 229build a mobile web app using a frameworkMark up the rest of the pageIt really is that easy to make a simple jQuery Mobile page.Add the items to the head and body of the index.html file and save it. View it in abrowser (you can view it in a mobile browser if you like!).We’ve included the three main jQuery Mobile components from jQuery’s CDN(content delivery network—that is, the code as hosted on code.jquery.com). That’s areliable and fast place to link to the code.Now that we’ve included the three core files—theme CSS, jQuery Core, andjQuery Mobile itself—we need to make a few adjustments to the HTML markupwithin the <body>.By wrapping parts of our content in <div> tags with descriptive data-*attributes, we tell jQuery Mobile how we want them treated:<body><div data-role="page"><div data-role="header"><h1>The Tartanator</h1></div><div data-role="content"> <p>The Tartanator is a community-builtassociation of groups, businesses and individualsbent on keeping the Scottish heritage aliveoverseas by promoting the understanding andenjoyment of <strong>tartans</strong>.</p></div><div data-role="footer"><h4>Bring forrit the tartan!</h4></div></div></body>A data-role of“page” tells jQueryMobile to treatthe contents as afull page.The data-role of“header” tells jQueryMobile to style thisas a header-likeelement.A data-role of“content”means—youguessed it—this isthe main contentof the page.index.htmlLet’s slap a footer onthis bad boy to seewhat jQuery Mobiledoes with that.We’ll explain data-* attributesmore in just a moment.“Bring forrit the tartan!” is a rousingbattle cry attributed to Sir Colin Campbellduring the siege of Lucknow in the 1850s.Test Drive

230 Chapter 6iOS or not?What does it evenmean to “look mobile”? Doesn’tthat page mostly look like anative iOS app?And we’re off!Hmmm…the footertext doesn’t quite fit…but let’s worry aboutthat a bit later.We don’t have anything too fancy yet (OK, it’sactually pretty dull), but the landing page doeslook somewhat “mobile.”Note how jQuery Mobile adds gradients, sizes,and font treatments, and turns our elementsinto header- and footer-like chunks.Our first jQueryMobile page, asrendered on an iPhoneThe default jQuery Mobile lookdefinitely smacks of iOS.For better or worse, the rounded-button,gradient‑laden-headers look of the native iOSplatform have become a common visual metaphorfor web-based mobile apps. And many people nowassociate that appearance with “looking mobile.”But beyond Apple-esque polish, there are some usefulthings going on here. Whitespace is increased andfont size optimized for small-screen reading. Soon,we’ll build forms and be able to see that jQM givesus larger input areas and chunky buttons—big touchtargets for our fat fingers.These are just acouple of examples!

you are here 4 231build a mobile web app using a frameworkThe HTML5 data-* attributejQuery Mobile makes heavy use of the data-*attribute introduced with HTML5. In our simplepage, we used the data-role attribute to informjQuery Mobile of, well, what role the given elementhas in our page structure. Right now things are prettysimple: we have a header, some content, and a footer.Build more of the TartanatorNow that we have a solid foundation, let’s startbuilding more of the Tartanator. Right now we haveour landing page, but we need to link it to some otherbasic pages to move forward with the project.HTML5 data-* Up Closeindex.htmlaboutus.html findevent.html tartans.htmltartansA simpleinformation page This will be a pageto find events, butright now it’s just aplaceholder page.This is the funpart: lots ofexamples oftartans. We’ll getto this pretty soon.Time to add a navigation-like list of links to the three subpages. Edit index.html and add avery simple <ul> after the introductory paragraph inside of the main content <div>. Thetext of the list elements should be the names of the subpages: About Us, Find an Event,and Popular Tartans.We’ll add the actual links in justa bit; for now, just text, OK?The data-* attribute was introduced with HTML5as a way to let developers associate lightweight butmeaningful data with HTML elements.In the past, we developers found some ways to dothings like this by kind of hijacking other elementattributes like class or title.But now there is a real, sanctioned way to do this,and jQuery Mobile takes advantage of it.As we move along, we’ll continue to encounterplaces where jQuery Mobile uses different data-*attributes to get its job done.

232 Chapter 6data-roles a go-goBasic HTML FTW!<p>The Tartanator is a community-built associationof groups, businesses, and individuals bent on keepingthe Scottish heritage alive overseas by promoting theunderstanding and enjoyment of <strong>tartans</strong>.</p><ul><li>About Us</li><li>Find an Event</li><li>Popular Tartans</li></ul></div>index.htmlMake it a jQuery Mobile listIf you save your changes and view index.html in abrowser, you’ll likely notice that our little list doesn’tlook very exciting (or mobile-ish). That’s becausewe haven’t informed jQuery Mobile that we want itto take note of its existence. We need to use thedata-role attribute again!<ul data-role="listview">We use the data-role attributeto tell jQuery Mobile to treatthis as a list view.That way, jQuery Mobilewill style the list nicely andrecognize its existence.Add the data-role attribute to the <ul> in index.html and view the page in a browser.What do you think of the way jQuery Mobile styles the list?Hmmm, that’s apretty humdrum list.jQuery Mobile alters contentwith the listview data-roleto make it look and feellike a more mobile-friendly,interactive list.Test Drive

you are here 4 233build a mobile web app using a frameworkOur list: Better, but not quite thereBy default, jQuery Mobile will treat listviews like pagecontent, filling the full width of the screen with the <li>elements. On our landing page, this looks a bit awkwardand cramped.For our purposes, the navigation list is part of the content,not the entirety of it. jQuery Mobile’s list options includeinset lists—lists that are contained within a page that hasother stuff on it. Let’s use that.<ul data-role="listview" data-inset="true">Do this!Add the data-insetattribute to the list in index.htmland try viewing the page again.The list looks great and all, butnone of its elements are clickable.But, uh, don’t we need to make themactually link to something?You’re right. Let’s link upthe pages!Time to make the Tartanatormore than a one-page show.The list looks a bitscrunched and odd.First trySecond tryThe inset listlooks much better.

234 Chapter 6jQM linksLink to multiple pages with jQuery MobileLinking to other pages in jQuery Mobile is quite straightforward.All we have to do is add basic HTML links:<ul data-role="listview" data-inset="true"><li><a href="aboutus.html">About Us</a></li><li><a href="findevent.html">Find an Event</a></li><li><a href="tartans.html">Learn about Tartans</a></li></ul>Do this! Add the links to the list inindex.html and test themout. What happens?There is no tartan.htmlfile in our main directoryyet. This is how jQueryMobile reacts when itencounters a broken link.By adding the links,we automatically getthe arrow icons thatshow users these areclickable links.index.html

you are here 4 235build a mobile web app using a frameworkHead First: I hear you have something to tell usabout what a “page” really is, to you.jQuery Mobile: I do! It’s one of my favorite thingsabout myself, so I wanted to explain.Remember how the structure of one of my pagesuses a <div> with a data-role value of page?Head First: Sure.jQuery Mobile: The markup contained within that<div>—often a header, content area, and footer—iswhat I consider a page.Head First: Then what is the point of the rest ofthe HTML markup? Is it chopped liver?jQuery Mobile: Definitely not! In a web appdesigned along my principles, each HTML file is astandalone, autonomous thing that you can visit inyour browser.Head First: I’m lost. If each HTML file isindependent, why bother with the <div> with thedata-role of page?jQuery Mobile: Let me back up. When you firstnavigate to a page in one of my sites or applications,that page is loaded just like any old HTML page onthe Web.But once that first page is loaded, I do somethingdifferent. When you click on links, I find the pagecontent from the requested HTML document—thatis, the stuff in the <div> with the data-role ofpage—with AJAX and inject it into the currentpage’s DOM—Head First: But what is the point of that?jQuery Mobile: There are several points, if you’dlet me finish!Instead of requesting and downloading the wholerequested page—scripts, images, styles—andreinitializing and rebuilding the DOM from scratch,I only snag the pieces that matter. That saves onHTTP requests, bandwidth, and processing timeand makes the experience feel a bit more naturaland native.Head First: If content pieces are loadeddynamically, how come I see the URL of the link Iclicked on in the address bar of my desktop browser?jQuery Mobile: My modest exterior belies the deepsophistication of my navigation model. I always aimto have real URLs for the pages in my apps, even ifthe pages are really generated dynamically or thereare multiple <div> tags with a data-role ofpage in a single HTML document.By having a unique and reusable URL for AJAX-loaded content chunks, I can make them look andact like full-blown web pages. When the browserallows me to (not all browsers do), I even update thedisplayed URL in the browser’s address bar as I loadin new content asynchronously.Head First: If I understand correctly, then, I canaccess each HTML file in my app or site directly,but the content of those documents can be retrievedindependently and dynamically, when linked to, toimprove performance and responsiveness?jQuery Mobile: Exactly!Head First: Thanks, jQuery Mobile, for a reallydynamic chat.jQuery Mobile ExposedThis week’s interview:How does jQuery Mobile handleloading pages?

236 Chapter 6degrade gracefully without JavaScriptIf page content is loadeddynamically with AJAX, what happens toolder browsers with limited JavaScript supportor browsers with no JavaScript support at all?Do they break?jQuery Mobile can work even if there is noJavaScript support at all.Recall that the links in the markup start out as just that:basic HTML links. It’s jQuery Mobile’s JavaScript thatdoes the magic of converting the links into dynamicAJAX-y goodness for browsers that support it.For browsers that don’t support this, navigation betweenpages works just like the old-fashioned Web always has.Q:If pages are loaded with AJAX, whydo I need to create separate pages at all?Can’t I just put all of my app’s contentinto one page and use jQuery Mobile toshow and hide it?A:You could, but you’d be missing out onjQuery Mobile’s nice notion of progressiveenhancement. You’d be leaving lessermobile browsers (those that can’t do thesnazzy JavaScript) out in the cold.You’d also have a large, complex file that isdifficult to maintain and has a heavy DOMthat is tough for lesser phones to handle.jQuery Mobile encourages you to authorwebsites and apps like you’re used to: withseparate HTML files that can stand alone orbe sucked in with AJAX.Q:How did jQuery Mobile know whichdata-* attributes to use? Where can Ifind information about all of the availabledata-* attributes?A:Developers can cook up any name they’dlike for data-* attributes (well, they haveto start with a letter). There is no prescribed set.The idea is that data-* attributes pertainto the functioning of the website that theyappear in—that is, they’re not intended forcommunicating data to external applications.Because of that, web developers haverelative freedom to generate their owndata-* naming conventions.Q:What version of jQuery Mobile arewe using?A:The jQuery Mobile dev team is on a tear!During the time we spent writing this chapter,both 1.0 beta 3 and 1.0 Release Candidate 1were released, requiring some scrambling onour part.Oh, wait, we just checked. 1.0RC2 is outnow, too! Oh! There’s RC3! Oh, no, it’s fasterthan a speeding bullet! jQuery Mobile 1.0 isnow released and official!For the Tartanator, we’re using 1.0RC1.Crazy, huh?

you are here 4 237build a mobile web app using a frameworkFooter (RE-)ConstructionAs we saw on page 230, the text in the page footer is getting truncated on narrow screens.That’s because jQuery Mobile leaves room for button placement around header elementsin headers and footers—but we don’t have any buttons in our footer. Let’s fix it!Remove the <h4> element surrounding the footer text.Right now, the footer text is wrapped in an <h4> element. Byremoving this header element, we’ll keep jQuery Mobile fromleaving room for buttons and, as a side effect, truncating the text.1Add a CSS rule to center the footer text and give it abit of padding.Unfortunately, removing the <h4> will also remove the centering andthe padding. We need to account for this in our own CSS.Open tartans/tartans.css in your text editor and add this rule at the topof the file (there is already a bunch of CSS in this file).2<div data-role="footer"><h4>Bring forrit the tartan!</h4></div>index.html[data-role="footer"] { text-align: center; padding: 5px 0;}#abercrombie { background-image:url(icons/abercrombie.png); }tartans.cssOur header, beforereconstruction. It’s truncated.Also, it has a bit morevisual weight than it needsto. It feels really darkThis CSS selector applies to elements with adata-role attribute that has the value “footer.”By default, jQuery Mobile’sstyling leaves room forbuttons around headerelements (<h1>, etc.) inheaders and footers.Continues,flipthepage.

238 Chapter 6footer (re-)construction exerciseFooter (RE-)ConstructionLink in the stylesheet.Edit index.html again and add a link to the stylesheet.3<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /><link rel="stylesheet" href="tartans/tartans.css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>index.htmlCheck our progress.Save the file and view index.html in a smartphone browser orsimulator.4It’s not cut off anymore. But it stillfeels dark. Also, look, it doesn’t always end upat the very bottom of the screen. There’s agap. That makes it feel kind of weird. Theremust be a way to fix that…The fix to both of theseitems involves a coupleof small changes to thefooter <div>.We want to tell jQuery Mobileto use fixed positioning to makethe footer stick to the bottomof the page, and we need tochange the theming swatch tomake the footer appear lessdominant visually.The footer isn’t always at thebottom of all of the pages;sometimes there is a gap.

you are here 4 239build a mobile web app using a framework<div data-role="footer" data-position="fixed" data-theme="c">Bring forrit the tartan!</div>index.htmlUse fixed positioning on the footer so that it always showsup in the same place.By using the data-position attribute and setting its value to fixed,we tell jQuery Mobile to use fixed positioning on the footer element.That way it will always stick to the bottom of the page.5Use a different theme swatch to make the footer appearless dominant.jQuery Mobile’s initial stylesheet has five default color groups, calledswatches. These five swatches are referenced by the letters a through e.By default, header and footer elements receive swatch a, which has themost dominant contrast.Our footer isn’t a particularly important page element, and right nowhas too much visual weight. By explictly assigning swatch c, we canmake the appearance of the footer much less in-your-face.You can use the data-theme attribute on any element to overridejQuery’s default swatch for that element.6The default color schemefor swatches a throughe is defined in jQueryMobile’s CSS.That’s it! The footer shouldlook a lot better now. Trysaving your changes andreviewing our improvedfooter in a mobile browseror simulator.The release of jQuery Mobile 1.0includes a new Theme Roller tool thatmakes theming jQM easier. See more athttp://jquerymobile.com/themeroller/.

240 Chapter 6bring on the tartansBuild content pages and site structure.We need to create basic sections and pages and create anoverall structure.Create the tartan listings.For the first phase, we’ll create a list of existing populartartan patterns. The tartans section should be a browsinginterface that—of course—looks and feels applike andmobile oriented.Build a prototype of the tartan-building form.The footer is now positionedcorrectly and is much lessimposing visually. Success!The meat of the Tartanator: The tartans themselvesWe’ve got our core content pages—at least the skeletons ofthem—in place. Now let’s turn our attention to matters that aremore interesting: the tartans themselves.For phase 1, the Tartanator will allow users to browse acollection of popular and unusual tartans. Think of itkind of like a quick tartan reference.Do this! Copy tartans.html from the extrasfolder to the chapter6 folder (thatis, move it up one level).The tartans directory, whichcontains the individual tartanHTML pages, should alreadybe in your chapter6 directory.Let’s check in with our status on phase 1 of theTartanator project:We’ve got our basic layoutsquared away and created thebasics of the main pages.Next on our list!We’ll get to thisin just a bit.Get to work on tartans.htmlThe tartans.html file has the beginnings of a list (<ul>) for thepopular tartans. To get you going, the list contains tartans startingwith A and B. Once you’ve moved the tartans.html file into place,load up the Tartanator on a browser (mobile or otherwise) andtake a peek. You can click on the tartan names to visit the tartanpage for that tartan.

you are here 4 241build a mobile web app using a frameworkWe’ve given you a head start on the listTake the list from blah to betterThe list of tartans is looking a bit lifeless compared to the tartaninformation pages themselves. Good news! jQuery Mobile makes iteasy to drop thumbnails into lists so we can have small icons on the listitself (much snazzier). Here’s an example:<li><a href="tartans/abercrombie.html"><img src="tartans/icons/abercrombie.png" alt="Abercrombie" /><h3>Abercrombie</h3></a></li>Add thumbnails to the list items in tartans.html. The icons are in the tartans/icons directory andhave the same name as their HTML counterparts (but with a .png extension).The first swag at thelist of tartans—we didthis for you already.tartans.htmltartans/baird.htmlEach tartan patternhas its own HTML page.The tartan is a CSSbackground image.Yep. All you need todo is add an image.jQuery Mobile takescare of the rest.The tartan listing section is acombination of a single HTMLpage with a list of tartans……and an individual HTMLpage for each tartan.

242 Chapter 6exercise solution<ul data-role="listview"><li><a href="tartans/abercrombie.html"><img src="tartans/icons/abercrombie.png" alt="Abercrombie" /><h3>Abercrombie</h3></a></li><li><a href="tartans/arbuthnot.html"><img src="tartans/icons/arbuthnot.png" alt="Arbuthnot" /><h3>Arbuthnot</h3></a></li><li><a href="tartans/baird.html"><img src="tartans/icons/baird.png" alt="Baird" /><h3>Baird</h3></a></li><li><a href="tartans/barclay-dress.html"><img src="tartans/icons/barclay-dress.png" alt="Barclay Dress" /><h3>Barclay Dress</h3></a></li><li><a href="tartans/barclay.html"><img src="tartans/icons/barclay.png" alt="Barclay" /><h3>Barclay</h3></a></li><li><a href="tartans/birrell.html"><img src="tartans/icons/birrell.png" alt="Birrell" /><h3>Birrell</h3></a></li><li><a href="tartans/blair.html"><img src="tartans/icons/blair.png" alt="Blair" /><h3>Blair</h3></a></li><li><a href="tartans/borthwick-dress.html"><img src="tartans/icons/borthwick-dress.png" alt="Borthwick Dress" /><h3>Borthwick Dress</h3></a></li><li><a href="tartans/borthwick.html"><img src="tartans/icons/borthwick.png" alt="Borthwick" /><h3>Borthwick</h3></a></li><li><a href="tartans/bruce.html"><img src="tartans/icons/bruce.png" alt="Bruce" /><h3>Bruce</h3></a></li><li><a href="tartans/buchanan.html"><img src="tartans/icons/buchanan.png" alt="Buchanan" /><h3>Buchanan</h3></a></li></ul>

you are here 4 243build a mobile web app using a frameworkDrop in the rest of the tartansThere are a whole bunch more tartans that needto be added to the list (with their nice icons). Don’tworry, we won’t make you do that much typing. Gofind tartan-list.txt in the extras folder. In the file, you’llfind a snippet of HTML that is the full <ul> for all ofthe tartans. Copy and paste the <ul> into tartans.html,replacing the current HTML list.Hey, the list’s looking pretty nice,but it seems kind of long. It’s hard tofind a specific tartan name without awhole lot of scrolling.True. It’s a bit unwieldy.Turns out, jQuery Mobile has more upits sleeve for us. More easy-to-implement,good bang‑for-the-buck improvements toour tartan list coming up!Now we’ve got an enhancedlist—hey, nice icons!—and haveincluded all of the tartans inthe current collection.

244 Chapter 6filtered, organized lists in a snapWe can add list dividers.We can break up the list into sections by using listdividers. This will help organize the list by groupingtartans by their first letter.1We can add a list filter.With jQuery Mobile, it’s eerily easy to drop ina filter for a list. A filter looks like a search field(with a little magnifying glass and everything!)and filters the list as the user types in it.No JavaScript coding required!2Filter and organize a list<ul data-role="listview" data-filter="true"><ul data-role="listview" data-filter="true"><li data-role="list-divider">A</li><li><a href="tartans/abercrombie.html"><img src="tartans/icons/abercrombie.png" alt="Abercrombie" /><h3>Abercrombie</h3></a></li>12To add a filter for the list,add a data-filter attribute tothe <ul> with a value of “true.”Yep, that’s allthere is to it!You can visually separate thelist by adding <li>s with adata-role of “list-divider.”tartans.htmlGive the <ul> in tartans.html a filter field and list dividers.Add list dividers for each letter (except those that don’thave any tartans, like Q and X).Save your work and view the results in a browser. Pretty cool, eh?Test Drive

you are here 4 245build a mobile web app using a frameworkQ:I notice that when you changepages in a jQuery Mobile web app, thereis an animation effect. What is that?A:To make web apps feel moreconsistent with mobile user interfacepatterns, jQuery Mobile applies a transitionto page changes.By default, the slide transition will beused, which makes it appear that the newpage is sliding in from the right. To changethe transition that is used, you can adda data-transition attribute tothe link in question. Half a dozen or sotransitions are supported. See jQuery Mobiledocumentation (on its website) for details.Q:Will this stuff work on everyphone?A:No mobile framework can claim thatdistinction. But jQuery Mobile strives to haveas much cross-platform support as possible.You can see a list of the supported devicesand browsers and how well they are presentlysupported at http://jquerymobile.com/gbs.Q:What happens if a device orbrowser isn’t supported? Or if JavaScriptis turned off?A:jQuery Mobile’s philosophy is heavilybiased toward progressive enhancement.And so is our underlying markup!Why don’t you try it out yourself? Loadup the Tartanator in a web browser withdisabled JavaScript. Sure, it isn’t exactlypretty, but it works.Our tartan list is nicer nowList dividers helpbreak up the longpage of tartans.Typing in this fieldwill (instantly) filtertartans by name.Quick, mobile-ready widgetslike these are one of thehallmarks of mobile UIframeworks like jQuery Mobile.

246 Chapter 6client feedbackIt’s time to show the early Tartanatorwork to EwanHmmm…it’s…nice,but can you makeit feel more…like anative app?Build content pages and site structure.Create the tartan listings.Build a prototype of the tartan-building form.How are we doing on the project steps?Before we start into the form, let’s check with the client tomake sure our overall approach so far is OK.

you are here 4 247build a mobile web app using a frameworkJim: What does “make it look like a native app” even mean?Frank: It seems like that’s a very subjective thing, doesn’t it? Ithink what Ewan is looking for is something that feels a bit more“app”-y.Jim: Which means…?Frank: I guess like tab bars, navigation elements, button-y andicon-y bits. Ewan seemed happy with the transitions, for example.Those, to him, feel native.Jim: But don’t we run the risk of emulating one platform toomuch at the expense of others?Frank: Heh, yes. When people say “native,” sometimes theyare dangerously close to meaning “make it look like iOS, please.”Each platform has its own UI metaphors.Jim: This sounds like a catch-22. To make our customer happy,we need to look native, which might well mean alienating, say, ourAndroid and BlackBerry users.Frank: I think we need to pick and choose some things we couldenhance to make the Tartanator feel more like an app withoutmaking it look like an iPhone app. To be fair, jQuery Mobileelements in their default skins look kind of iOS style. So we’realready partway down this path.Jim: So the aim is to make the Tartanator feel more like an appwithout necessarily feeling platform-specific native?Frank: Exactly. I’ll sketch down a few thoughts on some changeswe can make to shoot for that goal.The new goal: make theTartanator look more applikewithout necessarily lookingplatform-specific.

248 Chapter 6make like an appTricks to make it feel more like an appHere are some quick things I thinkwe could do to make the Tartanatorfeel more like an app.Tabs/buttons instead of linksA header that sticks around- Replace current <ul> of links with apersistent toolbar/navbar/whateverat the bottom of the screen.More like an app!- Buttons with icons for thetoolbar will feel more like an app.- Make the header stickaround, too.- Recent email from Ewan:content isn’t panning outas well as he’d hoped.What about the About Us page?- Maybe conflate the landingpage and the About Us pageinto one? Use the landing pageas the info page? Convert links on landing page into persistenttoolbar with icons.Do away with the separate About Us page, ascontent is not forthcoming. Consider the currentlanding page the de facto About page for now.Make the header bar persistent, too.Make Tartanator feel more applike: to-dos

you are here 4 249build a mobile web app using a frameworkAdd a footer toolbar<div data-role="footer" data-position="fixed"><div data-role="navbar"></div></div>In jQuery Mobile, it’s easy to add a fixed-position toolbar to eitherthe header or the footer. To create a more applike feel, let’s put atoolbar in the footer instead of having the links to the Tartanator’ssections inside a <ul> on the landing page.Construct a navbarInside of a header or footer container—so designated by thedata‑role attribute—we can put another <div> with adata‑role of navbar. This tells jQuery Mobile to treat thecontents as buttons in a toolbar. The basic construction lookslike this:Put buttons in the navbarInstead of links in a vertically organized list, we’re going to maketoolbar buttons to access the main sections of the Tartanator.This is a more applike metaphor.jQuery Mobile will automatically convert linked list elementswithin a navbar into buttons.<div data-role="footer" data-position="fixed"><div data-role="navbar"><ul><li><a href="index.html">About</a></li><li><a href="findevent.html">Events</a></li><li><a href="tartans.html">Tartans</a></li></ul></div></div>Navbar buttons (i.e.,links) will go in here.A data-role of navbartriggers jQuery Mobileto make this look like,well, a navbar.Remember, we’rejettisoning theaboutus.html pagein favor of usingthe index.htmlpage as an Aboutpage.jQuery Mobile willautomatically makethese links looklike buttons.index.htmlindex.htmlNotice that we’veremoved thedata‑theme attribute.

250 Chapter 6iconic toolbar buttonsMake the toolbar snazzy<div data-role="footer" data-position="fixed"><div data-role="navbar"><ul><li><a href="index.html" data-icon="info">About</a></li><li><a href="findevent.html" data-icon="star">Events</a></li><li><a href="tartans.html" data-icon="grid">Tartans</a></li></ul></div></div>So far, so good, but our toolbar buttons are a bit drab.jQuery Mobile comes with a set of 18 or so default iconsthat we can use, easily. Let’s drop some icons in by usingthe data-icon attribute.Also, let’s denote which section the user is currently viewing bysetting a class of ui-btn-active on the appropriate link.This will show up with theming that makes it highlighted, thusappearing active.<ul><li><a href="index.html" data-icon="info" class="ui-btn-active">About</a></li><li><a href="findevent.html" data-icon="star">Events</a></li><li><a href="tartans.html" data-icon="grid">Tartans</a></li></ul>They look like buttons, allright, but they could be abit more fancy.The data-icon attributeindicates which icon to usein this button.A list of available defaulticons can be found in thejQuery Mobile documentation.This code goes in index.html.For the other pages, you’dwant to assign this class to theappropriate anchor tag.index.htmlTake 1: Detail ofbutton renderingindex.html

you are here 4 251build a mobile web app using a frameworkFinalize the structureWhat about that footerslogan we spent so muchtime adjusting?Ah, yes. Life on the Web! Requirementsare always changing.We’ve replaced the footer with a navbar, but we don’thave to discard the tagline entirely. Let’s make it akind of subheader on the landing page (only).<div data-role="header" data-position="fixed"><h1>The Tartanator</h1></div><div data-role="header" data-theme="b" class="forrit">Bring forritthe tartan!</div>Make the header sticky, tooWhile we’re in there, let’s make the position on theheader fixed, too. That will make the header behavein the same way as the footer: always present at thetop of the screen, even if the user scrolls.index.htmlLet’s check in on our to-dos:We just need to tweakthe header a bit now…Detail of navbar as theupdated code renders it.Convert links on landing page into persistenttoolbar with icons.Do away with the separate About Us page, ascontent is not forthcoming. Consider the currentlanding page the de facto About page for now.Make the header bar persistent, too.

252 Chapter 6test it and get feedbackBoth the header and footer are now fixed.They will always show up at the top and thebottom of the page (respectively), even ifthe user scrolls.Ah, iterative design. The way of the Web. Let’s update the Tartanator.Implement the new footer navbars.Edit index.html, findevent.html, and tartans.html. Replace the footer with theversion we cooked up on page 250.Make sure to assign the ui-btn-active class to the correct anchortag, depending on the page.1Give the header a fixed position.Add a data-position attribute to the header on each page.2Add the tag line to the landing page (index.html).For index.html (only), add the tagline as a subhead.3That’s lookingmore like an app!Test Drive

you are here 4 253build a mobile web app using a frameworkTime to make that tartan-building formBuild a prototype of the tartan-building form.Ewan would like users to be able to construct theirown tartans by using an applike mobile interface.The next step in the project is to create a prototype of a form that will letusers design their own tartans, right from their mobile browsers.A tartan design is like a recipe.But instead of a list of food ingredientsand their measurements—ounces, grams,teaspoons, whatever—it’s a list of colorsand their relative sizes in the pattern.When a tartan is woven, this pattern isrepeated both horizontally and vertically.We need to have a rough idea of howtartans are put together so that wecan build a form to gather the rightkinds of info.Create a tartan design?What does that even mean?Build content pages and site structure.Create the tartan listings.

254 Chapter 6a very tartan recipeColorSize(Stitches)Black 6Green 72Blue 56Red 4Blue 4Yellow 66 black72 green 56 blue 4 red4 blue6 yellowTartans: patterns like recipesFollow the tartan recipeTo weave the tartan, the pattern is followed in order (in our case,we’ll be “weaving” with pixels instead of wool).For Carmichael, 6 stitches of black are followed by 72 stitches ofgreen, followed by 56 blue, and so on.When the last color in the pattern is reached (six stitches of yellow,in our example), the pattern is followed in reverse (blue, red, blue,green). When the first color (black) is reached again, the cycle repeats.The pattern is woven both horizontally and vertically (warp and weft)to create the overall tartan pattern.Let’s look at an example. To create the Carmichael clan tartan,the pattern looks something like:Back and forth andback and forth andback and…Pssst…this is thesame pattern asabove, just shownhorizontally insteadof vertically.Each ingredient in thepattern is a pairing of acolor and a size.As the different colorsoverlap horizontally andvertically, they createthe distinctive pattern.The Carmichaelclan tartan.We need to createform fields that willcollect the color andsize value for eachingredient in a user’startan design.The first and last colors (blackand yellow) don’t repeat. Intartan‑ese, these are called“pivots” in the pattern.

you are here 4 255build a mobile web app using a frameworkCreate an empty jQuery mobile page to hold thetartan-building form. Using tartans.html as a guide,create a blank page. Use the same header and footer,but change the title and header of the page to “TartanBuilder.” Name this file build.php.Basic info about the tartanbeing created: its name andan optional description.Color-size field pairslet users build theingredient list fortheir tartan recipes……and so on with thecolor-size combo fields.Translate tartan patterns to a formLet’s take a look at the form prototype wewant to build. We need fields that allowusers to enter in those color-size pairsthat build a tartan recipe.(There are more.)OK, we have a generalidea of the form wewant to build. Let’s gobuild it!

256 Chapter 6HTML5 form structureBuild an HTML5 form<div data-role="content"><form id="tartanator_form"><ul data-role="listview" id="tartanator_form_list"><li data-role="list-divider">Tell us about your tartan</li><li data-role="list-divider">Build your colors</li></ul></form></div>Ready BakeForm structureThe form itself will be a standard HTML5 form: jQueryMobile will adapt it to make it look and feel moremobile‑friendly. In Chapter 7, we’ll make the form actuallydo something, including enhancing its interactivity withJavaScript and spitting out actual tartan images.For now, we’ll lay the groundwork and create a baseline,no-frills form that will work in nearly all mobile browsers.We’ll use a listview <ul> tohelp with the layout ofour form.These two list-divider<li>s break our forminto two sections.build.phpUsing ID attributeswill help us scriptenhancements later.Tartan recipe - Tartan name - Tartan description(optional) - Series of color-sizecombinationsThese are the things ourform needs to collect.Form structureWe’ll want users to name their tartans and, optionally,enter a description. Then, they can define color-sizecombinations to build the pattern itself. Let’s give ourform two main sections: a top section for metadata aboutthe tartan and a main section for defining colors and sizes.

you are here 4 257build a mobile web app using a frameworkThe metadata form fields—name and description—are pretty basic.We’ll use a text input and a textarea, respectively. The only differencebetween the markup we’ll use and what you might be accustomed to is thatwe’ll take advantage of the HTML5 placeholder attribute.We’ll also be careful to use proper, semantic, accessiblelabel elements.The placeholder attribute lets us add initial,placeholding text in a field—it “goes away” when auser clicks into the field and alters its contents.It’s time to add some basic fields<li data-role="list-divider">Tell us about your tartan</li><li data-role="fieldcontain"><label for="tartan_name">Tartan Name</label><input type="text" name="name" id="tartan_name"placeholder="Tartan Name" /></li><li data-role="fieldcontain"><label for="tartan_info">Tartan Info</label><textarea cols="40" rows="8" name="tartan_info"id="tartan_info" placeholder="Optional tartan descriptionor info"></textarea></li><li data-role="list-divider">Build your colors</li>Ready BakeForm Fieldsbuild.phpGive jQuery Mobile hints about the fieldsYou may notice above that each field is inside an element with a data‑roleof fieldcontain. This data-role gives jQuery Mobile a hint that formfields are within this element, ready to be enhanced.We’re using a <ul> to organize our form,so we put the fieldcontain class on each<li> that contains a field.

258 Chapter 6nested listsLists within lists let the users add colorsEach piece of the tartan pattern is a combinationof a color and a size (width). For layout, let’s groupeach of these compound fields into a single <li>. For thebaseline experience—that is, for browsers without JavaScriptsupport—we’ll generate six of these field groups with PHP(saves on typing!).Here’s a starting point:<li data-role="list-divider">Build your colors</li><?php for ($i = 0; $i < 6; $i++): // 6 color fields ?><li class="colorset"></li><?php endfor; ?></ul>build.phpThis PHP for loopwill generate 6 ofwhatever is insidethe loop.The color and size fieldswill go here.Q:Why are we not assigning thedata-role of fieldcontainclass to this <li>? It has fields in it.A:Each of these <li>s (li.colorset) will actually contain twofields. When we build the fields themselves,we’ll place each one of them within itsown <div>, and we’ll assign thefieldcontain data-role to that<div>.Q:I’m confused. Which kind ofelement should I be assigning thefieldcontain data-roleattribute to?A:Whichever element contains thefield itself—its immediate parent. Thatcould be an <li> or a <div> or a<fieldset> or a <p> (or whatnot).The fieldcontain data-roletells jQuery Mobile to group the containedfield and its label when enhancing theform. So, each containing element with adata-role of fieldcontainshould contain one field (and its label).Q:Do I need PHP for this part of theproject?A:Yep! As we move into the morefunctional pieces of the Tartanator, we’ll beusing PHP to do the crunching and thinking.So, each color-sizeingredient will be containedwithin a single <li>—twoactual fields per <li>.

you are here 4 259build a mobile web app using a frameworkColor-size ingredient pairs: The color select field<li class="colorset"><div data-role="fieldcontain" class="color-input"><label class="select" for="color-<?php print $i ?>">Color</label><select name="colors[]" id="color-<?php print $i ?>" ><option value="">Select a Color</option><option value="#000000">Black</option><option value="#ffffff">White</option></select></div></li>build.phpEach set of color fields will have a color (as a <select>) and a size input.The classes of color-input and size-input are for later, when weenhance the form with JavaScript.Obviously, we want more than just black and white as color options!More on that in a moment.Recall that we’reinside a PHP loop;this assigns each fielda unique ID.It’d be cool if we coulduse the HTML colorinput type, but, alas,it’s not yet supportedin many browsers.The field above rendersabout like this onmodern WebKit-basedmobile browsers.

260 Chapter 6down on the rangeTartan patternscan only havestitch countsin multiples of2. The stepattribute shouldbe able to helpus here.</select></div><div data-role="fieldcontain" class="size-input"><label for="size-<?php print $i ?>">Stitch Count</label><input id="size-<?php print $i ?>" type="range" min="2"step="2" max="72" autocomplete="off" name="sizes[]" value="2" /></div></li>We’re using an input type new to HTML5: range. This fieldtype has increasingly good support among modern browsers(though certainly not universally). In supported browsers, itrenders as a slider; in unsupported browsers, it degrades toa text field. jQuery Mobile further enhances the slider intosomething mobile-friendly.The min and max attributes dowhat they sound like they’d do:define minimum and maximumvalues for the fields.build.phpColor-size field pairs: The size fieldThe field above rendersabout like this onmodern WebKit-basedmobile browsers.This part goes rightafter the <select>we just built.

you are here 4 261build a mobile web app using a frameworkTime to put it all together and build our mobile-looking (if not-yet-functional) form.Put the form fields into build.php.Drop in the markup from pages 256 through 260 tocreate the basic form fields.1Add more color options to the colors field.You can use the colors (hex values) from the file inextras/color-list.txt and/or add any color you’d like tohave available for tartan building.2Save build.php and load it up in a mobile browser!Looking (and feeling)more applike.Test DriveLooks pretty good… buthow would users get tothe form page?We need to link to theform and back again inan applike way. Let’sdo that now!

262 Chapter 6there…and backLink to the formThe build form is considered part of the Tartans section of the Tartanator.We need to give users a way to get to the form from the Tartans landingpage (the long list of existing tartans). Adding a button in the headershould suffice:<div data-role="header" data-position="fixed"><h1>Popular Tartans</h1><a href="build.php" data-role="button" data-icon="plus"class="ui-btn-right" data-theme="b">Create</a></div>Give the buttona “plus” icon.The ui-btn-right class willmake the button floatright (instead of left,which is the default).Assign the “b” themingswatch to make the buttonstand out a bit more.…and give users a way backOn the form page (build.php), let’s add a back button:<div data-role="header" data-position="fixed"><a href="tartans.html" data-rel="back" data-icon="back"data-role="button">Back</a><h1>Tartan Builder</h1></div>By adding data-rel="back" to the anchor tag, we tell jQuery Mobileto treat this link as a back link. When possible, jQuery Mobile will sendthe user to the last location in her history when she clicks this link. Fornonsupporting browsers, we supply a good default href, which is, in thiscase, tartans.html.tartans.htmlbuild.php

you are here 4 263build a mobile web app using a frameworkLink to the form from tartans.html.Add the Create button to the header in tartans.html.1Put a back button on the form page (build.php).Add a back link to the header of the Tartan Builder page.2Build content pages and site structure.We need to create basic pages for the site andcreate an overall structure that looks and feels righton mobile devices.Create the tartan listings.For the first phase, we’ll create a listing of existingpopular tartan patterns. The tartans section shouldbe a browsing interface that—of course—looksand feels applike and mobile oriented.Build a prototype of the tartan-building form.Ultimately, Ewan would like users to be able toconstruct their own tartans by using an applike mobileinterface. He wants to see what that might look like, sowe’ll whip him up a prototype.Yay! We’re done with phase 1 of theTartanator. Time for customer review.Test Drive

264 Chapter 6you’re done People want apps! The definition of what, exactly, makesa website a web app is fuzzy. Applike websites tendto feel more interactive than content pages. Chunks ofcontent and data are often retrieved asynchronously andinserted into an existing DOM, reducing the frequency offull-page loads. HTML5 is a specific, single thing—it’s a specrepresenting the evolution of HyperText MarkupLanguage (HTML)—but the term HTML5 is often usedto represent a combination of technologies that createapplike web experiences. Building mobile web apps from scratch can be verycomplex. We encourage you to try it! But for ourpurposes, we used a mobile user interface developmentframework to help us out. There are lots of mobile web frameworks out there(more every day!), representing many differentapproaches and emphases. jQuery Mobile is a popular mobile web framework.It has a strong relationship with well-formed HTML5markup, which makes it relatively straightforward to buildmobile interfaces from basic code. We built the structure for phase 1 of the Tartanator by,among other things, using jQuery Mobile–enhancedlistviews, headers, footers, navbars, and form elements. Making a web app feel more native is always abalancing act, requiring some careful decisions. We used some HTML5 form element attributes tobuild our prototype form. jQuery Mobile helps to adaptthese form elements across mobile browsers, includingadaptation for those that don’t support them yet.jQuery Mobile HelpWe’ve barely scratched the surfaceof all of the things you can dowith jQuery Mobile in this chapter.To learn more or find moreinformation about the stuff we’vecovered, refer to the documentationon www.jquerymobile.com. It’s verydetailed.Hey, guys. That’s looking pretty good.I’m excited about moving on to thenext phase of the Tartanator—that’swhere the fun stuff really happens.

you are here 4 265build a mobile web app using a frameworkQ:How much of the code in theTartanator so far is really HTML5?That is, how much of it uses tags orattributes that are new as part of theHTML5 spec?A:We’re using the data-*attribute quite a bit. That’s new. Weare also using the range input typeand the placeholder attributein our form.Q:I put the step attribute intomy range input for the size fieldsof the form, but I can still enter anyvalue between 2 and 72…even andodd numbers both. What gives?A:Unfortunately, at the time of thiswriting, jQuery Mobile’s range sliderwidget doesn’t support the stepattribute. We’ll show you a workaroundin Chapter 7.Q:Colors as a select list—thatdoesn’t seem like the most fantasticuser experience.A:When we enhance the form inChapter 7, we’ll add some JavaScriptcode that will show the user the colorshe has selected.Q:What happens to mobilebrowsers that don’t supportrange inputs yet?A:As long as the browser supportsJavaScript and CSS fairly well, jQueryMobile will convert the range fieldinto a slider widget (actually, it doesthis for browsers that support rangeinputs also).If a browser doesn’t support rangeinputs and doesn’t have JavaScriptsupport (or it’s disabled), the rangefield will most likely appear as astandard text input field.Q:The header and footer blinksometimes, or are slower to loadthan the other parts of the page.Sometimes scrolling feels a bit slow.Why is that?A:One of the ways jQuery Mobileattempts to emulate a native-ishexperience is by using fixed-positionheaders and footers (when youdesignate them as such, that is). Theway this is actually carried out differson different platforms.In a nutshell: although the landscapeis improving very fast, fixed positioning(in CSS, position:fixed)has unpleasantly scattered and weirdsupport in mobile browsers. Thereare workarounds, but they aren’tperfect. The slightly-less-than‑totally-snappy performance and occasionalpeculiarity are often manifestations ofthe trade-off the framework is makingbetween being applike and adheringcarefully to web standards. Congratulations,you’ve just built amobile web app withHTML5 and its friends.See? It’s really not too many steps fromthe HTML and CSS you already know toa mobile-feeling, applike website!

this is a new chapter 267mobile web apps in the real world7Super mobile web appsThe mobile web feels like that gifted kid in the class.You know, kind of fascinating, capable of amazing things, but also amysterious, unpredictable troublemaker. We’ve tried to keep its hyperactivegenius 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 moreprecocious browsers and transform erratic connectivity from a burden to afeature by crafting a thoughtful offline mode. And we can get at the essenceof mobility by using geolocation. Let’s go make this a super mobile web app!Pull my pigtails again,and you’ll pay! There’snowhere to hide. I canfind you anywhere...

268 Chapter 7retailoring the tartanatorIt looks nice…Now that we’re done with phase 1, the Tartanator has thatmobile-web-app sheen.It talks the talk…There are buttons. And navbars. And cool pagetransitions. We’re loading content selectively with AJAX.We’re reducing bandwidth, requests, and JavaScriptDOM processing. And jQuery Mobile is helping to makeour HTML5 form elements look and feel mobile friendly.

you are here 4 269mobile apps in the real worldShiny, sure. Mobile-riffic,sure. But it doesn’t doanything. Doesn’t an appneed to do something?Take heart. It may seem likebuilding phase 1 was full ofsound and fury, signifyingnothing. But we’ve laid somereally good groundwork.Weve got astraightforward structurebased on HTML5—nowits time to take it to thenext level!…but it needs to walk the walkPhase 2 will build on the stuff we’ve put in place, turning oursolid—but admittedly somewhat functionality-free—web app intowhat we think of as a super mobile app!

270 Chapter 7super mobile web appsMobile apps in the real worldMobile web apps that take good advantage of innately mobilecharacteristics often have certain aspects in common.What we like to call super mobile web apps feel like mobile apps forthe real world. They adapt to their users’ disparate devices withthe robust use of progressive enhancement. When the userdoesn’t have a data connection, these apps can function in anoffline mode. And they take advantage of browser-accessiblegeolocation to provide location-relevant content.Super Mobile Web Apps knows allabout the three features we’llexplore in this chapter to makemobile web apps more “super” andtake advantage of its inherent,awesome mobileness.Progressive enhancementOffline modeGeolocation

you are here 4 271mobile apps in the real worldWhat will we do to complete Phase 2 and make the Tartanator asuper mobile web app?Our first task is to get a grip on what it is we’ll need to implement tocomplete the Tartanator as outlined by Ewan in Chapter 6. Highlightthe requirements we haven’t completed yet. Then we’ll boil themdown into a few core objectives for this phase.EwanWelcome messageTartan eventsTartans!This is the main part of theidea…sounds like an app?Keep this simple…link to About Uspage for more info...I have some ideas here…notsure if they are possible!The Tartanator!Maybe call the wholeapp/site “The Tartanator”?Has a nice ring!New Website! App? - A collection of tartans:popular “traditional” onesas well as new-world anduser‑created tartans. - Make it so users cansee and explore thetartan patterns right ontheir phones. - Wouldn’t it be cool ifusers could create theirown tartans?Can this be done?Lots of imagesof tartans! - It would be nice if the appcould somehow “link into” ourinternational events database. - Could a user’s phone helpfind the nearest events?Events pageA history of Tartans Unlimited.Links to information aboutthe history of tartans.About Us pageThis content isn’tready yet.Bug Patabout this. - Might want to wait untilphase 2 or phase 3 of the sitefor events stuff—complex?

272 Chapter 7tartanator phase two goalsThe major objectives for the second phase of the project reallyfall into two core goals:Plug in the pieces that let users generate their own tartans.We’ve got our prototyped form. Now we need to walk the walk and plug in thepieces to make this actually work. We also need to enhance the existing form tomake it more usable for fancier smartphones and add a few bells and whistles.1Build a dynamic, searchable, location-aware Events page.We’ll need to hook into an existing events data source to let users find nearbytartan‑related events. That means we’ll have to delve into geolocation!2Welcome messageTartans!This is the main part of theidea…sounds like an app?Keep this simple…link to About Uspage for more info…I have some ideas here…notsure if they are possible!The Tartanator!Maybe call the wholeapp/site “The Tartanator”?Has a nice ring!New Website! App?Tartan eventsA history of Tartans Unlimited.Links to information aboutthe history of tartans.About Us pageThis content isn’tready yet.Bug Patabout this. - It would be nice if the appcould somehow “link into” ourinternational events database. - Could a user’s phone helpfind the nearest events?Events page - Might want to wait untilphase 2 or phase 3 of the sitefor events stuff—complex? - Make it so users cansee and explore thetartan patterns right ontheir phones.Can this be done?Lots of imagesof tartans! - A collection of tartans:popular “traditional” onesas well as new-world anduser‑created tartans. - Wouldn’t it be cool ifusers could create theirown tartans?

you are here 4 273mobile apps in the real worldFrank: That first big requirement is a doozy, isn’t it? I think it’ll helpto break it down into smaller chunks.Jim: Before we do that—what happened to the outstanding item forthe About Us page and historical background?Frank: Oh, right! The wife of the guy who writes bios andinformational copy for Tartans Unlimited just had a baby. The newfather has found himself far busier than he expected and isn’t going tobe able to help out with the project for a while. Big surprise, huh? Sowe’re not on the hook for that one right now.Jim: Well, that’s one less thing, I guess. Let’s talk about getting thepieces in place to allow users to create their own tartan patterns.Not to brag, but I’ve already got a head start on this one. I’ve beentinkering with a bit of JavaScript to enhance the form.Joe: Cool. That’ll look nice and pretty. But we also need to drop inserver-side scripts to do the actual work—Jim: You server-side guys! Trust me, enhancing the form interface is areally significant improvement.Joe: Anyway, I’ve been working on the PHP scripts. What about theevents stuff?Jim: Actually, is it OK if we focus on getting the tartan generationnailed and circle back on the events searching when we’re feelingready to think about it? I only have room in my brain for so much atone time.Frank: I guess that’s fine as long as we get cracking on the customuser tartans stuff right quick. We’re on a pretty tight timeline.To-dos: custom user tartan pattern implementationEnhance the form we built to take advantage of capabilities of newermobile browsers.Drop in server-side code for processing the form and generatingresources (images, HTML, etc.) for user-created tartans.Make sure the offline experience for this part of the app is acceptable.Heres our master to‑dolist for the customtartans requirement.Well start here!

274 Chapter 7nifty enhancementsReady, set, enhance! No need to panic aboutwriting your own widget. TheJavaScript is all ready for you.Some crackerjack frontend devscranked out this enhancement JavaScript. The devsalways get so excited and productive when they get towork on mobile web app projects!We’ll walk you through the highlights (and you canalways spend some time looking at the code), but youdon’t have to write it yourself or anything!Strap yourself in. We’re about to make a lot of nifty enhancementsto the Tartanator’s create form—in very short order.First step to a super mobile web app:enhance the UI for the browsers thatsupport it well.We can getrid of thesespace‑consumingrepeated fieldsand instead createa single widget.The form is functionalwithout any JavaScript atall–thats a good thing!But its a bitclunky on a newersmartphone browser.We did the right thingWe designed our form for the baseline experience:we’re not leaving anyone out in the cold (well, veryfew people, anyway). Take a look at what happensif you load up the Tartanator build form with noJavaScript at all.Now let’s enhanceIt’s functional for everyone, but also kind ofugly and unwieldy for everyone. While havingsix color-size combo fields is OK for a lessfull‑featured browser, it’s an encumbrance formore sophisticated ones.Now that we have our baseline ducks in a row, let’sdrop in some enhancements that will make theform more of a pleasure to use with smartphones.

you are here 4 275mobile apps in the real worldMake a better formInstead of having six fields—bothcluttered and limiting—let’s use a singlewidget. This will allow our users to addas many color‑size combos as they like!We can do this by using JavaScript toremove all of the color‑size fieldsexcept for the first set.A custom widget for thecolor select fieldWe can override the default selectinterface in the browser and use oneof jQuery Mobile’s custom select UIwidgets. That way, we can show colorswatches for each option.The custom jQuery Mobile widgetwe’re going to use pops up like a dialogto display the color options.Clicking on “Selecta Color” pops upthis customizedfield widget.Only one color-size set, not sixGeek BitsIf you’re familiar with jQuery code, the construct $(document).ready might besomething you see (or use!) a lot. The jQuery .ready method is kind of like (though notidentical to) the browser’s body.onload event—when it fires, it indicates that the DOMis loaded and ready. jQuery developers typically wrap their code in this so that it doesn’texecute before the page’s DOM is ready.In jQuery Mobile (jQM), you don’t (usually) want to use $(document).ready. Instead,jQM introduces some new page-load-related events, the most important of which arepageinit and pagecreate. pagecreate is fired after jQuery and jQM have completedinitializing the DOM of the page, but before widgets are rendered. pageinit is fired afterwidgets are finished, too. And remember that subsequent pages are often inserted into thefirst page’s existing DOM—that means that pagecreate and pageinit events can firemultiple times in a single full-page load.Confused a bit? So were we. It takes a few minutes for even seasoned JavaScript and jQueryfolks to fully grasp the concept. Read more in the JQM docs (http://jquerymobile.com/demos).For curious jQuery andJavaScript folksjQM alsointroducesmobile‑relevantevents for touch,orientation,and transition,among others.click

276 Chapter 7widgetized colors and sizesA widget to manage the list of colors and sizesThe select list backgroundreflects the currentlychosen color.When a user clicks the AddThis Color button, thecolor-size combo is addedto the list.Clicking an itemalready in thelist removes it.We’ve now removed all but one of the color-size field combos. Usingthat remaining pair of fields, we need to be able to generate an arbitrarynumber of color‑size combos.To do this, we add a new button: Add This Color. When clicked, thecurrently selected color and stitch count are added as a list element (<li>)to an unordered list (<ul>) of current color‑size values. We also addhidden form fields to the <li> to contain the color and size.Clicking on an <li> in the existing color list will remove it and itscontents from the list. Finally, clicking the “Make it!” submit button willgenerate a tartan pattern with all of the color-sizes currently in the list.Our forms submit buttonWhen the range inputchanges value, a functionmakes sure the stitchcount is an even number.This is our workaroundfor jQMs lack of supportfor the step attribute onrange input fields.The button becomesvisible once at least onecolor-size combo hasbeen added to the list.JavaScript does allof this.Enhanced build.phpform (detail)The remainingcolor-sizefield pairColor-size listul#colorlistTake it for a spinHey, good news. You don’t have to doanything to get the frontend enhancementsto work. It’s already done for you.The starting point of the code in thechapter7 folder already includes theJavaScript enhancements. Go try it out!See how it feels in a mobile browser.Remember, the form is onthe build.php page.Also, we havent “hooked up”the backend yet; clickingthis wont do anything yet!

you are here 4 277mobile apps in the real worldA peek under the hoodWe promised that you wouldn’t have to write the JavaScript, but it mightbehoove you to get a loose handle on what it’s doing.In a nutshell, there are a bunch of things that happen when the page withthe form on it has been fully loaded into the DOM (pagecreate event)and also some stuff that happens after the jQuery Mobile widgets arefinished enhancing things (pageinit event).In these initialization functions, other functions are attached to variousevents (form field changes, clicks, form submit, etc.) to enhance userinteraction and make our custom widgets functional.Do this!Get cozy with the code. Take a fewminutes to go hang out with andget to know the updated pieces ofthe Tartanator app, especially theupdated tartanator.js script.Match each function in the JavaScript enhancement code (tartanator.js) to what itdoes, and also to the event(s) that trigger it. Reference the comments in the scriptand use your noodle to determine what each of these functions does for us.onStitchSizeChange()styleColorListItem()buildAddButton()onColorListChange()addColor()setColorSelectStyle() Makes sure the size value is an even integer.Adds a colored CSS border (swatch) tothe left side of each color select option.Constructs the button to add a color-sizecombo and inserts it into the DOM.Refreshes the <ul> and <li> elementsof the current color list.Constructs hidden form fields, puts themin a new <li>, and appends the <li>to the existing color list.Sets the background color of the selectwidget to the currently selected color.change (size inputvalue updated)pageinitpagecreateclick (on list element incurrent color list) and afternew color added to listclick (on Add ThisColor button)pageinit and change(color select field)Function name What it does Event that triggers itFor an extra challenge!

278 Chapter 7exercise solutionSOlUTionSo, that’s the frontend enhancement…Enhance the form we built to take advantage of capabilities of newermobile browsers.Drop in server-side code for processing the form and generatingresources (images, HTML, etc.) for user-created tartans.Make sure the offline experience for this part of the app is acceptable.Next up!Done!onStitchSizeChange()styleColorListItem()buildAddButton()onColorListChange()addColor()setColorSelectStyle() Makes sure the size value is an even integer.Adds a colored CSS border (swatch) tothe left side of each color select option.Constructs the button to add a color-sizecombo and inserts it into the DOM.Refreshes the <ul> and <li> elementsof the current color list.Constructs hidden form fields, puts themin a new <li>, and appends the <li>to the existing color list.Sets the background color of the selectwidget to the currently selected color.change (size inputvalue updated)pageinitpagecreateclick (on list element incurrent color list) and afternew color added to listclick (on Add ThisColor button)pageinit and change(color select field)Function name What it does Event that triggers it

you are here 4 279mobile apps in the real worldHead First: OK, I gotta ask. We just did a whirlwindtour of a bunch of jQuery Mobile–specific JavaScriptinterface enhancements. Was it really worth it?Interface Enhancement: What jQuery Mobilemakes possible, quickly, with respect to enhancing themobile interface is compelling, sure, but I get yourdrift. Really, I’m trying to illustrate a broader concepthere.Head First: Which is?Enhancement: Regardless of whether you areusing a framework, designing for a baseline and thenenhancing is a good philosophy.Head First: With JavaScript?Enhancement: Let your mind go a bit here…thisis broader than JavaScript, too. We’re talking aboutstarting basic, defining the core experience or content,and then making it better—that is, really takingadvantage of what more powerful mobile browserscan do.Head First: By adding bells and whistles.Enhancement: I like to think that my contributionsare bigger than rounded corners and gradients. We’vetaken a somewhat limited and awkward form andmade it better for applicable users.Head First: You’ve overridden the rendering of anative form element. The color select field is nowusing a custom jQuery Mobile widget. Isn’t that kindof taboo?Enhancement: It’s true that messing with nativeform controls is a bit controversial. I don’t argue for itas a general rule. However, in our particular case, thestyling necessary to give visual clues to the user—colorswatches—wasn’t possible with traditional select fields.The underlying markup is still semanticallyappropriate—a <select> element—but we’retweaking it to make it a more usable experience. Butyes, you are correct in that we should consider nativeform control overrides carefully.Interface Enhancement ExposedThis week’s interview:Enhancement: is it all just fluff?The build-a-tartan formin an Android browser

280 Chapter 7a new generation of tartans…and now for the backendchapter7tartansjsindex.phpbuild.phptartans.phpfindevent.phpextrasThe starting point for Chapter 7 code has the structureshown here. Getting the backend pieces plugged inrequires a couple of quick steps.Copy all of the contents of the extras/scripts directory into your chapter7directory. When you’re done, the chapter7 directory should have three newfiles—config.php, generate.php, and image.php—as well as an inc directory (withtwo files inside).cssdialogsgenerate.php image.php incA quick tour of tartan generationXML file HTML file PNGForm POST datagenerate.phpUsing the data posted fromthe form, generate.phpcreates several resources.An XML filerepresenting the tartanpattern is output totartans/data/.An HTML file for the tartanis created in tartans/.This HTML file is based onthe tartan-template.phpfile in tartans/.An image of thetartan is outputas a PNG.config.php

you are here 4 281mobile apps in the real worldbuild.phpbuild.phpgenerate.phpgenerate.php <new-tartan>.html<new-tartan>.htmlPOST datanew tartanHTML URLThe two sides of generate.phpThe way that generate.php ultimately responds after creating thetartan resources depends on how it was requested.Requested with AJAXFor browsers that support AJAX appropriately, the JavaScriptin build.php posts the form data to generate.php using XHR(XMLHttpRequest). If successful, generate.php responds with theURL of the newly created HTML file for the tartan. The contentof this new page is then inserted into the current page’s DOM.Form posted directlyFor browsers that don’t support JavaScript and XHR, the form isdirectly posted in a “traditional” way to generate.php. After generate.phpcreates the tartan resources, the browser is redirected to the newlyminted tartan page.In this method, there’s nevera full-page reload. Thecontent of the new tartanpage is inserted into theDOM of the build page.In this method, theclient is redirected tothe new tartan page(a full-page load).In both methods, theprimary job of generate.phpis the same: create the newtartan resources.Asynchronous requestwith XHRPOST data redirectWe’ve made sureto support mobilebrowsers withand withoutAJAX support.Asynchronous request with XHR“Traditional” method—redirect to the new tartan page

282 Chapter 7lists of tartansQ:Help! Something’s not working right!A:If you are having trouble getting your tartan build form towork, or aren’t seeing any created tartans, here’s a few thingsto check.First, make sure that the tartans/ directory exists and that it andall of its subdirectories can be written to by your web server’suser. Also verify that the tartan-template.php file is in the tartansdirectory. Finally, double- and triple-check the <form> tag inbuild.php for the correct action and method.Q:How does the tartan list page work?A:The list.php file included in the page looks at the currentHTML files in the tartans/ directory to generate its list. For each,it grabs its associated XML file (in tartans/data/) to get furtherinformation, like the pretty display name. It then outputs an<li> for each tartan, with a link to the tartan’s HTML page.Q:About that XML. What the heck is that?A:We chose to store the data representation of tartanpatterns as XML for a couple of reasons. One, it’s a nice,simple, portable data format. Two, it obviates the need to use adatabase (less work for you!).Q:By the way, what is this whole super mobile webapp thing you’re talking about? Some kind of standard orinitiative or something?A:Nah. It’s just something we started calling mobile webapps that seem like they take good advantage of the neat thingsmobile devices and their browsers have to offer.Go create some tartans! Create half a dozen or sotartans of your own using the form on build.php.Your creations should appear on the tartanslanding page (tartans.php).One last thing!<ul data-role="listview" data-filter="true"><?php include(inc/list.php); ?></ul>Now that users can add tartans, the tartan list as shown on tartans.php is ever-changing. Drop this line into the tartans.php file to include a script that willoutput <li>s for each currently existing tartan.tartans.phpDo this!

you are here 4 283mobile apps in the real worldBut we’re not done yetNow we have to deliver on the third piece of the tartan-creationimplementation: the tartans need to be available offline.Frustrating. I want to show a friend the tartanI designed a few minutes ago...but I have dreadfulphone service in this building. I can’t get aconnection...and now my tartan won’t show up.A stable—or even existent—network connection issomething we just can’t takefor granted with mobile devices.We’ve got to do something to make tartansavailable without an Internet connection.Two out of three is a great startWe’ve taken some good steps toward a super mobile web app.We’ve enhanced the baseline interface to take advantage ofsavvier browsers. And now the app does something!We need to deal withthis requirement.Enhance the form we built to take advantage of capabilities of newermobile browsers.Drop in server-side code for processing the form and generatingresources (images, HTML, etc.) for user-created tartans.Make sure the offline experience for this part of the app is acceptable.

284 Chapter 7offline storageOffline is importantPart of giving a good experience to your users is makingyour websites and apps behave when there isn’t an Internetconnection to be had.For the Tartanator, we need to step back and figure out howwe can make things work better for our disconnected users.We need to make certain things available offline.Can you think of why it would be difficult forOpera Mini to support application cache?How do we controlwhat’s available offline?Is that even possible?We can use something called a cache manifest to definewhich pieces of our app should be available offline.Make it manifestApplication cache is part of the HTML5 specification. It allows for controlover which web resources are cached for offline availability through the use ofa cache manifest.A cache manifest is a specific type of file on a web server that gives instructionsabout how or whether certain web resources should be cached on a user’sdevice. By creating a cache manifest, we can dictate which things are availableoffline for the Tartanator web app.Browsers that implement application cache—or appCache, as it is almostuniversally shortened to—also provide the window.applicationCacheobject and its various events, which we can access and manipulate withJavaScript if we like.Support for appCache is fairly widespread in current browsers, with thenotable exceptions of Internet Explorer 9 and Opera Mini. Using a cachemanifest won’t cause problems for these browsers; they just won’t payattention to it.

you are here 4 285mobile apps in the real worldWrite a cache manifest file.1Make sure the manifest is served as the correct type of file.3Add a manifest attribute to the <html> tag of the applicablepages with a URL (relative is fine) to the manifest file.2 The file must have a content‑typeof text/cache‑manifest, or itwont work.A basic recipe to create a cache manifestThere are three general steps to creating and using a cache manifeston a website or app.CACHE MANIFEST# comments look like thisCACHE:index.htmlfoo/bar.htmlbaz.htmlcss/styles.cssicons/plus.pngThis line, verbatim, is required.<!DOCTYPE html><html manifest="manifest.appcache"><head>The deceptively simple syntax of a cache manifestA simple cache manifest file is quite basic in appearance. You list the items youwant cached under the (technically not required, but definitely good practice)CACHE: heading.Next, you update your web page(s) by adding amanifest attribute pointing to that file. You alsoneed to make sure the file is served as the correctContent-type (aka MIME-type). You can oftendo this simply with Apache by adding the followingto the Apache configuration file or, more likely, an.htaccess file on your website’s filesystem.This file doesnt have tobe named manifest, butthe preferred extensionis .appcache.12AddType text/cache-manifest .appcache.htaccess3This line tells the web server toserve files ending in .appcache as thetext/cache‑manifest content type. The file has to be of this type,or browsers wont recognize it.URLs canbe relative(like here) orabsolute (e.g.,http://…).manifest.appcache

286 Chapter 7cache me, babyIn theory, cache management using a cache manifest file is straightforward.List the things you want available offline, add the manifest attribute tothe <html> tag of a page or pages, and let the caching begin!Don’t start panicking quite yet, but creating a cache manifest and getting itto work the way we really want it to can be a bit confusing and sometimesfrustrating. There are a fair number of details and gotchas that can trip youup. It helps to have good tools to help you inspect and debug what’s going on.Dev tools to the rescueWebKit provides a tool called Web Inspector, which is available in bothChrome and Safari (being WebKit-based browsers). You can see greatdetails about appCache information in the Resources tab.Unfortunately, the devil is in the details It can be easy to get yourself in a jam workingwith cache manifests.Cache manifest behavior can be tough and confusing todebug, and malformed cache manifest files are difficult tofind and remove without the right tools. We recommendusing either Chrome or Safari for building and testing our Tartanatorcache manifest. Also note that appCache isn’t supported by InternetExplorer before version 10, which at the time of this writing is still indeveloper preview.It will also help you save your sanity to develop and test on a desktopbrowser first before moving to a mobile device.Detail of the Resourcestabs info aboutappCache in Chrome.Safaris developertools look almostexactly the same.It can be a bit painfulto try to excise poorlyformed appCaches frommobile devices.

you are here 4 287mobile apps in the real worldImplement a basic cache manifest for the Tartanator.I’ve never messed around with.htaccess files, and I don’t evenknow if I can do that with mycurrent web hosting service.It’s highly likely that you can use .htaccessfiles on your hosting provider or local webserver. But we won’t make you.We do know you can use PHP. So, we’ll generate our cachemanifest files using PHP and use a snippet of code to setthe file’s content-type to text/cache-manifest.Name your file manifest.appcache.php and put it in the chapter7 directory.1Add the following line to the top of the file.2Add a CACHE: section and list the main pages of the site, as well as the JavaScriptand CSS files.3<?php header(Content-type: text/cache-manifest); ?>The .php extension is neededso that we can execute thePHP code in the file.This sets the content-type of the outputof this script to text/cache-manifest.Refer to the syntaxon page 285.Update the <html> tag on index.php, build.php, tartans.php, and findevent.php witha manifest attribute.4Serve the manifest as the correct content-type

288 Chapter 7cache headachesThe manifest.appcache.php file you created should look something like the one below. Note thatwe’re also listing the CSS and JavaScript files from jQuery’s content delivery network (CDN).<?php header(Content-type: text/cache-manifest); ?>CACHE MANIFESTCACHE:index.phpbuild.phptartans.phpfindevent.phpcss/styles.cssjs/tartanator.jshttp://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.csshttp://code.jquery.com/jquery-1.6.4.min.jshttp://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.jsmanifest.appcache.php<html manifest="manifest.appcache.php">…you can use absolute URLsto denote resources on otherdomains that you want to cache.In addition to relative URLs toresources on your own site…The HTML tag on the Tartanatorpages should now look like this.I think I’m doingsomething wrong. A lot ofimages and icons aren’t showingup, even when I’m online.A trade-off of using PHP togenerate our manifest is thatwe cant use the preferred.appcache extension.

you are here 4 289mobile apps in the real worldFrustrated Web Dev: Argh. As I navigate aroundthe Tartanator site, a bunch of images and icons andstuff aren’t showing up, even though I’m online.appCache: Well, that’s because you neglected toinclude some of these resources in the CACHE list.You should go round them up and add them to thecache manifest.FWD: So, I need to list every resource on the site orthey won’t show up at all?appCache: No. You need to add the resources thatare needed by the HTML files in the cache.FWD: I’m totally confused. What does it even meanfor an HTML file to be in the cache?appCache: You already know one way to includean HTML file in the application cache: listing itexplicitly in the CACHE section of the manifestfile. But it’s also worth noting that any HTMLfile that has a manifest attribute on its HTMLtag is included in the cache manifest, even if it’snot explicitly listed there. Only those pages listedin the manifest or referencing it in a manifestattribute—that is, in the cache—need to have all oftheir resources added to the cache list.FWD: OK, so for any page in the cache, if I neglectto add each and every resource to the CACHEsection, any missed resource won’t ever load, even ifI’m online.appCache: Well, that’s not exactly true, either.I gather you’ve learned about the CACHE section,but haven’t heard anything yet about the NETWORKsection.FWD: What’s it for?appCache: The NETWORK section lets you defineresources that you don’t want to cache, and forwhich the browser should request fresh copies whena connection is available. It has a special handy-dandy wildcard token, *, which means that anythingnot explicitly listed in the CACHE section should beretrieved from the server.FWD: Eureka! That sounds like the answer I needhere.appCache: Take caution. If something is in theNETWORK section, either explicitly or by dint of the* wildcard, it will always be requested afresh. So youneed to choose your path carefully.Decide what things should really be available offlineand list them in the CACHE section. It sounds likeyou do need to track down some icons and images,for example. But for things that really are dynamic—login screens, API calls, etc.—let the NETWORKwildcard do its work.Cache Manifest ExposedThis week’s interview:Bending appCache to our willCan you think of some parts of theTartanator web app that we might notwant to make available offline? Why?

290 Chapter 7dynamically output tartansWe need to make the tartanpages and images work offline, so theyneed to be added to the CACHE section.But how can I do that when I don’t knowwhat their URLs will be? Changes to any of the resources listed in themanifest’s CACHE section will not bedownloaded by browsers unless the cachemanifest file itself changes.We have css/styles.css in our manifest’s CACHE section.Therefore, we could edit styles.css until the cows come home, butbrowsers won’t see those changes. Once an item is in the cache, itwill only be refreshed if the cache manifest file itself changes.A common method for managing this is to use a comment line in themanifest file with a version number. Simply changing this versionnumber will cause browsers to see that the manifest has changed,download it afresh, and check whether any of the resources within itare new or modified.The PHP code we’ll use to autogenerate a list of current tartanimages and HTML files has the happy side effect of causing themanifest file to be updated when new tartans are added. But, afterimplementing appCache, we’ll need to increment the version numberif and when we change other files.Feels like a chicken-and-eggproblem, huh?Fortunately, we’re using PHP to generate ourmanifest file, so we can drop in some code todynamically output a list of all of the tartanHTML files and images that currently exist.Do this!Find the snippet of PHP code to dynamicallygenerate the list of images and HTML filesin the chapter7/extras folder. It’s in a filecalled current_file_list.txt.Remember thatcomment linesstart with #.

you are here 4 291mobile apps in the real worldIt’s time to make our cache manifest behave a bit better. Let’s integratesome of the lessons we’ve learned into the manifest.appcache.php file.Track down the missing static icons and images.There are some icons and images, used by jQuery Mobile,that we need to add to the CACHE section.1Add the NETWORK: section and the wildcard.Put this above the CACHE: section.2Remove build.php and findevent.php fromthe manifest.Come to think of it, these are resources that should only beavailable when the user is online. The Events page doesn’tdo anything yet, but it will. Soon, even.4NETWORK:* It’s easy to create cache manifests that are, shallwe say, not quite what we intended.Remedying a wayward appCache is easiest in the Chromebrowser. Type chrome://appcache-internals inthe URL bar, and you will see information about all current appCache data.Each site cache has a simple Remove link.In Safari, go into Preferences and select the Privacy tab. You can eitherRemove All Website Data wholesale, or use the Details button to search forthe problematic site and remove its cache.In Firefox, go to Preferences → Advanced → Network. There is an area inthe Offline Storage subsection that lists all sites that have stored data foroffline use. You can selectively remove the appCache here.Add the PHP snippet.Add the code from extras/current_file_list.txt to the end of thecache manifest file.3Dont forget to removethe manifest attributefrom the <html> tag onthese pages.Kudos if you caught abunch of these alreadyin the earlier step!

292 Chapter 7cache solutiont<?php header(Content-type: text/cache-manifest); ?>CACHE MANIFESTNETWORK:*CACHE:http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.csshttp://code.jquery.com/jquery-1.6.4.min.jshttp://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.jshttp://code.jquery.com/mobile/1.0rc1/images/ajax-loader.pnghttp://code.jquery.com/mobile/1.0rc1/images/icons-18-white.pnghttp://code.jquery.com/mobile/1.0rc1/images/icons-18-black.pnghttp://code.jquery.com/mobile/1.0rc1/images/icons-36-white.pnghttp://code.jquery.com/mobile/1.0rc1/images/icons-36-black.pngindex.phptartans.phpcss/styles.css<?php // The PHP code snippet from the current_file_list.txt file// goes here. Were not showing it to save space.?> A single problem with a cache manifestcan cause the whole thing not to work.Just what you need, more gotchas. But you shouldknow that if a single resource in the manifestresults in a 404 (not found), the entire manifest willbe disregarded. Similarly, a single syntax goof can render thewhole thing useless.You can protect yourself. Use the handy-dandy manifestvalidator at http://manifest-validator.com/ and keep an eyeon your developer tools windows to make sure none of thereferenced resources is missing.manifest.appcache.php should look about like this now.Now, save the file and try it out!Make sure you dont have any blanklines here between the header() lineand the CACHE MANIFEST line.

you are here 4 293mobile apps in the real worldConfusing. I think it mostlyworks, but when I add a new tartan, itdoesn’t show up on the tartans list pageright away. I have to reload the page.That’s not quite right, is it?Even though the cache manifest filehas been updated, you have to reloadthe tartans list page (tartans.php)before you can see the newest stuff.What gives?

294 Chapter 7update, don’t reloadFrank: I went and read up about this. I admit I got a bit sucked in.Here’s how it works. Say your browser already has a cache manifestfile for the site. Then say you visit the tartans listing page again laterafter new tartans have been created. Your browser will notice thatthe cache manifest file has changed—it’s different from the one thebrowser already had because the list of tartan files in it has changed.Your browser will immediately grab the new manifest file and check forupdated or new stuff.Jim: Then why the heck doesn’t the updated or new stuff show upright away?Frank: The browser doesn’t wait around for all of the resources thatare updated or new to download before rendering the page. Once thebrowser does finish downloading stuff, the new or updated assets areready to go, in the browser’s cache, but won’t show up until the page isrefreshed.Jim: So, the only way for folks to see updated things is to reload.Frank: Well, I think I might have a workaround for this particularsituation. I wrote a tiny little JavaScript tool—Jim: Always with the JavaScript!Frank: The part of the page that’s dynamic is the stuff that gets outputby the PHP file included in it—that is, list.php. It outputs one <li> pertartan. The rest of the page is static. We really only care about updatingthe contents of the tartan list <ul>.Jim: True.Frank: My code uses the window.applicationCache objectand its methods to see if there has been an update to the cache—whichthere will be if the manifest file has changed, right? If there has beenan update, we want to get the updated output from list.php.Jim: Right. If the cache manifest has updated, we know the tartan listshould be updated. Preferably without the user having to reload theentire page.Frank: Yeah. So, if there has been an update to the cache manifest, mycode sends an AJAX request to list.php. list.php isn’t in the manifest and,when requested directly, will always return HTML markup representingthe current list of tartans. I then take the markup returned by list.php andreplace the current—that is, stale—list on the page with it. Voilà!

you are here 4 295mobile apps in the real worldLet’s take Frank’s little JavaScript library for a spin and see if it helps us wrap up thiscomplex adventure with appCache.Go grab the little library.Copy cache-manager.js from the extras/js folder into chapter7/js.1Include the script in the Tartanator pages.Include the cache-manager.js script right after the jQuery Mobile script onindex.php, build.php, findevent.php, and tartans.php.2Add this JavaScript snippet to tartans.php.This code indicates that we want to ensure fresh content for the#tartans-list element inside of the #tartans_page pagecontent <div>, using data returned from inc/list.php.3<script src="js/cache-manager.js" type="text/javascript"></script><div data-role="page" id="tartans_page"><script type="text/javascript" charset="utf-8">var tartanPage = $(#tartans_page);tartanPage.live(pageinit, function () {if (!tartanPage.data.cacheManager) {tartanPage.data.cacheManager = new CacheManager(#tartans_page);tartanPage.data.cacheManager.ensureFreshContent(#tartans-list,inc/list.php);}});</script><div data-role="header" data-position="fixed">tartans.phpTest Drive

296 Chapter 7a real cacheQ:If you can use a wildcard in theNETWORK section of a cache manifest,can’t I just use a wildcard in the CACHEsection to cache everything on my siteand leave it at that?A:For better or worse, you can’t usewildcards in the CACHE section. Thespecial wildcard token is only for theNETWORK section, and it’s not really awildcard. You can’t combine it with any othertext patterns—it is a standalone thing with aspecific meaning (which is: unless a givenresource on the site is listed in anothersection explicitly, request it over the networkwhen possible).Q:What is the point of making it sothat pages with a manifest attributein their HTML tags get cached even ifthey’re not listed in the manifest?A:This can indeed cause confusion andheadaches. But the idea is that instead ofdownloading and caching a bunch or all ofthe pages on a given site in one go, pagescan be added to the cache “lazily”—that is,they get added to the cache when the uservisits them first.Q:What’s this about “all in one go”?A:When a browser gets a new orupdated cache manifest file, it immediatelystarts downloading all of the new resourcesand/or checking for updates to existing ones.This is something to consider, seriously,when designing your cache manifests.Q:Our manifest contains all of thetartan images and HTML files. Isn’t thatan awful lot to download all in one go?A:We agonized over that a bit. It is afair number of HTTP requests, yes. Butthe files are rather minute: most of theimages are under 1 KB and the HTML filesare even smaller. So, the bandwidth hit issmall, and, because the resources are beingdownloaded asynchronously, the impact onthe user should be minimal.Q:Does the browser redownloadeverything in the manifest every time it’supdated?A:Thankfully, no. The browser will checkto see if the resources it already has cachedhave changed but will not download themagain unless they’ve been modified.Q:All of this is well and good, butwhat happens if the user’s browserdoesn’t support appCache?A:The site basically behaves like it didbefore we added a cache manifest. It worksfine, but won’t have a nice offline experience.Q:You totally didn’t mention theFALLBACK section.A:In addition to the CACHE andNETWORK sections, there is an optionalFALLBACK section that allows you to listthe offline variants that should be used whenan online variant is unavailable—for example,use offline.html instead of login.html.Q:appCache is nice, but what aboutlocalStorage? It feels like only half of thestory here.A:Hey, smartypants! You’re ahead of us.We’ll come back to localStorage in Chapter 8(and if you’re new to the term, no worries!). Watch out for implicit cachingvia the manifest attribute.We mentioned it already, but we’regoing to pound it home: any pagethat has a manifest attributeon its <html> tag will be cached, whether ornot it’s listed explicitly in the cache manifest.And, no, you can’t get around this by using theNETWORK section or any other trickery.

you are here 4 297mobile apps in the real worldVictory is (finally) oursPhew. It was a bit of a battle, but we now have the Tartanator working offline. Thatmeans we’re done implementing the custom tartans piece of phase 2.It’s time for someThe other chunk of phase 2 is the building of apage that lets users search for local tartan-relatedevents near them.We want to find events thatare close to the user’s currentposition. That means we’ll needto talk about geolocation.The Find Events form thatwe want to build.location-awareEnhance the form we built to take advantage of capabilities of newermobile browsers.Drop in server-side code for processing the form and generatingresources (images, HTML, etc.) for user-created tartans.Make sure the offline experience for thispart of the app is acceptable.searchable eventsCongratulations, youjust successfully bentappCache to your will.Writing cache manifest files that do whatyou actually want them to do can betricky—you did it!

298 Chapter 7it’s not just gps, you knowHow geolocation worksGeolocation from a web browser involves using JavaScript toobtain the device’s current position. Many modern smartphonebrowsers implement the World Wide Web Consortium (W3C)Geolocation API, which provides a straightforward interface forgetting at geolocation data. There are a few other contenders inthe mix, including the now-deprecated Google Gears API andsome proprietary APIs. Older phones and even some modernsmartphones don’t have geolocation support in the browser at all.Although the first thing many people think ofwhen they hear the term geolocation is GPS (globalpositioning system), there are in actuality manyadditional sources for the location of a device,including nearby WiFi networks, cell towers,the device’s IP address, RFID (radio frequencyidentification) tags, and WiFi or Bluetooth MAC(media access controller) addresses.Wheream I?24.21.168.0Device’s IP addressCell towersRFID tags00:0D:93:00:00:00MAC addressesGPSWiFi networks

you are here 4 299mobile apps in the real worldHow to ask W3C-compliant browserswhere they areBrowsers that implement the W3C Geolocation API make the featureavailable via the navigator.geolocation object. The mostrelevant method on that object is getCurrentPosition, whichattempts to do what it sounds like it would do.navigator.geolocation.getCurrentPosition(successCallback, errorCallback);Try to get the currentposition of the device.The name of a JavaScript functionto call if a position is obtained.The name of a JavaScriptfunction to call if anerror is encountered.Handling the info getCurrentPosition gives usWhen a location is successfully determined, the function that wasgiven as the name of the success callback will be called and given aposition object. We get at the info we really care about—latitudeand longitude—by looking at the latitude and longitude ofthe coords attribute of the position object.function successCallback (position) {var coords = position.coords;alert(coords.latitude + , + coords.longitude);}The success callback function This position object containsthe information we need.The most pertinentattribute of theposition is thecoords object… …and the most pertinent attributes on thecoords object are latitude and longitude.function errorCallback(error) {alert(error.message);}Both of these functionssimply (and somewhatannoyingly) pop up aJavaScript alert.The error callback function. Ifsomething went wrong, its called.

300 Chapter 7geolocate your code"Browser doesnt support geolocation"navigator.geolocationgetCurrentPosition()positionlongitudelatitudemessagegetLocationcoordscoordspositiononGeoErrorAnswers on page 302.Geolocation JavaScript MagnetsPlace the code magnets in the correct positions in the geolocationJavaScript below. You can only use each magnet once, but you mayend up with a few that you don’t need.function getLocation () {// Verify the browser supports W3C geolocationif ( ) {navigator.geolocation. ( , onGeoError);} else { // It doesntonGeoError(new Error( ));}}function onGeoSuccess ( ) {var = .coords;alert(coordinates. + , + coordinates. );}function (error) {alert(error. );}();onGeoSuccesspositiongetCurrentPositioncoordinates

you are here 4 301mobile apps in the real worldStart in on the Find Events page: The baselineThe idea of the Find Events page is just that: to find events. We now have apeek into how to find a user’s location with JavaScript in applicable browsers.But we’ve been taking the approach of creating a baseline experience first.What if a user’s browser doesn’t have JavaScript or geolocation?Let’s start basic and create an events search form that doesn’t require eitherof those things. Providing a simple list of US states in a select list will be ourbaseline default.Build a simple events search form on findevent.php to use as our baseline.Put the form inside the page content <div>.Add a select input element.The displayed options should showthe name of the 50 US states. The values should be the two-letterpostal abbreviations of the states.2The submit input button should have an id of search_submit.3A select elementwith the name andID of state_filterA very simple formfor searching forevents by stateThe events databaseonly has US-basedevents…at least for now.Dont forget to wrap thefields in a <div> with adata-role of fieldcontain(the jQM way).Give the form a method of GET and an id of search_form.Set the action attribute to events.php.1Well show you whereto find events.phpin just a bit.Find us_states.txt in theextras/events directoryto help you along.

302 Chapter 7i see where you’re coming frompositionfunction getLocation () {// Verify the browser supports W3C geolocationif ( ) {navigator.geolocation. ( , onGeoError);} else { // It doesntonGeoError(new Error( ));}}function onGeoSuccess ( ) {var = .coords;alert(coordinates. + , + coordinates. );}function (error) {alert(error. );}();"Browser doesnt support geolocation"navigator.geolocationpositionlongitudecoordinateslatitudemessagegetLocationpositiongetCurrentPositiononGeoErroronGeoSuccessOnce you’ve constructed this code, put it in a file calledgeolocation.js in the chapter7/js/ directory. Then include it inthe findevent.php page by using a <script> tag within the<div> with data-role="page".It should go right abovethe search form.You didn’t needthese magnets.Geolocation JavaScript Magnets SolutionDid you manage to place the magnets in the right position?getCurrentPosition()coordscoords

you are here 4 303mobile apps in the real worldYour basic form should look like this.Let’s integrate geolocation<div data-role="content"><script type="text/javascript" src="js/geolocation.js"></script><form method="get" action="events.php" id="search_form"><div data-role="fieldcontain"><label for="state_filter">Search by State</label><select id="state_filter" name="state_filter"><option value="">Choose State</option><option value="AL">Alabama</option></select></div><div data-role="fieldcontain"><input type="submit" value="Find Events" id="search_submit" /></div></form></div>We now have a basic form. Oh, and some really annoyingJavaScript alerts.Let’s do the fun part: dropping in geolocation for browsersthat support it. Here’s what the form will look like for enabledbrowsers after our next set of changes:Once we spruce up our form,users with browsers thatsupport geolocation will beable to use their currentlocation to find events.

304 Chapter 7geolocation constructionGeolocation ConstructionWe’re going to fancy up the code in geolocation.js. Let’s walk through the highlights.(function () {var $page, $searchForm, $submitButton, $stateFilter;$page = $(#event_page);if (!$page.data.initialized) {$page.live(pagecreate, initGeo);$page.data.initialized = true;}function initGeo() {$searchForm = $(#search_form);$submitButton = $(#search_submit);$stateFilter = $(#state_filter);if (navigator.geolocation) {initGeoOptions();}}function initGeoOptions() {var $latField, $longField, $flipSwitch;$flipSwitch = $(<select name="usegeo" id="usegeo"data-role="slider"><option value="off">Off</off><option value="on">On</option></select>).change(toggleLocation);$flipSwitch.prependTo($searchForm).wrap(<div data-role="fieldcontain"></div>);$flipSwitch.before(<label for="usegeo">Use myLocation:</label>);$latField = $(<input type="hidden" />).attr({ name: latitude, id : latitude})$longField = $(<input type="hidden" />).attr({name: longitude, id : longitude })$latField.appendTo($searchForm);$longField.appendTo($searchForm);}When the page initializes,call the initGeo function.If the browser supports geolocation,initialize the geolocation-relatedform elements.Add a slider-themedon/off switch to letusers opt in to usingtheir current location.Add two hidden fieldsto hold the value oflatitude and longitudefrom the geolocation.

you are here 4 305mobile apps in the real worldfunction toggleLocation(event) {var geoActivated = ($(event.target).val() == on) ? true : false;if (geoActivated) {$submitButton.button(disable);$stateFilter.selectmenu(disable);$.mobile.showPageLoadingMsg();navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);} else {$stateFilter.selectmenu(enable);$submitButton.button(enable);}}function onGeoSuccess(position) {var coordinates = position.coords;$(#latitude).val(coordinates.latitude);$(#longitude).val(coordinates.longitude);$.mobile.hidePageLoadingMsg();$submitButton.button(enable);}function onGeoError(error) {$(#usegeo).val(off).trigger(change);alert(error.message);}})();You can find this code in thechapter7 folder in extras/js/enhanced_geo_form.js.Update the geolocation.js file, save it, and tryout the updated Find Events page.Heres our success callback.Weve altered it to updatethe latitude and longitudehidden fields with theusers location data.On error, slide the usegeolocation switch back tothe off position and fire itschange event (which is boundto toggleLocation above).toggleLocation is boundto the change event onthe slider switch.If the user just flipped it on,disable the state filter, anddisable the submit button (itwill be reenabled when thegeolocation is complete).When its turned off, reenablefilter by state.Heres where we triggerthe geolocation.Try it out! Play with the formto get a feel for what the newJavaScript does for us.

306 Chapter 7visit the libraryJim: I was just checking out the geolocation piece on some devices. I know thatthe BlackBerry OS 5 browser is supposed to have geolocation, but the Use MyLocation switch isn’t showing up.Frank: Yeah. The BlackBerry OS 5 browser supports geolocation, but it isn’t theW3C flavor. I was just looking this up. And older Android browsers don’t haveW3C-style geolocation, either. They’re based on Google Gears.Jim: This sounds complicated.Frank: It is. And we’re on a tight deadline. I don’t think we have time to chasedown all of the odds and ends and do exhaustive testing on a whole bunch ofobscure devices. What I did find is this open source, drop-in JavaScript library thathandles geolocation across a bunch of different platforms, W3C-compliant or no.It’s called, simply enough, geo-location-javascript.Jim: But doesn’t that mean we’d have to go refactor all of our existing JavaScript?Frank: Nope. The API for this library emulates that of the W3C spec. All of themajor method and attribute names are the same. I think we only need to changea few lines and then we can stop worrying quite so much about cross-platformcompatibility.Jim: Oh, while we’re making edits to the JavaScript…the pop-up error forgeolocation failures is ugly. And could use some finesse in wording.Frank: Yep. I think we should use a jQuery Mobile dialog, like the ones I built forform errors on the tartan-creation form.Jim: Oh, you didn’t tell me about that!Frank: If you try to submit the tartan form without a title, or if you forget a coloror size when you add a color-size combo, a dialog will pop up to alert you to theerrors of your ways. It’s styled in a nice, jQM way.Jim: How do you make a jQuery Mobile dialog?Frank: They’re standalone jQM pages. Check out the ones in the dialogs directory.Then I make them show up from the JavaScript.Jim: Oh, cool. I can probably figure this out.Frank: OK. You do that. I’m going to drop in this geolocation library real quick.Do this!Copy the extras/js/geo.js fileinto the chapter7/js folder. Thisis the geo-location-javascriptlibrary. You can also visitthe project’s home page, ifyou’re curious about it, athttp://bit.ly/sx7JrH.

you are here 4 307mobile apps in the real worldUpdate the Find Events page and the geolocation JavaScript to use the cross-platformgeolocation code and show geolocation errors in a pop-up dialog.Update findevent.php to include the JavaScript for thenew geolocation library.1Update geolocation.js to use the new library.Find and change the following code from:2Create and invoke a dialog for geolocation errors.Using the other pages in the dialogs directory as a guide, create a nicely worded errordialog for geolocation failures. Name this file geolocation_error.html.Next, replace the alert in the onGeoError function with a dialog pop up. Youcan find examples of dialog pop ups in the js/tartanator.js file. You should only need toadjust the URL argument.3<div data-role="content"><script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript" charset="utf-8"></script><script src="js/geo.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="js/geolocation.js"></script>if (navigator.geolocation) {initGeoOptions();}navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);if (geo_position_js.init()) {initGeoOptions();}geo_position_js.getCurrentPosition(onGeoSuccess, onGeoError);to:and change this:to:

308 Chapter 7use my locationHere’s what your onGeoError function should look like after you convert theerror from a basic JavaScript alert to a jQuery Mobile dialog. We trust you alsomade the HTML page for the dialog itself!function onGeoError(error) {$(#usegeo).val(off).trigger(change);$.mobile.changePage( "dialogs/geolocation_error.html", {transition: "pop",reverse: false,role: dialog});}Enough, already! Let’s see this thing in action. It won’t take much to hook this thing upto some search code and sample data.Try it out!Head to the Find Events page in your mobile browser of choice and hit theUse My Location switch.2Copy some needed files from the extras/events directory.Copy event_search.inc and event_list.inc into the chapter7/inc directory. Copy events.phpinto the chapter7 directory.1Test Drive We just blew through some gnarly JavaScript.We admit, that was pretty intense. And there’s some codewe didn’t explain in depth. But this isn’t Head First JavaScript,and we didn’t want to distract you from the main tasks athand: winning the battle with appCache and taking advantage of PhoneGap’smediaCapture API (even for browsers that don’t support it yet).

you are here 4 309mobile apps in the real worldNothing foundHa, ha. Sorry about that. Unless you’re lucky enough to be inthe Portland, Oregon, metro area, you probably got this resulton your first location-based search:That’s because all of the sample data is local, and the searchradius is set to 25 miles. How’s about you add some of yourown fake events to get this thing to deliver some results?Add a few events in the sample data that are in your neck of the woods. Find the event_list.inc filein chapter7/inc/. Inside is a big PHP array representing fake data for events. Add a few of your ownelements to this array, using an address and lat/long pairs that are within 25 miles of you.If you feel particularly uncomfortable with PHP, you could try just updating the address andlat/long of a few existing entries. The latitude, longitude, and state are what is used by thesearch script to find matches.Use this tool to get a lat/longpair real quick for any address:http://itouchmap.com/latlong.html.Unless you’re near Portland,youll get this result on yourfirst try.

310 Chapter 7events geolocated just for youExtra-super extra credit: Can you think of howyou would go about adding a range input to allowusers to determine the search radius? Whenshould it show up? If you can figure out how toadd an input with a name of radius, the backendsearch script is already configured to use it!This is looking great, guys! This is whatI had in mind when I first envisioned amobile web app for the Tartanator.Nice! We’ve successfully integratedseveral of the features that makea mobile web app feel super:progressive enhancement, offlinemode, and location awareness.

you are here 4 311mobile apps in the real world Web apps that feel natural and comfortable on mobiledevices often share certain characteristics like well-considered progressive enhancement, a goodoffline mode, and location-aware features. Starting with a baseline is a great way to reach asmany users as possible, and thoughtful progressiveenhancement for more powerful mobile browsers canmake things really shine. Crafting a relevant offline experience is important:mobile devices can’t be expected to have analways‑available data connection. We can take advantage of the appCache feature inbrowsers by creating a cache manifest file to instructthe browser which resources to cache and makeavailable offline. The construction of cache manifests is straightforwardon the surface, but there are a number of gotchas thatyou have to carefully consider. In our cache manifest file, we can indicate whichresources should be downloaded and cached for offlineuse (in the CACHE section) as well as those thatshould be requested afresh when an Internet connectionis available (in the NETWORK section). Geolocation in the browser is supported widelyamong modern smartphones. Many implementthe W3C’s Geolocation API, which exposes thenavigator.geolocation object to JavaScript. Similarly to how we enhanced the tartan-creation formfor supporting browsers, we also enhanced the FindEvents form to integrate geolocation, when it’s available. Certain mobile browsers, especially on slightly oldersmartphones, have implementations of geolocationthat are not W3C-compliant. To manage theseidiosyncracies, we used a third-party geolocation librarycalled geo-location-javascript. The geo-location-javascript library emulates theW3C API, requiring minimal changes to our original,W3C‑specific JavaScript code.Looking good in variousmobile browsersThis ones an Android.

this is a new chapter 313Ack. Barbed wire.Boy, the grouchy old neighbor’sreally kicked it up a gear this yearto stop me from getting the applesin his yard. What I wouldn’t do fora bridge right now...build hybrid mobile apps with PhoneGap8Tartan Hunt: Going nativeSometimes you’ve got to go native. It might be because you needaccess to something not available in mobile browsers (yet). Or maybe your client simplymust have an app in the App Store. We look forward to that shiny future when we haveaccess to everything we want in the browser, and mobile web apps share that sparklyallure native apps enjoy. Until then, we have the option of hybrid development—wecontinue writing our code using web standards, and use a library to bridge the gapsbetween our code and the device’s native capabilities. Cross-platform native appsbuilt from web technologies? Not such a bad compromise, eh?

314 Chapter 8tartan trippingPsst! Hey, guys, check this out. We justlanded a new sponsor for the big Scottishconvention coming to town. We’re going to run acontest, and I want to add it to the Tartanator!Scottish airline Loch Air has justagreed to sponsor an all-expenses-paidtrip for two to Edinburgh.As part of the upcoming Scottish CelebrationExpo in two months, Loch Air wants to run apromotional contest along with Tartans Unlimited,Ewan’s organization.Opportunity knocks again

you are here 4 315build hybrid mobile apps with PhoneGapI was thinking we could have a sort ofscavenger hunt. Contestants have to takephotos of tartan swatches they find at thebooths of conference sponsors.The Tartan Hunt contest will send attendeesto seek out tartans hidden at the booths ofcertain key sponsors.Players are challenged to find and take a photo of each listedtartan with their devices’ cameras; found tartans are thenchecked off the list of hidden tartans. Once a contestant hasfound all of the tartans, he or she can show the completed listand be entered to win the trip.Sounds like aperfect additionto the Tartanator!Unfortunately, there’s a problem.Access to the camera—and some otherdevice features like audio recording,filesystem operations, network status, andcontact data—isn’t available for the mostpart in mobile browsers.

316 Chapter 8hybrid applicationsUm. Photos. We don’t have access tothe device’s camera from mobile browsers.What are we going to do? Do we have togo native?Frank: We obviously don’t have the time or budget to rewritethe Tartanator as a native app for a bunch of platforms andalso add the new features Ewan wants.Jim: Does that mean we have to walk away from this work?That would be too bad.Joe: I wonder if there’s a compromise here somewhere. Wemight consider proposing a hybrid application.Jim: What is that?Joe: A hybrid application is a native application written with webtechnologies. Because it’s native, we can get at device capabilitieslike the camera, but the code itself is written with standard webstuff, so we can share the code across several platforms.Frank: But if it’s web-based, and those features aren’tavailable in the browser, how does that work?Joe: There are several frameworks and platforms that providebridges between web apps and native code. They take our webapp, chew on it a bit, and then spit out packaged apps—nativeones—for various platforms. They take care of the various bitsand bobs for us so we can just use the web standards we know.Jim: Should we convert the Tartanator to one of these hybridapps, then?Joe: I don’t think we have the time to wrap the entire appnatively and test it effectively. Given the timeline, what do youthink about suggesting that we create a native app just for thecontest?Frank: I kind of like that idea. And we don’t have to riskmaking hurried changes to the Tartanator web app. It has a bitof cachet—attendees show up and can download a special appjust for the event and the contest. Joe, if you think we can getthe hybrid app thing to work on several platforms, let’s float theidea with Ewan.Many devicecapabilities, likethe camera, arenot accessible frommobile browsers.This is slowly changing for thebetter, but there are still anumber of things we can’t get atfrom the browser.

you are here 4 317build hybrid mobile apps with PhoneGapHybrid AppBridgeHow do hybrid apps work?You write your code using standard web technologies like HTML5,CSS, and JavaScript—the same way websites have always been built.A framework or platform then acts as a bridge, providing a commonAPI for you to use to access features natively on the various deviceplatforms. It bridges the gap between your JavaScript and the device’snative code (for each platform it supports) and produces apps forvarious platforms.Standard web technologiesand resources…like compass, camera,contacts, audio recording,filesystem…The framework bridgesthe gap between webcode and the target OS’snative capabilities……and creates apps forvarious OSes.

318 Chapter 8build some bridgesPhoneGap is an open source HTML5 platform that allows you to create nativeapps for several mobile operating systems using the hybrid approach that we’vebeen talking about. You write your code like you’re used to, using HTML, CSS,and JavaScript. PhoneGap provides the bridge between that and native code viaa consistent, cross-platform JavaScript API.PhoneGap was developed by Vancouver-based firm Nitobi, which was acquiredby Adobe in October 2011. But don’t worry: Adobe has already taken steps tomake sure PhoneGap remains open source by giving the rights to PhoneGapto the nonprofit Apache Software Foundation. The newly minted ApacheCordova project will make sure that the PhoneGap codebase stays open sourcegoing forward.PhoneGap BuildPhoneGap Build is a web-based service that lets you compile in the cloud forseveral platforms at once. It takes a bit of the drudgery out of the build processby allowing you to skip installing at least some of the SDKs, plug-ins, IDEs, andwhatnot for each platform you want to support.Whereas with standard PhoneGap development, you’d do your own compilingand building, with PhoneGap Build you upload a zip file (or pull from a coderepository) and it does the rest.Ewan has agreed to the Tartan Huntcontest companion app idea. That’s cool,but we have an incredibly tight timeline.Where do we start?We’re going to show you how tobuild a hybrid Android app usingPhoneGap Build.If you don’t have an Android device, notto worry. We’ll show you how to build andinstall the app for a real-life device and foremulated virtual devices.Bridge the web-native gap with PhoneGapPhoneGap supportsup to seven platforms,but in this chapterwe’re going to usePhoneGap Build, whichsupports Apple iOS,Android, BlackBerry,WebOS, and Symbian.

you are here 4 319build hybrid mobile apps with PhoneGapWe chose Android as our example platform fora few reasons.For one thing, it is a popular platform (duh). But, also, buildingand deploying iOS apps onto devices requires membershipin the iOS Developer program ($99/year). We didn’t want toassume you’d fork that over.Android also has a freely available SDK that supportsemulating many virtual devices across different versions ofthe Android OS. And the Android SDK runs on severalplatforms. With Xcode, the development toolset needed foriOS development, you’re out of luck if you don’t have a Mac.How come we’re singling outAndroid for this project? Whatabout iOS and other platforms?Is your development environmentready to go? JavaScript ahead.You don’t have to be a JavaScript geniusto make it through this chapter, but there’sno getting around the fact that today’sweb app development involves JavaScript.To communicate with native functionality such as thecamera APIs using PhoneGap, we need to use aclient-side technology—and JavaScript is obviouslythe right guy for this job.If you haven’t done it yet, hold everything and visitAppendix iv. You need to have the right stuff installedand an understanding of how to install and uninstallapps on virtual and real devices before moving on tothe next parts of the chapter.

320 Chapter 8hybridization questionsQ:What other tools, products, or services are there forbuilding hybrid apps?A:Two of the best-known hybrid development alternatives areAppcelerator Titanium and the forthcoming Sencha Touch 2 product.Q:What platforms are supported by PhoneGap?A:PhoneGap presently supports Android, Bada, BlackBerry,iOS, Symbian, WebOS, and Windows Phone 7. Seehttp://phonegap.com/about/features for a list of which of its featuresare supported on which versions of which platforms.Q:Does PhoneGap Build support the same platforms asPhoneGap?A:Not quite. At the time of this writing, it does not supportWindows Phone 7 or Bada.Q:Is PhoneGap free?A:Yes. PhoneGap—or, as it is known going forward, ApacheCordova—is open source and free.Q:What about PhoneGap Build? Is it free, too?A:It depends. PhoneGap Build offers tiered levels of service. Itsfree variant allows developers to have one private app and as manypublic apps as they’d like. We’ll be using this free service to build theTartan Hunt app. PhoneGap Build’s other levels of service increasethe number of private apps and project collaborators.Q:Why did I have to install the Android SDK?A:We won’t be compiling or building the Tartan Hunt App—PhoneGap Build will do that for us—but we still need to be able toinstall it and test it on an emulator, a device (if you have an Androiddevice), or both. To do that, we need some of the tools provided bythe SDK.We don’t, however, need to install the Eclipse IDE, which we’d likelyneed to do if we were developing and building the code ourselves. Soat least we saved that step!Q:Why is it that some things aren’t accessible in the webbrowser in the first place?A:There are several reasons that you can’t do anything andeverything from the browser on mobile devices.Security is a considerable concern. Giving the browser access tothings like the filesystem or the user’s contact list is something thathas to be done carefully, with a lot of consideration about how tokeep things properly sandboxed. Doing these things right takes time.In addition, some of the proposed standards for these features arenew or incomplete, or have multiple variants vying for adoption. Asthese things get ironed out, expect to see some bumps along the waywith conflicting or inconsistent support in browsers.But here’s to a standardized, device-API-rich future! Let’s try to enjoythe ride!If you have a device that is not Android but is one of PhoneGap Build’s supportedplatforms, or if you have an Apple Developer Account, we encourage you to trybuilding and testing the examples in this chapter on your platform.Our test kitchen has run the Tartan Hunt app successfully on various flavors ofAndroid and iOS.

you are here 4 321build hybrid mobile apps with PhoneGapDo this!Get on over tohttps://build.phonegap.com andcreate an account. It’s free and onlytakes a moment.Roger. PhoneGap Buildaccount set up, Android SDKready. But you know, it’d be greatto know what exactly it is we’rebuilding.Get acquainted with PhoneGap Build

322 Chapter 8app tappingHow will the app work?The landing page of our app will display contest instructions anda list of tartans to find. Tapping on an item in the list goes to adisplay with more information about the vendor at whose booththe tartan can be found.We used a collapsible elementso that the instructions can behidden. You do this in jQueryMobile by using a data-roleattribute of “collapsible." See index.html in thechapter8 folder ifyoure curious aboutthe markup for this.Landing screenTartan and vendordetail screentap

you are here 4 323build hybrid mobile apps with PhoneGapSet up and configure a PhoneGap Build project. Zipup the current HTML, CSS, and images; build theapp; and install it on an Android device or emulator.Add the ability for players to mark which tartansthey’ve spotted.Add the ability for players to save photos of thetartans they’ve spotted.How we’ll get from here to thereIn our completed app, clicking the “I found it!”button will launch the device’s camera, and theplayer can take a snapshot of the discoveredtartan. The photo is displayed on the detailpage and marked off as “found” in the list onthe landing page.Keep track of discovered tartansWe already have the basic HTML layout, CSS,and images. Now we need to make them dosomething and build a native Android appusing PhoneGap Build.tap

324 Chapter 8app anatomyAnatomy of the Tartan Hunt projectindex.htmlstyleimagesscriptsextraschapter8Stuff we’llneed laterWe’re using jQuery Mobile again for this project, so theoverall look will be generally consistent with the Tartanator.We’re already organized for PhoneGap BuildThe structure of our starting point is now almost ready todrop into PhoneGap Build.PhoneGap Build projects have a structure based on theW3C web widget specification. Web widgets areencapsulated web apps that are meant as standalone clientapplications. In their most basic form, they consist of atleast one start file (in our case, index.html) and a configurationfile (in XML). You can add any number of files that yourapp will need to the package—things like images and CSSand JavaScript and whatnot.We’re already almost there. But we need to create aconfiguration file to give PhoneGap Build some neededdetails about our app.PhoneGap Build will look for a filein our project called config.xml.Let’s go build that now!almostWanna read the spec?Here it is:www.w3.org/TR/widgets/.<div data-role="content"><div data-role="collapsible">...</div><ul id="vendors"><li><ul class="details"><li>...</li><li>...</li>...</ul></li><li><ul class="details"><li>...</li><li>...</li>...</ul></li>...</ul></div>Here’s the simplified structure of the content <div> in index.html.ul#vendors has oneentry (<li>) pertartan to find.Each tartan <li> elementhas a nested list (ul.details)with further info aboutthe vendor and the “Ifound it!" button.index.htmlThe structure ofour content is a<ul> with a bunch ofnested <ul>s.

you are here 4 325build hybrid mobile apps with PhoneGapLet’s make our first PhoneGap Build app. First, we need a configuration file.Create a file called config.xml in the chapter8 directory. Use the templatebelow to complete the file’s contents.<?xml version="1.0" encoding="UTF-8"?><widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "" version = "1.0.0"><name></name><description></description><author href="" email="">YOUR NAME HERE</author><icon src="images/touch-icon-iphone4.png" height="114" width="114" /></widget>config.xmlRemember that a PhoneGap Build project is either built from a zip file orpulled from a code repository. We’re going to take the zip file route.Zip up the entire contents of the chapter8 directory. It doesn’t matter whatthe resulting file is called, as long as it is a zip archive with a .zip extension.Let’s use com.hfmw.tartanhunt as our app’s ID.Give the app a human-readablename and description.Your website and email address.You can use http://hf-mw.comif you don’t have your own site.Let’s add icons! These show up on theuser’s home screen. Weve added the firstone for you. Find the rest in the imagesdirectory and add them as well.

326 Chapter 8exercise solution<?xml version="1.0" encoding="UTF-8"?><widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.hfmw.tartanhunt" version = "1.0.0"><name>Tartan Hunt</name><description>A companion application for the Scottish Celebration:win a trip for 2 to Edinburgh from Loch Air!</description><author href="http://www.hf-mw.com" email="help@hf-mw.com"> Lyza Gardner and Jason Grigsby</author><icon src="images/touch-icon-iphone4.png" height="114" width="114" /><icon src="images/touch-icon-ipad.png" height="72" width="72" /><icon src="images/touch-icon-iphone.png" height="57" width="57" /><icon src="images/icon-48.png" height="48" width="48" /><icon src="images/icon-36.png" height="36" width="36" /></widget>config.xmlYour config.xml file should look something like this. But don’t lose your identity! We expect you touse your own name and stuff.PhoneGap Build will give the righticon to the right devices…

you are here 4 327build hybrid mobile apps with PhoneGapLog in to PhoneGap Build to see your dashboard.It’s time to create our app!Click the new appbutton to get started.Your settingsshould look like this.Choose the zip fileyou created from thechapter8 directory.https://build.phonegap.comClick Create to, uh,create your app.

328 Chapter 8grab an appDownload your appsDownload theAndroid APK.APK (AndroidApplication PackageFile) is the packagedapp, ready to install.OK, let’s get thisthing installed.After you upload the zip file, PhoneGap Build will queueyour app for building. Wait a minute or two and refresh thepage. You should see Download buttons for each platform forwhich the app was successfully built. We want to download theAndroid package (APK) file.When the buildprocess is done, you’llsee a Downloadbutton appear, ratherlike this.

you are here 4 329build hybrid mobile apps with PhoneGapChoose your adventureInstall on an emulatorTo prep for installing the app on a virtual device, startthe Android SDK. Go to Tools → Manage AVDsto bring up a list of your installed Android virtualdevices (AVDs). Launch a device for a recent-ishversion of Android. The emulated device needs to berunning when you install the app. Don’t try to installthe app until the emulator is all the way booted up.$ adb install TartanHunt.apk1157 KB/s (683431 bytes in 0.576s) pkg: /data/local/tmp/TartanHunt.apkSuccess$File Edit Window Help TartansOur APK file was namedTartanHunt.apk.You shouldsee somethingsimilar to this…adb install <the name of the package file>We recommend using anAVD for Android 2.3 or4.0+. Earlier versions havesomewhat finicky emulators,especially for the camerastuff we’ll do later. The first time you run the app, itmight take a little while—up toabout 30 seconds—to launch.You should now be able to see theTartan Hunt app in the applicationscreen of your device or emulator.Go ahead and launch the app!Ready, aim, fire!The process for installing the app is the same whether you’redeploying it virtually or to a real device. Open up a terminalwindow (Mac or Linux) or type cmd in the Start menu’s Searchbox (Windows) to get a command line, and cd to the directorywhere you downloaded the Android APK file.The command to install the app is:Install on a real deviceIf you have a real-life Android device, woot! Connectyour Android device to your computer’s USB port.Yep. That’s it.Don’t forget! Your (real) devicemust be attached or youremulator fully booted before yourun this command.We talk about this in moredetail in Appendix iv.OR

330 Chapter 8tartan hunting in the wildThe landing screenof the app in aversion 2.3.3 emulatedAndroid device.One of the nested listsubpages on an AndroidNexus One device.The Tartan Hunt icon isshowing up on this Android’sapplication screen.The landing page with theinstructions collapsed on anemulated Android device.The landing page on an iOSdevice—yep, if you have asigning key, it works!

you are here 4 331build hybrid mobile apps with PhoneGapInteresting. We only have one HTMLfile. But each tartan I touch seemsto take me to a separate page.Hey, what about BlackBerry?If you visit your dashboard on PhoneGap Build, you might seesomething like this:jQuery Mobile automatically converts nested <ul>sinto separate “pages.”It does this by converting each nested list to a <div> with a data-roleof page and using that <div> as the active “page” when the list itemsare clicked. There is still actually only one proper page, technically. You’llalso note that it uses the title of the parent list element (in our case, thevendor’s booth number) as the title of the nested list’s page.To make the PhoneGap Build Tartan Hunt app work onBlackBerry OS, you would need to alter jQuery Mobile’sicon filenames and update any reference to them in jQM’ssource code. While this wouldn’t take too long, it doesmean “hacking” jQuery Mobile’s core and introduces amaintenance burden. What do you think? Is it worth it?For purposes ofbrevity and sanity—and because Ewan hasexpressed diffidenceabout supporting theBlackBerry platform,were not going toaddress this here…Our BlackBerry status isFROWNY. :(We could rectifythe iOS situation byproviding a signingkey (if we had one).What’s with the frowny face for BlackBerry? Well, sadly, there’s a problemcurrently with the combination of PhoneGap Build, BlackBerry, and anyfilename with a hyphen in it. Several of the jQuery Mobile files we needhave hyphens in their filenames.

332 Chapter 8uninstall to reinstall You need to uninstall the app before you can reinstall it aftermaking changes.Each time you rebuild the app on PhoneGap Build and need to reinstall iton a device or emulator, you need to uninstall first. Run this command whenthe device is attached via USB, or when the emulator you want to uninstall itfrom is running.$ adb uninstall com.hfmw.tartanhuntSuccess$File Edit Window Help TartanHuntingLet’s add a splash screen so that users don’t have to look at a boring blankscreen while the app loads. Use the PhoneGap Build config.xml documentation athttps://build.phonegap.com/docs/config-xml to figure out how to do this. Find the two splash-screen images in chapter8/extras/images and move them to the chapter8/images folder.Update config.xml, zip up chapter8 again, rebuild the app on PhoneGap Build, andreinstall it to see the new splash screen take effect.Note that you use the app’spackage ID with the uninstallcommand (com.hfmw.tartanhuntor whatever you set the ID toin the config.xml file), not theAPK filename like we did withthe install command.Look for the “Updatecode” button to uploadyour updated zip file.The rebuild processstarts automaticallyafter upload.Answers on page 334.

you are here 4 333build hybrid mobile apps with PhoneGap Congratulations,you just built anative mobile app.Not so tricky, huh? You can use yourweb dev chops to build native stuffwithout too much hassle!Set up and configure a PhoneGap Build project. Zipup the current HTML, CSS, and images; build theapp; and install it on an Android device or emulator.Add the ability for players to mark whichtartans they’ve spotted.Add the ability for players to save photos of thetartans they’ve spotted.Store which tartans users have foundRock on. We have an app. Now let’smake it do what it’s supposed to do.We’ve broken down the functionalpieces into two steps.First, we want the app to be able to rememberwhich tartans the user has found. When playersclick the “I found it!” button, we need the app tokeep a record of that.First, let’s build theability to keep track ofwhich tartans users saythey have found.Then we’ll come back in abit and enhance the app toprompt users to take a photo.How am I going to get the app to“remember” which tartans the usersclaimed they saw? Are we going to haveto get down and dirty with native code?Fortunately, there’s a way todo this in JavaScript using anHTML5 web standard calledlocalStorage.It’s already supported in the defaultmobile browsers of all of the platformswe’re targeting with PhoneGap Build.It’s not supported byBlackBerry before OS 6,but were not supportingBlackBerry currently.Nice work, hotshot!

334 Chapter 8run to the localStore for found tartans<icon src="images/icon-48.png" height="48" width="48" /><icon src="images/icon-36.png" height="36" width="36" /><gap:splash src="images/splash2x.png" width="640" height="960" /><gap:splash src="images/splash.png" width="320" height="480" /></widget>config.xmlWho’s seen what? Store found tartansHere’s the end of the config.xml file, with splash screensadded. The two sizes allow us to have a bigger versionfor devices with higher resolution.We can store simple data on the client—in our case, which tartanshave been found—without much fuss using the localStorage API inthe browser.What makes localStorage so special?In the past, developers have often relied on HTTP cookies for datathat needs to be kept on the client. There are a few downsides tocookies, however.Every time the client makes a request to a server, the entire contentsof all cookies for that domain are transferred. Sometimes, a developermight want to store hefty amounts of data on the client—say, imagesor considerable amounts of configuration information—which isn’tfeasible with cookies (or, at least, isn’t performance-friendly!).Also, cookies are notoriously convoluted to work with using JavaScript.They’re just kinda clunky. Plus, there is some data we might want tostick on the client that the server just doesn’t need to know about (ormaybe, as in our case, there is no server).localStorage was designed specifically for the straightforward storageand retrieval of string data in key-value pairs on the client. It gives usmethods to set, get, and clear out data—and that’s about it. It’s notcomplicated.Our app has a splash screen now!This is what it looks like on aniPod Touch.

you are here 4 335build hybrid mobile apps with PhoneGapWhat can localStorage do for us?When a player clicks the “I found it!” button, we can add an entry tolocalStorage. And we check for data in localStorage when we want tosee which of the tartans the contestant has already found.Meet the getter and the setterThere are two methods on localStorage that provide most of itsutility. First, we set a value:localStorage.setItem(key, value);var storedValue = localStorage.getItem(key);A key to name the thingwere storingThe value we want tostoreBoth the key and thevalue must be strings.Then, later, we can ask for that value by using its key: The key for which we’d like thestored data, please!If a value is found for key,it is assigned to storedValue. If data for the key is not found,storedValue will be null.var isFound = localStorage.getItem(douglas);localStorage.setItem(douglas, true);In our case, when a user found, say, the Douglas tartan at a vendor’sbooth and indicated this by tapping the “I found it!” button, we could dosomething like:Then if we wanted to check if he’d already found the Douglas tartan, wecould ask localStorage:

336 Chapter 8magnetic commentary// Turn off jQM page transitions// Add a back button to the nested list subpages// Add a click handler for the "I found it!" buttons// Check for localStorage support in the browser// Call the initDevice function when the DOM is ready// Click handler for "I found it" button// Get the ID of the clicked button// Store that this tartan was found// Create a button-styled <a> element// Add a click handler for the reset button// Clear all entries from localStorage// Get the entry from localStorage// Insert the reset button into the page// Update the display to show which tartans have been foundlocalStorage JavaScript MagnetsIt’s time to update scripts/app.js (our app’s main JS code) torecord found tartans. The updated app.js file is on the next page.Your job is to add the comment magnets above the lines of codethey refer to.You can only use each magnet once, but you might end up withsome left over!

you are here 4 337build hybrid mobile apps with PhoneGap(function() {$(document).bind("mobileinit", function() {$.extend($.mobile, { defaultPageTransition: none });$.mobile.page.prototype.options.addBackBtn = true;});var initDevice = function() {if (typeof(window.localStorage) == object) {$(.foundTartan).click(tartanFound);addResetButton();}};$(document).ready(initDevice);var tartanFound = function(event) {var tartanKey = $(event.currentTarget).attr(id);localStorage.setItem(tartanKey, true);};var addResetButton = function() {var $resetButton = $(<a></a>).attr(data-role,button).html(start Over!);$resetButton.click(function() {localStorage.clear();});$resetButton.appendTo($(#booths));};})(); app.js

338 Chapter 8comment magnets solution(function() {$(document).bind("mobileinit", function() {$.extend($.mobile, { defaultPageTransition: none });$.mobile.page.prototype.options.addBackBtn = true;});var initDevice = function() {if(typeof(window.localStorage) == object) {$(.foundTartan).click(tartanFound);addResetButton();}};$(document).ready(initDevice);var tartanFound = function(event) {var tartanKey = $(event.currentTarget).attr(id);localStorage.setItem(tartanKey, true);};var addResetButton = function() {var $resetButton = $(<a></a>).attr(data-role,button).html(start Over!);$resetButton.click(function() {localStorage.clear();});$resetButton.appendTo($(#booths));};})();// Turn off jQM page transitions// Add a back button to the nested list subpages// Add a click handler for the "I found it!" buttons// Check for localStorage support in the browser// Call the initDevice function when the DOM is ready// Click handler for "I found it" button// Get the ID of the clicked button// Store that this tartan was found// Create a button-styled <a> element// Add a click handler for the reset button// Clear all entries from localStorage// Insert the reset button into the pageapp.jsWere turning off thepage transitions becausethey are slow on someAndroid devices.You can see that were adding a button tolet the user reset and start the game over.Hey! We didn’t tell youabout the clear() methodyet—did you figure it out?It does what it soundslike: clears all keys andtheir associated valuesfrom localStorage.The value of ‘true is sort ofarbitrary. We just want tostore *something*.We only add the clickhandler for browsers thatsupport localStorage.Ditto with thereset button.localStorageJavaScriptMagnetsSolution

you are here 4 339build hybrid mobile apps with PhoneGapCheck out what a browser supportsWe talked a bit about client-side feature detection way back in Chapter2, and that’s what we’re doing again here inside of the initDevice function.By checking if window.localStorage is an object, we are detecting if thelocalStorage feature is supported by the browser.// Get the entry from localStorage// Update the display to// show which tartans// have been foundvar initDevice = function() { if (typeof(window.localStorage) == object) { $(.foundTartan).click(tartanFound); addResetButton(); }}We perform some client-sidefeature detection here tomake sure localStorage issupported before adding theclick handler and showing thereset button.initDevice is called on $(document).ready().Translation: it gets executed when the page’sDOM is done being initialized by jQuery.By only adding click handlers and the resetbutton if localStorage is supported, we arein effect setting a minimal bar for supportedbrowsers, Chapter 4 style. Can you think ofwhy this might be OK? Can you also thinkwhy it might not be in some cases?Client-side feature detection can be quite simple, like this example, but there arealso JavaScript libraries that provide detection for all sorts of features. Modernizr(http://modernizr.com) is a widely used example of such a tool.But wait…the story isn’t over yetThe leftover comment magnets give us a clue about what else we need to dohere. We’re storing found tartans, and providing a way to clear them all out, butthe interface doesn’t change. We need to write some code that updates thedisplay so players can see which tartans they’ve found. Turn the pageto get started.We also did feature detectionin Chapter 5 using WURFLdevice capability data. That’sserver-side feature detection.Our leftover magnets.We need to take careof these items!

340 Chapter 8the key to localStorage searches$(document).ready(initDevice);refreshTartans = function() {$(ul.details).each(function() {var myID = $(this).attr(id);var tartanKey = found- + myID;var foundValue = localStorage.getItem(tartanKey);var isFound = Boolean (foundValue);$(#vendor-+ myID).toggleClass(found, isFound);$([data-url*="+myID+"]).toggleClass(found,isFound);$(#+tartanKey).closest(li).toggle(!isFound);});$(ul).each(function() {if ($(this).data(listview)) {$(this).listview(refresh);}});};tartanFound = function (event) {If we don’t, anyaltered content won’tbe styled correctly.Use a function to show which tartans are foundSounds like we need another function in our JavaScript—one thatcan update the way the page looks depending on which tartans havebeen found. Let’s dive in again. We’re going to call our new functionrefreshTartans because it updates the appearance of the tartanlistings and the detail screens depending on which tartans have been found.Each of the nested lists—ul.details—in index.html containsinformation about a single vendor and tartan to be found. We can usethe id attribute of each of those lists to determine a key to look for inlocalStorage. If there is a value of any sort for that key, that tartan hasbeen found and we need to update the interface to reflect that.app.jsReady BakeJavaScriptThis is jQuery code. It means: iterate (loop) over each element thatmatches the CSS selector ul.details (<ul>s with a class of “details”).So, for each ul.details inthe document…Figure out the name ofthe key to look for inlocalStorage by getting theid attribute of this <ul>and prepending ‘found-1Check for that key inlocalStorage.e.g,. ‘found-douglasToggle the visibility andclasses on some elements toreflect whether they’vebeen found or not.Refresh the jQuery Mobilelistviews in the document.234What’s all thattoggle stuff?toggle and toggleClassare part of jQuery. Let’stake a closer look.Remember, jQuery Mobilebuilds on top of jQuery,so we have all of jQuery’smethods available to us.

you are here 4 341build hybrid mobile apps with PhoneGapAdd the completed magnets code and the refreshTartans functionto scripts/app.js. refreshTartans needs to be called on pageinitialization and any time localStorage is altered. See if you can figureout where in the code the three calls to refreshTartans need to go.var foundValue = localStorage.getItem(tartanKey);var isFound = Boolean (foundValue);$(#vendor-+ myID).toggleClass(found, isFound);$([data-url*="+myID+"]).toggleClass(found,isFound);$(#+tartanKey).closest(li).toggle(!isFound);Let’s look at that code chunk againRemember that localStorage.getItem(tartanKey)will eitherreturn the value stored for that key (in our case, the string true) ornull. We convert that to a Boolean value (true or false) so we canuse it with jQuery’s toggle and toggleClass methods.We need a real Boolean value(not just the string ‘true ornull) to use these methods.isFound is true ifany value exists inlocalStorage for thistartan; false otherwise.toggleClass will add the CSS class indicated (found) to the elements thatmatch the selector given if the isFound value is true (and remove the class ifit is false).Similarly, toggle will show the <li> element indicated if it’s passed aBoolean with a true value. We’re doing something a bit clever here and givingit the opposite of the current value of isFound (that’s what !isFound does).Why, you might ask? Well, we want to hide that <li> if the tartan’s been found(that is, isFound is true). That’s the <li> that contains the “I found it!”button. We don’t need it to show up anymore if the tartan has been found.Summary: Add the found classto two elements and hide the<li> containing the “I found it!"button if the tartan has beenfound. Remove the class andshow the button if not.The toggle and toggleClass methodstoggle and toggleClass are jQuery methods. toggletoggles the visibility of an element; toggleClass togglesthe application of CSS classes to an element.By selectively applying the ‘foundCSS class to certain elements usingtoggleClass, we can use styling toshow which tartans are found……and we can hide the “I found it!" buttonwhen it’s not needed using toggle.(No button here!)

342 Chapter 8refreshed tartansvar initDevice = function() {if (typeof(window.localStorage) == object) {$(.foundTartan).click(tartanFound);refreshTartans();addResetButton();}};var tartanFound = function(event) {var tartanKey = $(event.currentTarget).attr(id);localStorage.setItem(tartanKey, true);refreshTartans();};var addResetButton = function() {var $resetButton = $(<a></a>).attr(data-role,button).html(start Over!);$resetButton.click(function() {localStorage.clear();refreshTartans();});$resetButton.appendTo($(#booths));};Here are the three places refreshTartans needs to be called in app.js.When we initialize…Whenever a new tartan is found……And whenthe tartansare reset.Edit app.js to integrate the changes from the last several pages. Savethe file and preview Tartan Hunt’s index.html in a desktop web browser(this should work just fine). Try clicking on some tartans and their “Ifound it!” buttons. You should see found tartans and their detail pagesreceive some CSS style changes (things will turn green).If you’re having trouble, use the Web Inspector tool in Chrome orSafari, or the Error Console in Firefox, to review possible JavaScripterrors. If you’re really stuck, you can find a finished version of the file inchapter8/extras/scripts/app.localStorage.js.You’ll need to replace yourapp.js with this file if youwant to use it.Do this!Go ahead and zip up thecontents of the chapter8directory again and rebuild onPhoneGap Build. Install againon a device or emulator andtry it out!app.jsTest Drive

you are here 4 343build hybrid mobile apps with PhoneGapQ:Which browsers currently supportlocalStorage?A:The short answer is: most of them. But notOpera Mini. And if you’re still using Internet Explorerversion 7, you’re out of luck there.Q:Do the keys have to have certain names?A:Both keys and the values you assign to themhave to be strings. Beyond that, the sky’s the limit. Youcan call them whatever pleases you.Q:How much data can I store?A:The W3C localStorage Specification is sortof adorably vague about this. To quote: “A mostlyarbitrary limit of five megabytes per origin isrecommended. Implementation feedback is welcomeand will be used to update this suggestion in thefuture.”Most browsers provide between 2 and 5 MB. Somebrowsers, like Safari, prompt users to allocate morespace if the allotment is used up.Q:Can other sites or apps access mylocalStorage data?A:No. Part of the spec is concerned with securityand mandates certain things that prevent other origins(very rough translation: other sites) from accessing anylocalStorage data other than their own.Q:You said that you can only store strings inlocalStorage. But earlier you mentioned that youcan use localStorage to store images. How couldthat possibly work?A:Strings, yes. But what’s to stop us from storingrather large strings? Images can be stored as theirBASE64-encoded strings and used directly as the valueof <img> src attributes or as url() values in CSSbackground images. Browser support for data-URIs(that’s what this is called) is pretty decent, with the bigexception of Internet Explorer. Read more about it in thisarticle by Nicholas Zakas: http://bit.ly/sWe7HS.Q:Wait a minute! I was just looking at the codeagain and noticed were adding a back button onthe nested list pages. That doesn’t make sense forAndroids—most Android devices have hardwareback buttons already.A:Well spotted. The back button doesn’t just feelawkward for Android, it actually closes the PhoneGapBuild–generated app! That is not good. We’ll comeback to this in just a bit and fix it.Q:If localStorage is available in the browser tous, why are we using PhoneGap Build at all? Can’twe just make this a web app?A:Aha! Patience! We’re just about there. It’s time tointegrate the camera into Tartan Hunt.

Head first mobile web (brain friendly guides)

by Nguyen Cao Hung, Chuyên viên PTTK at EnGineer on Jun 07, 2013

Statistics

Views

Actions

0 Embeds 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

Head first mobile web (brain friendly guides) Document Transcript