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.

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. The mobile Web is hard Tuesday, September 25, 12
3. Last year, in Nashville Tuesday, September 25, 12
4. We put our heads together. Tuesday, September 25, 12
5. Text http://futurefriend.ly Tuesday, September 25, 12
6. 3 ! static HTML pages Tuesday, September 25, 12
7. " images Tuesday, September 25, 12
8. # ultra-simple cache manifest Tuesday, September 25, 12
9. $ media queries Tuesday, September 25, 12
10. It took several savvy devs... Tuesday, September 25, 12
11. All day... Tuesday, September 25, 12
12. And much of the night... Tuesday, September 25, 12
13. To work out all of the kinks. Tuesday, September 25, 12
14. But we got it done. Tuesday, September 25, 12
15. Just after we deployed, Scott Jenson caught me o" guard. Tuesday, September 25, 12
16. “Why did that take so long?” Tuesday, September 25, 12
17. I felt sad. Tuesday, September 25, 12
18. But what he meant was: Why is it so hard? Tuesday, September 25, 12
19. We’ve learned a lot since then... Tuesday, September 25, 12
20. 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
21. It’s still like suiting up and %ghting dragons Tuesday, September 25, 12
22. It’s like trekking in the unexplored jungle Tuesday, September 25, 12
23. We’re just as likely to come home with malaria as discover the lost city of gold. Tuesday, September 25, 12
24. ...Fighting a malaise of &aring fevers during which we hallucinate about box-shadows and @font-face support Tuesday, September 25, 12
25. For a mobile web expedition to be successful Tuesday, September 25, 12
26. Epic amounts of time, and often a pile of cash, are required Tuesday, September 25, 12
27. There is still a very large dose of uncertainty Tuesday, September 25, 12
28. We’re still opening so many new doors Tuesday, September 25, 12
29. And lots of those doors have goats behind them. Tuesday, September 25, 12
30. The mobile Web is too hard Tuesday, September 25, 12
31. Coping strategies Tuesday, September 25, 12
32. By We try to mitigate this situation Tuesday, September 25, 12
33. ...building something safe, simple and lame By We try to mitigate this situation Tuesday, September 25, 12
34. ...or building strange and complex, fragile things that we don’t understand. Tuesday, September 25, 12
35. ...or hiding from the confusions and turmoil. Tuesday, September 25, 12
36. Our these really our options? Tuesday, September 25, 12
37. Build to the lowest common denominator Make something that is broken for a lot of people Tuesday, September 25, 12
38. or Build to the lowest common denominator Make something that is broken for a lot of people Tuesday, September 25, 12
39. As we chase down the minutiae Tuesday, September 25, 12
40. We risk losing sight of the bigger picture because of all the distraction and noise. Tuesday, September 25, 12
41. As leaders, we have to seize the day Tuesday, September 25, 12
42. and Keeping one foot in the trenches stretching one foot boldly toward the future Tuesday, September 25, 12
43. What can we do now to %ght these pitched, ongoing battles? Tuesday, September 25, 12
44. What can we do to get further, faster— without risking the destruction of the whole stronghold? Tuesday, September 25, 12
45. How can we orient our thinking toward what we need from the web in the future... Tuesday, September 25, 12
46. So we can %nd peace and prosperity on the web? Tuesday, September 25, 12
47. Tactics for today’s trenches Tuesday, September 25, 12
48. and Tactics for today’s trenches Ideas for tomorrow’s web Tuesday, September 25, 12
49. Tactics for today’s trenches Tuesday, September 25, 12
50. respecting the long tail: making your content and sites work for more kinds of users—legacy devices and new ones Tuesday, September 25, 12
51. Getting more bang for the buck from tested, reusable bits and pieces. Tuesday, September 25, 12
52. Avoid pandering to the least common denominator. Tuesday, September 25, 12
53. Tips for reducing the pain. Tuesday, September 25, 12
54. Rethinking and looking at processes from a slightly evolved perspective. Tuesday, September 25, 12
55. And making sure it ships. Tuesday, September 25, 12
56. 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
57. • 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
58. • 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
59. We #ounder. control meaning choose our battles poorly tested patterns and strategies burden Tuesday, September 25, 12
60. Control Tuesday, September 25, 12
61. In Out ≠ Tuesday, September 25, 12
62. What goes into the Web comes out in so many ways—and the number of ways will continue to increase. Tuesday, September 25, 12
63. This is a myth. Tuesday, September 25, 12
64. An illusion of pixel-perfect control. Tuesday, September 25, 12
65. It’s not as if if the web is printed on our own, controlled paper mill. Tuesday, September 25, 12
66. We have to set our Web free We have to help teach others to set it free, too. and Tuesday, September 25, 12
67. Letting our content &ow like water. Tuesday, September 25, 12
68. Tactics for today’s trenches Establishing a solid baseline. Tuesday, September 25, 12
69. Tactics for today’s trenches Getting our ducks in a row. Tuesday, September 25, 12
70. 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
71. 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
72. http://styletile.es by Samantha Warren Tuesday, September 25, 12
73. This is not the jettisoning of design. Tuesday, September 25, 12
74. 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
75. BB 9670—Default background color: cream Tuesday, September 25, 12
76. Tactics for Today’s Trenches Get your viewport under control. Tuesday, September 25, 12
77. Tactics for Today’s Trenches Get your viewport under control. <meta name="viewport" content="width=device-width,initial-scale=1"> Tuesday, September 25, 12
78. 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
79. 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
80. 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
81. 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
82. Tactics for today’s trenches Unclench. • Relinquishing control over certain particulars helps you get your job done faster. Tuesday, September 25, 12
83. Toward tomorrow’s Web • Pixel-perfect control was never possible. Now it’s extra impossible. Stop selling the impossible. Tuesday, September 25, 12
84. Toward tomorrow’s Web • Let the customer in. • Stop assuming the customer isn’t intelligent. Re-imagine the design process. Tuesday, September 25, 12
85. There is one core thing you do control Tuesday, September 25, 12
86. Content Tuesday, September 25, 12
87. Content %rst. Mobile %rst. Baseline %rst. Whatever you call it. Tuesday, September 25, 12
88. Treating our content at its core with respect Tuesday, September 25, 12
89. But what is content? Tuesday, September 25, 12
90. I —NY I love New York I love New York I (heart) NY I \u2665 NY I — NY I ♥ NY Tuesday, September 25, 12
91. Milton Glaser Tuesday, September 25, 12
92. At what level of abstraction did the message get through? Tuesday, September 25, 12
93. 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
94. Real-world instantiations share in the shared -ness of their archetypical form. Tuesday, September 25, 12
95. All possible chairs A single, totally-speci!c chair Tuesday, September 25, 12
96. Flexibility, Portability Total Control Tuesday, September 25, 12
97. 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
98. The same message, translated (by robots) to HTML. <p>I <em>—</em> NY</p> Tuesday, September 25, 12
99. Or maybe you’d prefer JSON... [ [ { "Para": [ { "Str": "I" }, "Space", { "Emph": [ { "Str": "—" } ] }, "Space", { "Str": "New" }, "Space", { "Str": "York" } ] } ] ] Tuesday, September 25, 12
100. 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
101. And out comes a browser-appropriate rendering of the message that is suitable for today’s Web. Tuesday, September 25, 12
102. As format-independent as possible, while still carrying the ‘-ness’ of the original message. Content Tuesday, September 25, 12
103. 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
104. 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
105. 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
106. Finding the balance between control and #exibility. Tuesday, September 25, 12
107. Content is the common denominator of the Web Tuesday, September 25, 12
108. As you start wrapping your processes and your thinking around the content itself... Tuesday, September 25, 12
109. You’ll be pleased to see certain pieces fall into place naturally Tuesday, September 25, 12
110. Content tactics for the trenches Content for the future Web and Tuesday, September 25, 12
111. Tactics for today’s trenches Luv ur contents. • Content %rst, no, really. • Visualize the re-purposing. • Know your options. Tuesday, September 25, 12
112. 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
113. “Simplify before you suppress.” —Ethan Marcotte Tuesday, September 25, 12
114. OregonLive. Local “news.” Opposite of simple. Tuesday, September 25, 12
115. Choose any part of the page; it pretty much sucks. But, hey, it’s SteakFest! Tuesday, September 25, 12
116. If you just highlight new story content, the picture simpli!es quite a bit. Tuesday, September 25, 12
117. Tuesday, September 25, 12
118. Sites like this will become like dinosaurs. Tuesday, September 25, 12
119. 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
120. 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
121. 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
122. Taking small steps to decouple has big impacts. Tuesday, September 25, 12
123. 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
124. Toward tomorrow’s Web • Simplify and decouple. • Content is the common denominator. Decouple the hell out of the Web. Tuesday, September 25, 12
125. Choosing your battles Tuesday, September 25, 12
126. O! The priorities! Tuesday, September 25, 12
127. “If you think your site works everywhere, you haven’t tested it enough. It’s broken somewhere.” — Me Tuesday, September 25, 12
128. There is a point at which return diminishes Tuesday, September 25, 12
129. Part of being able to ship it without being reduced to a drooling heap Tuesday, September 25, 12
130. ...is choosing your battle and chopping o' that tail Tuesday, September 25, 12
131. We’ve decided to choose the battle of content Tuesday, September 25, 12
132. What other choices can we make? Tuesday, September 25, 12
133. 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
134. 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
135. Pragmatism. Idealism! Tuesday, September 25, 12
136. Battle-choosing tactics for the trenches Battles for the future Web and Tuesday, September 25, 12
137. 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
138. 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
139. 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
140. “AppCache is soooooo busted we stopped using it” —Tobie Langel, Facebook Avoid the Broken. Tuesday, September 25, 12
141. 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
142. One day, I was innocently, naïvely enhancing a simple web page. Tuesday, September 25, 12
143. 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
144. And this happened. Tuesday, September 25, 12
145. Whut. Tuesday, September 25, 12
146. Oh, wait, it gets better. Tuesday, September 25, 12
147. It could certainly be argued that this is not a critical issue. BB6: UR DOIN IT RONG Sane browsers Tuesday, September 25, 12
148. 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
149. ... Tuesday, September 25, 12
150. 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
151. And this happened. Tuesday, September 25, 12
152. I’m going to go lay on the #oor for a while. Tuesday, September 25, 12
153. Do you know what I did to %x this? Nothing. Tuesday, September 25, 12
154. 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
155. 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
156. 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
157. Tail-chopping may vary depending on feature priority. Tuesday, September 25, 12
158. Our desired baseline all the way to our ideal experience... Baseline %rst Enhanced and adapted Tuesday, September 25, 12
159. Shorter tail for priority #4 Android 1.6 lacks JSON.stringify but still gets the popups... Tuesday, September 25, 12
160. Fitting these pieces together. Tuesday, September 25, 12
161. 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
162. 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
163. 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
164. 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
165. 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
166. Testing the chaos Tuesday, September 25, 12
167. Finding the right testing approach can help you spot some of the cancerous issues before they get out of control. Tuesday, September 25, 12
168. And allow you to run the issue through your battle-choosing evaluation process. Tuesday, September 25, 12
169. Priority #1: Read the content of the scenes in the play and see glossed words and terms FAIL PASS Tuesday, September 25, 12
170. This font issue causes this device to fail priority #1. Tuesday, September 25, 12
171. 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
172. 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
173. I want this site to load with alacrity, celerity. Tuesday, September 25, 12
174. And this wasn’t the only thing I’ve seen go wrong with @font-face in my day. Tuesday, September 25, 12
175. 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
176. 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
177. But there are no two ways about it... Tuesday, September 25, 12
178. Testing the mobile web sucks Tuesday, September 25, 12
179. It’s tempting to put it o' until the end of the project Tuesday, September 25, 12
180. Don’t do this Tuesday, September 25, 12
181. Testing tactics for the trenches Making the future Web work right and Tuesday, September 25, 12
182. 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
183. 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
184. 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
185. Restrained and broader testing at di"erent points. Tuesday, September 25, 12
186. 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
187. Iterative testing and loops. Core testing at smaller iterations. Comprehensive testing at larger steps. Tuesday, September 25, 12
188. Keeping it convenient. Keep ‘em organized. Keep ‘em charged. Tuesday, September 25, 12
189. 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
190. Today’s mobile web testing is fundamentally impossible and broken, when you think about it. Tuesday, September 25, 12
191. 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
192. 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
193. Automated, real-device testing AppThwack.com Tuesday, September 25, 12
194. Tuesday, September 25, 12
195. 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
196. Onus Tuesday, September 25, 12
197. The fault and the onus are not always in the same place. Tuesday, September 25, 12
198. Sometimes when it breaks, it’s our fault Tuesday, September 25, 12
199. ...but, regardless, it is almost always our onus. Tuesday, September 25, 12
200. I think sometimes we are too quiet when the onus falls to us. Tuesday, September 25, 12
201. 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
202. I visualize standards makers as working in a shining fortress on a hilltop. Tuesday, September 25, 12
203. Sometimes I get frustrated. Tuesday, September 25, 12
204. Back to our Shakespearean example... Tuesday, September 25, 12
205. As we enhance from our baseline to tappable glossary items (priority #4)... Tuesday, September 25, 12
206. We need to give the text a bit more breathing room to make tap targets more comfy. Tuesday, September 25, 12
207. Part of the tap-able gloss item enhancement is the JS-driven assignment of a class... Tuesday, September 25, 12
208. This adds some line-height and makes those targets bigger. Tuesday, September 25, 12
209. Wait just a minute, though...Opera Mini...all scrunchy. Tuesday, September 25, 12
210. Sigh. The same page... Safari Opera Mini Tuesday, September 25, 12
211. 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
212. OSUM. Things like this make me want to set myself on %re. Tuesday, September 25, 12
213. Tuesday, September 25, 12
214. But I’m not going to accept the onus for that. Tuesday, September 25, 12
215. if (typeof(history.pushState) !== ‘undefined’)) { // doSnazzyAsyncLoading(); } if (window.localStorage) { // stashStuffInIt(); } if (navigator.geolocation) { // findThisDevice(); } I vote for standards. Tuesday, September 25, 12
216. The Web should, as much as possible, allow for that level playing %eld we yearn for. Tuesday, September 25, 12
217. We’ll have to demand that together. Tuesday, September 25, 12
218. We’ve already helped to raise the bar. Tuesday, September 25, 12
219. 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
220. So that we can rely on our heroes, HTML5, CSS and the rest of the Web crew... Tuesday, September 25, 12
221. Reduce: Noise Tuesday, September 25, 12
222. Release: Control Tuesday, September 25, 12
223. Focus: Content Tuesday, September 25, 12
224. Choose Battles: Furthest reach, least pain Tuesday, September 25, 12
225. Find: A few reliable tools Tuesday, September 25, 12
226. Test: Constantly and iteratively Tuesday, September 25, 12
227. Simpler Tuesday, September 25, 12
228. More consistent Tuesday, September 25, 12
229. More powerful Tuesday, September 25, 12
230. More awesomer Web Tuesday, September 25, 12
231. • 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