Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Most Common Denominator: Supporting More, S...

Lyza Gardner
September 25, 2012

The Most Common Denominator: Supporting More, Sucking Less

The mobile web is too hard. Its chaos sends us scattering about, chasing down obscure browser bugs, making daily pilgrimages to the CSS Flexbox spec, checking in on the four JavaScript frameworks that have been released since we went on our coffee break (and wondering how everything could possibly fit together). Often in desperation we end up seeking the lowest common denominator, sacrificing the creativity in our projects in favor of the safely dull. What if, instead, we could find the most common denominator: straightforward, big-bang-for-buck patterns that treat our long tail with respect without banishing snazzier clients and devices to the Great Sea of Lame? Let's curate the vast sea of options and examine some winners that get us further, faster, with less mind-numbing testing and brokenness.

Lyza Gardner

September 25, 2012
Tweet

More Decks by Lyza Gardner

Other Decks in Technology

Transcript

  1. 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
  2. But what he meant was: Why is it so hard?

    Tuesday, September 25, 12
  3. 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
  4. We’re just as likely to come home with malaria as

    discover the lost city of gold. Tuesday, September 25, 12
  5. ...Fighting a malaise of &aring fevers during which we hallucinate

    about box-shadows and @font-face support Tuesday, September 25, 12
  6. Epic amounts of time, and often a pile of cash,

    are required Tuesday, September 25, 12
  7. ...building something safe, simple and lame By We try to

    mitigate this situation Tuesday, September 25, 12
  8. Build to the lowest common denominator Make something that is

    broken for a lot of people Tuesday, September 25, 12
  9. or Build to the lowest common denominator Make something that

    is broken for a lot of people Tuesday, September 25, 12
  10. We risk losing sight of the bigger picture because of

    all the distraction and noise. Tuesday, September 25, 12
  11. and Keeping one foot in the trenches stretching one foot

    boldly toward the future Tuesday, September 25, 12
  12. What can we do now to %ght these pitched, ongoing

    battles? Tuesday, September 25, 12
  13. What can we do to get further, faster— without risking

    the destruction of the whole stronghold? Tuesday, September 25, 12
  14. How can we orient our thinking toward what we need

    from the web in the future... Tuesday, September 25, 12
  15. respecting the long tail: making your content and sites work

    for more kinds of users—legacy devices and new ones Tuesday, September 25, 12
  16. Getting more bang for the buck from tested, reusable bits

    and pieces. Tuesday, September 25, 12
  17. 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
  18. • 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
  19. • 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
  20. We #ounder. control meaning choose our battles poorly tested patterns

    and strategies burden Tuesday, September 25, 12
  21. What goes into the Web comes out in so many

    ways—and the number of ways will continue to increase. Tuesday, September 25, 12
  22. It’s not as if if the web is printed on

    our own, controlled paper mill. Tuesday, September 25, 12
  23. We have to set our Web free We have to

    help teach others to set it free, too. and Tuesday, September 25, 12
  24. 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
  25. 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
  26. 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
  27. Tactics for Today’s Trenches Get your viewport under control. <meta

    name="viewport" content="width=device-width,initial-scale=1"> Tuesday, September 25, 12
  28. 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
  29. 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
  30. 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
  31. 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
  32. Tactics for today’s trenches Unclench. • Relinquishing control over certain

    particulars helps you get your job done faster. Tuesday, September 25, 12
  33. Toward tomorrow’s Web • Pixel-perfect control was never possible. Now

    it’s extra impossible. Stop selling the impossible. Tuesday, September 25, 12
  34. Toward tomorrow’s Web • Let the customer in. • Stop

    assuming the customer isn’t intelligent. Re-imagine the design process. Tuesday, September 25, 12
  35. I —NY I love New York I love New York

    I (heart) NY I \u2665 NY I — NY I ♥ NY Tuesday, September 25, 12
  36. 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
  37. 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
  38. Or maybe you’d prefer JSON... [ [ { "Para": [

    { "Str": "I" }, "Space", { "Emph": [ { "Str": "—" } ] }, "Space", { "Str": "New" }, "Space", { "Str": "York" } ] } ] ] Tuesday, September 25, 12
  39. But, for example, with HTML, we can add some presentational

    special sauce... <style> 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; } </style> Tuesday, September 25, 12
  40. And out comes a browser-appropriate rendering of the message that

    is suitable for today’s Web. Tuesday, September 25, 12
  41. As format-independent as possible, while still carrying the ‘-ness’ of

    the original message. Content Tuesday, September 25, 12
  42. 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
  43. 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
  44. 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
  45. As you start wrapping your processes and your thinking around

    the content itself... Tuesday, September 25, 12
  46. You’ll be pleased to see certain pieces fall into place

    naturally Tuesday, September 25, 12
  47. Tactics for today’s trenches Luv ur contents. • Content %rst,

    no, really. • Visualize the re-purposing. • Know your options. Tuesday, September 25, 12
  48. 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
  49. Choose any part of the page; it pretty much sucks.

    But, hey, it’s SteakFest! Tuesday, September 25, 12
  50. 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
  51. 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
  52. 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
  53. 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
  54. Toward tomorrow’s Web • Simplify and decouple. • Content is

    the common denominator. Decouple the hell out of the Web. Tuesday, September 25, 12
  55. “If you think your site works everywhere, you haven’t tested

    it enough. It’s broken somewhere.” — Me Tuesday, September 25, 12
  56. Part of being able to ship it without being reduced

    to a drooling heap Tuesday, September 25, 12
  57. 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
  58. 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
  59. 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
  60. 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
  61. 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
  62. “AppCache is soooooo busted we stopped using it” —Tobie Langel,

    Facebook Avoid the Broken. Tuesday, September 25, 12
  63. 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
  64. 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
  65. It could certainly be argued that this is not a

    critical issue. BB6: UR DOIN IT RONG Sane browsers Tuesday, September 25, 12
  66. 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
  67. 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
  68. I’m going to go lay on the #oor for a

    while. Tuesday, September 25, 12
  69. 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
  70. 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
  71. 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
  72. Our desired baseline all the way to our ideal experience...

    Baseline %rst Enhanced and adapted Tuesday, September 25, 12
  73. Shorter tail for priority #4 Android 1.6 lacks JSON.stringify but

    still gets the popups... Tuesday, September 25, 12
  74. 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
  75. 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
  76. 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
  77. 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
  78. 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
  79. Finding the right testing approach can help you spot some

    of the cancerous issues before they get out of control. Tuesday, September 25, 12
  80. And allow you to run the issue through your battle-choosing

    evaluation process. Tuesday, September 25, 12
  81. Priority #1: Read the content of the scenes in the

    play and see glossed words and terms FAIL PASS Tuesday, September 25, 12
  82. 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
  83. 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
  84. And this wasn’t the only thing I’ve seen go wrong

    with @font-face in my day. Tuesday, September 25, 12
  85. 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
  86. 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
  87. It’s tempting to put it o' until the end of

    the project Tuesday, September 25, 12
  88. 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
  89. 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
  90. 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
  91. 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
  92. Iterative testing and loops. Core testing at smaller iterations. Comprehensive

    testing at larger steps. Tuesday, September 25, 12
  93. 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
  94. 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
  95. 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
  96. 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
  97. The fault and the onus are not always in the

    same place. Tuesday, September 25, 12
  98. I think sometimes we are too quiet when the onus

    falls to us. Tuesday, September 25, 12
  99. 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
  100. I visualize standards makers as working in a shining fortress

    on a hilltop. Tuesday, September 25, 12
  101. As we enhance from our baseline to tappable glossary items

    (priority #4)... Tuesday, September 25, 12
  102. We need to give the text a bit more breathing

    room to make tap targets more comfy. Tuesday, September 25, 12
  103. Part of the tap-able gloss item enhancement is the JS-driven

    assignment of a class... Tuesday, September 25, 12
  104. 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
  105. OSUM. Things like this make me want to set myself

    on %re. Tuesday, September 25, 12
  106. if (typeof(history.pushState) !== ‘undefined’)) { // doSnazzyAsyncLoading(); } if (window.localStorage)

    { // stashStuffInIt(); } if (navigator.geolocation) { // findThisDevice(); } I vote for standards. Tuesday, September 25, 12
  107. The Web should, as much as possible, allow for that

    level playing %eld we yearn for. Tuesday, September 25, 12
  108. 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
  109. So that we can rely on our heroes, HTML5, CSS

    and the rest of the Web crew... Tuesday, September 25, 12
  110. • 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