www.it-ebooks.

info
www.it-ebooks.info
 www.it-ebooks.info
Advance Praise for Head First Mobile Web
“If you have been considering buying a book about mobile development that is cross‑browser and
cross‑vendor, you should stop right now and buy Head First Mobile Web. It’s written by amazingly smart
people [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 smoothly
goes from introductory topics to advanced ones, giving you all the needed information to create
exciting content for mobile.”
— Andrea Trasatti, leader of the DeviceAtlas project and cocreator of
the WURFL repository of wireless device capability information

“A pragmatic introduction to the chaotic world of mobile web development as it is today, with a
glimpse of how we can and should approach it for tomorrow. Head First Mobile Web successfully
presents practical techniques all readers can use immediately, while giving plenty of foundation and
resources for more experienced developers to build upon.”
— Stephen Hay, web designer, developer, speaker, and
cofounder of the Mobilism conference

“Hands‑on from the get‑go, Head First Mobile Web provides an excellent introduction to the challenges
and opportunities available when exploring the next chapter in web design.”
— Bryan and Stephanie Rieger, founders of yiibu.com
 www.it-ebooks.info
Praise for other Head First books
“Head First Object-Oriented Analysis and Design is a refreshing look at subject of OOAD. What sets this book
apart is its focus on learning. The authors have made the content of OOAD accessible [and] usable for
the 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 focus
on 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‑crafted
presentation of OO analysis and design. As I read the book, I felt like I was looking over the shoulder of
an 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 their
programming 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 can
learn from this book. Visual aids make things easier to remember, and the book is written in a very
accessible style—very different from most Java manuals.… Head First Java is a valuable book. I can
see the Head First books used in the classroom, whether in high schools or adult ed classes. And I will
definitely 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 including
core 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
 www.it-ebooks.info
Praise for other Head First books
“Another nice thing about Head First Java, Second Edition, is that it whets the appetite for more. With
later coverage of more advanced topics such as Swing and RMI, you just can’t wait to dive into those
APIs 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 and
threads—my own weak spot. In this case, I couldn’t help but crack up a little when the authors use
a 1950s telephone operator—yeah, you got it, that lady with a beehive hairdo that manually hooks in
patch lines—as an analogy for TCP/IP ports…you really should go to the bookstore and thumb through
Head First Java, Second Edition. Even if you already know Java, you may pick up a thing or two. And if
not, 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 of
reader exercises, you are asked to pretend to be the compiler and compile the code, or perhaps to piece
some code together by filling in the blanks or…you get the picture.… The first edition of this book was
one of our recommended titles for those new to Java and objects. This new edition doesn’t disappoint
and rightfully steps into the shoes of its predecessor. If you are one of those people who falls asleep with
a 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’s
really going on in the world of web design.… If you have not been baptized by fire in using something
as 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 designing
user‑friendly sites, from customer requirements to hand‑drawn storyboards to online sites that work
well. What sets this apart from other ‘how to build a website’ books is that it uses the latest research
in cognitive science and learning to provide a visual learning experience rich in images and designed
for how the brain works and learns best. The result is a powerful tribute to web design basics that any
general‑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 on
the more artistic side of the business. ”
— Claron Twitchell, UJUG
 www.it-ebooks.info

Other related books from O’Reilly

jQuery Cookbook
jQuery Pocket Reference
jQuery Mobile
JavaScript and jQuery: The Missing Manual

Other books in O’Reilly’s Head First series

Head First C#
Head First Java
Head First Object-Oriented Analysis and Design (OOA&D)
Head First HTML with CSS and XHTML
Head First Design Patterns
Head First Servlets and JSP
Head First EJB
Head First SQL
Head First Software Development
Head First JavaScript
Head First Physics
Head First Statistics
Head First Ajax
Head First Rails
Head First Algebra
Head First PHP & MySQL
Head First PMP
Head First Web Design
Head First Networking
Head First iPhone and iPad Development
Head First jQuery
Head First HTML5 Programming
 www.it-ebooks.info

Head First Mobile Web

Wouldn’t it be dreamy if there

were a book to help me learn how to
build mobile websites that was more
fun than going to the dentist? It’s
probably nothing but a fantasy…

Lyza Danger Gardner

Jason Grigsby

Beijing • Cambridge • Farnham • Kln • Sebastopol • Tokyo

 www.it-ebooks.info
Head First Mobile Web
by Lyza Danger Gardner and Jason Grigsby

Copyright © 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 editions
are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/
institutional sales department: (800) 998‑9938 or [email protected].

Series Creators: Kathy Sierra, Bert Bates

Editor: Courtney Nash
Design Editor: Louise Barr
Cover Designer: Karen Montgomery
Production Editor: Kristen Borg
Production Services: Rachel Monaghan
Indexer: Ginny Munroe
Page Viewers: Katie Byrd, Danny Boomer, the Future‑Friendly Helmet, and Tephra

Printing History: Katie Byrd Future Friendly Tephra

December 2011: First Edition.

Daddy, can you

play now?
Danny Boomer
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. The Head First series designations, aka /dev/cat
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 as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark
claim, 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 no
responsibility 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]
 www.it-ebooks.info

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 literate
independence inspired generations.
—Lyza

To my parents for buying that Commodore 64 so many years ago;

to my lovely wife, Dana, without whose support and understanding
this book wouldn’t have happened; and to Katie and Danny—yes,
Daddy can play now.
—Jason
 www.it-ebooks.info
the authors

Lyza

Jason

Lyza Danger Gardner (@lyzadanger) is a dev. She In 2000, Jason Grigsby got his first mobile phone.
has built, broken, and hacked web things since 1996. He became obsessed with how the world could be
Curiously, Lyza was actually born and raised in a better place if everyone had access to the world’s
Portland, Oregon, the town where everyone wants to information in their pockets. When his wife, Dana,
be but no one seems to be from. met him, he had covered the walls of his apartment
with crazy mobile dreams. To this day, he remains
Lyza started college early and cobbled together a
baffled that she married him.
motley education: a BA in Arts and Letters from
Portland State University, followed by a master’s Those mobile dreams hit the hard wall of reality—
program in computer science at the University of WAP was crap. So Jason went to work on the Web
Birmingham (UK). until 2007, when the iPhone made it clear the time
was right. He joined forces with the three smartest
Lyza has written a lot of web applications (server‑side
people he knew and started Cloud Four.
devs, represent!), defeated wily content management
systems, optimized mobile websites, pounded on Since cofounding Cloud Four, he has had the good
various APIs, and worried a lot about databases. fortune to work on many fantastic projects, including
Fascinated by the way mobile technology has changed the Obama iPhone App. He is founder and president
things, she now spends a lot of time thinking about the of Mobile Portland, a local nonprofit dedicated
future of the Web, mobile and otherwise. to promoting the mobile community in Portland,
Oregon.
Since cofounding Cloud Four, a Portland‑based mobile
web agency, in 2007, Lyza has voyaged further into the Jason is a sought‑after speaker and consultant on
deep, untrammeled reaches of Device Land, exploring mobile. If anything, he is more mobile obsessed now
the foibles and chaos of mobile browsers and the mobile than he was in 2000 (sorry, sweetheart!).
web. She has an odd set of anachronistic hobbies,
You can find him blogging at http://cloudfour.com;
and it has been said that she takes a fair number of
on his personal site, http://userfirstweb.com; and on
photographs. She owns a four‑letter .com domain. We’ll
Twitter as @grigs. Please say hello!
bet you can guess what it is and go visit her there.

viii
 www.it-ebooks.info
table of contents

Table of Contents (Summary)

Intro xxi
1 Getting Started on the Mobile Web: Responsive Web Design 1
2 Responsible Responsiveness: Mobile-first Responsive Web Design 43
3 A Separate Mobile Website: Facing less-than-awesome circumstances 91
4 Deciding Whom to Support: What devices should we support? 137
5 Device Databases and Classes: Get with the group 151
6 Build a Mobile Web App Using a Framework: The Tartanator 217
7 Mobile Web Apps in the Real World: Super mobile web apps 267
8 Build Hybrid Mobile Apps with PhoneGap: Tartan Hunt: Going native 313
9 How to Be Future Friendly: Make (some) sense of the chaos 357
i Leftovers: The top six things (we didn’t cover) 373
ii Set Up Your Web Server Environment: Gotta start somewhere 387
iii Install WURFL: Sniffing out devices 397
iv Install the Android SDK and Tools: Take care of the environment 403
Index 417

Table of Contents (the real thing)

Intro
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’t
stick. Your brain’s thinking, “Better leave room for more important things, like
which wild animals to avoid and whether setting this BlackBerry Bold on fire
is going to activate the sprinkler system.” So how do you trick your brain into
thinking that your life depends on knowing mobile web?

Who is this book for? xxii

We know what you’re thinking xxiii
And we know what your brain is thinking xxiii
Metacognition: thinking about thinking xxv
The technical review team xxx
Acknowledgments xxxi

ix
 www.it-ebooks.info
table of contents

getting started on the mobile web

1
Responsive Web Design
Hey there! Are you ready to jump into mobile
Mobile web development is a wildly exciting way of life. There’s glamour and
excitement, 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 called
Responsive Web Design (RWD). You’ll be able to adapt websites to look great on a
whole lot of mobile devices by building on the web skills you already have.

Get on the mobile bandwagon 2

Something odd happened on the way to the pub 4
index.html If mobile phone web browsers are so great… 5
What’s so different about the mobile web? 6
Responsive Web Design 10
Different CSS in different places 12
styles.css CSS media queries 13
The current structure of the Splendid Walrus site 15
Analyze the current CSS 16
What needs to change? 17
Identify the CSS that needs to change 18
Steps to creating the mobile‑specific CSS 19
What’s wrong with a fixed‑width layout, anyway? 26
How is fluid better? 27
The fluid formula 28
Continue your fluid conversion 29
Context switching 31
What’s wrong with this picture? 32
Fluid images and media 33
Remember to be responsible 36
That’s a responsive site! 40
Responsive design is also a state of mind 41

x
 www.it-ebooks.info
table of contents

responsible responsiveness

2
Mobile-first Responsive Web Design
That’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’s
still a desktop site in mobile clothing. If we want this site to be greased lightning on
mobile, we need to start with mobile first. We’ll begin by dissecting the current site
to find the desktop bones hiding in its mobile closet. We’ll clean house and start
fresh with progressive enhancement, building from the basic content all the way
to a desktop view. When we’re done, you’ll have a page that is optimized regardless
of the screen size.

Just when you thought it was time to celebrate… 44

Is there really a problem? How do we know? 45
Very small screens What to do when things aren’t blazing fast 47
(feature phones)
Progressive enhancement based on screen size and client features

Don’t let its looks fool you, that’s a BIG page 48

There’s gold in ’em HAR hills 49
Find the drags on page speed 51
Small screens Where did that Google Maps JavaScript come from? 53
(smartphones)
It looks mobile friendly, but it isn’t 55
Mobile‑first Responsive Web Design 56
What is progressive enhancement? 57
Fix the content floats 60
Medium screens
(tablets)
Mobile‑first media queries 61
Surprise! The page is broken in Internet Explorer 62
One src to rule them all 68
Zoom in on the viewport <meta> tag 72
The right to zoom? 73
Add the map back using JavaScript 74
Larger screens
(desktops and TVs)
Build a pseudo‑media query in JavaScript 76
Add the JavaScript to the On Tap Now page 77
These widgets aren’t responsive 79
Move iframe attributes to CSS equivalents 80
Remove attributes from the JavaScript 81
The map overlap is back 83
Let the content be your guide 84
Breakpoints to the rescue 87

xi
 www.it-ebooks.info
table of contents

a separate mobile website

3
Facing less-than-awesome circumstances
The 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-first
approach. Mmm…tasty. But what happens when a stinky dose of reality sets in? Like
legacy 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 92

How can agents get and share the info they need? 93
Send mobile users to a mobile‑optimized website 96
Sniff out mobile users 97
Getting to know user agents 98
User agents: spawn of Satan? 101
Straight talk: Most major sites have a separate mobile website 104
When what you really want to do is (re‑)direct 105
Take a peek at the script 106
How does the script work? 107
Make a mobile mockup 108
Special delivery…of complicating factors 110
Not all phones are smartphones…not by a sight 113
Let’s keep it basic: Meet XHTML‑MP 114
Why would we want to use that old thing? 115
Keep your nose clean with XHTML‑MP 116
By the way, scrolling sucks 119
One last curveball 119
Access keys in action 123
What went wrong? 124
Fix the errors 125
Mobile‑savvy CSS 127
Hmmm…something is missing 132
The button look is sorely missed! 133
Great success! 134

xii
 www.it-ebooks.info
table of contents

deciding whom to support

4
What devices should 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 you
decide? What about people using devices you can’t test on—are they left out in the
cold? Or is it possible to build your web pages in a way that will reach people on devices
you’ve never heard of? In this chapter, we’re going to mix a magic concoction of project
requirements and audience usage to help us figure out what devices we support
and what to do about those we don’t.

How do you know where to draw the line? 138

Step away from the keyboard for a second 139
Things you don’t support vs. those you can’t support 140
Ask questions about your project 142
Ingredients for your magic mobile potion 144
Draw from your cupboard of tools and data 145
How do I know my customers have the right stuff ? 150

Definition
of where
to draw
the line

xiii
 www.it-ebooks.info
table of contents

device databases and classes

5
Get with the group
Setting the bar for the devices we support doesn’t take care
of 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 do
we avoid only building (lame) content for the lowest common denominator? And how do
we organize all of this stuff so that we don’t lose our minds? In this chapter, we’ll enter
the 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 152

Mobile device data sources to the rescue 154
Meet WURFL 155
WURFL and its capabilities 156
WURFL: Clever API code 159
We can build an explore page, too 160
An explore page: Setting up our environment 161
A quick one‑two punch to improve our explore page 168
Put capabilities to work 170
Use WURFL to help differentiate content 170
Initialize the device and get the info ready 172
Is this thing mobile? 172
Make the page a bit smarter with WURFL 176
The panic button: For phones only 177
Device classes 181
Expanding a lucrative part of AcedIt!’s business 182
Evaluate the home page wearing mobile‑tinted glasses 183
Group requirements into multiple mobile flavors 184
Rounding out our device classes 185
Get acquainted with the matching function 191
What’s going on in that switch statement? 192
Use the matching function to test capabilities 193
Fill in the gaps in the device class tests 200
We need a bigger safety net 211
A stitch in time 212

xiv
 www.it-ebooks.info
table of contents

build a mobile web app using a framework

6
The Tartanator
“We want an app! Just a year or two ago, that hallmark cry generally meant
one thing: native code development and deployment for each platform you wanted
to support. But native isn’t the only game in town. These days, web-based apps for
mobile browsers have some street cred—especially now that hip cat HTML5 and
his sidekicks, CSS3 and JavaScript, are in the house. Let’s dip our toes into the
mobile web app world by taking a mobile framework—code tools designed to help
you get your job done quickly—for a spin!

HTML5…app…what do these words even mean? 219

Hmmm...it’s...nice, How “traditional” websites typically behave 220
but can you make
it feel more...like a How applike websites often behave 221
native app? The master plan for phase 1 of the Tartanator 224
Why use mobile web app frameworks? 225
Our choice for the Tartanator: jQuery Mobile 226
Build a basic page with jQuery Mobile 228
Mark up the rest of the page 229
The HTML5 data‑* attribute 231
Link to multiple pages with jQuery Mobile 234
Take the list from blah to better 241
Drop in the rest of the tartans 243
Filter and organize a list 244
Add a footer toolbar 249
Make the toolbar snazzy 250
Finalize the structure 251
Time to make that tartan‑building form 253
Translate tartan patterns to a form 255
Build an HTML5 form 256
It’s time to add some basic fields 257
Lists within lists let the users add colors 258
Color‑size ingredient pairs: The color select field 259
Color‑size field pairs: The size field 260
Link to the form 262

xv
 www.it-ebooks.info
table of contents

mobile web apps in the real world

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

It looks nice… 268

Mobile apps in the real world 270
Ready, set, enhance! 274
Make a better form 275
A widget to manage the list of colors and sizes 276
A peek under the hood 277
So, that’s the frontend enhancement… 278
…and now for the backend 280
The two sides of generate.php 281
One last thing! 282
Offline is important 284
A basic recipe to create a cache manifest 285
Dev tools to the rescue 286
Serve the manifest as the correct content‑type 287
Victory is (finally) ours 297
How geolocation works 298
How to ask W3C‑compliant browsers where they are 299
Start in on the Find Events page: The baseline 301
Let’s integrate geolocation 303
Nothing found 309

xvi
 www.it-ebooks.info
table of contents

build hybrid mobile apps with PhoneGap

8
Tartan Hunt: Going native
Sometimes you’ve got to go native. It might be because you need
access to something not available in mobile browsers (yet). Or maybe your client simply
must have an app in the App Store. We look forward to that shiny future when we have
access to everything we want in the browser, and mobile web apps share that sparkly
allure native apps enjoy. Until then, we have the option of hybrid development—we
continue writing our code using web standards, and use a library to bridge the gaps
between our code and the device’s native capabilities. Cross-platform native apps
built from web technologies? Not such a bad compromise, eh?

Opportunity knocks again 314

How do hybrid apps work? 317
Bridge the web‑native gap with PhoneGap 318
Hybrid App Get acquainted with PhoneGap Build 321
Bridge How will the app work? 322
Keep track of discovered tartans 323
Anatomy of the Tartan Hunt project 324
Download your apps 328
Choose your adventure 329
Who’s seen what? Store found tartans 334
What can localStorage do for us? 335
Check out what a browser supports 339
Use a function to show which tartans are found 340
The toggle and toggleClass methods 341
You found a tartan, eh? Prove it! 344
Rope in PhoneGap to take pictures 345
PhoneGap is almost ready for its close‑up 347
Now we’re ready for the mediaCapture API 348
How will we handle the success? 349
It always looks a bit different in real life 350
It’s just a bit anonymous 351
One last thing! 353
We nailed it! 354

xvii
 www.it-ebooks.info
table of contents

how to be future friendly

9
Make (some) sense of the chaos
Responsive Web Design. Device detection. Mobile web
apps. PhoneGap. Waitwhich 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. There
is 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? 358

Time to dispel our collective illusions of control 361
A future‑friendly manifesto 362
If you can’t be future proof, be future friendly 364
App today, web page tomorrow 365
It’s a long journey: Here are some guideposts 366
Mix up a batch of mobile goodness 369
Look toward the future 371

xviii
 www.it-ebooks.info
table of contents

leftovers

i
The top six things (we didn’t cover)
Ever feel like something’s missing We know what
you 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’t
fit into the rest of the book. At least, not if you want to be able to carry
this book around without a metallic case and caster wheels on the
bottom. So take a peek and see what you (still) might be missing out on.

#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 386

set up your web server environment

ii
Gotta start somewhere
You can’t spell “mobile web without the “web. There are no two
ways about it. You’re going to need a web server if you want to develop for the mobile
web. That goes for more than just completing the exercises in this book. You need
somewhere to put your web-hosted stuff, whether you use a third-party commercial
web hosting service, an enterprise-class data center, or your own computer. In this
appendix, we’ll walk you through the steps of setting up a local web server on your
computer and getting PHP going using free and open source software.

What we need from you 388

Only available locally 389
Windows and Linux: Install and configure XAMPP 390
Get going with XAMPP 391
Mac folks: It’s MAMP time 392
Make sure you dock at the right port 393
Access your web server 394
phpInfo, please! 396

xix
 www.it-ebooks.info
table of contents

install WURFL

iii
Sniffing out devices
The first step to solving device detection mysteries
is a bit of legwork. Any decent gumshoe knows we’ve got to
gather our clues and interrogate our witnesses. First, we need to seek
out the brains of the operation: the WURFL PHP API. Then we’ll go track
down the brawn: capability information for thousands of devices in a single
XML data file. But it’ll take a bit of coaxing to get the two to spill the whole
story, so we’ll tweak a bit of configuration and take some careful notes.

Who’s got the brains? 398

And who’s got the brawn? 399
Getting the two to work together 400
A bit of filesystem housekeeping 401
Take note! 402

install the Android SDK and tools

iv
Take care of the environment
To be the master of testing native Android apps, you need
to be environmentally aware. You’ll need to turn your computer into a nice
little ecosystem where you can herd Android apps to and from virtual (emulated) or
real devices. To make you the shepherd of your Android sheep, we’ll show you how to
download the Android software development kit (SDK), how to install some platform
tools, how to create some virtual devices, and how to install and uninstall apps.

Let’s download the Android SDK 404

Get the right tools for the job 405
Create a new virtual device 408
Find the right PATH 413

Index 417

xx
 www.it-ebooks.info
the intro

how to use this book

Intro
I can’t believe they
put that in a mobile
web book!

:
er the burning question
In this section, we antswthat in a Mobile Web book?”
“So why DID they pu

you are here 4 xxi

 www.it-ebooks.info
how to use this book

Who is this book for?

If you can answer “yes” to all of these:

1
It definitely helps if you’ve alre
Do you have previous web design and development
got some scripting chops, too. We’ady
not talking rocket science, but youre
experience?

Do you want to learn, understand, remember, and shouldn’t feel visceral panic if you
2 apply important mobile web concepts so that you can see a JavaScript snippet.
make your mobile web pages more interactive and
exciting?

3 Do you prefer stimulating dinner-party conversation

to dry, dull, academic lectures?

this book is for you.

Who should probably back away from this book?

If you can answer “yes” to any of these:

1 Are you completely new to web development?

2
Are you already developing mobile web apps or sites
and looking for a reference book on mobile web?

3 Are you afraid to try something different? Would you

rather have a root canal than endure the suggestion
that there might be more than one true way to build for
the Web? Do you believe that a technical book can’t
be serious if there’s a walrus-themed pub and an app
called the Tartanator in it?

this book is not for you.

[Note from marketing: this book is

for anyone with a credit card. Or
cash. Cash is nice, too. - Ed]

xxii intro
 www.it-ebooks.info
the intro

We know what you’re thinking

“How can this be a serious mobile web development book?”
“What’s with all the graphics?”
Your bra
“Can I actually learn it this way?” THIS is imin thinks
portant.

And we know what your brain is thinking

Your brain craves novelty. It’s always searching, scanning, waiting for something
unusual. It was built that way, and it helps you stay alive.
So what does your brain do with all the routine, ordinary, normal things
you encounter? Everything it can to stop them from interfering with the
brain’s real job—recording things that matter. It doesn’t bother saving
the boring things; they never make it past the “this is obviously not
important” filter.
How does your brain know what’s important? Suppose you’re out for
a day hike and a tiger jumps in front of you. What happens inside your
head and body?
Neurons fire. Emotions crank up. Chemicals surge.
Great. Only
And that’s how your brain knows… 450 more dull,
This must be important! Don’t forget it! dry, boring pages.
in thinks
But imagine you’re at home, or in a library. It’s a safe, warm, tiger‑free zone. Your bran’t worth
You’re studying. Getting ready for an exam. Or trying to learn some tough THIinS gis.
technical topic your boss thinks will take a week, 10 days at the most. sav
Just one problem. Your brain’s trying to do you a big favor. It’s trying to make
sure 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 snowboard
in shorts.
And there’s no simple way to tell your brain, “Hey brain, thank you
very much, but no matter how dull this book is, and how little I’m
registering on the emotional Richter scale right now, I really do want
you to keep this stuff around.”

you are here 4 xxiii

 www.it-ebooks.info
how to use this book

t” read er as a learner.
We think of a “Head Firs
and then make sure
me thi ng  First, you have to get it,
So what does it tak
e to lea rn so sed on the latest
t pu sh ing fac ts into your head. Ba
you don’t forget it.
It’s not ab ou hology, learning
, ne urob iol og y, an d educational psyc
e science
research in cognitiv ns your brain on.
n tex t on a pa ge . We know what tur
takes a lot more tha
ciples:
First lear ning prin
Some of the Head
Make it visual. Im
than morable
ages are far more me
mo re effective (up
learning much
words alone, and make
in recall
to 89% improvement
It web!
Watch out, mobile
and transfer studie s).
s mo re !
also makes thing Here we co me
understandable.
thin
Put the words wi
ap hic s they
or near the gr as
lea rne rs will be up to twice
on the bottom or on another page, and
relate to, rather than t.
ble ms related to the conten
likely to solve pro
rsonalized style.
nts
pe
In recent studies, stude
sa tio na l an d
Use a conver g tests if the content
spoke direct ly to
better on post-learnin ing a formal tone.
performed up to 40% tha n tak
firs t-p ers on , con versational style rather sly.
the reader, using a take yourself too seriou
d of lec tur ing . Use casual language. Don’t , or a lec ture?
Tell stories instea -party companion
pay mo re att ent ion to: a stimulating dinner
Which would you
re deeply. In other
ively flex your
mo
words, unless you act
er to th ink
Get the learn to be motivated, eng
aged, curious,
ch hap pe ns in your head. A reader has d for that,
neurons, nothing mu ate new knowledg An e.
ve pro ble ms , dra w conclusions, and gener tha t involve
and inspired to sol estions, and activit ies
ge s, exe rcis es, and thought-provok ing qu
you need challen
and multiple senses.
both sides of the brain
ion. We’ve all had the
he reader’s attent
Get—and keep—t ake past page one”
this, but I can’t stay aw
“I really want to learn s that are out of the ord
inary,
pays attention to thing
experience. Your brain a new , tou gh , technical
e, eye -ca tch ing , unexpected. Learning t.
interesting, str ang more quick ly if it’s no
e to be bo rin g. You r brain will learn much
topic doesn’t hav

ions. We now know

ember
Touch their emot
that your ability to rem
ten t. You rem ember what
ely de pe nd ent on its emotional con g
something is larg ing. No, we’re not talkin
ut. You rem em be r when you feel someth s like
you care abo dog. We’re talking em
otion
s about a boy and his
heart-wrenching storie of “I rul e!” tha t comes
ity, fun , “w hat the …?” , and the feeling
surprise, cur ios d, or
ody else thinks is har
ve a pu zzl e, lea rn something everyb
when you sol l than thou” Bob from
kno w som eth ing that “I’m more technica
realize you
Engineering doesn’t.

xxiv intro
 www.it-ebooks.info
the intro

Metacognition: thinking about thinking

If 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 how I wonder how I
you learn. can trick my brain
into remembering
Most of us did not take courses on metacognition or learning theory when we were this stuff...
growing 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 about
mobile web development. And you probably don’t want to spend a lot of time. And
since you’re going to build more sites and apps in the future, you need to remember
what you read. And for that, you’ve got to understand it. To get the most from this
book, or any book or learning experience, take responsibility for your brain. Your
brain on this content.
The trick is to get your brain to see the new material you’re learning as
Really 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 to
keep the new content from sticking.

So just how do you get your brain to think that mobile

web development is a hungry tiger?
There’s the slow, tedious way, or the faster, more effective way. The slow way is about
sheer repetition. You obviously know that you are able to learn and remember even the
dullest of topics if you keep pounding the same thing into your brain. With enough
repetition, your brain says, “This doesn’t feel important to him, but he keeps looking at
the 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 different
types 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. For
example, studies show that putting words within the pictures they describe (as opposed to
somewhere else in the page, like a caption or in the body text) causes your brain to try to
makes 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 worth
paying attention to, and possibly recording.
A conversational style helps because people tend to pay more attention when they
perceive that they’re in a conversation, since they’re expected to follow along and hold up
their 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, your
brain perceives it the same way you experience being lectured to while sitting in a roomful
of passive attendees. No need to stay awake.
But pictures and conversational style are just the beginning.

you are here 4 xxv

 www.it-ebooks.info
how to use this book

Here’s what WE did:

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s
concerned, a picture really is worth a thousand words. And when text and pictures work
Behavior (JavaScript)
together, we embedded the text in the pictures because your brain works more effectively
when the text is within the thing the text refers to, as opposed to in a caption or buried in
the text somewhere. Presentation (CSS)

We used redundancy, saying the same thing in different ways and with different media Structured content (HTML)

types, and multiple senses, to increase the chance that the content gets coded into more than
one area of your brain.
We used concepts and pictures in unexpected ways because your brain is tuned for
novelty, and we used pictures and ideas with at least some emotional content, because your
brain is tuned to pay attention to the biochemistry of emotions. That which causes you to
feel something is more likely to be remembered, even if that feeling is nothing more than a
little humor, surprise, or interest.
We used a personalized, conversational style, because your brain is tuned to pay more
attention when it believes you’re in a conversation than if it thinks you’re passively listening
to a presentation. Your brain does this even when you’re reading.
We included loads of activities, because your brain is tuned to learn and remember
more when you do things than when you read about things. And we made the exercises
challenging‑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 wants
to see an example. But regardless of your own learning preference, everyone benefits from
seeing the same content represented in multiple ways.
We include content for both sides of your brain, because the more of your brain
you engage, the more likely you are to learn and remember, and the longer you can stay
focused. Since working one side of the brain often means giving the other side a chance to
rest, 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 and
judgments.
We included challenges, with exercises, and by asking questions that don’t always have
a straight answer, because your brain is tuned to learn and remember when it has to work
at something. Think about it—you can’t get your body in shape just by watching people at
the gym. But we did our best to make sure that when you’re working hard, it’s on the right
things. That you’re not spending one extra dendrite processing a hard‑to‑understand
example, or parsing difficult, jargon‑laden, or overly terse text.
We used people. In stories, examples, pictures, etc., because, well, you’re a person. And
your brain pays more attention to people than it does to things.

xxvi intro
 www.it-ebooks.info
the intro

Here’s what YOU can do to bend

your brain into submission
So, we did our part. The rest is up to you. These tips are a
starting point; listen to your brain and figure out what works
for you and what doesn’t. Try new things.
Cut this out an
on your refrigerdatst
or.
ick it

1 Slow down. The more you understand, 6 Talk about it. Out loud.
the less you have to memorize. Speaking activates a different part of the brain.
Don’t just read. Stop and think. When the If you’re trying to understand something, or
book asks you a question, don’t just skip to the increase your chance of remembering it later, say
answer. Imagine that someone really is asking it out loud. Better still, try to explain it out loud
the question. The more deeply you force your to someone else. You’ll learn more quickly, and
brain to think, the better chance you have of you might uncover ideas you hadn’t known were
learning and remembering. there when you were reading about it.

2 Do the exercises. Write your own notes. 7 Listen to your brain.

We put them in, but if we did them for you, Pay attention to whether your brain is getting
that would be like having someone else do overloaded. If you find yourself starting to skim
your workouts for you. And don’t just look at the surface or forget what you just read, it’s time
the exercises. Use a pencil. There’s plenty of for a break. Once you go past a certain point, you
evidence that physical activity while learning won’t learn faster by trying to shove more in, and
can increase the learning. you might even hurt the process.

3 Read “There Are No Dumb Questions.”

That means all of them. They’re not optional 8 Feel something!
sidebars—they’re part of the core content! Your brain needs to know that this matters. Get
Don’t skip them. involved with the stories. Make up your own
captions for the photos. Groaning over a bad joke

4
is still better than feeling nothing at all.
Make this the last thing you read before
bed. Or at least the last challenging thing.
Part of the learning (especially the transfer to 9 Create something!
long‑term memory) happens after you put the Apply this to your daily work; use what you are
book down. Your brain needs time on its own, to learning to make decisions on your projects. Just
do more processing. If you put in something new do something to get some experience beyond the
during that processing time, some of what you exercises and activities in this book. All you need
just learned will be lost. is a pencil and a problem to solve…a problem that

5
might benefit from using the tools and techniques
Drink water. Lots of it. you’re studying for the exam.
Your brain works best in a nice bath of fluid.
Dehydration (which can happen before you ever
feel thirsty) decreases cognitive function.

you are here 4 xxvii

 www.it-ebooks.info
how to use this book

Read me
This is a learning experience, not a reference book. We deliberately stripped out everything
that might get in the way of learning whatever it is we’re working on at that point in the
book. And the first time through, you need to begin at the beginning, because the book
makes 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 or
HTML 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 graduate
computer science project using PHP, but you’ll see examples using both languages
throughout the book. If the merest notion of a for loop makes you hyperventilate (or if
you have no idea what we’re talking about), you might consider tracking down a copy of
Head 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 expanding
your existing web development skills. There are too many things to know about the Web for
any one person to memorize, whether it’s a detail of JavaScript syntax or the specifics of a
browser’s support for an HTML5 element attribute. Don’t be too hard on yourself. Part of
the toolset of a good web dev is keeping your Google chops sharp and knowing when and
how 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 to
start you on your journey, but it’s up to you to keep up your steam. Seek out the active
mobile web community online, read blogs, join mailing lists that are up your alley, and
attend 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 the
book. Some of them are to help with memory, some are for understanding, and some
will help you apply what you’ve learned. Don’t skip the exercises. They’re good for
giving your brain a chance to think about the ideas and terms you’ve been learning in a
different 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 we
want you to finish the book remembering what you’ve learned. Most reference books don’t
have retention and recall as a goal, but this book is about learning, so you’ll see some of the
same concepts come up more than once.

xxviii intro
 www.it-ebooks.info
the intro

The Brain Power exercises don’t have answers.

For some of them, there is no right answer, and for others, part of the learning
experience of the exercise is for you to decide if and when your answers are right. In
some of the Brain Power exercises, you will find hints to point you in the right direction.

Software requirements
As for developing any website, you need a text editor, a browser, a web server (it can be
locally 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 (but
you can use Notepad if you have to). The text editors we recommend for Mac are
TextWrangler (or its big brother, BBEdit) or TextMate. We also like Coda, a more
web‑focused tool.
If you’re on a Linux system, you’ve got plenty of text editors built in, and we trust you
don’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 to
Appendix ii, which details installing a web server with PHP. We recommend doing that
now. No, seriously, head there now, follow the instructions, and come back to this page
when you’re done.
For Chapter 5, you’ll need to install the WURFL (Wireless Universal Resource FiLe) API
and data. And for Chapter 8, you’ll need the Android SDK and some related tools. You
guessed it: there are appendixes for those tasks, too.
You’ll also need a browser—no, strike that—as many browsers as
possible for testing. And the more mobile devices with browsers you
have on hand, the better (don’t panic; there are many emulators you can use
if you don’t have hardware). The code and
For developing and testing on the desktop, we highly recommend Google’s resources for the
Chrome browser, which has versions for Mac, Windows, and Linux.
Learning how to use the JavaScript console in Google’s Chrome Dev Tools examples in the
is well worth the time. This is homework you need to do on your own. chapters are all
Last of all, you’ll need to get the code and resources for the examples in the
chapters. It’s all available at http://hf-mw.com.
available at
http://hf-mw.com.
The hf-mw.com site has the starting
point of code for all the chapters.
Head on over there and get downloading.

you are here 4 xxix

 www.it-ebooks.info
the review team

The technical review team Brad Frost Stephen Hay

Bryan Rieger

Trevor Farlow
Andrea Trasatti
Ethan Marcotte
Stephanie Rieger
Trevor Farlow is an amateur baker, recreational soccer player, Bryan Rieger is a designer and reluctant developer with a
and part‑time animal shelter volunteer. When he’s not walking background in theatre design and classical animation. Bryan has
dogs, scoring goals, or perfecting his New York–style cheesecake, worked across various media including print, broadcast, web,
he can be found learning the art of product ownership in a lean, and mobile; and with clients such as Apple, Microsoft, Nokia,
mean, agile development team at Clearwater Analytics, LLC. and the Symbian Foundation. A passionate storyteller and
incessant tinkerer, Bryan can be found crafting a diverse range
Brad Frost is a mobile web strategist and frontend developer
of experiences at Yiibu—a wee design consultancy based in
at R/GA in New York City, where he works with large brands
Edinburgh, Scotland.
on mobile‑related projects. He runs a resource site called Mobile
Web Best Practices (http://mobilewebbestpractices.com) aimed at Stephanie Rieger is a designer, writer, and closet
helping people create great mobile web experiences. anthropologist with a passion for the many ways people interact
with technology. Stephanie has been designing for mobile since
Stephen Hay has been building websites for more than 16
2004 and now focuses primarily on web strategy, frontend
years. Aside from his client work, which focuses increasingly on
design, and optimization for multiple screens and capabilities. A
multiplatform design and development, he speaks at industry
compulsive tester and researcher, Stephanie is always keen to
events and has written for publications such as A List Apart and
discover and share insights on mobile usage, user behavior, and
.net Magazine. He also co‑organizes Mobilism, a highly respected
mobility trends from around the world.
mobile web design and development conference.
Andrea Trasatti started creating WAP content in 1999 on the
Ethan Marcotte is an independent designer/developer who
Nokia 7110, which in Europe was considered groundbreaking at
is passionate about beautiful design, elegant code, and the
the time. Andrea has led both WURFL and DeviceAtlas from
intersection of the two. Over the years, his clientele has included
their earliest days to success, and during those years built vast
New York Magazine, the Sundance Film Festival, the Boston Globe,
experience in device detection and content adaptation. You can
and the W3C. Ethan coined the term Responsive Web Design to
find Andrea on Twitter as @AndreaTrasatti, regularly talking
describe a new way of designing for the ever‑changing Web and,
about mobile web and new trends in creating and managing
if given the chance, will natter on excitedly about it—he even
content for mobile.
went so far as to write a book on the topic.

xxx intro
 www.it-ebooks.info
the intro

Acknowledgments
Our editor:
Thanks (and congratulations!) to Courtney Nash, who pushed us to create
the best book we possibly could. She endured a huge raft of emails, questions,
ramblings, and occasional crankiness. She stuck with us throughout this book
and trusted us to trust our guts. And thanks to Brian Sawyer for stepping
up at the end and taking us over the finish line.

The O’Reilly team: Courtney Nash

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 and
Rachel 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 and
championing us; Tim O’Reilly, for being the genuine, smart, and nice guy that he is; and
Sara Winge, for her graciousness and overall awesomeness.
Our thanks:
Jason and Lyza work with the smartest people ever at Cloud Four. Our epic thanks to
fellow 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 our
collective mobile web obsession, and they, more than anyone, championed and endured this
effort. Thanks a billion million zillion, you guys. Lou Barr
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 proud
and thankful to be part of this community.
Lyza’s friends and family:
Thanks to Bryan Christopher Fox (Other Dev), without whose coding chops, insight, support, and
all‑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‑term
disappearance into Book Land. Thanks to Autumn and Amye, who showed stunning tenacity in the
face of my constant unavailability. Thanks, Mike, always. And thanks to Dad, who always shows me
how 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.
Jason’s friends and family:
Thank you to my family for all of their support. Our parents, Jan, Carol, Mark, and Doanne, were
a 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 we
raised a baby and a preschooler and moved into a new house. I couldn’t have done it without you.

you are here 4 xxxi

 www.it-ebooks.info
how to use this book

Safari® Books Online

Safari® Books Online is an on‑demand digital library that lets you easily
search over 7,500 technology and creative reference books and videos to
find 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 available
for print, and get exclusive access to manuscripts in development and post feedback for the
authors. Copy and paste code samples, organize your favorites, download chapters, bookmark
key 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 digital
access to this book and others on similar topics from O’Reilly and other publishers, sign up for
free at http://my.safaribooksonline.com.

xxxii intro
 www.it-ebooks.info

1 getting started on the mobile web

Responsive Web Design

Dashing, exciting, fascinating,

and oh-so-popular...but am I
ready to take the plunge?

Hey there! Are you ready to jump into mobile

Mobile web development is a wildly exciting way of life. There’s glamour and
excitement, 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 called
Responsive Web Design (RWD). You’ll be able to adapt websites to look great on a
whole lot of mobile devices by building on the web skills you already have.

this is a new chapter 1

 www.it-ebooks.info
it’s a mobile world

Get on the mobile bandwagon

There’s a pretty good chance you own a mobile phone. We know that not
simply because you bought this book (smart move, by the way!), but because
it’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 used
everywhere, from farmers in Nigeria using their mobiles to find which
market has the best price for their crops, to half of Japan’s top 10 best‑selling
novels being consumed and written—yes, written—on mobile phones.
At the beginning of 2011, there were 5.2 billion phones being used by the
6.9 billion people on Earth. More people use mobile phones than
have working toilets or toothbrushes.

The time is now

So yeah, mobile is huge, but it’s been big for years. Why should you get on
the 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 the
iPhone, but Apple was the first to put them together in a way that made it
easy for people to understand and use.
Are you ready to get on
the mobile bandwagon?

2 Chapter 1
 www.it-ebooks.info
getting started

Everyone has iPhones. And

if they don’t, are they really
going to browse the Web?

The iPhone is fantastic, but people use a lot of

different 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 be
when you read this book. Three years ago, Android was a mere
blip on the radar. In 2011, it is a leading smartphone platform
worldwide.
Mobile technology changes quickly, but there are a few things we
feel confident about:

1 Every new phone has a web browser in it.

You can probably find a new phone that doesn’t have a web
browser in it, but you have to look pretty hard. Even the most
basic phones now come with decent browsers. Everyone wants the
Web on their phone.

2 Mobile web usage will exceed desktop web usage.

Soon the number of people accessing the Web via mobile phones
will surpass those who use a computer. Already, many people say
they use their phones more frequently than their PCs.

3 The 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 if
you want to write software for each, you have to start from scratch
each time.

Mobile web has its own challenges, but there is

no other technology that allows you to create
content and apps that reach every platform.

So 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!

you are here 4 3

 www.it-ebooks.info
meet the splendid walrus

Something odd happened on the

way to the pub
Mike is the proprietor of The Splendid Walrus, a pub with a
clever name and a cult‑like following of local beer enthusiasts.
Mike always has unusual beers on tap and highlights several
of them on his website.
Before he realized his lifelong dream of pub ownership, Mike
was a web developer. So he had no trouble putting together a
respectable website for The Splendid Walrus himself.

The Splendid Walrus

website is pretty
sweet—I used to do this
for a living, after all.

http://www.splendidwalrus.com

4 Chapter 1
 www.it-ebooks.info
getting started

If mobile phone web browsers are so great…

Mike built the Splendid Walrus website several years ago, when
mobile browsing was still rudimentary and uncommon. It was made
for—and tested in—desktop browsers like Firefox, Internet Explorer,
and Safari.
Lots of newer mobile browers have good reputations. They’re
increasingly sophisticated and powerful, and starting to feel like some
of their desktop counterparts.

…shouldn’t this just work?

Mike had a rude awakening when he looked at the Splendid Walrus
site on his iPhone 4. It didn’t look so hot on a friend’s Android
device, either.

Here’s how the Splendid Walrus

site looks on an iPhone 4… …and here’s how the site
looks on a Motorola
Backflip Android phone.

you are here 4 5

 www.it-ebooks.info
the brave new world of mobile web design

What’s so different about the mobile web?

My iPhone has the Safari web

browser on it. My site looks great
in desktop Safari, so why does it
look all messed up on my phone?

1 There are 86 billion different mobile web browsers.

OK, not quite that many. But when you’re developing for the
mobile web, sometimes it feels this way. Unlike the handful
of leading desktop browsers, there are hundreds of different
mobile browsers. Yikes. And just when you
think you’re on top
of all of them, a
2 Support for web technologies varies wildly. new one will pop up
On older mobile browsers (or even recent ones on less powerful in, like, Thailand.
devices), you can pretty much forget about reliable CSS or
JavaScript. Even the newest browsers lack support for some
things, support them in bewilderingly different ways, or have
weird bugs. It’s the Wild West out here, folks!

3 Mobile devices are smaller and slower.

Yeah, we know. Newer mobile devices are state‑of‑the‑art
pocket computers. But they still pale in comparison to desktop
(or laptop) computers in terms of processing power. Mobile
networks can be flaky and downright poky, and data transfer is
not necessarily free or unlimited. This means we’ll need to think
about putting our sweet but enormous, media‑rich, complex
sites on a performance‑savvy diet.

4 Mobile interfaces require us to rethink our sites.

Just because a mobile browser can render a desktop website
with few hiccups doesn’t mean it necessarily should. Screens are
smaller; 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. Squinting
at type designed to fit a desktop browser window can give your
users headaches and fury. You get the idea.

6 Chapter 1
 www.it-ebooks.info
getting started

Here’s how Mike’s iPhone 4 renders the Splendid Walrus website. It doesn’t look so
great. Can you spot the problem areas? Mark any problems you see.

1 2

3 4

you are here 4 7

 www.it-ebooks.info
exercise solution

Did you spot some of these problem areas?

1 1
The navigation links
are all tiny and too
small to read or click.
3 The three-column
layout feels tight on
3
this screen resolution,
and the text is hard
to read.
2

2 The embedded 4
YouTube video
4 There is a weird gap
doesn’t work.
on the right edge
of the screen.

This is confusing and embarrassing.

I want my customers with mobile
devices to see a nice site. I’m out
of my depth here. Can you help?

8 Chapter 1
 www.it-ebooks.info
getting started

Ugh! What a mess! We’re totally

going to have to start from scratch...

Frank: Hold on a minute. We know that Mike makes a big

deal out of using clean, semantic HTML markup and uses
CSS to control layout and styling as much as possible.
Jim: And? That’s great and professional, but how does it
help us make this better?
Frank: Well, let’s think about this a bit. When I look at the
CSS he’s using for the Splendid Walrus site, I see a lot of
widths and sizes defined to fit within a 960‑pixel box. It looks
like he’s designed the site on a 960‑pixel grid, with three
main columns.
Jim: …and most mobile devices have resolutions
considerably less than 960 pixels. Also, three columns seems
like a lot for a smaller screen.
Frank: So…I have to wonder…what if we could use different
CSS for mobile devices? Say, maybe, CSS designed to lay out in
320 pixels, which is the width of a lot of smartphone screens?
Jim Frank
And maybe reduce the number of columns?
Jim: Nice idea, Frank. But I don’t see how we could do that
without a lot of server‑side programming. I mean, how do we
get mobile devices to use completely different CSS?
Frank: You know how Jill just got back from the Awesome
Cool Mobile Web Camp conference and is all excited about
that 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 from
web developers and it sounds like it involves, at least in
part, applying different CSS for different situations, without
having to do heavy‑duty programming. Apparently it’s
especially useful for developing mobile websites. I can’t really
remember the details, but maybe we should check it out.

you are here 4 9

 www.it-ebooks.info
responsive web design

Responsive Web Design

Responsive Web Design (RWD) is a set of techniques
championed by web designer Ethan Marcotte. Sites designed
al article for
with this approach adapt their layouts according to the Read Ethan’s origouint RWD at
environment of the user’s browser, in large part by doing some A List Apart ab ePnj.
nifty things with CSS. http://bit.ly/nR
Depending on the current value of certain browser conditions
like window size, device orientation, or aspect ratio, we can

RWD is one of the simplest

apply different CSS in different circumstances. By rethinking the
way we do page layouts, we can make formerly one‑size‑fits‑all

and quickest ways to make

column and grid layouts flow more naturally across a continuum
of browser window sizes.

a website work handsomely

on a lot of devices—and you
can use the web skills you
already have.
The recipe for Responsive Web Design
There are three primary techniques for building a
responsively designed website:

We can apply different CSS rules

1 CSS3 media queries based on things like browser window
Evaluating certain aspects of the current browser width, aspect ratio, and orientation.
environment to determine which CSS to apply.

2 Fluid-grid layouts
Using relative CSS proportions instead of absolute
sizes for page layout elements. RWD uses percentages instead
of pixels as units for columns
and other layout elements.
3 Fluid images and media
Making our images and media scale to fit within
the size constraints of their containers by using
some CSS tricks.

Fluid images and media keep within the

bounds of their parent elements, scaling
proportionally with the rest of the layout.

10 Chapter 1
 www.it-ebooks.info
getting started

An example of a responsively designed site

index.html
We deliver the same
HTML and CSS to all
devices and browsers.

styles.css
A multicolumn, big
CSS media queries layout when there’s
determine which of plenty of room
the CSS to apply to
which environments.

Somewhat
simpler layout
as the window
width decreases

Streamlined, This is just one example of

single-column layout a responsive design approach.
for narrower displays.

you are here 4 11

 www.it-ebooks.info
selective css

Different CSS in different places

If you’ve been doing web development for some time (and are
CSS‑savvy), you might be friends with CSS media types already.
We can use @media rules to apply CSS selectively.
Media Types
Up Close
CSS media type declarations inside of a CSS file look like this:

Common (and useful) media types

include screen, print, and all.
@media screen { /* CSS Rules for screens! */ } There are other, less common media
types like aural, braille, and tv.

“screen” is a media type. The rules between the Curious? If you’re the kind of
braces will only apply when person who reads technical specs for
the content is rendered on fun or to satisfy curiosity, you can
a screen. see all of the media types defined
in CSS2 on the W3C’s site at
Another way to use media types to apply CSS selectively is from www.w3.org/TR/CSS2/media.html.
within a <link> in your HTML document.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

The rules in this external stylesheet will only be applied if

the content is rendered on a print device (that is, a printer). “print” is another media type.

Referencing the print media type like this is a common approach to

creating print stylesheets—that is, CSS styles that only get applied when
the content is printed.

aspect-ratio
Media types, meet media features
height
You have certain features—your age, your height—and so do media
types. And just like The Splendid Walrus might want to establish a rule screen
that requires the minimum age of patrons to be 21 before they apply width
orientation
alcohol, we might want to define certain CSS that we only apply to
browser window widths within a certain range. “screen” is a useful
We’re in luck! width, along with color and orientation, is one media type.
of the media features defined in CSS3 for all common media types.
So, again, media types have media features. A few of the “screen”
media type’s media features.
Media features on their own don’t get us very far. We need a way to ask
the browser about the states of the ones we care about and, well, do
something about it. That’s where CSS3 media queries come in. P.S. There are more. But these
are the most useful to us.

12 Chapter 1
 www.it-ebooks.info
getting started

CSS media queries

“width” is a media feature
“screen” media type, we meet again! we want to evaluate on the These CSS rules will only get
“screen” media type. applied if the media query
evaluates to TRUE.
@media screen and (min-width:480px) { /* CSS Rules */ }

“min-” is a media query prefix. Rather

intuitively, it means we want to query
about a minimum width. Unsurprisingly, there is CSS3 media queries are
also a “max-” prefix. logical expressions that
This means: are we presently rendering content on a screen,
AND is the window currently at least 480 pixels wide?
evaluate the current
Yes? OK! Apply these CSS rules. values of media features
in the user’s browser.
Another example:

@media print, screen and (monochrome) { }

If the media query
Logical “or” is represented by a “monochrome” is a media feature expression evaluates as
comma. Yep, it’s a bit confusing. of the “screen” media type. It
is either TRUE or FALSE. TRUE, the contained
Is this being rendered on a printer OR is it being rendered CSS is applied.
on a screen that is monochrome (black and white)?
Yes? Use these styles!

Translating CSS media queries: You try it! Match the media query and its meaning.

Apply the rules in this external

@media all and (orientation: landscape) {} stylesheet to color screens.

Apply these styles to

<link rel="stylesheet" type="text/css" black‑and‑white printers.
href="my.css" media="screen and (color)" />
Apply these rules to
color screens.
@media print and (monochrome) {}

Apply these styles to all

@media screen and (color) { } media types when in
landscape orientation.

you are here 4 13

 www.it-ebooks.info
how different?

Were you able to decipher the media queries?

Media type of “all,” you ask? Yep. This is what
we use if we want to look at the same media
feature across all media types
Apply the rules in this external
@media all and (orientation: landscape) {} stylesheet to color screens.
Apply these styles to
<link rel="stylesheet" type="text/css" black‑and‑white printers.
href="my.css" media="screen and (color)" />
Apply these rules to
color screens.
@media print and (monochrome) {}

Apply these styles to all

@media screen and (color) { } media types when in
landscape orientation.

OK. Now I can understand media

queries and maybe even write my own.
But what am I doing here? How do I write
the CSS for mobile devices?

CSS: How different is different?

We have a tool that lets us apply different CSS to different
situations. But now what?
Don’t panic. We do need to write some mobile‑friendly CSS, but
we’re not going to have to start from scratch. Nor are we going to
have to have totally different CSS for our mobile devices—we can
share a lot of what’s already there.

To generate our mobile-friendly layout, we’ll:

We’ll only write
Check out the current layout of splendidwalrus.com and
different CSS
analyze its structure.
for those layout
elements that need
Identify layout pieces that need to change to work better on to be different
mobile browsers. for mobile.
Generate mobile‑adapted CSS for those identified elements.

Organize our CSS and selectively apply the mobile and

desktop CSS using media queries.

14 Chapter 1
 www.it-ebooks.info
getting started

The current structure of the Splendid Walrus site

Take a peek at the index.html file for the Splendid Walrus site in the chapter1
directory. If you use your imagination and strip out the content, you can
see a basic HTML page structure like this:

<div class="navigation">...</div>
The three main <div class="header">...</div>
content columns <h1>...</h1> Putting the righthand
<div id="visit" class="column">...</div> column before the center
<div id="points" class="column">...</div>
column in the markup is
an old trick of the web
<div id="main" class="column">...</div> design trade: it makes it
<div class="footer">...</div> easier to handle layouts
using CSS floats.

The current, desktop‑oriented CSS lays out the page like this:

div.navigation

div.header

<h1>

div#visit
div#points

div.footer
div#main
Let’s go look at the CSS that
defines the layout and figure out
what needs to change to adapt it
to be mobile-sized.

you are here 4 15

 www.it-ebooks.info
now showing css analysis

We’re only interested in the structural

Analyze the current CSS part of the CSS file.
Open the styles.css file for the
Splendid Walrus site. /* Structure */
There’s a bunch of CSS at the top body, .header, .navigation, .footer {
of the file, but we don’t have to width: 960px; The body is 960 pixels
worry about that. We can share } wide. The header, fo oter,
the same colors, typography, and .header, .navigation, .footer { and navigation elements
styling across both desktop and
clear: both;
span the full width.
mobile variants.
}
What we care about is the Because these elements
span the full width, make
.column {
structural CSS, near the
bottom of the file.
margin: 10px 10px 0 0;
sure nothing is floating
Each column (visit, right, and
}
next to them.
points) has a 10px margin at
.navigation {
clear:both just ensures
top and a 10px margin at
min-height: 25px;
that these elements
right (a.k.a. a “gutter”). }
start on a new “line”—
.navigation ul li { that is, that nothing
The navigation links are in a <ul>. width: 320px; /* 960/3 */ is next to them.
Lay it out horizontally and }
make each <li> span 1/3 of the
.header {
page width.
background:url(images/w.png) no-repeat;
Each <li> gets 1/3 of height: 200px; The header has a background
the page width because } image,
there are three links. so it needs to be
#visit { 200px high to show all of
width: 240px; the image.
float: left;
The left and right
columns are each 240
}
pixels wide and float. #points {
width: 240px;
It seems like the main
float: right; column should be 480 pixels
} wide (960 minus the two
#main { 240-pixel left and right
The main column uses margin: 10px 260px 0 250px; columns). But it’s 460 pixels
margins to position wide to account for the two
itself—it doesn’t float. width: 460px;
} 10-pixel gutters between
the columns.
Its left margin of 260px
and right margin of 250px
position it in the window.

16 Chapter 1
 www.it-ebooks.info
getting started

What needs to change?

1 Make the page and its structural elements
fit within 320 pixels. We’re not going to have to
As Frank mentioned on page 9, 320 pixels is a rewrite all of the CSS.
common screen resolution for mobile devices.
We just need to adapt some of
the structural layout elements.
2 Reduce three columns to a single column. The rest—typography, colors, and whatnot—can
In the original, desktop layout, three columns felt stay basically unchanged.
“crunched” on a mobile screen.

For mobile, we need to go from this… A three-column layout designed

to fit in 960 pixels
div.navigation
div.header

<h1>

div#points
div#visit A single-column layout
sized for a 320-pixel
…to this browser width
div.footer
div.navigation
div#main
960 pixels
div.header
<h1>

div#visit

div#points
div#main

div.footer
320 pixels

you are here 4 17

 www.it-ebooks.info
mobile css adaptations

Identify the CSS that needs to change

The highlighted code will need to be
adapted for our mobile version.

/* Structure */
We need to change the width, body, .header, .navigation, .footer {
of the page and the header nts. width: 960px;
navigation, and footer eleme }
We don’t need this rule in .header, .navigation, .footer {
our mobile version (but it clear: both;
doesn’t hurt anything). }
The “columns” on the mobile , not
layout will lay out verticallye space
.column {
ated
Because nothing is flocle s
margin: 10px 10px 0 0;
horizontally. Let’s add som but
in our mobile layout, ar } between columns (vertically)
aren’t necessary. .navigation { get rid of the gutter.
min-height: 25px;
This is actually fine: we
want the navigation links }
to be at least this tall. .navigation ul li {
width: 320px; /* 960/3 */ We’ll use the same background
We need to adapt the } image for the header, so this
navigation link widths to can stay the same.
.header {
fit the smaller screen. background:url(images/w.png) no-repeat;
height: 200px;
} It might seem like we would need
#visit { to adjust the 200px height here,
width: 240px; but we don’t because we’ll use the
float: left; same image.
We need to remove the
floats and change the }
width of the visit and #points {
points columns. width: 240px;
float: right; We don’t need the margins for
} positioning anymore (#main
#main { will span the full width), and
margin: 10px 260px 0 250px;
we need to change the width.
width: 460px;
}

styles.css

18 Chapter 1
 www.it-ebooks.info
getting started

Steps to creating the mobile-specific CSS

1 Change the width of the highlighted CSS rules.

2 Get rid of the CSS rules we don’t need.

3 Factor out the common CSS rules. We’ll do this in just a minute.

Mobile CSS Magnets

Use the magnets to build the mobile-specific CSS.

body, .header, .footer, .navigation {

}
.column {

border-bottom: 1px dashed #7b96bc;

}
d some
This border is to adth
visual separation to l) eas
.navigation ul li {
columns (now vertica page.
} they lay out on the
#visit, #points, #main {

margin: 10px 0;
width: 320p width: 106.6667px;
x;
width:320px;

you are here 4 19

 www.it-ebooks.info
mobile css in four rules

Mobile CSS Magnets Solution

body, .header, .footer, .navigation {
width: 320p
x;
}
.column {
margin: 10px 0;
border-bottom: 1px dashed #7b96bc;
}
.navigation ul li {

width: 106.6667px;
}
#visit, #points, #main {
width:320px;
}

Ta-da! Mobile-specific CSS

And we’re done! These four CSS rules are all the
mobile‑specific layout we’ll need. Now we need to be
sure they’ll get used by mobile devices.
And how will we do that? Our old friend Mr. Media
Query to the rescue! We’ll generate a media query
shortly to apply this CSS to devices with a browser
window of 480 pixels wide or narrower. Wait a minute. Some of
the CSS rules disappeared.
Where’d they go?
Why 480 pixels? That’s
the resolution for the
“long side”(a.k.a. “landscape They didn’t disappear…
orientation”) of many …they just don’t need to be contained inside our
popular smartphones. mobile‑specific CSS. Why? Because the CSS
rules in question are going to be the same for
both layouts (desktop and mobile).
We’ll put the shared CSS outside the media
queries so that we don’t have to have the same
CSS rules in two places. Let’s do that now.

20 Chapter 1
 www.it-ebooks.info
getting started

The rest of our structural CSS

Shared structural CSS
.header, .footer, .navigation {
See? Told you! None of the CSS actually clear: both;
disappeared. Here’s the shared structural }
CSS that we identified on page 18, factored
out and ready to go. .header {
background:url(images/w.png) no-repeat;
height: 200px;
}
.navigation {
min-height: 25px;
}

body, .header, .footer, .navigation {

Our desktop structural CSS width: 960px;
}
We still need to have good CSS for desktop browsers!
.column {
After we remove the common structural CSS
margin: 10px 10px 0 0;
rules, here’s what we end up with for the
}
desktop-specific CSS structure.
.navigation ul li {
We’ll need to use a media query so that only width: 320px; /* 960/3 */
viewports 481 pixels and wider apply this CSS. }
#visit {
width: 240px;
float: left;
What’s next? }
Let’s check in on our to‑do list for creating #points {
structural CSS that works for both desktop width: 240px;
and mobile browsers: float: right;
Check out the current layout of }
splendidwalrus.com and analyze its structure. #main {
Identify layout pieces that need to change margin: 10px 260px 0 250px;
to work better on mobile browsers. }
Generate mobile‑adapted CSS for those
identified elements.
Organize our CSS and selectively
apply the mobile and desktop CSS
using media queries.

you are here 4 21

 www.it-ebooks.info
one last thing…

Put it together
Here’s how we’ll put together the updated version of styles.css.

We didn’t make
Color, typography, and basic layout any changes to this
part of the CSS.
chapter1

Common structural CSS (page 21)

@media screen and (min-width:481px) {

images
Desktop structural CSS (page 21)

}
@media screen and (max-width:480px) { point.png

Mobile structural CSS (page 20)

} sample.jpg

styles.css

w.png
One last thing…
You’re going to need a viewport <meta> tag in the index.html file. These tags help
tell the browser how “zoomed in” to render the content. We’ll be taking a look at these
guys a bit later on, but for now, just take our word for it: you’ll want one of these.

index.html
<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>

styles.css
index.html

22 Chapter 1
 www.it-ebooks.info
getting started

Do this! 1 Edit the index.html file.

Drop in the viewport <meta> tag from page 22.
2 Open the styles.css file.
You’ll be replacing the structural CSS rules near the bottom
of the file. Remove the existing rules for structural elements.
3 Add the common rules.
Add the shared structural CSS rules from page 21.
4 Add the desktop- and mobile-specific CSS.
Add the desktop rules (page 21) and mobile rules (page 20).
5 Wrap the desktop- and mobile-specific CSS in media queries.
Add the media queries (page 22).

Test Drive
Once you’ve made these changes, load the index.html file in
your desktop browser and resize the window to less than 481
pixels wide to see the mobile‑friendly layout.
Watch out, mobile web!
Here we come!

The page still looks the same

in desktop browsers…
…until the browser window
width is less than 481
pixels. Then you can see the
mobile-optimized layout!

you are here 4 23

 www.it-ebooks.info
neat proportions

This 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 is
too big for the page. It breaks the layout.

Frank: 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. I
mean, 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 I
going 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. Right
now, you’re delivering a rigidly sized structure to all browsers whose current
window is 480 pixels wide or smaller, no matter what the actual specific browser
window width is. That’s not very flexible. I mean, not all mobile devices have a
320‑pixel‑wide browser window.
Responsive design helps us adapt our layout to different situations. Instead of
dictating the exact size of elements—that is, using pixel‑based measurements in our
structural CSS like we are now—we can use a proportional layout, which adapts
much better for different users.
Frank Jill
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 our
layout. That way, content stretches and shrinks to fill available space—kind of like
water 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.
This photo is wider than
320 pixels, breaking out Frank: So, all of that work with media queries was wasted time.
of the layout. Jill: Not at all! Media queries are a big part of what makes responsive design work.

The next step to move toward

a responsive design—one that
will work more comfortably
on more devices and
browsers—is to convert our
fixed, pixel-based layout to a
proportional, fluid-grid layout.

The YouTube video is still

broken on this iPhone.

24 Chapter 1
 www.it-ebooks.info
getting started

Tonight’s talk: Fixed Grid meets Fluid Grid

Fluid Grid: Fixed Grid:

Hey, Fixed Grid. I know you’ve been around a while
and seen a lot of action. But, no offense, there are a
few problems with your philosophy.
What’s that? What’s a young upstart like you know
about philosophy?

I mean…you’re kind of a relic. Your rigidly defined

dimensions make you seem brittle and inflexible.
That is, you’re not responsive.
Responsive?
You don’t respond to changes in your user’s
environment. You stay the same, always.
What’s wrong with tradition? I’m staying true to
what the designer intended! 960 pixels wide, with
240‑pixel columns on the left and right.
At the cost of your users. Look at what happens when
we look at you in different browser window sizes.
Stuff is cut off, or there’s a bunch of blank space.
If users don’t like it, they should straighten up, get a
haircut, and use a standard browser.
Maybe that worked in your day, but these days there
are simply too many kinds of browsers and devices. If
you’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, into
the available space in the browser window, you can
really adapt for different situations.
Well, pipsqueak, show me what you’ve got.

you are here 4 25

 www.it-ebooks.info
oh, for a pixel-perfect world

What’s wrong with a fixed-width

The site in a
layout, anyway? 960-pixel window
If the whole world were full of browsers whose windows were
always the same size, it would be a safe, pretty world in which
designers could have pixel‑perfect control over what a website
looked like.
Unfortunately, the Web has never been this controllable.
Sometimes we try to design around “standard” window widths
like 640, 960, or 1,024 pixels. But that is mostly an illusion:
there is no standard browser window size. And that’s before
you even start thinking about mobile devices.
Sure, the fixed‑grid layout for The Splendid Walrus looks fine
at 960 pixels wide.

The layout doesn’t adapt to other window sizes

But in a narrower window, look what happens. The column
widths stay the same, which means content gets cut off and the
user has to scroll horizontally. Ick.
The site viewed in a
700-pixel window The right column
isn’t visible
without scrolling.

Left and right

columns are 240
The entire width is pixels wide…always.
In a wider window, the entire layout is still only 960 pixels wide,
constrained to 960 pixels.
leaving a blank gap of wasted space at the right side of the
screen. Hmmm.

The site viewed in a

1,200-pixel window

26 Chapter 1
 www.it-ebooks.info
getting started

How is fluid better?

Fluid‑grid layouts use proportional units (percentages)
instead of pixels for widths. We can stay true to the
designer’s vision of having the left and right columns
span one‑quarter of the page width by defining their
widths as 25%, instead of 240 pixels.

A fluid version of the layout

at 960 pixels. It doesn’t
look very different right
now, does it?

The layout adapts as the window changes size

In different window widths, the content flows, like water, to fill
the available spaces in the layout. The left and right columns
always take up 25% of the window, and content is not clipped A fluid version
in narrower windows, nor is there any empty space in wider of the layout
windows. at 700 pixels

A fluid version
Left and right columns are of the layout
proportional: 25% of the at 1,200 pixels
window’s width.

We’re about to convert both the

desktop and mobile CSS from fixed
to fluid grids. Can you think of some
ways this might help solve some of
the problems Jill found with the site
on mobile browsers?

you are here 4 27

 www.it-ebooks.info
go with the flow

Go fluid
There are a number of things we’ll need to do to address the problems
Jill found and move toward a responsive design.

Convert the pixel‑based layout to a fluid one, using

proportional widths instead of fixed.

Make the default body font size 100% so our page’s fonts
can scale up and down proportionally. If we’re going to make our
layout fluid, we’ll want
Fix the broken YouTube video. to be sure our fonts are
flexible, too.
Fix the image that is too wide.

The fluid formula

To convert a pixel‑based layout to a proportional, fluid one,
use this formula:
The size of the
element, in pixels Target
Result
Our new, proportional CSS
rule, as a percentage.
The size of Context
the containing
“context,” in pixels

A closer look
Let’s take a look at what this means, using the Splendid Walrus 960 pixels
site’s desktop layout.
We start with a context on which to base our proportions. In
this case, our reference design is 960 pixels wide. We want
our resulting, fluid layout to have the same proportions as the
current design does. So we’ll base our calculations on that 240 460 240
960‑pixel baseline. pixels pixels pixels
The navigation, header, and footer all span the full width of the
page. That makes the fluid formula very easy to apply indeed!

960 pixels
100%
960 pixels 960 pixels

28 Chapter 1
 www.it-ebooks.info
getting started

Continue your fluid conversion

The left and right columns are both supposed to be 240 pixels wide, relative
to the 960‑pixel containing context. To get a proportional measurement, use
the fluid formula again:
240 pixels The columns span a quarter
25% of the page width. So this
960 pixels feels pretty intuitive, right?

The main, center column is a bit different. It doesn’t float. Instead, margins
are used to position the element. But that’s just fine. We can still use the
fluid formula to convert the pixel‑based margin sizes to percentages:

250 pixels
26.0416667%
Our current 960 pixels
CSS rule
#main {
Q: Why are there so many decimal places in
these numbers? Do we really need all that?
margin: 10px 260px 0 250px;
}
A: We’re demonstrating the purist fluid‑grid
approach here, which builds CSS units exactly as the
260 pixels numbers come off the calculator.
27.0833333%
Realistically, browsers round these very long numbers.
960 pixels
And—a bit concerningly—they round them in slightly
different ways.

Our updated CSS rule So, it’s up to you. You might consider rounding the
numbers down to one or two digits past the decimal
point. Another approach is to leave some play in
your layout—a percentage or two not accounted for
at all. Your grid won’t be as precise, but you avoid
some of the pitfalls of rounding issues and make your
#main {

arithmetic less rigorous.

margin: 10px 27.0833333% 0 26.0416667%;

Q:
}
Wait. Why is the top margin on .main still
10px? Isn’t that…wrong?

A: Vertical layout is a totally different beast than

Finish converting the structural desktop CSS rules horizontal. We can’t use the 960px context because
in styles.css to proportional widths. You’ll want to the height of the design is never really a known
edit each of the six CSS rules within the media quantity, and vertical layout using percentages is a
query for window widths of 481 pixels or greater. tricky affair, supported in different (and sometimes
poor) ways in different browsers. Using pixels like this
for vertical margins is OK.

you are here 4 29

 www.it-ebooks.info
fluid desktop css

Let’s take a look at that fluid desktop CSS.

@media screen and (min-width: 481px) {

body, .header, .footer, .navigation {
960 width: 100%;
100% }
960 .column {
10 margin: 10px 1.04166667% 0 0;
1.04166667% }
960
.navigation ul li {
width: 33.333333%;
320
33.333333…% }
960 #visit {
width: 25%;
float: left;
240 }
25%
960 #points {
width: 25%;
float: right;
}
#main {
margin: 10px 27.0833333% 0 26.0416667%;
}
We figured this }
out on page 29.

So, to convert to a proportional width,

we divide the pixel width of an element
by the overall layout width, right?

Not so fast!
Sometimes the “context” can change…

30 Chapter 1
 www.it-ebooks.info
getting started

Context switching
Hey. I’m going to start offering
some new beer specials, and I want to
be able to feature those on the site—
can you adjust the design?

Mike has a new monthly special that he wants to post on the

Splendid Walrus site. Instead of text and a single image in the
main column, as it is now, he wants to display the beer labels
of two very special, limited‑edition stouts—floated next to each
other. In our pixel‑based reference design, this looks like:

960 pixels These <img> tags have

a class of “label.”

220 220 #main img.label {

pixels pixels
240 240 width: 220px;
pixels pixels margin: 5px;
460 float: left;
pixels }

Mike’s pixel-based
CSS widths
960 pixels

It’s tempting to think that the formula for converting these

image widths to be fluid would be:

220 pixels
22.916667%
960 pixels

Does this formula look right to you?

you are here 4 31

 www.it-ebooks.info
watch your contexts

What’s wrong with this picture?

The context changed!
If we set the images to span 22.9166667%, they will span 22.916667%
220 pixels
22.916667%
all right—22.916667% of their containing element.

960 pixels
The containing element of these images isn’t body (100% width,
or 960 pixels in our reference design), it’s div#main, which has a
width of about 460 pixels (47.91667% of 960 pixels in proportional
parlance). So we have just told the images to span a little less than 23%
of 460 pixels—too small!

960 pixels This is what you’ll get if you set the width of
img.label to be 22.916667%. Uh oh.

Instead, we set the context in our formula to be

240 240 the reference width of the containing element,
pixels div.main pixels which in this case is 460 pixels.

Do this!
960 pixels

220 pixels
47.826087%
240 460 pixels
240
pixels pixels
div.main New context: width
of div#main, the
containing element.

Setting image widths as percentages?

Turns out, this is on the right track to
460 fixing one of our other problems with the
pixels mobile layout. Remember that photo that
The images are now just is too big and messes up the page width?
under 50% of the width of We can use a variant of what we’re doing
div#main—that’s more like it. here to fix that!

32 Chapter 1
 www.it-ebooks.info
getting started

Fluid images And media!

There’s a lot of power in this little gem of CSS:

img, object { Ka-pow!

max-width: 100%;
}
Fluid images
and media, like
With this quick addition, we help to prevent any image or
embedded media object from being wider than its containing
fluid grids, scale
element. Because they are limited to 100% width—100% of the
width of their containing element—images and media obey their
proportionally
parents and don’t try to break outside of the boundaries. Nice! within the layout.

A sad farewell…

Fluid images are not

Most great things don’t come without a bit of sacrifice. To

a get-out-of-jail-free
use the fluid technique on images and media, we have to

technique.
forego our old friends: the width and height attributes.
The CSS rule above will override a width attribute but will
not affect a height attribute. That means that, if we use Just because an image
height and width attributes, we could end up with an scales down on a
image that scales its width but not its height. End result: a narrower screen doesn’t mean that it
sad‑looking squished image in the wrong aspect ratio. isn’t still, at heart, a large image. An
800 KB JPEG is still an 800 KB JPEG,
OK, there are some workarounds for this, and removing even if it’s crammed down into a
these attributes is not awesome. But we’re going to jettison 120-pixel-wide column.
the height and width attributes for now.
In Chapter 2, we’ll talk about
techniques to deliver different images
to different devices and browsers,
saving on otherwise wasted bandwidth
and processor power (required to do
the actual scaling).
Still, it’s a powerful technique, and one
definitely worth having in your arsenal.

you are here 4 33

 www.it-ebooks.info
fluid mobile css

Are we there yet?

We’re making progress toward a responsive design that adapts to more
devices. But we have a few things left to track down:

We still need to convert

Convert the pixel‑based layout to a fluid one, using the mobile CSS (we did the
proportional widths instead of fixed. desktop CSS already).

Make the default body font size 100% so our page’s fonts
can scale up and down proportionally.

Fix the broken YouTube video.

Fix the image that is too wide.

We did this using the
fluid images technique.
Spiff up the mobile CSS
There are just a few mobile‑specific CSS rules we need to convert to be fluid.

@media screen and (max-width: 480px) { screen and

@media (max-width: 480px) {
body, .header, .footer, .navigation
body, .header, .footer, .navigation {
{ width: 100%;
width: 320px; }
}
.column {
.column { margin: 1em 0;
margin: 1em 0; border-bottom: 1px dashed #7b96bc;
border-bottom: 1px dashed #7b96bc;
}
} Hey! Now that we’re
.navigation ul li {
.navigation ul li { width: 33.333333%; proportional here, these
width: 106.6667px; } rules are exactly the sametwo
} the desktop ones (see pa as
#visit, #points, #main { M
ight as well put them inge 30).
#visit, #points, #main { width: 100%; common structural CSS the
width: 320px; } of having them in two plainstead
} ces.

current (fixed) updated (fluid)

34 Chapter 1
 www.it-ebooks.info
getting started

Details, details
Let’s take care of a few remaining details to make our
Font Sizes Up Close
updated version of the Splendid Walrus site totally responsive.
With this edit to the CSS rule for the <body>
Set up flexible fonts element, we’re setting the baseline font size
So far, our layout is adaptive, but the fonts are stodgy for the page to be 100%. But what does 100%
and rigid. Just as percentages are the fluid ying to pixels’ mean? Here’s a quick‑and‑dirty (and approximate)
fixed‑width yang, ems are proportional font‑size units. Mike rule of thumb:
used ems in his original CSS, so we’ll just add the following 1em = 100% ≈ 12pt ≈ 16px
rule to the <body> element to be extra thorough:
But recall that we aim to adapt our content to
body { the user’s environment. If a user has changed
background: #f9f3e9; the browser’s font size, 100% is going to
represent a different absolute size.
color: #594846;
font: 100% "Adobe Caslon Pro", Also keep in mind that fonts on mobile devices
are a complex thing, and that in some cases,
"Georgia", "Times New Roman", serif;
1em might equate to a (significantly) different
} point or pixel size.

This baseline font‑size reset is the CSS equivalent of dotting our

i’s and crossing our t’s: it’s setting an explicit reference against
which the other font sizes in the CSS are defined. Not a big deal;
just keeping things tidy!

Fix the YouTube video

Lots of mobile devices don’t support Adobe Flash. The markup
for the embedded YouTube is out of date: YouTube now provides
an iframe‑based embedding snippet that will work just fine on an
iPhone (and other modern devices). We need to edit the index.html
limited to
This technique isn’tia can be made
file and replace the current embed code.

Flash! Other med well.

<object width="230" height="179"
type="application/x-shockwave-flash" Instead of this fluid this way, as
data="http://www.youtube.com/v/O- (Flash-only) version
jOEAufDQ4?fs=1&amp;hl=en_US&amp;rel=0"><embed
src=... /></object>
YouTube’s newer embed code determines the
appropriate video format to use depending
Use this! on the browser. It can supply HTML5 video
instead of Flash for devices—like Mike’s
<iframe src="http://www.youtube.com/embed/O- iPhone—that support it. We simply grabbed
jOEAufDQ4" style="max-width:100%"></iframe> this newer snippet from the “embed” section of
this video’s YouTube page.

you are here 4 35

 www.it-ebooks.info
flex your rwd muscles

Remember to be responsible
Just like fluid image resizing doesn’t actually reduce the file size of
images, neither does fluid media change the size of the actual media.
It’s up to you to determine whether using video (or other multimedia) on
mobile devices is worth the file size and processor oomph required for
playback.

OK! Let’s get all of these changes in place to give The Splendid Walrus a mobile‑friendly site
that uses Responsive Web Design techniques.

Edit the styles.css file

1 Edit the CSS rules within the media query for lower‑resolution devices.
Convert these widths to be proportional (page 34).

2 Identify the structural CSS rules that are common between both mobile
and desktop variants now that they are proportional (page 34). Remove
these rules from the media‑query‑specific sections and put them in the
common structural section of the CSS file.

3 Add the CSS from page 33 to implement fluid images (and media).

4 Update the CSS rules for the <body> element to add a proportional
font size baseline (page 35).

Edit the index.html file

5 Replace the Flash‑only embedded YouTube with the smarter, iframe
variant on page 35.

Try resizing your browser

window and watching the
Let ’er rip! content adapt.
6 Save your changes and load the index.html page in any web browser.

36 Chapter 1
 www.it-ebooks.info
getting started

Q: OK. I’ve seen ems as units in CSS, Q: Is there any other use for CSS Q: If CSS3 isn’t all the way “done,” do
but I don’t quite get it. What’s the point? media queries beyond the mobile web? browsers support it?

A: 1em is—unspectacularly—a
representation of the current font size, in the
A: Definitely. An example: just as mobile
devices often represent the lower end of
A: Like we said, it’s a jungle out there.
Adoption for some of the more complete
current context. That doesn’t sound terribly the screen resolution spectrum, some of the pieces of CSS3 is becoming widespread, but,
exciting. But the magic comes when you newer widescreen monitors and televisions as we’ll see a bit later, is far from something
define your font sizes in relation to this. So, have very high resolution. Sometimes it that can be assumed in the mobile space.
if you set your <h1> element to display at makes sense to adapt a layout—say, to add
1.5em, it will be 150% of the baseline font
size of its containing element.
more columns—for these window widths. Q: Why does the right column show
up before the main column in the mobile
You can actually use the same fluid formula
Q: What actually caused the weird layout?
to generate fluid, em‑based font sizes from gap at the right side of the screen in the
fixed font sizes. To create a fluid version
of an 18‑point font in a context where the
exercise way back on page 7? A: The div#points content comes
before the div#main content in the
baseline font is 16 points, you can do A: This one’s iPhone‑specific. When
displaying a web page “zoomed out” (i.e.,
HTML markup. In the desktop layout, floats
18/16 = 1.125em (target/context = are used to position the #points content,
result). when it’s acting like a desktop browser), such that it appears to the right of the
mobile Safari on the iPhone assumes a #main content. The mobile layout doesn’t
Q: Wait. Why is it 1.125em instead of
viewport width of 980 pixels. Before mobile
optimization, the Splendid Walrus layout was
use floats, and as such, the content is
displayed in the order it occurs in the HTML.
112.5%?
960 pixels wide, which leaves an awkward,

A: Mostly tradition and clarity, but ems

20‑pixel gap on the right.
Q: You skipped the @import syntax
do tend to work a smidge better across
platforms. It is common web practice to
Q: What’s the deal with the “3” in
for media types. And can I use @import
syntax with media queries?
“CSS3 media queries”?
define block element widths in percentages
and font sizes in ems. With some really
teeny exceptions, percentages and ems are A: There are several versions of CSS. It’s
A: @import syntax doesn’t get a lot of
love. So little, in fact, that we didn’t even
interchangeable for font sizes. About those tempting to say that there are three, but the mention it. But, yes, it absolutely works for
teeny exceptions: we set the <body> situation is a bit more cloudy. CSS2, which including stylesheets based on media types
element font-size to 100% to account was published as a “recommendation” way and for media queries, too.
for them. back in 1998, is the flavor with which most
web developers have had a longstanding
familiarity. Media types were introduced with
CSS2.

CSS3 is a different beast than earlier

versions of CSS, in that it is modularized—
there are something like 40 different
modules, instead of a single big, complex
spec. Fortunately, the Media Queries module
is one of the more complete and stable.

you are here 4 37

 www.it-ebooks.info
exercise solution

Let’s walk through the resulting CSS file and look at our changes.

body {
background: #f9f3e9;
color: #594846;
font: 100% "Adobe Caslon Pro", Georgia,
This is right near the "Times New Roman", serif;
top of the CSS file. }

To save space, we won’t show …shared typography, colors,

these rules here. borders, etc. (shared,
nonstructural CSS)…

.header, .footer {
clear: both;
}
.header {
background:url(images/w.png)
no-repeat;
Shared structural CSS height: 200px;
}
.navigation {
min-height: 25px;
}
img, object {
max-width: 100%;
}
.navigation ul li {
width: 33.333%;
}
.header, .footer, .navigation {
width: 100%;
}

38 Chapter 1
 www.it-ebooks.info
getting started

And now, the resolution‑specific structural CSS.

@media screen and (min-width:481px) {

.column {
margin: 10px 1.04166667% 0 0;
}
#visit {
Structural CSS for larger width: 25%;
browser windows (e.g., desktop) float: left;
}
#points {
width: 25%;
float: right;
}
#main {
margin: 10px 27.0833333% 0 26.0416667%;
}
}

@media screen and (max-widt

h:480px) {
.column {
margin: 1em 0;
Structural CSS for smaller border-bottom: 1px dashed
browser windows (e.g., #7b96bc;
mobile devices) }
#visit, #points, #main {
width: 100%;
}
}

you are here 4 39

 www.it-ebooks.info
the walrus is splendidly responsive

That’s a responsive site!

You guys made big
improvements, and
hardly touched the
HTML at all!

D O
TO va rious w
indow siz
es
at
shots
Screen

Looking good on the Motorola

The photo fits correctly Backflip (Android)
on this Android Nexus S
phone, thanks to the fluid
images technique.

We’re using the same header background image in

our mobile-optimized CSS, even though it’s getting
seriously cut off. Can you think of how to use RWD
techniques to use a different image (to save on
bandwidth and improve performance)?

40 Chapter 1
 www.it-ebooks.info
getting started

Responsive design is also a state of mind

Fluid-grid layouts

+
CSS media queries

Responsive
+ = Web Design!
Fluid images/media

A state of mind Letting go of pixel-perfect

layouts and instead designing our
content to adapt to different
(browser or device) environments

ƒ The mobile web is not unlike the Wild West—it’s full ƒ Media types (e.g., screen, print, projection)
of surprises and adventure. The mobile web browser have media features (width, color,
landscape is diverse, and, sometimes, crazy‑making. monochrome, orientation). It’s these media
ƒ Just because we can use the same layout on a mobile features we evaluate in our media queries.
device as in a “traditional” browser doesn’t mean we ƒ A CSS media query is a logical expression. When it
necessarily should. evaluates to TRUE, the enclosed CSS rules are applied.
ƒ Responsive Web Design (RWD) is a collection of ƒ A fluid layout is one that uses proportional widths instead
approaches to make our web content adapt to the user, of fixed widths such that the content of the page scales
not the other way around (forcing the user to look at and flows naturally across a range of window widths.
rigidly formatted pages).
ƒ Fluid images are a CSS technique that keeps outsized
ƒ RWD is a combination of CSS3 media queries, fluid- images (or media) from “breaking out” of their parent
grid layouts, and fluid images. It’s also a way of elements when the parent element width is smaller than
thinking about layout and content. that of the image (or media). The images and media
ƒ CSS3 media queries let us apply CSS selectively to scale down as the parent element scales down.
different user environments based on the current value ƒ Using a simple font-size reset on the <body>
of relevant media features. element and defining font sizes in ems or percentages
keeps our type fluid.

you are here 4 41

www.it-ebooks.info
 www.it-ebooks.info

2 responsible responsiveness

Mobile-first
Responsive Web Design
Darling, I don’t care if you are cold.
If you knew how much optimization it
had taken to look this good, you’d wear
a bikini on the beach in winter, too.

That’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’s
still a desktop site in mobile clothing. If we want this site to be greased lightning on
mobile, we need to start with mobile first. We’ll begin by dissecting the current site
to find the desktop bones hiding in its mobile closet. We’ll clean house and start
fresh with progressive enhancement, building from the basic content all the way
to a desktop view. When we’re done, you’ll have a page that is optimized regardless
of the screen size.

this is a new chapter 43

 www.it-ebooks.info
not-so-splendid walrus

Just when you thought it was time to celebrate…

Mike called in a panic. As a reformed web developer, he normally
resists the urge to tinker with his site, but he fell off the wagon
and decided to make a few tweaks. He thinks he broke the
Splendid Walrus site and needs help. Sorry, guys. Not sure
what I did, but the
Mike added pictures for all of his new brews to the On Tap Now Splendid Walrus site is
page. He didn’t modify the code other than to add pictures, but now dog slow.
now the page is loading very slowly on mobile phones. It’s so slow
that customers have started complaining.

w.com/ch2/chapter2/ontap.html.
Check out the On Tap Now page at http://hf-m

44 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Is 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 did
anything wrong. Mobile phones have slower networks and
processors. Of course the page loads slowly.
Jim: That makes sense, but it still seems slower than
expected. Mike says that even on a WiFi network, it is
unbearable. And he has a brand‑new smartphone.
Joe: Hmm…it sounds like we should at least look into it to
see if there is something obvious slowing it down.
Frank: How will we know what’s going on? It could just
be the network or any number of things between the
phone and the server.
Joe: I’ve been using a plug‑in for Firefox that gives you a
grade on your page performance. We could use something
like that.
Jim: That sounds awesome.
Frank: Can we install plug‑ins on mobile browsers? Joe Frank
The YSlow plug Jim
Joe: Ugh, you’re right. There’s no way to install plug‑ins
performance bas-in gives you a grade for
on my phone. Some of my favorite developer tools are
constructed. G ed on how a web page is
browser plug‑ins. Without them, how do we know what’s
yhoo.it/yslow. Pet YSlow at this URL:
really going on?
every web devel erformance is something
Jim: The other day, Kim was showing me how you can developers—shouoper—especially mobile web
watch every request that is made on our WiFi network
ld care about.
through the network router’s log page. Could we look at
something like that and watch what the phone does? Speaking of which, we’re going to spend a
little time looking at performance. Don’t e
worry. We’ll get to mobile-first Responsiv
Frank: That’s a great idea. But instead, let’s use a proxy

Web Design soon, and we promise all of this

server. It is very similar to what Kim showed you, but it is
designed for exactly this purpose. If we hook up the phone
to a proxy server, we can see all of the web requests that performance stuff is related.
the phone makes.

you are here 4 45

 www.it-ebooks.info
wait, use a proxy

Waitress, will you take my order please?

A famous athlete is stricken with food poisoning the night before
a big match against his archrival. The police suspect foul play
and have assigned a detective. The detective quickly starts
questioning 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, the
waitress brought the food out. The waitress saw everything.
Most of the time when you’re on the Web, you’re talking
directly to the cook. Nothing is between you and the web server
for the page you’re visiting.
But if we have a proxy server act like a waitress, it will record
both what was ordered and delivered by the browser. Now we can
be our own detectives and dig into what actually happened.

Proxy server
Mobile phone The Internet

Web server
You don’t need a fancy server.
Your personal computer can
act as a proxy server with
the right software.

Can I get a proxy to set up my proxy?

If you do a lot of mobile work, you may find it worth your
while to learn how to set up a proxy server. It is the best way
to 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 performance
company, have set up a free service that is the next best thing
to installing your own tool.

46 Chapter 2
 www.it-ebooks.info
responsible responsiveness

What to do when things aren’t blazing fast

Blaze provides Mobitest—a free mobile performance test
using real iPhone and Android phones. Mobitest is located
at www.blaze.io/mobile.
Blaze’s Mobitest works like a proxy server. You tell it what
web page URL you want to test and what device you
want to test with. Mobitest then puts your test request in
a queue for that device.
When the phone you requested is available, Blaze tracks
all of the communication between its test phone and the
web server so you can see what happened.
There is even a fun feature that records a video of the
page loading so you can see what someone using that
phone would see.

Test Drive
Ready for some detective work? It’s time to figure out why the On Tap Now page is slow.

1 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.

2 Look at the load time and page size.

The load time tells you how long the page took to load on this phone
during this test. The page size is the total size of all resources associated
with the page including HTML, CSS, JavaScript, images, fonts, etc.

3 Try two different phones and compare speeds.

Not only will the speed of networks vary, but the phones themselves may
also vary in the speed at which they process and display pages.

you are here 4 47

 www.it-ebooks.info
overweight walrus page

Don’t let its looks fool you, that’s a BIG page

Yikes! 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‑ In truth, it’s too big for desktop
moving elephant on a mobile phone. too. Just because a screen is big
doesn’t mean the connection is fast
No wonder Mike’s customers complained about the page. It takes Performance matters everywhere. .
over 10 seconds to load on a test iPhone.

Blaze Mobitest results page

using an iPhone

Size of HTML Click to

Load time and all resources see a larger
can vary for the page version of
widely the waterfall
depending chart.
network
conditions.
Blaze tests
on WiFi.

What is a waterfall chart? I looked at

it, and it doesn’t tell me what’s making the
page so big. Is the chart even useful?

Waterfall charts are a common

web performance report.
The chart shows the files that the browser
requested from the server to build the web
page. The bars represent the length of time
spent downloading a resource. The resources
are listed in the order in which the browser
requested them from the server.
But don’t go chasing the waterfall on the Blaze
report page. It doesn’t have the details we need
for our detective work. We’re going to show you
how to find a waterfall that is more useful.

48 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Top part of th
There’s gold in ’em HAR hills Mobitest resultes Bpalaze
ge.
There is a nugget buried in the Blaze Mobitest
results page behind the tiny View HAR file link.
Click that link, and you will go to a new site
called the HTTP Archive Viewer and see a more
detailed waterfall than the test results page.
This waterfall chart shows us every resource that
the browser downloaded in much more detail
than the picture of the waterfall on the Blaze
report page.
You’ll find the
sa
The preview tab contthaine page link next to the“VTw
iew HAR file”
fo r itter and
waterfall chart ted
Facebook links.
we tested. It was genera HTTP Archive (HAR) Viewer
from a HAR file.

be used
The HAR file cafanll charts.
to make water t HAR at
Read more abou
httparchive.org.

HAR stands for

HTTP Archive. It
is a file specification
that provides a
standard way to
record what happens
when a browser
requests a web page
Do you see any suspicious files being from a server.
downloaded in the waterfall chart?

you are here 4 49

 www.it-ebooks.info
bloated page pie charts

10,000-feet view: Show statistics

The HAR waterfall charts show you the files that were downloaded,
how the server responded, and the time it took to download. But
before we dig into the waterfall chart itself, let’s take a look at the
high‑level statistics.
Click the Show Statistics link on the HAR Viewer page to see a series
of 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 over
each file type to see its total file size. See the pie charts by
clicking Show Statistics on
the HAR Viewer page.

Whoa! There are 35 image s; Eight JavaScript files for

2.4MB for images alo ne . this page. Total size of all
JS is 351 KB.

So that’s why the page is so slow. There’s

nothing on this page that uses JavaScript, but
it’s downloading eight JavaScript files. Plus the
images are almost 2.4 MB in size. We need to figure
out why the images and JavaScript are so big.

50 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Find the drags on page speed

Now it’s time to dig into that waterfall chart to find where
the big images and JavaScript are coming from. Here’s a
key to reading the chart.
Waterfall chart on the HAR
The web page requested. Each line shows a different file Viewer page
Hover over it for a pull- requested to build the page.
down menu with which you Size of the
Hover to see the full URL. file downloaded Time required to
can add more information download the file
to the chart (e.g., the
type of file).
The type of request
from the browser.
Usually GET, but can
be POST if it’s a form.

Click the plus sign to get more details The HTTP response The bar graph shows when the file request
about what the browser asked the code from the server. started and when the file complet
server and how the server responded 200 means “OK.” downloaded. Only a few files can beely
(aka the HTTP headers). downloaded at the same time.

The amount of communication between the browser and the

server can be overwhelming, but don’t worry. You just need to
look for two things: which resources are the largest, and where is the
JavaScript coming from?

Review the waterfall chart for the On Tap Now page. Find the five largest files and examine
them. For each file, answer:

1 What type of file is it?

2 What domain is the file coming from?

3 If 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 or
download the image to find the dimensions.

What does this information tell you about what you might need to do to make the page faster?

you are here 4 51

 www.it-ebooks.info
exercise solution

Did you find the problems with the page? Let’s review.

1 What type of file is it?

You can determine the type of file by
hovering over the filename to see the
full URL and extension. You can also
add a column containing the file type
so you can scan the list quickly.
Hover over the page UR
2 What domain is the file coming from? Click on the down arrowL.
Now we’re getting somewhere. Check out where next to the URL to ad
this big, 174.8 KB JavaScript file comes from. the file type column. d
The large file isn’tfile
the only suspicious ve
here. These files ha
strange names.
gest
Hover your mouse over the At 174.8 KB, this is thpae gelar.
name to see the full URL. file JavaScript file on th e

Maps.gstatic.com is a domain for Google Maps. The browser is

downloading JavaScript for a map that isn’t displayed on the mobile view.
Many of the mysterious files are related to Google Maps.

3 If the file is an image, what

is its height and width?
168 pixels high

Find the images with the largest file

size. Copy the URL and open them
in a new window. Without even
750 pixels high

looking at the height and width, you

can tell that these images are far
larger than the size they appear on 153 pixels wide
a small screen. Scaled size
used on iPhone
Same file (121 KB) used
for both despite the
682 pixels wide different sizes at which
the image appears
*Images are not to scale.

52 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Where did that Google Maps JavaScript come from?

When you view the On Tap Now page on a mobile
phone, the page doesn’t contain a map. Why is that
JavaScript downloaded? Let’s open the page in our
desktop browser and investigate.
Hey, there’s the map. Mike must have set it up so
that 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 may
not 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 all Hey, there’s th

The map is included in the page via an iframe.
e elusive map!
The iframe loads all of the components necessary
to make the map.
Look inside ontap.html to
find this code.
<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>

This single iframe causes 47 files to be downloaded!

Extremely long URL abbreviated

taps.css
Mike hid the map with CSS
Mike figured out how we used media queries to @media screen and (max-width:480px) {
modify the layout for mobile. He added in his own
.
CSS rule inside our media query. The rule Mike e rules
added sets the display for the iframe to none. . There are many mor
. in the CSS fi le .
Unfortunately, while setting the display to none
will prevent the map from showing up, it doesn’t #map {display:none;}
prevent it from downloading. }

The iframe has an id of map. This rule hides

the Google Maps iframe by setting the
display to none.

you are here 4 53

 www.it-ebooks.info
optimize those images

What’s with the big pictures?

The images on this page need to be put on a diet. Let’s look at the waterfall
to find the biggest images and see why they’re so big.

The taps.jpg file is 440. 7 KB, making it

.
the largest file on the page
But that huge file is
the header image, and it isn’t
even 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 way
as Google Maps—the display property has been set to none in
the CSS. But, as we saw with the map, setting display:none
doesn’t stop the content from downloading.

@media screen and (max-width:480px) {

[Other CSS rules are here]
.header {display:none;} This is taps.jpg. View the
} On Tap Now page in a
desktop browser to see
where the image is used.
Fluid images are huge images
Another thing to notice from the waterfall is that the brew
labels are all large files that range from 93 to 132 KB. The total size of the
They’re desktop images scaled down to fit the screen 16 brew labels is near
using the fluid‑image technique we learned in Chapter 1. 2 MB. Finding a way ly
So this isn’t a new issue, but when we only had one or to optimize these
two images on the page, it wasn’t noticeable. But when images is key to making
you put 16 brew labels on one page, suddenly the fluid the page faster.
images are an anchor slowing the page down.

54 Chapter 2
 www.it-ebooks.info
responsible responsiveness

It looks mobile friendly, but it isn’t

Jim: 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. The
problems are really bad on this particular page, but I think the
same issues exist on every page on the site.
Frank: So what do we do? Build a whole separate site for the
mobile version? Ditch Responsive Web Design?
Joe: Let’s not get ahead of ourselves here. There’s got to be a
way to make it work. We’re so close right now. Do the image
and JavaScript problems have anything in common?
Jim: It seems like all of the problems stem from the fact that
we’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 by
default 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 be
downloaded by mobile devices. That’s not the ideal fallback
behavior if something goes wrong.
Joe: What if we flipped things around and sent the smallest
files by default?
Jim: Oh, interesting. That might work. Start with the mobile
templates first and then add on content for desktop.
Frank: What you’re describing sounds a lot like progressive Progressive enhancement
enhancement.
Joe: You’re right. We’ve been using progressive enhancement promotes building layered
for years. The only difference now is that we’re starting from
mobile and progressively enhancing the document to fit the
web pages. At minimum,
desktop. everyone can see and use
the content. Those with
Jim: It seems like it should work. Let’s try it out.

more capable browsers get

additional layers of style
and interactivity that
enhance the experience.
you are here 4 55
 www.it-ebooks.info
mobile first; it’s only polite

Mobile-first Responsive Web Design

Mobile-first Responsive Web Design (RWD) is exactly
what the name suggests: RWD techniques that start from a
mobile template. Despite its simplicity, there is a lot of power
that comes from this approach.
es.
featurer

► Basic HTML
s
of ad st for brow

Very small screens ► Simple layout

(feature phones)
Progressive enhancement based on screen size and client features
vanced

► Small images
► Limited CSS and JS
e
S to t
t
Use J
r

► Add newer HTML5 features if supported

p po

Small screens
► Simple layout
s u

(smartphones) ► Small images, but bigger than feature-

siz e.

phone size
at es

► More CSS and JS

layout and media
Screen siz e d ict

► Because there is more room,

Medium screens we can add optional content
(tablets) like sidebars
► Multiple column layouts
► Larger images

► Add widescreen layouts

Larger screens
► Larger images
(desktops and TVs)
► For TVs, optimize
navigation for use by
people sitting 10 feet
away who are using a
remote control

*These are just examples of enhancements. What you do depends on the project.

56 Chapter 2
 www.it-ebooks.info
responsible responsiveness

What is progressive enhancement?

Progressive enhancement views web design in a series of
Behavior (JavaScript)
layers. The first layer is the content. Combine that with semantic
markup to create structured content. If you stop right there, you
have a document that nearly every browser in the world can read.
Presentation (CSS)
After you’ve got the basics out of the way, you add a presentation
layer using CSS and a behavior layer using JavaScript. You never
assume the browser supports those features, but if it does, visitors Structured content (HTML)
get a better experience.
For many years, web developers commonly built things that only
worked on the most advanced browsers and tried to make sure
the web page degraded gracefully on older browsers. Progressive Progressive enhancement is like a
enhancement flips this practice around. layer cake. Mmm. Cake.

Benefits of mobile-first design

Mobile‑first RWD isn’t that different from progressive
enhancement. Recognizing this fact, many call it content-first
design instead because content is the first layer of progressive
Semantic Markup
enhancement. Up Close
Regardless of what you call it, starting from the most basic Semantic markup means HTML
document not only reaches the most people, it also has tags and attributes that convey the
beneficial side effects. meaning of the content.

Mobile first is like a small‑plate diet. Simply by eating on a For example, content surrounded by an
smaller plate, you’re likely to eat less food. <h1> tag is more important on the page
than content marked up with an <h2>
The desktop home page is an all‑you‑can‑eat buffet. All sorts of or a <p> tag.
junk gets thrown on it.
class and id attributes can also add
Mobile is a small plate. You have to choose carefully and semantic meaning to documents if their
prioritize your content. values are things like calendar and
And once you’ve got a focused mobile site, you’re better prepared not presentation values like left or
to ask the tough questions like whether or not the things that top. Many web developers use classes
didn’t make the cut for mobile are really important enough to in a standard way called microformats to
add back in for desktop. provide more semantic meaning. Learn
more at www.microformats.org.
Semantic markup doesn’t mean you
completely avoid tags like <div> and
<span> that don’t add meaning. Instead,
you choose the right semantic tags and
attributes for the content of a page
whenever possible.

you are here 4 57

 www.it-ebooks.info
current page structure check

Let’s turn this web page around

Because we’re already using RWD, making our page mobile first won’t
take too long. Here is a short list of changes we’re going to make.
We’ll explain w
Make the HTML as simple as possible and swap the order of the CSS hy in a bit.
so that the mobile version is first.

Fix CSS background images so that only one file gets downloaded per
image. Make sure display:none is being used appropriately.

Supply different source files for <img> tags at different screen

resolutions. Make sure the right size image is downloaded.

Use JavaScript to add Google Maps to the page when the browser can
support it and the document is wide enough to accommodate it.

The current structure of the On Tap Now page

Open 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>
Two columns <div id="visit" class="column">...</div> Instead of a <div> called
instead of “main,” Mike has created a new
<div id="ontap" class="column">...</div>
three column with the id of “ontap.”
<div class="footer">...</div> That <div> contains the list of
current 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 to
make the content mobile first will be removing the Google map.
Because we’re going to need to reference the code later, let’s use HTML
comments to prevent the iframe from being included in the page.
ame by
Comment out the Google Maps--ifr>. Find the iframe in the #visit <div>.
surrounding it with <!-- and
<!--
<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>
-->

58 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Am I on a new page or not?

The On Tap Now page looks
so similar to the home page.
How can visitors tell they’re on a
different page?

Good catch. We have a problem

with the order of the content.
On the home page, it was fine if the first
thing on the mobile view was the Visit Us
information. But if the Visit Us content
repeats on every page, visitors won’t be
able to tell that the page has changed
without scrolling down.
We need to reorder the content so the On
Tap Now info comes before the Visit Us
content.

Copy everything in the

Do this! <div> with the visit
id and paste it below
the ontap <div>.

<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>

Is the Visit Us content essential on this page? Would it be better to move it

to a separate page and link to it? Or maybe leave it out of the mobile page
and add it using JavaScript if the page is rendered on a larger screen?

you are here 4 59

 www.it-ebooks.info
content floating around the page

Fix the content floats

The change we made to the order of the content broke the
layout in a desktop browser. The Visit Us section is at the
bottom of the page.
In Chapter 1, we mentioned how putting the right column
before the main column was a trick to make it easier to
handle floats for layouts. If you want a block to float next
to something, you need to put it first in the source order.
Don’t worry, though. There is a simple fix here. We’ve been
floating the Visit Us content to the left of the On Tap Now
content. Instead, we need to float the On Tap Now content
to the right of the Visit Us content.
Visit Us is floating
Open taps.css and make the following two changes. beneath the beer
labels.
Before After

@media screen and (min-width:481px) { @media screen and (min-width:481px) {

.column { .column {
margin: 10px 1.04166667% 0 0; margin: 10px 1.04166667% 0 0;
} }
#visit { #visit {
width: 31.25%; Change this… …to this. margin: 0 68.75% 0 0;
float: left; }
} #points {
#points { width: 25%;
width: 25%; float: right;
float: right; }
} #main {
#main { margin: 10px 27.0833333% 0
26.0416667%;
margin: 10px 27.0833333% 0
26.0416667%; }
Using 67%
}
Change this… #ontap {
instead of
#ontap { width: 67%; 68.75% gives us
margin: 10px 0 0 32%;
…to this. float: right; a little wiggle
} margin: 10px 0 0 0; room for the
}
columns.
}
}

60 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Mobile-first media queries

Basic
Now for a little housekeeping. In Chapter 1, we started with a desktop website
and made it mobile. We’re going to turn this around and start from the simplest

styles
content and build up to the desktop (and beyond).

Small scr
But first we have a confession. Mobile first is a little bit of a misnomer when it
comes to the CSS. Before we apply any media queries for small screens, we’re

ee
n styles
going to set all of the basic styles—for color, type, etc.—and then enhance them.

Large scr
There is a good reason for doing this. Many mobile browsers don’t understand
media queries at all. So we need to make sure they at least get the basic

ee
n styles
style rules.

Put your CSS house in order

CSS files are often like the kitchen junk drawer. It may start out organized and
logical, but over time chaos takes over. To put mobile‑first media queries in
CSS cascade follows the
place, 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 the path from small screen to
basic style rules are already at the beginning of the file, with the media queries large screen.
adding the layout and formatting later in the document. All we need to do is put
the mobile media query before the desktop query.
Do this!
/* Wider viewports/higher resolutions (e.g. desktop) */
@media screen and (min-width:481px) {
[Desktop layout rules here] Move the mobile media queryry. block
} above the deskto p me dia que
/* Mobile/lower-resolution devices */ By doing this, we’re making Ssurise
the cascading effect of CS irst
consistent with our mobile-froach.
@media screen and (max-width:480px) {
[Mobile layout rules here] progressive enhancement app
}

Test Drive
We’ve made quite a few changes to the page: • Removed Google Maps • Fixed the floats
• Reordered the markup • Reordered the media queries
We better check to make sure things still work. Load the page in a few desktop and mobile browsers
to see how it looks. Be sure to check Internet Explorer.

you are here 4 61

 www.it-ebooks.info
conditional comment lifelines

Surprise! The page is broken in Internet Explorer

Don’t tell us you didn’t see this coming the moment
we hinted you might want to test the page in Internet
Explorer (IE). Battling IE is a rite of passage for web
developers. You’ve probably been scarred enough from
previous battles that you knew there was an IE‑sized
monkey wrench awaiting us.
So what’s the catch? IE doesn’t support media queries.
Now before you toss the book aside and curse us for
teaching something that doesn’t work in the world’s most
popular browser, take a deep breath and relax. There
are ways to work around IE’s (many) shortcomings.

We’re being a little too harsh. IE9 and above

do support media queries, so help is coming.

Because IE 8 and below don

media queries, IE isn’t gettin’tg sup
the
port
CSS rules that create columns.

Internet Explorer’s escape hatch: conditional comments

Microsoft has provided a nice tool to help web developers target code
specifically to Internet Explorer via conditional comments.

and
owser is less than (lt) IEMo9 bile
This tests to see if the(!IbrEM obile). We exclude IE
that it isn’t IE Mobile e mobile layout. IE9 and above See the full syntax for conditional
because it should get th so they don’t need the extra help. comments at http://bit.ly/ie-comments.
understand media queries,
Look carefully. The <!--[if (lt IE 9)&(!IEMobile)]>
HTML comment <link rel="stylesheet" type="text/css" href="layout.css" media="all" />
opens on the first
line, but doesn’t <![endif]-->
close until “-->” is
included on the final
line. Other browsers If the conditions are met, IE will do whatever is in between the opening [if]
will see this as a statement and the closing [endif]. The example shows a link to a CSS file,
comment and ignore but it could be anything you would find in an HTML document.
its content.

62 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Use conditional comments with a media query

You 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’ve
called the new file layout.css because it will only be used for browsers that
have enough screen real estate that multicolumn layouts make sense.

1 Create a blank text file called layout.css and copy the

desktop rules into it.
Make sure you copy everything between the beginning and end of the
media query, but not the @media rule itself.

taps.css After you copy them, remove the rules and the
surrounding media query from taps.css. We’ll
reapply the rules to the HTML document next.
layout.css
/* Wider viewports/higher resolutions
(e.g. desktop) */
@media screen and (min-width:481px) {
.column { .column {
margin: 10px 1.04166667% 0 0; margin: 10px 1.04166667% 0 0;
} }
#visit { #visit {
margin: 0 68.75% 0 0; margin: 0 68.75% 0 0;
} }
#points { Copy these #points {
width: 25%; rules to width: 25%;
float: right;
your new float: right;
file.
} }
#main { #main {
margin: 10px 27.0833333% 0 margin: 10px 27.0833333% 0
26.0416667%; 26.0416667%;
} }
#ontap { #ontap {
width: 67%; width: 67%;
float: right; float: right;
margin: 10px 0 0 0; margin: 10px 0 0 0;
} }
}

you are here 4 63

 www.it-ebooks.info
conditional love

2 Add a link to the new stylesheet.

For browsers that support media queries, we’re going to add a link
to the new layout.css file if the screen size is wide enough.

<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 tag The 481px value for min-width was
copied from the media query we This is the media query syntax
to ontap.html. for link tags that you learned
removed from taps.css.
in Chapter 1.

3 Add the IE conditional comment.

We’ve got it working for most desktop browsers. Now we just need
to add the conditional comment we created earlier to finish up.

<link rel="stylesheet" type="text/css" href="taps.css" />

<link rel="stylesheet" type="text/css" href="layout.css" media="all and
(min-width: 481px)">
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="layout.css" media="all" />
<![endif]-->

The conditional comment repeats the line above it,

ensuring that desktop IE sees our layout.css file.
4 Time to test again.
Check the page in a browser that supports media queries and
different versions of Internet Explorer. Looks good, huh?

Even our persnicketytholde

friend IE is showing
layout properly now.

64 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Q: With super-fast 4G phones on the Q: You mentioned that setting up a Q: It seems like the order of content
horizon, is performance really that big of proxy server might make sense. What do may often be different between desktop
a deal? you recommend? and mobile. How do you handle this in
more complex pages?
A: Absolutely. Even 4G phones end up on
the EDGE network occasionally (EDGE is
A: There are many proxy servers,
including some fantastic open source ones. A: Ah, you caught that, huh? Yes, this
an older, slower network). Studies show that We happen to be fans of a commercial is one of the common challenges for
slow sites decrease usage and directly affect product called Charles Proxy. Responsive Web Design. In the long run,
the bottom line. the Flexible Box Module (Flexbox) in CSS3

Q: Q: The lack of plug-ins seems like a promises an easy way to reorder content in
stylesheets. Combine Flexbox with media
Why am I getting different results big deal. How do you get anything done
from the Blaze Mobitest? without Firebug and Web Inspector? queries, and you can completely reorder
pages as needed. Unfortunately, Flexbox
is still young and isn’t fully supported. So
A: There are many reasons why this
can occur. Page download time will change
A: It isn’t easy. First, a lot of your
debugging work can be done in a desktop
developers resort to JavaScript to reorder
content or combine RWD with device
with every test depending on network traffic. browser so long as you are careful to test on
detection (see Chapter 5). Frankly, content
Google Maps code is different for each real devices at some point in the process.
ordering and image handling remain two of
operating system and may change over time.
There are also a lot of new tools that attempt the biggest challenges for RWD.
The behavior of the phones will also change
to get around the plug‑in limitations. The
as new versions of the operating systems
are released. For the book, we tested using
Mobile Perf Bookmarklet (http://bit.ly/
mw-perf) includes many performance tools.
Q: Will the versions of IE that don’t
Blaze’s iOS 4.3, Android 2.2, and Android support media queries see the responsive
weinre (http://bit.ly/mweinre) and Opera design? Aren’t media queries necessary?
2.3 test devices.
Dragonfly (http://opera.com/dragonfly) let
Don’t worry too much about the variations
in test results. What matters is the code and
you run Web Inspector on your desktop
and examine what is going on in the phone
A: Internet Explorer will display the
desktop version. It will still have the fluid
images being downloaded unnecessarily. browser.
grids and flexible images. But it won’t
change based on any of the media query
Q: By separating the stylesheet into Q: It doesn’t seem like much changed instructions. If media query support is
two files, aren’t you making the site load when we switched to mobile-first media critical, there is an open source library
more slowly? queries. Why bother? called Respond.js that fills in support for
media queries for older IE versions. This is
A: It is true that the number of HTTP
requests makes a big difference in the
A: For this page, there wasn’t a big
difference between a desktop‑first CSS file
a fairly intensive script, so be sure to test
extensively if you decide to implement it.
download speed. So we shouldn’t recklessly and a mobile‑first one. In our experience,
add requests. In this case, we thought it however, this is the exception. With more
made more sense to separate them so IE complex styles, you often want the wider
could use the same file. rules to override some, but not all, of the
styles set for smaller screens. Reordering
the media queries ensures that the CSS
cascading behavior is consistent with the
goal of progressively enhancing the page as
the screen gets wider.

you are here 4 65

 www.it-ebooks.info
fix display:none with a media query

How are we doing?

We’ve got the basics in place and our CSS in order. What’s next on our list?

Make the HTML as simple as possible and swap the order of the CSS
so that the mobile version is first.

Fix CSS background images so that only one file gets downloaded per
image. Make sure display:none is being used appropriately.

Supply different source files for <img> tags at different screen

resolutions. Make sure the right size image is downloaded.

Use JavaScript to add Google Maps to the page when the browser can
support it and the document is wide enough to accommodate it.

Play taps for the header image

Our waterfall chart showed us that we had one large
CSS background image that was being hidden with
display:none. Despite the fact that the image never
shows up on the page, the browser still downloads the image.
So let’s make sure the image is only downloaded when it is
Remember ou
which downloardfriend, taps.jpg,
needed. How do we do that? By putting it in a media query so it

never shows up s on mobile but

only gets downloaded if the screen is wider than 480 pixels.
But instead of creating a whole new media query, put the CSS on the page?
rules in layout.css, which is already being included in the page via
a media query in the <link> tag.

Copy these lines from .header {

taps.css and add them background:URL('images/taps.jpg') repeat-x;
to the end of layout.css. height: 300px;
Delete these lines
from taps.css
} after you add
them to layout.css.

Test Drive
Check the On Tap Now page using the Blaze Mobitest to make sure taps.jpg is
no longer being downloaded. Try both iPhone and Android devices. You can
use http://hf-mw.com/ch2/ex/3/ontap.html if your copy of the page is not on a
public server.

66 Chapter 2
 www.it-ebooks.info
responsible responsiveness

It works on iPhone,
but the image is still
downloading on Android.

Android appears to still be

downloading taps.jpg.
Blaze’s Mobitest says Android is still downloading the
image, 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 be
downloaded.

Going old school with image optimization

Back in the early days of the Web, web developers spent a lot time worrying
about image optimization. As bandwidth has increased, web developers
stopped worrying about eking out every bit of performance from images.
But mobile devices make image optimization paramount once again.

We’d argue that imag It looks like we can make the taps.jpg image smaller with some basic web
optimization has e image optimization. Changing the JPEG quality from 80 to 45 makes the
always been paramount. image 78 KB instead of 440 KB,
Faster connections ar and you have to look very closely to
never a given, even fo e see any difference in image quality.
destkop computers. r zation,
For more on web image optimi ML
see Chapter 5 of Head Fir HT
st
with CSS & XHTML.
Images still not small enou
Smush them further at gh?
www.smushit.com.

Copy the optimized

version of taps.jpg from
the extras folder into
the images folder to
replace the original, large We’re using Photoshop to optimize this
file with a smaller version. photo for the Web, but you can use
your favorite web image editor.
you are here 4 67
 www.it-ebooks.info
scale images to the device

One src to rule them all

CSS images are just the beginning of our image woes. The <img>
tag presents problems for every responsive design because there can
only be one value for the src attribute regardless of screen size. So
how do we deliver the right size image?

labels on the On
There are 16 beerat use an <img> tag Despite the need for multiple versions of this image depending on
the
Tap Now page thr Benson’s Bubbler. screen size, HTML only allows one value for the src.
like this one fo
<img src="brews_images/bensons_bubbler.jpg" alt="Benson's Bubbler">

It’s tempting to replace the value of the src attribute using JavaScript.
Unfortunately, most browsers look ahead at the HTML document and preload
CSS can’t be used to
images before the JavaScript has been fully evaluated. This often means
override the value of the
one size file downloads before the JavaScript changes the src, resulting in
src attribute, either.
duplicate downloads and causing the browser to reflow the page layout.

A responsive image server to the rescue

If the browser can’t ask the server for the right image, the server will just have The image resizing service
to figure it out for itself. That’s what Sencha.io Src attempts to do. formerly known as TinySR
C
We can use Sencha.io Src to deliver the best‑sized image for every device.

full URL of
Set the first part of the src to Replace with your domain and After the slash, addtothehave resized.
http://src.sencha.io/. path to the images. the image you want

<img src="http://src.sencha.io/http://[DOMAIN]/[PATH]/brews_images/bensons_
bubbler.jpg" alt="Benson's Bubbler">

Sencha.io Src will resize the image to fit the size

of the device screen. For example, if an iPhone
Sencha.io Src visits the site, the image will be constrained to its
only shrinks screen size of 320 by 480 pixels.
images. Do this!
It doesn’t make
them bigger.
Enlarging images results in Update all of the brew label images in the
ontap.html document to use Sencha.io Src.
poor quality. It is better to find
a higher-quality source image.

68 Chapter 2
 www.it-ebooks.info
responsible responsiveness

How Sencha.io Src works

Sencha.io Src works like magic. You request an image from an iPhone, it gives you
an iPhone‑sized image. Using a feature phone? No problem—Sencha.io Src will
give 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 a ?
What’s a user-agent striningth
big database. The database contains information about thousands of devices. One loo k e
of the things these device databases track is the size of the screen. We’ll take a closer
next chapter.
Once Sencha.io Src knows the screen size, it goes to work scaling the image to
the maximum width of the device. It stores the image it created in a cache for 30
minutes so subsequent requests for the image at that size will be even faster. If you need Senc
provide a specificha.io Src to
No great solutions for <img> tags it can do that fo image size,
well. See how at htr you as
Using Sencha.io Src has drawbacks. It relies on device detection, which can
senchasrc. tp://bit.ly/
occasionally get things wrong (as we will discuss in more detail in Chapter 5). It also
requires you to route all your images through a third party.
The reality is that there are currently no great solutions for how to handle different
image sources for different screen sizes. But watch this space closely, because a lot Why is the <img> tag so
of people are trying to find a better solution. difficult? Read more in this
series on responsive image
One final tweak: optimized beer label images http://bit.ly/rwdimgs1. s:
As with the taps.jpg image, we can reduce the file size of the beer label images by
saving them at a slightly lower JPEG quality level. Don’t worry, we’ve optimized
them for you. Find them in the extras/labels-optimized directory.
Copy the optimized images into the brew_images folder, replacing any existing image
files.

Test Drive
We should have an efficient, fast, mobile‑optimized web page now. Test it
using www.blaze.io/mobile to see how we did. Select the option to have Blaze
run three tests on the phone to get an average. Compare the total file size
and download time of the new page to the original page.
If your pages are not publicly accessible, you can test using
http://hf-mw.com/ch2/ex/4/ontap.html.

you are here 4 69

 www.it-ebooks.info
performance, optimized

That’s a blazing-fast mobile web page

Our diet plan worked! The On Tap Now page is 87% slimmer
than it was before. iPhone download time has gone from
almost 12 seconds to under 3 seconds.

Before

Can you say “Bloated, S-L-O-W

loading page”?

After

The On Tap Now page’s post-

optimization results. Much better.

Mike is going to love

how fast the site is on
a mobile phone now.

Web performance optimization is a growing

field with many more ways to make
pages faster. What other performance
improvements could we make to this page?

70 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Q: Why do browsers download CSS images that are Q: What about other media? Do video and audio suffer
never used? from the same problems?

A: The browser usually can’t know for certain that an image

isn’t going to be used. It could be an image that shows up
A: In a word: yes. The HTML5 video and audio formats are
a little better because they allow you to define fallback versions
when some JavaScript or CSS activity triggers it. The browser of the media in different file formats. If your browser doesn’t
downloads the images in advance so people don’t have to wait support the first option provided, it will look at the second one.
if an activity suddenly triggers an image to be displayed.
But while better, this approach does nothing to address
network speed or resolution. Someone using a mobile phone
Q: OK, so why don’t they download images that are on a wireless network probably doesn’t need an HD‑quality
within media queries? movie. By contrast, Apple’s QuickTime video offers a movie
reference format that delivers movies based on Internet
A: Originally, browsers downloaded them as well. Browser
makers have seen how developers are using media queries
connection speed.

and are adjusting browser behavior accordingly. All of this

is fairly new, which is why some browsers still download
Q: Is it just me, or are there a lot of unknowns and
problems related to Responsive Web Design?
resources inside a media query that doesn’t apply.

Q: Is it safe to route our images through Sencha.io

A: There are definitely challenges. As with any new
technique, people are still trying to figure out what works and
Src? It makes me nervous. what doesn’t. RWD is bleeding edge. That’s why we’re covering
a lot of techniques in this book. It’s likely you’ll need to combine
A: Being cautious is reasonable. Any time you integrate a
third‑party service into a critical part of your site, you’re going
techniques to deliver the best experience for your project.
Despite the challenges, the promise of RWD inspires many
to be impacted if that service goes down.
people to strive to build more complete solutions. Things are
Sencha has said it is committed to providing this service and moving quickly when it comes to RWD.
that it will remain free. At the same time, you can be sure that if
a tremendously large site started using it, Sencha would need
to 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 service
using the device detection tools we teach in Chapter 5.

Q: Are there alternatives to Sencha.io Src? Are there

solutions to the <img> tag problem that are client side only?

A: There are many different ways to handle <img> tags

in responsive designs. A lot of work is currently underway to
find a solution that doesn’t require device detection. There
are compromises with every solution, including the one we’re
using for this project. You can find an extensive review of the
techniques at http://bit.ly/rwdimgs2.

you are here 4 71

 www.it-ebooks.info
to zoom or not to zoom?

Zoom, zoom, pow…

Sorry, guys! I hate to spring a new

requirement on you in the middle of your
work, but one of my best customers has trouble
seeing small text and is complaining that she can’t
zoom the page. Can you fix it?

Remember that viewport <meta> tag from

Chapter 1? Time to look at it more closely.
The viewport <meta> tag tells the browser the
intended dimensions and scaling (aka zoom level) for a
page. It also contains controls that can prevent users from
being able to change the size of the page.

Zoom in on the viewport <meta> tag

You’ll find the viewport <meta> tag in the <head> of
the ontap.html document. The syntax is pretty simple.

ains a
The content attribute cont instructions
comma-separated list of of the Width of the viewport. Can be set
for the browser. See all/metaviewport. pixels or can be set to “device-widthin,”
What type of options at http :// bit .ly
which tells the browser to match
<meta> tag is this? viewport to the device resolution. the

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Sets the initial scale (or zoom Declares a limit on The maximum-scale
level) of the page. Setting it to 1 how much the page is what is preventing
means that the document should be can be scaled up. the users from
displayed at its normal scale. There is also a similar zooming the page.
minimum-scale setting.

72 Chapter 2
 www.it-ebooks.info
responsible responsiveness

The right to zoom?

It seems like being able to zoom
is important for accessibility. Why
would anyone ever turn it off?

It can make a difference for accessibility.

Some web developers have gone so far
as to declare that zooming on mobile is a
fundamental 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 zoom
makes it easier for people to swipe successfully.
There is also a bug in iOS that causes
the zoom level to change when the
device is rotated into landscape
mode. The bug zooms the page in,
causing the right side of the page
to get cut off.

When you rotate an iOS vic

Turn zooming back on bug causes the page to nodelon e, a
fit in the viewport, cutting r ge
To turn zooming back on, we need to
the right side of the contenoff
remove the maximum-scale setting t.
from the viewport <meta> tag.
Do this! Edit the viewport <meta> tag
and remove “maximum-scale=1.”

<meta name="viewport" content="width=device-width, initial-scale=1" />

After you turn zooming back on,

rotate an iPhone or iPod Touch to Make sure you remove the extra
see the iOS zooming bug in action. comma after “initial-scale=1.”

you are here 4 73

 www.it-ebooks.info
map out the final step

Back to our regularly scheduled project

With our emergency viewport adventure out of the way, let’s take a look at our
progress. Our fast mobile page puts us very close to a mobile‑first RWD. All that’s
left to do is add the map back in if the screen is big enough.

Make the HTML as simple as possible and swap the order of the CSS
so that the mobile version is first.

Fix CSS background images so that only one file gets downloaded per
image. Make sure display:none is being used appropriately.

Supply different source files for <img> tags at different screen

resolutions. Make sure the right size image is downloaded.

Use JavaScript to add Google Maps to the page when the browser can
support it and the document is wide enough to accommodate it.

Add the map back using JavaScript

The only remaining item is to add the map back if the browser window is
wide enough. We’ve already seen that, if we hide and show the map using
CSS, 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 going
to need to put that back into the page in order to show the map. Let’s take
a closer look at the iframe code.

snippet that
Remember this iframeWe’re going to use
we commented out?rt it into the page.
JavaScript to inse

<!--
<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>
-->

74 Chapter 2
 www.it-ebooks.info
responsible responsiveness

On second thought, a map would be useful

Location. 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 of
triangulation, using location to provide more relevant content is common.
Mike hid the map on mobile because it was too big. Now that we’ve seen
how 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 embedding
a map on narrow screens, let’s link to the map.

Add a 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 you
think we need to order it that way?

Do this!
ript
go in g to ne ed a co ntainer for the JavaSc
We’re add a <div> here.
to reference, so we’ll

The id on the <p> <div id="mapcontainer">

tag will allow us to <p id="maplink">
insert the iframe
above the link for e <a href="http://g.co/maps/jm2pw">View Google Map</a>
wider screens. Mor </p>
on this soon. </div>
<!--
Add the new <iframe id="map" width="300" height="300" frameborder="0"
<div> above the scrolling="no" marginheight="0" marginwidth="0"
commented-out src="http://maps.google.com..."></iframe>
iframe code. -->

you are here 4 75

 www.it-ebooks.info
it’s kinda like a media query

Build a pseudo-media query in JavaScript

This variable is for the id of the
element we want to add the map to.
Let’s take a look at the JavaScript code we’re going to use to insert the
We’re using a variable to make the
iframe into the page. The code acts like a very simple media query.

Sets the breakpoint <div> easier to change in the future.

variable to 481 pixels.
The breakpoint is the <script type="text/javascript">
width at which the
map will be added to var breakpoint = 481,
the page. id = 'mapcontainer',
viewportWidth = window.innerWidth;
Checks to see
if the window
if (viewportWidth > breakpoint) {

viewport is largeroint var mapElement = document.createElement('iframe');

than the breakp mapElement.id = 'map';
Adds a new iframe
mapElement.width = '300'; element and assigns it to
These lines add all mapElement.height = '300'; the mapElement variable
of the attributes mapElement.frameborder = '0';
to our new iframe mapElement.scrolling = 'no';
element. The mapElement.marginheight = '0'; The URL
attributes and their mapElement.marginwidth = '0'; Google Maps
values were copied provides is
from the Google mapElement.src = 'http://maps.google.com/maps?f=q&so
urce=s_q&hl=en&geocode=&q=334+NW+11th+Ave,+Portland,+O ugly. You
Maps iframe snippet. R+97209&aq=&sll=37.0625,-95.677068&sspn=58.164117,80.3 probably
32031&vpsrc=0&ie=UTF8&hq=&hnear=334+NW+11th+Ave,+Portl don’t want
This final step and,+Oregon+97209&t=m&ll=45.525472,-122.68218&spn=0.01 to retype
adds the iframe 804,0.025749&z=14&output=embed'; it. Find a
(mapElement) into document.getElementById(id).insertBefore(mapElement, copy of
the mapcontainer maplink); this code in
<div> (id) before } extras/map.js.
the paragraph
containing the link </script>
(maplink).

Remove the commented-out iframe code

We no longer need the original iframe code, so delete it
from the HTML document.

<!-- Delete these lines!

<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>
-->

76 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Add the JavaScript to the On Tap Now page

Now we need to add the JavaScript to the page. Because the map is a
nice‑to‑have feature and not essential, we’re going to make it one of
the last things the browser adds to the page.

Open ontap.html and find the

bottom of the HTML document.

<div class="footer">
<p>See you soon! Love, The Splendid Walrus</p>
We’re going to add our </div>
JavaScript as the very last [INSERT SCRIPT HERE]
thing on the page before the
closing </body> tag.
</body>
</html>

Putting nonessential JavaScript at the bottom of the page is a

great way to make a page load faster. The browser will parse all of
the HTML and CSS before it gets to the JavaScript. Our visitors
will have a usable page more quickly and won’t be stuck waiting
for the map code to load.

Time to put our work to the test. Grab ontap.html and answer the following:

1 Does 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 is
downloading. If your web page isn’t on a public network, you can use
http://hf-mw.com/ch2/ex/5/ontap.html to test.

2 Does the map show up on larger screens?

Open the On Tap Now page in your favorite desktop browser. Does
the map show up when the window is wider than 480 pixels?

3 How does the map fit into the responsive design?

Try adjusting the size of your browser window. Does the map scale
like the rest of the design? Are there any problems with the map?

you are here 4 77

 www.it-ebooks.info
is the map responsive?

How’s it looking? Any problems?

1 Does the JavaScript get downloaded on mobile phones?

Check the page using an iPhone on the Blaze Mobitest service.
Make your way to the detailed waterfall chart by clicking the HAR
file 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 still
downloads, but it is another false report.
We mentioned that Blaze had to modify its phones to make them
work for remote testing. One odd by‑product of this modification is
that JavaScript running on its test phones reports the screen width
as much wider (800 pixels!) than what unmodified phones do.
You’ll have to take our word for it that the JavaScript works and
the map code isn’t downloading on Android, either.

Look Ma, no Google Maps downloads.

2 Does the map show up on larger screens?
Yep. The map looks great in our desktop browser.

The map shows up in Chrome, which

means our JavaScript is working.

3 How does the map fit into the

responsive design?
Uh oh. We’ve got some problems here. The
map doesn’t scale like the rest of the responsive
design. Not only that, but there are some screen
widths where the map overlaps the beer labels.

Yikes. When the browser window

narrows, the map overlaps the
beer labels.
Why isn’t the map scaling like
the images on the page?

78 Chapter 2
 www.it-ebooks.info
responsible responsiveness

These widgets aren’t responsive

The iframe code for Google Maps isn’t

designed to be fluid. It hardcodes the width
to 300 pixels. I bet if we change the iframe
to use CSS, we can make it fluid.

Responsive Web Design is so new

that widgets like Google Maps are
unlikely to be fluid by default.
When companies provide widgets to embed in other
web pages, they do everything they can to make
sure the widget will work regardless of the page
layout. That often means hardcoding things like
height and width in the HTML itself.
Dealing with poorly built third‑party widgets is a
problem for nearly every mobile site. Responsive
designs have an additional requirement that
widgets be fluid.

Width and height are fixed, which

prevents the map from scaling.

<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"

marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>

Many of the attributes on this iframe could

be moved to CSS.

Ideally, our HTML would only contain the

content and markup. It wouldn’t contain any
presentation information.

Which CSS properties map to the

attributes used in the iframe?

you are here 4 79

 www.it-ebooks.info
use css for presentation

Move iframe attributes to CSS equivalents

Let’s move as many of the iframe’s attributes to CSS as possible
and make them fluid while we’re at it.
First, we need to create a list of attributes we want to move to CSS
by identifying which attributes are for presentation and which are
content or metadata.
Presentatio Presentation
Metadata n Presentation Presentation

<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"

marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>

Presentation Presentation Content

All those presentation attributes belong in the CSS.

Match styles to attributes

Do this!
Some of the attributes share the same name with their CSS
comrades. We don’t have to look hard to find the CSS version of
width and height. Others, like frameborder, are obscure
attributes. Fortunately, the CSS counterparts are still fairly
straightforward. Add these rules to
Our new CSS rules layout.css.
h e ifr a m e attributes for the map iframe
T To make the iframe
<iframe fluid, we’re changing
id="map" from a set number
#map { of pixels to a
width="300" percentage like we
width:100%;
height="300"
height:100%;
learned in Chapter 1.
frameborder="0"
border:none;
scrolling="no"
overflow:hidden;
marginheight="0" In CSS, scrolling is
marginwidth="0"
margin:0; controlled by the
} overflow property. This
src="http://maps. says we want to hide any
google.com..."> extra content instead
</iframe> of adding scroll bars. It
accomplishes the same
thing as scrolling = “no”.

80 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Remove attributes from the JavaScript

Now that we’ve got CSS doing the heavy lifting, let’s modify our
JavaScript so the presentation attributes aren’t set. Remove the Find the JavaScript at
lines that add the presentation attributes that we identified. the bottom of ontap.html.

<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';

Delete thesethe
mapElement.frameborder = '0';

lines from . mapElement.scrolling = 'no';

JavaScript mapElement.marginheight = '0';
mapElement.marginwidth = '0';
mapElement.src = 'http://maps.google.com/maps?f=q&so
urce=s_q&hl=en&geocode=&q=334+NW+11th+Ave,+Portland,+O
R+97209&aq=&sll=37.0625,-95.677068&sspn=58.164117,80.3
32031&vpsrc=0&ie=UTF8&hq=&hnear=334+NW+11th+Ave,+Portl
and,+Oregon+97209&t=m&ll=45.525472,-122.68218&spn=0.01
804,0.025749&z=14&output=embed';
document.getElementById(id).insertBefore(mapElement,
maplink);
}
</script>

Test Drive
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. How
does the map look?

you are here 4 81

 www.it-ebooks.info
map misbehavior

No one should have trouble finding the pub now

The map got a little full of itself, didn’t it? It nearly took over the whole
left column. Soon it will start singing, “I’m the map, I’m the map” to get
our attention—unless we tame it.
If you make the window narrow, you can begin to see why the map
might be trying to get our attention. The map gets squeezed until it These screenshots are from
turns into a thin, tall strip that is completely unusable. Safari. Other browsers behave
differently. The map isn’t doi
We still want the map to scale, but we need to set some boundaries on
what we want in any of them. ng
how far it scales in each direction.

1 The height of the map is too big.

Setting the height to 100% makes the map longer
than the tallest image on the page. Let’s keep the
map a little more under control by setting the
height to 400px.

Add this line to the

#map CSS rule. height: 400px;

2 Hey look, the map is wearing skinny jeans.

When the window gets narrow, the map gets so thin
that most of the information cannot be seen. We need
to set a minimum width so that the map doesn’t go
beanpole on us.

After adding
the two new lines,
your #map rule in #map {
layout.css should width:100%;
look like this.
height:400px;
border:none;
overflow:hidden;
margin:0;
min-width: 200px;
}

82 Chapter 2
 www.it-ebooks.info
responsible responsiveness

The map overlap is back

I thought the whole reason for

making the iframe fluid was to get rid of
the overlap. We’ve got everything in CSS now,
but the map is still covering up the beer labels
when you make the browser window narrow.

Moving the iframe presentation attributes

into CSS was the first step. Now we need
to take a fresh look at our media queries.
In Chapter 1, we used media queries to switch the layout
at 480 pixels. We determined that width based on the
width of popular smartphones.
What we’re seeing with the map is that we need to look
at the content of the page when we make decisions
about where to apply media queries.

The map is co
again when thevering up the beer labels
window is narrow
.

you are here 4 83

 www.it-ebooks.info
become one with your content

Let the content be your guide

There’s a problem with using 480 pixels as our breakpoint
for the media query. Not every phone has the same width.
And even if a majority of them do today, who’s to say that
540 pixels won’t be the most common size in the future?
A better approach is to let your content be the guide on
when to make changes to the layout.
We’re not asking you to commune with your content until
it starts to speak to you. But if you adjust the size of your
browser window until things don’t look right, the content
will tell you a lot.
Maybe images are getting too small. Maybe the columns
are too narrow.
When those things happen, that’s where you need a
breakpoint. Then you can craft a media query to change
the presentation at that breakpoint.

We shouldn’t pay so much attention

to typical mobile and desktop screen
sizes. When the content breaks the
layout, it is telling us to adjust our
media queries and JavaScript.

84 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Time to bend and stretch that browser

We need to put our content through its paces by making the page as
big 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 the
screen is when something looks wrong on the page. The easiest way to
do this is to install a bookmarklet that will show you the window size.
A bookmarklet is a
stored in a browser lit tle bit of JavaScript
bookmark.
Install the bookmarklet in your browser
Go to http://bit.ly/window-resize and drag the link labeled Window Size
into your bookmarks toolbar to create the bookmarklet. Click the
bookmarklet to activate it. Resize your browser and watch the numbers
change in the upper‑left corner of the browser window.

click

The Window Size bookmark in ndow Size

When you click the With
ds e size of
Safari’s bookmark bar. bookmarklet, it ad per-left
the window in the up
corner.
Optional: Install an extension
There is an extension for Google Chrome that not only will show
the window size, but will also resize your window to match common
screen resolutions. You can get it at http://bit.ly/chrome-resizer.
The Web Developer Toolkit (http://bit.ly/webdevtoolkit) will display
page size in the title bar along with a bunch of other useful tools.
It works in Firefox and Chrome.

Load 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 the
content looks odd.

you are here 4 85

 www.it-ebooks.info
sharpen solution

Let’s review some of the trouble spots that show up

when you resize the browser.

610 pixels: Beer labels touch the map.

At around 610 pixels, the labels touch the map.
If we’re going to create a new breakpoint to
address this problem, we’ll need to do it before
they touch. This means instead of using 610,
we’ll use 640 pixels as the breakpoint.
Where’s t
whitespacehe
gone?

1,200 pixels: Huge beer labels.

As the browser gets wider, the beer
labels become ridiculously big.
Where they become too big is an
aesthetic judgment. For our tastes,
they start getting too big when
the browser is 1,200 pixels wide.

Did you see other problems as you resized

the browser? How significant do you think a
problem needs to be before it makes sense
to address it with an additional media query?

86 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Breakpoints to the rescue

All in all, not too bad. Just a couple of small tweaks to the
CSS should do it.

Shrink the humongous beer labels

There are currently three beer labels in each row. When the
page gets wider, there is room for four beer labels per row. This change only happens if the
window is bigger than 1,200 pixels.
Create a media query for windows wider than 1,200 pixels
that changes the beer labels to four across the page.

@media screen and (min-width:1201px) {

Setting the width of the list item (li) .taplist li {
containing the beer labels to 25% will width: 25%; Add these rules
put four labels on each row. to layout.css
}
}

Going to one column sooner It’s common to make images smaller

Even if the beer labels didn’t overlap with the map, the proportionally as screens get wider.
layout is getting very crowded at 640 pixels. Instead
of adding a new breakpoint to address the overlap, we
Our HTML, JavaScript d
480 pixels, so we’ll need, an
can move our existing media query from 480 pixels CSS all reference
to 640 pixels. to update all three.
Making this change will convert the layout to a single
column and hide the map. This has the added benefit
of applying the single‑column layout to phones bigger
than 480 pixels. ontap.html

<link rel="stylesheet" type="text/css" href="layout.css" <script type="text/

media="all and min-width: 641px)"> javascript">
var breakpoint = 641,

Set min-width Set breakpoint ...

to 641px. in JavaScript </script>
to 641px.
taps.css
/* Mobile/lower-resolution devices
*/ Set max-width
@media screen and (max-width:640px) to 640px.
{

you are here 4 87

 www.it-ebooks.info
slimline, responsive—it’s a whole new walrus

Widescreen view with four beer labels per row

You guys rock! The page
is fast and looks great.
Drinks are on the house.

Narrower views go to one

column and hide the map.

Lightweight and
fast on mobile
You can use
http://hf-mw.com/ch2/ex/
Our mobile-first responsive design is complete to run your own speed tests. 8/ontap.html

Make the HTML as simple as possible and swap the order of the CSS
so that the mobile version is first.

Fix CSS background images so that only one file gets downloaded per
image. Make sure display:none is being used appropriately.

Supply different source files for <img> tags at different screen

resolutions. Make sure the right size image is downloaded.

Use JavaScript to add Google Maps to the page when the browser can
support it and the document is wide enough to accommodate it.

88 Chapter 2
 www.it-ebooks.info
responsible responsiveness

Q: What exactly is a viewport? Q: What are breakpoints? Q: Why does the overlap with the map
occur in the first place?
A: Imagine taking a sheet of cardboard A: Breakpoints are just a fancy way of
and cutting out a rectangle in the middle of
it. Lay that rectangle over your monitor so
describing the resolution at which a designer
decides to change the layout of a page. This
A: Because the map is an element that
doesn’t scale with the browser window.
you can only see the portion of the web page is usually done via media queries checking When the window is small, the browser can’t
that shows through the rectangle. That’s to see if a page is narrower or wider than a scale the map any smaller, so the left column
what a viewport does for web pages. certain number of pixels. ends up overlapping the right column.
A complex responsive design may have
Q: So the viewport <meta> tag multiple breakpoints, including some that Q: Doesn’t adding a min-width
tells the browser what size to make the make wholesale changes to the layout as to the map break the responsive design
viewport? well as some minor breakpoints that only by creating an element that doesn’t scale
make a few targeted tweaks to fix minor with the browser window?
A: Exactly. By default, iOS sets the
viewport to 980 pixels. If you’ve optimized
layout issues.
A: Technically, yes. It seems like a decent
your page for smaller screens, setting
the <meta-viewport> tag lets the
Q: I don’t want to prevent people solution here because we’ve modified the
media queries to address overlapping
from zooming, but that iOS bug is pretty
browser know to set the viewport accordingly. heinous. Is there any way to enable content. Another option would have been to
zooming and not have a broken page? use media queries to adjust the dimensions
of the map and proportions of the columns.
A: You can find a JavaScript workaround
at https://gist.github.com/901295.

ƒ Adding media queries to an existing desktop site may ƒ Mobile‑first RWD is another form of progressive
make it look good on mobile, but doesn’t mean that it is enhancement that uses screen size to determine how
mobile optimized. to enhance web pages.
ƒ Because most mobile browsers don’t support plug-ins, ƒ Designing for mobile first forces you to focus on what
there are fewer tools to assist mobile web developers. really matters, thus helping you remove cruft from
ƒ Using a proxy server or a testing solution like Blaze pages.
Mobitest can help you see what is actually getting ƒ Internet Explorer 8 and below do not support media
downloaded by a mobile browser. queries. Conditional comments are a workaround.
ƒ HTTP archive files and waterfall charts are essential ƒ JavaScript can augment media queries by testing for
performance tools. screen size and adding content when appropriate.
ƒ Mobile-first Responsive Web Design helps optimize ƒ Instead of designing breakpoints based on the typical
web pages by making sure that smaller resources are screen resolutions, let the content dictate the
downloaded by default. resolutions at which you need to modify the layout.

you are here 4 89

www.it-ebooks.info
 www.it-ebooks.info

3 a separate mobile website

Facing less-than-awesome
circumstances
Beautiful, harmonious,
responsively designed websites
that work for all browsers and
devices known to man...was it all
but a wonderful dream?

The 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-first
approach. Mmm…tasty. But what happens when a stinky dose of reality sets in? Like
legacy 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.

this is a new chapter 91

 www.it-ebooks.info
creature comforts

Creature Comforts has agents in the field

Creature Comforts International is a worldwide, nonprofit agency that
helps treat sick or injured livestock in areas hit by natural disasters
and provides support to affected farmers and ranchers. Until recently,
the organization relied on voice communications or the occasional
ruggedized laptop for their agents to coordinate personnel and supplies.

Creature Comforts serves

a lot of areas where the health and
safety of livestock is tantamount to
the citizens’ financial well-being and But being able to access and
recovery after a disaster. exchange information—quickly—about
people and supplies in our system is
getting harder as we grow.

Creature Comforts’
VP of Communication

92 Chapter 3
 www.it-ebooks.info
a separate mobile site

How can agents get and share the info

they need?
Creature Comforts is not a new organization; its roots go back over
two decades. It already has a lot of internal infrastructure, including
a significant “traditional” web presence built on a proprietary content
management system (CMS).

We’ve got people

worldwide who need to
stay in touch and get information
while in the field. We have web
tools for that already...
...but our current
website doesn’t look good or
work well on mobile phones.

An increasing need for mobile web

Increasingly, the Creature Comforts staff is finding that the most
reliable—and often only—connectivity in the field is via the local
cellular 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 a
wide array of devices on a wide array of connections.

you are here 4 93

 www.it-ebooks.info
sometimes separation makes sense

This sounds like a great project. Can’t wait to get in

and make the agency’s CMS deliver more mobile-friendly
content and use some responsive design goodness.

Frank: I’ve got a bit of bad news. Creature Comforts doesn’t have
a very big budget. There are some internal politics involved. And it
would take a huge effort to extract the group’s administrative and
content‑publishing processes from its older, proprietary CMS. We can’t
touch 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. Creature
Comforts’ website is big and complicated, but the only part the group
feels it is vital to make mobile‑optimized is its so‑called Comforts
Logistics Portal. This web application lets agents give and receive
updates and coordinate scheduling and supply drops. This part of the
desktop 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 separate
site for mobile users.
Jim: That sounds messy.
Frank: The mobile web can be a messy job. You know that. We need
Jim to make this work, and work reliably, for a lot of people scattered
Frank
around 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 spotty

Sometimes it makes
at best. We need a lean, simple, and functional mobile website that
helps these folks get their jobs done. We simply can’t wrangle their

sense to create a
existing desktop stuff into what we need.

separate, standalone
site for mobile devices. Scared of programming?
Don’t sweat it too much.
There is some talk of APIs and web
applications whirling around, but
we won’t make you do any of the heavy lifting. Leave
the programming up to us—your job is to help us
make it look good and work well on the mobile web.

94 Chapter 3
 www.it-ebooks.info
a separate mobile site

Q: What does a content management system (CMS) do?

This is the situation with Creature Comforts. Its CMS, designed
several years ago, has only one set of templates. Retooling
the system from the ground up would be too expensive for the
A: A web CMS is a combination of editing, publishing, and rights
management tools for creating and managing web content. Some
organization right now.

CMSes are quite full‑featured and provide an environment for

developing web applications quickly (sometimes these are called
Q: Is adapting for mobile devices a problem with every web
CMS?
content management frameworks, or CMFs).

CMSes let administrative users, who might not be familiar with HTML A: The number of CMSes out there is bewildering. Some are more
easily adapted for mobile devices than others. The problem of mixing
markup or web design, create and manage content.
content, logic, and presentation is certainly one suffered by many
There are CMSes in both the open source and commercial spaces, popular CMSes.
written in every programming language you can think of. Examples The development communities and companies behind many CMSes
include WordPress, Drupal, DotNetNuke, Joomla!, and SharePoint. are actively working on subsequent releases that are optimized for
Larger or specialized organizations sometimes create their own CMS delivering content to different types of clients. And forward‑thinking
software. folks in the mobile web world are reimagining ways of structuring
content—treating content more systematically, like application data,
Most CMSes also handle the publishing of content, using templating to makes its reuse across multiple platforms more straightforward.
systems or other mechanisms. This can make the transition to
support mobile devices tricky, as, in many cases, the content is
tangled up with presentation layers.

APIs Up Close

APIs (application programming interfaces) are systematized,

clearly defined interfaces created so that different software systems
can talk to one another. An example of a popular API on the Web is
the Twitter API. The Twitter API defines a set of methods that web
programmers can use to retrieve and alter data in the Twitter system.
The Creature Comforts web application team coded the part of
Unlike its CMS, Creature the website that allows agents and admins to manage people and
Comforts’ API doesn’t supplies among the far‑flung teams. As part of this development, the
conflate logic and presentation. team created an API that can be used to get and update information
So it will make our mobile for team members and materials.
optimization a lot easier.
The API returns structured data that our mobile web dev team can
use to build a mobile web version of the Creature Comforts site.

you are here 4 95

 www.it-ebooks.info
hold while your request is redirected

Send mobile users to a

mobile-optimized website
Sometimes it’s necessary to have a separate website
for mobile devices and desktop browsers. Often,
you’ll want your users to be able to go to a single
domain—e.g., www.example.com—and automatically
get routed to the appropriate site based on their
devices.

Different kinds of
devices and browsers
request the website (e.g.,
www.example.com).

A script on the web server

examines the incoming request www.example.com
and attempts to determine
whether the client is mobile.

Mobile clients are redirected

to the mobile site. Desktop clients stay on the
desktop-oriented site.

m.example.com www.example.com

96 Chapter 3
 www.it-ebooks.info
a separate mobile site

Sniff out mobile users

To make this setup work—rerouting mobile devices to the
mobile‑optimized site—the web server needs to know if an
incoming request comes from a mobile device or not.

How can you “know”

which browsers are mobile?

We’re going to make a stab at

determining whether a user is
on a mobile device or not by
looking at the User-Agent HTTP
header sent by the browser.
There are other techniques, but user‑agent
detection is a very common server‑side
approach for device detection.

This technique is commonly

called “user-agent sniffing.”

A user-agent string is a
piece of text that serves
as a sort of ID card for
a client application (in
our case, web browsers).
Each unique browser is
a unique user agent.
“User agent” is often
abbreviated to “UA.”

you are here 4 97

 www.it-ebooks.info
user-agent sniffing (seriously)

Getting to know user agents

Web browsers—and, yes, that includes mobile browsers—send a User-Agent
header as part of the HTTP request whenever the browser sends a request
for 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‑called
user-agent sniffing was the bane of millions of users faced with ubiquitous “This
site better viewed in Internet Explorer” (or Mozilla or Netscape or whatever the
preferred browser flavor was at the time).

GET /pretty.png HTTP/1.1

Request line

Host: www.example.com
Accept: text/html,application/xhtml+xml,application/xml
Accept-Encoding: gzip,deflate,sdch Request headers
Referer: http://www.example.com/foo
User-Agent: Opera/9.64(Windows NT 5.1; U; en) Presto/2.1.1

Request body (if any)

Simplified structure of an HTTP request

User-agent archaeology
The structure of user‑agent strings today is a curious and sometimes confounding
patchwork of convention, confusion, and trickery. Full order has never successfully
been imposed over how they are written. So you can end up with things like:

Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, like Chrome 14 running on

Gecko) Chrome/14.0.792.0 Safari/535.1 Windows Vista…of course!

Why would the user agent for Chrome on Windows mention Safari? What’s
KHTML, and how is it “like” Gecko? Like your appendix or the stumpy leg
remnants in whales, some of this is evolutionary cruft.
The vestigial “Mozilla compatibility flag” (Mozilla/5.0 in the example above) is
practically omnipresent to this day, though it doesn’t mean much anymore. Mentions
of Mozilla, KHTML, Gecko, or WebKit are UAs’ way of claiming that their layout
engines are comparable to or “better” than those. At the time of this writing, all
WebKit‑based browsers on mobile devices except for Android mention “Safari” in
their user‑agent string (Apple originally developed WebKit, basing it on KHTML).

98 Chapter 3
 www.it-ebooks.info
a separate mobile site

User Agents Way Up Close

Let’s take a deeper look at the pieces of some real‑life
user‑agent strings.

Chrome 14 running on Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML,

Windows Vista (we met like Gecko) Chrome/14.0.792.0 Safari/535.1
this on page 98).
Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0;
Trident/3.1; IEMobile/7.0; SAMSUNG; SGH-i917) A Samsung phone running
Windows Phone 7
A BlackBerry BlackBerry9700/5.0.0.442 Profile/MIDP-2.1 Configuration/CLDC-1.1
9700 (Bold) VendorID/612

Analyze some of the pieces

Windows NT 6.0 Browser name and version

Windows Phone OS 7.0
Platform, OS, and version IE Mobile/7.0
BlackBerry9700/5.0.0.442
Chrome/14.0.792.0

MSIE 7.0
Safari/535.1
This browser is
KHTML, like Gecko
“compatible with” Java runtime for
Mozilla/5.
0 or historically Profile/MIDP-2.1
mobile devices
Mozilla/4.0
based upon…
Configuration/CLDC-1.1

…miscellaneous elements Java ME framework

Layout engine (Trident specification
is IE’s layout engine). Identifies the
VendorID/612
AppleWebKit/535.1 vendor/carrier
Trident/3.1
SAMSUNG; SGH-i917
This Samsung sends model
info. While not rare, this
isn’t necessarily common.

you are here 4 99

 www.it-ebooks.info
what's my purpose

1
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.17

2 Presto/2.1.1
Opera/9.64(Windows NT 5.1; U; en)
3
Mozilla/5.0 (BlackBerry;
U; BlackBerry 9800; en-US)
(KHTML, like Gecko) Versio AppleWebKit/534.1+
n/6.0.0.246 Mobile Safari
/534.1+

You’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.

Presto/2.1.1 OS, platform, and version

Apple WebKit/534.1+ Historical/compatible flag

Windows NT 5.1 Browser name and version

Mozilla/5.0 Layout engine

Version/6.0.0.246 Historical/compatible flag

KHTML, like Gecko Layout engine

Opera/9.64 Browser version

Answers on page 102.

100 Chapter 3
 www.it-ebooks.info
a separate mobile site

User agents: spawn of Satan?

So, if we use user-agent sniffing to

figure out which devices are mobile,
isn’t that just enforcing the same
old bad behavior that created the
user-agent mess in the first place?

Well, sort of.

Utter the term “user‑agent sniffing” loudly in a room full of
web developers, and you’ll invariably get some stern looks of
disapproval and a couple of urgent, strangled sounds.
User‑agent sniffing rubs a lot of developers the wrong way. We’ve
already seen how complex user‑agent strings can be. In addition,
user‑agent spoofing, in which a user (purposely or not) configures
his or her browser to send a different UA header, is common. And
there are thousands upon thousands of unique UAs, with more
entering the market every single day.
Detecting mobile browsers by sniffing user agents on the server
can definitely seem like an inelegant and inaccurate hack. But
sometimes it’s the best (if crude) tool for the job.

Can you think of some reasons why user-agent

sniffing might be a necessary evil?

you are here 4 101

 www.it-ebooks.info
exercise solution

SOlUTion

Presto is the Presto/2.1.1 OS, platform, and version

Opera browser’s
layout engine.
Apple WebKit/534.1+ Historical/compatible flag

Windows NT 5.1 Browser name and version

Mozilla/5.0 Layout engine

Version/6.0.0.246 Historical/compatible flag

KHTML, like Gecko Layout engine

Opera/9.64 Browser version

What browsers are these?

Curious about the example user‑agent strings used for this
exercise (on page 100)? Here are the clients they came from,
unmasked for you:

1 A Droid Eris (aka HTC Desire) Android

phone running the Android 2.1 browser Not all user-agent
2 strings follow
consistent patterns.
Opera 9 running on Windows XP

Some user-agent strings

3 BlackBerry 9800 (Torch) running the
make a lot more sense
BlackBerry OS 6 browser
than others. User agents don’t all
use the same constituent parts, and
Compare the BlackBerry Torch (OS 6) UA on page 100 some are outright peculiar. There are
against the BlackBerry Bold (OS 5) UA on page 99. some basic patterns that most follow,
Different, huh? As of OS 6, BlackBerry browsers use but don’t rely on that too much. Don’t
the WebKit layout engine, and their UA strings look a worry! We have some good tools to
lot more like other WebKit browsers. account for (most of) this.

102 Chapter 3
 www.it-ebooks.info
a separate mobile site

A few reasons. Two common motivations you ask for. Disagreement abounds between
Q: What about the other parts of user-
are privacy and the desire for a specific
experience. Some users don’t want to share
developers on this point. There be dragons.
Tread lightly.
agent strings on page 99 that you didn’t
information about what browsers they are
explain? What does en-us mean? What
does U mean?
using. In other cases, a user might want
to try to see web content in a particular
Q: Hey, you totally neglected to
mention UAProf.
way. A popular example is the “desktop
A: The “en‑us” is language information,
and means that the browser and its interface
mode” available in several mobile browsers. A: Many mobile devices send UAProf
By turning this on, users are often (and (User‑Agent Profile) headers when making
elements are localized for English, US‑ sometimes unknowingly) causing the requests, often (but not always) as the
style. The “U” indicates that the browser browser to send a different User-Agent
has “strong” security (as opposed to “I” for
x-wap-profile request header. The
header, one that looks more like a desktop UAProf specification gives mobile handset
“weak” security, or “N” for no security at all). browser. Sometimes this is done sanely, manufacturers a way to provide information
To analyze other various bits of user‑agent and is just fine—Windows Phone 7 desktop about the device. Usually, a link to the
strings like this, make a trip to the ever‑so‑ mode user agents are relatively easy to spot. location of the UAProf is provided in the
useful www.useragentstring.com. But not always. Take a look at the user‑ request header.
agent string that one of the Android versions
Q: Is there seriously a different user of the mobile browser Skyfire sends when in This sounds pretty good, but unfortunately,
agent for every build, release, version, desktop mode: not all devices and browsers send UAProf
platform, device, whim, and vendor out headers. Additionally, a rather unpleasant
there? Mozilla/5.0 (Macintosh; percentage of the links to UAProfs are
not valid. And there is inconsistency in the
A: Pretty much.
U; Intel Mac OS X 10_5_7;
en-us) AppleWebKit/530.17 amount and quality of the data in the UAProf
files themselves.
Q: Does anything else send
(KHTML, like Gecko)
Q: OK, so, there are a million billion
Version/4.0 Safari/530.17
User-Agent headers besides
If that looks an awful lot like desktop OS user agents and UAProfs aren’t all
browsers?
X Safari, that’s because that user agent that reliable, yet you claim that there
is completely identical to one of the user
A: Several other kinds of applications
that make requests to web servers also
agents for desktop Safari.
is a sane and reasonable way to do
user-agent-based detection?
send User-Agent headers. These
include, but aren’t limited to, search engines,
Q: But if someone has gone to the A: In Chapter 5, we’ll be meeting some
trouble of disguising his mobile browser organizations and projects whose entire
crawlers, and various Internet bots (both
as a desktop one, shouldn’t we respect existence is concerned with tracking user
benign and nefarious). Sometimes web
his wishes and give him a desktop agents and building databases of metadata
server logs capture user‑agent information
experience? about them and other data sources like
about unusual things that are accessing
our sites, like a web viewer built into, say, a UAProfs. Until then, we’ll keep it simple
note‑taking desktop application, or a web
A: Though this is a delicate question of
philosophy, we tend to lean toward “yes,”
and use a basic server‑side script to look
bookmarking tool, or a monitoring service that for user‑agent strings that bear the primary
and fill in the gaps with responsive design hallmarks of mobile browser user agents.
pings a site to make sure it is operational.
(which will adapt to the environment no
Q: Why would people “spoof” their
matter who or what the browser claims to be,
assuming the browser is modern enough to
browser’s user agent?
support media queries and the like). There’s
a bit of a gray area in terms of whether users
A: Why would anyone purposely ask
their browser to “lie” for them, you ask?
know what they’re doing or not, but, hey, as
far as we’re concerned, you should get what

you are here 4 103

 www.it-ebooks.info
user-agent sniffing isn't all bad

Straight talk: Most major sites have a

separate mobile website
The 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 route
traffic. If user‑agent sniffing is so derided, why is this the case? There
must 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 fits
naturally on the server side. If we’re sending mobile requests off to a
separate 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 clue

The User-Agent header, while imperfect, is the most
straightforward and reliable clue the server has about the
requesting browser. There are a few other HTTP request headers
that provide hints to a client’s “mobileness,” but none so ubiquitous
as that maddening User-Agent header. It’s the best option in a
pile of not‑so‑great alternatives. And, while we’ve gone to certain
lengths to point out where user‑agent sniffing can go wrong (hey,
devil’s advocate!), most of the time it can be used accurately, especially
when wielded responsibly.

OK. Say we do build a separate mobile

site. How exactly are we going to see the user
agents of requesting browsers...and how are we
going to get the mobile traffic to the new, mobile
version of Creature Comforts?

We can use a simple, freely

available script to perform
basic mobile device
detection.

104 Chapter 3
 www.it-ebooks.info
a separate mobile site

When what you really want to do is (re-)direct

Wouldn’t such a script
need to go on Creature Comforts’
existing (desktop) web server so it can
detect mobile browsers and redirect them
to our mobile site? I thought we couldn’t
make any changes to the existing site.

Good catch. Fortunately, Frank and

Jim have been able to work with
Creature Comforts’ IT department.
We’ll be able to put a simple redirect script on
the agency’s existing web server. The web team
at Creature Comforts will include the mobile
detection script at the top of each page, so that
mobile traffic can be redirected.

Get ye to the script

Time to make a quick trip to
www.detectmobilebrowsers.com. There you’ll
find a free, simple mobile detection script.
We want to be sure you have the latest
version, so go get it now! Make sure to
download the PHP version.

The script is available for

many different languages
and platforms. We want the
PHP version.

you are here 4 105

 www.it-ebooks.info
script taming

Take a peek at the script

<?php
1
$useragent=$_SERVER['HTTP_USER_AGENT'];
2 if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iem
obile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phon
e|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|wi
ndows (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|r60
0|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(f
t|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|v40
0|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|8
1|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)))
3 header('Location: http://detectmobilebrowser.com/mobile');
?>

detectmobilebrowser.php.txt
This is the script!
The one you
download might
not look exactly The script might look a bit
Do this!
the same (it beastly right now, but we don’t
might be a newer have to do much to tame it.
version), but it When you first open up
Rename this file
should be similar. detectmobilebrowser.php in your preferred text editor, you
might find it a bit…brutal‑looking. But fear not. We’re redirect.php and save it
going to walk you through the basics of how it works, inside the chapter3 folder.
but, really, all you have to do to get it to work is make a
couple of small changes—and we’ll show you how.

106 Chapter 3
 www.it-ebooks.info
a separate mobile site

How does the script work?

The script examines the user‑agent string and determines
whether it seems mobile—and if so, it redirects. It does
this in three steps:

1 It grabs the requesting browser’s user-agent string.

In PHP, this is accessible in the global
$_SERVER['HTTP_USER_AGENT'] variable.

2 It uses some carefully crafted regular expressions.

There are two regular expressions here. Both look at the A regular expression, a.k.a.
user‑agent string and see if it matches known mobile values. “regex” or “regexp,” is a
You can probably spot some obvious snippets like “hiptop” or formal means of matching
“symbian.” But there are some more obscure things in here as patterns in strings.
well—these regular expressions were developed by people who
really know the mobile landscape!

3 It redirects browsers whose user-agent string

matches either of the regular expressions.
If the browser’s user‑agent string matches either of the
regular expressions, the script sets a Location header with
the designated place to redirect mobile traffic.

By default, mobile traffic is redirected

to www.detectmobilebrowser.com/mobile —
we’ll need to change this.

Make sure your working

environment is seaworthy
A few safety checks before we continue!
The next sections—and many more in the
book—require you to have a working web
server that allows you to use PHP. This
can be your own computer, or you can
use a hosting provider; we’re not picky.
But if you haven’t done so yet, go now to
Appendix ii and find information about
how to get yourself squared away.

you are here 4 107

 www.it-ebooks.info
tweak your redirect script

Make a mobile mockup

Jim: 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 work
with the agency’s APIs and do the mobile design at the same time, so I’ve
whipped 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 working
with older phones that might not understand media queries and other things
that make responsive designs work so well. I took the desktop HTML templates
for the current Agent Portal landing page dashboard thingy, simplified the heck
out of them, and refactored the CSS to be mobile‑friendly. I used some sample
data 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 we
going to test that?
Frank: Well, you heard that we’ll ultimately put it on Creature Comforts’ server
and those folks will call it from every page they serve. But for now, we’ll want to
test it locally to check out how the redirect will behave.

The name of the web host (e.g.,

A few tweaks to the mobile redirect script “www.example.com,” “localhost,”
We’ll need to make a few customizations to the redirect script so that we can see it or “10.0.0.2” or somesuch if
in action. We’ll want to add a new line to define where the script should redirect you're doing your work on your
if it sees a mobile user. The PHP $_SERVER['HTTP_HOST'] variable is the own computer)
name of the web host that the script is running on.
We’ll also want to edit the line that sends the Location response
Just as there are request HTTP
header—we want to redirect mobile traffic to our mobile mockup, not the
headers (like User-Agent),
www.detectmobilebrowser.com site.
responses (sent back by the
server) also have headers.
<?php
$useragent = $_SERVER['HTTP_USER_AGENT'];
$mobile_location = 'http://' . $_SERVER['HTTP_HOST'] . '/index_mobile.html';
if(preg_match(...))
header('Location: ' . $mobile_location);
?>

redirect.php

108 Chapter 3
 www.it-ebooks.info
a separate mobile site

Test Drive
Copy the contents of the 1 Put the contents of the chapter3 folder at the root of
chapter3 folder to your web your web server.
server's document root. If you don’t want to put the files at the document root, no biggie. Just be
sure to update the path in the line that defines $mobile_location.

2 Make the edits from page 108 in the redirect script.

Open the redirect script again in your text editor (if it’s not open
chapter3 CSS background already). Make the edits in the script and save it.
image
3 Edit index.php.
Add the following line to the very top of the index.php file:
cows.jpg <?php require_once('redirect.php'); ?>
Stuff for later; Save the file.
ignore for now.
extras 4 View the mockup in a mobile browser (emulator or real life).

index.php There’s no
need for PHP The mockup viewed on
processing in this an iPhone 4—simple,
file, so we’ll just but it works.
index_mobile. make it .html.
html

redirect.php This is the

redirect script
you downloaded
and edited. These are just mockups.

styles.css
The mobile mockups we’ll be using
throughout this chapter are just that—
mockups. They use sample data to
represent what the site will look like when “plugged into”
real data APIs. The data represented is imaginary, and
many links aren’t functional. Don’t worry about it!

you are here 4 109

 www.it-ebooks.info
opera mini

Special delivery…of complicating factors

Hey, Frank. I checked with the

team that handles distributing phones to
our staff, and it says that a lot of the phones are
running a browser called Opera Mini.
I also overnighted you a package of some of the
common phones we’re using so you can
test them out.

Opera Mini, huh?

Hotshot browsers like BlackBerry’s WebKit
browser and iOS’s Safari get a lot of glory, but
don’t discount Opera Mini! The sister browsers
Opera Mini and Opera Mobile are the most
popular mobile web browsers in the world.
In the middle of 2011, for example, Opera
reported over 110 million users. That
accounted for more than half of mobile web
traffic in India, and over 90% of mobile web
traffic in Nigeria.
Opera Mini is especially popular in places where
connectivity 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 page
in Opera Mini, the request is routed through Because it’s made to support
Opera’s servers, where web pages and resources a wide range of (often
are compressed and optimized for mobile devices. lower-end) phones, Opera
This optimization means fewer bytes are ultimately Mini acts a bit differently
delivered to the device—resulting in a faster (and than full-featured
often cheaper) experience. smartphone browsers.
Opera Mini isn’t just a
developing-world concern. It’s
also quite popular on feature
phones in the US and Europe.

110 Chapter 3
 www.it-ebooks.info
a separate mobile site

Cool. It’ll be handy to have these

phones on hand for testing. On the
other hand, wow. Some of these phones are
pretty old and obscure...and I wonder how the
mockup will look on Opera Mini.

Do this!

We’re going to be looking at the mobile mockup in Opera Mini

4.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=4

Let’s see how the mobile mockup looks in the Opera Mini 4.2 simulator. Use the web‑embedded
Opera 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 differences
between the way the mockup looks in the Opera Mini simulator versus the iPhone or Android
simulator (page 109)?

1 2

3 4

you are here 4 111

 www.it-ebooks.info
exercise solution

The mockup looks pretty different in Opera Mini 4.2, huh? Let’s look at some of
the places where it differs or is weird. We found five trouble spots.

1 The <h1> and <h2> tags are not styled

1 We can’t really
and are quite small. Because of this, the style any of the
background image in the header seems heading elements
2 in Opera Mini.
kind of silly.

3 2 The entire page is too wide and disappears

off the right side of the screen.
This one’s a doozy.
5
3 Text formatting is not getting applied
4 very well. Italic text is not italic, and
3
bold text is not bold.
2
4 Instead of rounded corners, we get
square ones.

Bonus points if
5
The status message uses overflow: you noticed this
on the iPhone or
scroll, which is an absolute no-no on all Android already!
mobile devices. Content is cut off, and
scrolling is not working.

Q: Why do I have to view this example on http://hf-mw.com? If you are doing your work on your own computer, you may well have
Why can’t I use my own copy? an IP address that is not visible to the entire Internet (a so‑called
internal IP address only visible to the network you are connected to).
A: Opera Mini is a proxy browser. That means that all web traffic
goes through an Opera server. So, the example mockup and other
If you are doing work on a hosting provider or otherwise have the
web pages for Creature Comforts on an externally accessible web
code bits have to be hosted somewhere that Opera’s servers can server, you can certainly use your own copy.
reach.

112 Chapter 3
 www.it-ebooks.info
a separate mobile site

Not all phones are smartphones…not by a sight

In many of the countries that Creature Comforts works in, seeing a
smartphone is a rarity. In India, smartphones sales are projected to be less
than 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 phones

are more common than toilets!

This is no joking matter. The UN

issued a report comparing the
easy access to mobile phones to
poor sanitation infrastructure. What if my users aren’t in India? In the
US, everyone uses smartphones. I shouldn’t
have to worry about those feature phones.

Emerging markets aren’t the only places where

feature phones outnumber smartphones.
Only recently did the sales of smartphones exceed feature
phones in the United States. Sometime in 2012, smartphones
will finally represent the majority of phones in America. The
same 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 some
time before all of those old phones have been replaced.

And, hey, feature phones aren’t all that bad

Sure, they cause us heartache with their older, quirkier browsers
and often poor connections, but feature phones have made a
huge difference in the lives of many people around the world.
If you want to see some serious innovation, travel to a country
with an emerging market and watch how they use mobile phones
for everything from farming to banking.
For many, a phone isn’t a cute, pocket‑size, lesser version of a
modern computer. It is their primary connection to the world.

you are here 4 113

 www.it-ebooks.info
meet xhtml-mp

Let’s keep it basic: Meet XHTML-MP

If you look again at index_mobile.html, you’ll see that the
mockup currently uses this DOCTYPE declaration: XHTML Mobile Profile
<!DOCTYPE html> is a subset of the desktop
(X)HTML you know and love.
That’s the DOCTYPE for HTML5, an excellent and exciting
choice for robust websites and web apps in this modern world, It’s a streamlined version of
but not necessarily right if we want to reach and support the
kinds of mobile devices that the Creature Comforts staff
HTML designed to perform
members use. It’s time to introduce you to our newest friend,
XHTML Mobile Profile (XHTML-MP).
well on a lot of different
XHTML‑MP is a flavor of XHTML developed specifically to mobile browsers. And a
support mid‑level and feature phones with fair to middling web
browsers. It’s a few years old now—and increasingly overlooked lot of mobile browsers are
in favor of its sexier, younger cousin, HTML5—but it’s still useful
for projects like the Creature Comforts mobile site. designed to support it.

Ready Bake
DOCTYPE
Let’s convert the mockup page to be an XHTML‑MP document. Edit the
index_mobile.html file and replace the HTML5 DOCTYPE (top line of the
file) with the following two lines:

<?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">

XHTML-MP This is the DOCTYPE for

of XML, so wise a kind XHTML-MP version 1.2. sion.
XML declaratio need this index_mobile.html
n, too. That’s the most recent ver
And yes, we know we said
“two lines,” but it doesn’t all
fit onto the page.

114 Chapter 3
 www.it-ebooks.info
a separate mobile site

Why would we want to use that old thing?

All we did was change the
DOCTYPE declaration. That
seems totally pointless. Why
can’t I just use HTML5?

We admit it. On the surface, using

XHTML-MP doesn’t seem very thrilling…
It doesn’t support some of the things we like to use
in our HTML, and modern phones are increasingly
supportive (or at least tolerant) of HTML5 markup.

…but something actually did happen as a

result of our DOCTYPE change.
If you load http://hf-mw.com/ch3/ex/2 in the Opera
Mini 4.2 simulator, you’ll see a striking change.
Explicitly using XHTML-MP as our DOCTYPE
changed the way the browser behaves!
No longer do we have the content escaping the bounds
of the page. Instead, the buttons and floats all fit within
the page width.
Turns out, Opera Mini takes the HTML5 DOCTYPE
as a “hint” that it is supposed to behave a bit more
like a desktop browser. That means layout that has
percentage‑based widths—responsive layouts, for
example—might not work exactly as we expect.

Our job is not done here:

we can’t just change the
DOCTYPE and call it a day.
We’ve changed the DOCTYPE
to XHTML-MP, but that doesn’t
mean that the markup is valid XHTML-
MP markup. We also need to make some
changes to our code to make it actually
Hey, look at that!
XHTML-MP.
The content fits on
the screen now.

you are here 4 115

 www.it-ebooks.info
mobile-specific DOCTYPE benefits

Keep your nose clean with XHTML-MP

It’s not always a thrill a minute, but using a mobile‑specific DOCTYPE
helps us because:

1 It ensures support on many older mobile browsers.

Though most mobile browsers won’t choke and die when they encounter
an HTML5 document, they might. And some of the features supported
in HTML5 just plain won’t work on a lot of older phones.

2 It 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. Using
XHTML‑MP and staying within its bounds keeps us from wandering off into
dangerous territory. Just like mobile‑first RWD keeps us focused on constraints,
cleanliness, and the tasks at hand, so too does XHTML‑MP provide a
framework within which to create a widely supported mobile website.

Q: Apparently I missed the memo. What’s a DOCTYPE? Q: So what’s the point of a DOCTYPE, and why do
browsers insist on them?
A: DOCTYPE
A (more formally, a document type
declaration) is a short piece of text at the top of SGML and XML A: Browsers perform a kind of “sniffing” (not too different
documents that informs the client (i.e., browser) which DTD to from our own user‑agent sniffing earlier) on DOCTYPEs.
evaluate the document against. While they don’t formally validate documents, they use the
DOCTYPE as a hint about what “mode” to assume and how to
Q: Too many acronyms. SGML and XML documents? render the content.
DTD? Remember the Opera Mini situation, wherein changing the
DOCTYPE from HTML5 to XHTML‑MP (or XHTML‑Basic)
A: HTML is descended from SGML (Standard Generalized
Markup Language), while XHTML is a kind of XML (and thus
caused the layout mode to change? That’s a good example of
this at work.
is more rigidly structured than its “X”‑less kin), so both warrant
DOCTYPEs. Other browsers use the DOCTYPE to determine whether to
render the content in “standards” mode or in “quirks” mode, a
Document type declarations (DTDs) are formalized definitions backward‑compatible, more tolerant mode.
of what elements (tags, attributes, etc.) are allowed, and where,
in the type of document they describe. Each specification of As of HTML5, all pretense of the browser going out and actually
HTML and XHTML has its own DTD. looking at a DTD has been dismissed, which is why one ends
up with the short and simple <!DOCTYPE html> (no URL
Nominally, associating a document with its intended DTD would to a DTD).
allow the rendering client to go validate the document against
that DTD. In real‑life web browsers, this doesn’t happen—web
browsers never actually go out and validate against DTDs.

116 Chapter 3
 www.it-ebooks.info
a separate mobile site

XHTML-MP Exposed
This week’s interview:
Why bother with XHTML-MP

Grumpy Mobile Web Developer: You’re looking XHTML-MP 1.2: The entire XHTML‑MP lineage
a bit long in the tooth there, XHTML‑MP. How gives you the accesskey attribute on anchor (<a>)
long until you buy the proverbial farm, or sell it to tags. That lets you assign digits 0–9 as shortcut keys
HTML5? for those anchors. This can be very nice on phones
XHTML-MP 1.2: I’m not dead yet! Some people
that have numeric keypads. It can also help cut down
on tedious scrolling.
GMWD: So…XHTML‑MP invented access keys?
think I’ve been put out to pasture, but I’m a useful old
coot. I keep those older mobile browsers in line. You
XHTML-MP 1.2: Well, technically that was passed
can depend on me. I can help keep you out of trouble.
GMWD: What kinds of trouble can you keep me out down through generations, from WML through
of ? C‑HTML to us. It’s quite an heirloom.
XHTML-MP 1.2: You want examples? OK. What’s GMWD: WML? C‑HTML?
XHTML-MP 1.2: I’m not dead yet, but those guys
the point of having an anchor (<a>) tag with a
target of _new or _blank if you’re on a mobile
sure are. Wireless Markup Language (WML) is
device? Many mobile browsers won’t let you open a
gradually being phased out entirely. It’s quite different
new window from a link. So, I don’t support targets.
than HTML, and my family replaced it as the
Oh, and, frames—those are dangerous mojo. I don’t
preferred mobile markup variant.
support any frames, not even those fancy‑pants
iframes. C‑HTML (Compact HTML) was used a lot in Japan

GMWD: No iframes? Bah.

in days of yore by DoCoMo. Some people call it
iMode. You want emoticons? C‑HTML has emoji
XHTML-MP 1.2: Don’t forget that my XHTML‑MP in spades. But what it doesn’t have fills volumes: no
family—ever since my granddad XHTML‑MP 1.0 tables, no CSS, no images. Oh, and no color. Ah, yes,
was a boy—brings you access keys. the good old days.

GMWD: Access keys?

We need to keep our markup tidy.

We’re pretty serious about that “choke
and die” thing. Mobile browsers
(especially older ones) are less fault-
tolerant of poorly formed markup than
their desktop counterparts. You need to be diligent
about validating your markup—bad markup can cause
mobile browsers to crash, or, even worse, wretched
things like making the phone reboot entirely. Ick.

you are here 4 117

 www.it-ebooks.info
right back to basics

Jim: So, Frank, you think we should use XHTML‑MP?

Frank: It sounds like the safest bet. It looks like we need to keep it
clean 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 about
floats on those older browsers. I know it’s a bit old-school, but
I was thinking of using tables to lay out the dashboard
information.
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 just
not convinced that floated, <div>‑based columns are going to work
reliably in all of the mobile browsers we need to support.
Jim: Yeah, tables are kind of uncool, but I guess we know that
they’ll work. Also…what about all that CSS we already wrote for the
mockup?
Frank: I’m feeling a bit overwhelmed by which HTML tags are
supported 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 out
which HTML elements are valid and supported on these phones, first.
So, I’m going to strip out all the CSS for now and add it
back later.

Hey, guys. One last thing before you do

another round of mockups. Some of the feedback
from Creature Comforts is that it feels like users on
phones with small screens have to scroll through a
lot of links to get to their dashboard section...
Any ideas?

We can assign access key attributes to the

links in the #tools <div> to give quicker access
to the dashboard and the other links.
Without having to do
so much scrolling

118 Chapter 3
 www.it-ebooks.info
a separate mobile site

By the way, scrolling sucks

Not everyone has the luxury of a touchscreen. On many phones,
the way to navigate through web pages is to use a key or a cursor
to scroll through the content. In many interfaces, each clickable
item is highlighted as the users scroll down the page, giving them
an opportunity to follow the links. The more links and content,
the more scrolling.

…thank goodness for access keys

The accesskey attribute on the anchor (<a>) tag lets us assign
a numeric shortcut key to any anchor, reducing the amount of
potential scrolling for our users. This lets users use the number
keys on their phones to access links quickly. Access key syntax
looks like this:

<a href="#dashboard" accesskey="1">Your Dashboard</a>

Access keys let users use their

The access key number assigned to a link doesn’t show up numeric keys as shortcuts!
automatically, so it’s often handy to use ordered lists (<ol>)
instead of unordered lists (<ul>) for lists of links (assuming the
first item in the list uses accesskey 1).

One last curveball Also, XHTML-MP 1.2

OK, there’s something we neglected to tell you. If this does still work—just
makes you want to throw up your hands and make fine—in mobile browsers.
very irritated noises, we understand.

XHTML-MP 1.2 was superseded

There are a whole lot of
confusing markup options
by XHTML-Basic in 2008. Sorry. for mobile devices, but
we’ll stick to XHTML-Basic
for the rest of this chapter.
XHTML-Basic 1.1 gives you everything that
XHTML-MP 1.2 did, with a few bonuses. You get Sorry we made you go through that, but it was
the target attribute on anchor tags back (not that we’re for your own good. The mobile web markup
suggesting that you use that, necessarily). You also get a few landscape is complicated, and you should have a
treats like <sup> and <sub>. Bottom line: you don’t lose sense of what’s out there. Now we’ll stop flailing
anything you already had in XHTML‑MP 1.2. around and stick with XHTML‑Basic. It’s not too
hard: we’ll just need to identify what tags aren’t
supported, and avoid them. And we won’t even
worry about CSS styling or layout right now.

you are here 4 119

 www.it-ebooks.info
test drive

Test Drive
1 Convert the document to XHTML-Basic.
Replace the current DOCTYPE tag with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

2 Remove the CSS for now.

Delete the CSS <link> tag; we’ll deal with CSS later.

3 Convert the <ul> in the #tools <div> to an <ol>.

This will make numbers show up next to the links and helps
with the next step.

4 Add accesskey attributes to the <a> tags in the

#tools <div>.
See page 119 for syntax hints.

5 Convert the floating, <div>-based #dashboard <div> to a table.

Replace the content inside the #dashboard <div> with a table. This
is a bit tedious, so you can use the ready‑bake markup on page 121 (or find this Our plain, but
code in the extras directory in the chapter3 folder—it’s in a file called table.txt). functional, mockup on
an Android device.

6 Save your changed file as index.html. Make sure to keep the

Save the file as index.html—we’re done testing the mobile redirect #dashboard <div>. Just
now, so it’s easier to just use index.html. replace its contents.

Q: So, I know we’re going all hardcore Q: Isn’t Opera Mini 4.2 pretty archaic? Q: But didn’t you just say that
simplified for now, but, after changing How many people really use that version smartphones are now outselling these
the DOCTYPE to XHTML-Basic, does anymore? dinosaur feature phones?
the mockup we looked at on page 115 still
work in Opera Mini 4.2? A: Admittedly, it’s not a recent browser.
But browsers of its vintage absolutely do
A: Outselling doesn’t mean outnumbering.
There are still vast numbers of existing
A: Yep! You can see this at http://hf-mw.com/
ch3/ex/2a if you are curious.
exist out there in the woolly wilds of Mobile
Web Land. It’s a good example of the sort of
older smartphones (not really “smart” by our
current standards) and feature phones. It will
browser with the sort of constraints one runs be some time before they disappear.
into on older feature phones in, especially,
emerging markets.

120 Chapter 3
 www.it-ebooks.info
a separate mobile site

Ready Bake
Table 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 in
tracking 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 Request
has 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 think
Dr. Madling is going too and...</p>
</td>
</tr>
<tr>
<td colspan="2"><div class="morelink"><p><a href="#">More &gt;&gt; </p>
</a></div></td>
</tr>
</tbody>
</table>

you are here 4 121

 www.it-ebooks.info
element validation

Which elements are valid where? Use what we’ve learned and your own intuitive sense to figure
out which tags and attributes are OK in which standards. An element may be OK in more than one
standard!
XHTML-MP 1.2 XHTML-Basic 1.1 HTML5

<font>

<table>

<a target="">

<sup>

<a accesskey="">

<u>

<tbody>

<link>

<strong>

<video>

<iframe>

Answers on page 126.

I can’t get access keys to work.

The Opera Mini simulator doesn’t
seem to support them, and I don’t have
a phone with a hard keyboard.

We promise that they do work

on a lot of phones, but you don’t
have to take our word for it.
Access keys are actually supported in most
major desktop browsers, too.

122 Chapter 3
 www.it-ebooks.info
a separate mobile site

Access keys in action

If you want to test out the access keys on the mobile markup, you can
view index.html in your desktop browser. Test out the access keys by using
the following key combinations:
Chrome or Safari: ALT-[accesskey]
Chrome or Safari: CTRL-OPT [accesskey] FireFox: ALT-SHIFT-[accesskey]
FireFox: CRTL-[accesskey] Internet Explorer: ALT-[accesskey]

Mac
Windows

Chrome: ALT-[acces
skey] Certain operating system
[accesskey] shortcut keys or software
FireFox: ALT-SHIFT-
configurations could take
Linux precedence over these, so
your mileage may vary.
Get some validation
Remember 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 the
mockup and make sure it’s up to snuff. Let’s head over to the invaluable
W3C Markup Validator site to check our code.

http://validator.w3.org

You can either upload the

index.html file (Validate by File
Upload) or copy and paste its
contents (Direct Input).

you are here 4 123

 www.it-ebooks.info
w3c validation errors

So, are we good to go?

Uh oh!

What went wrong?

Scroll down on the results page to see details about
the errors. So, what’s the problem here?

1 <thead> and <tbody> tags are not supported in XHTML-Basic

(or XHTML-MP).
This is likely the most glaring partially unsupported HTML module in
both XHTML‑MP and XHTML‑Basic. Tables are OK, but you can’t use
<thead>, <tbody>, <tfoot>, <col>, or <colgroup>.

These three errors

are related to the
unsupported <thead>
and <tbody> tags in
mobile mockup HTML.the

The third error is a side eff ect

of the <tbody> and <thea s, d>
tags; if we remove those tag
this error will be resolved.

124 Chapter 3
 www.it-ebooks.info
a separate mobile site

Fix the errors

2 There are some improperly nested tags.
Even seasoned pros make little typo‑esque mistakes like this one. That’s one of the
reasons to use the validator—even if you’re at the top of your game.
From index.html
<td colspan="2"><div class="morelink">
<p><a href="#">More &gt;&gt;</p></a></div>
</td>

Both of these errors

were caused by a
it’s the misplaced </a> tag.
This isn’t actually an error—hin ts as to
validator trying to give us
where to find the problem.

Test Drive
Fix the markup problems in the index.html file.

1 Remove the <thead>, </thead>, <tbody>, and

</tbody> tags from the markup.

2 Fix the improperly nested tags. Put the </a> tag

within the paragraph in the .morelink <div>.

3 Revalidate the updated code with the W3C validator.

Woot! Green means success.

you are here 4 125

 www.it-ebooks.info
exercise solution

How’d you do identifying which tags are valid in which standards?

XHTML-MP 1.2 XHTML-Basic 1.1 HTML5

<font> and <u> are <font>

both deprecated—
use CSS instead! <table>

<a target="">

<sup>

<a accesskey="">

<u>

<tbody>

<link>

<strong>

<video>

<iframe>

OK. We’ve got valid code and a basic

structure. But it’s looking super bland.
Can we bring back some CSS?

126 Chapter 3
 www.it-ebooks.info
a separate mobile site

Mobile-savvy CSS
CSS Mobile Profile 2.0 (CSS‑MP) and XHTML‑Basic (or XHTML‑
MP) go together like peas and carrots. The CSS‑MP standard was
developed with low‑ to mid‑range phones in mind.
What do you get in CSS Mobile Profile? Well, most of what you’ve come
to expect out of CSS2, and even a bit of CSS3. But not everything.

Sounds simple in theory

Browsers that implement CSS Mobile Profile 2.0 are supposed to support
the required properties. But the reality is a bit of a downer. CSS support
varies 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 optional
in CSS‑MP, meaning browser makers can opt to support them—or not.

Sounds complicated
and depressing. How am I
going to learn this stuff?

The best way is: less chit-chat, more doing.

Instead of throwing out a tedious list of supported and
unsupported CSS properties in CSS Mobile Profile, let’s
jump in and figure out how to adapt the existing
CSS to be CSS-MP compliant.

you are here 4 127

 www.it-ebooks.info
marrying xhtml-basic and css mobile profile

Buckle up. Roll up your sleeves. Batten down the hatches. We’re going to go on a journey here—a
journey that, if everything goes right, will end with a loving marriage between XHTML‑Basic and
CSS Mobile Profile. We’ll be editing both index.html and styles.css.

1 Put the <link> tag back in index.html.

We’re going to want to start using CSS again, so we need that <link> tag.

<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>

index.html
2 Let’s refactor styles.css to be valid CSS Mobile Profile.
The background-image
and background-repeat * {
properties are supported in padding: 0;
CSS‑MP, but having a big margin: 0;
header with a background }
image wastes a lot of space. body {
Let’s just get rid of the font-family: "Helvetica", "Arial", san-serif;
background image. font-size: 100%;
width: 100%;
background-color: #f3ffc2;
background-image: url('cows.jpg');
background-position values in background-repeat: no-repeat;
percentages and pixels are not background-position: 50% 0px;
supported in CSS-MP, so we’d }
p {
have to change this if we were font-size: .95em;
keeping the background image. margin: 0.25em 0;
}

But we’re not. Devicpp e support h1, h2, h3, h4, h5 {

t for
is iffy; heck, even ’torassured.
su font-family: "Times New Roman", serif;
margin: 0;
background-colo r isn color: #10508c;
text-align: center;
Everything else in this CSS
}

so far is compliant…onward!
styles.css

128 Chapter 3
 www.it-ebooks.info
a separate mobile site

h3 {
font-style: italic;
font-weight: 100;
font-size: 1.15em; styles.css
}
ol {
width: 100%;
}
a {
text-decoration: none;
color: #096c9f;
}
.header {
height: 150px;
}
#tools ol {
Since we last used this<ul> list-style-type: none;
CSS, we changed ourles }
to an <ol>. These ruted #tools ol li a {
will need to be upda
-webkit-border-radius: 5px;

to reflect that.
-moz-border-radius: 5px;
border-radius: 5px;
display: block;
height: 1.1em;
width: 94%;
background-color: #fff; These properties to
margin: 3%; create rounded corners
border: 1px solid #ccc; are invalid in CSS-MP,
text-align: center; and most of those older
padding: .6em 0; browsers don’t support
} them, anyway. Delete
.greeting {
border: 1px dashed #10508c;
these from the CSS.
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%;
}

Continues over the page.

you are here 4 129

 www.it-ebooks.info
make sure to sign the pre-nup

3 Back to index.html: add some classes to the table elements.

<tr class="even">
<td class="event event_meta"><p><strong>Message</strong><br
/>
Feb 3 8:54PM EST</p>
</td>
Hey, hotshot! Apply <td class="event"><p><a href="#"><strong>Supply Request #493-
these classes to the o. C4 Approved</strong></a><br />
other three rows, to Hi, Jess, Good news! I wanted to let you know that we were
successful in tracking down those bottles...</p></td>
</tr>
But alternate
tr.even with tr.odd.
4 And now back to styles.css: adapt styles to apply to the
tabular markup. index.html
We switched from <div>s to tables for layout. We’ll want to get rid
of some properties that no longer make sense, and make a few edits to
others.

We’re not floating content

anymore. In addition,
#dashboard td.event {

browsers that implement

border: 1px dashed #ddd;

CSS‑MP are only required

border-width: 1px 0 0 0;

to implement the “auto”

margin: .5em 0;
padding: 0.5em 0;
width: 100%; value of overflow;
clear: both; everything else is optional.
overflow: hidden; You can’t rely on overflow
Remove these
in CSS‑MP.
}
three properties. #dashboard .odd {
background-color: #fff;
}
#dashboard .even {
background-color: #eee;
}
#dashboard td.event_meta {
No more float width: 30%;
here. And some margin: 0 2%;
adjustment to float: left;
width and margins. }

styles.css

130 Chapter 3
 www.it-ebooks.info
a separate mobile site

5 Add this CSS rule to styles.css... Add this new CSS

rule (anywhere in
#dashboard table { the styles.css file).
border-collapse: collapse;
width: 100%;
}

styles.css

6 ...and remove some unneeded rules.

Find and eliminate the style rules:
#dashboard div
#dashboard .event_time
Delete all of these! #dashboard .event_details
#dashboard .event_subject
styles.css
#dashboard .event_summary

7 Fix the #status_message <div>.

#status_message {
background-color: #f8f1b2;
padding: 0.25em;
line-height: 1.3em;
border: 1px solid #ccc;
border-width: 1px 0;
height: 70px;
And, finally, get overflow: scroll;
rid of these. }

styles.css

Beware of using the overflow property!

overflow: scroll is totally taboo in Mobile Land. It’s generally
not supported on any platform, and is an interactive ickiness.
The behavior of the overflow property in browsers that implement
CSS‑MP is varied—the only value that they are required to support is auto.
Avoid relying on overflow whenever possible.

8 Save the files, and you’re done!

you are here 4 131

 www.it-ebooks.info
so long, buttons

Hmmm…something is missing
Take a look at this screenshot from the Opera Mini 4.2 simulator of the
current mockup. Notice anything? We’ve lost the list numbering on our
<ol>—and those numbers indicated the access keys. Uh oh. How the mockup
currently looks:
Where’d the numbers go? no access keys.
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:

#tools ol {
list-style-position: inside;
}

list-style-position: inside brings the numbers “inside” the

<li> element and renders them (in this case) next to the contents of
the <li> (our links). Sounds about right, huh?
Unfortunately, list-style-position is not supported in
CSS-MP. So we have a problem. Maybe we’ll need to convert the
links into a simple list of links, instead of the buttony look we have now.
Then the numbers will show up again.

Bye bye, buttons

We can regain the numbered list by replacing the CSS rules for
#tools ol and #tools ol li with this:

#tools ol {
margin: 0.5em 1.5em;
}

If we swap out the existing

CSS for this new CSS…
P.S. The padding and margin for all …our <ol>’s numbers
elements (*) has been set to 0. So we’d
However, when Creature
come back.
need to add a bit of margin back here
to get the numbers onto the visible page. Comforts reviewed this
change to the layout…

132 Chapter 3
 www.it-ebooks.info
a separate mobile site

The button look is sorely missed!

Hmmm...I’d really prefer it

if those utility links looked like
buttons and not just links.

Creature Comforts has become

attached to the button look and
wants it back.
The only way to accomplish this with valid
CSS‑MP is to convert the list back to a
<ul>, add the numbers to the content itself,
and update the CSS style rules.
Ahhh, compromises. That’s
the mobile web way!

Test Drive
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 text
content of the links, too!

#tools ul { Put the CSS that was used for

styles.css ... #tools ol on page 129 here.
}
Change the <ol> back to a #tools ul li a {
And put the CSS previously
<ul> again in index.html. ... used for #tools ol li a here.
<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>

index.html

you are here 4 133

 www.it-ebooks.info
the new site pushes creature comforts' buttons

Great success!

Mockup on a BlackBerry 9330

Looks fine on newer

smartphones, like this
Android Nexus S. You can see the final mockup at
http://hf-mw.com/ch3/ex/5.

ƒ It’s a big world, and there are billions (yep) of ƒ Some older mobile browsers (and current, lower‑end
mobile phones. Not all of them are bleeding‑edge mobile devices) implement different standards for
smartphones, and sometimes you have to make your HTML and CSS.
website or web app work with those phones.
ƒ XHTML Mobile Profile (XHTML‑MP) is a
ƒ There are real‑life circumstances: older systems, mobile‑specific standard used by many mobile
recalcitrant clients, or specific projects that make browsers. It is similar to XHTML, but does not support
having a totally separate mobile website necessary. everything that XHTML does.
ƒ One of the ways to route mobile traffic to a ƒ Similarly, CSS Mobile Profile (CSS‑MP) is a
mobile‑specific website is to use server-side mobile mobile‑specific flavor of CSS.
device detection and redirection.
ƒ XHTML‑MP was superseded by XHTML-Basic
ƒ User-agent sniffing is a popular technique for 1.1, which is almost the same except for a few new
evaluating whether an incoming request is from a supported elements.
mobile browser.
ƒ It’s important to choose the appropriate DOCTYPE
ƒ User‑agent sniffing examines the User-Agent for your mobile web project and pay attention to
header that browsers send as part of each HTTP keeping your markup valid—bad code can make
request. Users can “spoof” their user agent— phones behave very badly.
knowingly or not. This is a weakness of this method.

134 Chapter 3
 www.it-ebooks.info
a separate mobile site

Q: There’s XHTML-Basic/XHTML-MP instead of HTML, Q: What happens if I just can’t get my site to do what I
and CSS-Mobile Profile instead of full-on CSS2. Is there an want in a way that is perfectly valid XHTML-Basic or CSS-MP
equivalent mobile flavor of JavaScript for mobile devices? or whatever? Does the sky fall? Do phones around the world
crash?
A: Yes, there is a mobile‑specific JavaScript called ECMAScript
Mobile Profile, but you can’t rely on it. We’ve worked with phones A: Being successful on the mobile web often means making
where the JavaScript cannot change anything on the page once it compromises and trade‑offs. While writing valid code is something to
is loaded, which means most of the things you use JavaScript for shoot for, it’s not always 100% feasible. But knowing the rules before
cannot be done. So if you’re targeting old phones, you’re probably you break them is always a good motto to live by.
better off not relying on JavaScript.

Q: Q: Do I have to use XHTML-Basic every time I want to

What about Wireless CSS? support a lot of mobile browsers? It feels constrained.

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, and
A: We have to pull out the classic mobile web answer for this: “it
depends.” In Creature Comforts’ case, there were a lot of older, less
we don’t see any reason to use it instead of CSS‑MP. full‑featured phones we needed to support. Our goals were to get a
server‑side data service to render well on as many feature phones as
Q: If you use user-agent sniffing to route mobile traffic, and possible.
you misidentify a user’s browser either because she is spoofing Using HTML5 in many cases is a reasonable approach, even on
her user agent or because you’re just…wrong, couldn’t she end older phones. But we wanted to show you the kinds of things you
up getting redirected and stuck on the mobile version of the site, need to be aware of when targeting older devices.
unable to escape back to the full site?

A: Well spotted! This is important! In a real‑life situation, you would

Q: You neglected to do so on page 127, but I do want to see an
exhaustive list of supported and nonsupported properties in
want to provide an “escape hatch,” often in the form of a link back to CSS-MP.
the desktop site.
The link on its own isn’t enough—you need to let your redirection
script know that the user wants the desktop site. You can accomplish
A: Hey, you’re in luck: the CSS Mobile Profile 2.0 spec happens to
be a rather quick and easy read. You can find it at
this by setting a cookie indicating this preference and not redirecting http://www.w3.org/TR/css-mobile.
browsers that have that cookie set.

It’s not cool to strand

Hey, developer types! How could we support users who want users on a stripped-down
the desktop version instead? Can you think of what would mobile site if they’d
be needed to add a link from the mobile to the desktop site, prefer to escape to the
and what modifications you’d need to make to redirect.php to desktop version.
write and check for a cookie to store the user’s preference?

you are here 4 135

www.it-ebooks.info
 www.it-ebooks.info

4 deciding whom to support

What devices
should we support?
Well, sure your
site doesn’t work on this
phone, but you could have left
out the part about “out-of-date
technophobe Luddites”...

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 you
decide? What about people using devices you can’t test on—are they left out in the
cold? Or is it possible to build your web pages in a way that will reach people on devices
you’ve never heard of? In this chapter, we’re going to mix a magic concoction of project
requirements and audience usage to help us figure out what devices we support
and what to do about those we don’t.

this is a new chapter 137

 www.it-ebooks.info
all about the compromises

How 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 what
matters for your project can seem like magic to
people who aren’t in the trenches with you.
Deciding what devices you care about is
similar. You take criteria and priorities, apply
some brain power, sprinkle in a little magical
inspiration, and you come up with a list of
devices that are key to your success. Criteria and
priorities

Your
brain magic

Definition
of where
to draw
the line
138 Chapter 4
 www.it-ebooks.info
deciding whom to support

Step away from the keyboard for a second

We’ve tried to keep everything grounded and hands on so far, but we’ve reached
that point in the movie where the actor stares off into space and contemplates a
tough 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 you
need to decide where to draw the line.
But you’re not going to find that inspiration at the keyboard, so we’ll take a brief
interlude from building stuff to talk about the abstract stuff that turns criteria and
priorities into a list of devices you support. We’re going to help focus your brain a
little and then get out of the way.
Don’t worry, we’ll get back to building stuff soon. The best directors know that all
they 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 ever
made is a sure‑fire path to losing your mind. You can hope to support as many
people as possible, but to keep your sanity, you’re going to have to know the answer
to three questions.

1 What devices do we support?

Which devices or types of devices are you going to test
your pages on to make sure they work as intended?

2 What happens to devices we DON’T support?

What can you do to make sure devices that you don’t
test on are still able to use your site?

2 What happens to devices we CAN’T support?

What message do you give people whose devices aren’t
up to snuff ?

Can you think of some differences between

devices you don’t support and those that you
can’t support?

you are here 4 139

 www.it-ebooks.info
to support or not to support

Things you don’t support vs.

those you can’t support
Once you know what you are going to support, everything else is
something you don’t support. So why make a distinction between
what you don’t support and what you can’t support?
Devices we
Although you don’t explicitly support a device, that doesn’t mean do support
what you’ve built won’t work on that device. If you build your
web page using well‑formed, semantic HTML and progressive Devices we
enhancement, your page will be accessible by many more don’t suppor
browsers and devices than you can guarantee that it will work on. t
Devi
we cacnes
But sometimes a browser is so old and feeble that you simply can’t
suppor ’t
support it.
For example, if you’re selling shoes online, you need to use t
HTTPS to keep credit card information safe. Some old phones
don’t support HTTPS. When that happens, the best thing you
can do is tell the person that she can’t buy shoes on her phone.

Don’t be a meanie about it

If you can’t support someone’s browser, be nice
about it. He may not have the latest phone in
his pocket, but he may have access to a better
browser somewhere else.
Besides, no one likes to be told his phone is a
jalopy. Be gracious to your guests.

Don’t exclude unsupported browsers.

Just because you can’t verify that your pages
will work in a browser doesn’t mean you
should exclude people using that browser. If
you build the site using semantic markup, it
will work in many browsers—including ones you couldn’t
test on and that were not critical to your project.

140 Chapter 4
 www.it-ebooks.info
deciding whom to support

I understand not being able to support

really old phones that don’t have HTTPS, but I
thought if you delivered a basic HTML document
and then progressively enhanced it with CSS
and JavaScript, it would work everywhere.

You’re right. In many cases, progressive

enhancement means you can support
hundreds of different browsers. But your
mileage may vary.
Starting with basic HTML and progressively enhancing
the document should be the starting point for most
web pages. Browsers with advanced features get
enhancements like rounded corners and gradients.
However, the minimum requirements for a site or app
may be higher than basic HTML can provide. A video
game may require WebGL, a graphics library, for
game play. There is no content if the browser doesn’t
support WebGL—that is, until a couple of years from
now when you can progressively enhance from WebGL WebGL 2
to WebGL 2! exist, but itdoesn’t
likely, doesn seems
As they say, you have to know the rules before you ’t it?
know when to break them. You should use progressive
enhancement from basic HTML unless you have a really
good reason why it won’t work.
And even then, a basic HTML document that said,
“Sorry, this game requires WebGL support to play” would
be a nice starting point upon which to build the game.

you are here 4 141

 www.it-ebooks.info
who, why, what, where, and when

Ask questions about your project

It might sound like we’re teaching you to suck eggs here, but the
first step toward figuring out where to draw the line is to think
about your project. Who is your audience? What functionality is
core? What features are optional? What is the best experience?

Hmm...the travel app I’m

working on needs to know
where someone is to work. The cheapest thing on this
What if that person’s phone site costs $10,000. Might as well
doesn’t have GPS? Would zip call it Filthy Rich ‘R’ Us. Can we
code be accurate enough? assume most customers will have
recent smartphones?

The sales team needs to show the app to

potential customers, but standard issue for
salespeople is a BlackBerry 4.5 phone. How can
we show off the app on such an old device
and still make it look good on iPhones?

142 Chapter 4
 www.it-ebooks.info
deciding whom to support

Our Funny Cat Video site

will be great on mobile, but only if the
phone supports video. Which phones
support video and have good data plans
or WiFi ability?

We’re getting ready to expand into

Japan and South Korea. Do they use the
same phones as we do? I heard Japan has
a lot of phones not available elsewhere.

Our newest game, Enraged Avians,

is graphically intense. We already know the
browser will need to support WebGL, but now
we’re wondering if some phones will be too slow
even if they support WebGL.

you are here 4 143

 www.it-ebooks.info
magic factors

Ingredients for your magic mobile potion

When you ask questions about your project, you’re starting to suss out the factors
that can help you figure out which devices matter. Who is your audience and what
is 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 potion
that tells you what devices you need to support.

Does this browser support

access to
Do you nee’sd location? cookies? How about
the phone Gyroscope? HTTPS? Video playback?
Camera?
Device capabilities Browser features

Does your
mething
If you’re doing sone need to be seu rvice
ay ed to worry Online vs. offline or do you ne sed online,
intense, you m d, memory, and
about CPU spee CSS effects support offlied to
ne usage?
whether or not celerated.
are hardware ac
Audience usage
Hardware performance
What devices are
your customers most
likely to use?
Connection speed
Stakeholder devices

That video-intensive
think that
Did you really aw site will only work well
ay without
you could get tever phone on fast connections.
supporting whaens to use?
your boss happ

144 Chapter 4
 www.it-ebooks.info
deciding whom to support

Draw from your cupboard of tools and data

What goes into audience usage? Dig into your jar of
web analytics to see what your current customers are
using. Expanding to a new geography? Pull out data
on the top phones in those countries to see what the
cool phone is in Singapore.
Beware of analytics if
Analytics can be web your site has a poor mobile There are big
statistics or other forms experience. Garbage site in: differences in the
of tracking customer usage. Garbage analytics out. phones sold in different
parts of the world.

to ask!
r hurts
Analytics
e ve
It n
Geographic
Audience Trends
Survey

Big collections
the Device Anywlikhee
Device Data Explorer an re
Browserscope can d
some degree) at
(to
Income, age, anged nder Databases answer questions abhelp
which devices supp out
all impact wh is which features. ort
phone someone
likely to own.
Demographics

Is your cupboard bare? You’re in luck. Check out

this comprehensive guide to mobile statistics at
http://bit.ly/m-stats.

you are here 4 145

 www.it-ebooks.info
case studies exercise

Example
Case Study
that allows
Mo Better Museums is building an app
eras at
museum visitors to point their phone cam
aining more
Time to put your magician’s hat on and work a piece of art and see an overlay cont
which piece
some magic. For each case study, build a information about the piece. It can tell
requirements list based on what the app is e’s location.
of art is being viewed based on the phon
trying to accomplish and the target audience. ty.
Phone reception in museums can be spot
The list should include must‑have
requirements and nice‑to‑have features.
Requirements:
• Must have: support JavaScript

Here’s our list of • Must have: access to camera

requirements based
on the information • Must have: access to location
in this case study.
• Nice to have: support offline mode

Requiremen
ts :

Case Study
A politician wants an edge
in a
close election. She would
like an
app for volunteers to use
when
they go door‑to‑door to en
courage
people to vote. The app
will
provide the address of pe
ople to
contact—with a map if po
ssible—
and what questions the vol
unteer
should ask. Volunteers are
in
short supply, so she would
like the
app to support whatever
phone
they happen to own.

146 Chapter 4
 www.it-ebooks.info
deciding whom to support

Case Study Requirements:

Bowling Boxers is the video‑
game generation’s version of
Dogs Playing Poker. You control
a boxer, based on a dog in the
famous C. M. Coolidge paintings,
that is pitted in a fierce back‑alley
bowling competition. Rendering
the characters and all of the
insane lane action pushes the
limits of many phones.

Study ticed an
Case s no P
Corp ha in India. The V lobal’s
Global s G
e in sale ould be
increas elieves India c like a localized
b ld e
of Sales arket. He wou t will work on th
m a
next big Global’s site th ia. He wants it
of Ind mers to
version lar phones in
s t p o p u s s ib le for custo
mo po
easy as ones.
to be as rs on their ph
r d e
place o

Require
m ents:

Which requirements are

minimum bars, and which
can be supported via
progressive enhancement?

you are here 4 147

 www.it-ebooks.info
requirements lists

EXAMPLE
Case Study
that allows
Mo Better Museums is building an app
eras at
museum visitors to point their phone cam
aining more
a piece of art and see an overlay cont
which piece
Don’t you hate it when someone tells information about the piece. It can tell
you there is no right answer? Yeah, well, e’s location.
of art is being viewed based on the phon
sorry about that. There are no right ty.
answers when it comes to requirements. Phone reception in museums can be spot

So don’t fret if you have a different

answer for these case studies. Your Requirements:
experience may give you a requirement • Must have: support JavaScript
that we’ve missed. Trust your
experience and instincts.
• Must have: access to camera
Camera access is a new • Must have: access to location
W3C API. So far, only the
latest version of Android
partially supports it. • Nice to have: support offline mode

Requiremen
ts :
Case Study • Must have: Internet
A politician wants an edge
in a
connection
close election. She would
like an
app for volunteers to use • Nice to have: ability
when to Nice! Some
they go door‑to‑door to en
courage display images for m opportunities
people to vote. The app ap
will for progressive
provide the address of pe
ople to
• Nice to have: Java enhancement!
contact—with a map if po
Script
ssible— for interactive maps
and what questions the vol
unteer
should ask. Volunteers are
in
short supply, so she would
like the
app to support whatever
phone
they happen to own.

148 Chapter 4
 www.it-ebooks.info
deciding whom to support

Case Study Requirements:

Bowling Boxers is the video‑
game generation’s version of
• Must have: support JavaScript
Dogs Playing Poker. You control
a boxer, based on a dog in the
• Must have: support WebGL
famous C. M. Coolidge paintings, • Must have: fast CPU and GPU, or
that is pitted in a fierce back‑alley the game performance will suffer
bowling competition. Rendering
the characters and all of the
insane lane action pushes the
limits of many phones.

Study ticed an
Case s no P
Corp ha in India. The V lobal’s
Global s G
e in sale ould be
increas elieves India c like a localized
b ld e
of Sales arket. He wou t will work on th
m a
next big Global’s site th ia. He wants it
of Ind mers to
version lar phones in
s t p o p u s s ib le for custo
mo po
easy as ones.
to be as rs on their ph
r d e
place o
Iteration helps you
uncover extra
requirements.

Require
If you were to pull
m ents
• Must have: su :
back the curtain on most mobile
projects, you’d find that the people who
pport basic ma
for old phones rkup made the site were uncertain about what
devices they needed to support. They
• Must have: H made the best guess they could and then
TTPS for che
ckout iterated on it until they perfected the site.
• Must have: c
ookies for login

you are here 4 149

 www.it-ebooks.info
detective work

How do I know my customers

have the right stuff?
Now that I have
a device requirements list,
how do I know if a specific
phone fits my criteria?

Great question. There are two main

methods: server-side device detection We looke
and client-side feature detection. detectiond at feature
We’re going to look at device-detection 2 when we in Chapter
databases in the next chapter. about pro talked
enhanceme gressive
It sounds like you’re ready for this interlude to end nt.
and get back to building things. We told you this
wouldn’t take long.
Now get ready to roll up your sleeves again and dig
into the crazy world of device databases and the bane
of web developers everywhere: user‑agent strings.
Don’t worry. It isn’t as bad as it sounds. By the end
of the next chapter, you’ll be bossing those evil user‑
agent strings around.

ƒ Every project draws the line somewhere on which ƒ Progressive enhancement should be the default
devices it supports. approach. This will make your site work on many
more devices than you can officially support.
ƒ Knowing where to draw the line is a combination of
experience, research, and gut instinct. ƒ Unless you know for certain that you cannot
support a device, you shouldn’t exclude it. New
ƒ There is a difference between devices you don’t
browsers show up all the time. Give them a chance
support and those you can’t support because
to prove they’re up to snuff.
they lack critical features that make it impossible to
use your site. ƒ Don’t let mobile’s complexity overwhelm you. You
already have all of the tools you need to know
ƒ Look at your project requirements and your target
where to draw the line. Trust your experience
audience to help decide where to draw the line.
and instincts.

150 Chapter 4
 www.it-ebooks.info

5 device databases and classes

Get with the group

Uh, when you said
you were going to take a
peek behind the curtain, I
didn’t think you meant this one...
It is possible to know a little too
much about a user, you know...

Setting the bar for the devices we support doesn’t take care
of 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 do
we avoid only building (lame) content for the lowest common denominator? And how do
we organize all of this stuff so that we don’t lose our minds? In this chapter, we’ll enter
the 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.

this is a new chapter 151

 www.it-ebooks.info
time to hit the panic button

A panic button for freaked-out students

AcedIt! Test Prep hangs its hat on superior customer service. Its
goal is to make each and every one of its students—who are hard
at work nerve‑rackingly studying for career‑ or academic‑advancing
standardized tests and certifications—feel like they have a one‑on‑one
connection with tutors who are experts in their subjects.
Sometimes students panic. That’s why AcedIt! wants to create a page
on 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: connect
the customer with an on‑call tutor right away.

Wouldn’t it be cool if a freaked-out

user on a mobile browser could see a big
red panic button that he could press and
place a phone call right away?

Steve, CEO of AcedIt!

152 Chapter 5
 www.it-ebooks.info
device databases and classes

The button is for mobile phones only

Desktop browsers can’t make phone calls,
so the big, red panic button metaphor is
We have an IT guy who
kind of lost there. Steve only wants the
usually does the website
button to show up on mobile phones.
tweaks, but in this case I
think we might need help.

But how do we know someone is on a mobile phone?

Frank: We might be able to do this with CSS media

queries based on the window width of the browser.
Jill: Not in this case, I don’t think. Just because a
window is narrow in width doesn’t mean the browser
is on an actual mobile phone.
Frank: Right, I guess the panic button would end up
showing up on narrow windows and tablets and stuff
if we used a width‑based media query. Not all mobile
devices are phones, either. But what other options do Narrow window
we have? doesn’t mean
mobile phone!
Jill: Ideally, we’d have some way of getting
information about the user’s browser and device that
is specific enough to give us hints as to whether it’s a
mobile phone, not just a device with low resolution
or a narrow screen.

you are here 4 153

 www.it-ebooks.info
a little black book of browser data

Mobile device data sources to the rescue

Mobile device databases contain detailed information about
the browser, platform, and hardware features of mobile devices and
their browsers. By querying the data set with a uniquely identifying
key—generally a user‑agent string—we can get tons of attributes
about that device and its browser.

A device’s browser makes

a request to the server.

Device database
contains data about Software API helps to findsea
devices and their match in the device databa
characteristics. for the current user agent.

Information is available
about the device’s hardware, A successful match gives
access to all sorts of da us
platform, and browser. ta
about the device.

Armed with this

browser = Safari
HTML table support = yes data, you can
adapt content
css rounded cor ners = web
kit based on a device’s
characteristics.
built-in camera = yes resolution width = 320px

has cellular radio = yes

(etc., etc., etc.)

154 Chapter 5
 www.it-ebooks.info
device databases and classes

Meet WURFL
WURFL (Wireless Universal Resource FiLe, usually A device is not a platform is
pronounced “wuhr‑full”) is an open source device not a browser.
database with an enormous amount of information
There is no good word meaning “a
about the specific capabilities of mobile devices and
device’s hardware characteristics
their browsers.
combined with its platform and
Recently, the longtime maintainers of the WURFL OS melded with its browser.” There really
project started a company called ScientiaMobile to maybe should be. WURFL’s notion of a device
provide commercial support for WURFL. is a combination of all three, and contains
information about hardware, OS, and browser.
WURFL tracks details about mobile device specifics
from ringtone formats to physical screen sizes. Terminology makes it difficult to be clear. We’re
guilty, too, so keep in mind that our use of the
Not all of WURFL’s capabilities are of interest to
shorthand word device likely carries some of
us web developers, but you’ll find some real, useful
the connotations of browser, hardware, and OS.
gems in there.

Go out and try it yourself! The ScientiaMobile explorer lets you

interact with Tera‑WURFL data in a web browser.

1 Go to http://www.tera-wurfl.com/explore in a
mobile browser.

2 Visit the See my capabilities section and browse the

capabilities it returns for your mobile device and browser.

The explorer is intended to visibe used

on a mobile browse r. If you t with
a ran dom mo bile
a desktop browser, you r
device will be selecte d for
capability-viewing pleasure.

You can also visit the explorer in a desktop browser

and enter in any user‑agent string you’d like to find
capabilities for. This can be a quick and handy way to Some of the capabilities listed in
look up device capabilities for a known user agent. the explorer on an iPhone 4.

you are here 4 155

 www.it-ebooks.info
wurfl out loud

WURFL and its capabilities

Device who? Capabilities

what? What does WURFL
actually do for me?

WURFL provides information about

mobile devices, their platforms, and their
browsers as a set of capabilities. You
can use this information to adapt your
web content accordingly.
There are currently over 500 capabilities that WURFL
tracks, grouped into a couple dozen or so categories like
css (can this browser support rounded corners? What
about background images?) and playback (what kinds of
media can this device play?).
Device data is maintained in a large, single XML file that
is regularly updated. The latest version is made available

Unsurprisingly, the URL

on the project’s Sourceforge page.
t.
There’s more than one flavor of WURFL is wurfl.sourceforge.ne
ScientiaMobile’s explorer is based on a particular
implementation of WURFL (the Database Edition, also
known as Tera-WURFL) that keeps WURFL device data
in a database instead in a flat XML file. Tera‑WURFL
is intended to be set up as a web service or PHP library
that mobile‑oriented websites can query to get device
information for user‑agent strings.
There are many different APIs and implementations of
WURFL, 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 the
WURFL data file (XML), the way the data is stored, and
an API to interact with it.

We’ll be using the PHP API

There are WURFL APIs for a number of major
programming languages. We’ll be using the PHP API
and file‑based data.

156 Chapter 5
 www.it-ebooks.info
device databases and classes

There are thousands and thousands of

user agents out there. How could anybody
or any organization track all of them and
all of the data about each device?!

WURFL works well because of several

factors in its favor (one of which is that
it doesn’t track every single user agent).
WURFL’s developer community is constantly
contributing to the data source, meaning it isn’t left
to some poor guy alone in a dim cubicle somewhere
trying to track down every new device and browser
on the market—not just a thankless task, but likely
impossible.
WURFL’s various APIs’ algorithms are clever when
performing matches on user agents. It also doesn’t
hurt that WURFL has been around a while, has
a proven track record, and has been used by (and
contributed to) some pretty major web players (ever
heard 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 sense
for your project depends on your needs, budget, and
licensing requirements.

you are here 4 157

 www.it-ebooks.info
there are no dumb questions

Q: What is ScientiaMobile? Q: What APIs are there for WURFL other than the
PHP API?
A: ScientiaMobile is a company founded in 2011 by Steve
Kamerman, Luca Passani, and Krishna Guda. Luca has A: ScientiaMobile provides Java, .NET, and Database APIs
been one of the maintainers of the open source WURFL in addition to PHP.
project since he and Andrea Trasatti started WURFL in 2001.
Steve created Tera‑WURFL, which has become the WURFL
Database Edition.
Q: How does WURFL data get updated? More to the
point, how would I get new data as it’s updated?

Q: Is WURFL free? Do I have to pay for it? A: ScientiaMobile keeps an eye out for new devices.
Sometimes manufacturers provide information directly. Other
A: It depends. WURFL is technically open source. The
WURFL API is available under the Affero General Public
times, people using WURFL submit the information. A large
part of the work any device database vendor does is related
License v3 (AGPL), which is an open source license. The to validating information provided about new devices.
WURFL XML database has a restricted license that only
allows it to be used with the WURFL API. Q: Who decides what capabilities get tracked by
So, if you can comply with the AGPL restrictions, you don’t WURFL?
have to pay anything. But AGPL is more aggressive than its
GPL cousin. With AGPL, running the software on a server
counts as a distribution, which triggers provisions requiring
A: ScientiaMobile picks capabilities based on suggestions
from the community.
you to open source any derivative work.
If AGPL doesn’t work for you (and, in many cases, it probably
Q: Where is this WURFL community of which you
won’t), ScientiaMobile will sell you a commercial license. speak?

Q: If I integrate WURFL with (insert your favorite open A: The community is a mailing list. WURFL has been
around so long that the list is called the WML programming
source solution here) and build a site on top of it, do I
have to open source the whole site? list. There are also conversations happening in the support
forums on ScientiaMobile.com.
A: Short answer: buy a commercial license or talk to a
lawyer. ScientiaMobile.com also has a licensing FAQ.

Q: Are there other things out there that do what WURFL You can find the wml-program ming
does? list at http://tech.group s.ya hoo .com/
group/wmlprogramming/.
A: Yes. WURFL is the only device database that offers
an open source license, but there are several commercial
databases. Device Atlas is probably the best known
alternative. Others include Mobile Aware and Detect Right.

158 Chapter 5
 www.it-ebooks.info
device databases and classes

WURFL: Clever API code

When a WURFL API tries to match an incoming user Geek Bits
agent to a known device, it doesn’t just go belly up if
that exact user agent isn’t in the data. As it is totally
impossible to track every single user agent out there, the WURFL APIs use a combination of algorithms
API matchers instead perform some clever tricks when the to keep from getting tripped up by weird little
precise user agent is not recognized. user-agent quirks.

A tree of devices and their families One way it finds matches is by using matchers
optimized for a given family of browsers or
As the WURFL API analyzes a given user‑agent string, a devices. The most recent PHP API has a few dozen
series of increasingly generic fallbacks is evaluated, with handlers to deal with the analysis of user agents.
the goal of at least slotting the device into the correct The API first determines which handler makes the
family of related devices. most sense for the given user agent. User agents
with the string “BlackBerry,” for example, are
You can think of WURFL’s data as a sort of tree of handed off to the BlackBerryHandler.
devices, with the trunk being a generic browser and each
branch, twig, and leaf a more specific device or group of Each handler is savvy about the kinds of
differences that matter for user agents in its
devices. The API tries to get as far as it can toward the
family, which cuts down on the amount of
exact leaf, but has the rest of the tree to fall back on if it super-specific user agents that WURFL data
cannot. maintainers have to track.
Additionally, the WURFL data for a given device only The PHP WURFL API combines handlers with RIS
defines the capabilities for that device (or group of devices) matching (reduction-in-string—that is, removing
that differ from its parent device or devices. That way, pieces of an unrecognized user-agent string until
the WURFL XML data file is kept reasonably small (a it ends up with one it does recognize) to get to its
bit under 10 MB as of mid‑2011), despite the amount of end result.
information it really contains.

It’s time to install WURFL on your computer

Check out Appendix iii for installation details.

you are here 4 159

 www.it-ebooks.info
start with the underpinnings

We can build an explore page, too

Once you have the WURFL PHP API installed, it requires a pretty
small amount of code to build a page not unlike the ScientiaMobile
explorer page. In fact, we’re going to do that right now.

Wait. If ScientiaMobile’s explorer page

already lets me get WURFL information
about devices, why do I want to go to the
trouble of building my own version?

Building the explore page will get your

hands dirty with the WURFL API, and
it will use data from your own data file. By your data, we
Learning by doing. That’s the ticket. We’ll build mean the current
some underpinnings here that we can reuse for set of data you
other—more functional—tasks. have in the WURFL
XML file you
Also, the ScientiaMobile explorer page is driven by downloaded when
the so‑called Database Edition of WURFL. The installing WURFL.
data is stored and matched slightly differently than
the 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 know
that you’re getting data from your version of the
data file, not one that is older or newer than the one
you have.

Steps for building our explore page

Set up our working environment, files, and configuration for WURFL.

Write a bit of (boilerplate) PHP code to initialize some WURFL

objects so that we can start accessing capability information for
the current browser and device.

Organize the capability data. Build a page and output the data
in an HTML table.

160 Chapter 5
 www.it-ebooks.info
device databases and classes

An explore page: Setting up our environment

The first order of business is to get our directory structure sorted
and a configuration file created. You’ll find a starting point in the
explore subfolder of the chapter5 folder.
By this point, you should have the WURFL PHP API up and
running. You’ll need to know the location of its installation to create
a configuration file (well, one that works, anyway).

Directory structure for the explore page

chapter5
The configuration file will tell
the explore code where to find
your WURFL installation.

explore
We’ll be editing this Your WURFL
file and renaming it to installation
remove the .example.

config.php.example
This file holds some
code that gets WURFL resources
WURFL device
information and WURFL PHP
organizes it. device.php API code WURFL data source

Our explore See the installation appendix if you

page! Displays need help locating the resources
capabilities. or API code directories in your
index.php WURFL install.

Simple stylesheet
for our page.

styles.css

you are here 4 161

 www.it-ebooks.info
create a config file

You’ve got WURFL installed (we sure hope), but now we need to configure it to work
in 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, and
then save the file as config.php in the explore folder (remove the .example extension!).

/* 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/');

Change me, please! You Write once, reuse indefinitely .

file config.php.example
need to edit these paths We’ll be reusing this config
to point to your own for the rest of the exa mp les
WURFL API code and in this chapter. Don’t forget to remove
resources directories. the .example extension.

Set up our working environment, files, and configuration for WURFL.

Write a bit of (boilerplate) PHP code to initialize some WURFL

objects so that we can start accessing capability information for
the current browser and device.

Organize the capability data. Build a page and output the data in an
HTML table.

Now we can write some code to

h WURFL initialize the WURFL objects and
For help witpaths, see start getting at capabilities…
installation i.
Appendix ii

162 Chapter 5
 www.it-ebooks.info
device databases and classes

OK! We’ve got our configuration file. Now we need to create some code that will
initialize WURFL stuff and get it all warmed up so that we can plumb its depths for
device 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 header
of the current request (that is, the user’s browser) and to organize the capability data
for the device into something we can display on a page.
This includes our new
config file.

<?php
require_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);

device.php
I’m OK with most of this,
but I can’t seem to get my
head around what those last
lines of code do.

Those lines instantiate several WURFL objects

and populate a device object for us.
Most of this chunk is boilerplate code that we’ll cut and paste as
needed to get WURFL into shape for our use. If you’re a whiz
with PHP and this innately makes sense to you, kudos, but if it
doesn’t, don’t sweat it too much.

Continues over the page.

you are here 4 163

 www.it-ebooks.info
capability wrangling

Let’s take a slightly closer look at the last line of the boilerplate code chunk from page
163. 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 the
requesting client.
That is, we’re instructing WURFL to take the user‑agent string of the current user’s
browser and try to find a match in its data file. If it’s successful, we’ll have a device
object containing the capabilities of the browser and device.

$device = $wurflManager->getDeviceForUserAgent($user_agent);
At this point, if
The getDeviceForUserAgent method in the WURFL_WURFLManager class things went right,
takes a user‑agent string and returns the matching device (from WURFL data) as a the device capabilities
WURFL_CustomDevice object. are ready to use.
Translation: We feed it a user-agent
string, and it gives us a device object
populated with values for the various
capabilities.

Set up our working environment, files, and configuration for WURFL.

Write a bit of (boilerplate) PHP code to initialize some WURFL

objects so that we can start accessing capability information for
the current browser and device.

Organize the capability data. Build a page and output the data in an
HTML table.
Now that we have a populated
WURFL device object, let’s
organize the device’s
capabilities so that we can
display them in an HTML table.

164 Chapter 5
 www.it-ebooks.info
device databases and classes

The second job of device.php is to organize the capabilities info so that

we can display it later. We’ll add a chunk of code to the file to organize
capabilities by WURFL group.
Drop the following code into device.php and save the file. We’re done
with device.php for now.

The getListOfGroups() method …and getCapabilitiesNamesForGroup()

simply returns an array of gets the names of the capabilities, um,
WURFL group names… in that group!

$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);
}
}
}

This code chunk organizes the This is how we access the values device.php
capabilities of the current device of individual capabilities. We’ll look
and browser into groups. more closely at this in a bit.

It’s totally OK if you don’t

understand everything this PHP
is doing; you can just copy this
into the device.php file.

Still more to do over the page.

you are here 4 165

 www.it-ebooks.info
finish up

We’re done with device.php for now. Time to edit index.php and add some code.

Set up our working environment, files, and configuration for WURFL.

Write a bit of (boilerplate) PHP code to initialize some WURFL

objects so that we can start accessing capability information for
the current browser and device.

Organize the capability data. Build a page and output the data in an
HTML table.

Ready Bake This part is done! Time to do this.

PHP/HTML
Iterate over the collected Let’s display the user agent
WURFL capability data, For each group, generate a <dl> and the id attribute of the
which is organized by group. with the names and values of the device (WURFL’s ID of what
capabilities in that group. this browser or device is).
<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; ?>
If there is no value for the
</dl> current capability, display
<?php endforeach; ?> the string “no value.”
</div>

Display the capability name in

each <dt>, and the value in
OK, let ’er rip! Save index.php and
index.php
each <dd>.
view it in your browser.

166 Chapter 5
 www.it-ebooks.info
device databases and classes

A good start!
You can see all of the capabilities of your desktop browser now, with
capabilities organized by group.

Set up our working environment, files, and configuration for WURFL.

Write a bit of (boilerplate) PHP code to initialize some WURFL

objects so that we can start accessing capability information for
the current browser and device.

Organize the capability data. Build a page and output the data in an
HTML table.

But we can make it better

Instead of just showing the capabilities of the current browser
(especially uninteresting if you’re in a desktop browser!), let’s make the
explore page display WURFL data for any user agent. We can do this
by dropping a quick HTML form into index.php and making a small
change to device.php.

you are here 4 167

 www.it-ebooks.info
check out that user agent

A quick one-two punch to

improve our explore page
A couple of quick changes, and our explore
page will be more useful.
$_SERVER[‘PHP_SELF’] is shorthand for
the currently executing script—that is, the
form will post to the current page.

<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>

Add a short form that allows the

entry of any user-agent string.
index.php

require_once('config.php');
$user_agent = (isset($_POST['useragent'])) ? $_POST['useragent'] :
$_SERVER['HTTP_USER_AGENT'];
$wurflConfig = new WURFL_Configuration_XmlConfig($wurflConfigFile);

Edit this line.

In device.php, we now check to see if there device.php
is an incoming form value (in $_POST) for
the user agent; otherwise, we default to the
current browser’s user agent.

168 Chapter 5
 www.it-ebooks.info
device databases and classes

Test Drive
1 Save all of the changes and load up the
index.php file in a web browser.
The first time you load the page, you should see your
own browser’s WURFL capabilities.

2 Try a few mobile browser user agents.

Enter some mobile browser user agents into the form
and explore the resulting capabilities.
Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; DROIDX Build/
VZW) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0
Mobile Safari/533.1 480X854 motorola DROIDX

Mozilla/5.0 (webOS/1.4.5; U; en-US)

Try these. AppleWebKit/532.2 (KHTML, like Gecko)
Version/1.0 Safari/532.2 Pre/1.0

Now you can enter any

user-agent string and
explore the capabilities of
the matched device.

A quick way to find your

browser’s current UA string:
http://whatsmyuseragent.com

Tired of typing in user-agent strings?

We’ve got you covered. You’ll find a useful_user_agents.txt file in the
chapter5 folder. All of the user agents mentioned in this chapter are in
it, for easy copying‑and‑pasting goodness.

you are here 4 169

 www.it-ebooks.info
work that wurfl

Put capabilities to work

I’m up to my ears
in capabilities. How can I do
something useful with them?

OK, time to get specific.

It’s time to figure out how to use WURFL
capabilities to determine whether or not
we should show that panic button on
AcedIt!’s site.
(Oh, yeah, that’s
what we were up to.)

Use WURFL to help differentiate content

Let’s only show the big, red panic button on browsers
that WURFL says are mobile browsers (not just narrow
screens, à la CSS media queries). We’ll do this by using
WURFL capabilities (bet you didn’t see that coming)!

Steps to success

Create a configuration file and add some code

to initialize some WURFL objects—that is, get
information about the current device and make it We learned how to
ready for us to use. do this part in the
last exercise!
Ask WURFL about the specfic capability or
capabilities we care about.

Add some code to the I’m Freaking Out! page

mockup to alter the content delivered to different
devices based on the value of capabilities.

170 Chapter 5
 www.it-ebooks.info
device databases and classes

Ask WURFL the right questions

Back on page 165, we briefly met the getCapability method for the Do this!
$device object.
That’s a handy method. Even if this class and instance mumbo‑jumbo is

Copy the config.php file from the explore

generally Greek to you, getting at those capabilities is not too tricky, and

directory into the panic_button directory.

we’ll show you how.

Getting a value for a specific capability looks like this:

$value will either be the value e.g., ‘is_tablet’ or

of the device’s capability as a ‘brand_name’ panic_button
string, or NULL if there isn’t Name of the capability we’re The image
a value. asking about as a string. for the panic
button

button.png
$value = $device->getCapability($capability_name);

WURFL
A WURFL CustomDevice object, configuration
already initialized and populated. We’ll do this in the device.php
file in just a sec. config.php

A couple of examples:
Is this a mobile device? WURFL device
$value = $device->getCapability('is_wireless_device');
initialization
and testing
device.php
$value = $device->getCapability('cookie_support');

Does this browser-device A mockup

combo support cookies? of the I’m
index.php Freaking
Note that when you retrieve capability values, you don’t have Out! page
to worry about what group the capability is in. Groups are a
nice organizational concept, but each capability is uniquely
named and can be asked for directly. You’re not required to
styles.css
use capability groups to interact with WURFL.

Want to see info about all the WURFL directory and file structure
capabilities? Check out http://wurfl.
sourceforge.net/help_doc.php.
you are here 4 171
 www.it-ebooks.info
ask wurfl

Initialize the device and get the info ready

You’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 you
need to get your proverbial house in order.
We’re going to be using a different method to instantiate the device than we
did for the explore page. Instead of using a user‑agent string and calling the Translation: Give us device
getDeviceForUserAgent method, we’ll tell WURFL to use whatever data for the device currently
values are in the current server request (contained in PHP’s always‑available accessing the server.
$_SERVER variable).

$wurflManager = $wurflManagerFactory->create();
$device = $wurflManager->getDeviceForHttpRequest($_SERVER);

This method also takes hints from

a couple of other HTTP headers device.php
besides the user-agent header—
but user-agent is still the main
Is this thing mobile? source of clues.
Now we’ve got our WURFL device all warmed up. Let’s ask it stuff.
Sounds like a TRUE/FALSE
WURFL has a nice baseline capability called is_wireless_device, (Boolean) type of question.
which answers the basic question: is this a mobile device? So, it would
seem we’d want to do something like:

$device = $wurflManager->getDeviceForHttpRequest($_SERVER);
$is_phone = $device->getCapability('is_wireless_device');

device.php
Yeah, right?

172 Chapter 5
 www.it-ebooks.info
device databases and classes

Danger, Will Robinson!

In the PHP API, all capability values are returned as strings. That means
that the seemingly Boolean capability is_wireless_device has three
possible values: 'true', 'false', or NULL (NULL means that WURFL
doesn’t have a value at all for that capability). In PHP, the string ‘false’ is
We need to be more explicit, or the value 'false' will evaluate as true, truthy. If you have no idea what
and nonmobile devices will look like mobile ones. So we must make this that means, that’s OK. Just use
alteration. Replace the last line we wrote with the new version: the code below instead of the
last code snippet on page 172.
$is_phone = $device->getCapability('is_wireless_device');
$is_phone = ($device->getCapability('is_wireless_device') = = = 'true') ?
true : false;

The triple-equals identity operator here means

that the value must be exactly the string of
‘true’ to pass, not just any truthy value. device.php
Now, use that value
The device.php file gets included in the index.php file, so we can
access the code we just wrote. We want to add the following PHP
conditionals to index.php.

<div id="content">
For requests that qualify as mobile
<h1>I'm Freaking Out!</h1>
(per the is_wireless_device_capability),
index.php
<?php if ($is_phone): ?>
<div id="panic_button">
show the panic button…
<img src="button.png" alt="HELP!" /> …othe
</div>
rwise, just show the phone
number, real big (via a CSS sty le).
<?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 just
won't budge? Our expert on-call tutors are standing by to help
you through tough moments.</p>
</div>

you are here 4 173

 www.it-ebooks.info
are you freaking out?

Test Drive
Make the changes from pages 171 and 173 to config.php and index.php, save the
files, and then view the resulting I’m Freaking Out! page in a desktop browser
and a mobile browser.

The button on a
mobile device

The button doesn’t show up on

desktop browsers, even with a
narrow window.

174 Chapter 5
 www.it-ebooks.info
device databases and classes

WURFL Exposed
This week’s interview:
What’s the use of WURFL

Interviewer: So, WURFL, what exactly did you bring Interviewer: Great. The button doesn’t make sense on
to the table here? iPod Touches. Now we’re back to square one.
WURFL: Seems pretty clear. You can tell right off if the WURFL: No, no. Like I said, you’re not using me to my
browser is mobile! full potential. Dig deep and revisit my capabilities. I think
Interviewer: There are other ways to do that, you
you’ll make a nice discovery or two.
know. Client‑side detection, basic server‑side detection— Interviewer: But you have over 500 capabilities! How
WURFL: Basic mobile‑or‑not‑mobile is sort of child’s
will I find the right one?
play. You’re not using me to my full potential. WURFL: You’re complaining because I’m too
Interviewer: All right, try me.
comprehensive? I can’t win! Fine, I’ll give you a hint:

WURFL: So, I challenge you to look at the page on an

just because the button is showing up on mobile devices
doesn’t mean it actually makes a phone call—you haven’t
iPod Touch. linked it yet, so it’s a pretty image, but not functional.
Interviewer: OK…[a long pause while the interviewer digs
You might think about that and take another look at my
capabilities.
through a drawer of mobile devices]…yep, the big red button.
WURFL: Doesn’t that seem a bit…well, perhaps not
what you intended? When’s the last time you were able to
make a phone call from an iPod?

Go look at our explore page and investigate the capabilities for an

iPod Touch (where we don’t want the button to show up) versus
the capabilities for an Android Nexus S (where we do want the
button). You might also look at a desktop browser for comparison.
Can you spot a capability that will help us make the differentiation
between a small or mobile device and an actual phone?

Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_2 iPod Touch UA

like Mac OS X; en-us) AppleWebKit/533.17.9
(KHTML, like Gecko) Version/5.0.2 Mobile/8H7
Safari/6533.18.5
The button shows up on Nexus S UA
an iPod Touch…where it Mozilla/5.0 (Linux; U; Android 2.3.3; en-us;
doesn’t make any sense. Nexus S Build/GRI40) AppleWebKit/533.1 (KHTML,
like Gecko) Version/4.0 Mobile Safari/533.1

you are here 4 175

 www.it-ebooks.info
to call or not to call

The WURFL bearer capability group has a handsome capability called

has_cellular_radio. We’ll be looking at the value of that capability to evaluate
whether 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.

Make the page a bit smarter with WURFL

By testing the value of has_cellular_radio, we can get a good idea
as to whether the current user is on a phone. We also need to know how we
should link the phone number such that when users click on it, it initiates a
phone call.
The value in the xhtml_make_phone_call_string is a hint to the
syntax we should use when linking up phone numbers such that when the link is
clicked, the phone knows to instigate a phone call. For the Nexus S, this value is If the has_cellular_radio capability is
tel:. ‘true’ and there is a useful value for the
For the iPod Touch, this value is none. The iPod Touch doesn’t make phone
xhtml_make_phone_call capability, we’ll
calls. Desktop browsers will also return a value of none.
consider this a phone!
By combining the value in xhtml_make_phone_call_string with the
phone number we want to dial, we can create a working link.

Making phone calls with links

Mobile phone browsers recognize certain URI patterns in links as phone
numbers. When a user clicks on this kind of link, an alert box prompts her to
confirm that she really wishes to place the call.
tel: is the most common URI schema for phone numbers, and works for
nigh all modern smartphones. But it doesn’t hurt to use WURFL’s value in that tel: links work without the country
xhtml_make_phone_call_string field. You’ve got it anyway. Here’s code (+1). But to be correct about
what we end up with: things, you should use one. Plus, it
makes you seem so worldly.

<a href="tel:+15035552939">Make a phone call</a>

176 Chapter 5
 www.it-ebooks.info
device databases and classes

The panic button: For phones only

We can include additional tests in the device.php file to look at the
has_cellular_radio and xhtml_make_phone_call_string values.

First, let’s get the values

We don’t need this line anymore.

$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');

Now, let’s evaluate them device.php

$phone_string = $device->getCapability('xhtml_make_phone_call_string');
$is_phone = false;
if ($has_radio === 'true' && $phone_string && $phone_string !== 'none') {
$is_phone = true;
}

device.php

‘none’ is a meaningful value!

This is why we have Recall from page 173 that, in the PHP API,
to test both for CustomDevice->getCapability() returns either a
the existence of string (if a value is present for that capability) or NULL (only
$phone_string and if WURFL does not have a value at all for that capability).
that its value is not The difference is critical.
the string ‘none’.
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.

you are here 4 177

 www.it-ebooks.info
calling questions

Q: Don’t mobile phone browsers Q: How come there has to be that Q: So, we think a browser that has a
automatically recognize phone numbers pop-up confirmation box after a user non-none value for xhtml_make_
and link them for you? clicks on a phone call link? Why can’t it phone_call_string is on a
just spawn a call directly? mobile phone that can make phone calls,
A: Most do, yep. But a couple things about
that. Most relevant to our present situation: A: This is to protect the user from being
but do we know?

our link was an image, not a phone number.

There was no text. A phone likely would not
tricked. A visible phone number link might
have one number, but the link itself another.
A: WURFL has some intelligent data, but
it’s not that smart (no one is). There’s no
have recognized it. Some poor suckers might end up calling clear‑cut way to be absolutely certain a user
a scammer when they thought they were is on a functioning cellular network (versus
Also, various phones’ abilities to correctly
cancelling their local newspaper subscription. WiFi or something else) or that there are not
recognize phone numbers is hit or miss.
Opera Mini has a tendency to think that zip In our case, we’re not even displaying the other things preventing the actual placement
codes with the plus‑4 extension are phone phone number, something that is arguably of a phone call. But, really, this gets us more
numbers. Trying to place a phone call to a zip not really a best practice. We could also than most of the way there.
code has curious results, as you’d imagine. use a CSS background image instead of
Also recall that we are being quite
an inline image, have the phone number as Q: Couldn’t we just test that the
the text in the link, and use a big negative value of xhtml_make_phone_
formal with our phone number formatting
margin in CSS to hide the text. call_string isn’t 'none' and
(+15035552329). One might want to display
a slightly different string in the link text itself, call it done? Isn’t the test for has_
yet be confident that the link itself will be
Q: In English, please? I didn’t major in cellular_radio redundant?
formatted correctly. CSS in college.

A: Using a large negative left margin

A: You might be on to something,
Smartypants.
(e.g., margin-left: ‑10000px)
is a way to get text to go way off to the left
and be invisible. We like to visualize the text
Q: Speaking of Smartypants, you
glossed over it pretty quickly, but I
somewhere 10,000 pixels to the left, floating in actually do want to know more about the
the air somewhere in our office. But we’re weird. WURFL objects and API.…

A: Hey, we heartily encourage you to go

look at the PHP classes in the API and see
how they work together. If you’ve installed
the API, you’ve got the files already, so hop
to it!

No more button on
iPod Touch! But still
there on iPhone!

178 Chapter 5
 www.it-ebooks.info
device databases and classes

Jim: This could get out of hand! In a more complex project—or even
AcedIt!’s site, if it adds more mobile bells and whistles—it seems like using
scattered, individual WURFL capabilities all over the code would cause a
lot of headache and mess. I mean, if we end up with one capability being
tested 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 website
to every possible combination of capabilities—a nightmare to think
through 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 I
like to try to do feature detection on the client, and we still want to make
our stuff as responsive as possible, it does seem like a device database like
WURFL can give us insight into some details that we might not be able to
get 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 testing
capabilities piecemeal—we might be able to keep our sanity. Remember
how we recently spent time thinking through how to evaluate which devices
to support by picking and choosing features and drawing the line for
phones 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 of
devices that are within the group of devices we decide to support.
Jim: Interesting…I think you might be on to something.

After updating device.php with the changes from page 173 with the stuff on
page 177, you might realize that you don’t have an iPod Touch on hand to
test the changes.
To see what an iPod Touch would see, edit the device.php file. Use
the getDeviceForUserAgent() method instead of the
You can find one getDeviceForHTTPRequest() method and give it an iPod
on page 175. Touch user agent.

Answers on page 180.

you are here 4 179

 www.it-ebooks.info
device class corral

Herding devices
A device class creates a sort of logical corral into which
you can herd devices that have certain things in common.
Just as a rancher might put spotted cattle into one field, A device class is an abstract
collection of common
giant work horses in another, and little piglets in yet
another (can you tell we’ve never been ranchers?), we can
sort our devices into virtual cubby‑holes with device classes.
characteristics that define
Sort once, then go
Once our rancher identifies an animal as belonging to
a group of devices (and
one of those three groups, he can make further decisions
without having to look at the smaller details. He can feed
their browsers).
oats to the horses without stopping to reverify that they
have legs of a certain length or swishy tails or can support
PNG images (everyone knows that horses lack support for
transparent PNGs!).
He already knows they’re horses because they’re in the
horse corral. He doesn’t have to tailor feeding to each
individual animal (that would be a lot of horse meals to
keep track of). But, at the same time, he doesn’t feed oats
to the piglets.

You can test what content gets delivered for a given device or browser by using its user agent
when 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 Mac
OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2
Mobile/8H7 Safari/6533.18.5";
$device = $wurflManager->getDeviceForUserAgent($user_agent);

device.php

180 Chapter 5
 www.it-ebooks.info
device databases and classes

Device classes
As we learned earlier, we can run incoming requests against
a device database to get device information. By grouping the
capabilities and values that matter for the site at hand, we can
adapt content across an entire device class instead of chasing
down each individual capability’s value.
These device class definitions, converted into code, sort
devices into one of several groups. Once our devices are
sorted, we can take action without having to keep track of each
individual constituent capability.

In this hypothetical example,

devices are sorted into one of
four groups.

Desktop-like devices

Spiffy, newer
smartphones

Incoming requests Middle-of-the-

are run against a road smartphones
device database. and advanced
feature phones

Code evaluates which device class

the device matches based on The bar is set here
device data. (like in Chapter 4).

Devices that didn’t meet

bottom-line requirements

you are here 4 181

 www.it-ebooks.info
study aids on the go

The picture just got a lot bigger

Hey, you guys. Nice job on that panic button!

Do you think you could help us mobile-optimize
a big new site we’re building?

Expanding a lucrative part of AcedIt!’s business

AcedIt! is building a standalone website for the study aids it sells
to its students. It’s realized that flashcards, practice test booklets,
reference books, and the like are selling like hotcakes, but the only
way to purchase things right now is through a printed catalog.
It’s time for a change. AcedIt!’s new study‑aid‑specific site will
not only allow users to buy any physical product online, but will AcedIt!’s devs
also introduce online products like flashcards that can be used are building these
interactively, right on the site itself. features using
JavaScript and
An early look at what it has in mind other standard
It’s early yet. Logo designs haven’t been finalized, content is still web technologies.
being evaluated, and the design is still in simple‑mockup phase.
But let’s see what the company’s up to:

AcedIt!’s web
folks sent this
early mockup of
Users can shop online the new site’s
and study now—use home page.
interactive products
right on the site itself.
AcedIt! will feature These ads are
products in a snazzy for related
Flash movie. services, like paper
proofreading and
local study groups.
The home page has
excerpts from the
company’s blog.

182 Chapter 5
 www.it-ebooks.info
device databases and classes

Evaluate the home page wearing

mobile-tinted glasses
The scope of the new study aid site is much bigger than the
single panic button page. We risk making ourselves crazy if we plan
development piecemeal, capability by capability. One way to frame our
development approach and make the site work well for different kinds of
users is to group the different experiences using device classes.

Combining device data with logical grouping

OK, yeah, we know. We only
The process of defining device classes is related to the work we did in have a rough landing-page
Chapter 4. We look at the task at hand, figure out what things matter, mockup for right now. But
mumble a few incantations, and come out the other side with some the scope will be broader on
general criteria. this project…eventually.
We know. “Group the experiences using device classes” is
catastrophically vague. Let’s start by reviewing the mockup again and
weighing AcedIt!’s priorities against what we know about mobile web
characteristics and constraints.
We can put the content first We’ll want to adjust the
AcedIt! has made it reducing the number of layout by
and the navigation nearer to co
very clear that the the bottom for mobile layouts. and tightening up the he lumns
interactive elements ader.
on the site are of
mega importance.
We need to keep the va
and AJAX (AsynchronJa ous
Script Using Flash content is
JavaScript and XML) de problematic on mobile
capabilities in mind. vice devices. We’ll need
to find an alternate
format for mobile.
There’s a lot of AcedIt! has mentioned
complex CSS3 styling that it doesn’t think
that won’t work on the ads need to show
all devices. up for mobile users.
It seems a bit
lukewarm on the
whole ad part of the
We might want to link to site, anyway.
the blog instead of having
the content excerpts right
on the page.

you are here 4 183

 www.it-ebooks.info
full-fat design vs. skinny design

Group requirements into multiple mobile flavors

The full‑fledged interactive site experience has some high demands. Mobile
devices need to have the kind of JavaScript, HTML, and CSS support that is
usually found in newer, swankier browsers on smartphones. Specifically, the
AcedIt! devs are targeting mobile devices running WebKit‑based browsers and
designing 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 buy
physical products in the online store and visit the other areas of the site. They
just 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 devices
that don’t quite cut it, let’s create two separate flavors of the site that make
sense for each group of devices.

Interactive
pieces of the A fuller mobile experience
site look best on By creating a device class that encompasses the requirements
screens at least for the richer mobile experience, we can design something neat
320 pixels wide. without 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 with
relative confidence. We can also rely on a certain level of decent
JavaScript support.

A simplified experience for simpler phones

For narrower screens and less powerful devices, let’s be more
streamlined. And let’s not assume support for all of the modern
browser bells and whistles.
This simpler layout doesn’t provide the link to the online products,
higher_mobile but users can still shop in the online store. This version works
fairly well down to about 176 pixels wide, at which point the
product images in the store become difficult to see.
The landing page
mocked up as it Now we have a rough sense
would appear for of our two mobile device
each device class classes, higher_mobile and
simpler_mobile.

simpler_mobile

184 Chapter 5
 www.it-ebooks.info
device databases and classes

Rounding out our device classes

al ly R e q u i red
Tot
We now have a rough sense of two mobile device classes
we’ll want to construct. What else?
s a n d re q uirements,
ritie
he prio he
Oh, by the way, tablets Based on t e the following are t
it seems lik . Mobile devices must red
bottom lineollowing to be conside
AcedIt!’s devs are also working on a tablet‑optimized,

have the f
super‑nifty, touch‑driven interface for their online products.
It’s not done yet, but they want to be prepared for its .”
eventual launch by being able to identify tablets now. “supported
ort
Where to draw the line - SSL supp
pport
- Cookie su a S c ript support
It’s important to the AcedIt! folks that their visitors can
som e J a v
either shop online or use the online products. If visitors
- At least 6px
can’t do either because of device constraints, the device
lu t io n o f at least 17
and browser they are using are considered unsupported. - A reso
The company’s ecommerce software requires cookie
support and a bit of JavaScript support (not nearly
as much as the online interactive products). It is also
mandatory that, for security, devices support SSL.

Our device class lineup

simpler_mobile

WebKit‑based Minimal JavaScript

browsers and at support and at least
least 320px width 176px width

higher_mobile

Yep, tablets
Hey, desktop is a
device class, too!

tablet

desktop Is delinquent in any

of the totally required
characteristics

unsupported

you are here 4 185

 www.it-ebooks.info
interview with a device class

Device Classes Exposed

This week’s interview:
Abstraction to executionwhat
exactly is a device class

Slightly Confused Web Developer: I’m SCWD: OK, so we have a desktop device class,
having trouble getting my head around this device which is self‑evident…and that tablet device class,
class business. A collection of capabilities…tied to which has minor differences…let’s see. What are
an experience? the differences between higher_mobile and
Device Class: I admit, I am a bit difficult to
simpler_mobile?
capture. If I were a painting, I’d be an abstract blur. Device Class: As we know that
I’m a concept, a way to think about organizing higher_mobile represents devices with larger
common things so that we can create just a few screens and capable WebKit‑based browsers,
flavors of a site, instead of a million billion. we can be more confident that they have the
SCWD: So, a device class is a set of WURFL
horsepower to handle some of the site’s more
intensely interactive features.
capabilities—
Device Class: Not so fast. Remember that I’m
simpler_mobile, by contrast, represents
devices with narrower screens and perhaps less
an abstract concept. We’ll be using WURFL here,
cutting‑edge browsers. We can give them smaller
but there’s no reason you have to. No reason, in
images (yay! less bandwidth). We know they support
fact, you have to use any device database.
SCWD: This is all starting to feel a bit woo‑woo.
a bit of the ol’ JavaScript, but can give them a dose
of content that is less deluxe.
SCWD: Wait, how do we know that the
Can you help me understand where the rubber
meets the road here?
simpler_mobile devices support JavaScript?
Device Class: OK. Let’s plan this together. For
Device Class: We will test for at least a modicum
AcedIt!, we’ll have five device classes.
SCWD: Does that mean we’ll be making a version
of JavaScript support. Devices that don’t have the
ability to modify the DOM after page load will be
of the website for each? That sounds like a big task. shunted off into the unsupported device class.
Device Class: No, we only need to focus on SCWD: So what’s up next to keep this ball rolling?
Device Class: We need to map the right
the differences. For example, until the new touch‑
based, tablet‑optimized flashcard interface is
WURFL capabilities and their values to the
launched, the tablet‑device‑class version of the site
device classes we want to create. After we have
only differs from the desktop version in that no
a logical representation of the device classes, we’ll
Flash content will be used.
create code to do some actual testing and slotting.

186 Chapter 5
 www.it-ebooks.info
device databases and classes

Pool Puzzle
Time to find the right WURFL capabilities
and values for our device classes.
Your job is to take the WURFL
capabilities and values from the
pool and place them into the blank
device classes. You may not use
the same item more than once.

higher_mobile

desktop

tablet

lesser_mobile

Note: each thing from unsupported

the pool can only be
used once!
is_ta alse
blet t = f
= tru
e ps_suppor
htt
is_wireless_devi dom = false
ce = true ajax_manipulate_
h
cooki is_wireless_devi idt
e_sup ce = false ion_w s
port t xel
olu
= fal
se res 320 pi
ce = true >=
resolution_width
< 176 is_wireless_devi
mobile_browser =
resolution_width 'Safari' OR 'Android'
< 320 pixels

you are here 4 187

 www.it-ebooks.info
exercise solution

Pool Puzzle Solution

Now we’ve collected the right WURFL
capabilities and values to build ce = true
our device classes. is_wireless_devi

resolution_width
>= 320 pixels

mobile_browser =
'Safari' OR 'Android'

higher_mobile
is_wireless_devi
ce = false
e
= tru
blet
is_ta

desktop resolution_width
< 320 pixels
false
tablet _support =
https is_wireless_devi
ce = true
dom = false
ajax_manipulate_
cookie_support =
false

lesser_mobile
resolution_width
< 176

unsupported

188 Chapter 5
 www.it-ebooks.info
device databases and classes

Q: Why the focus on WebKit-based browsers? Are the Q: What’s with the names higher_mobile and
devs hating on other, totally decent mobile browsers? simpler_mobile? Is there a naming convention I
need to know about?
A: WebKit‑based browsers are seen by many mobile web
devs as both fairly advanced and consistent. Browsers with A: Eh, we just pulled those out of a hat. They sounded
the WebKit rendering engine generally have good support for about right. We used underscores simply so we can translate
HTML5, JavaScript, and CSS3. the names into code more easily. You can call your device
classes whatever you’d like. Within reason.
Note the word generally in the previous sentence. The problem
is, there is a misconception as to just how consistent browsers
based on WebKit are. The sad truth is: there’s still a lot of chaos. Q: Now that we’ve got device classes, I can never test
an individual device capability?
Mobile platform strategist Peter‑Paul Koch spells out the
pitfalls of assuming consistency in mobile WebKit browsers
in the thorough post “There is no WebKit on Mobile” on his
A: You can totally still test individual capabilities. In fact, the
solution for the panic button problem was very appropriate: we
QuirksBlog (http://bit.ly/uWnFLa).
were testing for the value of a very specific capability—a value
that might differ among devices in the same device class (an
Q: If mobile WebKit isn’t really a “thing,” why are we iPhone versus an iPod Touch, for example).
basing a device class on it?

A: Consistent and reliable or no, WebKit‑based browsers

Q: Couldn’t a device match more than one device
class?
are what the devs have done their development on and testing
for. At this point in the project, it is too late to throw the net
wider. We’re kind of following their lead on this one.
A: Yes. We need to arrange our device class testing code
in order carefully. The first matched device class will be the
device class we assign.
Q: How is testing for the string 'Safari' or
'Android' as the mobile browser name equivalent to
finding all WebKit browsers?
Q: What the heck is the CustomDevice object I
keep seeing in the code examples?

A: You might recall from Chapter 3 that user‑agent strings

are wily creatures. Apple’s history with respect to WebKit
A: CustomDevice is simply the name of the class in
the WURFL API that represents a device and its characteristics.
endures in the user‑agent string legacy. At time of writing, all
known mobile variants of WebKit browsers have either “Safari”
or “Android” in their browser name (yes, even WebKit browsers Q: Seems like device classes are not just a mobile web
on BlackBerries and Nokia phones and whatnot). thing.

Q: If I use device classes in a project, will I always have A: Not at all! Content and layout adaptation is a concern
that spans the entire Web. The mobile web doesn’t have a
five?
monopoly on that.
A: Nope. You might have 10, 4, or 0. Having fewer means
less complexity. Having more means more nuance. Q: OK, great. I have some circles with some
capabilities and required values in them. Now what?

A: Turn the page, my impatient friend. We’re going to start

turning these device classes into code.

you are here 4 189

 www.it-ebooks.info
grouping groundwork

Let’s get this show on the road

Now we need to convert the abstract notion of what we’re grouping into
real code that will detect and slot devices into the appropriate device class.
Here comes the sorting!

But, first…
Find the device_classes folder in chapter5, and then the test_classes
device_classes folder beneath it. Eureka! This is our playground for now.
This is probably starting to feel pretty familiar: we need to set up
a configuration file so that WURFL can be initialized. Start by
test_classes
copying the config.php file from the panic_button folder into
device_classes/test_classes.

config.php
To cut down on busywork, we
cobbled this together for you.
And we’re off!
device.php Here’s what we’re going to do:
We’ll add to this file over
the next few pages. Write a (PHP) function to test the individual
device capabilities we care about in each device
device_classes.php
class definition.

Translate each device class’s capability requirements

A simple test page to
into conditional (if/then) statements in code
enter user agents and see
so we can determine which device class the current
index.php which device class they
device should be assigned to.
get slotted into. Write a simple test page (similar to our WURFL
explore page) to see how different user agents get
sorted into device classes.
styles.css

190 Chapter 5
 www.it-ebooks.info
device databases and classes

Get acquainted with the matching function

You’ll find this matching function already waiting for you inside of
device_classes.php. We’ll use it when we create the individual tests for
each device class.
Ready Bake
We wanted to tell you a few things about it before we started taking
advantage of it. Stand back; here comes some PHP. PHP
The name of the A comparison
operator The value to test
capability to test against
Make sure the device function device_match($capability, $comparison, $value) {
object exists. global $device;
if (!$device) {
return FALSE;
Get the value of }
the capability $device_value = $device->getCapability($capability);
from the device. switch ($comparison) {
case '==':
case '===':
return ($device_value === $value);
case '!=':
We test the case '!==':
current value from return ($device_value !== $value);
the device against case '>=':
the value we are return ($device_value >= $value);
curious about. 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);

This function
default:

returns a TRUE or
return FALSE;

FALSE (Boolean)
}

result—whether
}

or not the given

test passed.
device_classes.php

you are here 4 191

 www.it-ebooks.info
dig deeper

What’s going on in that switch statement?

$device_value is the value of the capability
in question on the current device.
switch ($comparison) {
case '==':
case '===':
return ($device_value === $value); $value is the value
case '!=': we’d like to test
Depending on case '!==': against.
the comparison return ($device_value !== $value);
operator supplied, case '>=':
the values are return ($device_value >= $value);
compared in case '<=':
different ways. return ($device_value <= $value);
case '>': LIKE and NOT
return ($device_value > $value); LIKE allow us to
case '<': do glob (substring)
return ($device_value < $value); comparisons.
case 'LIKE':
return (strpos($device_value, $value) !== FALSE);
case 'NOT LIKE':
return (strpos($device_value, $value) === FALSE);
default:
return FALSE;
}

Some examples If $comparison is not one of

the recognized comparison
This test passes (returns operators, we fail.
TRUE) if the device’s
resolution_width value is
240 pixels or smaller.
device_match('resolution_width', '<=', '240'); This test passes if the
is_wireless_device value for
this device is ‘false’.
device_match('is_wireless_device', '===', 'false');
This test passes if the
mobile_browser value
contains the string ‘Safari’.
device_match('mobile_browser', 'LIKE', 'Safari');

192 Chapter 5
 www.it-ebooks.info
device databases and classes

Use the matching function to test capabilities

Now we have a function to test capabilities with. Time to convert our
required capabilities into tests.
Reminder: The device
Write a (PHP) function to test the individual device classes we ended
capabilities we care about in each device class definition. up with are desktop,
tablet, higher_mobile,
simpler_mobile, and
Translate each device class’s capability requirements into
unsupported. We figured
conditional (if/then) statements in code so we can determine
out what to test for
which device class the current device should be assigned to.
each in the pool puzzle
on page 188.
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('resolution_width', '>=', '320'))

if (device_match('resolution_width', '<', '176'))

if (device_match('is_wireless_device', '===', 'false'))

if (device_match('mobile_browser', 'LIKE', 'Safari') ||

device_match('mobile_browser', 'LIKE', 'Android'))
if (device_match('cookie_support', '===', 'false'))

if (device_match('is_tablet', '===', 'true'))

if (device_match('ajax_manipulate_dom', '===', 'false'))

if (device_match('https_support', '===', 'false'))

if (device_match('resolution_width', '<', '320'))

you are here 4 193

 www.it-ebooks.info
exercise solution

We’ve got these tests sorted! Now it’s time to convert them into grouped nuggets of real PHP
code. Keep truckin’!

This feels like it might be an appropriate test

for the desktop device class, but we’ll be weeding
out desktop browsers immediately by looking at
the is_wireless_device capability…

higher_mobile if (device_match('resolution_width', '>=', '320'))

unsupported if (device_match('resolution_width', '<', '176'))

desktop if (device_match('is_wireless_device', '===', 'false'))

higher_mobile if (device_match('mobile_browser', 'LIKE', 'Safari') ||

device_match('mobile_browser', 'LIKE', 'Android'))
unsupported if (device_match('cookie_support', '===', 'false'))

tablet if (device_match('is_tablet', '===', 'true'))

unsupported if (device_match('ajax_manipulate_dom', '===', 'false'))

unsupported if (device_match('https_support', '===', 'false'))

simpler_mobile if (device_match('resolution_width', '<', '320'))

Time to put the

code together…

194 Chapter 5
 www.it-ebooks.info
device databases and classes

Comfortable with PHP code? See if you can plunk in the missing
pieces 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';
}

you are here 4 195

 www.it-ebooks.info
tests at the ready

All right, now we have our tests!

First and foremost: is this
$device_class = NULL; even a mobile browser?
if (device_match('is_wireless_device', '===', ' false ')) {
$device_class = 'desktop';
}
else if (device_match('https_support', ' ===', ' false ') ||
device_match('cookie _support', ' === ', ' false ') ||
device_match('ajax_manipulate_dom', '===', 'false') ||
device_match(' resolution_width ', ' < ', '176')) {
$device_class = ' unsupported '; Make sure this device
} doesn’t lack our baseline
else if (device_match('is_tablet', '===', 'true ')) { requirements…
$device_class = ' tablet '; Is it perhaps a tablet?
}
else if (device_match('is_wireless_device', '===', 'true') &&
device_match('resolution_width', '>=', ' 320 ') &&
(device_match('mobile_browser', ' LIKE ', 'Safari') ||
device_match(' mobile_browser ', 'LIKE', 'Android') ))
{ Or are its browser
$device_class = ' higher_mobile '; and resolution
} pretty awesome?
else if (device_match('is_wireless_device', '===', ' true ') &&
device_match(' resolution_width ', '<', ' 320 ')) {
$device_class = 'simpler_mobile'; Or maybe it’s good en
} but not cutting-edge.ough

All right! Two out of three! We’re almost done now!

Write a (PHP) function to test the individual device

capabilities we care about in each device class definition.

Translate each device class’s capability requirements into

conditional (if/then) statements in code so we can determine
which 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.

196 Chapter 5
 www.it-ebooks.info
device databases and classes

The home stretch

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 spit
out which device class it matches. As this is super similar to what we
did for the WURFL explore page, we’ve done it for you (yippee!).

This simple test

form is coded for
you in index.php.
The page displays the
device ID and the
computed device class for
the entered user agent.
index.php

Test Drive
1 Put code into the device_classes.php file. Mozilla/5.0 (PlayBook; U;
Add the tests from page 196 into the file after the RIM Tablet OS 1.0.0; en-
device_match function and save it. US) AppleWebKit/534.8+ (KHTML,
like Gecko) Version/0.0.1
Safari/534.8+
2 View the index.php file in a browser.
By default, the page will show you the device class
assigned to your current browser. PantechP2020/JIUS05172010R;
Mozilla/5.0 (Profile/MIDP-2.0
Configuration/CLDC-1.1; Opera
3 Test some different user agents.
Mini/att/4.2.19039; U; en-US)
Enter the user agents here into the form field to see
Opera 9.50
which device class they get assigned to.

BlackBerry8330/4.5.0.77 Profile/
MIDP-2.0 Configuration/CLDC-1.1
VendorID/105

BlackBerry9300/5.0.0.794
Profile/MIDP-2.1 Configuration/
CLDC-1.1 VendorID/245

you are here 4 197

 www.it-ebooks.info
testing time

Well, let’s see…how’d it go?

Good! Uh oh!
This RIM Playbook
was correctly
identified as a tablet.
Good!
This Pantech smartphone
qualifies as simpler_mobile Uh oh! This user agent didn’t
because of its smaller screen. qualify for any device classes!
Good!
Why did the user agent for the
BlackBerry 9300 (Curve) fail to
match any device classes?

This BlackBerry’s browser is old

enough (version 4.5) that it doesn’t That is, it doesn’t have
allow manipulation of the DOM the kind of JavaScript
after the page is loaded. support required.

Looks like something went a bit wrong

The problem is that this Curve has a resolution of 320 pixels (meaning it’s too
wide to qualify for the simpler_mobile class), but does not have a WebKit
browser (meaning it fails to qualify for higher_mobile). This is going to be a
problem 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 logical
holes that devices can fall through.

Filling in the gaps

We have three options for how to fix the higher‑resolution‑but‑non‑WebKit‑browser
situation:

1 We could create a new device class to handle this combination.

Grouping by resolution
2 We could change the higher_mobile device class to allow for
other, non‑WebKit browsers.
3 We could edit the simpler_mobile device class and remove the Grouping by browser
240‑pixel resolution maximum.

Each option is totally valid. We have to decide which seems most ideal for the
AcedIt! study aid website.

198 Chapter 5
 www.it-ebooks.info
device databases and classes

Joe: Do we really need to add yet another device class? Seems like a
lot to wrangle.
Frank: I agree. We need to strike a balance between nuance and
the number of device classes we have. It feels like we already have
about the right number.
Joe: So, what now?
Frank: OK. The problem is that higher‑resolution devices that
don’t have WebKit browsers are falling through and not getting
assigned to any device classes—
Joe: Aren’t there actually two problems here? One, we’re not
thinking through what experience those devices should get, like you
said. But we also don’t have a fallback, default device class overall.
Seems possible something could go wrong with device detection or
there might be something else we’re not thinking of. I think we need
a sort of safety net device class.
Frank: Good point. For the first problem, if we’re not adding a
new device class, we need to fill the gap. The question is: what is
more relevant here, device resolution or browser capabilities?
Joe: AcedIt! puts a lot of focus on the interactive elements of the
site—that suggests browser capabilities matter more. But at the
same time, we were planning on delivering smaller images to those
lower‑resolution devices.
Frank: I think you’re right about AcedIt!’s priorities. How about
this for a compromise? We update the device classes such that there
isn’t a top‑end resolution restriction on the simpler_mobile
class.
That does mean that some higher‑resolution devices get a
simpler feel, but if I recall correctly, the dev team working on
the touch‑optimized flashcards is using a framework targeted to
WebKit‑based browsers. Heh, in fact, I think that’s why we were
testing for WebKit browsers in our higher_mobile class in the
first 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 devices
mobile‑optimized images that aren’t any bigger than 320 pixels in
any dimension. Then we can use responsive image techniques to get
us through the final mile on the device.

you are here 4 199

 www.it-ebooks.info
retest the user agent

Fill in the gaps in the device class tests

Here are the changes we need to make to our device class tests: Remove this resolution
restriction for simpler_mo
bile.

$device_class = 'higher_mobile';
}
else if (device_match('is_wireless_device', '===', 'true') &&
device_match('resolution_width', '<', '320')) {
Careful: Only
$device_class = 'simpler_mobile';
remove one of the
}
parentheses here.
else {
$device_class = 'desktop';
}

Add a fallback
default device class. device_classes.php

Test Drive
Make the changes to the device_classes.php file and retry the user‑agent strings from
page 197 in the test form.

Yay! The problematic

BlackBerry user
agent now matches
the simpler_mobile
device class.

200 Chapter 5
 www.it-ebooks.info
device databases and classes

Make something actually happen

with device classes
Time to take the device classes we’ve cooked up and get cracking.
adapt_content
The goal: deliver different flavors of the landing
Your configuration file
page mockup to different users based on device
classes. config.php
We’ll use our code to sort devices into device classes and deliver Device initialization
different versions of the current AcedIt! study‑aid‑site mockup to file: all ready for you
device.php
different devices, using the wireframes we whipped up on page 184.
This is the device class
testing code we just
finished up (already
Do this! device_classes.php there for you).
Copy the configuration file from the last
exercise into the adapt_content folder. Yep.
Again! This is the last time, we promise. index.php
This page allows you to
The HTML and CSS we’re dealing with here is pretty basic: enter a user agent so that
AcedIt! is still in the early phases of development on the new site, test.php
you can view index.php as
and so we’re working with some pretty barebones mockups. different devices.

We’ll treat unsupported devices similarly to

desktop browsers…for now, at least styles

We’re going to deliver content to the unsupported device class

common.css
that is basically the same as the desktop content, but we’ll
explicitly eliminate links to the interactive flashcards section of
the site and the online store. We’ll also not deliver Flash content
to unsupported devices.
CSS for the
desktop.css different
device classes.
It’s getting a bit late, and we’re all
tired: to save you some time, we
did a lot of this for you. mobile.css

We’re going to walk through how we did

it over the next several pages, but we’ll show you where to
find the finished code.
mwebkit.css

you are here 4 201

 www.it-ebooks.info
content delivery

The starting point of index.php has all versions of the content (for all device
classes) 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 each
number below, find the corresponding markup on the right and fill in the
blanks with the appropriate device classe(es).

1 Use this DOCTYPE for the device class.

2 Use this stylesheet for the , , and

device classes.

3 Use this stylesheet for the and

device classes.

4 Use this stylesheet for the device class.

5 Show this version of the navigation for the , , and

device classes.

6 Do not show these two links for the device class.

202 Chapter 5
 www.it-ebooks.info
device databases and classes

Here’s the markup from the index.php file. Use it to answer the questions on the
page at left.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

1
index.php
"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" />
2 <link rel="stylesheet" type="text/css" href="../assets/desktop.css" />
3 <link rel="stylesheet" type="text/css" href="../assets/mobile.css" />
4 <link rel="stylesheet" type="text/css" href="../assets/mwebkit.css" />
</head>
<body>

<div id="header"> Psst…the Study Now section

<h1>AcedIt! Study Aids</h1> is the interactive JavaScript-
</div>
based flashcard feature.
<div id="navigation">
5 <ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop Online</a></li>
6
<li><a href="#">Study Now!</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>

Continued on next page.

you are here 4 203

 www.it-ebooks.info
still queuing

Oh, you thought you were done? At least you’re halfway there!

7 Deliver Flash content to the device class.

8 Don’t use Flash for the , ,

, or device classes.

9 Don’t show these sections for the or

device classes.

10 Show this version of the navigation for the and

device classes.

11 Hide the link to the interactive flashcards for the device class.

204 Chapter 5
 www.it-ebooks.info
device databases and classes

<div id="intro"> index.php

<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante.
Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet
urna sit amet risus...</p>
</div>
<div id="feature">
<div id="featured_product">
7 <p>Featured product Flash slideshow.</p> It’s probably obvious, but these
are just placeholders until thet
8 <p>Static featured product image.</p> Flash movie and static varian
</div> are developed.
</div>
<div id="ads">
... We removed a bit of the tex
</div> content to save space here ont
9 <div id="fromtheblog"> this page.
...
</div>
<div id="navigation">
<ul>
10 <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> 11
<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>

you are here 4 205

 www.it-ebooks.info
code conversion

Time to look at the markup differences for the different device classes and
convert our decisions into code.

We’ll use XHTML-Basic for

1 Use this DOCTYPE for the simpler_mobile device class. the simpler mobile device class.
Everyone else gets HTML5.
<?php if($device_class = = 'simpler_mobile'): ?>
1 <!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; ?>

2 Use this stylesheet for the desktop , tablet , and

unsupported device classes.
Recall that we’re treating the unsupported
device class—mostly—like desktop.
3 Use this stylesheet for the simpler_mobile and higher_mobile device classes.

4 Use this stylesheet for the higher_mobile device class. Everyone gets the aptly named
common.css.
<link rel="stylesheet" type="text/css" href="../assets/common.css" />
<?php if ($device_class == 'desktop'
|| $device_class == 'tablet'
2 || $device_class == 'unsupported'): ?>
<link rel="stylesheet" type="text/css" href="../assets/desktop.css" />
<?php endif; ?> There are elements common to both
<?php if ($device_class == 'higher_mobile' mobile device classes in these styles.
3 || $device_class == 'simpler_mobile'): ?>
<link rel="stylesheet" type="text/css" href="../assets/mobile.css" />
<?php endif; ?>
<?php if ($device_class == 'higher_mobile'): ?>
4 <link rel="stylesheet" type="text/css" href="../assets/mwebkit.css" />
<?php endif; ?>

This stylesheet has gradients and other fanc y-pants

stuff, specifically formulated for Web Kit brow sers.

206 Chapter 5
 www.it-ebooks.info
device databases and classes

This is the desktop-style navigation, near

the top of the page.
5 Show this version of the navigation for the desktop , tablet , and
unsupported device classes.

6 Do not show these two links for the unsupported device class.

<?php if ($device_class == 'desktop'

|| $device_class == 'tablet'
5
|| $device_class == 'unsupported'): ?>
<div id="navigation">
No online shopping or
<ul>
sna zzy flashcards for
<li><a href="#">Home</a></li>
the se guys!
<?php if ($device_class != 'unsupported'): ?>
6 <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; ?>

Flash and mobile devices

7 Deliver Flash content to the desktop device class. often don’t play well
together. Ditto for tablets.
8 Don’t use Flash for the tablet ,
higher_mobile ,
simpler_mobile , or unsupported device classes.

<?php if ($device_class == 'desktop'): ?>

<p>Featured product Flash slideshow.</p> 7
<?php else: ?>
<p>Static featured product image.</p> 8
<?php endif; ?>

Continues over the page.

you are here 4 207

 www.it-ebooks.info
who gets what?

and
We’re not showing ads on the mobile layouts,, we’ll
instead of having blog teas ers on the page
provide a link to the blog subpage.
9 Don’t show these sections on the higher_mobile or simpler_mobile device classes.

<?php if ($device_class == 'desktop'

|| $device_class == 'tablet'): ?>
9 <div id="ads">
...
</div>
<div id="fromtheblog">
...
</div>
<?php endif; ?>
This is the mobile version of the navigation,
down at the bottom of the page.
10 Show this version of the navigation for the higher_mobile and
simpler_mobile device classes. No interactive flashcards for these phones!
11 Hide the link to the interactive flashcards for the simpler_mobile device class.

<?php if ($device_class == 'higher_mobile'

10 || $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'): ?> 11
<li><a href="#">Study Now!</a></li>
<?php endif; ?> Only give the link to
<li><a href="#">Blog</a></li> the flashcards to the
<li><a href="#">Contact Us</a></li> higher_mobile class.
<li><a href="#">FAQ</a></li>
</ul>
</div>
<?php endif; ?>

208 Chapter 5
 www.it-ebooks.info
device databases and classes

Test Drive
Try 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‑agent
strings from the useful_user_agents.txt file to see the different device class
versions. Hit index.php directly with your desktop browser to see the desktop
version of the mockup.

We tightened up our device class tests on page

200, but can you think of anything other risks we
might not be considering?

you are here 4 209

 www.it-ebooks.info
wurfl-ly generic

Always tread with care and come prepared

Way back in Chapter 3, we highlighted some pitfalls of server‑
side device detection using user agents. There are some risks that
you should keep in mind:

1 Browsers don’t always send accurate user agents.

Sometimes the user purposely overrides what user agent gets
sent, and sometimes browsers just send weird ones. This could
cause a device database to return inaccurate data.

2 WURFL doesn’t always find a (specific) match.

WURFL doesn’t always find a successful match, or any valid
match whatsoever. You might get a generic device ID, or
nothing at all.

Go back to the explore page we created earlier in the chapter and enter the
Do this! following user agent: facebookexternalhit/1.1 (+http://
www.facebook.com/externalhit_uatext.php).

WURFL’s “generic” is pretty generic

If you tried out the facebookexternalhit user agent in our explore
page (and if you didn’t, do it now!), you will have noticed that WURFL
identifies it as device ID generic. This is WURFL’s way of shrugging its
shoulders 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 enough
to base decisions upon. It’s unlikely that the facebookexternalhit
client has a resolution_width of 90 pixels, for example. That just
happens to be the value that our WURFL data file has for generic devices.

210 Chapter 5
 www.it-ebooks.info
device databases and classes

We need a bigger safety net

When designing a site that uses server‑side detection, take some time
to 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 enough

On the AcedIt! study aid mobile test site right now, user agents that
result in a generic device match will receive the unsupported device
class (try the facebookexternalhit user agent to see). This
is not an inappropriate device class to assign, but the assignment is
kind of happening via dumb luck.

generic
Detail of our explore page. The ver
values for the display group are m. y
generic—we shouldn’t rely on the

WURFL data can vary a bit.

Detail from the ScientiaMobile
Let’s compare the facebookexternalhit explorer page capabilities for the
capability data in our explore page against facebookexternalhit user agent
the data in the ScientiaMobile explorer.
Visit http://www.tera-wurfl.com/explore and enter the
facebookexternalhit user agent.The first thing to
note is that the Database Edition’s variant of the generic
device ID is called generic_web_browser.
If you explore the capabilities returned for a bit, you’ll
find more differences. For example, take a look at the
display capability group and compare it to the display
capability group values for our “generic” device ID above.
Pretty different, huh? It’s smart to get familiar with our
flavor of WURFL (the PHP API, file-based variant), and
it’s a good idea that we have our own explore page.

you are here 4 211

 www.it-ebooks.info
what if there’s no device at all?

A stitch in time
The PHP API provides a few methods for determining how
specific a match was. Let’s take a peek.
If there is no
device ID at all…
if (!$device->id
|| (!$device->isSpecific()
&& $device->fallBack === 'root')) {
/* FAIL--make sure you have a plan for this situation */
}

has fallen back

Or if the match is nonspecific anddev
all the way to the root (gener ic) ice

That seems overcomplicated.

Why can’t I just test for a specific
match and be done with it?

Two reasons: error-checking goodness and

the desktop browser patch.
Checking for the lack of a device ID overall feels like good
housekeeping. We’re being tidy.
The desktop browser patch we’re using with WURFL
allows us to get basic information about desktop browsers
as well as mobile ones.
However, all matches for desktop browsers will return
FALSE for isSpecific(), as the data in the patch
isn’t considered specific. By checking the fallback and
making sure it’s not root (generic), we can avoid falsely
identifying desktop browser matches as failures.

212 Chapter 5
 www.it-ebooks.info
device databases and classes

Q: What is this desktop browser patch of which you Q: Wouldn’t the device class testing code be better as
speak? a function/object/whatever?

A: The default installation of WURFL comes with a patch

that will identify, broadly, a set of desktop browsers as well as
A: It sure would. In real life, for real projects, the code
would likely be more elegant, more organized, and more
mobile browsers. powerful. We’re just showing you the basics here.

Q: I don’t understand what parts of WURFL are the Q: Excuse me, but if I am not mistaken, the
API parts. $device variable is global. That’s stinky.

A: WURFL itself is just the data. The API is all the code
that interacts with it, organizes it, and so on. There are APIs
A: See above.

for several major programming languages.

Q: What does the facebookexternalhit user

agent mean, anyway?

A: When someone shares a link or whatnot on Facebook,

Facebook often goes and fetches some content from that
page, and/or a representative thumbnail‑ish image. This is
the user agent it uses when it does so.

Update device_classes.php in the adapt_content directory to include a test for generic IDs or
lookup failures. Assign the unsupported device class in this case.

$device_class = NULL;
Hint: Code will
go in this area. if (device_match('is_wireless_device', '===', 'false')) {
$device_class = 'desktop';
}

device_classes.php

you are here 4 213

 www.it-ebooks.info
content-adapted ribbon

Now 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’ve
mastered wrangling device
capabilities and classes.
It’s a complex concept—and you made it! You even have
a content‑adapted web page to prove it. Good work!

214 Chapter 5
 www.it-ebooks.info
device databases and classes

How do I make a choice between server-side

detection, which can trip up on bad or mysterious
user agents, and Responsive Web Design and
feature detection, which doesn’t have full support
in all mobile browsers?

It doesn’t have to be one way or

the other. You don’t have to throw
RWD out the window when you use
server-side device detection.
Some very handsome things can be accomplished
with a combination of the two. Each has its pros
and cons. Making the two dance in harmony is
part of what we’ll look at in Chapter 9, as we look
to the future.

ƒ Device data repositories like WURFL (Wireless ƒ Device classes are abstract groupings of devices based
Universal Resource FiLe) allow us to get at very detailed on common capabilities.
information about a whole lot of devices. ƒ By slotting a device into a device class, we can take
ƒ WURFL data contains over 500 capabilities per device, further action upon it (e.g., delivering adapted content)
organized into a couple dozen groups. without having to track individual capabilities constantly.

ƒ We can use a device database to identify a value for a ƒ It’s important to build in default device classes, error
given capability and act upon that value. checking, and generic device handling into any code
that uses a device database for identification.
ƒ WURFL’s PHP API is one of several APIs for interacting
with WURFL data. Different APIs handle and represent ƒ Like nearly everything on the Web, server‑side device
the data slightly differently. detection is not a 100% bulletproof concept.

ƒ ScientiaMobile was founded in 2011 by some of the ƒ Server-side detection and content adaptation can be
original WURFL maintainers. The company provides married with client-side adaptation—the two are not
open source and commercial licenses for WURFL. There mutually exclusive. We’ll be looking into this more later.
are alternatives if WURFL doesn’t work for you.
ƒ When working on larger projects, it can be helpful to
group relevant capabilities into device classes.

you are here 4 215

www.it-ebooks.info
 www.it-ebooks.info

6 build a mobile web app using a framework

The Tartanator
HTML5, CSS3, JavaScript,
mobile frameworks…They
sure don’t make tartans like
they used to.

“We want an app! Just a year or two ago, that hallmark cry generally meant
one thing: native code development and deployment for each platform you wanted
to support. But native isn’t the only game in town. These days, web-based apps for
mobile browsers have some street cred—especially now that hip cat HTML5 and
his sidekicks, CSS3 and JavaScript, are in the house. Let’s dip our toes into the
mobile web app world by taking a mobile framework—code tools designed to help
you get your job done quickly—for a spin!

this is a new chapter 217

 www.it-ebooks.info
decipher buzzwords

I’ve heard that you can do

all sorts of cool things by using
HTML5 on mobile phones, and I’ve
got a great idea for an HTML5
mobile web app!

Just like the term Web 2.0 a

few years ago, HTML5 and app
are the buzzword darlings of
media and Internet folks alike.
The terms mean different things to
different people—a free‑wheeling
semantic party that can be exhilarating
or frustrating.
As a web dev, you may already have eager
customers beating down your doors asking
for HTML5 and web apps specifically.
So, what is it that they’re really
asking for?

218 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

HTML5…app…what do these words even mean?

HTML5 is a specific thing…
HTML5 is a specific thing. It’s an in‑progress standard, an evolution of the HTML
we know and love—the language without which there would be no Web. HTML5
clarifies and improves upon the two‑decade‑old markup language, adding,
especially, support for web apps without putting much backward compatibility
at risk.
HTML5 introduces new semantic elements like <section>, <article>,
<nav>, and <header>. It simplifies the syntax for some tags, gives us the
power of media with <audio> and <video> tags, and unleashes interactivity
through new JavaScript APIs like geolocation and offline storage.

…but it has come to represent more

hey just
And sometimes tcool I’ve
mean “anythinghe Web.”
When people say HTML5, they often mean the combination of HTML5 itself,

ever seen on t
super‑swanky JavaScript, and CSS3 goodness—in short, the core pieces for
building modern, interactive web applications.
Which is, well,
a bit misleading.

…and what, exactly, is a web app?

What about the web app part of an HTML5 web
app? HTML5 is a confusing enough term, but
with the word app, you’re stumbling into even Web apps are hard to
murkier territory, full of dragons and discord.
define, but they share
You can usually look at a website in a browser
and have an sense of whether what you’re certain interactive
characteristics that
looking at feels applike or not. An emphasis on
accomplishing tasks, a layout that fits on a single

are well suited for the

screen, actions that don’t reload the whole page,
interactivity—all have been proposed as criteria
for what is an app versus what is a regular ol’
(content‑centric) website. strengths of HTML5
In short, no one has ever defined the word app and its complementary
in a way that makes everyone happy.
technologies.

you are here 4 219

 www.it-ebooks.info
bloated page loads

How “traditional” websites typically behave

In a traditional website model, a request for an HTML page retrieves
all of the components of that page—the HTML itself, JavaScript,
CSS, images, etc.
Browsers are often good about caching elements, and web servers
can be configured to encourage additional caching. But this model
means that each interaction—form submit, link click, whatnot—
results in a full‑page load.

First page request

The client requests a

page from the server. this web page, please.
need
client
I

request

web
page
S ur
e, h ere
server
you go . CSS
HTML
images
JS tc.
e
The server returns the pa
The downside to this—especially when it comes to
and all the assets needed ge
mobile devices with limited concurrent HTTP requests,
load it correctly. to
bandwidth, and processing power—is that it means
requesting and downloading assets the browser may
already have downloaded before, and encumbers the
browser with re‑rendering content and reprocessing code
that might not have changed. It also feels less interactive.

Subsequent requests

mits,
Subsequent requests via form sub d a b
it more information.
e
client
clicked links, etc . In
e
request

web These full-page loads

Clients cache some page feel less interactive
things (but not all). S ur and applike.
e, h ere
server
you go . CSS
HTML
images
JS tc.
Full pages are served again as
e
if the browser and server had
never communicated before.
220 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

How applike websites often behave

In a more applike model, the client tends to play a bigger role, and fewer
assets are bandied around in each request. Reusable markup, code, and
assets can be stored locally. Requests for changed content or data can be
made asynchronously using AJAX. These behind‑the‑scenes asynchronous
A lot of this interac
feeling is accomplishedtivthe
requests pull in specific content or assets without causing a full‑page reload.
Requesting only relevant pieces of content and not reloading the entire page asynchronous requests. rough
reduces bandwidth and processing, and improves the sense of interactivity.

First page request

The client requests a
page from the server. eed
this web page, please.
In
client
request

web
page
S ur
e, h ere
server
you go . CSS
HTML
images
JS tc.
Certain assets (images, data, e

JS) can be saved locally for The first request gets all the
later or offline use. various components of the page…
…and often some special
instructions about which
assets to cache.
Subsequent requests
requests (AJAX)
Often asynchronous
it more information.
ed a b
client
e
In
request

data

S ur
e, h ere
server
you go .
Response content A response can be limited to the
be inserted into ancan specific content needed, avoiding
existing page’s DOM. the bandwidth and processor
costs of a full-page reload.

you are here 4 221

 www.it-ebooks.info
turn the web tartan

A Tartans Unlimited mobile HTML5 web app

Tartans Unlimited is an international organization that’s trying to
keep the history and culture surrounding Scottish tartans alive in
other parts of the world. Ewan

I have an idea for a web

app I want to build. It’ll let users find
information about us, but—this is more fun—
find and share and maybe even create their
own tartan patterns.

App?
ite!
New Webs eessag
- Make it so
u
see and explo sers can
Welcome m out Us
tartan patt re the
…link to Ab
About Us page Keep t h is s im p le e
their phones. rns right on
ore info…
A history of Tartan page for m
nts Lots of images
Tartan eve
s Unlimited.
Links to informatio not of tartans!
the history of tart
n about
a v e s o m e ideas here… - Wouldn’t it
Ih le! b e
ans. are possib users could c c ool if
sure if they own tartans? re a te their
This content isn’t Bug Pat Ewan
ready yet. about th
is. Tartans!
This is the main part of th
e Can this b
e done?
Events page idea…sounds like an app? - A collection
popular “tra of tartans:
d
- It would be nice if the app
or! as well as ne itional” ones
nat
The Tarta
could somehow “link into” our w-world and
user-create
international events database. d tartans.
the whole or”?
Maybe call t
he Tartana
- Could a user’s phone help app/site “T g!
rin
find the nearest events? Has a nice

ait until
- Might want to w
3 of the site
phase 2 or phase
mplex?
for events stuff—co

222 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Jill: Hey guys, I know the requirements are pretty vague. When I
talked to Ewan, I got the sense that there are two main things he wants
to accomplish with the site…or app, or whatever. There’s a chunk
of content pages: info about the organization and education about
tartans. 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, not
just one section. Anyway, it seems like it’s sort of a combination of a
browsable listing of tartan patterns to explore and, he hopes, a way for
users to create their own tartan patterns using a form—
Frank: Wow. That sounds simultaneously bizarre and daunting, but
possibly fun as an implementation challenge.
Joe: OK, content pages, Tartanator area…what about this note about
an Events page?
Jill: Hold your horses! I’m getting there! We’ve decided to do this
project in two rough phases. For the first phase, we’ll build basic
structure for the content pages and implement the tartan listing. He’d
also like us to think about how an interface for users to create their own
tartans would look, and maybe prototype the frontend of that.
Joe: So, like, we’d build the form for creating a tartan, but it doesn’t
need to do anything yet?
Some of the tartan
will be in the Tartansatth at Jill: Something like that, yes. In phase 2, we’ll make it actually work,

tartan directory or ’s 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.

Tartan for the

state of Oregon

MacAlpine clan
tartan
Innes clan
tartan Lennox clan
tartan

you are here 4 223

 www.it-ebooks.info
the tartanator project plan

The master plan for phase 1 of the Tartanator

Build content pages and site structure.
Here’s what we
We need to create basic sections and pages and create an need to do!
overall structure.

Create the tartan listings.

For the first phase, we’ll create a listing of existing popular
tartan patterns. The tartans section should be a browsing
interface that—of course—looks and feels applike and
mobile oriented.

Build a prototype of the tartan-building form.

Ultimately, Ewan would like users to be able to construct
their own tartans by using an applike mobile interface. He
wants to see what that might look like, so we’ll whip him up
a prototype.

So, we’re supposed to build a mobile web app with

HTML5 and stuff. I have no idea where to begin.
Do I have to build all of this from scratch?

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 web
apps with Head First HTML5 Programming.

Buy it, it’s great! The best

HTML5 Programming book
on the market. Seriously, you
know you want to.
OK, enough plugging
now. - Ed.

224 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

…or you could use a mobile web framework

To build phase 1 of the Tartanator, we’re going to turbo‑boost our web aptitude
by using a mobile web framework.
We’ll still be using our HTML and CSS chops, but a mobile‑oriented user
interface framework can help us get our job done faster.

Why use mobile web app frameworks?

Let’s face it. Building complex, interactive web apps from scratch—especially

Depending on
mobile web apps—can be a daunting proposition. A web development
framework—that is, a packaged collection of interactive elements and code

the project, you

tools—can help give us a leg up.

1 A framework can help us make a website or app

look mobile-friendly. might not want to
Mobile‑oriented frameworks generally help alter and
style HTML elements to look and feel more mobile, often reinvent at least
saving us quite a lot of time.
some of the wheels
2 A framework can help us make a website or app
feel mobile. required for an
interactive web
Frameworks can take the drudgery out of transitions and
effects that make a website or app feel more native, or, at

app. That’s where

least, consistent.
3 A framework can help us manage cross-platform
inconsistencies.
Framework developers keep on top of obnoxious or
mobile development
curious browser quirks that could really throw a wrench in frameworks come
things, working around them in the framework’s codebase
so that we don’t have to. in handy.

Choose and use web frameworks with care.

Frameworks are powerful mojo, but they also have
some drawbacks. Many are quite hefty, and can bloat
your site’s payload by hundreds of kilobytes. Some
employ a kitchen-sink approach, including tons of
widgets and cutesy animations that not only are large in byte
units, 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.

you are here 4 225

 www.it-ebooks.info
jQuery Mobile

Our choice for the Tartanator: jQuery Mobile

To 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 to
use and has an architecture that maps well to our HTML5 focus—jQuery
Mobile is designed in a way that hooks in easily (sometimes invisibly!) to
well‑formed HTML5 markup. jQuery Mobile, like all of
the jQuery projects, is
Also, if you’ve ever used jQuery before, you probably know how intuitive and open source.
straightforward it feels.

Seems like we already have a hundred different

ways to build stuff for the mobile web. Responsive
Web Design. Separate sites. Using device detection or
feature detection. Do I just forget about all of that
stuff and start over with mobile web frameworks?

You’re right. It’s a

complicated landscape.
Here’s where we trot out our tired
Wild West metaphor about the mobile
web. But it’s true. There are no simple
answers, and pulling off complex
feats on the mobile web often involves
the cobbling together of several
implementation approaches.
So, no, don’t throw out everything we’ve
already learned. None of the techniques
we’ve covered so far is mutually
exclusive, and each makes more (or less!)
sense in different circumstances.
Life is complex. So is
the mobile web!

226 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Q: Are there other mobile frameworks out there? Q: Do we really need to use a framework?

A: And how! There are more every day. Some other mobile web
frameworks include Sencha Touch, Wink, iUI, DHTMLX Touch, and
A: Do we need to? Technically? No, not at all! In fact, we
encourage you to build applike mobile websites from scratch, if that’s
JQTouch. your bag.

Q: What exactly makes up a mobile web framework?

However, the nice thing about frameworks, and jQuery Mobile
in particular, is that they take care of a lot of obnoxious,
platform‑specific quirks and bugs for us. Their team of devs has
A: It depends on the framework, but most involve a combination of
JavaScript, CSS, and image (or other) assets to aid in the styling of
laserlike focus on the foibles of different mobile browsers.

the mobile experience. Some frameworks also include a server‑side We have limited time and space here, folks. Trying to pull off what
component to help generate (as opposed to adapt) content. we need to do for the Tartanator without a framework of any sort
would be pretty hairy, not to mention the chaos of extra testing that
Q: Wait. What about zepto.js or XUI? would be required (as we wouldn’t have that underpinning of tested
cross‑platform support).
A: Zepto.js (very lightweight JavaScript, with jQuery syntax) and
XUI (also very compact JS) both fall more on the library side of the Q: I still don’t get it. How is the Tartanator an app instead of
line (versus framework). Frameworks tend to have UI components, a website?
while libraries tend to be code—in this case, JavaScript—only. This
is a grey area; the division between library and framework isn’t easy
to define.
A: Because Ewan says so. No, really. The subtleties of
differentiation between app and site are so vague that the answer
sometimes seems almost arbitrary.
Q: So, jQuery Mobile is a mobile version of the original Ewan has a vision of the Tartanator as a functional, web‑based
jQuery library? thing. His focus is on the ability to find and create tartans, and, also,
ultimately, to search for relevant events. In his mind, that makes this
A: Not so fast, hotshot! jQuery Mobile builds on top of jQuery. It
does not replace it. You’ll notice that when we start building stuff with
an app.

jQuery Mobile, the first JavaScript file we include is the core jQuery
library.
Q: But what if it were a site? I couldn’t use jQuery Mobile
then, right?
Q: So, jQuery Mobile is a JavaScript development framework A: jQuery Mobile is a user interface framework. It doesn’t care
that extends jQuery. whether you call what you’re making with it an app or a site. Its job
is to make things feel usable and not break across various mobile
A: Bear with us. Yes, there is JavaScript in the jQuery Mobile
framework. But jQuery Mobile is not a JavaScript framework. It’s
platforms, using a combination of CSS, JavaScript, and HTML5.

bigger than that. It’s a user interface framework. That means it also
includes stylesheets, icons, and other pieces of the puzzle.
Q: But which mobile browsers support HTML5?

A: No browser supports (all of) HTML5. Don’t panic! HTML5 is

modular, and mobile browsers are increasingly supporting more and
more pieces. Just as no modern desktop browser fully supports every
single piece of CSS2.1, it may well be that HTML5 is never fully
supported, exactly as it is in the spec, by every browser. Oh, and the
spec is still evolving. The website http://www.caniuse.com is a good
reference if you’re looking for info about specific feature support in
HTML5 and the other major web technologies.

you are here 4 227

 www.it-ebooks.info
mobile-friendly markup

Build a basic page with jQuery Mobile

The first stop on the Tartanator adventure is to learn how to build a
simple page with jQuery Mobile so that we can start constructing the
pages in the project. You’ll be surprised by just how easy this is.
chapter6
Start basic
By starting with a super‑simple HTML page, you can see the basics
aboutus.html The
of jQuery Mobile at work more clearly.
entire contents of index
.html—
We’ll be meeting We’re using the HTML5 seriously, it’s this basic !
these pages in a <DOCTYPE> tag.
few, err, pages.
findevent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Tartanator</title>

index.html
</head>
<body>
<h1>The Tartanator</h1>

You can ignore <p>The Tartanator is a community-built

extras this folder for association of groups, businesses, and

individuals bent on keeping the Scottish
now. We’ll show heritage alive overseas by promoting
you what’s in it the understanding and enjoyment of
in a little bit. <strong>tartans</strong></p>.
tartans This folder </body>
chapter6 directory structure:
comes a bit </html>
your starting point later, too.
index.html
Include jQuery mobile code components The inclusion of jQuery and
Open index.html in your text editor and get ready to plop in some jQuery Mobile. First jQuery Mobile JavaScript
things first: include the JavaScript and CSS that will make things go. will give our web app its
Include jQuery mobile-friendly interactions.
Mobile’s CSS:
this will style <title>The Tartanator</title>
our markup in <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/
mobile-friendly jquery.mobile-1.0rc1.min.css" />
ways. <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.
Remember that min.js"></script>
jQuery Mobile is </head>
nothing without
jQuery (core). index.html

228 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Mark up the rest of the page

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 a
reliable and fast place to link to the code.
Now that we’ve included the three core files—theme CSS, jQuery Core, and
jQuery Mobile itself—we need to make a few adjustments to the HTML markup
within the <body>.
By wrapping parts of our content in <div> tags with descriptive data-*
attributes, we tell jQuery Mobile how we want them treated: We’ll explain data-* attributes
more in just a moment.
A data-role of
“page” tells jQuery <body>
Mobile to treat The data-role of
the contents as a <div data-role="page"> “header” tells jQuery
full page. <div data-role="header"> Mobile to style this
<h1>The Tartanator</h1> as a header-like
</div><!-- /header --> element.
A data-role of <div data-role="content">
“content” <p>The Tartanator is a community-built
means—you association of groups, businesses and individuals
guessed it—this is bent on keeping the Scottish heritage alive
the main content overseas by promoting the understanding and
of the page. enjoyment of <strong>tartans</strong>.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Bring forrit the tartan!</h4>
</div><!-- /footer -->
er on
Let’s slap a footsee </div><!--/page-->
to
this bad boy Mobile </body>
what jQuery t.
does with tha index.html
“Bring forrit the tartan
battle cry attributed to!” is a rousing
during the siege of Luck Sir Colin Campbell
now in the 1850s.
Test Drive
It 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 a
browser (you can view it in a mobile browser if you like!).

you are here 4 229

 www.it-ebooks.info
iOS or not?

And we’re off!

We don’t have anything too fancy yet (OK, it’s
actually pretty dull), but the landing page does
look somewhat “mobile.”
Note how jQuery Mobile adds gradients, sizes,
and font treatments, and turns our elements
into header‑ and footer‑like chunks.

Our first jQuery

Mobile page, as
rendered on an iPhone

Hmmm…the footer
text doesn’t quite fit…
but let’s worry about
that a bit later.

What does it even

mean to “look mobile”? Doesn’t
that page mostly look like a
native iOS app?

The default jQuery Mobile look

definitely smacks of iOS.
For better or worse, the rounded‑button,
gradient‑laden‑headers look of the native iOS
platform have become a common visual metaphor
for web‑based mobile apps. And many people now
associate that appearance with “looking mobile.”
But beyond Apple‑esque polish, there are some useful
things going on here. Whitespace is increased and
font size optimized for small‑screen reading. Soon,
we’ll build forms and be able to see that jQM gives
us larger input areas and chunky buttons—big touch
targets for our fat fingers.
These are just a
couple of examples!

230 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

The HTML5 data-* attribute

jQuery Mobile makes heavy use of the data-*
attribute introduced with HTML5. In our simple HTML5 data-* Up Close
page, we used the data-role attribute to inform

The data-* attribute was introduced with HTML5

jQuery Mobile of, well, what role the given element

as a way to let developers associate lightweight but

has in our page structure. Right now things are pretty

meaningful data with HTML elements.

simple: we have a header, some content, and a footer.

In the past, we developers found some ways to do

Build more of the Tartanator things like this by kind of hijacking other element
attributes like class or title.
But now there is a real, sanctioned way to do this,
Now that we have a solid foundation, let’s start

and jQuery Mobile takes advantage of it.

building more of the Tartanator. Right now we have
our landing page, but we need to link it to some other
basic pages to move forward with the project. As we move along, we’ll continue to encounter
places where jQuery Mobile uses different data-*
attributes to get its job done.

index.html

This is the fun

part: lots of
aboutus.html findevent.html tartans.html examples of
tartans. We’ll get
A simple to this pretty soon.
information page This will be a page
to find events, but
right now it’s just a tartans
placeholder page.

Time to add a navigation‑like list of links to the three subpages. Edit index.html and add a
very simple <ul> after the introductory paragraph inside of the main content <div>. The
text 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 just

a bit; for now, just text, OK?

you are here 4 231

 www.it-ebooks.info
data-roles a go-go

Basic HTML FTW!

<p>The Tartanator is a community-built association

of groups, businesses, and individuals bent on keeping
the Scottish heritage alive overseas by promoting the
understanding and enjoyment of <strong>tartans</strong>.</p>
<ul>
<li>About Us</li>
<li>Find an Event</li>
<li>Popular Tartans</li>
</ul>

index.html
</div><!-- /content -->

Make it a jQuery Mobile list

If you save your changes and view index.html in a
browser, you’ll likely notice that our little list doesn’t
look very exciting (or mobile‑ish). That’s because
we haven’t informed jQuery Mobile that we want it
to take note of its existence. We need to use the Hmmm, that’s a list.
data-role attribute again! pretty humdrum

<ul data-role="listview">

We use the data-role attribute

to tell jQuery Mobile to treat
this as a list view.
jQuery Mobile alters content
That way, jQuery Mobile
will style the list nicely and with the listview data-role
recognize its existence. to make it look and feel
like a more mobile-friendly,
interactive list.
Test Drive
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?

232 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Our list: Better, but not quite there

By default, jQuery Mobile will treat listviews like page
content, filling the full width of the screen with the <li>
elements. On our landing page, this looks a bit awkward First try
and cramped.
For our purposes, the navigation list is part of the content, The list looks a bit
not the entirety of it. jQuery Mobile’s list options include scrunched and odd.
inset lists—lists that are contained within a page that has
other stuff on it. Let’s use that.

et="true">
<ul data-role="listview" data-ins

Do this! Second try

Add the data-inset The inset list

attribute to the list in index.html looks much better.
and try viewing the page again.

The list looks great and all, but

none of its elements are clickable.
But, uh, don’t we need to make them
actually link to something?

You’re right. Let’s link up

the pages!
Time to make the Tartanator
more than a one‑page show.

you are here 4 233

 www.it-ebooks.info
jQM links

Link to multiple pages with jQuery Mobile

Linking 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>

index.html

Add the links to the list in

Do this! index.html and test them
out. What happens?

By adding the links,

we automatically get
the arrow icons that
show users these are
clickable links.

There is no tartan.html
file in our main directory
yet. This is how jQuery
Mobile reacts when it
encounters a broken link.

234 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

jQuery Mobile Exposed

This week’s interview:
How does jQuery Mobile handle
loading pages

Head First: I hear you have something to tell us jQuery Mobile: There are several points, if you’d
about what a “page” really is, to you. let me finish!
jQuery Mobile: I do! It’s one of my favorite things Instead of requesting and downloading the whole
about myself, so I wanted to explain. requested page—scripts, images, styles—and
reinitializing and rebuilding the DOM from scratch,
Remember how the structure of one of my pages
I only snag the pieces that matter. That saves on
uses a <div> with a data-role value of page?
Head First: Sure.
HTTP requests, bandwidth, and processing time
and makes the experience feel a bit more natural
jQuery Mobile: The markup contained within that
and native.
<div>—often a header, content area, and footer—is Head First: If content pieces are loaded
what I consider a page. dynamically, how come I see the URL of the link I
Head First: Then what is the point of the rest of
clicked on in the address bar of my desktop browser?
the HTML markup? Is it chopped liver? jQuery Mobile: My modest exterior belies the deep
jQuery Mobile: Definitely not! In a web app
sophistication of my navigation model. I always aim
to have real URLs for the pages in my apps, even if
designed along my principles, each HTML file is a
the pages are really generated dynamically or there
standalone, autonomous thing that you can visit in
are multiple <div> tags with a data-role of
your browser.
page in a single HTML document.
Head First: I’m lost. If each HTML file is
independent, why bother with the <div> with the By having a unique and reusable URL for AJAX‑
data-role of page? loaded content chunks, I can make them look and
jQuery Mobile: Let me back up. When you first
act like full‑blown web pages. When the browser
allows me to (not all browsers do), I even update the
navigate to a page in one of my sites or applications,
displayed URL in the browser’s address bar as I load
that page is loaded just like any old HTML page on
in new content asynchronously.
Head First: If I understand correctly, then, I can
the Web.
But once that first page is loaded, I do something
access each HTML file in my app or site directly,
different. When you click on links, I find the page
but the content of those documents can be retrieved
content from the requested HTML document—that
independently and dynamically, when linked to, to
is, the stuff in the <div> with the data-role of
improve performance and responsiveness?
page—with AJAX and inject it into the current
page’s DOM— jQuery Mobile: Exactly!
Head First: But what is the point of that? Head First: Thanks, jQuery Mobile, for a really
dynamic chat.

you are here 4 235

 www.it-ebooks.info
degrade gracefully without JavaScript

If page content is loaded

dynamically with AJAX, what happens to
older browsers with limited JavaScript support
or browsers with no JavaScript support at all?
Do they break?

jQuery Mobile can work even if there is no

JavaScript support at all.
Crazy, huh?
Recall that the links in the markup start out as just that:
basic HTML links. It’s jQuery Mobile’s JavaScript that
does the magic of converting the links into dynamic
AJAX‑y goodness for browsers that support it.
For browsers that don’t support this, navigation between
pages works just like the old‑fashioned Web always has.

Q: If pages are loaded with AJAX, why Q: How did jQuery Mobile know which Q: What version of jQuery Mobile are
do I need to create separate pages at all? data-* attributes to use? Where can I we using?
Can’t I just put all of my app’s content find information about all of the available
into one page and use jQuery Mobile to
show and hide it?
data-* attributes? A: The jQuery Mobile dev team is on a tear!
During the time we spent writing this chapter,

A: You could, but you’d be missing out on

A: Developers can cook up any name they’d
like for data-* attributes (well, they have
both 1.0 beta 3 and 1.0 Release Candidate 1
were released, requiring some scrambling on
jQuery Mobile’s nice notion of progressive to start with a letter). There is no prescribed set. our part.
enhancement. You’d be leaving lesser The idea is that data-* attributes pertain
mobile browsers (those that can’t do the to the functioning of the website that they Oh, wait, we just checked. 1.0RC2 is out
snazzy JavaScript) out in the cold. appear in—that is, they’re not intended for now, too! Oh! There’s RC3! Oh, no, it’s faster
communicating data to external applications. than a speeding bullet! jQuery Mobile 1.0 is
You’d also have a large, complex file that is
Because of that, web developers have now released and official!
difficult to maintain and has a heavy DOM
that is tough for lesser phones to handle. relative freedom to generate their own
For the Tartanator, we’re using 1.0RC1.
jQuery Mobile encourages you to author data-* naming conventions.
websites and apps like you’re used to: with
separate HTML files that can stand alone or
be sucked in with AJAX.

236 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Footer (RE-)Construction

As 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 elements
in headers and footers—but we don’t have any buttons in our footer. Let’s fix it!

Our header, before

reconstruction. It’s trun
cated.
Also, it has a bit mo re
visual weight than it needs
to. It feels really dark

By default, jQuery Mobile’s

1 Remove the <h4> element surrounding the footer text. styling leaves room for
Right now, the footer text is wrapped in an <h4> element. By buttons around header
removing this header element, we’ll keep jQuery Mobile from elements (<h1>, etc.) in
leaving room for buttons and, as a side effect, truncating the text. headers and footers.

<div data-role="footer">
<h4>Bring forrit the tartan!</h4>
</div><!-- /footer -->

index.html

2 Add a CSS rule to center the footer text and give it a

Continues, flip the page.

bit of padding.
Unfortunately, removing the <h4> will also remove the centering and
the 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 top
of the file (there is already a bunch of CSS in this file).

[data-role="footer"] { text-align: center; padding: 5px 0;}

#abercrombie { background-image:url('icons/abercrombie.png'); }

This CSS selector applies to elements with a

data-role attribute that has the value “footer.” tartans.css

you are here 4 237

 www.it-ebooks.info
footer (re-)construction exercise

Footer (RE-)Construction

3 Link in the stylesheet.

Edit index.html again and add a link to the stylesheet.

<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.html
4 Check our progress.
Save the file and view index.html in a smartphone browser or
simulator.

It’s not cut off anymore. But it still

feels dark. Also, look, it doesn’t always end up
at the very bottom of the screen. There’s a
gap. That makes it feel kind of weird. There
must be a way to fix that…

The fix to both of these

items involves a couple
of small changes to the
footer <div>.
We want to tell jQuery Mobile
to use fixed positioning to make
the footer stick to the bottom
of the page, and we need to
change the theming swatch to The footer isn’t always at the
make the footer appear less bottom of all of the pages;
dominant visually. sometimes there is a gap.

238 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

5 Use fixed positioning on the footer so that it always shows

up 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.

6 Use a different theme swatch to make the footer appear

less dominant.
jQuery Mobile’s initial stylesheet has five default color groups, called
swatches. These five swatches are referenced by the letters a through e.
By default, header and footer elements receive swatch a, which has the The default color scheme
most dominant contrast. for swatches a through
Our footer isn’t a particularly important page element, and right now e is defined in jQuery
has too much visual weight. By explictly assigning swatch c, we can Mobile’s CSS.
make the appearance of the footer much less in‑your‑face.
You can use the data-theme attribute on any element to override
jQuery’s default swatch for that element.

<div data-role="footer" data-position="fixed" data-theme="c">

Bring forrit the tartan!
</div><!-- /footer -->

index.html
That’s it! The footer should
look a lot better now. Try
saving your changes and
reviewing our improved
footer in a mobile browser
The release of jQuery Mobile 1.0
or simulator.
includes a new Theme Roller tool that
makes theming jQM easier. See more at
http://jquerymobile.com/themeroller/.

you are here 4 239

 www.it-ebooks.info
bring on the tartans

The meat of the Tartanator: The tartans themselves

Let’s check in with our status on phase 1 of the
Tartanator project:

Build content pages and site structure.

We need to create basic sections and pages and create an
overall structure.

We’ve got our basic layout

squared away and created the
basics of the main pages.
Create the tartan listings.
For the first phase, we’ll create a list of existing popular
tartan patterns. The tartans section should be a browsing
interface that—of course—looks and feels applike and
mobile oriented.
Next on our list!
The footer is now positioned
correctly and is much less
Build a prototype of the tartan-building form.
imposing visually. Success!
We’ll get to this
in just a bit.
We’ve got our core content pages—at least the skeletons of
them—in place. Now let’s turn our attention to matters that are
more interesting: the tartans themselves.
For phase 1, the Tartanator will allow users to browse a
collection of popular and unusual tartans. Think of it
kind of like a quick tartan reference.

Copy tartans.html from the extras

Do this! folder to the chapter6 folder (that The tartans directory, which
is, move it up one level). contains the individual tartan
HTML pages, should already
be in your chapter6 directory.
Get to work on tartans.html
The tartans.html file has the beginnings of a list (<ul>) for the
popular tartans. To get you going, the list contains tartans starting
with A and B. Once you’ve moved the tartans.html file into place,
load up the Tartanator on a browser (mobile or otherwise) and
take a peek. You can click on the tartan names to visit the tartan
page for that tartan.

240 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

We’ve given you a head start on the list

The tartan listing section is a
combination of a single HTML
page with a list of tartans…
…and an individual HTML
page for each tartan.
The first swag at the
list of tartans—we did
this for you already.

Each tartan pattern

has its own HTML page.
The tartan is a CSS
background image.

tartans.html
tartans/baird.html

Take the list from blah to better

The list of tartans is looking a bit lifeless compared to the tartan Yep. All you need to
information pages themselves. Good news! jQuery Mobile makes it do is add an image.
easy to drop thumbnails into lists so we can have small icons on the list jQuery Mobile takes
itself (much snazzier). Here’s an example: care of the rest.

<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 and
have the same name as their HTML counterparts (but with a .png extension).

you are here 4 241

 www.it-ebooks.info
exercise 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>

242 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Drop in the rest of the tartans

There are a whole bunch more tartans that need
to be added to the list (with their nice icons). Don’t
worry, we won’t make you do that much typing. Go
find tartan-list.txt in the extras folder. In the file, you’ll
find a snippet of HTML that is the full <ul> for all of
the tartans. Copy and paste the <ul> into tartans.html,
replacing the current HTML list.

Now we’ve got an enhanced e

list—hey, nice icons!—and havin
included all of the tartans
the current collection.

Hey, the list’s looking pretty nice,

but it seems kind of long. It’s hard to
find a specific tartan name without a
whole lot of scrolling.

True. It’s a bit unwieldy.

Turns out, jQuery Mobile has more up
its sleeve for us. More easy‑to‑implement,
good bang‑for‑the‑buck improvements to
our tartan list coming up!

you are here 4 243

 www.it-ebooks.info
filtered, organized lists in a snap

Filter and organize a list

1 We can add list dividers.

We can break up the list into sections by using list
dividers. This will help organize the list by grouping
tartans by their first letter.

2 We can add a list filter.

With jQuery Mobile, it’s eerily easy to drop in
a 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! To add a filter for the list,
add a data-filter attribute to
the <ul> with a value of “true.”

1 ter="true"> Yep, that’s all

<ul data-role="listview" data-fil there is to it!

You can visually separate the

list by adding <li>s with a
data-role of “list-divider.”
2
<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>

tartans.html

Test Drive
Give the <ul> in tartans.html a filter field and list dividers.
Add list dividers for each letter (except those that don’t
have any tartans, like Q and X).
Save your work and view the results in a browser. Pretty cool, eh?

244 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Our tartan list is nicer now

Quick, mobile-ready widget

like these are one of the s
hallmarks of mobile UI
frameworks like jQuery Mobile.
List dividers help
break up the long
page of tartans.

Typing in this field

will (instantly) filter
tartans by name.

Q: I notice that when you change Q: Will this stuff work on every Q: What happens if a device or
pages in a jQuery Mobile web app, there phone? browser isn’t supported? Or if JavaScript
is an animation effect. What is that? is turned off?

A: To make web apps feel more

A: No mobile framework can claim that
distinction. But jQuery Mobile strives to have A: jQuery Mobile’s philosophy is heavily
consistent with mobile user interface as much cross‑platform support as possible. biased toward progressive enhancement.
patterns, jQuery Mobile applies a transition You can see a list of the supported devices And so is our underlying markup!
to page changes. and browsers and how well they are presently
Why don’t you try it out yourself? Load
supported at http://jquerymobile.com/gbs.
By default, the slide transition will be up the Tartanator in a web browser with
used, which makes it appear that the new disabled JavaScript. Sure, it isn’t exactly
page is sliding in from the right. To change pretty, but it works.
the transition that is used, you can add
a data-transition attribute to
the link in question. Half a dozen or so
transitions are supported. See jQuery Mobile
documentation (on its website) for details.

you are here 4 245

 www.it-ebooks.info
client feedback

It’s time to show the early Tartanator

work to Ewan
How are we doing on the project steps?

Build content pages and site structure.

Create the tartan listings.

Build a prototype of the tartan-building form.

Before we start into the form, let’s check with the client to
make sure our overall approach so far is OK.

Hmmm…it’s…nice,
but can you make
it feel more…like a
native app?

246 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Jim: What does “make it look like a native app” even mean?
Frank: It seems like that’s a very subjective thing, doesn’t it? I
think 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 and
icon‑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 too
much at the expense of others?
Frank: Heh, yes. When people say “native,” sometimes they
are 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, our
Android and BlackBerry users.
Frank: I think we need to pick and choose some things we could
enhance to make the Tartanator feel more like an app without
making it look like an iPhone app. To be fair, jQuery Mobile
elements in their default skins look kind of iOS style. So we’re
already partway down this path.
Jim: So the aim is to make the Tartanator feel more like an app
without necessarily feeling platform‑specific native?
Frank: Exactly. I’ll sketch down a few thoughts on some changes
we can make to shoot for that goal.

The new goal: make the

Tartanator look more applike
without necessarily looking
platform-specific.

you are here 4 247

 www.it-ebooks.info
make like an app

Tricks to make it feel more like an app

Here are some quick things I think
we could do to make the Tartanator
feel more like an app.

A head
er that
sticks a
round

pp!
More like an a with a
ep la ce cu rren t <ul> of linksatever
-R h
bar/navbar/w
Tabs/
b persistent toolm of the screen.
utton
s inst at the botto
ead o e
f link h icons for th
s - Buttons witfeel more like an app.
toolbar will
What about the A eader stick
bou t Us page? - Make the h
around, too.
- Recent email fr
content isn’t pannom Ewan:
as well as he’d hopeing out
d.
- Maybe conflate
page and the Abo the landing Make Tartanator feel more applike: to-dos
into one? Use the ut Us page
as the info page? landing page
Convert links on landing page into persistent
toolbar with icons.
Do away with the separate About Us page, as
content is not forthcoming. Consider the current
landing page the de facto About page for now.

Make the header bar persistent, too.

248 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Add a footer toolbar

In jQuery Mobile, it’s easy to add a fixed‑position toolbar to either
the header or the footer. To create a more applike feel, let’s put a
toolbar in the footer instead of having the links to the Tartanator’s
sections inside a <ul> on the landing page.

Construct a navbar
Inside of a header or footer container—so designated by the
data-role attribute—we can put another <div> with a
data-role of navbar. This tells jQuery Mobile to treat the Notice that we’ve
contents as buttons in a toolbar. The basic construction looks removed the
like this: data-theme attribute.
A data-role of navbar
triggers jQuery Mobile <div data-role="footer" data-position="fixed">
to make this look like, <div data-role="navbar">
well, a navbar.
</div><!-- /navbar -->
</div><!-- /footer -->
Navbar buttons (i.e.,
links) will go in here.
index.html
Put buttons in the navbar
Instead of links in a vertically organized list, we’re going to make
toolbar buttons to access the main sections of the Tartanator.
This is a more applike metaphor.
Remember, we’re
jQuery Mobile will automatically convert linked list elements jettisoning the
within a navbar into buttons. aboutus.html page
in favor of using
the index.html
<div data-role="footer" data-position="fixed"> page as an About
<div data-role="navbar"> page.
<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>
jQuery Mobile will </ul>
automatically make </div><!-- /navbar -->
these links look </div><!-- /footer -->
like buttons.

index.html

you are here 4 249

 www.it-ebooks.info
iconic toolbar buttons

Make the toolbar snazzy

Take 1: Detail of
So far, so good, but our toolbar buttons are a bit drab.
jQuery Mobile comes with a set of 18 or so default icons
button rendering
that we can use, easily. Let’s drop some icons in by using
the data-icon attribute.
They look like buttons, all
A list of available default right, but they could be a
icons can be found in the bit more fancy.
jQuery Mobile documentation.

<div data-role="footer" data-position="fixed"> The data-icon attribut

e
<div data-role="navbar"> indicates which icon to use
<ul> in this button.
<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><!-- /navbar -->
</div><!-- /footer -->

index.html

Also, let’s denote which section the user is currently viewing by

setting a class of ui-btn-active on the appropriate link. This code goes in index.html.
This will show up with theming that makes it highlighted, thus For the other pages, you’d
appearing active. want to assign this class to the
appropriate anchor tag.

<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>

index.html

250 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Finalize the structure

Let’s check in on our to-dos:

Convert links on landing page into persistent

toolbar with icons.
Detail of navbar as the Do away with the separate About Us page, as
updated code renders it. content is not forthcoming. Consider the current
landing page the de facto About page for now.

Make the header bar persistent, too.

We just need to tweak

What about that footer the header a bit now…
slogan we spent so much
time adjusting?

Ah, yes. Life on the Web! Requirements

are always changing.
We’ve replaced the footer with a navbar, but we don’t
have to discard the tagline entirely. Let’s make it a
kind of subheader on the landing page (only).

Make the header sticky, too

While we’re in there, let’s make the position on the
header fixed, too. That will make the header behave
in the same way as the footer: always present at the
top of the screen, even if the user scrolls.

<div data-role="header" data-position="fixed">

<h1>The Tartanator</h1>
</div><!-- /header -->
<div data-role="header" data-theme="b" class="forrit">Bring forrit
the tartan!</div>

index.html

you are here 4 251

 www.it-ebooks.info
test it and get feedback

Test Drive
Ah, iterative design. The way of the Web. Let’s update the Tartanator.

1 Implement the new footer navbars.

Edit index.html, findevent.html, and tartans.html. Replace the footer with the
version we cooked up on page 250.

Make sure to assign the ui-btn-active class to the correct anchor

tag, depending on the page.

2 Give the header a fixed position.

Add a data-position attribute to the header on each page.

3 Add the tag line to the landing page (index.html).

For index.html (only), add the tagline as a subhead.

That’s looking
more like an app!

Both the header and footer are now fixed.

They will always show up at the top and the
bottom of the page (respectively), even if
the user scrolls.

252 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Time to make that tartan-building form

The next step in the project is to create a prototype of a form that will let
users design their own tartans, right from their mobile browsers.

Build content pages and site structure.

Create the tartan listings.

Build a prototype of the tartan-building form.

Ewan would like users to be able to construct their
own tartans by using an applike mobile interface.

Create a tartan design?

What does that even mean?

A tartan design is like a recipe.

But instead of a list of food ingredients
and their measurements—ounces, grams,
teaspoons, whatever—it’s a list of colors
and their relative sizes in the pattern.
When a tartan is woven, this pattern is
repeated both horizontally and vertically.
We need to have a rough idea of how
tartans are put together so that we
can build a form to gather the right
kinds of info.

you are here 4 253

 www.it-ebooks.info
a very tartan recipe

Tartans: patterns like recipes

Let’s look at an example. To create the Carmichael clan tartan,
the pattern looks something like:

Size
Color
(Stitches)
Each ingredient in the
pattern is a pairing of a
color and a size. Black 6
Green 72
Blue 56
Red 4
Blue 4
Yellow 6

The Carmichael
Follow the tartan recipe clan tartan.
To 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 of
green, followed by 56 blue, and so on. The first and last colors (black
When the last color in the pattern is reached (six stitches of yellow, and yellow) don’t repeat. In
in our example), the pattern is followed in reverse (blue, red, blue, tartan-ese, these are called
green). When the first color (black) is reached again, the cycle repeats. “pivots” in the pattern.
The pattern is woven both horizontally and vertically (warp and weft)
to create the overall tartan pattern.
4 blue
6 black 4 red
72 green 56 blue 6 yellow

Back and forth and

back and forth and
Pssst…this is the back and…
same pattern as
above, just shown
horizontally instead We need to create
of vertically. As the different colors form fields that will
overlap horizontally and collect the color and
vertically, they create size value for each
the distinctive pattern. ingredient in a user’s
tartan design.

254 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Translate tartan patterns to a form

Let’s take a look at the form prototype we
want to build. We need fields that allow
users to enter in those color‑size pairs
that build a tartan recipe. Basic info about the tartan
being created: its name an
an optional description. d

Color-size field pairs

let users build the
ingredient list for
their tartan recipes…

OK, we have a general …and so on with the

idea of the form we color-size combo fields.
want to build. Let’s go (There are more.)
build it!

Create an empty jQuery mobile page to hold the

tartan‑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 “Tartan
Builder.” Name this file build.php.

you are here 4 255

 www.it-ebooks.info
HTML5 form structure

Build an HTML5 form

The form itself will be a standard HTML5 form: jQuery
Mobile will adapt it to make it look and feel more
mobile‑friendly. In Chapter 7, we’ll make the form actually Tartan recipe
do something, including enhancing its interactivity with
JavaScript and spitting out actual tartan images.
- Tartan name
n
For now, we’ll lay the groundwork and create a baseline,
- Tartan descriptio
no‑frills form that will work in nearly all mobile browsers. (optional)
ze
- Series of color-si
combinations

Form structure
These are the things our
We’ll want users to name their tartans and, optionally, form needs to collect.
enter a description. Then, they can define color‑size
combinations to build the pattern itself. Let’s give our
form two main sections: a top section for metadata about
the tartan and a main section for defining colors and sizes.

Using ID attributes Ready Bake

We’ll use a listview <ul> to will help us script
help with the layout of enhancements later. Form structure
our 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><!-- /content -->

These two list-divider build.php

<li>s break our form
into two sections.

256 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

It’s time to add some basic fields

The metadata form fields—name and description—are pretty basic.
We’ll use a text input and a textarea, respectively. The only difference
between the markup we’ll use and what you might be accustomed to is that
we’ll take advantage of the HTML5 placeholder attribute.
We’ll also be careful to use proper, semantic, accessible
label elements.
The placeholder attribute lets us add initi”al,when a
placeholding text in a field—it “goes away ents.
user clicks into the field and alters its cont

Ready Bake
<li data-role="list-divider">Tell us about your tartan</li>
<li data-role="fieldcontain">
Form Fields
<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 description
or info"></textarea>
</li>
<li data-role="list-divider">Build your colors</li>
build.php

Give jQuery Mobile hints about the fields

You may notice above that each field is inside an element with a data-role
of fieldcontain. This data-role gives jQuery Mobile a hint that form
fields 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.

you are here 4 257

 www.it-ebooks.info
nested lists

Lists within lists let the users add colors

Each piece of the tartan pattern is a combination
of a color and a size (width). For layout, let’s group
each of these compound fields into a single <li>. For the
baseline experience—that is, for browsers without JavaScript
support—we’ll generate six of these field groups with PHP
(saves on typing!).
So, each color-size
Here’s a starting point: ingredient will be contained
within a single <li>—two
actual fields per <li>.

<li data-role="list-divider">Build your colors</li>

<?php for ($i = 0; $i < 6; $i++): // 6 color fields ?> This PHP for loop
<li class="colorset"> will generate 6 of
whatever is inside
</li> the loop.
<?php endfor; ?>
</ul>

The color and size fields

build.php
will go here.

Q: Why are we not assigning the Q: I’m confused. Which kind of Q: Do I need PHP for this part of the
data-role of fieldcontain element should I be assigning the project?
class to this <li>? It has fields in it.
A:
fieldcontain data-role
attribute to? Yep! As we move into the more
A: Each of these <li>s (li.
A: Whichever element contains the
functional pieces of the Tartanator, we’ll be
using PHP to do the crunching and thinking.
) will actually contain two
field itself—its immediate parent. That
colorset
fields. When we build the fields themselves,
we’ll place each one of them within its could be an <li> or a <div> or a
own <div>, and we’ll assign the <fieldset> or a <p> (or whatnot).
fieldcontain data-role to that The fieldcontain data-role
<div>. tells jQuery Mobile to group the contained
field and its label when enhancing the
form. So, each containing element with a
data-role of fieldcontain
should contain one field (and its label).

258 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Color-size ingredient pairs: The color select field

Each 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 we
enhance the form with JavaScript.
It’d be cool if we could
use the HTML color
Obviously, we want more than just black and white as color options! input type, but, alas,
More on that in a moment. it’s not yet supported
in many browsers.

<li class="colorset">
<div data-role="fieldcontain" class="color-input">
<label class="select" for="color-<?php print $i ?>">
Color</label> Recall that we’re
<select name="colors[]" id="color-<?php print $i ?>" > inside a PHP loop;
<option value="">Select a Color</option> this assigns each field
<option value="#000000">Black</option> a unique ID.
<option value="#ffffff">White</option>
</select>
</div>
</li>

build.php

The field above renders

about like this on
modern WebKit-based
mobile browsers.

you are here 4 259

 www.it-ebooks.info
down on the range

Color-size field pairs: The size field

We’re using an input type new to HTML5: range. This field
type has increasingly good support among modern browsers
(though certainly not universally). In supported browsers, it
renders as a slider; in unsupported browsers, it degrades to
a text field. jQuery Mobile further enhances the slider into
something mobile‑friendly.

The min and max attributes do

This part goes right what they sound like they’d
after the <select> define minimum and maximumdo:
we just built. values for the fields.

</select>
</div>
Tartan patterns <div data-role="fieldcontain" class="size-input">
can only have <label for="size-<?php print $i ?>">Stitch Count</label>
stitch counts <input id="size-<?php print $i ?>" type="range" min="2"
in multiples of step="2" max="72" autocomplete="off" name="sizes[]" value="2" />
2. The step </div>
attribute should </li>
be able to help
us here.
build.php

The field above renders

about like this on
modern WebKit-based
mobile browsers.

260 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Test Drive
Time to put it all together and build our mobile‑looking (if not‑yet‑functional) form.

1 Put the form fields into build.php.

Drop in the markup from pages 256 through 260 to Looking (and feeling)
create the basic form fields. more applike.

2 Add more color options to the colors field.

You can use the colors (hex values) from the file in
extras/color-list.txt and/or add any color you’d like to
have available for tartan building.

Save build.php and load it up in a mobile browser!

Looks pretty good… but

how would users get to
the form page?

We need to link to the

form and back again in
an applike way. Let’s
do that now!

you are here 4 261

 www.it-ebooks.info
there…and back

Link to the form

The 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 landing
page (the long list of existing tartans). Adding a button in the header
should suffice:

<div data-role="header" data-position="fixed">

<h1>Popular Tartans</h1> Give the button
<a href="build.php" data-role="button" data-icon="plus" a “plus” icon.
class="ui-btn-right" data-theme="b">Create</a>
</div><!-- /header -->

tartans.html
The ui-btn-right class will Assign the “b” theming
make the button float swatch to make the button
right (instead of left, stand out a bit more.
which is the default).

…and give users a way back

On 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><!-- /header -->

build.php

By adding data-rel="back" to the anchor tag, we tell jQuery Mobile

to treat this link as a back link. When possible, jQuery Mobile will send
the user to the last location in her history when she clicks this link. For
nonsupporting browsers, we supply a good default href, which is, in this
case, tartans.html.

262 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Test Drive
1 Link to the form from tartans.html.
Add the Create button to the header in tartans.html.

2 Put a back button on the form page (build.php).

Add a back link to the header of the Tartan Builder page.

Build content pages and site structure.

We need to create basic pages for the site and
create an overall structure that looks and feels right
on mobile devices.

Create the tartan listings.

For the first phase, we’ll create a listing of existing
popular tartan patterns. The tartans section should
be a browsing interface that—of course—looks
and feels applike and mobile oriented.

Build a prototype of the tartan-building form.

Ultimately, Ewan would like users to be able to
construct their own tartans by using an applike mobile
interface. He wants to see what that might look like, so
we’ll whip him up a prototype.

Yay! We’re done with phase 1 of the

Tartanator. Time for customer review.

you are here 4 263

 www.it-ebooks.info
you’re done

Hey, guys. That’s looking pretty good.

I’m excited about moving on to the
next phase of the Tartanator—that’s
where the fun stuff really happens.

y M o b i l e H e lp
jQuer the surface
scratched
We’ve barely e things you can do
of all of th Mobile in this chapter.
with jQuery
lea rn mo re or find more f we’ve
To
rm ation ab out the stuf entation
info r to the doc
um
covered, refe ymobile.com. It’s very
on www.jquer
detailed.

ƒ People want apps! The definition of what, exactly, makes ƒ There are lots of mobile web frameworks out there
a website a web app is fuzzy. Applike websites tend (more every day!), representing many different
to feel more interactive than content pages. Chunks of approaches and emphases.
content and data are often retrieved asynchronously and
ƒ jQuery Mobile is a popular mobile web framework.
inserted into an existing DOM, reducing the frequency of
It has a strong relationship with well‑formed HTML5
full‑page loads.
markup, which makes it relatively straightforward to build
ƒ HTML5 is a specific, single thing—it’s a spec mobile interfaces from basic code.
representing the evolution of HyperText Markup
ƒ We built the structure for phase 1 of the Tartanator by,
Language (HTML)—but the term HTML5 is often used
among other things, using jQuery Mobile–enhanced
to represent a combination of technologies that create
listviews, headers, footers, navbars, and form elements.
applike web experiences.
ƒ Making a web app feel more native is always a
ƒ Building mobile web apps from scratch can be very
balancing act, requiring some careful decisions.
complex. We encourage you to try it! But for our
purposes, we used a mobile user interface development ƒ We used some HTML5 form element attributes to
framework to help us out. build our prototype form. jQuery Mobile helps to adapt
these form elements across mobile browsers, including
adaptation for those that don’t support them yet.

264 Chapter 6
 www.it-ebooks.info
build a mobile web app using a framework

Q: How much of the code in the Q: Colors as a select list—that Q: The header and footer blink
Tartanator so far is really HTML5? doesn’t seem like the most fantastic sometimes, or are slower to load
That is, how much of it uses tags or user experience. than the other parts of the page.
attributes that are new as part of the Sometimes scrolling feels a bit slow.
HTML5 spec? A: When we enhance the form in
Chapter 7, we’ll add some JavaScript
Why is that?

A: We’re using the data-*

attribute quite a bit. That’s new. We
code that will show the user the color
she has selected.
A: One of the ways jQuery Mobile
attempts to emulate a native‑ish
are also using the range input type experience is by using fixed‑position
and the placeholder attribute Q: What happens to mobile headers and footers (when you
designate them as such, that is). The
in our form. browsers that don’t support
range inputs yet? way this is actually carried out differs
Q: I put the step attribute into
on different platforms.

my range input for the size fields

of the form, but I can still enter any
A: As long as the browser supports
JavaScript and CSS fairly well, jQuery
In a nutshell: although the landscape
is improving very fast, fixed positioning
value between 2 and 72…even and Mobile will convert the range field (in CSS, position:fixed)
odd numbers both. What gives? into a slider widget (actually, it does has unpleasantly scattered and weird
this for browsers that support range support in mobile browsers. There
A: Unfortunately, at the time of this
writing, jQuery Mobile’s range slider
inputs also). are workarounds, but they aren’t
perfect. The slightly‑less‑than‑totally‑
If a browser doesn’t support range snappy performance and occasional
widget doesn’t support the step inputs and doesn’t have JavaScript peculiarity are often manifestations of
attribute. We’ll show you a workaround support (or it’s disabled), the range the trade‑off the framework is making
in Chapter 7. field will most likely appear as a between being applike and adhering
standard text input field. carefully to web standards.

Congratulations,
you’ve just built a
mobile web app with
HTML5 and its friends.
See? It’s really not too many steps from
the HTML and CSS you already know to
a mobile‑feeling, applike website!

you are here 4 265

www.it-ebooks.info
 www.it-ebooks.info

7 mobile web apps in the real world

Super mobile web apps

Pull my pigtails again,
and you’ll pay! There’s
nowhere to hide. I can
find you anywhere...

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

this is a new chapter 267

 www.it-ebooks.info
retailoring the tartanator

It looks nice…
Now that we’re done with phase 1, the Tartanator has that
mobile‑web‑app sheen.

It talks the talk…

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

268 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Shiny, sure. Mobile-riffic,

sure. But it doesn’t do
anything. Doesn’t an app
need to do something?

Take heart. It may seem like

building phase 1 was full of
sound and fury, signifying
nothing. But we’ve laid some
really good groundwork.

We've got a
straightforward structure
based on HTML5—now
it's time to take it to the
next level!
…but it needs to walk the walk
Phase 2 will build on the stuff we’ve put in place, turning our
solid—but admittedly somewhat functionality‑free—web app into
what we think of as a super mobile app!

you are here 4 269

 www.it-ebooks.info
super mobile web apps

Mobile apps in the real world

Mobile web apps that take good advantage of innately mobile
characteristics often have certain aspects in common.
What we like to call super mobile web apps feel like mobile apps for
the real world. They adapt to their users’ disparate devices with
the robust use of progressive enhancement. When the user
doesn’t have a data connection, these apps can function in an
offline mode. And they take advantage of browser‑accessible
geolocation to provide location‑relevant content.

Super Mobile Web Apps knows all

about the three features we’
explore in this chapter to mallke
mobile web apps more “super and
take advantage of its inhere”nt,
awesome mobileness.

Geolocation

Progressive enhancement
Offline mode

270 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

What will we do to complete Phase 2 and make the Tartanator a

super mobile web app?
Our first task is to get a grip on what it is we’ll need to implement to
complete the Tartanator as outlined by Ewan in Chapter 6. Highlight
the requirements we haven’t completed yet. Then we’ll boil them
down into a few core objectives for this phase.

App?
ite!
New Webs eessag
- Make it so
u
see and explo sers can
Welcome m out Us
tartan patt re the
…link to Ab
About Us page Keep t h is s im p le e
their phones. rns right on
ore info...
A history of Tartan page for m
nts Lots of images
Tartan eve
s Unlimited.
Links to informatio ot
n about v e s o m e id eas here…n - Wouldn’t it
of tartans!
the history of tart I ha le! b e
ans. are possib users could c c ool if
sure if they own tartans? re a te their
This content isn’t Bug Pat
ready yet. about th
is. Tartans! Ewan
This is the main part of th
e Can this b
e done?
Events page idea…sounds like an app? - A collection
popular “tra of tartans:
d
- It would be nice if the app
or! as well as ne itional” ones
nat
The Tarta
could somehow “link into” our w-world and
user-create
international events database. d tartans.
the whole or”?
Maybe call t
he Tartana
- Could a user’s phone help app/site “T g!
rin
find the nearest events? Has a nice

ait until
- Might want to w
of the site
phase 2 or phase 3
mplex?
for events stuff—co

you are here 4 271

 www.it-ebooks.info
tartanator phase two goals

The major objectives for the second phase of the project really
fall into two core goals:

1 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 the
pieces to make this actually work. We also need to enhance the existing form to
make it more usable for fancier smartphones and add a few bells and whistles.

2 Build a dynamic, searchable, location-aware Events page.

We’ll need to hook into an existing events data source to let users find nearby
tartan-related events. That means we’ll have to delve into geolocation!

App?
ite!
New Webs eessag
- Make it so
u
see and explo sers can
Welcome m out Us
tartan patt re the
…link to Ab
About Us page Keep t h is s im p le e
their phones. rns right on
ore info…
A history of Tartan page for m
nts Lots of images
Tartan eve
s Unlimited.
Links to informatio not of tartans!
n
the history of tart about a v e s o m e ideas here… - Wouldn’t it
Ih le! b e
ans. are possib users could c c ool if
sure if they own tartans? re a te their
This content isn’t Bug Pat
ready yet. about th
is. Tartans!
This is the main part of th
e Can this b
p? e done?
Events page idea…sounds like an ap - A collection
popular “tra of tartans:
d
- It would be nice if the app
tor! as well as ne itional” ones
na
The Tarta
could somehow “link into” our w-world and
user-create
international events database. d tartans.
the whole or”?
Maybe call t
he Tartana
- Could a user’s phone help app/site “T g!
rin
find the nearest events? Has a nice

ait until
- Might want to w
3 of the site
phase 2 or phase
mplex?
for events stuff—co

272 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Frank: That first big requirement is a doozy, isn’t it? I think it’ll help
to break it down into smaller chunks.
Jim: Before we do that—what happened to the outstanding item for
the About Us page and historical background?
Frank: Oh, right! The wife of the guy who writes bios and
informational copy for Tartans Unlimited just had a baby. The new
father has found himself far busier than he expected and isn’t going to
be able to help out with the project for a while. Big surprise, huh? So
we’re not on the hook for that one right now.
Jim: Well, that’s one less thing, I guess. Let’s talk about getting the
pieces 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 been
tinkering with a bit of JavaScript to enhance the form.
Joe: Cool. That’ll look nice and pretty. But we also need to drop in
server‑side scripts to do the actual work—
Jim: You server‑side guys! Trust me, enhancing the form interface is a
really significant improvement.
Joe: Anyway, I’ve been working on the PHP scripts. What about the
events stuff ?
Jim: Actually, is it OK if we focus on getting the tartan generation
nailed and circle back on the events searching when we’re feeling
ready to think about it? I only have room in my brain for so much at
one time.
Frank: I guess that’s fine as long as we get cracking on the custom
user tartans stuff right quick. We’re on a pretty tight timeline.

To-dos: custom user tartan pattern implementation Here's our master to-do
list for the custom
tartans requirement.
We'll start here!
Enhance the form we built to take advantage of capabilities of newer
mobile browsers.

Drop in server‑side code for processing the form and generating

resources (images, HTML, etc.) for user‑created tartans.

Make sure the offline experience for this part of the app is acceptable.

you are here 4 273

 www.it-ebooks.info
nifty enhancements

Ready, set, enhance!

Strap yourself in. We’re about to make a lot of nifty enhancements
to the Tartanator’s create form—in very short order.

We did the right thing

We designed our form for the baseline experience: The form is functional
we’re not leaving anyone out in the cold (well, very without any JavaScript at
few people, anyway). Take a look at what happens all–that's a good thing!
if you load up the Tartanator build form with no
JavaScript at all.

Now let’s enhance But it's a bit

clunky on a newer
It’s functional for everyone, but also kind of smartphone browser.
ugly and unwieldy for everyone. While having
six color‑size combo fields is OK for a less
full‑featured browser, it’s an encumbrance for
more sophisticated ones.
Now that we have our baseline ducks in a row, let’s
drop in some enhancements that will make the
form more of a pleasure to use with smartphones.

First step to a super mobile web app: We can get

enhance the UI for the browsers that rid of these
support it well. space-consuming
repeated fields
and instead create
a single widget.
No need to panic about
writing your own widget. The
JavaScript is all ready for you.
Some crackerjack frontend devs
cranked out this enhancement JavaScript. The devs
always get so excited and productive when they get to
work on mobile web app projects!
We’ll walk you through the highlights (and you can
always spend some time looking at the code), but you
don’t have to write it yourself or anything!

274 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Make a better form

Instead of having six fields—both
cluttered and limiting—let’s use a single Only one color-size set, not six
widget. This will allow our users to add
as many color‑size combos as they like!
We can do this by using JavaScript to Clicking on “Select
remove all of the color-size fields click a Color” pops up
except for the first set. this customized
field widget.
A custom widget for the
color select field
We can override the default select
interface in the browser and use one
of jQuery Mobile’s custom select UI
widgets. That way, we can show color
swatches for each option.
The custom jQuery Mobile widget
we’re going to use pops up like a dialog
to display the color options.

For curious jQuery and

JavaScript folks
Geek Bits

If you’re familiar with jQuery code, the construct $(document).ready might be

something you see (or use!) a lot. The jQuery .ready method is kind of like (though not
identical to) the browser’s body.onload event—when it fires, it indicates that the DOM
is loaded and ready. jQuery developers typically wrap their code in this so that it doesn’t
execute before the page’s DOM is ready. jQM also
In jQuery Mobile (jQM), you don’t (usually) want to use $(document).ready. Instead,
introduces
jQM introduces some new page-load-related events, the most important of which are mobile-relevant
pageinit and pagecreate. pagecreate is fired after jQuery and jQM have completed events for touch,
initializing the DOM of the page, but before widgets are rendered. pageinit is fired after orientation,
widgets are finished, too. And remember that subsequent pages are often inserted into the and transition,
first page’s existing DOM—that means that pagecreate and pageinit events can fire among others.
multiple times in a single full-page load.
Confused a bit? So were we. It takes a few minutes for even seasoned JavaScript and jQuery
folks to fully grasp the concept. Read more in the JQM docs (http://jquerymobile.com/demos).

you are here 4 275

 www.it-ebooks.info
widgetized colors and sizes

A widget to manage the list of colors and sizes

We’ve now removed all but one of the color‑size field combos. Using
that remaining pair of fields, we need to be able to generate an arbitrary
number of color‑size combos.
To do this, we add a new button: Add This Color. When clicked, the
currently selected color and stitch count are added as a list element (<li>) JavaScript does all
to an unordered list (<ul>) of current color‑size values. We also add of this.
hidden form fields to the <li> to contain the color and size.
Clicking on an <li> in the existing color list will remove it and its
contents from the list. Finally, clicking the “Make it!” submit button will
generate a tartan pattern with all of the color‑sizes currently in the list.
The select list background
reflects the currently
chosen color.

The remaining
color-size When the range input
field pair changes value, a function
makes sure the stitch
count is an even number.
When a user clicks the Add
This Color button, the This is our workaround
color-size combo is added for jQM's lack of support
to the list. for the step attribute on
Color-size list range input fields.
ul#colorlist
Clicking an item
already in the
list removes it.

Enhanced build.php
form (detail) Our form's submit button
Take it for a spin
The button becomes
Hey, good news. You don’t have to do visible once at least one
anything to get the frontend enhancements color-size combo has
to work. It’s already done for you. Remember, the form is on been added to the list.
The starting point of the code in the the build.php pag
e.
chapter7 folder already includes the Also, we haven't “hooked up”
JavaScript enhancements. Go try it out! the backend yet; clicking
See how it feels in a mobile browser. this won't do anything yet!

276 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

A peek under the hood

We promised that you wouldn’t have to write the JavaScript, but it might
behoove you to get a loose handle on what it’s doing. Do this!
In a nutshell, there are a bunch of things that happen when the page with
the form on it has been fully loaded into the DOM (pagecreate event)
Get cozy with the code. Take a few
and also some stuff that happens after the jQuery Mobile widgets are
minutes to go hang out with and
finished enhancing things (pageinit event).
get to know the updated pieces of
the Tartanator app, especially the
In these initialization functions, other functions are attached to various

updated tartanator.js script.

events (form field changes, clicks, form submit, etc.) to enhance user
interaction and make our custom widgets functional.

Match each function in the JavaScript enhancement code (tartanator.js) to what it

does, and also to the event(s) that trigger it. Reference the comments in the script
and use your noodle to determine what each of these functions does for us.
For an extra challenge!
Function name What it does Event that triggers it

onStitchSizeChange() Refreshes the <ul> and <li> elements pageinit and change
of the current color list. (color select field)

Constructs the button to add a color‑size click (on Add This

styleColorListItem() combo and inserts it into the DOM. Color button)

Sets the background color of the select pageinit

buildAddButton() widget to the currently selected color.

click (on list element in

Constructs hidden form fields, puts them
current color list) and after
onColorListChange() in a new <li>, and appends the <li>
new color added to list
to the existing color list.

Adds a colored CSS border (swatch) to

addColor() change (size input
the left side of each color select option. value updated)

pagecreate
setColorSelectStyle() Makes sure the size value is an even integer.

you are here 4 277

 www.it-ebooks.info
exercise solution

So, that’s the frontend enhancement…

Enhance the form we built to take advantage of capabilities of newer Done!
mobile browsers.

Drop in server‑side code for processing the form and generating Next up!
resources (images, HTML, etc.) for user‑created tartans.

Make sure the offline experience for this part of the app is acceptable.

SOlUTion

Function name What it does Event that triggers it

onStitchSizeChange() Refreshes the <ul> and <li> elements pageinit and change
of the current color list. (color select field)

Constructs the button to add a color‑size click (on Add This

styleColorListItem() combo and inserts it into the DOM. Color button)

Sets the background color of the select pageinit

buildAddButton() widget to the currently selected color.

click (on list element in

Constructs hidden form fields, puts them
current color list) and after
onColorListChange() in a new <li>, and appends the <li>
new color added to list
to the existing color list.

Adds a colored CSS border (swatch) to

addColor() change (size input
the left side of each color select option. value updated)

pagecreate
setColorSelectStyle() Makes sure the size value is an even integer.

278 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Interface Enhancement Exposed

This week’s interview:
Enhancement: is it all just fluff

Head First: OK, I gotta ask. We just did a whirlwind Head First: You’ve overridden the rendering of a
tour of a bunch of jQuery Mobile–specific JavaScript native form element. The color select field is now
interface enhancements. Was it really worth it? using a custom jQuery Mobile widget. Isn’t that kind
Interface Enhancement: What jQuery Mobile
of taboo?
makes possible, quickly, with respect to enhancing the Enhancement: It’s true that messing with native
mobile interface is compelling, sure, but I get your form controls is a bit controversial. I don’t argue for it
drift. Really, I’m trying to illustrate a broader concept as a general rule. However, in our particular case, the
here. styling necessary to give visual clues to the user—color
Head First: Which is?
swatches—wasn’t possible with traditional select fields.

Enhancement: Regardless of whether you are

The underlying markup is still semantically
appropriate—a <select> element—but we’re
using a framework, designing for a baseline and then
tweaking it to make it a more usable experience. But
enhancing is a good philosophy.
Head First: With JavaScript?
yes, you are correct in that we should consider native
form control overrides carefully.
Enhancement: Let your mind go a bit here…this
is broader than JavaScript, too. We’re talking about
starting basic, defining the core experience or content,
and then making it better—that is, really taking
advantage of what more powerful mobile browsers
can do.
Head First: By adding bells and whistles.
Enhancement: I like to think that my contributions
are bigger than rounded corners and gradients. We’ve
taken a somewhat limited and awkward form and
made it better for applicable users.

The build-a-tartan form

in an Android browser

you are here 4 279

 www.it-ebooks.info
a new generation of tartans

…and now for the backend

The starting point for Chapter 7 code has the structure
shown here. Getting the backend pieces plugged in
requires a couple of quick steps.
Copy all of the contents of the extras/scripts directory into your chapter7
directory. When you’re done, the chapter7 directory should have three new
files—config.php, generate.php, and image.php—as well as an inc directory (with
two files inside).

chapter7
generate.php image.php config.php inc

build.php A quick tour of tartan generation

css

Form POST data

dialogs

extras
Using the data posted from
the form, generate.php
creates several resources.
findevent.php
generate.php

index.php

js

XML file HTML file PNG

tartans An HTML file for the tartan
An XML file An image of the
representing the tartan is created in tartans/. tartan is output
pattern is output to as a PNG.
tartans.php tartans/data/. This HTML file is based on
the tartan-template.php
file in tartans/.

280 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

The two sides of generate.php

The way that generate.php ultimately responds after creating the We’ve made sure
tartan resources depends on how it was requested.
to support mobile
Requested with AJAX browsers with
For browsers that support AJAX appropriately, the JavaScript
in build.php posts the form data to generate.php using XHR and without
(XMLHttpRequest). If successful, generate.php responds with the
URL of the newly created HTML file for the tartan. The content AJAX support.
of this new page is then inserted into the current page’s DOM.

Asynchronous request with XHR

Asynchronous request
with XHR In this method, there’s never
a full-page reload. The
POST data
content of the new tartan
new tartan page is inserted into the
HTML URL DOM of the build page.
build.php generate.php

<new-tartan>.html

Form posted directly In both methods, the

primary job of generate.php
is the same: create the new
For browsers that don’t support JavaScript and XHR, the form is
directly posted in a “traditional” way to generate.php. After generate.php
creates the tartan resources, the browser is redirected to the newly tartan resources.
minted tartan page.

“Traditional method—redirect to the new tartan page

In this method, the
POST data redirect
client is redirected to
the new tartan page
(a full-page load).
build.php generate.php <new-tartan>.html

you are here 4 281

 www.it-ebooks.info
lists of tartans

One last thing!

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 will
output <li>s for each currently existing tartan.

<ul data-role="listview" data-filter="true">

Do this! <?php include('inc/list.php'); ?>
</ul>

tartans.php

Go create some tartans! Create half a dozen or so

tartans of your own using the form on build.php.
Your creations should appear on the tartans
landing page (tartans.php).

Q: Help! Something’s not working right! Q: About that XML. What the heck is that?

A: If you are having trouble getting your tartan build form to

work, or aren’t seeing any created tartans, here’s a few things
A: We chose to store the data representation of tartan
patterns as XML for a couple of reasons. One, it’s a nice,
to check. simple, portable data format. Two, it obviates the need to use a
database (less work for you!).
First, make sure that the tartans/ directory exists and that it and
all of its subdirectories can be written to by your web server’s
user. Also verify that the tartan-template.php file is in the tartans
Q: By the way, what is this whole super mobile web
directory. Finally, double‑ and triple‑check the <form> tag in app thing you’re talking about? Some kind of standard or
build.php for the correct action and method. initiative or something?

Q: How does the tartan list page work? A: Nah. It’s just something we started calling mobile web
apps that seem like they take good advantage of the neat things
mobile devices and their browsers have to offer.
A: The list.php file included in the page looks at the current
HTML files in the tartans/ directory to generate its list. For each,
it grabs its associated XML file (in tartans/data/) to get further
information, like the pretty display name. It then outputs an
<li> for each tartan, with a link to the tartan’s HTML page.

282 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Two out of three is a great start

We’ve taken some good steps toward a super mobile web app.
We’ve enhanced the baseline interface to take advantage of
savvier browsers. And now the app does something!

Enhance the form we built to take advantage of capabilities of newer

mobile browsers.

Drop in server‑side code for processing the form and generating

resources (images, HTML, etc.) for user‑created tartans.

Make sure the offline experience for this part of the app is acceptable.

We need to deal with

this requirement.
But we’re not done yet
Now we have to deliver on the third piece of the tartan‑creation
implementation: the tartans need to be available offline.

Frustrating. I want to show a friend the tartan

I designed a few minutes ago...but I have dreadful
phone service in this building. I can’t get a
connection...and now my tartan won’t show up.

A stable—or even existent—

network connection is
something we just can’t take
for granted with mobile devices.
We’ve got to do something to make tartans
available without an Internet connection.

you are here 4 283

 www.it-ebooks.info
offline storage

Offline is important
Part of giving a good experience to your users is making
your websites and apps behave when there isn’t an Internet
connection to be had.
For the Tartanator, we need to step back and figure out how
we can make things work better for our disconnected users.
We need to make certain things available offline.

How do we control
what’s available offline?
Is that even possible?

We can use something called a cache manifest to define

which pieces of our app should be available offline.

Make it manifest
Application cache is part of the HTML5 specification. It allows for control
over which web resources are cached for offline availability through the use of
a cache manifest.
A cache manifest is a specific type of file on a web server that gives instructions
about how or whether certain web resources should be cached on a user’s
device. By creating a cache manifest, we can dictate which things are available
offline for the Tartanator web app.
Browsers that implement application cache—or appCache, as it is almost
universally shortened to—also provide the window.applicationCache
object and its various events, which we can access and manipulate with
JavaScript if we like.
Support for appCache is fairly widespread in current browsers, with the
notable exceptions of Internet Explorer 9 and Opera Mini. Using a cache
manifest won’t cause problems for these browsers; they just won’t pay
attention to it.

Can you think of why it would be difficult for

Opera Mini to support application cache?

284 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

A basic recipe to create a cache manifest

There are three general steps to creating and using a cache manifest
on a website or app.

1 Write a cache manifest file.

e
The file must have a content-ittyp
Add a manifest attribute to the <html> tag of the applicable
2
pages with a URL (relative is fine) to the manifest file.
of text/cache- ma nifest , or
3 Make sure the manifest is served as the correct type of file. won't work.

The deceptively simple syntax of a cache manifest

A simple cache manifest file is quite basic in appearance. You list the items you
want cached under the (technically not required, but definitely good practice)
CACHE: heading.
This line, verbatim, is required.
1
CACHE MANIFEST
# comments look like this

URLs can CACHE:

be relative index.html
(like here) or foo/bar.html This file doesn't have to
absolute (e.g., baz.html be named manifest, but
http://…). css/styles.css the preferred extension
icons/plus.png is .appcache.

manifest.appcache

2
Next, you update your web page(s) by adding a <!DOCTYPE html>
manifest attribute pointing to that file. You also <html manifest="manifest.appcache">
need to make sure the file is served as the correct <head>
Content-type (aka MIME-type). You can often
do this simply with Apache by adding the following
to the Apache configuration file or, more likely, an 3
.htaccess file on your website’s filesystem.
AddType text/cache-manifest .appcache
This line tells the web server to
serve files ending in .appcache as the
text/cache-manifest content type. The file has to be of this type, .htaccess
or browsers won't recognize it.

you are here 4 285

 www.it-ebooks.info
cache me, baby

Unfortunately, the devil is in the details

In theory, cache management using a cache manifest file is straightforward.
List the things you want available offline, add the manifest attribute to
the <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 it
to work the way we really want it to can be a bit confusing and sometimes
frustrating. There are a fair number of details and gotchas that can trip you
up. It helps to have good tools to help you inspect and debug what’s going on.

Dev tools to the rescue

WebKit provides a tool called Web Inspector, which is available in both
Chrome and Safari (being WebKit‑based browsers). You can see great Detail of the Resources
details about appCache information in the Resources tab. tab's info about
appCache in Chrome.

Safari's developer
tools look almost
exactly the same. It can be easy to get yourself in a jam working
with cache manifests.
Cache manifest behavior can be tough and confusing to
debug, and malformed cache manifest files are difficult to
find and remove without the right tools. We recommend
It can be a bit painful using either Chrome or Safari for building and testing our Tartanator
to try to excise poorly cache manifest. Also note that appCache isn’t supported by Internet
formed appCaches from Explorer before version 10, which at the time of this writing is still in
mobile devices. developer preview.
It will also help you save your sanity to develop and test on a desktop
browser first before moving to a mobile device.

286 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Serve the manifest as the correct content-type

I’ve never messed around with

.htaccess files, and I don’t even
know if I can do that with my
current web hosting service.

It’s highly likely that you can use .htaccess

files on your hosting provider or local web
server. But we won’t make you.
We do know you can use PHP. So, we’ll generate our cache
manifest files using PHP and use a snippet of code to set
the file’s content-type to text/cache-manifest.

Implement a basic cache manifest for the Tartanator.

1 Name your file manifest.appcache.php and put it in the chapter7 directory.

The .php extension is needed
so that we can execute the
2 Add the following line to the top of the file. PHP code in the file.

<?php header('Content-type: text/cache-manifest'); ?>

This sets the content-type of the output

of this script to text/cache-manifest.

3 Add a CACHE: section and list the main pages of the site, as well as the JavaScript
and CSS files.
Refer to the syntax
on page 285.

4 Update the <html> tag on index.php, build.php, tartans.php, and findevent.php with
a manifest attribute.

you are here 4 287

 www.it-ebooks.info
cache headaches

The manifest.appcache.php file you created should look something like the one below. Note that
we’re also listing the CSS and JavaScript files from jQuery’s content delivery network (CDN).

<?php header('Content-type: text/cache-manifest'); ?>

CACHE MANIFEST

CACHE: In addition to relative URLs to

index.php resources on your own site…
build.php
tartans.php …you can use absolute URLser
findevent.php to denote resources on oth he.
css/styles.css domains that you want to cac
js/tartanator.js
http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css
http://code.jquery.com/jquery-1.6.4.min.js
http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js

manifest.appcache.php
The HTML tag on the Tartanator
pages should now look like this.

<html manifest="manifest.appcache.php">

A trade-off of using PHP tot

generate our manifest is tha
we can't use the preferred
I think I’m doing .appcache extension.
something wrong. A lot of
images and icons aren’t showing
up, even when I’m online.

288 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Cache Manifest Exposed

This week’s interview:
Bending appCache to our will

Frustrated Web Dev: Argh. As I navigate around appCache: Well, that’s not exactly true, either.
the Tartanator site, a bunch of images and icons and I gather you’ve learned about the CACHE section,
stuff aren’t showing up, even though I’m online. but haven’t heard anything yet about the NETWORK
appCache: Well, that’s because you neglected to
section.
include some of these resources in the CACHE list. FWD: What’s it for?
appCache: The NETWORK section lets you define
You should go round them up and add them to the
cache manifest.
FWD: So, I need to list every resource on the site or
resources that you don’t want to cache, and for
which the browser should request fresh copies when
they won’t show up at all? a connection is available. It has a special handy‑
appCache: No. You need to add the resources that
dandy wildcard token, *, which means that anything
not explicitly listed in the CACHE section should be
are needed by the HTML files in the cache.
FWD: I’m totally confused. What does it even mean
retrieved from the server.
FWD: Eureka! That sounds like the answer I need
for an HTML file to be in the cache?
appCache: You already know one way to include
here.
appCache: Take caution. If something is in the
an HTML file in the application cache: listing it
NETWORK section, either explicitly or by dint of the
explicitly in the CACHE section of the manifest
* wildcard, it will always be requested afresh. So you
file. But it’s also worth noting that any HTML
need to choose your path carefully.
file that has a manifest attribute on its HTML
tag is included in the cache manifest, even if it’s Decide what things should really be available offline
not explicitly listed there. Only those pages listed and list them in the CACHE section. It sounds like
in the manifest or referencing it in a manifest you do need to track down some icons and images,
attribute—that is, in the cache—need to have all of for example. But for things that really are dynamic—
their resources added to the cache list. login screens, API calls, etc.—let the NETWORK
FWD: OK, so for any page in the cache, if I neglect
wildcard do its work.
to add each and every resource to the CACHE
section, any missed resource won’t ever load, even if
I’m online.

Can you think of some parts of the

Tartanator web app that we might not
want to make available offline? Why?

you are here 4 289

 www.it-ebooks.info
dynamically output tartans

We need to make the tartan

pages and images work offline, so they
need to be added to the CACHE section.
But how can I do that when I don’t know
what their URLs will be?

Feels like a chicken-and-egg

problem, huh?
Fortunately, we’re using PHP to generate our
manifest file, so we can drop in some code to
dynamically output a list of all of the tartan
HTML files and images that currently exist.

Find the snippet of PHP code to dynamically Do this!

generate the list of images and HTML files
in the chapter7/extras folder. It’s in a file
called current_file_list.txt.

Changes to any of the resources listed in the

manifest’s CACHE section will not be
downloaded by browsers unless the cache
manifest 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, but
browsers won’t see those changes. Once an item is in the cache, it
will only be refreshed if the cache manifest file itself changes.
A common method for managing this is to use a comment line in the
manifest file with a version number. Simply changing this version Remember that
number will cause browsers to see that the manifest has changed, comment lines
download it afresh, and check whether any of the resources within it start with #.
are new or modified.
The PHP code we’ll use to autogenerate a list of current tartan
images and HTML files has the happy side effect of causing the
manifest file to be updated when new tartans are added. But, after
implementing appCache, we’ll need to increment the version number
if and when we change other files.

290 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

It’s easy to create cache manifests that are, shall

we say, not quite what we intended.
Remedying a wayward appCache is easiest in the Chrome
browser. Type chrome://appcache-internals in
the 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 either
Remove All Website Data wholesale, or use the Details button to search for
the problematic site and remove its cache.
In Firefox, go to Preferences → Advanced → Network. There is an area in
the Offline Storage subsection that lists all sites that have stored data for
offline use. You can selectively remove the appCache here.

It’s time to make our cache manifest behave a bit better. Let’s integrate
some of the lessons we’ve learned into the manifest.appcache.php file.

1 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. Kudos if you caught a
bunch of these already
in the earlier step!
2 Add the NETWORK: section and the wildcard.
Put this above the CACHE: section.

NETWORK:
*

3 Add the PHP snippet.

Add the code from extras/current_file_list.txt to the end of the
cache manifest file.
Don't forget to remove
4 Remove build.php and findevent.php from the manifest attribute
the manifest. from the <html> tag on
Come to think of it, these are resources that should only be these pages.
available when the user is online. The Events page doesn’t
do anything yet, but it will. Soon, even.

you are here 4 291

 www.it-ebooks.info
cache solution

t manifest.appcache.php should look about like this now.

<?php header('Content-type: text/cache-manifest'); ?>

CACHE MANIFEST
k
Make sure you don't have any blanline
NETWORK:
lines here between the hea der ()
and the CACHE MANIFEST line.
*

CACHE:
http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css
http://code.jquery.com/jquery-1.6.4.min.js
http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js
http://code.jquery.com/mobile/1.0rc1/images/ajax-loader.png
http://code.jquery.com/mobile/1.0rc1/images/icons-18-white.png
http://code.jquery.com/mobile/1.0rc1/images/icons-18-black.png
http://code.jquery.com/mobile/1.0rc1/images/icons-36-white.png
http://code.jquery.com/mobile/1.0rc1/images/icons-36-black.png
index.php
tartans.php
css/styles.css

<?php // The PHP code snippet from the current_file_list.txt file

// goes here. We're not showing it to save space.?>

Now, save the file and try it out!

A single problem with a cache manifest

can cause the whole thing not to work.
Just what you need, more gotchas. But you should
know that if a single resource in the manifest
results in a 404 (not found), the entire manifest will
be disregarded. Similarly, a single syntax goof can render the
whole thing useless.
You can protect yourself. Use the handy-dandy manifest
validator at http://manifest-validator.com/ and keep an eye
on your developer tools windows to make sure none of the
referenced resources is missing.

292 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Confusing. I think it mostly

works, but when I add a new tartan, it
doesn’t show up on the tartans list page
right away. I have to reload the page.
That’s not quite right, is it?

Even though the cache manifest file

has been updated, you have to reload
the tartans list page (tartans.php)
before you can see the newest stuff.
What gives?

you are here 4 293

 www.it-ebooks.info
update, don’t reload

Frank: 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 manifest
file for the site. Then say you visit the tartans listing page again later
after new tartans have been created. Your browser will notice that
the cache manifest file has changed—it’s different from the one the
browser already had because the list of tartan files in it has changed.
Your browser will immediately grab the new manifest file and check for
updated or new stuff.
Jim: Then why the heck doesn’t the updated or new stuff show up
right away?
Frank: The browser doesn’t wait around for all of the resources that
are updated or new to download before rendering the page. Once the
browser does finish downloading stuff, the new or updated assets are
ready to go, in the browser’s cache, but won’t show up until the page is
refreshed.
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 particular
situation. 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 output
by the PHP file included in it—that is, list.php. It outputs one <li> per
tartan. The rest of the page is static. We really only care about updating
the contents of the tartan list <ul>.
Jim: True.
Frank: My code uses the window.applicationCache object
and its methods to see if there has been an update to the cache—which
there will be if the manifest file has changed, right? If there has been
an update, we want to get the updated output from list.php.
Jim: Right. If the cache manifest has updated, we know the tartan list
should be updated. Preferably without the user having to reload the
entire page.
Frank: Yeah. So, if there has been an update to the cache manifest, my
code sends an AJAX request to list.php. list.php isn’t in the manifest and,
when requested directly, will always return HTML markup representing
the current list of tartans. I then take the markup returned by list.php and
replace the current—that is, stale—list on the page with it. Voilà!

294 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Test Drive
Let’s take Frank’s little JavaScript library for a spin and see if it helps us wrap up this
complex adventure with appCache.

1 Go grab the little library.

Copy cache-manager.js from the extras/js folder into chapter7/js.

2 Include the script in the Tartanator pages.

Include the cache-manager.js script right after the jQuery Mobile script on
index.php, build.php, findevent.php, and tartans.php.

<script src="js/cache-manager.js" type="text/javascript"></script>

3 Add 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 page
content <div>, using data returned from inc/list.php.

<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.php

you are here 4 295

 www.it-ebooks.info
a real cache

Q: If you can use a wildcard in the Q: Our manifest contains all of the Q: All of this is well and good, but
NETWORK section of a cache manifest, tartan images and HTML files. Isn’t that what happens if the user’s browser
can’t I just use a wildcard in the CACHE an awful lot to download all in one go? doesn’t support appCache?
section to cache everything on my site
and leave it at that? A: We agonized over that a bit. It is a
fair number of HTTP requests, yes. But
A: The site basically behaves like it did
before we added a cache manifest. It works
A: For better or worse, you can’t use
wildcards in the CACHE section. The
the files are rather minute: most of the
images are under 1 KB and the HTML files
fine, but won’t have a nice offline experience.

special wildcard token is only for the are even smaller. So, the bandwidth hit is
small, and, because the resources are being
Q: You totally didn’t mention the
NETWORK section, and it’s not really a FALLBACK section.
wildcard. You can’t combine it with any other downloaded asynchronously, the impact on
the user should be minimal.
text patterns—it is a standalone thing with a
specific meaning (which is: unless a given
A: In addition to the CACHE and
resource on the site is listed in another Q: Does the browser redownload
NETWORK sections, there is an optional
FALLBACK section that allows you to list
section explicitly, request it over the network everything in the manifest every time it’s
updated? the offline variants that should be used when
when possible).
an online variant is unavailable—for example,
use offline.html instead of login.html.
Q: What is the point of making it so A: Thankfully, no. The browser will check
that pages with a manifest attribute
in their HTML tags get cached even if
to see if the resources it already has cached
have changed but will not download them
Q: appCache is nice, but what about
again unless they’ve been modified. localStorage? It feels like only half of the
they’re not listed in the manifest?
story here.

A: This can indeed cause confusion and

headaches. But the idea is that instead of
A: Hey, smartypants! You’re ahead of us.
We’ll come back to localStorage in Chapter 8
downloading and caching a bunch or all of
(and if you’re new to the term, no worries!).
the pages on a given site in one go, pages
can be added to the cache “lazily”—that is,
they get added to the cache when the user
visits them first.

Q: What’s this about “all in one go”? Watch out for implicit caching
via the manifest attribute.
A: When a browser gets a new or
updated cache manifest file, it immediately We mentioned it already, but we’re
starts downloading all of the new resources going to pound it home: any page
and/or checking for updates to existing ones. that has a manifest attribute
This is something to consider, seriously, on its <html> tag will be cached, whether or
when designing your cache manifests. not it’s listed explicitly in the cache manifest.
And, no, you can’t get around this by using the
NETWORK section or any other trickery.

296 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Victory is (finally) ours

Phew. It was a bit of a battle, but we now have the Tartanator working offline. That
means we’re done implementing the custom tartans piece of phase 2.

Enhance the form we built to take advantage of capabilities of newer

mobile browsers.

Drop in server‑side code for processing the form and generating

resources (images, HTML, etc.) for user‑created tartans.

Make sure the offline experience for this

part of the app is acceptable. Congratulations, you
just successfully bent
appCache to your will.
Writing cache manifest files that do what
you actually want them to do can be
tricky—you did it!
location-aware
It’s time for some searchable events
The other chunk of phase 2 is the building of a
page that lets users search for local tartan‑related
events near them.

The Find Events form that

we want to build.

We want to find events that

are close to the user’s current
position. That means we’ll need
to talk about geolocation.

you are here 4 297

 www.it-ebooks.info
it’s not just gps, you know

How geolocation works

Geolocation from a web browser involves using JavaScript to
obtain the device’s current position. Many modern smartphone
browsers implement the World Wide Web Consortium (W3C)
Geolocation API, which provides a straightforward interface for
getting at geolocation data. There are a few other contenders in
the mix, including the now‑deprecated Google Gears API and
some proprietary APIs. Older phones and even some modern
smartphones don’t have geolocation support in the browser at all.

WiFi networks

Cell towers
GPS

24.21.168.0
Device’s IP address

Where
am I
?
RFID tags

Although the first thing many people think of

when they hear the term geolocation is GPS (global
positioning system), there are in actuality many
additional sources for the location of a device,
00:0D:93:00:00:00
MAC addresses
including nearby WiFi networks, cell towers,
the device’s IP address, RFID (radio frequency
identification) tags, and WiFi or Bluetooth MAC
(media access controller) addresses.

298 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

How to ask W3C-compliant browsers

where they are
Browsers that implement the W3C Geolocation API make the feature
available via the navigator.geolocation object. The most
relevant method on that object is getCurrentPosition, which
attempts to do what it sounds like it would do.
Try to get the current
position of the device.

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

The name of a JavaScript

The name of a JavaScript function function to call if an
to call if a position is obtained. error is encountered.

Handling the info getCurrentPosition gives us

When a location is successfully determined, the function that was
given as the name of the success callback will be called and given a
position object. We get at the info we really care about—latitude
and longitude—by looking at the latitude and longitude of
the coords attribute of the position object.

The success callback function This position object contains

the information we need.
function successCallback (position) {
var coords = position.coords;
alert(coords.latitude + ',' + coords.longitude);
The most pertinent }
attribute of the
position is the
coords object… …and the most pertinent attributes on the
coords object are latitude and longitude.
Both of these functions
simply (and somewhat
The error callback function. If annoyingly) pop up a
something went wrong, it's called. JavaScript alert.
function errorCallback(error) {
alert(error.message);
}

you are here 4 299

 www.it-ebooks.info
geolocate your code

Geolocation JavaScript Magnets

Place the code magnets in the correct positions in the geolocation
JavaScript below. You can only use each magnet once, but you may
end up with a few that you don’t need.

message
coords
navigator.geolocation longitude
tion onGeoSuccess
coords posi
"Browser doesn't support geolocation"
position
position
getCurrentPosition()
getCurrentPosition
onGeoError
getLocation latitude coordinates

function getLocation () {
// Verify the browser supports W3C geolocation
if ( ) {
navigator.geolocation. ( , onGeoError);
} else { // It doesn't
onGeoError(new Error( ));
}
}

function onGeoSuccess ( ) {
var = .coords;
alert(coordinates. + ',' + coordinates. );
}

function (error) {
alert(error. );
}
();

Answers on page 302.

300 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Start in on the Find Events page: The baseline

The idea of the Find Events page is just that: to find events. We now have a
peek 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 either
of those things. Providing a simple list of US states in a select list will be our
baseline default.
A very simple form
for searching for
events by state
A select element
with the name and
ID of state_filter

The events database

only has US-based
events…at least for now.

Build a simple events search form on findevent.php to use as our baseline.

Put the form inside the page content <div>.

We'll show you where

1 Give the form a method of GET and an id of search_form. to find events.php
Set the action attribute to events.php. in just a bit.

2 Add a select input element.The displayed options should show Find us_states.txt in the
the name of the 50 US states. The values should be the two‑letter extras/events directory
postal abbreviations of the states. to help you along.
The submit input button should have an id of search_submit.
3
Don't forget to wrap the
fields in a <div> with a
data-role of fieldcontain
(the jQM way).

you are here 4 301

 www.it-ebooks.info
i see where you’re coming from

Geolocation JavaScript Magnets Solution

Did you manage to place the magnets in the right position?

function getLocation () {
// Verify the browser supports W3C geolocation
if ( navigator.geolocation ) {
navigator.geolocation. getCurrentPosition ( onGeoSuccess , onGeoError);
} else { // It doesn't
onGeoError(new Error( "Browser doesn't support geolocation" ));
}
}

function onGeoSuccess ( position ) {

var coordinates = position .coords;
alert(coordinates. latitude + ',' + coordinates. longitude );
}

function onGeoError (error) {

alert(error. message );
}
getLocation ();

Once you’ve constructed this code, put it in a file called

geolocation.js in the chapter7/js/ directory. Then include it in
the findevent.php page by using a <script> tag within the
<div> with data-role="page".
You didn’t need
these magnets.
It should go right above
the search form.
coords position
getCurrentPosition()
coords

302 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Let’s integrate geolocation

We now have a basic form. Oh, and some really annoying
JavaScript alerts. Once we spruce up our form,
users with browsers that
support geolocation will be
Let’s do the fun part: dropping in geolocation for browsers
able to use their current
that support it. Here’s what the form will look like for enabled
location to find events.
browsers after our next set of changes:

Your basic form should look like this.

<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>
<!-- ETC -->
</select>
</div>
<div data-role="fieldcontain">
<input type="submit" value="Find Events" id="search_submit" />
</div>
</form>
</div><!-- /content -->

you are here 4 303

 www.it-ebooks.info
geolocation construction

Geolocation Construction

We’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); When the page initializes,
$page.data.initialized = true; call the initGeo function.
}

function initGeo() {
$searchForm = $('#search_form');
$submitButton = $('#search_submit');
$stateFilter = $('#state_filter');
if (navigator.geolocation) { If the browser supports geolocation,
initGeoOptions(); initialize the geolocation-related
} form elements.
}
function initGeoOptions() {
var $latField, $longField, $flipSwitch;
$flipSwitch = $('<select name="usegeo" id="usegeo" Add a slider-themed
data-role="slider"><option value="off">Off</ on/off switch to let
off><option value="on">On</option></select>'). users opt in to using
change(toggleLocation); their current location.
$flipSwitch.prependTo($searchForm).wrap('<div data-
role="fieldcontain"></div>');
$flipSwitch.before('<label for="usegeo">Use my
Location:</label>'); Add two hidden fields
$latField = $('<input type="hidden" />').attr({ name to hold the value of
: 'latitude', id : 'latitude'}) latitude and longitude
$longField = $('<input type="hidden" />').attr({ from the geolocation.
name: 'longitude', id : 'longitude' })
$latField.appendTo($searchForm);
$longField.appendTo($searchForm);
}

304 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

toggleLocation is bound
to the change event on
the slider switch.
function toggleLocation(event) {
var geoActivated = ($(event.target).val() If the user just flipped it on,
== 'on') ? true : false; disable the state filter, and
if (geoActivated) { disable the submit button (it
$submitButton.button('disable'); will be reenabled when the
$stateFilter.selectmenu('disable'); geolocation is complete).
$.mobile.showPageLoadingMsg();
navigator.geolocation.getCurrentPosition(
onGeoSuccess, onGeoError);
Here's where we trigger
} else {
the geolocation.
$stateFilter.selectmenu('enable'); When it's turned off, reenable
$submitButton.button('enable'); filter by state.
}
}
function onGeoSuccess(position) { Here's our success callback.
var coordinates = position.coords; We'v e altered it to update
$('#latitude').val(coordinates.latitude); the latit ude and longitude
$('#longitude').val(coordinates.longitude); hidd en fiel ds with the
$.mobile.hidePageLoadingMsg(); user 's loca tion data.
$submitButton.button('enable');
}
On error, slide the use
geolocation switch back to
function onGeoError(error) {
the off position and fire its
$('#usegeo').val('off').trigger('change');
change event (which is bound
alert(error.message);
to toggleLocation above).
}
})();

Try it out! Play with the form You can find this code in the
to get a feel for what the new chapter7 folder in extras/js/
JavaScript does for us. enhanced_geo_form.js.
Update the geolocation.js file, save it, and try
out the updated Find Events page.

you are here 4 305

 www.it-ebooks.info
visit the library

Jim: I was just checking out the geolocation piece on some devices. I know that
the BlackBerry OS 5 browser is supposed to have geolocation, but the Use My
Location switch isn’t showing up.
Frank: Yeah. The BlackBerry OS 5 browser supports geolocation, but it isn’t the
W3C flavor. I was just looking this up. And older Android browsers don’t have
W3C‑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 chase
down all of the odds and ends and do exhaustive testing on a whole bunch of
obscure devices. What I did find is this open source, drop‑in JavaScript library that
handles 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 the
major method and attribute names are the same. I think we only need to change
a few lines and then we can stop worrying quite so much about cross‑platform
compatibility.
Jim: Oh, while we’re making edits to the JavaScript…the pop‑up error for
geolocation 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 for
form 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 color
or size when you add a color‑size combo, a dialog will pop up to alert you to the
errors 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.
Do this!
Jim: Oh, cool. I can probably figure this out.

Copy the extras/js/geo.js file

Frank: OK. You do that. I’m going to drop in this geolocation library real quick.

into the chapter7/js folder. This

is the geo‑location‑javascript
library. You can also visit
the project’s home page, if
you’re curious about it, at
http://bit.ly/sx7JrH.

306 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Update the Find Events page and the geolocation JavaScript to use the cross‑platform
geolocation code and show geolocation errors in a pop‑up dialog.

1 Update findevent.php to include the JavaScript for the

new geolocation library.

<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>

2 Update geolocation.js to use the new library.

Find and change the following code from:

if (navigator.geolocation) {
initGeoOptions();
}

to:
if (geo_position_js.init()) {
initGeoOptions();
}

and change this:

navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);

to:

geo_position_js.getCurrentPosition(onGeoSuccess, onGeoError);

3 Create and invoke a dialog for geolocation errors.

Using the other pages in the dialogs directory as a guide, create a nicely worded error
dialog for geolocation failures. Name this file geolocation_error.html.
Next, replace the alert in the onGeoError function with a dialog pop up. You
can find examples of dialog pop ups in the js/tartanator.js file. You should only need to
adjust the URL argument.

you are here 4 307

 www.it-ebooks.info
use my location

Here’s what your onGeoError function should look like after you convert the
error from a basic JavaScript alert to a jQuery Mobile dialog. We trust you also
made 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'
});
}

We just blew through some gnarly JavaScript.

We admit, that was pretty intense. And there’s some code
we didn’t explain in depth. But this isn’t Head First JavaScript,
and we didn’t want to distract you from the main tasks at
hand: winning the battle with appCache and taking advantage of PhoneGap’s
mediaCapture API (even for browsers that don’t support it yet).

Test Drive
Enough, already! Let’s see this thing in action. It won’t take much to hook this thing up
to some search code and sample data.

1 Copy some needed files from the extras/events directory.

Copy event_search.inc and event_list.inc into the chapter7/inc directory. Copy events.php
into the chapter7 directory.

2 Try it out!
Head to the Find Events page in your mobile browser of choice and hit the
Use My Location switch.

308 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Nothing found
Ha, ha. Sorry about that. Unless you’re lucky enough to be in
the Portland, Oregon, metro area, you probably got this result
on your first location‑based search:

d,
Unless you’re near Portlanyour
you'll get th is re sul t on
first try.

That’s because all of the sample data is local, and the search
radius is set to 25 miles. How’s about you add some of your
own 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 file
in chapter7/inc/. Inside is a big PHP array representing fake data for events. Add a few of your own
elements 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 and
lat/long of a few existing entries. The latitude, longitude, and state are what is used by the
search script to find matches.
Use this tool to get a lat/long
pair real quick for any address:
http://itouchmap.com/latlong.html.

you are here 4 309

 www.it-ebooks.info
events geolocated just for you

This is looking great, guys! This is what

I had in mind when I first envisioned a
mobile web app for the Tartanator.

Nice! We’ve successfully integrated

several of the features that make
a mobile web app feel super:
progressive enhancement, offline
mode, and location awareness.

Extra-super extra credit: Can you think of how

you would go about adding a range input to allow
users to determine the search radius? When
should it show up? If you can figure out how to
add an input with a name of radius, the backend
search script is already configured to use it!

310 Chapter 7
 www.it-ebooks.info
mobile apps in the real world

Looking good in various

mobile browsers

This one's an Android.

ƒ Web apps that feel natural and comfortable on mobile ƒ In our cache manifest file, we can indicate which
devices often share certain characteristics like well- resources should be downloaded and cached for offline
considered progressive enhancement, a good use (in the CACHE section) as well as those that
offline mode, and location-aware features. should be requested afresh when an Internet connection
is available (in the NETWORK section).
ƒ Starting with a baseline is a great way to reach as
many users as possible, and thoughtful progressive ƒ Geolocation in the browser is supported widely
enhancement for more powerful mobile browsers can among modern smartphones. Many implement
make things really shine. the W3C’s Geolocation API, which exposes the
navigator.geolocation object to JavaScript.
ƒ Crafting a relevant offline experience is important:
mobile devices can’t be expected to have an ƒ Similarly to how we enhanced the tartan‑creation form
always‑available data connection. for supporting browsers, we also enhanced the Find
Events form to integrate geolocation, when it’s available.
ƒ We can take advantage of the appCache feature in
browsers by creating a cache manifest file to instruct ƒ Certain mobile browsers, especially on slightly older
the browser which resources to cache and make smartphones, have implementations of geolocation
available offline. that are not W3C-compliant. To manage these
idiosyncracies, we used a third‑party geolocation library
ƒ The construction of cache manifests is straightforward
called geo‑location‑javascript.
on the surface, but there are a number of gotchas that
you have to carefully consider. ƒ The geo-location-javascript library emulates the
W3C API, requiring minimal changes to our original,
W3C‑specific JavaScript code.

you are here 4 311

www.it-ebooks.info
 www.it-ebooks.info

8 build hybrid mobile apps with PhoneGap

Tartan Hunt: Going native

Ack. Barbed wire.
Boy, the grouchy old neighbor’s
really kicked it up a gear this year
to stop me from getting the apples
in his yard. What I wouldn’t do for
a bridge right now...

Sometimes you’ve got to go native. It might be because you need

access to something not available in mobile browsers (yet). Or maybe your client simply
must have an app in the App Store. We look forward to that shiny future when we have
access to everything we want in the browser, and mobile web apps share that sparkly
allure native apps enjoy. Until then, we have the option of hybrid development—we
continue writing our code using web standards, and use a library to bridge the gaps
between our code and the device’s native capabilities. Cross-platform native apps
built from web technologies? Not such a bad compromise, eh?

this is a new chapter 313

 www.it-ebooks.info
tartan tripping

Opportunity knocks again

Psst! Hey, guys, check this out. We just

landed a new sponsor for the big Scottish
convention coming to town. We’re going to run a
contest, and I want to add it to the Tartanator!

Scottish airline Loch Air has just

agreed to sponsor an all-expenses-paid
trip for two to Edinburgh.
As part of the upcoming Scottish Celebration
Expo in two months, Loch Air wants to run a
promotional contest along with Tartans Unlimited,
Ewan’s organization.

314 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

I was thinking we could have a sort of

scavenger hunt. Contestants have to take
photos of tartan swatches they find at the
booths of conference sponsors.

The Tartan Hunt contest will send attendees

to seek out tartans hidden at the booths of
certain key sponsors.
Players are challenged to find and take a photo of each listed
tartan with their devices’ cameras; found tartans are then
checked off the list of hidden tartans. Once a contestant has
found all of the tartans, he or she can show the completed list
and be entered to win the trip.

Sounds like a
perfect addition
to the Tartanator!

Unfortunately, there’s a problem.

Access to the camera—and some other
device features like audio recording,
filesystem operations, network status, and
contact data—isn’t available for the most
part in mobile browsers.

you are here 4 315

 www.it-ebooks.info
hybrid applications

Um. Photos. We don’t have access to

the device’s camera from mobile browsers.
What are we going to do? Do we have to
go native?

Frank: We obviously don’t have the time or budget to rewrite

the Tartanator as a native app for a bunch of platforms and
also 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. We
might consider proposing a hybrid application.
Jim: What is that?
Joe: A hybrid application is a native application written with web
technologies. Because it’s native, we can get at device capabilities
like the camera, but the code itself is written with standard web
stuff, so we can share the code across several platforms.
Frank: But if it’s web‑based, and those features aren’t
Many device available in the browser, how does that work?

capabilities, like Joe: There are several frameworks and platforms that provide
bridges between web apps and native code. They take our web
the camera, are app, chew on it a bit, and then spit out packaged apps—native
ones—for various platforms. They take care of the various bits
not accessible from and bobs for us so we can just use the web standards we know.

mobile browsers.
Jim: Should we convert the Tartanator to one of these hybrid
apps, then?
Joe: I don’t think we have the time to wrap the entire app
This is slowly changing for the
natively and test it effectively. Given the timeline, what do you
better, but there are still a
think about suggesting that we create a native app just for the
number of things we can’t get at
contest?
from the browser. Frank: I kind of like that idea. And we don’t have to risk
making hurried changes to the Tartanator web app. It has a bit
of cachet—attendees show up and can download a special app
just for the event and the contest. Joe, if you think we can get
the hybrid app thing to work on several platforms, let’s float the
idea with Ewan.

316 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

How 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 common
API for you to use to access features natively on the various device
platforms. It bridges the gap between your JavaScript and the device’s
native code (for each platform it supports) and produces apps for
various platforms.

Hybrid App Standard web technologies

Bridge and resources

The framework bridges

the gap between web
code and the target OS’s
native capabilities…
…like compass, camera,
contacts, audio recording,
filesystem…

…and creates apps for

various OSes.

you are here 4 317

 www.it-ebooks.info
build some bridges

Bridge the web-native gap with PhoneGap

PhoneGap is an open source HTML5 platform that allows you to create native
apps for several mobile operating systems using the hybrid approach that we’ve
been 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 via
a consistent, cross‑platform JavaScript API.
PhoneGap was developed by Vancouver‑based firm Nitobi, which was acquired
by Adobe in October 2011. But don’t worry: Adobe has already taken steps to
make sure PhoneGap remains open source by giving the rights to PhoneGap
to the nonprofit Apache Software Foundation. The newly minted Apache
Cordova project will make sure that the PhoneGap codebase stays open source
going forward.

PhoneGap Build PhoneGap supports

PhoneGap Build is a web‑based service that lets you compile in the cloud for
up to seven platforms,
several platforms at once. It takes a bit of the drudgery out of the build process
but in this chapter
by allowing you to skip installing at least some of the SDKs, plug‑ins, IDEs, and
we’re going to use
whatnot for each platform you want to support.
PhoneGap Build, which
supports Apple iOS,
Whereas with standard PhoneGap development, you’d do your own compiling Android, BlackBerry,
and building, with PhoneGap Build you upload a zip file (or pull from a code WebOS, and Symbian.
repository) and it does the rest.

Ewan has agreed to the Tartan Hunt

contest companion app idea. That’s cool,
but we have an incredibly tight timeline.
Where do we start?

We’re going to show you how to

build a hybrid Android app using
PhoneGap Build.
If you don’t have an Android device, not
to worry. We’ll show you how to build and
install the app for a real‑life device and for
emulated virtual devices.

318 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

How come we’re singling out

Android for this project? What
about iOS and other platforms?

We chose Android as our example platform for

a few reasons.
For one thing, it is a popular platform (duh). But, also, building
and deploying iOS apps onto devices requires membership
in the iOS Developer program ($99/year). We didn’t want to
assume you’d fork that over.
Android also has a freely available SDK that supports
emulating many virtual devices across different versions of
the Android OS. And the Android SDK runs on several
platforms. With Xcode, the development toolset needed for
iOS development, you’re out of luck if you don’t have a Mac.

Is your development environment

ready to go?
If you haven’t done it yet, hold everything and visit
Appendix iv. You need to have the right stuff installed
and an understanding of how to install and uninstall
apps on virtual and real devices before moving on to
the next parts of the chapter.

JavaScript ahead.
You don’t have to be a JavaScript genius
to make it through this chapter, but there’s
no getting around the fact that today’s
web app development involves JavaScript.
To communicate with native functionality such as the
camera APIs using PhoneGap, we need to use a
client-side technology—and JavaScript is obviously
the right guy for this job.

you are here 4 319

 www.it-ebooks.info
hybridization questions

Q: What other tools, products, or services are there for Q: Why did I have to install the Android SDK?
building hybrid apps?

A: Two of the best‑known hybrid development alternatives are

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 to
Appcelerator Titanium and the forthcoming Sencha Touch 2 product. install it and test it on an emulator, a device (if you have an Android
device), or both. To do that, we need some of the tools provided by
Q: What platforms are supported by PhoneGap? the SDK.
We don’t, however, need to install the Eclipse IDE, which we’d likely
A: PhoneGap presently supports Android, Bada, BlackBerry,
iOS, Symbian, WebOS, and Windows Phone 7. See
need to do if we were developing and building the code ourselves. So
at least we saved that step!
http://phonegap.com/about/features for a list of which of its features
are supported on which versions of which platforms. Q: Why is it that some things aren’t accessible in the web
Q: Does PhoneGap Build support the same platforms as
browser in the first place?
PhoneGap?
A: There are several reasons that you can’t do anything and
everything from the browser on mobile devices.
A: Not quite. At the time of this writing, it does not support
Windows Phone 7 or Bada. Security is a considerable concern. Giving the browser access to
things like the filesystem or the user’s contact list is something that
Q: Is PhoneGap free? has to be done carefully, with a lot of consideration about how to
keep things properly sandboxed. Doing these things right takes time.
A: Yes. PhoneGap—or, as it is known going forward, Apache
Cordova—is open source and free.
In addition, some of the proposed standards for these features are
new or incomplete, or have multiple variants vying for adoption. As
these things get ironed out, expect to see some bumps along the way
Q: What about PhoneGap Build? Is it free, too? with conflicting or inconsistent support in browsers.

A: It depends. PhoneGap Build offers tiered levels of service. Its

free variant allows developers to have one private app and as many
But here’s to a standardized, device‑API‑rich future! Let’s try to enjoy
the ride!
public apps as they’d like. We’ll be using this free service to build the
Tartan Hunt app. PhoneGap Build’s other levels of service increase
the number of private apps and project collaborators.

If you have a device that is not Android but is one of PhoneGap Build’s supported
platforms, or if you have an Apple Developer Account, we encourage you to try
building and testing the examples in this chapter on your platform.
Our test kitchen has run the Tartan Hunt app successfully on various flavors of
Android and iOS.

320 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

Get acquainted with PhoneGap Build

Do this!

Get on over to
https://build.phonegap.com and
create an account. It’s free and only
takes a moment.

Roger. PhoneGap Build

account set up, Android SDK
ready. But you know, it’d be great
to know what exactly it is we’re
building.

you are here 4 321

 www.it-ebooks.info
app tapping

How will the app work?

The landing page of our app will display contest instructions and
a list of tartans to find. Tapping on an item in the list goes to a
display with more information about the vendor at whose booth
the tartan can be found.

Landing screen
Tartan and vendor
detail screen

tap

We used a collapsible element

so that the instructions can be
hidden. You do this in jQuery
Mobile by using a data-role l in the
attribute of “collapsible." See index.htmlder if
chapter8 fo about
you're curiousfor this.
the markup

322 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

Keep track of discovered tartans

In our completed app, clicking the “I found it!”

button will launch the device’s camera, and the
player can take a snapshot of the discovered
tartan. The photo is displayed on the detail
tap page and marked off as “found” in the list on
the landing page.

We already have the basic HTML layout, CSS,

and images. Now we need to make them do
something and build a native Android app
using PhoneGap Build.

How we’ll get from here to there

Set up and configure a PhoneGap Build project. Zip
up the current HTML, CSS, and images; build the
app; and install it on an Android device or emulator.

Add the ability for players to mark which tartans

they’ve spotted.

Add the ability for players to save photos of the

tartans they’ve spotted.

you are here 4 323

 www.it-ebooks.info
app anatomy

Anatomy of the Tartan Hunt project

Here’s the simplified structure of the content <div> in index.html. element
Each tartan <li>t (ul.details)
The structure of has a nested lisinfo about
our content is a
<div data-role="content">
with further d the “I
<ul> with a bunch of
<div data-role="collapsible">...</div>
the vendor an ton.
found it!" but
<ul id="vendors">
nested <ul>s. <li>
<ul class="details">
<li>...</li>
<li>...</li>
...
</ul> Stuff we’ll
ul#vendors has one </li> chapter8 need later
entry (<li>) per <li>
tartan to find. <ul class="details">
<li>...</li>
<li>...</li>
... extras
</ul>
</li>
...
index.html
</ul>
images
</div>

We’re using jQuery Mobile again for this project, so the

overall look will be generally consistent with the Tartanator.
index.html
almost
We’re already organized for PhoneGap Build
The structure of our starting point is now almost ready to
drop into PhoneGap Build.
scripts
PhoneGap Build projects have a structure based on the
W3C web widget specification. Web widgets are
encapsulated web apps that are meant as standalone client
applications. In their most basic form, they consist of at Wanna read the spec?
least one start file (in our case, index.html) and a configuration Here it is: style
file (in XML). You can add any number of files that your www.w3.org/TR/widgets/.
app will need to the package—things like images and CSS
and JavaScript and whatnot.
We’re already almost there. But we need to create a PhoneGap Build will look for a file
configuration file to give PhoneGap Build some needed in our project called config.xml.
details about our app. Let’s go build that now!

324 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

Let’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 template
below to complete the file’s contents.

Give the app a human-readable

name and description.
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = ""
Let’s use com.hfmw.tartanhunt as our app’s ID.
version = "1.0.0">
<name></name>
<description></description>
Your website and email add s.
<author href="" You can use http://hf-mw.cres
om
email="">YOUR NAME HERE if you don’t have your own sit e.
</author>
<icon src="images/touch-icon-iphone4.png" height="114" width="114" />
</widget>

Let’s add icons! These show up on the config.xml

user’s home screen. We've added the first
one for you. Find the rest in the images
directory and add them as well.

Remember that a PhoneGap Build project is either built from a zip file or
pulled 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 what
the resulting file is called, as long as it is a zip archive with a .zip extension.

you are here 4 325

 www.it-ebooks.info
exercise solution

Your config.xml file should look something like this. But don’t lose your identity! We expect you to
use your own name and stuff.

<?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="[email protected]"> PhoneGap Build will give
Lyza Gardner and Jason Grigsby icon to the right devic the right
</author> es…
<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.xml

326 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

Log in to PhoneGap Build to see your dashboard.

It’s time to create our app!

Click the new app

button to get started.
https://build.phonegap.com

Your settings e this.

should look lik

Choose the zip file

you created from the Click Create to, uh,
chapter8 directory. create your app.

you are here 4 327

 www.it-ebooks.info
grab an app

Download your apps

After you upload the zip file, PhoneGap Build will queue
your app for building. Wait a minute or two and refresh the
page. You should see Download buttons for each platform for
which the app was successfully built. We want to download the
Android package (APK) file.

When the build

process is done, you’ll
see a Download
button appear, rather
like this.

Download the
Android APK.

APK (Android
Application Package
File) is the packaged
app, ready to install.

OK, let’s get this

thing installed.

328 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

Choose your adventure

Install on an emulator OR Install on a real device
To prep for installing the app on a virtual device, start If you have a real‑life Android device, woot! Connect
the Android SDK. Go to Tools → Manage AVDs your Android device to your computer’s USB port.
to bring up a list of your installed Android virtual Yep. That’s it.
devices (AVDs). Launch a device for a recent‑ish
version of Android. The emulated device needs to be
running when you install the app. Don’t try to install
the app until the emulator is all the way booted up.

Ready, aim, fire!

The process for installing the app is the same whether you’re
deploying it virtually or to a real device. Open up a terminal
window (Mac or Linux) or type cmd in the Start menu’s Search
box (Windows) to get a command line, and cd to the directory
where you downloaded the Android APK file.
The command to install the app is: adb install <the name of the package file>

We talk about this in more Don’t forget! Your (real) device

detail in Appendix iv. must be attached or your
Our APK file was named emulator fully booted before you
TartanHunt.apk. run this command.
File Edit Window Help Tartans
$ adb install TartanHunt.apk
You should 1157 KB/s (683431 bytes in 0.576s)
see something pkg: /data/local/tmp/TartanHunt.apk
similar to this… Success
$

We recommend using an
AVD for Android 2.3 or You should now be able to see the
4.0+. Earlier versions have Tartan Hunt app in the application
somewhat finicky emulators, screen of your device or emulator.
especially for the camera Go ahead and launch the app! it
stuff we’ll do later. The first time you run the appto,
might take a litt le wh ile— up
about 30 seconds—to launch.
you are here 4 329
 www.it-ebooks.info
tartan hunting in the wild

The Tartan Hunt icon is

showing up on this An
application screen. droid’s

The landing screen

of the app in a
version 2.3.3 emulated
Android device.

One of the nested list

subpages on an Android
Nexus One device.

The landing page with the

instructions collapsed on an
emulated Android device.

The landing page on an iOS

device—yep, if you have a
signing key, it works!

330 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

Interesting. We only have one HTML

file. But each tartan I touch seems
to take me to a separate page.

jQuery Mobile automatically converts nested <ul>s

into separate “pages.”
It does this by converting each nested list to a <div> with a data-role
of page and using that <div> as the active “page” when the list items
are clicked. There is still actually only one proper page, technically. You’ll
also note that it uses the title of the parent list element (in our case, the
vendor’s booth number) as the title of the nested list’s page.

Hey, what about BlackBerry?

If you visit your dashboard on PhoneGap Build, you might see
something like this:

Our BlackBerry status is

FROWNY. :(

We could rectify
the iOS situation by What’s with the frowny face for BlackBerry? Well, sadly, there’s a problem
providing a signing currently with the combination of PhoneGap Build, BlackBerry, and any
key (if we had one). filename with a hyphen in it. Several of the jQuery Mobile files we need
have hyphens in their filenames.

For purposes of
brevity and sanity—
and because Ewan has To make the PhoneGap Build Tartan Hunt app work on
expressed diffidence BlackBerry OS, you would need to alter jQuery Mobile’s
about supporting the icon filenames and update any reference to them in jQM’s
BlackBerry platform, source code. While this wouldn’t take too long, it does
we're not going to mean “hacking” jQuery Mobile’s core and introduces a
address this here… maintenance burden. What do you think? Is it worth it?

you are here 4 331

 www.it-ebooks.info
uninstall to reinstall

Let’s add a splash screen so that users don’t have to look at a boring blank
screen while the app loads. Use the PhoneGap Build config.xml documentation at
https://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, and
reinstall it to see the new splash screen take effect.

Look for the “Update

code” button to upload
your updated zip file.
The rebuild process
starts automatically
after upload.
Answers on page 334.

You need to uninstall the app before you can reinstall it after
making changes.
Each time you rebuild the app on PhoneGap Build and need to reinstall it
on a device or emulator, you need to uninstall first. Run this command when
the device is attached via USB, or when the emulator you want to uninstall it
from is running.

File Edit Window Help TartanHunting

$ adb uninstall com.hfmw.tartanhunt Note that you use the app’s
Success package ID with the uninstall
$ command (com.hfmw.tartanhunt
or whatever you set the ID to
in the config.xml file), not the
APK filename like we did with
the install command.

332 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

Nice work, hotshot!

Rock on. We have an app. Now let’s
make it do what it’s supposed to do.
We’ve broken down the functional
pieces into two steps. Congratulations,
First, we want the app to be able to remember
which tartans the user has found. When players
you just built a
click the “I found it!” button, we need the app to native mobile app.
keep a record of that.
Not so tricky, huh? You can use your
web dev chops to build native stuff
without too much hassle!

Store which tartans users have found

Set up and configure a PhoneGap Build project. Zip

up the current HTML, CSS, and images; build the
app; and install it on an Android device or emulator. First, let’s build the
ability to keep track of
Add the ability for players to mark which which tartans users say
tartans they’ve spotted. they have found.
Then we’ll come back in a
Add the ability for players to save photos of the bit and enhance the app to
tartans they’ve spotted. prompt users to take a photo.

How am I going to get the app to

“remember” which tartans the users
claimed they saw? Are we going to have
to get down and dirty with native code?

Fortunately, there’s a way to

do this in JavaScript using an
HTML5 web standard called It’s not supported by
localStorage. BlackBerry before OS 6,
but we're not supporting
It’s already supported in the default
mobile browsers of all of the platforms
BlackBerry currently.
we’re targeting with PhoneGap Build.

you are here 4 333

 www.it-ebooks.info
run to the localStore for found tartans

Who’s seen what? Store found tartans

We can store simple data on the client—in our case, which tartans
have been found—without much fuss using the localStorage API in
the browser.

What makes localStorage so special?

In the past, developers have often relied on HTTP cookies for data
that needs to be kept on the client. There are a few downsides to
cookies, however.
Every time the client makes a request to a server, the entire contents Our app has a splash screen now!
of all cookies for that domain are transferred. Sometimes, a developer This is what it looks like on an
might want to store hefty amounts of data on the client—say, images iPod Touch.
or considerable amounts of configuration information—which isn’t
feasible 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 to
stick on the client that the server just doesn’t need to know about (or
maybe, as in our case, there is no server).
localStorage was designed specifically for the straightforward storage
and retrieval of string data in key‑value pairs on the client. It gives us
methods to set, get, and clear out data—and that’s about it. It’s not
complicated.

Here’s the end of the config.xml file, with splash screens

added. The two sizes allow us to have a bigger version
for devices with higher resolution.

<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.xml

334 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

What can localStorage do for us?

When a player clicks the “I found it!” button, we can add an entry to
localStorage. And we check for data in localStorage when we want to
see which of the tartans the contestant has already found.

Meet the getter and the setter

Both the key and the
There are two methods on localStorage that provide most of its value must be strings.
utility. First, we set a value:
The value we want to
A key to name the thing store
we're storing
localStorage.setItem(key, value);

Then, later, we can ask for that value by using its key: The key for which we’d like the
stored data, please!
var storedValue = localStorage.getItem(key);

If a value is found for key,

it is assigned to storedValue. If data for the key is not found,
storedValue will be null.

In our case, when a user found, say, the Douglas tartan at a vendor’s
booth and indicated this by tapping the “I found it!” button, we could do
something like:

localStorage.setItem('douglas', 'true');

Then if we wanted to check if he’d already found the Douglas tartan, we

could ask localStorage:

var isFound = localStorage.getItem('douglas');

you are here 4 335

 www.it-ebooks.info
magnetic commentary

localStorage JavaScript Magnets

It’s time to update scripts/app.js (our app’s main JS code) to
record found tartans. The updated app.js file is on the next page.
Your job is to add the comment magnets above the lines of code
they refer to.
You can only use each magnet once, but you might end up with
some left over!

// Get the entry from localStorage

// Click handler for "I found

it" button
// Cle
ar all
entrie
s from
localS
torage

// Turn of // Create a button-styled <a> element

f jQM page
transition
s

// Add a back button to the nested list subpages

er
he brows
g e su pp ort in t
lStora // Insert the reset button into the page
for loca
// Check
// Store that this tartan was
found
s
" button
he "I f ound it!
r t
ndler fo
Ad d a click ha
//
// Call th
e initDevi
ce function
when the DO
M is ready

// Get the ID of the clicked button

on
set butt
dler for the re
n
click ha
// Update
the displa // Add a
y to show
which tart
ans have be
en found

336 Chapter 8
 www.it-ebooks.info
build 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
};
})();

you are here 4 337

 www.it-ebooks.info
comment magnets solution

(function() {
$(document).bind("mobileinit", function() { We're turning off the
// Turn off jQM page transitions page transitions because
$.extend($.mobile, { defaultPageTransition: 'none' });
they are slow on some
// Add a back button to the nested list subpages
Android devices.

localStorage JavaScript Magnets Solution

$.mobile.page.prototype.options.addBackBtn = true;
});

var initDevice = function() {

// Check for localStorage support in the browser
if(typeof(window.localStorage) == 'object') {
// Add a click handler for the "I found it!" buttons
$('.foundTartan').click(tartanFound);
We only add the click
handler for browsers that
addResetButton(); support localStorage.
}
};
Ditto with the
// Call the initDevice function when the DOM is ready reset button.
$(document).ready(initDevice);
// Click handler for "I found it" button
var tartanFound = function(event) {
// Get the ID of the clicked button
var tartanKey = $(event.currentTarget).attr('id');
// Store that this tartan was found The value of ‘true' is sort of
localStorage.setItem(tartanKey, 'true'); arbitrary. We just want to
}; store *something*.

You can see that we're adding a button to

var addResetButton = function() {
let the user reset and start the game over.
// Create a button-styled <a> element
var $resetButton = $('<a></a>').attr('data-role','button').html('start Over!');
// Add a click handler for the reset button
$resetButton.click(function() {
// Clear all entries from localStorage
Hey! We didn’t tell you
about the clear() method
localStorage.clear();
yet—did you figure it out?
});
// Insert the reset button into the page It does what it sounds
$resetButton.appendTo($('#booths')); like: clears all keys and
}; their associated values
})(); from localStorage. app.js

338 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

Check out what a browser supports

We talked a bit about client-side feature detection way back in Chapter
2, 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 the
localStorage feature is supported by the browser.

var initDevice = function() {

if (typeof(window.localStorage) == 'object') { We perform some client-side
feature detection here to
$('.foundTartan').click(tartanFound);
make sure localStorage is
addResetButton(); supported before adding the
click handler and showing the
}
reset button.
}

initDevice is called on $(document).ready().

Translation: it gets executed when the page’s
DOM is done being initialized by jQuery.

Client‑side feature detection can be quite simple, like this example, but there are
also JavaScript libraries that provide detection for all sorts of features. Modernizr
(http://modernizr.com) is a widely used example of such a tool. We also did feature detection
in Chapter 5 using WURFL
device capability data. That’s
But wait…the story isn’t over yet server-side feature detection.
The leftover comment magnets give us a clue about what else we need to do
here. We’re storing found tartans, and providing a way to clear them all out, but
the interface doesn’t change. We need to write some code that updates the
display so players can see which tartans they’ve found. Turn the page
to get started.
Our leftover magnets.
We need to take care
of these items!

// Get the entry from localStorage By only adding click handlers and the reset
button if localStorage is supported, we are
// Update the display to in effect setting a minimal bar for supported
// show which tartans browsers, Chapter 4 style. Can you think of
// have been found why this might be OK? Can you also think
why it might not be in some cases?

you are here 4 339

 www.it-ebooks.info
the key to localStorage searches

Use a function to show which tartans are found

Sounds like we need another function in our JavaScript—one that
can update the way the page looks depending on which tartans have
been found. Let’s dive in again. We’re going to call our new function
refreshTartans because it updates the appearance of the tartan
listings and the detail screens depending on which tartans have been found.
Each of the nested lists—ul.details—in index.html contains
information about a single vendor and tartan to be found. We can use
the id attribute of each of those lists to determine a key to look for in
Ready Bake
localStorage. If there is a value of any sort for that key, that tartan has JavaScript
been found and we need to update the interface to reflect that.

This is jQuery code. It means: iterate (loop) over each element that
So, for each ul.details in matches the CSS selector ul.details (<ul>s with a class of “details”).
the document…
$(document).ready(initDevice);
1 Figure out the name of refreshTartans = function() { app.js
the key to look for in $('ul.details').each(function() {
localStorage by getting the
var myID = $(this).attr('id');
id attribute of this <ul>
and prepending ‘found-' var tartanKey = 'found-' + myID;
var foundValue = localStorage.getItem(tartanKey);
e.g,. ‘found-douglas' var isFound = Boolean (foundValue);
2 Check for that key in $('#vendor-'+ myID).toggleClass('found', isFound);
localStorage. $('[data-url*="'+myID+'"]').toggleClass('found',isFound);
$('#'+tartanKey).closest('li').toggle(!isFound);
3 Toggle the visibility and
classes on some elements to });
reflect whether they’ve $('ul').each(function() {
been found or not. if ($(this).data('listview')) {
$(this).listview('refresh');
4 Refresh the jQuery Mobile }
listviews in the document. });
};
tartanFound = function (event) {
If we don’t, any
altered content won’t
be styled correctly. What’s all that
toggle stuff?
Remember, jQuery Mobile
builds on top of jQuery, toggle and toggleClass
so we have all of jQuery’s are part of jQuery. Let’s
methods available to us. take a closer look.

340 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

The toggle and toggleClass methods

toggle and toggleClass are jQuery methods. toggle
toggles the visibility of an element; toggleClass toggles
the application of CSS classes to an element.

By selectively applying the ‘found'

CSS class to certain elements using
toggleClass, we can use styling to
show which tartans are found…

…and we can hide the “I found it!" button

when it’s not needed using toggle. (No button here!)
Let’s look at that code chunk again
Remember that localStorage.getItem(tartanKey)will either
return the value stored for that key (in our case, the string 'true') or We need a real Boolean value
null. We convert that to a Boolean value (true or false) so we can (not just the string ‘true' or
use it with jQuery’s toggle and toggleClass methods. null) to use these methods.

isFound is true if var foundValue = localStorage.getItem(tartanKey);

any value exists in var isFound = Boolean (foundValue);
localStorage for this $('#vendor-'+ myID).toggleClass('found', isFound);
tartan; false otherwise. $('[data-url*="'+myID+'"]').toggleClass('found',isFound);
$('#'+tartanKey).closest('li').toggle(!isFound);

toggleClass will add the CSS class indicated (found) to the elements that
match the selector given if the isFound value is true (and remove the class if
it is false).
Summary: Add the found class
Similarly, toggle will show the <li> element indicated if it’s passed a to two elements and hide the
Boolean with a true value. We’re doing something a bit clever here and giving <li> containing the “I found it!"
it the opposite of the current value of isFound (that’s what !isFound does). button if the tartan has been
Why, you might ask? Well, we want to hide that <li> if the tartan’s been found found. Remove the class and
(that is, isFound is true). That’s the <li> that contains the “I found it!” show the button if not.
button. We don’t need it to show up anymore if the tartan has been found.

Add the completed magnets code and the refreshTartans function

to scripts/app.js. refreshTartans needs to be called on page
initialization and any time localStorage is altered. See if you can figure
out where in the code the three calls to refreshTartans need to go.

you are here 4 341

 www.it-ebooks.info
refreshed tartans

Here are the three places refreshTartans needs to be called in app.js.

var initDevice = function() {

if (typeof(window.localStorage) == 'object') {
$('.foundTartan').click(tartanFound);
When we initialize… refreshTartans();
addResetButton();
Whenever a new tartan is found… }
};
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!');
…And when
$resetButton.click(function() {
the tartans
localStorage.clear();
are reset.
refreshTartans();
});
$resetButton.appendTo($('#booths'));
};

app.js

Test Drive
Edit app.js to integrate the changes from the last several pages. Save
the 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 “I Do this!
found it!” buttons. You should see found tartans and their detail pages
receive some CSS style changes (things will turn green).
If you’re having trouble, use the Web Inspector tool in Chrome or
Safari, or the Error Console in Firefox, to review possible JavaScript Go ahead and zip up the
errors. If you’re really stuck, you can find a finished version of the file in contents of the chapter8
chapter8/extras/scripts/app.localStorage.js. directory again and rebuild on
PhoneGap Build. Install again
You’ll need to replace your on a device or emulator and
app.js with this file if you try it out!
want to use it.

342 Chapter 8
 www.it-ebooks.info
build hybrid mobile apps with PhoneGap

Q: Which browsers currently support Q: You said that you can only store strings in
localStorage? localStorage. But earlier you mentioned that you
can use localStorage to store images. How could
A: The short answer is: most of them. But not
Opera Mini. And if you’re still using Internet Explorer
that possibly work?

version 7, you’re out of luck there. A: Strings, yes. But what’s to stop us from storing
rather large strings? Images can be stored as their
Q: Do the keys have to have certain names? BASE64‑encoded strings and used directly as the value
of <img> src attributes or as url() values in CSS
A: Both keys and the values you assign to them
have to be strings. Beyond that, the sky’s the limit. You
background images. Browser support for data‑URIs
(that’s what this is called) is pretty decent, with the big
exception of Internet Explorer. Read more about it in this
can call them whatever pleases you.
article by Nicholas Zakas: http://bit.ly/sWe7HS.
Q: How much data can I store? Q: Wait a minute! I was just looking at the code
again and noticed we're adding a back button on
A: The W3C localStorage Specification is sort
of adorably vague about this. To quote: “A mostly
the nested list pages. That doesn’t make sense for
Androids—most Android devices have hardware
arbitrary limit of five megabytes per origin is back buttons already.
recommended. Implementation feedback is welcome
and will be used to update this suggestion in the
future.”
A: Well spotted. The back button doesn’t just feel
awkward for Android, it actually closes the PhoneGap
Most browsers provide between 2 and 5 MB. Some Build–generated app! That is not good. We’ll come
browsers, like Safari, prompt users to allocate more back to this in just a bit and fix it.
space if the allotment is used up.

Q: Q: If localStorage is available in the browser to

Can other sites or apps access my us, why are we using PhoneGap Build at all? Can’t
localStorage data? we just make this a web app?

A: No. Part of the spec is concerned with security

and mandates certain things that prevent other origins
A: Aha! Patience! We’re just about there. It’s time to
integrate the camera into Tartan Hunt.
(very rough translation: other sites) from accessing any
localStorage data other than their own.

you are here 4 343