Slide 1
Slide 1 text
The most common
denominator
In which: we think about supporting more, sucking less, keeping our
sanity, re!ning our focus, !ltering noise & thinking about the future
of the mobile web. Or, heck, the future of the web as a whole.
Lyza D Gardner | @lyzadanger
Breaking Development Dallas
September 25, 2012
Tuesday, September 25, 12
Slide 2
Slide 2 text
The mobile Web is hard
Tuesday, September 25, 12
Slide 3
Slide 3 text
Last year, in Nashville
Tuesday, September 25, 12
Slide 4
Slide 4 text
We put our heads together.
Tuesday, September 25, 12
Slide 5
Slide 5 text
Text
http://futurefriend.ly
Tuesday, September 25, 12
Slide 6
Slide 6 text
3
! static HTML pages
Tuesday, September 25, 12
Slide 7
Slide 7 text
" images
Tuesday, September 25, 12
Slide 8
Slide 8 text
# ultra-simple cache manifest
Tuesday, September 25, 12
Slide 9
Slide 9 text
$ media queries
Tuesday, September 25, 12
Slide 10
Slide 10 text
It took several savvy
devs...
Tuesday, September 25, 12
Slide 11
Slide 11 text
All day...
Tuesday, September 25, 12
Slide 12
Slide 12 text
And much of the night...
Tuesday, September 25, 12
Slide 13
Slide 13 text
To work out all of the kinks.
Tuesday, September 25, 12
Slide 14
Slide 14 text
But we got it done.
Tuesday, September 25, 12
Slide 15
Slide 15 text
Just after we deployed, Scott Jenson caught me o" guard.
Tuesday, September 25, 12
Slide 16
Slide 16 text
“Why did that take so long?”
Tuesday, September 25, 12
Slide 17
Slide 17 text
I felt sad.
Tuesday, September 25, 12
Slide 18
Slide 18 text
But what he meant
was: Why is it so
hard?
Tuesday, September 25, 12
Slide 19
Slide 19 text
We’ve learned a lot since then...
Tuesday, September 25, 12
Slide 20
Slide 20 text
shims, libraries, poly!lls,
frameworks, techniques, hacks,
extensions, articles, patches, distractions,
devices, workshops, browser updates, standard
proposals, plugins, workarounds, gists, mixins, APIs, bugs, carrier
changes, precompilers, detection scripts, features, complaints, conferences,
vulnerabilities, releases, blog posts, techniques, clever hacks, JavaScript frameworks,
templating metalanguages, newsletters, vendor programs, working groups, device databases
Aw, hell. I’m tired.
Aren’t you?
Tuesday, September 25, 12
Slide 21
Slide 21 text
It’s still like suiting up and
%ghting dragons
Tuesday, September 25, 12
Slide 22
Slide 22 text
It’s like trekking in the unexplored jungle
Tuesday, September 25, 12
Slide 23
Slide 23 text
We’re just as likely to come home with malaria as discover the lost
city of gold.
Tuesday, September 25, 12
Slide 24
Slide 24 text
...Fighting a malaise of å
fevers during which we
hallucinate about box-shadows
and @font-face support
Tuesday, September 25, 12
Slide 25
Slide 25 text
For a mobile web expedition to be
successful
Tuesday, September 25, 12
Slide 26
Slide 26 text
Epic amounts of time, and often a
pile of cash, are required
Tuesday, September 25, 12
Slide 27
Slide 27 text
There is still a very large dose of uncertainty
Tuesday, September 25, 12
Slide 28
Slide 28 text
We’re still opening so many new doors
Tuesday, September 25, 12
Slide 29
Slide 29 text
And lots of those doors have goats behind them.
Tuesday, September 25, 12
Slide 30
Slide 30 text
The mobile Web is too hard
Tuesday, September 25, 12
Slide 31
Slide 31 text
Coping strategies
Tuesday, September 25, 12
Slide 32
Slide 32 text
By
We try to mitigate this situation
Tuesday, September 25, 12
Slide 33
Slide 33 text
...building something safe, simple
and lame
By
We try to mitigate this situation
Tuesday, September 25, 12
Slide 34
Slide 34 text
...or building strange and complex, fragile things that we don’t
understand.
Tuesday, September 25, 12
Slide 35
Slide 35 text
...or hiding from the
confusions and
turmoil.
Tuesday, September 25, 12
Slide 36
Slide 36 text
Our these really our
options?
Tuesday, September 25, 12
Slide 37
Slide 37 text
Build to the lowest common
denominator
Make something that is broken
for a lot of people
Tuesday, September 25, 12
Slide 38
Slide 38 text
or
Build to the lowest common
denominator
Make something that is broken
for a lot of people
Tuesday, September 25, 12
Slide 39
Slide 39 text
As we chase down the minutiae
Tuesday, September 25, 12
Slide 40
Slide 40 text
We risk losing sight
of the bigger picture
because of all the
distraction and
noise.
Tuesday, September 25, 12
Slide 41
Slide 41 text
As leaders, we have to seize the day
Tuesday, September 25, 12
Slide 42
Slide 42 text
and
Keeping one foot
in the trenches
stretching one
foot boldly
toward the future
Tuesday, September 25, 12
Slide 43
Slide 43 text
What can we do now to
%ght these pitched,
ongoing battles?
Tuesday, September 25, 12
Slide 44
Slide 44 text
What can we do to
get further, faster—
without risking the
destruction of the
whole stronghold?
Tuesday, September 25, 12
Slide 45
Slide 45 text
How can we orient our thinking toward
what we need from the web in the future...
Tuesday, September 25, 12
Slide 46
Slide 46 text
So we can %nd peace
and prosperity on
the web?
Tuesday, September 25, 12
Slide 47
Slide 47 text
Tactics for
today’s trenches
Tuesday, September 25, 12
Slide 48
Slide 48 text
and
Tactics for
today’s trenches
Ideas for
tomorrow’s web
Tuesday, September 25, 12
Slide 49
Slide 49 text
Tactics for
today’s trenches
Tuesday, September 25, 12
Slide 50
Slide 50 text
respecting the long tail: making
your content and sites work for
more kinds of users—legacy
devices and new ones
Tuesday, September 25, 12
Slide 51
Slide 51 text
Getting more bang for the buck
from tested, reusable bits and
pieces.
Tuesday, September 25, 12
Slide 52
Slide 52 text
Avoid pandering to the least
common denominator.
Tuesday, September 25, 12
Slide 53
Slide 53 text
Tips for reducing the pain.
Tuesday, September 25, 12
Slide 54
Slide 54 text
Rethinking and looking at
processes from a slightly evolved
perspective.
Tuesday, September 25, 12
Slide 55
Slide 55 text
And making sure it ships.
Tuesday, September 25, 12
Slide 56
Slide 56 text
Keeping the big picture in sight
We’re drowning in noise—a lot of it inconsequential
—and we need to retain focus on what matters as we
move into the future.
Tuesday, September 25, 12
Slide 57
Slide 57 text
• We grasp desperately for a sense of control.
• We get distracted from the core meaning of our projects.
• We choose our battles poorly, or don’t realize we have a
choice at all.
• We lack tested patterns and strategies.
• We bear the burden of the wrath when things go wrong.
We #ounder.
We’re stymied by the situation of the short term.
Tuesday, September 25, 12
Slide 58
Slide 58 text
• We grasp desperately for a sense of control.
• We get distracted from the core meaning of our projects.
• We choose our battles poorly, or don’t realize we have a
choice at all.
• We lack tested patterns and strategies.
• We bear the burden of the wrath when things go wrong.
We #ounder.
We’re stymied by the situation of the short term.
• We grasp desperately for a sense of control.
• We get distracted from the core meaning of our projects.
• We choose our battles poorly, or don’t realize we have a
choice at all.
• We lack tested patterns and strategies.
• We bear the burden of the wrath when things go wrong.
We grasp desperately for a sense of control.
We get distracted from the core meaning of our projects.
We choose our battles poorly, or don’t realize we have a choice
at all.
We lack tested patterns and strategies.
We bear the burden of the wrath when things go wrong.
Tuesday, September 25, 12
Slide 59
Slide 59 text
We #ounder.
control
meaning
choose our battles poorly
tested patterns and strategies
burden
Tuesday, September 25, 12
Slide 60
Slide 60 text
Control
Tuesday, September 25, 12
Slide 61
Slide 61 text
In
Out
≠
Tuesday, September 25, 12
Slide 62
Slide 62 text
What goes into the Web comes out
in so many ways—and the number
of ways will continue to increase.
Tuesday, September 25, 12
Slide 63
Slide 63 text
This is a myth.
Tuesday, September 25, 12
Slide 64
Slide 64 text
An illusion of pixel-perfect control.
Tuesday, September 25, 12
Slide 65
Slide 65 text
It’s not as if if the
web is printed on our
own, controlled
paper mill.
Tuesday, September 25, 12
Slide 66
Slide 66 text
We have to set our Web free
We have to help teach others to
set it free, too.
and
Tuesday, September 25, 12
Slide 67
Slide 67 text
Letting our content &ow like water.
Tuesday, September 25, 12
Slide 68
Slide 68 text
Tactics for today’s trenches
Establishing a solid baseline.
Tuesday, September 25, 12
Slide 69
Slide 69 text
Tactics for today’s trenches
Getting our ducks in a row.
Tuesday, September 25, 12
Slide 70
Slide 70 text
Tactics for today’s trenches
Start basic and take deep breaths.
• Get in the browsers early and often, with a solid baseline.
• Responsive and &uid everything.
• Be wary of control masquerading as choice.
• Keep it simple, silly.
Tuesday, September 25, 12
Slide 71
Slide 71 text
Tactics for today’s trenches
Photoshop mockups.
• Why do customers expect us to build pixel-perfect static
brochures? Because that is what we promise them.
• Knock it o'.
• Oh, wait, this advice is so yesterday. Sorry, Coyier.
Ahem. Onward.
• We can all agree that we want to get into the browser at
least, right?
Tuesday, September 25, 12
Slide 72
Slide 72 text
http://styletile.es by Samantha Warren
Tuesday, September 25, 12
Slide 73
Slide 73 text
This is not the jettisoning of design.
Tuesday, September 25, 12
Slide 74
Slide 74 text
Tactics for today’s trenches
A simple CSS reset.
• Eric Meyer’s CSS reset (http://meyerweb.com/eric/tools/
css/reset/) is industry-standard
• Or don’t use one. But be aware of the landscape.
Tuesday, September 25, 12
Slide 75
Slide 75 text
BB 9670—Default background color: cream
Tuesday, September 25, 12
Slide 76
Slide 76 text
Tactics for Today’s Trenches
Get your viewport under control.
Tuesday, September 25, 12
Slide 77
Slide 77 text
Tactics for Today’s Trenches
Get your viewport under control.
Tuesday, September 25, 12
Slide 78
Slide 78 text
Tactics for today’s trenches
Responsive and #uid everything.
• Responsive Design == relinquishing some control.
• Single-size, rigid structure for everyone Adapting our
&ow and shape to the users’ environments.
• Releasing some control != lame
• in fact, it lets us do increasingly-lovely things!
Tuesday, September 25, 12
Slide 79
Slide 79 text
Tactics for today’s trenches
Responsive and #uid everything.
• As much as possible, carry this &uidity through your
work.
• Make romance with your units and proportions.
• Deeply grok relative units like ems, rems, %.
Tuesday, September 25, 12
Slide 80
Slide 80 text
Tactics for today’s trenches
Beware of control masquerading as choice.
• Take pause when you see tools or frameworks that
make claims about “mobile” or “native” appearance or
emulation.
• Related: don’t take “responsive” or “mobile-friendly” at
face value, either.
Tuesday, September 25, 12
Slide 81
Slide 81 text
Here is a Motorola Back#ip trying to deal with a “responsive” popup plugin and
Bootstrap CSS—only a small part of Bootstrap, even.
Tuesday, September 25, 12
Slide 82
Slide 82 text
Tactics for today’s trenches
Unclench.
• Relinquishing control over certain particulars helps you
get your job done faster.
Tuesday, September 25, 12
Slide 83
Slide 83 text
Toward tomorrow’s Web
• Pixel-perfect control was never possible. Now it’s
extra impossible.
Stop selling the impossible.
Tuesday, September 25, 12
Slide 84
Slide 84 text
Toward tomorrow’s Web
• Let the customer in.
• Stop assuming the customer isn’t intelligent.
Re-imagine the design process.
Tuesday, September 25, 12
Slide 85
Slide 85 text
There is one core thing you do control
Tuesday, September 25, 12
Slide 86
Slide 86 text
Content
Tuesday, September 25, 12
Slide 87
Slide 87 text
Content %rst.
Mobile %rst.
Baseline %rst.
Whatever you call it.
Tuesday, September 25, 12
Slide 88
Slide 88 text
Treating our content at its core with respect
Tuesday, September 25, 12
Slide 89
Slide 89 text
But what is content?
Tuesday, September 25, 12
Slide 90
Slide 90 text
I —NY
I love New York
I love New York
I (heart) NY
I \u2665 NY
I —
NY
I ♥
NY
Tuesday, September 25, 12
Slide 91
Slide 91 text
Milton Glaser
Tuesday, September 25, 12
Slide 92
Slide 92 text
At what level of abstraction did the message get through?
Tuesday, September 25, 12
Slide 93
Slide 93 text
According to Plato: All chairs are just an imitation of the true Form of a chair...but all
chairs in the real world have a chair-ness.
Tuesday, September 25, 12
Slide 94
Slide 94 text
Real-world instantiations share in the shared -ness of their archetypical form.
Tuesday, September 25, 12
Slide 95
Slide 95 text
All possible chairs A single, totally-speci!c chair
Tuesday, September 25, 12
Slide 96
Slide 96 text
Flexibility, Portability Total Control
Tuesday, September 25, 12
Slide 97
Slide 97 text
I believe that we treat and store
core “content” on the Web is
about pursuing the right balance
of -ness.
I *—*
NY
Tuesday, September 25, 12
Slide 98
Slide 98 text
The same message, translated (by
robots) to HTML.
I — NY
Tuesday, September 25, 12Slide 99
Slide 99 text
Or maybe you’d prefer JSON...
[
[
{
"Para": [
{
"Str": "I"
},
"Space",
{
"Emph": [
{
"Str": "—"
}
]
},
"Space",
{
"Str": "New"
},
"Space",
{
"Str": "York"
}
]
}
]
]
Tuesday, September 25, 12
Slide 100
Slide 100 text
But, for example, with HTML, we can add some presentational special sauce...
body {
font-family: "American Typewriter";
font-size: 5em;
}
p {
max-width: 2.5em;
line-height: .85em;
}
em {
color: #ee2722;
font-style: normal;
font-weight: bold;
}
Tuesday, September 25, 12
Slide 101
Slide 101 text
And out comes a browser-appropriate rendering of the message that is suitable for
today’s Web.
Tuesday, September 25, 12
Slide 102
Slide 102 text
As format-independent as possible, while still
carrying the ‘-ness’ of the original message.
Content
Tuesday, September 25, 12
Slide 103
Slide 103 text
But it’s also OK for tomorrow’s Web
• Because we’ve taken care with our content—
representing it, at its core, as a plaintext or basic
HTML structure—it can &ex and &ow for the
future, as well.
Tomorrow’s Web
Tuesday, September 25, 12
Slide 104
Slide 104 text
The future holds more &ow and
transition between di'erent formats
as we adapt content and data for
new consumers of the Web.
Tuesday, September 25, 12
Slide 105
Slide 105 text
And there is a stated goal among many to !nd the right kind of universal
content for this unknown future.
From http://futurefriend.ly
Tuesday, September 25, 12
Slide 106
Slide 106 text
Finding the balance between control and #exibility.
Tuesday, September 25, 12
Slide 107
Slide 107 text
Content is the common
denominator of the Web
Tuesday, September 25, 12
Slide 108
Slide 108 text
As you start wrapping your processes and your thinking
around the content itself...
Tuesday, September 25, 12
Slide 109
Slide 109 text
You’ll be pleased to see certain
pieces fall into place naturally
Tuesday, September 25, 12
Slide 110
Slide 110 text
Content tactics for the trenches
Content for the future Web
and
Tuesday, September 25, 12
Slide 111
Slide 111 text
Tactics for today’s trenches
Luv ur contents.
• Content %rst, no, really.
• Visualize the re-purposing.
• Know your options.
Tuesday, September 25, 12
Slide 112
Slide 112 text
Tactics for today’s trenches
Content !rst. Really.
• Whenever you use Lorem Ipsum, ask yourself why.
• Content, then design.*
• “Simplify before you suppress.” —Ethan Marcotte
* Ideally. But isn’t this whole
conversation about ideals?
Tuesday, September 25, 12
Slide 113
Slide 113 text
“Simplify before you suppress.” —Ethan Marcotte
Tuesday, September 25, 12
Slide 114
Slide 114 text
OregonLive. Local “news.”
Opposite of simple.
Tuesday, September 25, 12
Slide 115
Slide 115 text
Choose any part of the page; it pretty much sucks. But, hey,
it’s SteakFest!
Tuesday, September 25, 12
Slide 116
Slide 116 text
If you just highlight new story content, the picture
simpli!es quite a bit.
Tuesday, September 25, 12
Slide 117
Slide 117 text
Tuesday, September 25, 12
Slide 118
Slide 118 text
Sites like this will become like
dinosaurs.
Tuesday, September 25, 12
Slide 119
Slide 119 text
In their place I foresee a new era of sites, populated with the
content users came for in the !rst place.
Tuesday, September 25, 12
Slide 120
Slide 120 text
Tactics for today’s trenches
Visualize the re-purposing.
• Help your team and your customer think about where
this content may go when it grows up.
Tuesday, September 25, 12
Slide 121
Slide 121 text
Stop treating everything as a monolithic, con#ated process. A typical Web content
management system is actually a whole bunch of things. But we treat it as one.
Tuesday, September 25, 12
Slide 122
Slide 122 text
Taking small steps to decouple has big impacts.
Tuesday, September 25, 12
Slide 123
Slide 123 text
Tactics for today’s trenches
Know your options.
• Markup, markdown, HTML, plaintext, JSON...
• How are you storing your content? Why?
• Flexibility, &uidity, responsiveness, adaptation: These
extend to how content is used and presented.
Tuesday, September 25, 12
Slide 124
Slide 124 text
Toward tomorrow’s Web
• Simplify and decouple.
• Content is the common denominator.
Decouple the hell out of the Web.
Tuesday, September 25, 12
Slide 125
Slide 125 text
Choosing your battles
Tuesday, September 25, 12
Slide 126
Slide 126 text
O! The priorities!
Tuesday, September 25, 12
Slide 127
Slide 127 text
“If you think your site works
everywhere, you haven’t tested it
enough. It’s broken somewhere.” —
Me
Tuesday, September 25, 12
Slide 128
Slide 128 text
There is a point at which return diminishes
Tuesday, September 25, 12
Slide 129
Slide 129 text
Part of being able to ship it without being reduced to a drooling heap
Tuesday, September 25, 12
Slide 130
Slide 130 text
...is choosing your battle and
chopping o' that tail
Tuesday, September 25, 12
Slide 131
Slide 131 text
We’ve decided to choose the
battle of content
Tuesday, September 25, 12
Slide 132
Slide 132 text
What other choices can we make?
Tuesday, September 25, 12
Slide 133
Slide 133 text
Sometimes you have to be willing
to take a “good enough for jazz”
perspective.
And have the wherewithal to sell
this to your customers.
Tuesday, September 25, 12
Slide 134
Slide 134 text
Tactics for today’s trenches
Duct Tape programming.
“Shipping is a feature. A really important
feature. Your product must have it.” —Joel Spolsky
“The Duct Tape Programmer”
http://www.joelonsoftware.com/items/2009/09/23.html
Tuesday, September 25, 12
Slide 135
Slide 135 text
Pragmatism.
Idealism!
Tuesday, September 25, 12
Slide 136
Slide 136 text
Battle-choosing tactics for the
trenches
Battles for the future Web
and
Tuesday, September 25, 12
Slide 137
Slide 137 text
Tactics for today’s trenches
Face the unknown !rst.
“The absence of a media query is in fact
the !rst media query.”—Bryan Rieger
Tuesday, September 25, 12
Slide 138
Slide 138 text
Tactics for today’s trenches
What not to choose.
• Don’t be too clever.
• Feel empowered to avoid the Broken.
• Trust no one.
Tuesday, September 25, 12
Slide 139
Slide 139 text
Tactics for today’s trenches
Don’t be too clever.
• There are so many pretty things out there, and a lot of
them are new.
• Each enhancement you add to your baseline brings risk.
Evaluate your risks and prioritize appropriately.
• Remember why they are called experimental features. Let
vendor pre%xes make you stop and think.
Tuesday, September 25, 12
Slide 140
Slide 140 text
“AppCache is soooooo busted we
stopped using it”
—Tobie Langel, Facebook
Avoid the Broken.
Tuesday, September 25, 12
Slide 141
Slide 141 text
Tactics for today’s trenches
Trust no one.
• Beware the binary feature support fallacy.
• Just because they* say they support it doesn’t mean they
do.
* Browser vendors, device
manufacturers, carriers, Apple
rumor sites...
Tuesday, September 25, 12
Slide 142
Slide 142 text
One day, I was innocently, naïvely enhancing a simple web page.
Tuesday, September 25, 12
Slide 143
Slide 143 text
This is not a bold, edgy thing to do...it’s just a thing we do.
h1 {
text-transform : lowercase;
font-variant : small-caps;
}
Tuesday, September 25, 12
Slide 144
Slide 144 text
And this happened.
Tuesday, September 25, 12
Slide 145
Slide 145 text
Whut.
Tuesday, September 25, 12
Slide 146
Slide 146 text
Oh, wait, it gets better.
Tuesday, September 25, 12
Slide 147
Slide 147 text
It could certainly be argued that this is not a critical issue.
BB6: UR DOIN IT RONG
Sane browsers
Tuesday, September 25, 12
Slide 148
Slide 148 text
I thought I was doing everything right...
But you know what is...?
• I soldiered on, doing it the way I was supposed to.
• I used solid, bang-for-buck tools:
• Modernizr (Modernizr.com) for feature detection
• Font Squirrel (fontsquirrel.com) for a leg up with
creating @font-face rules and generating web font %les.
Tuesday, September 25, 12
Slide 149
Slide 149 text
...
Tuesday, September 25, 12
Slide 150
Slide 150 text
I used my tools...
@font-face {
font-family: 'sorts_mill_goudy';
src: url("fonts/sortsmillgoudy-regular-webfont.eot");
src: url("fonts/sortsmillgoudy-regular-webfont.eot?#iefix") format("embedded-opentype"),
url("fonts/sortsmillgoudy-regular-webfont.woff") format("woff"), url("fonts/sortsmillgoudy-
regular-webfont.ttf") format("truetype"), url("fonts/sortsmillgoudy-regular-
webfont.svg#sorts_mill_goudyregular") format("svg");
font-weight: normal;
font-style: normal;
}
html.fontface {
font-family: "sorts_mill_goudy", Georgia, serif;
font-weight: normal;
}
Generated by FontSquirrel
Hooking into a Modernizr class assigned in clients
that support @font-face
Tuesday, September 25, 12
Slide 151
Slide 151 text
And this happened.
Tuesday, September 25, 12
Slide 152
Slide 152 text
I’m going to go lay on the #oor for a while.
Tuesday, September 25, 12
Slide 153
Slide 153 text
Do you know what I did to %x this?
Nothing.
Tuesday, September 25, 12
Slide 154
Slide 154 text
Toward tomorrow’s Web
Make a list of strategic high priorities at the get-go
and re-evaluate your status constantly.
What really matters?
Tuesday, September 25, 12
Slide 155
Slide 155 text
A case of priority
...make a pan-device web site that makes the text
of a Shakespeare play or plays easily readable,
with cross references and glossed items...
Say you want to...
What are the priorities?
All users should be able to...
Tuesday, September 25, 12
Slide 156
Slide 156 text
1. Read the content of the scenes in the play and see glossed words
and terms
2. See the content of the scenes in the play formatted cleanly,
with color and font treatment
3. See the content of the scenes in the play formatted in
historically-appropriate ways
4. Be able to tap/click on glossed terms/phrases and get a popup with
the glossary entry
5. Save glossary items and re-access them later
In this order...
Tuesday, September 25, 12
Slide 157
Slide 157 text
Tail-chopping may vary depending on feature priority.
Tuesday, September 25, 12
Slide 158
Slide 158 text
Our desired baseline all the way to our ideal experience...
Baseline %rst Enhanced and adapted
Tuesday, September 25, 12
Slide 159
Slide 159 text
Shorter tail for priority #4
Android 1.6 lacks JSON.stringify but still
gets the popups...
Tuesday, September 25, 12
Slide 160
Slide 160 text
Fitting these pieces together.
Tuesday, September 25, 12
Slide 161
Slide 161 text
Finding a general combination that works well in today’s situations.
1, 2, 3
1. Baseline
2. Common enhancement battles
I do choose
3. Performance
Tuesday, September 25, 12
Slide 162
Slide 162 text
Finding a general combination that works well in today’s situations.
1. Baseline
• Valid HTML5 markup
• CSS reset
• Viewport tag consistency
• Responsive Web Design
• Baseline design %rst
Tuesday, September 25, 12
Slide 163
Slide 163 text
Finding a general combination that works well in today’s situations.
2. Enhancement Battles
• Custom Modernizr build
• HTML5 Shiv
• IE conditional comments for CSS
• Yeah, I use jQuery
• Selectivizr sometimes
Tuesday, September 25, 12
Slide 164
Slide 164 text
Tactics for today’s trenches
3. Choose performance.
• GZIP. Do not argue, do.
• Reduce number of HTTP requests. That includes 404s!
• Reduce overall payload.
• Get the ySlow browser extension. Get it!
Tuesday, September 25, 12
Slide 165
Slide 165 text
I have found that this approach keeps me sane and gets the bulk of the
awesome to as many folks as possible.
Tuesday, September 25, 12
Slide 166
Slide 166 text
Testing the chaos
Tuesday, September 25, 12
Slide 167
Slide 167 text
Finding the right testing approach can help you spot some of
the cancerous issues before they get out of control.
Tuesday, September 25, 12
Slide 168
Slide 168 text
And allow you to
run the issue
through your
battle-choosing
evaluation process.
Tuesday, September 25, 12
Slide 169
Slide 169 text
Priority #1: Read the content of the scenes in the play
and see glossed words and terms
FAIL PASS
Tuesday, September 25, 12
Slide 170
Slide 170 text
This font issue causes this device to fail
priority #1.
Tuesday, September 25, 12
Slide 171
Slide 171 text
Is this one of our core, supported devices?
How important is BlackBerry support to our project?
How important is having @font-face to our project?
Is this a common issue with BBs? Or is this an outlier?
Can it be !xed in some alternative way?
Is it our problem?
Tuesday, September 25, 12
Slide 172
Slide 172 text
A few speci!cs to note.
A few speci%c things to note..
Issue a"ected 2 of our
OS 6 BlackBerrys.
One was a pre-release device
(since released) and another
was one of the !rst Torch
phones (8900).
Both had an out-of-date OS.
The Torch was a
European model.
Updating the OS is tortuous.
Up-to-date variants of the
same BB models did not
display this issue.
Therefore: The impact in the
real world may be minimal or
non-existent.
...and is also quite clearly a
bug situation WRT the
BlackBerrys.
But...at the same time...
Tuesday, September 25, 12
Slide 173
Slide 173 text
I want this site to load with alacrity, celerity.
Tuesday, September 25, 12
Slide 174
Slide 174 text
And this wasn’t the only thing I’ve seen go wrong with @font-face in my day.
Tuesday, September 25, 12
Slide 175
Slide 175 text
So I moved the whole shebang out of the baseline and into a media query.
Generally speaking, the binary font !les referenced shouldn’t get
downloaded by clients that don’t match the media query.
Tuesday, September 25, 12
Slide 176
Slide 176 text
Thus using a sort of “untesting” based on domain knowledge.
Generally speaking, the binary font !les referenced shouldn’t get
downloaded by clients that don’t match the media query.
Tuesday, September 25, 12
Slide 177
Slide 177 text
But there are no two ways
about it...
Tuesday, September 25, 12
Slide 178
Slide 178 text
Testing the mobile web sucks
Tuesday, September 25, 12
Slide 179
Slide 179 text
It’s tempting to put it o' until the
end of the project
Tuesday, September 25, 12
Slide 180
Slide 180 text
Don’t do this
Tuesday, September 25, 12
Slide 181
Slide 181 text
Testing tactics for the trenches
Making the future Web work
right
and
Tuesday, September 25, 12
Slide 182
Slide 182 text
Tactics for today’s trenches
Getting at devices.
• Allot for a device or two in
project budgets.
• Device labs. Yours or
others’.
lab-up.org
Tuesday, September 25, 12
Slide 183
Slide 183 text
Tactics for today’s trenches
Make it tolerable for yourself.
• Have the right devices at hand.
• Make it convenient.
• Tap into the energy and the
community.
Tuesday, September 25, 12
Slide 184
Slide 184 text
Tactics for today’s trenches
Loopy testing.
• Tight iteration loops.
• The mobile web demands agility.
• Di'erent device collections for di'erent testing points.
Tuesday, September 25, 12
Slide 185
Slide 185 text
Restrained and broader testing at di"erent points.
Tuesday, September 25, 12
Slide 186
Slide 186 text
Core and comprehensive devices for testing.
• Desktop browsers
• BlackBerry 4.x (8320)
• Android 1.6 (Motorola Back#ip)
• iPhone 4 OS5
• Kindle Fire
• Android 4 (Nexus S)
• BlackBerry 6.x (9810)
• Android 2.3 (Nexus One)
• Opera Mini on iPhone 4
• FireFox, Android 4
• Windows Phone 7.5 (Nokia N8)
• iPad 1, OS 5
Core Comprehensive
Tuesday, September 25, 12
Slide 187
Slide 187 text
Iterative testing and loops.
Core testing at
smaller iterations.
Comprehensive testing
at larger steps.
Tuesday, September 25, 12
Slide 188
Slide 188 text
Keeping it convenient.
Keep ‘em
organized.
Keep ‘em charged.
Tuesday, September 25, 12
Slide 189
Slide 189 text
Personal tendencies.
• The less hassle it is to
reach for a device, the
more you’ll do it.
• Choose devices (when
possible) that are easier to
use.
The convenience factor.
Tuesday, September 25, 12
Slide 190
Slide 190 text
Today’s mobile web testing is
fundamentally impossible and
broken, when you think about it.
Tuesday, September 25, 12
Slide 191
Slide 191 text
Tactics for today’s trenches
Convenience Tools.
• Adobe Shadow
• weinre
• shim
• Opera Dragon&y.
• Remote testing.
• FireFox remote debug
(new).
• WebKit remote debug.
Tuesday, September 25, 12
Slide 192
Slide 192 text
Tactics for today’s trenches
Look to the testing vanguard.
• Automation.
• Remote testing and
debug.
• Scriptable, repeatable,
sane—plausible, in
other words. e.g. Jon Leighton’s poltergeist
(phantom.js Capybara driver)
Tuesday, September 25, 12
Slide 193
Slide 193 text
Automated, real-device testing
AppThwack.com
Tuesday, September 25, 12
Slide 194
Slide 194 text
Tuesday, September 25, 12
Slide 195
Slide 195 text
Toward tomorrow’s Web
• Testing shouldn’t be so hard.
• Nor so emphatically necessary.
This ain’t the way it should be.
Tuesday, September 25, 12
Slide 196
Slide 196 text
Onus
Tuesday, September 25, 12
Slide 197
Slide 197 text
The fault and the onus are not
always in the same place.
Tuesday, September 25, 12
Slide 198
Slide 198 text
Sometimes when it breaks, it’s our fault
Tuesday, September 25, 12
Slide 199
Slide 199 text
...but, regardless, it is almost always our onus.
Tuesday, September 25, 12
Slide 200
Slide 200 text
I think sometimes we are too
quiet when the onus falls to us.
Tuesday, September 25, 12
Slide 201
Slide 201 text
My excuses.
• I don’t trust my technical competence.
• I don’t have time to investigate the deep issue fully.
• I don’t know the channels to use.
• The channels to use have too much barrier to entry.
• The HTTP auth on the W3C community site has a
personal grudge against me.
• I just don’t know how to communicate the issue.
Tuesday, September 25, 12
Slide 202
Slide 202 text
I visualize standards makers as working in a shining fortress on a hilltop.
Tuesday, September 25, 12
Slide 203
Slide 203 text
Sometimes I get frustrated.
Tuesday, September 25, 12
Slide 204
Slide 204 text
Back to our Shakespearean example...
Tuesday, September 25, 12
Slide 205
Slide 205 text
As we enhance from our baseline to tappable glossary items (priority #4)...
Tuesday, September 25, 12
Slide 206
Slide 206 text
We need to give the text a bit more breathing room to make tap targets more comfy.
Tuesday, September 25, 12
Slide 207
Slide 207 text
Part of the tap-able gloss item
enhancement is the JS-driven
assignment of a class...
Tuesday, September 25, 12
Slide 208
Slide 208 text
This adds some line-height and makes those targets bigger.
Tuesday, September 25, 12
Slide 209
Slide 209 text
Wait just a minute, though...Opera Mini...all scrunchy.
Tuesday, September 25, 12
Slide 210
Slide 210 text
Sigh.
The same page...
Safari Opera Mini
Tuesday, September 25, 12
Slide 211
Slide 211 text
The word from Opera?
“Mini does not support the line-height CSS
property at present, since testing showed
that it generally meant less text %tted on any
individual page, requiring more scrolling
from the user.”
http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/
Tuesday, September 25, 12
Slide 212
Slide 212 text
OSUM.
Things like this make me want to
set myself on %re.
Tuesday, September 25, 12
Slide 213
Slide 213 text
Tuesday, September 25, 12
Slide 214
Slide 214 text
But I’m not going to accept the
onus for that.
Tuesday, September 25, 12
Slide 215
Slide 215 text
if (typeof(history.pushState) !== ‘undefined’)) { // doSnazzyAsyncLoading(); }
if (window.localStorage) { // stashStuffInIt(); }
if (navigator.geolocation) { // findThisDevice(); }
I vote for standards.
Tuesday, September 25, 12
Slide 216
Slide 216 text
The Web should, as much as
possible, allow for that level playing
%eld we yearn for.
Tuesday, September 25, 12
Slide 217
Slide 217 text
We’ll have to demand that
together.
Tuesday, September 25, 12
Slide 218
Slide 218 text
We’ve already helped to raise
the bar.
Tuesday, September 25, 12
Slide 219
Slide 219 text
I want to help continue to create a happy, two-way street between the doers on
the Web and the de!ners of the Web.
Tuesday, September 25, 12
Slide 220
Slide 220 text
So that we can rely on our heroes,
HTML5, CSS and the rest of the
Web crew...
Tuesday, September 25, 12
Slide 221
Slide 221 text
Reduce: Noise
Tuesday, September 25, 12
Slide 222
Slide 222 text
Release: Control
Tuesday, September 25, 12
Slide 223
Slide 223 text
Focus: Content
Tuesday, September 25, 12
Slide 224
Slide 224 text
Choose Battles: Furthest reach,
least pain
Tuesday, September 25, 12
Slide 225
Slide 225 text
Find: A few reliable tools
Tuesday, September 25, 12
Slide 226
Slide 226 text
Test: Constantly and iteratively
Tuesday, September 25, 12
Slide 227
Slide 227 text
Simpler
Tuesday, September 25, 12
Slide 228
Slide 228 text
More consistent
Tuesday, September 25, 12
Slide 229
Slide 229 text
More powerful
Tuesday, September 25, 12
Slide 230
Slide 230 text
More awesomer Web
Tuesday, September 25, 12
Slide 231
Slide 231 text
• I’m Lyza Gardner, co-founder of
Cloud Four (cloudfour.com).
• @lyzadanger
• Jason Grigsby and I wrote Head First
Mobile Web (O’Reilly).
• I’ve tried to be mindful. All images,
photos, etc., except where noted, are
my own. I Love New York image
copyright Milton Glaser. Photo of me
there by Lisa Teso. Additional photos
by Luke W. (slide 18 and 19) and my
mom (slide 141).
Oh, my, thank you!
photo by Lisa Teso
Tuesday, September 25, 12