Congratulations!

[Valid RSS] This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: http://www.zeldman.com/rss/

  1. <?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
  2. xmlns:content="http://purl.org/rss/1.0/modules/content/"
  3. xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  4. xmlns:dc="http://purl.org/dc/elements/1.1/"
  5. xmlns:atom="http://www.w3.org/2005/Atom"
  6. xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  7. xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  8. >
  9.  
  10. <channel>
  11. <title>Zeldman on Web &amp; Interaction Design</title>
  12. <atom:link href="http://www.zeldman.com/feed/" rel="self" type="application/rss+xml" />
  13. <link>http://www.zeldman.com</link>
  14. <description>Web design news and insights since 1995</description>
  15. <lastBuildDate>Sun, 22 Apr 2018 23:21:43 +0000</lastBuildDate>
  16. <language>en-US</language>
  17. <sy:updatePeriod>hourly</sy:updatePeriod>
  18. <sy:updateFrequency>1</sy:updateFrequency>
  19.  
  20. <image>
  21. <url>https://i0.wp.com/www.zeldman.com/wp-content/default-54a3966bv1_site_icon.png?fit=32%2C32</url>
  22. <title>Zeldman on Web &amp; Interaction Design</title>
  23. <link>http://www.zeldman.com</link>
  24. <width>32</width>
  25. <height>32</height>
  26. </image>
  27. <site xmlns="com-wordpress:feed-additions:1">1178115</site> <item>
  28. <title>Cossack</title>
  29. <link>http://www.zeldman.com/2018/04/22/cossack/</link>
  30. <pubDate>Sun, 22 Apr 2018 23:02:38 +0000</pubDate>
  31. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  32. <category><![CDATA[glamorous]]></category>
  33.  
  34. <guid isPermaLink="false">http://www.zeldman.com/?p=14706</guid>
  35. <description><![CDATA[<p>“Are you here with your child?” It’s a Sunday and my daughter is visiting her mom. I’d spent the morning lugging my daughter’s old clothes and toys to a donation bin, where they’ll be given to some of New York’s neediest kids. Now I was on a photo walk, shooting places in my neighborhood along [&#8230;]</p>
  36. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/04/22/cossack/">Cossack</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  37. ]]></description>
  38. <content:encoded><![CDATA[<p><img src="https://i0.wp.com/www.zeldman.com/wp-content/DSC02166.jpg?resize=640%2C427" alt="" width="640" height="427" class="aligncenter size-full wp-image-14707" srcset="https://i0.wp.com/www.zeldman.com/wp-content/DSC02166.jpg?w=6000 6000w, https://i0.wp.com/www.zeldman.com/wp-content/DSC02166.jpg?resize=100%2C67 100w, https://i0.wp.com/www.zeldman.com/wp-content/DSC02166.jpg?resize=768%2C512 768w, https://i0.wp.com/www.zeldman.com/wp-content/DSC02166.jpg?w=1280 1280w, https://i0.wp.com/www.zeldman.com/wp-content/DSC02166.jpg?w=1920 1920w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  39. <p>“Are you here with your child?”</p>
  40. <p>It’s a Sunday and my daughter is visiting her mom. I’d spent the morning lugging my daughter’s old clothes and toys to a donation bin, where they’ll be given to some of New York’s neediest kids. Now I was on a photo walk, shooting places in my neighborhood along the East River.</p>
  41. <p>At Saint Vartan Park, where I had gone to shoot the pink cherry blossoms, a large man walked up to me somewhat aggressively. </p>
  42. <p>Saint Vartan is a pocket park near my home. It has a playground area where local families take their kids. I took Ava there for hours every day until she was six or so. We practically lived there.</p>
  43. <p>The cherry trees overhang the a public space adjoining the playground area, and it was there I’d stopped to take photos when the big man put himself in my face.</p>
  44. <p>“Are you here with your child?” he asked.</p>
  45. <p>“No,” I said.</p>
  46. <p>“You have to leave,” the man said. </p>
  47. <p>He wasn’t a cop, he just a big white man wearing tee shirt, shorts, and sneakers.</p>
  48. <p>“I’m not doing anything wrong,” I said. “My daughter practically grew up in this park.”</p>
  49. <p>“You said you didn’t have a daughter.”</p>
  50. <p>“I said she isn’t here today. She’s thirteen. I’m a dad, like you. This is a public park. I’ve stopped in to take pictures of the cherry blossoms.”</p>
  51. <p>“You can’t be here without your child,” he said again. </p>
  52. <p>“Really. Is there a sign? I’ve come to this park for years, this is my neighborhood, there’s no rule about who can come to the park.”</p>
  53. <p>“If you don’t have a child here, you have to leave,” he said.</p>
  54. <p>He leaned down closer, emphasizing the difference in our heights.</p>
  55. <p>I could see he was becoming angry. So was I. I had an irrational impulse to punch him in the face. </p>
  56. <p>We were walking, now. He had moved closer to me and was escorting me out of the park. Like he was a cop and I was a criminal. No, not that. Like he was a decent, God-fearing parent, and I was some kind of pervert who got off taking pictures of kids.</p>
  57. <p>Only I wasn’t photographing kids. I was photographing the cherry trees at the edge of the park. It’s the only place in the neighborhood where there are pink cherry blossoms. </p>
  58. <p>He was much bigger than me, but we were both agitated, both ready to fight, both suppressing our anger to avoid fighting—avoid making things worse. </p>
  59. <p>We had move in sync toward the exit, but now I walked past him, showing him that I did not need an escort.</p>
  60. <p>“I’m going to photograph this tree,” I said. And stood with my back to him and took the shot. To prove a point, I guess. </p>
  61. <p>And then I left.</p>
  62. <hr />
  63. <p>Later, at home again, I saw things from his point of view. He didn’t know me. He saw a guy with a camera not far from where his kid was probably playing, and felt protective. I might have felt the same.</p>
  64. <p>Maybe he wasn’t feeling anything, at first; maybe his partner was anxious and he was acting on their behalf. Maybe he and his partner had been annoying each other, and here was his opportunity to act the hero. </p>
  65. <p>Maybe, as a longtime resident, on a sunny Sunday, I should have known not to enter my neighborhood park with a big honking camera around my neck.</p>
  66. <p>I think of that park as my park. My daughter’s park. It’s as much a part of our family as our favorite neighborhood restaurant. I forgot that my daughter has long outgrown the place, that I don’t know the parents of young kids in my neighborhood as I did when my kid was young. I forgot to imagine how an anxious parent might view a stranger with a camera and no kid.</p>
  67. <p>But when my kid was young and that was her park, if a stranger with a camera had triggered my parental anxiety, I would have walked gently up to the middle-aged photographer at the edge of the park and said hi. I would have asked questions, not assumed ill intent. Not taken the other man in hand, like he was a lesser being, an annoyance to be handled.  </p>
  68. <hr />
  69. <p>My interaction with the big man took all of two minutes. And happened hours ago. I have done many things since then, most of them positive, some even joyous.</p>
  70. <p>But I still want to punch that big fuck right in his big fucking face.</p>
  71. <hr />
  72. <p><i><a href="https://medium.com/@zeldman/cossack-65f821b1ecc4">Also published on Medium</a>.</i></p>
  73. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/04/22/cossack/">Cossack</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  74. ]]></content:encoded>
  75. <post-id xmlns="com-wordpress:feed-additions:1">14706</post-id> </item>
  76. <item>
  77. <title>We need design that is faster and design that is slower.</title>
  78. <link>http://www.zeldman.com/2018/02/24/need-design-faster-design-slower/</link>
  79. <pubDate>Sat, 24 Feb 2018 19:05:53 +0000</pubDate>
  80. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  81. <category><![CDATA[Design]]></category>
  82.  
  83. <guid isPermaLink="false">http://www.zeldman.com/?p=14696</guid>
  84. <description><![CDATA[<p>During a recent conversation with  David Sleight, Design Director at ProPublica, I found myself realizing and saying “we need design that is faster and design that is slower.” Who are we and what is this thing called design? When I say  “we,” I mean our whole industry, when I say “our whole industry,” I mean design, [&#8230;]</p>
  85. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/02/24/need-design-faster-design-slower/">We need design that is faster and design that is slower.</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  86. ]]></description>
  87. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p class="p3"><span class="s1">During a recent conversation with  <a href="https://twitter.com/stuntbox"><span class="s2">David Sleight</span></a>, Design Director at <a href="https://www.propublica.org/"><span class="s2">ProPublica</span></a>, I found myself realizing and saying “we need design that is faster and design that is slower.”</span></p>
  88. <h3 class="p4"><span class="s1"><b>Who are we and what is this thing called design?</b></span></h3>
  89. <p class="p3"><span class="s1">When I say<span class="Apple-converted-space">  </span>“we,” I mean our whole industry, when I say “our whole industry,” I mean design, and when I say “design,” I mean: web design and development; digital product design; digital user experience design; digital user interface design; digital interaction design; “mobile” design (which is the same thing as web design and development); graphic design as part of UX, UI, interactive, digital, and web design; publishing and editorial design; and other<span class="Apple-converted-space">  </span>design practices specifically empowered by the internet and digital technology and built largely around reading and interacting with words on screens.</span></p>
  90. <p class="p3"><span class="s1"><br />
  91. A mouthful, isn’t it? Some people mean all the above when they say “UX.” I generally mean all the above when I say “design” and call myself a designer.</span></p>
  92. <p class="p3"><span class="s1">I exclude from the category, for this specific discussion, tactile, conversational, and passive design powered by the internet of things. Not because those practices are uninteresting or unimportant—on the contrary, they are fascinating, exciting, and fraught with critical ethical questions—but because they are not specifically <i>screen- and reading-driven</i>. And it’s our screen- and reading-driven design that needs a reset.</span></p>
  93. <p class="p3"><span class="s1"><i>Our whole industry, as I’ve just defined it, needs design that is </i><b><i>faster</i></b><i> for people who are trying to get things done, for they are our customers and should not be burdened by our institutional surrenders. We need design that is </i><b><i>slower</i></b><i> for people who are trying to comprehend, for they are our only chance of saving the world.</i></span></p>
  94. <h3 class="p4"><span class="s1"><b>This porridge is too fast</b></span></h3>
  95. <p class="p3"><span class="s1">Our news and information sites have succeeded so well, they are failing. We’ve designed them to be quickly scannable—at a glance, I take in the headline, the key visual, and the lead paragraph. But today’s news is anything but simple. The truth cannot be reduced to visual sound bytes. That’s how we got in this mess in the first place. </span></p>
  96. <p class="p3"><span class="s1">As a society, we’ve replaced thinking with slogans, listening with wall-building. Our best news publications are doing a better and better job of reporting beyond headlines—getting down to the details that really matter. But we designers have so trained readers to scan and move on—Pacmans scarfing dopamine hits—that they no longer have the instinct to sit back and take their time with what they’re reading. </span></p>
  97. <p class="p3"><span class="s1">Our news designs must work to slow down the reader, engage her more deeply, encourage her to lean back and absorb. The good news is, we’ve long had the tools to do it: typography and whitespace.</span></p>
  98. <p class="p3"><a class="markup--anchor markup--p-anchor" href="https://www.forbes.com/sites/anthonykosner/2012/05/20/large-type-one-web-designer-puts-content-first-in-a-big-way/#3ee4b96f51b0" target="_blank" rel="noopener nofollow" data-href="https://www.forbes.com/sites/anthonykosner/2012/05/20/large-type-one-web-designer-puts-content-first-in-a-big-way/#3ee4b96f51b0">Larger type</a> — type that actually encourages the reader to sit back in her chair — plus radically uncluttered interfaces and (when budget permits and the story merits it) <a class="markup--anchor markup--p-anchor" href="https://alistapart.com/article/artdirweb" target="_blank" rel="noopener nofollow" data-href="https://alistapart.com/article/artdirweb">art direction</a> are the way to do it. <a class="markup--anchor markup--p-anchor" href="https://twitter.com/fraying" target="_blank" rel="nofollow noopener" data-href="https://twitter.com/fraying">Derek Powazek</a>’s late lamented {fray} (1996 — <a class="markup--anchor markup--p-anchor" href="http://fray.com/issue3/" target="_blank" rel="noopener nofollow" data-href="http://fray.com/issue3/">remnant here</a>) and <a class="markup--anchor markup--p-anchor" href="https://twitter.com/thelancearthur" target="_blank" rel="noopener nofollow" data-href="https://twitter.com/thelancearthur">Lance Arthur</a>’s Glassdog were the first sites to do real art direction on the web. <a class="markup--anchor markup--p-anchor" href="http://jasonsantamaria.com/about/" target="_blank" rel="noopener nofollow" data-href="http://jasonsantamaria.com/about/">Jason Santa Maria</a>’s personal site was a later, brilliant exponent of art direction on the web. (See “Previous/Embarrassing Editions.”)</p>
  99. <p id="c853" class="graf graf--p graf-after--figure">You can see these techniques working in the recent designs of <a class="markup--anchor markup--p-anchor" href="https://www.washingtonpost.com/" target="_blank" rel="noopener nofollow" data-href="https://www.washingtonpost.com/"><em class="markup--em markup--p-em">The Washington Post</em></a> (but not its homepage), <a class="markup--anchor markup--p-anchor" href="https://www.nytimes.com/" target="_blank" rel="noopener nofollow" data-href="https://www.nytimes.com/"><em class="markup--em markup--p-em">The New York Times</em></a> (but not its homepage), <a class="markup--anchor markup--p-anchor" href="https://www.propublica.org/" target="_blank" rel="noopener nofollow" data-href="https://www.propublica.org/"><em class="markup--em markup--p-em">ProPublica</em></a>, <a class="markup--anchor markup--p-anchor" href="https://slate.com/" target="_blank" rel="noopener nofollow" data-href="https://slate.com/"><em class="markup--em markup--p-em">Slate</em></a>, <a class="markup--anchor markup--p-anchor" href="https://www.smashingmagazine.com/" target="_blank" rel="noopener nofollow" data-href="https://www.smashingmagazine.com/"><em class="markup--em markup--p-em">Smashing Magazine</em></a>, and <a class="markup--anchor markup--p-anchor" href="https://www.vox.com/" target="_blank" rel="noopener nofollow" data-href="https://www.vox.com/"><em class="markup--em markup--p-em">Vox</em></a> — with inspiration from predecessors including the <a class="markup--anchor markup--p-anchor" href="https://www.readability.com/" target="_blank" rel="noopener nofollow" data-href="https://www.readability.com/">Readability</a> application, <a class="markup--anchor markup--p-anchor" href="https://medium.com/@zeldman/latest" target="_blank" rel="noopener" data-href="https://medium.com/@zeldman/latest">Medium</a>, and<em class="markup--em markup--p-em"> </em><a class="markup--anchor markup--p-anchor" href="https://alistapart.com/" target="_blank" rel="noopener nofollow" data-href="https://alistapart.com/"><em class="markup--em markup--p-em">A List Apart</em></a>.</p>
  100. <p class="p3"><span class="s1">To a great extent, the ability of news publications to pursue<b> slow design</b> depends on their ability to finance themselves without overly relying on race-to-the-bottom advertising. Not all periodicals can free themselves of this dependency. </span></p>
  101. <p class="p3"><span class="s1">On the flip side of the news experience, which must be savored and digested slowly, comes the challenge of our corporate and organizational sites, which must become <b>faster</b>—not just technically, but (even more importantly) in terms of their content’s comprehensibility.</span></p>
  102. <h3 class="p4"><span class="s1"><b>In the beginning, there was shovelware</b></span></h3>
  103. <p class="p3">As the once-vital <a class="markup--anchor markup--p-anchor" href="https://www.pelfusion.com/the-history-of-web-design-blogs/" target="_blank" rel="noopener nofollow" data-href="https://www.pelfusion.com/the-history-of-web-design-blogs/">blogosphere</a> <a class="markup--anchor markup--p-anchor" href="https://medium.com/let-me-repost-that-for-you-zeldman/the-vanishing-personal-site-72103ffd521b" target="_blank" rel="noopener" data-href="https://medium.com/let-me-repost-that-for-you-zeldman/the-vanishing-personal-site-72103ffd521b">recedes from the equation</a>, and as traditional periodical publications struggle to retain solvency and relevancy (and wrestle with readability), the web becomes the turf of stores like Amazon, powerful networks like Facebook, and traditional corporate brochureware. It’s this <em class="markup--em markup--p-em">brochureware</em> that most needs fixing—most needs to be <em class="markup--em markup--p-em">designed to be faster.</em></p>
  104. <p class="p3"><span class="s1">In the 1990s, disgruntled computer buyers coined the word “shovelware” to refer to the second-rate games, fonts, and software that came pre-bundled with many PCs. It wasn’t stuff you had to have, carefully curated by software wizards who cared for you—it was garbage presented as value. Early web designers, including your present author, soon used “shovelware” to refer to the reams of corporate copy that got thoughtlessly dumped into the first corporate sites. The corporate overlords thought of the stuff as content. The readers didn’t think of it at all.</span></p>
  105. <h3 class="p4"><span class="s1"><b>Getting easier to publish and harder to communicate</b></span></h3>
  106. <p class="p3"><span class="s1">So we spent years preaching that the web was not print, finding ways to design words on screens so they could be scanned and used. We learned to inventory our old content and develop the will and the sales ability to toss the dross. Only content stringently designed to satisfy both customer and business needs would be permitted onto our excellent corporate websites. At least, that was how we did it when it came time for a major redesign (and only when astute stakeholders permitted it).</span></p>
  107. <p class="p3"><span class="s1">But most of the time, and constantly between redesigns, junk still got shoveled into our websites. We even made it easier for the shovelers. We developed CMS systems and gave everyone in the organization the power to use them. It was easier for us to let people publish the stuff their little group cared about than to stop and ask what mattered to the customer. And it was also easier for the organization, as it enabled warring fiefdoms to avoid difficult meetings. </span></p>
  108. <p class="p3"><span class="s1">It was easier. But not better.</span></p>
  109. <p class="p3"><span class="s1">And the CMS systems multiplied, and the web-savvy middle managers were fruitful, and the corporate site was filled with documents nobody but those who posted them ever read. And the corporate site sucked. It sucked harder than it had even in the earliest shovelware days of the 1990s. It sucked deeper and wider and more frequently and with better algorithms. For all our talk of user journeys and mental models, most corporate sites are mostly pretty garbage. </span></p>
  110. <p class="p3"><span class="s1">Shhh! Don’t tell the client. They still owe us a payment.</span></p>
  111. <h3 class="p4"><span class="s1"><b>Beyond pretty garbage</b></span></h3>
  112. <p class="p3"><span class="s1">Gerry McGovern’s <a href="https://aneventapart.com/news/post/top-task-management-making-it-easier-to-prioritize-by-gerry-mcgovern-AEA"><span class="s4">“Top Tasks” method</span></a> showed how to prioritize the information the customer seeks over the darlings of Management. Ethan Marcotte’s <a href="https://alistapart.com/article/responsive-web-design"><span class="s4">responsive web design</span></a> and Luke Wroblewski’s <a href="https://abookapart.com/products/mobile-first"><span class="s4">mobile-first</span></a> strategies pointed the way to restoring the focus on what’s most essential. There’s no room for pretty garbage on the small screen. Now, before it’s too late, we must fulfill the promise those visionaries and others have shared with us. If we want to save our brochure sites, we must make them not just faster, but <i>relevant</i> faster.</span></p>
  113. <p class="p3"><span class="s1">Designing with the <a href="https://medium.com/@zeldman/beyond-engagement-the-content-performance-quotient-56ab31eebc55"><span class="s4">content performance quotient (CPQ)</span></a> in mind is how we will take the next step. We’ll ruthlessly prune the inessential, cut our sitemaps down to size, slash our bloated pathways, removing page after unloved page, until there’s nothing left but near-neural pathways from the user to the information she seeks. </span></p>
  114. <p class="p3"><span class="s1">In short, we will sculpt the design, presentation, and amount of content in our brochure sites with the same scalpel we take to the <a href="https://twitter.com/DesignCPQ/status/966368303051665413"><span class="s4">shopping carts</span></a> in our e-commerce sites. </span></p>
  115. <h3 class="p4"><span class="s1"><b>Evaluating speed or relevancy for your site’s content</b></span></h3>
  116. <p class="p3"><span class="s1">How can we tell which sites should be faster, and which should be slower? It’s easy. If the content is delivered for the good of the general public, the presentation must facilitate slow, careful reading. If it’s designed to promote our business or help a customer get an answer to her question, it must be designed for speed of relevancy. </span></p>
  117. <p class="graf graf--p">I’ll continue to explore both these themes in future articles here. My thanks to ProPublica’s <a class="markup--anchor markup--p-anchor" href="http://stuntbox.com/" target="_blank" rel="noopener" data-href="http://stuntbox.com/">David Sleight</a> for the remarkable conversation that helped give birth to this piece. David is a web designer, creative director, and leader at the intersection of publishing and digital technology. ProPublica is an independent, nonprofit newsroom that produces “investigative journalism with moral force.” To hear the complete conversation, don your headphones and listen to <a class="markup--anchor markup--p-anchor" href="http://5by5.tv/bigwebshow/171" target="_blank" rel="noopener" data-href="http://5by5.tv/bigwebshow/171">Episode № 171: Art Directing the News — with ProPublica Design Director David Sleight</a> on The Big Web Show.</p>
  118. <h3 class="p4"><span class="s1"><b>Read more</b></span></h3>
  119. <p class="p7"><span class="s3"><a href="https://medium.com/@zeldman/beyond-engagement-the-content-performance-quotient-56ab31eebc55">Beyond Engagement: the Content Performance Quotient</a></span></p>
  120. <p class="p7"><span class="s3"><a href="https://www.forbes.com/sites/anthonykosner/2012/05/20/large-type-one-web-designer-puts-content-first-in-a-big-way/#4b5585f151b0">Large Type: One Web Designer Puts Content First in a Big Way</a></span></p>
  121. <p class="p3"><span class="s3"><a href="https://trackchanges.postlight.com/authoritative-readable-branded-report-from-poynter-design-challenge-part-2-42cef2bd0b67">Authoritative, Readable, Branded: Report From Poynter Design Challenge, Part 2</a></span></p>
  122. <p class="p7"><span class="s3"><a href="https://medium.com/let-me-repost-that-for-you-zeldman/to-save-real-news-89eb0ba546d9">To Save Real News</a></span></p>
  123. <p class="p7"><span class="s3"><a href="http://www.zeldman.com/2012/04/18/redesigning-in-public-again/">Redesigning in Public Again</a></span></p>
  124. <p class="p7"><span class="s3"><a href="https://medium.com/let-me-repost-that-for-you-zeldman/the-year-in-design-9c06acf55b88">The Year in Design</a></span></p>
  125. <p>&nbsp;</p>
  126. <p class="p1"><span class="s1"><i><a href="https://medium.com/@zeldman/we-need-design-that-is-faster-and-design-that-is-slower-bbf6afd08e5">Also published at medium</a>.</i></span></p>
  127. <p class="p1"><span class="s2"><a href="https://studio.zeldman.com/"><i>studio.zeldman</i></a></span><span class="s1"><i> is open for business. Follow me </i><a href="https://twitter.com/zeldman"><span class="s2"><i>@zeldman</i></span></a><i>.</i></span></p>
  128. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/02/24/need-design-faster-design-slower/">We need design that is faster and design that is slower.</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  129. ]]></content:encoded>
  130. <post-id xmlns="com-wordpress:feed-additions:1">14696</post-id> </item>
  131. <item>
  132. <title>Beyond Engagement: the content performance quotient</title>
  133. <link>http://www.zeldman.com/2018/02/19/beyond-engagement-the-content-performance-quotient/</link>
  134. <pubDate>Mon, 19 Feb 2018 15:30:48 +0000</pubDate>
  135. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  136. <category><![CDATA[Bandwidth]]></category>
  137. <category><![CDATA[Best practices]]></category>
  138. <category><![CDATA[business]]></category>
  139. <category><![CDATA[Content First]]></category>
  140. <category><![CDATA[content strategy]]></category>
  141. <category><![CDATA[Content-First]]></category>
  142. <category><![CDATA[Design]]></category>
  143. <category><![CDATA[UX]]></category>
  144. <category><![CDATA[Web Design]]></category>
  145.  
  146. <guid isPermaLink="false">http://www.zeldman.com/?p=14669</guid>
  147. <description><![CDATA[<p>Recently, Josh Clark, Gerry McGovern and I have been questioning our industry’s pursuit of “engagement.” Engagement is what all our clients want all the time. It’s the № 1 goal cited in kickoff meetings, the data point that determines if a project succeeded or sucked wind. When our clients muse over their Analytics, they’re almost [&#8230;]</p>
  148. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/02/19/beyond-engagement-the-content-performance-quotient/">Beyond Engagement: the content performance quotient</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  149. ]]></description>
  150. <content:encoded><![CDATA[<p><img class="softinset" src="https://i0.wp.com/www.zeldman.com/wp-content/1_Gy9ixjdJTWI39SncGQMZAQ.png?resize=600%2C600" alt="" width="600" height="600" data-recalc-dims="1" /></p>
  151. <p class="p1"><span class="s1">Recently, <a href="https://bigmedium.com/about/josh-clark.html"><span class="s2">Josh Clark</span></a>, <a href="http://www.customercarewords.com/about/gerry-mcgovern/"><span class="s2">Gerry McGovern</span></a> and I have been questioning our industry’s pursuit of “engagement.” Engagement is what all our clients want all the time. It’s the № 1 goal cited in kickoff meetings, the data point that determines if a project succeeded or sucked wind. When our clients muse over their Analytics, they’re almost always eyeing engagement, charting its tiny variances with the jittery, obsessive focus of overanxious parents taking a sick child’s temperature. </span></p>
  152. <p class="p3"><span class="s1">Engagement is our <i>cri de coeur</i>. Our products, websites, and applications live and die by it. But should they?</span></p>
  153. <p class="p3"><span class="s1">For many of our products, websites, and applications, duration of page visit, number of our pages clicked through, and similar signs of engagement as it is traditionally understood may actually be marks of failure. If a customer spends 30 minutes on her insurance company’s site, was she <em>engaged</em> &#8230; or frustrated by bad information architecture?</span></p>
  154. <p class="p3"><span class="s1">For these products, websites, and applications, we need a new metric, a<span class="Apple-converted-space">  </span>new and different № 1 goal. Think of it as <i>speed of usefulness; </i>and call it <i>content performance quotient—</i>or CPQ if acronyms make you feel all business-y and tingly inside. </span></p>
  155. <p class="p3"><span class="s1">The content performance quotient is an index of how quickly you get the right answer to the individual customer, allowing her to act on it or depart and get on with her day. It is a measurement of your value to the customer. For many apps, sites, and products, the content performance quotient offers a new goal to iterate against, a new way to deliver value, and a new way to evaluate success.</span></p>
  156. <h3 class="p4"><span class="s1"><b>For many sites, engagement is still a valid goal</b></span></h3>
  157. <p class="graf graf--p">To be fair as well as explicit, spending extra seconds on a web page, and browsing from one page to another and another, remains a desirable thing on deep content sites like <a class="markup--anchor markup--p-anchor" href="https://alistapart.com/" target="_blank" rel="noopener" data-href="https://alistapart.com/"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">A List Apart</em></strong></a> and <a class="markup--anchor markup--p-anchor" href="https://www.washingtonpost.com/" target="_blank" rel="noopener" data-href="https://www.washingtonpost.com/"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">The Washington Post</em></strong></a> — sites that encourage slow, thoughtful reading.</p>
  158. <p class="p3"><span class="s1"><i>A List Apart</i> isn’t a place to grab code and get back to your web development project; it’s a place to ponder new and better ways of designing, developing, and strategizing web content. And pondering means slowly digesting what you have read. <i>The Washington Post</i> isn’t a purveyor of ten-second talking points and memorable but shallow headlines—it’s a place for detailed news and news analysis. </span><span class="s1">That kind of reading takes time, so it makes sense if the owners and managers of those publications peruse their Analytics seeking signs of engagement. For everyone else, there’s the CPQ. Or will be, <i>once someone reading this figures out how to measure it</i>. </span></p>
  159. <p class="p3"><span class="s1">There’s also a <b>new design paradigm</b> that goes hand-in-hand with this new goal: shrinking your architecture and relentlessly slashing your content. It’s an approach we’ve begun practicing in <a href="https://studio.zeldman.com/"><span class="s2">my design studio</span></a>. </span></p>
  160. <p class="p3"><span class="s1">But first things first. What exactly is the CPQ?</span></p>
  161. <p class="p3"><span class="s1">The content performance quotient (CPQ) is the time it takes your customer to get the information she sought, and here, less is more—or better. From the organization’s point of view, CPQ can be the time it takes to for a specific customer to find, receive, and absorb your most important content.</span></p>
  162. <h3 class="p4"><span class="s1"><b>Come to where the messaging is</b></span></h3>
  163. <p><img class="size-full wp-image-14681 aligncenter" src="https://i0.wp.com/www.zeldman.com/wp-content/marlboro-man-dies.jpg?resize=640%2C400" alt="" width="640" height="400" srcset="https://i0.wp.com/www.zeldman.com/wp-content/marlboro-man-dies.jpg?w=1240 1240w, https://i0.wp.com/www.zeldman.com/wp-content/marlboro-man-dies.jpg?resize=100%2C63 100w, https://i0.wp.com/www.zeldman.com/wp-content/marlboro-man-dies.jpg?resize=768%2C480 768w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  164. <p>&nbsp;</p>
  165. <p class="p3"><span class="s1">Consider the Marlboro Man (kids, <a href="https://en.wikipedia.org/wiki/Marlboro_Man"><span class="s2">check the Wikipedia entry</span></a>), a silent visual spokesman for Marlboro cigarettes, created by the Leo Burnett agency for an era when Americans expressed their optimism by driving two-ton be-finned convertibles along the new highways that bypassed the old cities and the old urban way of life. </span></p>
  166. <p class="p3"><span class="s1">It was a time when Americans looked back on their historical westward expansion un-ironically and without shame. Cowboys were heroes on TV. Cowboys were freedom, the car and the highway were freedom, smoking the right cigarette was freedom. </span></p>
  167. <p class="p3"><span class="s1">On TV back then, when commercials had a full 60 seconds to convey their messaging, and nearly all were heavy on dialog and narration, Marlboro TV commercials were practically wordless. They showed a cowboy riding a horse. You saw him in closeup. You saw him in long shot. There were slow dissolves. There was music. There were no words at all, until the very end, when a suitably gravel-voiced announcer advised you to “Come to where the flavor is. Come to Marlboro Country.”</span></p>
  168. <p class="p3"><span class="s1">But it was in billboards along the highway and at urban entrance points where the campaign really lived. There was a beautiful shot of the cowboy doing cowboy stuff in the distance. There were four words: “Come to Marlboro Country.” One of them barely counts as a word, and you didn’t have to read any of them to get the message.</span></p>
  169. <p class="p3"><span class="s1">The billboards had one or two seconds to tell you everything, and they worked. At a glance, and from repeated glances over time, you knew that Marlboro was the filtered tobacco cigarette of the independent man who loved liberty. It was not the smoke of the neurotic urban dwelling subway rider (even if, in reality, that was the customer). Marlboro was for the libertarian in chaps. For the macho individualist with no crushing mortgage to pay off, no wife and kids to infringe on his horse-loving freedom. You got it all, without even knowing you got it. That’s performance.</span></p>
  170. <h3 class="p4"><span class="s1"><b>Targeting convertibles on the information superhighway</b></span></h3>
  171. <p class="p3"><span class="s1">In hindsight, it sounds ridiculous, but the super-fast storytelling worked: when I was growing up, Marlboro was what every child in my middle school smoked.</span></p>
  172. <p class="p3"><span class="s1">Remove the cancer and the other ethical problems from this story and hold fast to the idea of conveying information as close to instantaneously as possible. The geniuses behind the Marlboro Man achieved it by <i>reducing their messaging to only what was needed</i>—only what could be conveyed to a person passing a billboard at 60 MPH. </span></p>
  173. <p class="p3"><span class="s1">Your customer is not speeding past your messaging in a 1954 convertible, but she is speeding past it, and if you don’t optimize, she will miss it. For her to get your message, you have to work as hard as those evil ad wizards did. You must focus relentlessly on messaging (as well as design and site performance—but we’ll get into all that soon enough). Just as Leo Burnett cut their TV messaging to ten words, and their billboard to four, you must be willing to think twice about every word, every page. <a href="https://abookapart.com/products/mobile-first">Mobile First</a> taught us to focus above all else on the content the customer actually seeks. A better CPQ is what you get when you do that—particularly when you combine it with good design and optimal technical performance. </span></p>
  174. <p class="p3"><span class="s1">Most business websites contain dozens of pages that were made to satisfy some long-ago stakeholder. They are pages that nobody visits. Pages that do nothing to help the customer or advance the business’s agenda. Putting all that junk online may have made for smooth meetings ten years ago, but it isn’t helping your business or your customer. Our sites, apps, and products must do both.</span></p>
  175. <h3 class="p4"><span class="s1"><b>Content performance quotient: the secret sauce </b></span></h3>
  176. <p class="p3"><span class="s1">Lately in my design practice I’ve been persuading clients to create sites that might superficially appear less effective if you’re going by engagement metrics alone, but which are actually far more successful because they are more instantly persuasive. At my urging, our clients have allowed us to relentlessly cut copy and chop sections nobody looks at, replacing them with a few pages that are there to do a job. We are lucky to have smart clients who are willing to jettison hundreds of hours worth of old work in favor of a streamlined experience that delivers value. Not every client has the courage to do so. But more will as this idea catches on. </span></p>
  177. <p class="p3"><span class="s1">(By the way, don’t look for these projects on <a href="https://studio.zeldman.com/"><span class="s2">our studio’s website</span></a> just yet; they are still in development.)</span></p>
  178. <p class="p3"><span class="s1">Serving only the content the customers actually need; streamlining and testing and fine-tuning the interaction to get the right customer to the right content precisely when they want it; wrapping the experience in an engagingly readable but also quickly scannable user interface; and doing everything in our power to ensure that the underlying web experience is as <a href="https://alistapart.com/article/planning-for-performance">performant</a> as possible—this, I believe, is the secret to increasing CPQ.</span></p>
  179. <h3 class="p4"><span class="s1"><b>CPQ: the story so far</b></span></h3>
  180. <p><img class="aligncenter size-full wp-image-14682" src="https://i2.wp.com/www.zeldman.com/wp-content/15808524522_6573a41cbd_o.jpg?resize=640%2C360" alt="Designer Fred Gates, kicking it in Central Park, NYC." width="640" height="360" srcset="https://i2.wp.com/www.zeldman.com/wp-content/15808524522_6573a41cbd_o.jpg?w=6000 6000w, https://i2.wp.com/www.zeldman.com/wp-content/15808524522_6573a41cbd_o.jpg?resize=100%2C56 100w, https://i2.wp.com/www.zeldman.com/wp-content/15808524522_6573a41cbd_o.jpg?resize=768%2C432 768w, https://i2.wp.com/www.zeldman.com/wp-content/15808524522_6573a41cbd_o.jpg?w=1280 1280w, https://i2.wp.com/www.zeldman.com/wp-content/15808524522_6573a41cbd_o.jpg?w=1920 1920w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  181. <p>&nbsp;</p>
  182. <p class="p3"><span class="s1">The idea of delivering much less (but much better) first occurred to me while I was looking over a fellow designer’s shoulder. My friend Fred Gates of <a href="http://fredgatesdesign.co/"><span class="s2">Fred Gates Design</span></a> is working on a project for a client in the nonprofit education space. The client’s initial budget was not large, so, to be fair, they suggested Fred only update their homepage. But Fred being Fred, if he was only going to design a single page, he was determined to deliver tremendous value on it. </span></p>
  183. <p class="p3"><span class="s1"><i>By focusing relentlessly on the objectives of the entire site, he was able to bring all the principal interactions and messages into a single performant homepage, essentially reducing a big site to a lean, fast, and more effective one.</i> </span></p>
  184. <p class="p3"><span class="s1">Far from getting less, his client (and their customers) got much more than they expected.</span></p>
  185. <p class="graf graf--p">Inspired by what my friend had achieved, I then proposed exactly the same approach to a client of <em class="markup--em markup--p-em">ours</em>. Not because their budget was a problem, but because streamlining was clearly the right approach … and a redesign is the perfect opportunity to rethink. When you repaint your living room, it gives you a chance to rethink your couch and divan. You’re most likely to consider changing your diet when you’ve begun a new exercise program. Clients are people, and people are most receptive to one form of change when they are already engaged in another.</p>
  186. <p>Positioning CPQ as an aspect of technical performance is another way to overcome stakeholder skepticism. <a href="https://alistapart.com/article/performance-showing-versus-telling">Lara Hogan has more</a> on persuading peers and stakeholders to care about technical performance optimization.</p>
  187. <p class="p3"><span class="s1">We are a few weeks away from launching what we and the client are calling Phase I, a lean, performant, relentlessly message-focused web experience. But if we’ve done this right, we won’t have much to do in Phase II—because the “mini-site” we’re delivering in Phase I will do more for the company and its customers than a big site ever did.</span></p>
  188. <p class="graf graf--p">I’ll be back with updates when we launch, and (more importantly) when we have data to share. Follow <a class="markup--anchor markup--p-anchor" href="https://twitter.com/DesignCPQ" target="_blank" rel="noopener" data-href="https://twitter.com/DesignCPQ">@DesignCPQ</a> to stay on top of CPQ thinking.</p>
  189. <p>&nbsp;</p>
  190. <p class="graf graf--p"><a class="markup--anchor markup--p-anchor" href="https://medium.com/@zeldman/beyond-engagement-content-performance-quotient-56ab31eebc55" target="_blank" rel="noopener" data-href="https://wp.me/p4WtR-3OB"><em class="markup--em markup--p-em">Also published at Medium.</em></a></p>
  191. <p class="graf graf--p"><a class="markup--anchor markup--p-anchor" href="https://studio.zeldman.com/" target="_blank" rel="noopener" data-href="https://studio.zeldman.com/"><em class="markup--em markup--p-em">studio.zeldman</em></a><em class="markup--em markup--p-em"> is open for business. Follow me </em><a class="markup--anchor markup--p-anchor" href="https://twitter.com/zeldman" target="_blank" rel="nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener noopener noopener noopener nofollow noopener nofollow noopener noopener noopener noopener" data-href="https://twitter.com/zeldman"><em class="markup--em markup--p-em">@zeldman</em></a><em class="markup--em markup--p-em">.</em></p>
  192. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/02/19/beyond-engagement-the-content-performance-quotient/">Beyond Engagement: the content performance quotient</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  193. ]]></content:encoded>
  194. <post-id xmlns="com-wordpress:feed-additions:1">14669</post-id> </item>
  195. <item>
  196. <title>A beginning consultant brings skills, an experienced consultant brings value.</title>
  197. <link>http://www.zeldman.com/2018/02/07/consulting/</link>
  198. <pubDate>Wed, 07 Feb 2018 15:04:26 +0000</pubDate>
  199. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  200. <category><![CDATA[business]]></category>
  201. <category><![CDATA[Career]]></category>
  202. <category><![CDATA[Design]]></category>
  203. <category><![CDATA[development]]></category>
  204.  
  205. <guid isPermaLink="false">http://www.zeldman.com/?p=14654</guid>
  206. <description><![CDATA[<p>A beginning consultant brings skills, an experienced consultant brings value. Early in a good career, you establish that you write the best code on your team, have the deftest touch in UI design, produce more good work more quickly than others. You’re the person who resolves disputes about which typeface was used on an old [&#8230;]</p>
  207. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/02/07/consulting/">A beginning consultant brings skills, an experienced consultant brings value.</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  208. ]]></description>
  209. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>A beginning consultant brings skills, an experienced consultant brings value.</p>
  210. <p>Early in a good career, you establish that you write the best code on your team, have the deftest touch in UI design, produce more good work more quickly than others.</p>
  211. <p>You’re the person who resolves disputes about which typeface was used on an old poster. Or who knows more frameworks, has used more tools. Or who can fix the server when everyone else around you is panicking. Or all the above.</p>
  212. <h3>God is in the details. You sweat them.</h3>
  213. <p>You are incredibly skilled and you work to stay that way. You read design books and blog posts when your friends are out drinking or home watching TV. You keep a list of things to fix on your company’s website, and you make the changes whether anyone instructs you to or not.</p>
  214. <p>Often, you make a site more accessible, or more performant, or easier to understand not only without being asked, but without being thanked or acknowledged. You do good in secret. You quietly make things better. You inspire good colleagues to learn more and work harder. Lazy or less talented colleagues secretly hate you. You’re the tops. You got mad skillz.</p>
  215. <p>But the organization doesn’t treat you like the incredibly motivated, supremely talented, highly intelligent, deeply passionate professional you are.</p>
  216. <p>The organization rewards something different. The organization looks for leadership, not among the most skilled, but among the most strategic.</p>
  217. <h3>The tragedy of great designers and developers</h3>
  218. <p>The tragedy of great designers and developers is when they get promoted to positions of leadership where they can no longer design or develop. And the other tragedy is when they don’t.</p>
  219. <p>You can stay an ace coder, a design whiz, a brilliant copywriter well into your 40s and remain a valuable, employable team member. You will not go hungry. You will not be without work.</p>
  220. <p>(By your 50s, finding jobs becomes tougher no matter how brilliant and experienced you may be, due to capitalism’s preference for hiring younger people and paying them less, but the multidimensional, interlocking problems of agism and economic injustice exceed the scope of this little commentary. Typically the solution to prematurely aging out of the market, even though you have much to contribute, is to go off on your own—hence the plethora of consultants in their late 40s. But here again, merely having skills will not be enough.)</p>
  221. <p>To survive as an independent consultant at any age, and to remain meaningfully employable in digital design, you must bring something different to the table. You must bring value.</p>
  222. <p>You must be able to demonstrate, in every interaction with management, how your thinking will help the organization recruit new members, appeal to a new demographic, better assist its customers, increase its earnings.</p>
  223. <h3>Consulting in a nutshell</h3>
  224. <p>As a professional with skills, you are a rock star to other designers and coders.</p>
  225. <p>As a professional who brings value, you are a star to decision makers.</p>
  226. <p>Both paths are valid—and, truthfully, a great designer, writer, or coder adds incredible value to everything she touches. But the value she adds may not be one management deeply understands. Just as developers understand development, managers understand management.</p>
  227. <p>If you can speak that language—if you can translate the precocious gifts of your early, skills-based career into a seasoned argot of commerce—you can keep working, keep feeding yourself and your family, keep contributing meaningfully to society and your profession.</p>
  228. <p>###</p>
  229. <p id="e146" class="graf graf--p graf-after--figure"><i><a href="https://medium.com/@zeldman/a-beginning-consultant-brings-skills-an-experienced-consultant-brings-value-f781081ff7e9">Also published at Medium</a>.</i></p>
  230. <p id="fcd2" class="graf graf--p graf-after--p graf--trailing"><a class="markup--anchor markup--p-anchor" href="https://studio.zeldman.com/" target="_blank" rel="noopener nofollow noopener nofollow noopener" data-href="https://studio.zeldman.com/"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">studio.zeldman</em></strong></a><em class="markup--em markup--p-em"> is open for business. Follow me </em><a class="markup--anchor markup--p-anchor" href="https://twitter.com/zeldman" target="_blank" rel="nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener noopener noopener noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener nofollow noopener" data-href="https://twitter.com/zeldman"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">@zeldman</em></strong></a><em class="markup--em markup--p-em">.</em></p>
  231. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/02/07/consulting/">A beginning consultant brings skills, an experienced consultant brings value.</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  232. ]]></content:encoded>
  233. <post-id xmlns="com-wordpress:feed-additions:1">14654</post-id> </item>
  234. <item>
  235. <title>Pulled Over (My Glamorous Life)</title>
  236. <link>http://www.zeldman.com/2018/01/09/pulled-glamorous-life/</link>
  237. <pubDate>Tue, 09 Jan 2018 15:36:05 +0000</pubDate>
  238. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  239. <category><![CDATA[Design]]></category>
  240. <category><![CDATA[glamorous]]></category>
  241.  
  242. <guid isPermaLink="false">http://www.zeldman.com/?p=14648</guid>
  243. <description><![CDATA[<p>MOST mornings my daughter Ava and I easily navigate the path across and down Manhattan to her middle school. This morning was not most mornings. There was the bus driver who chose to block 35th Street between 1st and 2nd Avenues. Followed by the congestion of every car on 1st Avenue trying to take 37th [&#8230;]</p>
  244. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/01/09/pulled-glamorous-life/">Pulled Over (My Glamorous Life)</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  245. ]]></description>
  246. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>MOST mornings my daughter Ava and I easily navigate the path across and down Manhattan to her middle school. This morning was not most mornings.</p>
  247. <p><span class="s1">There was the bus driver who chose to block 35th Street between 1st and 2nd Avenues. Followed by the congestion of every car on 1st Avenue trying to take 37th Street instead. And the dead eyes of the bored, white city worker who pulled over every vehicle that did so—because someone at City Hall decided this morning that it’s now illegal to turn onto 37th Street from 1st Ave. </span>Or use the right lane. Or something. The nature of the crime wasn’t clear.</p>
  248. <p class="p1"><span class="s1">The street was filled with cars that had been pulled over, and drivers who had exited their vehicles and were standing around in the cold, awaiting punishment of some kind. Most were people of color. After five minutes, we apologetically paid our cab driver, even though he hadn’t really taken us anywhere, and sprinted across to 2nd Avenue, hoping to beat the late bell of Ava’s school, two miles downtown from and west of us. We had eight minutes to get there.</span></p>
  249. <p class="p1"><span class="s1">“This is a little adventure,” I said to Ava, as we stepped into a fresh cab.</span></p>
  250. <p class="p1"><span class="s1">“Not to the driver,” Ava said sadly, looking back.</span></p>
  251. <p>&nbsp;</p>
  252. <p><a href="https://medium.com/@zeldman/pulled-over-my-glamorous-life-e071bc9ab66f"><em>Also published on Medium</em></a>.</p>
  253. <p><a class="markup--anchor markup--p-anchor" href="https://studio.zeldman.com/" target="_blank" rel="noopener nofollow" data-href="https://studio.zeldman.com/"><em class="markup--em markup--p-em">studio.zeldman</em></a><em class="markup--em markup--p-em"> is open for business. Follow me </em><a class="markup--anchor markup--p-anchor" href="https://twitter.com/zeldman" target="_blank" rel="nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener noopener noopener noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener" data-href="https://twitter.com/zeldman"><em class="markup--em markup--p-em">@zeldman</em></a><em class="markup--em markup--p-em">.</em></p>
  254. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/01/09/pulled-glamorous-life/">Pulled Over (My Glamorous Life)</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  255. ]]></content:encoded>
  256. <post-id xmlns="com-wordpress:feed-additions:1">14648</post-id> </item>
  257. <item>
  258. <title>Look back in anchor tags</title>
  259. <link>http://www.zeldman.com/2018/01/03/look-back-anchor-tags/</link>
  260. <pubDate>Wed, 03 Jan 2018 14:46:07 +0000</pubDate>
  261. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  262. <category><![CDATA[Archiving]]></category>
  263. <category><![CDATA[blogger]]></category>
  264. <category><![CDATA[Blogs and Blogging]]></category>
  265. <category><![CDATA[Web Design]]></category>
  266. <category><![CDATA[Web Design History]]></category>
  267. <category><![CDATA[work]]></category>
  268. <category><![CDATA[writing]]></category>
  269. <category><![CDATA[Zeldman]]></category>
  270. <category><![CDATA[zeldman.com]]></category>
  271.  
  272. <guid isPermaLink="false">http://www.zeldman.com/?p=14633</guid>
  273. <description><![CDATA[<p>NEW YEARS bring thoughts of old years, and, to a designer and veteran “blogger,” thoughts of old work. My personal site, begun in 1994, was many things: an interview zine (my first web client, Donald Buckley, named it: 15 Minutes), a newfangled GIF animation playground, a freeware icon factory, an Advertising Graveyard, and more. But eventually, before it was forgotten entirely, it became [&#8230;]</p>
  274. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/01/03/look-back-anchor-tags/">Look back in anchor tags</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  275. ]]></description>
  276. <content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-14634" src="https://i0.wp.com/www.zeldman.com/wp-content/Google-ChromeScreenSnapz001.png?resize=640%2C312" alt="" width="640" height="312" srcset="https://i0.wp.com/www.zeldman.com/wp-content/Google-ChromeScreenSnapz001.png?w=1232 1232w, https://i0.wp.com/www.zeldman.com/wp-content/Google-ChromeScreenSnapz001.png?resize=100%2C49 100w, https://i0.wp.com/www.zeldman.com/wp-content/Google-ChromeScreenSnapz001.png?resize=768%2C374 768w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  277. <p id="51ec" class="graf graf--p graf-after--figure">NEW YEARS bring thoughts of old years, and, to a designer and veteran “blogger,” thoughts of old work. My <a class="markup--anchor markup--p-anchor" href="https://www.zeldman.com/" target="_blank" rel="nofollow noopener" data-href="https://www.zeldman.com/">personal site</a>, begun in 1994, was many things: an <a class="markup--anchor markup--p-anchor" href="https://www.zeldman.com/15/" target="_blank" rel="nofollow noopener" data-href="https://www.zeldman.com/15/">interview zine</a> (my first web client, Donald Buckley, named it: <em class="markup--em markup--p-em">15 Minutes</em>), a newfangled <a class="markup--anchor markup--p-anchor" href="https://www.zeldman.com/endless1.html" target="_blank" rel="nofollow noopener" data-href="https://www.zeldman.com/endless1.html">GIF animation playground</a>, a freeware <a class="markup--anchor markup--p-anchor" href="https://www.zeldman.com/icon1.html" target="_blank" rel="nofollow noopener" data-href="https://www.zeldman.com/icon1.html">icon factory</a>, an <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/adgraveyard/2.html" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/adgraveyard/2.html">Advertising Graveyard</a>, and <a class="markup--anchor markup--p-anchor" href="https://www.zeldman.com/about/" target="_blank" rel="nofollow noopener" data-href="https://www.zeldman.com/about/">more</a>. But eventually, before it was forgotten entirely, it became best known as a blog.</p>
  278. <p id="c658" class="graf graf--p graf-after--p">Inspired by Dori Smith’s recent <a class="markup--anchor markup--p-anchor" href="https://www.facebook.com/dorismith/posts/10156043415641458?pnref=story" target="_blank" rel="nofollow noopener" data-href="https://www.facebook.com/dorismith/posts/10156043415641458?pnref=story">Facebook post about old-school blogging</a> and the possibility of a “20th Anniversary of Blogging” unconference/relaxacon, I thought it might be fun to poke through the old blog a bit with you, gentle reader. My blog began in 1995, but, for now, you can only page through the entries as far back as August, 1997, as I seem to have neglected to build “previous” page links before that, and may also have overwritten my earliest entries (not realizing, at the time, that you and I might ever want to look back at any of this).</p>
  279. <p id="7fa4" class="graf graf--p graf-after--p">Below, I begin the retrospective in 2004 and work backwards to 1997. (After 2004, I stopped hand-coding each entry and began using WordPress, resulting in <a class="markup--anchor markup--p-anchor" href="https://www.zeldman.com/2017/11/24/glamorous-life-thanksgiving/" target="_blank" rel="nofollow noopener" data-href="https://www.zeldman.com/2017/11/24/glamorous-life-thanksgiving/">this sort of thing</a>. Also after 2004, I stopped redesigning the site every few months, partly, but not exclusively, because I got busier designing other people’s sites. I also stopped redesigning the site every few months because I had become more strategic about design—more interested in design as problem solving, less as making pretty pages. Say, remember when we designed “pages”? But I digress.)</p>
  280. <p id="a4fd" class="graf graf--p graf-after--p">Here, for your pleasure, are some pages from the past:</p>
  281. <p>&nbsp;</p>
  282. <p id="a6cb" class="graf graf--p graf-after--p">Silence and Noise — “Now that some of us have helped bring standards into the mainstream, wouldn’t it be best to keep them there?” — 12 August 2004 (the iconic green design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/0804b.shtml" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/0804b.shtml">http://www.zeldman.com/daily/0804b.shtml</a></p>
  283. <p id="3497" class="graf graf--p graf-after--p">Typical blog entries — on web performance and “the new Samaritans” (designers who recode other people’s sites to be standards-compliant) — 28 July 2004 (the iconic green design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/0704e.shtml" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/0704e.shtml">http://www.zeldman.com/daily/0704e.shtml</a></p>
  284. <p id="c92f" class="graf graf--p graf-after--p">CSS Validator is Broken — 5 February 2004 (the creme design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/0204b.shtml" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/0204b.shtml">http://www.zeldman.com/daily/0204b.shtml</a></p>
  285. <p id="742b" class="graf graf--p graf-after--p">Don’t Design on Spec — 26 January 2004 (the creme design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/0104h.shtml" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/0104h.shtml">http://www.zeldman.com/daily/0104h.shtml</a></p>
  286. <p id="09c9" class="graf graf--p graf-after--p">Chip Kidd &amp; Alfred Hitchcock — 20 January 2004 (the creme design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/0104f.shtml" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/0104f.shtml">http://www.zeldman.com/daily/0104f.shtml</a></p>
  287. <p id="0d74" class="graf graf--p graf-after--p">Tears for Istanbul — 26 November 2003 (rooster design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/1103a.shtml" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/1103a.shtml">http://www.zeldman.com/daily/1103a.shtml</a></p>
  288. <p id="8f75" class="graf graf--p graf-after--p">Ladies and gentlemen, A List Apart 3.0–22 October 2003 (rooster design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/1003a.shtml" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/1003a.shtml">http://www.zeldman.com/daily/1003a.shtml</a></p>
  289. <p id="7752" class="graf graf--p graf--startsWithDoubleQuote graf-after--p">“Jeffrey Zeldman is good enough for me.” 2 November 2002 (teal swap design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/1002d.shtml" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/1002d.shtml">http://www.zeldman.com/daily/1002d.shtml</a></p>
  290. <p id="1f00" class="graf graf--p graf-after--p">Typical blog entries — 16 October2002 (the iconic red design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/1002a.html" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/1002a.html">http://www.zeldman.com/daily/1002a.html</a></p>
  291. <p id="fb6a" class="graf graf--p graf-after--p">Typical blog entries — super secret Charlotte Gray style guide (now offline) — 26 August 2002 (HTML fist, red design) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/0802c.html" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/0802c.html">http://www.zeldman.com/daily/0802c.html</a></p>
  292. <p id="c92b" class="graf graf--p graf-after--p">Typical blog entries — in the middle of writing Designing With Web Standards, then titled Forward Compatibility — 30 July 2002 (the iconic red design) <a href="http://www.zeldman.com/daily/0802a.html">http://www.zeldman.com/daily/0802a.html</a></p>
  293. <p id="e9c4" class="graf graf--p graf--startsWithDoubleQuote graf-after--p">“The heartbreak of sizing small text with ems” — 21 May 2002 <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/0502c.html" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/0502c.html">http://www.zeldman.com/daily/0502c.html</a></p>
  294. <p id="04f3" class="graf graf--p graf-after--p">Typical blog entries, 25 January 2002 (the iconic red design — liquid variant) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/daily/0102d.html" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/daily/0102d.html">http://www.zeldman.com/daily/0102d.html</a></p>
  295. <p id="611c" class="graf graf--p graf-after--p">Daily Report 31 August 1999, liquid orange design (unfinished) <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/com0899.html" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/com0899.html">http://www.zeldman.com/com0899.html</a></p>
  296. <p id="2328" class="graf graf--p graf-after--p">Daily Report 14 October 1998, liquid orange design (unfinished) with Web Standards Project banner ad at the top of the page <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/com1098.html" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/com1098.html">http://www.zeldman.com/com1098.html</a></p>
  297. <p id="6f8b" class="graf graf--p graf--startsWithDoubleQuote graf-after--p">“Previous Reports” 31 August 1997, ugly yellow bacon strip style, <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/came2.html" target="_blank" rel="nofollow noopener" data-href="http://www.zeldman.com/came2.html">http://www.zeldman.com/came2.html</a></p>
  298. <p>&nbsp;</p>
  299. <p><em><a href="https://medium.com/@zeldman/look-back-in-anchor-tags-31fd673a8b65">Also published in Medium</a>.</em></p>
  300. <p id="9024" class="graf graf--p graf-after--p graf--trailing"><a class="markup--anchor markup--p-anchor" href="https://studio.zeldman.com/" target="_blank" rel="noopener nofollow" data-href="https://studio.zeldman.com/"><em class="markup--em markup--p-em">studio.zeldman</em></a><em class="markup--em markup--p-em"> is open for business. Follow me </em><a class="markup--anchor markup--p-anchor" href="https://twitter.com/zeldman" target="_blank" rel="nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener noopener noopener noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener" data-href="https://twitter.com/zeldman"><em class="markup--em markup--p-em">@zeldman</em></a><em class="markup--em markup--p-em">.</em></p>
  301. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2018/01/03/look-back-anchor-tags/">Look back in anchor tags</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  302. ]]></content:encoded>
  303. <post-id xmlns="com-wordpress:feed-additions:1">14633</post-id> </item>
  304. <item>
  305. <title>My Glamorous Life: The True Story of My Thanksgiving</title>
  306. <link>http://www.zeldman.com/2017/11/24/glamorous-life-thanksgiving/</link>
  307. <pubDate>Fri, 24 Nov 2017 18:59:31 +0000</pubDate>
  308. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  309. <category><![CDATA[glamorous]]></category>
  310.  
  311. <guid isPermaLink="false">http://www.zeldman.com/?p=14623</guid>
  312. <description><![CDATA[<p>TRAVELED 1400 miles to end up in the same place. Flew my daughter Ava from NYC Laguardia to Chicago Midway in the morning so she could spend Thanksgiving with her mom. To expedite boarding, Southwest Airlines does not assign seats, and there is only one class—Coach. The sooner you board, the better your chance of [&#8230;]</p>
  313. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/11/24/glamorous-life-thanksgiving/">My Glamorous Life: The True Story of My Thanksgiving</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  314. ]]></description>
  315. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>TRAVELED 1400 miles to end up in the same place. </p>
  316. <p>Flew my daughter Ava from NYC Laguardia to Chicago Midway in the morning so she could spend Thanksgiving with her mom. To expedite boarding, Southwest Airlines does not assign seats, and there is only one class—Coach. The sooner you board, the better your chance of securing a decent seat; the more you pay for your ticket, the better your boarding position. </p>
  317. <p>Additionally, line position depends on how quickly you check in online the day before your flight. Check in the first moment you can, and you’ll be first in line. Check in a minute later, and someone else may be in front of you. Hours later, you’re at the end of the line. </p>
  318. <p>I love a pointless challenge. You can bet I’d set alarms to go off 24 hours before our flight so I could be the first to check in. And you know Ava and I were at the front of the line, so we could sit in the front row. I love an aisle seat, but I sat in the middle so Ava could sit by the window. It’s the little things that give you the chance to show someone how much you love them.</p>
  319. <p>Southwest got us to Chicago 40 minutes early. Ava’s mom kindly met us at the gate, and off they went. I turned around to go home. My flight back to Laguardia was not scheduled to leave for another four and a half hours, but Southwest let me switch to an earlier flight with no penalty. There was just enough time to suck down some rice and beans at a fast food burrito stand in the airport’s food court—my first meal of the day—and dash to the gate in time for boarding. I flew back to New York on the same jet I’d flown in on, with the same crew, and sat in the same row: aisle seat this time.</p>
  320. <p>Back home by 3:00, I fed the cats, watched “Jaws” on my iPad (somehow I’d never seen it), and fell asleep during the climactic fight to the death that ends the picture. Hours later, I woke up, confused, and made myself the traditional feast: leftover tofu on quinoa. </p>
  321. <p>And that’s the true story of my Thanksgiving.</p>
  322. <p>
  323. <em>Follow me <a href="https://twitter.com/zeldman">@zeldman</a>. A version of this article appears on <a href="https://medium.com/@zeldman/my-glamorous-life-the-true-story-of-my-thanksgiving-a61883261254">Medium</a>.</em></p>
  324. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/11/24/glamorous-life-thanksgiving/">My Glamorous Life: The True Story of My Thanksgiving</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  325. ]]></content:encoded>
  326. <post-id xmlns="com-wordpress:feed-additions:1">14623</post-id> </item>
  327. <item>
  328. <title>Faux Grid Tracks by Eric Meyer</title>
  329. <link>http://www.zeldman.com/2017/11/21/faux-grid-tracks-eric-meyer/</link>
  330. <pubDate>Tue, 21 Nov 2017 15:15:45 +0000</pubDate>
  331. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  332. <category><![CDATA[A List Apart]]></category>
  333.  
  334. <guid isPermaLink="false">http://www.zeldman.com/?p=14618</guid>
  335. <description><![CDATA[<p>JOIN An Event Apart’s Eric Meyer on a journey through the inner workings of CSS Grid as he tests various techniques to build a tic-tac-toe board filled with content. Hearkening back to the early days of CSS and A List Apart, these playful hacks rekindle a spirit of experimentation. Faux Grid Tracks by Eric Meyer [&#8230;]</p>
  336. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/11/21/faux-grid-tracks-eric-meyer/">Faux Grid Tracks by Eric Meyer</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  337. ]]></description>
  338. <content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-14619" src="https://i0.wp.com/www.zeldman.com/wp-content/faux-grid-illo_960_454_81.jpg?resize=640%2C303" alt="" width="640" height="303" srcset="https://i0.wp.com/www.zeldman.com/wp-content/faux-grid-illo_960_454_81.jpg?w=960 960w, https://i0.wp.com/www.zeldman.com/wp-content/faux-grid-illo_960_454_81.jpg?resize=100%2C47 100w, https://i0.wp.com/www.zeldman.com/wp-content/faux-grid-illo_960_454_81.jpg?resize=768%2C363 768w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  339. <p>JOIN An Event Apart’s Eric Meyer on a journey through the inner workings of CSS Grid as he tests various techniques to build a tic-tac-toe board filled with content. Hearkening back to the early days of CSS and A List Apart, these playful hacks rekindle a spirit of experimentation.</p>
  340. <p><a href="https://alistapart.com/article/faux-grid-tracks" target="_blank" rel="noopener nofollow" data-ft="{&quot;tn&quot;:&quot;-U&quot;}" data-lynx-mode="async" data-lynx-uri="https://l.facebook.com/l.php?u=https%3A%2F%2Falistapart.com%2Farticle%2Ffaux-grid-tracks&amp;h=ATMe-T3MOR4d6TWBYp6uWyWxWyWuQnestVUkgK82FgPe2zl1n5f9gmxio3T0iY3N342sMz_VncPVdXtQmHUlLC8ZlfAu21x_rZWU9MvyxowGQVso-ObGf5tyZVfJLTNv9q9qTSluNfeQJpMUweZb9cCajAGRou3gmFZBRXtU1cDQUA5-dDytaGcPEJWnr9o74WpdmBPqOR6GIK3Tf03vyeW2jqk693iSaVCvoVNzMAMFG2iouIuELwpY8bWfijR-p_LCzp6tLEcaejWOcKTTxT5PWA52Z2Fj-zGtJHoHczY">Faux Grid Tracks by Eric Meyer</a></p>
  341. <p>&nbsp;</p>
  342. <p><em>Illustration by Dougal MacPherson</em></p>
  343. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/11/21/faux-grid-tracks-eric-meyer/">Faux Grid Tracks by Eric Meyer</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  344. ]]></content:encoded>
  345. <post-id xmlns="com-wordpress:feed-additions:1">14618</post-id> </item>
  346. <item>
  347. <title>A Dao of Responsive Liquid</title>
  348. <link>http://www.zeldman.com/2017/11/19/dao-responsive-liquid/</link>
  349. <pubDate>Sun, 19 Nov 2017 18:18:53 +0000</pubDate>
  350. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  351. <category><![CDATA[Web Design History]]></category>
  352. <category><![CDATA[Web Standards]]></category>
  353. <category><![CDATA[Websites]]></category>
  354.  
  355. <guid isPermaLink="false">http://www.zeldman.com/?p=14596</guid>
  356. <description><![CDATA[<p>A liquid page will resize to fit whatever size browser window (within reason) that the user has available. … the real goal in building a website is to provide the user with a seamless interface to information. The site should not intrude on the user’s thought processes, but should gently guide them to their desired destination. [&#8230;]</p>
  357. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/11/19/dao-responsive-liquid/">A Dao of Responsive Liquid</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  358. ]]></description>
  359. <content:encoded><![CDATA[<p><img class="softinset" src="https://i0.wp.com/www.zeldman.com/wp-content/1_Gy9ixjdJTWI39SncGQMZAQ.png?w=640" alt="" data-recalc-dims="1" /></p>
  360. <blockquote><p>A liquid page will resize to fit whatever size browser window (within reason) that the user has available. … the real goal in building a website is to provide the user with a seamless interface to information. The site should not intrude on the user’s thought processes, but should gently guide them to their desired destination. If a site doesn’t look right because it doesn’t fit the user’s browser window, then the design has become intrusive to the user. — Glenn Davis, <a class="markup--anchor markup--pullquote-anchor" href="http://www.zeldman.com/15/davisf.html" target="_blank" rel="noopener nofollow" data-href="http://www.zeldman.com/15/davisf.html"><strong class="markup--strong markup--pullquote-strong">quoted in 15 Minutes, sometime in 1997</strong></a>.</p></blockquote>
  361. <p id="ea11" class="graf graf--p graf-after--pullquote">TWO DECADES before <a class="markup--anchor markup--p-anchor" href="https://alistapart.com/article/responsive-web-design" target="_blank" rel="noopener nofollow" data-href="https://alistapart.com/article/responsive-web-design"><strong class="markup--strong markup--p-strong">Responsive Web Design</strong></a>, we dipped our toes in <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/15/davisf.html" target="_blank" rel="noopener nofollow" data-href="http://www.zeldman.com/15/davisf.html"><strong class="markup--strong markup--p-strong">Liquid Layout</strong></a> — a similar but necessarily less refined concept. Glenn Davis of Project Cool fame coined the phrase in 1995 or 1996. (<a class="markup--anchor markup--p-anchor" href="https://web.archive.org/web/20040701041831/http://www.digital-web.com/articles/liquid_web_design/" target="_blank" rel="noopener nofollow" data-href="https://web.archive.org/web/20040701041831/http://www.digital-web.com/articles/liquid_web_design/"><strong class="markup--strong markup--p-strong">Glenn also came up with</strong></a>“Ice” to describe fixed-width layouts, and “Jello” for layouts that combined some fixed with some flexible elements.)</p>
  362. <p id="9310" class="graf graf--p graf-after--p">Liquid Layout was mainly what <a href="http://www.johnfallsopp.com/"><strong>John Allsopp</strong></a> had in mind when he wrote <a class="markup--anchor markup--p-anchor" href="https://alistapart.com/article/dao" target="_blank" rel="nofollow noopener" data-href="https://alistapart.com/article/dao"><strong class="markup--strong markup--p-strong">A Dao of Web Design</strong></a> for <em class="markup--em markup--p-em">A List Apart</em> (quite possibly the most influential article we ever published). The most famous paragraph in that famous article explains…</p>
  363. <blockquote><p>The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”</p></blockquote>
  364. <h4>Everything new is old</h4>
  365. <p id="23cb" class="graf graf--p graf-after--h3">Modern designers look back at Allsopp’s article and think John must have been a time traveler who had seen the future of responsive design and mobile devices. In fact, though, John was simply a highly skilled (and extremely articulate) mainstream developer. As such, he was familiar with Liquid Design and frequently used it in his work, along with other ideas mentioned in “Dao,” such as not forcing users to see a particular type size or typeface. To a good developer in those days, what mattered was making something that worked for everyone. (That should <em class="markup--em markup--p-em">still</em> be what good developers care most about, right?)</p>
  366. <p id="0459" class="graf graf--p graf-after--p">Liquid design was part of a “works for everyone” approach to web design, but it had limitations. For one thing, breakpoints hadn’t been invented. CSS layout was in its infancy, used by almost no one, except in experimental work. The ability to separate content and behavior from presentation was nonexistent, unless you limited “presentation” to setting type in a single column, letting the user override the type setting, and letting the column reshape itself to fit any viewport.</p>
  367. <p id="3813" class="graf graf--p graf-after--p">With so few controls available, Liquid design tended to become unusable in certain settings, and was almost always ugly.</p>
  368. <h4>Liquid design was Responsive design’s rough draft</h4>
  369. <p>Liquid design was immediately popular with developers when they were given permission to just make stuff — i.e. when they weren’t constrained by overly rigid Photoshop layouts. Designers almost never used Liquid design because the layouts moved so quickly into ugliness and unusability — too wide to read, or too narrow, or with overlapping columns in early CSS layouts. Designers also disdained Liquid layouts because most of us see our job as imposing brilliant order on ugly chaos, and fixed proportions always seemed to be part of that order.</p>
  370. <p><a href="https://i0.wp.com/www.zeldman.com/wp-content/Google-Chromesnaps003.png"><img src="https://i0.wp.com/www.zeldman.com/wp-content/Google-Chromesnaps003.png?w=640" alt="The Web Standards Project – a liquid layout as seen on a wide computer screen." data-recalc-dims="1" /></a></p>
  371. <p><em>Fig 1. The Web Standards Project: a liquid layout as seen on a wide computer screen. Designed by Andy Clarke in the early 2000s.</em></p>
  372. <p>&nbsp;</p>
  373. <p><a href="https://i0.wp.com/www.zeldman.com/wp-content/Google-Chromesnaps001.png"><img class="softinset" src="https://i0.wp.com/www.zeldman.com/wp-content/Google-Chromesnaps001.png?resize=421%2C1369" alt="" width="421" height="1369" data-recalc-dims="1" /></a></p>
  374. <p><em>Fig 2. The Web Standards Project: a liquid layout as seen on a narrow computer screen. On the narrow screen, type overlaps and the page becomes unusable.</em></p>
  375. <p>&nbsp;</p>
  376. <p id="03de" class="graf graf--p graf-after--figure">Ugly on one side. Unusable on the other. It took a special breed of designer to forge ahead with Liquid Layout anyway.</p>
  377. <p id="a688" class="graf graf--p graf-after--p">Were it were not for the iPhone and the phones and tablets that rose quickly in its wake, the W3C would likely not have invented breakpoints. And without breakpoints, there could be no Responsive Web Design. And without Responsive Web Design, created by <a class="markup--anchor markup--p-anchor" href="https://ethanmarcotte.com/" target="_blank" rel="nofollow noopener" data-href="https://ethanmarcotte.com/"><strong class="markup--strong markup--p-strong">a visually gifted designer</strong></a> and with tools to satisfy his peers, the idea that drove Liquid design back in the 1990s would not, at long last, have caught on.</p>
  378. <p id="8577" class="graf graf--p graf-after--p">It’s easy to view our current design thinking as more evolved than what we practiced in the past. And in some ways, it is. But if you read between the lines, it’s fair to say that our thinking was always advanced. It’s only now that our tools are beginning to catch up.</p>
  379. <h4>Read more about Liquid and Responsive Web Design</h4>
  380. <ul>
  381. <li><a href="https://alistapart.com/article/dao">A Dao of Web Design</a> by John Allsopp, <em>A List Apart</em>, April 2000</li>
  382. <li><a href="https://web.archive.org/web/20040701041831/http://www.digital-web.com/articles/liquid_web_design/ ">Liquid Web Design: Build it right and it will work no matter what the container</a>, by Nick Finck, <em class="markup--em markup--li-em">Digital Web</em>, August 1999</li>
  383. <li><a href="https://web.archive.org/web/20040701041831/http://www.digital-web.com/articles/liquid_web_design/">What is Liquid Design?</a> By Nick Wilson, November 2002</li>
  384. <li><a href="http://trentwalton.com/2013/01/07/flexible-foundations/">Flexible Foundations</a> by Trent Walton, 2013</li>
  385. </ul>
  386. <p>&nbsp;</p>
  387. <p>☞ <em class="markup--em markup--p-em">Illustration by </em><a class="markup--anchor markup--p-anchor" href="https://twitter.com/pseudoroom/" target="_blank" rel="nofollow noopener" data-href="https://twitter.com/pseudoroom/"><em class="markup--em markup--p-em">Justin Dauer</em></a><em class="markup--em markup--p-em">. Follow me </em><a class="markup--anchor markup--p-anchor" href="https://twitter.com/zeldman" target="_blank" rel="nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener nofollow noopener nofollow noopener nofollow noopener nofollow noopener noopener noopener nofollow noopener noopener nofollow noopener" data-href="https://twitter.com/zeldman"><em class="markup--em markup--p-em">@zeldman</em></a><em class="markup--em markup--p-em">. A version of this article appears on <a href="https://medium.com/@zeldman/a-dao-of-responsive-liquid-d49c74fc87d1">Medium</a>. The 11th Annual <a href="http://bluebeanieday.tumblr.com">Blue Beanie Day</a> in support of web standards takes place November 30 on the internet.</em></p>
  388. <p>&nbsp;</p>
  389. <p><span style="border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font-style: normal; font-variant-caps: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 20px; font-family: 'Helvetica Neue', Helvetica, sans-serif; color: #ffffff; background-image: url(data:image/svg+xml; base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciighlawdodd0imzbwecigd2lkdgg9ijmwchgiihzpzxdcb3g9ii0xic0xidmxidmxij48zz48cgf0acbkpsjnmjkundq5lde0ljy2mibdmjkundq5ldiyljcymiaymi44njgsmjkumju2ide0ljc1ldi5lji1nibdni42mzismjkumju2idaumduxldiyljcymiawlja1mswxnc42njigqzaumduxldyunjaxidyunjmyldaumdy3ide0ljc1ldaumdy3iemymi44njgsmc4wnjcgmjkundq5ldyunjaxidi5ljq0oswxnc42njiiigzpbgw9iinmzmyiihn0cm9rzt0ii2zmziigc3ryb2tllxdpzhropsixij48l3bhdgg+phbhdgggzd0itte0ljczmywxljy4nibdny41mtysms42odygms42njusny40otugms42njusmtqunjyyiemxljy2nswymc4xntkgns4xmdksmjquodu0idkuotcsmjyunzq0iem5ljg1niwyns43mtggos43ntmsmjqumtqzidewljaxniwymy4wmjigqzewlji1mywymi4wmsaxms41ndgsmtyuntcyidexlju0ocwxni41nzigqzexlju0ocwxni41nzigmteumtu3lde1ljc5nsaxms4xntcsmtqunjq2iemxms4xntcsmtiuodqyideyljixmswxms40otugmtmuntiyldexljq5nsbdmtqunjm3ldexljq5nsaxns4xnzusmtiumzi2ide1lje3nswxmy4zmjmgqze1lje3nswxnc40mzygmtqundyylde2ljegmtqumdkzlde3ljy0mybdmtmunzg1lde4ljkznsaxnc43ndusmtkuotg4ide2ljayocwxos45odggqze4ljm1mswxos45odggmjaumtm2lde3lju1niaymc4xmzysmtqumdq2iemymc4xmzysmtauotm5ide3ljg4ocw4ljc2nyaxnc42nzgsoc43njcgqzewljk1osw4ljc2nya4ljc3nywxms41mzygoc43nzcsmtqumzk4iem4ljc3nywxns41mtmgos4ymswxni43mdkgos43ndksmtcumzu5iem5ljg1niwxny40odggos44nzismtcunia5ljg0lde3ljczmsbdos43ndesmtgumtqxidkuntismtkumdizidkundc3lde5ljiwmybdos40miwxos40nca5lji4ocwxos40otegos4wncwxos4znzygqzcunda4lde4ljyymia2ljm4nywxni4yntigni4zodcsmtqumzq5iem2ljm4nywxmc4yntygos4zodmsni40otcgmtuumdiyldyundk3iemxos41ntusni40otcgmjmumdc4ldkunza1idizlja3ocwxmy45otegqzizlja3ocwxoc40njmgmjaumjm5ldiylja2miaxni4yotcsmjiumdyyiemxnc45nzmsmjiumdyyidezljcyocwyms4znzkgmtmumzayldiwlju3mibdmtmumzayldiwlju3miaxmi42ndcsmjmumdugmtiundg4ldizljy1nybdmtiumtkzldi0ljc4ncaxms4zotysmjyumtk2idewljg2mywyny4wntggqzeylja4niwyny40mzqgmtmumzg2ldi3ljyznyaxnc43mzmsmjcunjm3iemyms45nswyny42mzcgmjcuodaxldixljgyocayny44mdesmtqunjyyiemyny44mdesny40otugmjeuotusms42odygmtqunzmzldeunjg2iibmawxspsijymqwodfjij48l3bhdgg+pc9npjwvc3znpg==); background-size: 14px 14px; background-color: #bd081c; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; background-position: 3px 50%; background-repeat: no-repeat no-repeat;">Save</span><span style="border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font-style: normal; font-variant-caps: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 20px; font-family: 'Helvetica Neue', Helvetica, sans-serif; color: #ffffff; background-image: url(data:image/svg+xml; base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciighlawdodd0imzbwecigd2lkdgg9ijmwchgiihzpzxdcb3g9ii0xic0xidmxidmxij48zz48cgf0acbkpsjnmjkundq5lde0ljy2mibdmjkundq5ldiyljcymiaymi44njgsmjkumju2ide0ljc1ldi5lji1nibdni42mzismjkumju2idaumduxldiyljcymiawlja1mswxnc42njigqzaumduxldyunjaxidyunjmyldaumdy3ide0ljc1ldaumdy3iemymi44njgsmc4wnjcgmjkundq5ldyunjaxidi5ljq0oswxnc42njiiigzpbgw9iinmzmyiihn0cm9rzt0ii2zmziigc3ryb2tllxdpzhropsixij48l3bhdgg+phbhdgggzd0itte0ljczmywxljy4nibdny41mtysms42odygms42njusny40otugms42njusmtqunjyyiemxljy2nswymc4xntkgns4xmdksmjquodu0idkuotcsmjyunzq0iem5ljg1niwyns43mtggos43ntmsmjqumtqzidewljaxniwymy4wmjigqzewlji1mywymi4wmsaxms41ndgsmtyuntcyidexlju0ocwxni41nzigqzexlju0ocwxni41nzigmteumtu3lde1ljc5nsaxms4xntcsmtqunjq2iemxms4xntcsmtiuodqyideyljixmswxms40otugmtmuntiyldexljq5nsbdmtqunjm3ldexljq5nsaxns4xnzusmtiumzi2ide1lje3nswxmy4zmjmgqze1lje3nswxnc40mzygmtqundyylde2ljegmtqumdkzlde3ljy0mybdmtmunzg1lde4ljkznsaxnc43ndusmtkuotg4ide2ljayocwxos45odggqze4ljm1mswxos45odggmjaumtm2lde3lju1niaymc4xmzysmtqumdq2iemymc4xmzysmtauotm5ide3ljg4ocw4ljc2nyaxnc42nzgsoc43njcgqzewljk1osw4ljc2nya4ljc3nywxms41mzygoc43nzcsmtqumzk4iem4ljc3nywxns41mtmgos4ymswxni43mdkgos43ndksmtcumzu5iem5ljg1niwxny40odggos44nzismtcunia5ljg0lde3ljczmsbdos43ndesmtgumtqxidkuntismtkumdizidkundc3lde5ljiwmybdos40miwxos40nca5lji4ocwxos40otegos4wncwxos4znzygqzcunda4lde4ljyymia2ljm4nywxni4yntigni4zodcsmtqumzq5iem2ljm4nywxmc4yntygos4zodmsni40otcgmtuumdiyldyundk3iemxos41ntusni40otcgmjmumdc4ldkunza1idizlja3ocwxmy45otegqzizlja3ocwxoc40njmgmjaumjm5ldiylja2miaxni4yotcsmjiumdyyiemxnc45nzmsmjiumdyyidezljcyocwyms4znzkgmtmumzayldiwlju3mibdmtmumzayldiwlju3miaxmi42ndcsmjmumdugmtiundg4ldizljy1nybdmtiumtkzldi0ljc4ncaxms4zotysmjyumtk2idewljg2mywyny4wntggqzeylja4niwyny40mzqgmtmumzg2ldi3ljyznyaxnc43mzmsmjcunjm3iemyms45nswyny42mzcgmjcuodaxldixljgyocayny44mdesmtqunjyyiemyny44mdesny40otugmjeuotusms42odygmtqunzmzldeunjg2iibmawxspsijymqwodfjij48l3bhdgg+pc9npjwvc3znpg==); background-size: 14px 14px; background-color: #bd081c; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; background-position: 3px 50%; background-repeat: no-repeat no-repeat;">Save</span></p>
  390. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/11/19/dao-responsive-liquid/">A Dao of Responsive Liquid</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  391. ]]></content:encoded>
  392. <post-id xmlns="com-wordpress:feed-additions:1">14596</post-id> </item>
  393. <item>
  394. <title>Advice for designers</title>
  395. <link>http://www.zeldman.com/2017/11/06/advice-for-designers/</link>
  396. <pubDate>Mon, 06 Nov 2017 14:17:10 +0000</pubDate>
  397. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  398. <category><![CDATA[Design]]></category>
  399.  
  400. <guid isPermaLink="false">http://www.zeldman.com/?p=14594</guid>
  401. <description><![CDATA[<p>Start by asking questions. Sketch, share your sketches, ask more questions. Don’t be precious with your work. Don’t hurry to finish.</p>
  402. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/11/06/advice-for-designers/">Advice for designers</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  403. ]]></description>
  404. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>Start by asking questions. Sketch, share your sketches, ask more questions. Don’t be precious with your work. Don’t hurry to finish.</p>
  405. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/11/06/advice-for-designers/">Advice for designers</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  406. ]]></content:encoded>
  407. <post-id xmlns="com-wordpress:feed-additions:1">14594</post-id> </item>
  408. <item>
  409. <title>Why don’t nonprofit sites convert?</title>
  410. <link>http://www.zeldman.com/2017/09/18/dont-nonprofit-sites-convert/</link>
  411. <pubDate>Mon, 18 Sep 2017 19:08:57 +0000</pubDate>
  412. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  413. <category><![CDATA[Best practices]]></category>
  414. <category><![CDATA[business]]></category>
  415. <category><![CDATA[Design]]></category>
  416. <category><![CDATA[Usability]]></category>
  417. <category><![CDATA[User Experience]]></category>
  418. <category><![CDATA[UX]]></category>
  419.  
  420. <guid isPermaLink="false">http://www.zeldman.com/?p=14588</guid>
  421. <description><![CDATA[<p>Living in New York and working in media, I talk to nonprofit organizations a lot. Big or small, they all say the same. No matter how much work they put into their apps and websites, they just don’t get enough new members. No matter how many expensive redesigns they undertake, they still don’t convert. Why [&#8230;]</p>
  422. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/09/18/dont-nonprofit-sites-convert/">Why don’t nonprofit sites convert?</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  423. ]]></description>
  424. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>Living in New York and working in media, I talk to nonprofit organizations <em>a lot</em>. Big or small, they all say the same. No matter how much work they put into their apps and websites, they just don’t get enough new members. No matter how many expensive redesigns they undertake, they still don’t convert. Why is this?</p>
  425. <p>Generally, it’s the same reason any site with a great product doesn’t convert: the organization spends too much time and effort on the pages and sections that matter to the organization, and too little on the interactions that matter to the member. (“Member” is <em>NGOese</em> for customer.)</p>
  426. <p>Of course there are sites that don’t convert because they have a crappy product. Or an inappropriately priced product. Or because their content attracts people who are never going to be their customers, and gets missed by people who might want what they’re selling. Or because their content attracts nobody. Failure has a thousand fathers, and most businesses fail, so the fact that a website doesn’t convert could mean almost anything. (To know what it actually means, you need data, and you need to watch users interact with it.)</p>
  427. <p>But with nonprofit sites, the product is almost always great, and the person visiting is almost always interested. So what goes wrong?</p>
  428. <h3>Never mind the user, here’s the About page</h3>
  429. <p>What goes wrong is that nonprofit stakeholders are so passionate about their mission—a passion that only deepens, the longer they work there—that they design an experience which reflects their passion for the mission, instead of one which maps to a member’s mental model. </p>
  430. <p>NGOs lavish attention on their About page and mission statement and forget to work on their members’ immediate, transactional needs. And this is true even for those members who are as passionate about the cause, in their own way, as the stakeholders are in theirs. In the wake of a hurricane, a passionate member thinks of your site in hopes of donating food or giving blood. But nothing on the site calls out to that member and addresses her needs. All she sees are menus, headlines, and buttons trying to lead her to what matters to the organization — namely, the things it says about itself.</p>
  431. <h3>How to satisfy the user and convert at the same time</h3>
  432. <p>First, decide what one single action you, as the organization, want the user to perform. Should they sign up for your mailing list? Make a donation? Keep it singular, and make it simple. One form field to fill out is better than two; two is better than four.</p>
  433. <p>Next, put yourself in the member’s shoes. What does that member wish to achieve on your website? Have you created transactions and content that allow her to do what she came to do? Have you designed and written menus, links, and headlines that help her find the content that matters to her? Forget the organization, for now. Pretend the only thing that matters is what the user wants. (Because, ultimately, it is.)</p>
  434. <p>Do these things, and weave your singular, simple conversion opportunity into each screen sequence with which your user interacts. To optimize your chance of success, <strong>place the conversion opportunity at the very point where the user successfully finishes transacting the business that mattered to her</strong>. Not before (where it is only a distraction). Not in another part of the site (which she has no interest in visiting). She’s a lot likelier to sign up for your mailing list after you’ve helped her donate food to her neighbors than she is to sign up in an unsolicited popup window.</p>
  435. <h3>Thank you, Captain Obvious</h3>
  436. <p>All the above suggestions are obvious common sense, and have been known since transactional web design was in its infancy in the 1990s. And yet, because of organizational dynamics, internal politics, and our getting so close to our own material that our eyes go out of focus, we forget these simple ideas more often than we use them—and fail when success is so easy, and so close to hand.</p>
  437. <hr />
  438. <p><em>I’ll be leading a panel discussion, <a href="https://www.meetup.com/Nonprofits-That-Code/events/242196820/">Dispatches from the Future: Nonprofits and Tech</a>, on Wednesday, 20 September, in Brooklyn.</em></p>
  439. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/09/18/dont-nonprofit-sites-convert/">Why don’t nonprofit sites convert?</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  440. ]]></content:encoded>
  441. <post-id xmlns="com-wordpress:feed-additions:1">14588</post-id> </item>
  442. <item>
  443. <title>Medium to pay writers; program similar to Readability</title>
  444. <link>http://www.zeldman.com/2017/08/23/medium-pay-writers-program-similar-readability/</link>
  445. <pubDate>Wed, 23 Aug 2017 16:53:11 +0000</pubDate>
  446. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  447. <category><![CDATA[Advertising]]></category>
  448. <category><![CDATA[content]]></category>
  449. <category><![CDATA[Design]]></category>
  450. <category><![CDATA[Publications]]></category>
  451. <category><![CDATA[Publishing]]></category>
  452.  
  453. <guid isPermaLink="false">http://www.zeldman.com/?p=14576</guid>
  454. <description><![CDATA[<p>INTERESTING. Medium will now pay writers. The revenue to pay writers will derive, not from advertising—Medium scorns it—but from member contributions. How Medium will pay writers Medium now publishes two kinds of content: public content, viewable by anyone; and private, members-only content. Medium members pay a small monthly fee; in return they get access to [&#8230;]</p>
  455. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/08/23/medium-pay-writers-program-similar-readability/">Medium to pay writers; program similar to Readability</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  456. ]]></description>
  457. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>INTERESTING. <a href="https://blog.medium.com/expanding-the-medium-partner-program-3be09dd146e4">Medium will now pay writers</a>. The revenue to pay writers will derive, not from advertising—Medium scorns it—but from member contributions.</p>
  458. <h3>How Medium will pay writers</h3>
  459. <p>Medium now publishes two kinds of content: public content, viewable by anyone; and private, members-only content. Medium members pay a small monthly fee; in return they get access to members-only content.</p>
  460. <p>As in the past, writers who write public content will not be paid, but they will have access to a potentially large audience. Only writers who write members-only content will have the potential to earn.</p>
  461. <p>Payments will be based on “<a href="https://help.medium.com/hc/en-us/articles/115011350967-Claps">claps</a>,” a UI experiment Medium introduced seemingly only a few days ago; readers are supposed to indicate how much they like a story by how hard (or how long) they press on the clap widget. None of this is explained to readers in context, but it’s pretty easy to figure out. At least, it is easy to figure out that clapping indicates approval, and that the longer you lean on the clapper, the higher the numeric approval level you can share.</p>
  462. <p>The “clap” widget also appears on public stories, where it has no effect on how much the author will get paid—since writers of public stories will not get paid. On public stories, it’s just there for fun, and/or the make the author feel good. You can’t clap for your own story, which helps prevent the most obvious types of system gaming.</p>
  463. <p>Initially, the payment program will be open only to a select group of writers, but if it succeeds, more and more writers will be included.</p>
  464. <h3>Why it matters</h3>
  465. <p>As the publisher of <a href="https://alistapart.com/">A List Apart</a>, which has relied on advertising revenue in the past but is about to stop doing that; as a writer, reader, and passionate devotee of web-delivered content; and as a blogger at zeldman.com since 1995, I will be watching this experiment and hoping for its success. I became a Medium member as soon as the publication offered it, even though I have no interest in reading “exclusive,” members-only content. I did it to support Medium, which I see as <a href="https://twitter.com/ev">one web pioneer</a>’s attempt to keep the web a vital content ecosystem.</p>
  466. <p>It’s the same reason I cheered for the <a href="https://www.readability.com/">Readability</a> app invented by my friend Rich Ziade and his team, back in the day. I even served on Readability’s advisory board, for which I was paid—and asked—nothing. I did it because I believed in Readability’s mission to find a way to pay for content. That particular experiment died, but in many ways its spirit lives on in Medium, whose readable visual layout Readability helped to inspire.</p>
  467. <p>I will not apply to be a paid Medium writer since I have my own magazine’s content and finances to figure out, and since I choose to publish my content publicly. But I applaud what Ev and his teammates are doing, and I will be watching.</p>
  468. <p>Source: <em><a href="https://blog.medium.com/expanding-the-medium-partner-program-3be09dd146e4">Expanding the Medium Partner Program – 3 min read</a></em></p>
  469. <p><em><a href="https://medium.com/@zeldman/medium-to-pay-writers-program-similiar-to-readability-421a09ead923">Also published on Medium</a>.</em></p>
  470. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/08/23/medium-pay-writers-program-similar-readability/">Medium to pay writers; program similar to Readability</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  471. ]]></content:encoded>
  472. <post-id xmlns="com-wordpress:feed-additions:1">14576</post-id> </item>
  473. <item>
  474. <title>It’s just lunch.</title>
  475. <link>http://www.zeldman.com/2017/08/08/reconnecting-with-former-clients-design-problem-lets-talk/</link>
  476. <pubDate>Tue, 08 Aug 2017 12:16:30 +0000</pubDate>
  477. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  478. <category><![CDATA[business]]></category>
  479. <category><![CDATA[Design]]></category>
  480.  
  481. <guid isPermaLink="false">http://www.zeldman.com/?p=14559</guid>
  482. <description><![CDATA[<p>I HADN’T heard from her in years. Suddenly, there she was in my in-box. Tentatively proposing coffee. Maybe lunch. A dam broke inside me, releasing a flood of warm memories. Our first, tentative contact ten years or more ago. Getting to know each other. Endless, happy discussions about where this thing was going. Coming together [&#8230;]</p>
  483. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/08/08/reconnecting-with-former-clients-design-problem-lets-talk/">It’s just lunch.</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  484. ]]></description>
  485. <content:encoded><![CDATA[<p><img src="https://i0.wp.com/www.zeldman.com/wp-content/ramen.jpg?w=640" alt="A nice bowl of ramen." class="lead" data-recalc-dims="1" /></p>
  486. <p>I HADN’T heard from her in years. Suddenly, there she was in my in-box. Tentatively proposing coffee. Maybe lunch. A dam broke inside me, releasing a flood of warm memories. Our first, tentative contact ten years or more ago. Getting to know each other. Endless, happy discussions about where this thing was going. Coming together on goals and brand; on voice and tone. Finally, the joy of designing and launching her website. And then, abruptly, the last invoice and the hurried departure.</p>
  487. <p>My former client. She had a new job now. She wanted to catch up. And, sheepishly, she admitted, she might want something more. Advice about a design problem.</p>
  488. <p>Over an unassuming wooden table laden with summer lunch—mine was Ramen, hers was salad—we shared personal updates. Kids, relationships, projects. And then we got down to the real agenda: an issue at work that was stumping her. Desire for an outside perspective.</p>
  489. <p>Former clients often feel slightly embarrassed about reaching out for a little free advice. They shouldn’t. As a designer, one of my greatest joys is to reconnect with good people whose projects I loved working on. <a href="https://abookapart.com/products/design-is-a-job"><span class="s2">Design is a job</span></a>, but it’s also a relationship. When design is going well, the exchange of ideas is almost addictively exciting. And then, all too soon, the project ends, and, if you’re a consulting designer, and you’re lucky enough to have a steady stream of business, you move on to the next gig.</p>
  490. <p>We designers have built-in forgetters: super powers that enable us to care passionately about the problem we’re solving and the people we’re solving it for, and then, absurdly, to discard those feelings as we move on to the next client and design problem.</p>
  491. <p>Clients have a built-in forgetter too. They forget that our relationship, although partly monetary, was also very real. Many clients are self-conscious about reconnecting personally and asking for a small favor in the same breath. But I couldn’t welcome that more. If I can help people, it’s a joy to me. Collaborating on the discovery and solution to a problem isn’t just a stimulating mental exercise and a profession: it’s also a codependent rush.</p>
  492. <p class="p1"><span class="s1">Between the cracks of <a href="https://studio.zeldman.com/"><span class="s2">my studio</span></a>’s bigger projects, I’m always looking for ways to help people. So, in the spirit of <a href="https://alistapart.com/event/drweb"><span class="s2">Ask Dr Web</span></a>, I&#8217;m taking this opportunity to issue an invitation to folks located in or visiting New York. If you’re someone in my network—a former client or old friend or both—with a design problem to mull over, you don’t have to do the mulling alone. Ping me. And let’s do lunch.</span></p>
  493. <p>
  494. <i><a href="https://medium.com/@zeldman/its-just-lunch-e68b7938199d">Also published on Medium</a>.</i></p>
  495. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/08/08/reconnecting-with-former-clients-design-problem-lets-talk/">It’s just lunch.</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  496. ]]></content:encoded>
  497. <post-id xmlns="com-wordpress:feed-additions:1">14559</post-id> </item>
  498. <item>
  499. <title>Big Web Show № 159: If You Can’t Stand the Heatmaps, Stay Out of the Conversion, with @nickd</title>
  500. <link>http://www.zeldman.com/2017/06/16/big-web-show-%e2%84%96-159-cant-stand-heatmaps-stay-conversion-nickd/</link>
  501. <pubDate>Fri, 16 Jun 2017 16:36:25 +0000</pubDate>
  502. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  503. <category><![CDATA[Best practices]]></category>
  504. <category><![CDATA[Blogs and Blogging]]></category>
  505. <category><![CDATA[business]]></category>
  506. <category><![CDATA[client services]]></category>
  507. <category><![CDATA[clients]]></category>
  508. <category><![CDATA[Design]]></category>
  509. <category><![CDATA[The Big Web Show]]></category>
  510. <category><![CDATA[User Experience]]></category>
  511. <category><![CDATA[UX]]></category>
  512.  
  513. <guid isPermaLink="false">http://www.zeldman.com/?p=14551</guid>
  514. <description><![CDATA[<p>NICK Disabato (@nickd) and I discuss heat maps, conversion rates, design specialization, writing for the web, Jakob Nielsen, and the early days of blogging in Episode № 159 of The Big Web Show – “everything web that matters.” Listen and enjoy. Sponsored by ZipRecruiter, Blue Apron, User Interviews, and Hotjar. URLS nickd.org/bio/ draft.nu/ nickd.org/ twitter.com/nickd</p>
  515. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/06/16/big-web-show-%e2%84%96-159-cant-stand-heatmaps-stay-conversion-nickd/">Big Web Show № 159: If You Can’t Stand the Heatmaps, Stay Out of the Conversion, with @nickd</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  516. ]]></description>
  517. <content:encoded><![CDATA[<p><a href="http://5by5.tv/bigwebshow/159"><img src="https://i1.wp.com/www.zeldman.com/wp-content/nickd.jpg?w=640" alt="Nick Disabato AKA @nickd" data-recalc-dims="1" /></a></p>
  518. <p class="intro">NICK Disabato (@nickd) and I discuss heat maps, conversion rates, design specialization, writing for the web, Jakob Nielsen, and the early days of blogging in <a href="http://5by5.tv/bigwebshow/159">Episode № 159</a> of The Big Web Show – “everything web that matters.” Listen and enjoy.</p>
  519. <p>Sponsored by <a href="https://www.ziprecruiter.com/bigwebshow">ZipRecruiter</a>, <a href="https://www.blueapron.com/bigwebshow">Blue Apron</a>, <a href="https://www.userinterviews.com/bigwebshow">User Interviews</a>, and <a href="https://hotjar.com/bigwebshow">Hotjar</a>.</p>
  520. <h3>URLS</b></h3>
  521. <ul>
  522. <li><a href="http://nickd.org/bio/">nickd.org/bio/</a></li>
  523. <li><a href="https://draft.nu/">draft.nu/</a></li>
  524. <li><a href="http://nickd.org/">nickd.org/</a></li>
  525. <li><a href="https://twitter.com/nickd">twitter.com/nickd</a></li>
  526. </ul>
  527. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/06/16/big-web-show-%e2%84%96-159-cant-stand-heatmaps-stay-conversion-nickd/">Big Web Show № 159: If You Can’t Stand the Heatmaps, Stay Out of the Conversion, with @nickd</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  528. ]]></content:encoded>
  529. <post-id xmlns="com-wordpress:feed-additions:1">14551</post-id> </item>
  530. <item>
  531. <title>Buy a piece of studio.zeldman</title>
  532. <link>http://www.zeldman.com/2017/05/12/buy-piece-studio-zeldman/</link>
  533. <pubDate>Fri, 12 May 2017 19:59:06 +0000</pubDate>
  534. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  535. <category><![CDATA[A Space Apart]]></category>
  536. <category><![CDATA[business]]></category>
  537. <category><![CDATA[Design]]></category>
  538. <category><![CDATA[New York City]]></category>
  539. <category><![CDATA[NYC]]></category>
  540. <category><![CDATA[Products]]></category>
  541. <category><![CDATA[studio.zeldman]]></category>
  542. <category><![CDATA[zeldman.com]]></category>
  543.  
  544. <guid isPermaLink="false">http://www.zeldman.com/?p=14540</guid>
  545. <description><![CDATA[<p>We’ve got some exciting news to share. Web and interaction design studio.zeldman is moving, from our digs at 148 Madison Avenue to a new location on Fifth Avenue. As of June 1, we’ll be designing, creating, and consulting out of our beautiful new studio space at The Yard: Flatiron North. Closing our co-working design studio [&#8230;]</p>
  546. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/05/12/buy-piece-studio-zeldman/">Buy a piece of studio.zeldman</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  547. ]]></description>
  548. <content:encoded><![CDATA[<p><a href="https://vr.zeldman.com/"><img src="https://i0.wp.com/cdn-images-1.medium.com/max/600/1*JzJoBcUa_Z4LD64H3AAxvg.jpeg?w=640&#038;ssl=1" alt="Jessica Hische enjoys the ball chair at A Space Apart." data-image-id="1*JzJoBcUa_Z4LD64H3AAxvg.jpeg" data-recalc-dims="1" /></a></p>
  549. <p class="graf graf--p">We’ve got some exciting news to share. Web and interaction design <a class="markup--anchor markup--p-anchor" href="https://studio.zeldman.com/" target="_blank" rel="noopener noreferrer" data-href="https://studio.zeldman.com/">studio.zeldman</a> is moving, from <a href="https://vr.zeldman.com/">our digs</a> at 148 Madison Avenue to a new location on Fifth Avenue. As of June 1, we’ll be designing, creating, and consulting out of our beautiful new studio space at <a class="markup--anchor markup--p-anchor" href="https://theyard.nyc/locations/flatiron-north/" target="_blank" rel="noopener noreferrer" data-href="https://theyard.nyc/locations/flatiron-north/">The Yard: Flatiron North</a>.</p>
  550. <h3>Closing our co-working design studio</h3>
  551. <p class="graf graf--p">This means we’re closing<a class="markup--anchor markup--p-anchor" href="https://www.flickr.com/photos/zeldman/albums/72157628836818769" target="_blank" rel="noopener noreferrer" data-href="https://www.flickr.com/photos/zeldman/albums/72157628836818769"> A Space Apart</a>, the Madison Avenue co-working design studio we opened in January, 2012. A Space Apart was a fun experiment, and we loved learning from the design studios, product companies, publications and startups with whom we shared it. Companies like <a class="markup--anchor markup--p-anchor" href="http://fontbureau.typenetwork.com/" target="_blank" rel="noopener noreferrer" data-href="http://fontbureau.typenetwork.com/">Font Bureau</a>, <a class="markup--anchor markup--p-anchor" href="https://monkeydo.biz/" target="_blank" rel="noopener noreferrer" data-href="https://monkeydo.biz/">Monkey Do</a>, <a class="markup--anchor markup--p-anchor" href="http://www.zeldman.com/2016/01/21/sharing-is-caring-the-shopify-partner-studio-program/" target="_blank" rel="noopener noreferrer" data-href="http://www.zeldman.com/2016/01/21/sharing-is-caring-the-shopify-partner-studio-program/">Shopify Partners</a>,<a class="markup--anchor markup--p-anchor" href="http://www.daniloblack.com/" target="_blank" rel="noopener noreferrer" data-href="http://www.daniloblack.com/"> Danilo Black</a>, Been (RIP), <a class="markup--anchor markup--p-anchor" href="http://promediacorp.com/" target="_blank" rel="noopener noreferrer" data-href="http://promediacorp.com/">Promedia</a>, <a class="markup--anchor markup--p-anchor" href="http://www.bytedept.com/" target="_blank" rel="noopener noreferrer" data-href="http://www.bytedept.com/">Byte Dept</a>, <a class="markup--anchor markup--p-anchor" href="http://nicksherman.com/" target="_blank" rel="noopener noreferrer" data-href="http://nicksherman.com/">Nick Sherman</a>, <a class="markup--anchor markup--p-anchor" href="http://fredgatesdesign.co/" target="_blank" rel="noopener noreferrer" data-href="http://fredgatesdesign.co/">Fred Gates Design</a>, <a class="markup--anchor markup--p-anchor" href="https://waywardwild.com/" target="_blank" rel="noopener noreferrer" data-href="https://waywardwild.com/">Wayward Wild</a> and <a class="markup--anchor markup--p-anchor" href="http://thegreatdiscontent.com/" target="_blank" rel="noopener noreferrer" data-href="http://thegreatdiscontent.com/">The Great Discontent</a> and have all shared our water cooler at one time or another during the whirligig of the past five years. Creatively, it’s been amazing.</p>
  552. <p class="graf graf--p">But we’re tired of playing landlord. Instead of debugging the internet router, tending to the recycling, hiring HVAC repair people, and seeking suitable replacement studio mates when a company moves out, we’d rather spend our time solving our clients’ design problems and making cool stuff like <a class="markup--anchor markup--p-anchor" href="https://alistapart.com/" target="_blank" rel="noopener noreferrer" data-href="https://alistapart.com/">A List Apart</a>, <a class="markup--anchor markup--p-anchor" href="https://abookapart.com/" target="_blank" rel="noopener noreferrer" data-href="https://abookapart.com/">A Book Apart</a>, <a class="markup--anchor markup--p-anchor" href="http://5by5.tv/bigwebshow" target="_blank" rel="noopener noreferrer" data-href="http://5by5.tv/bigwebshow">The Big Web Show</a>, and <a class="markup--anchor markup--p-anchor" href="https://aneventapart.com/" target="_blank" rel="noopener noreferrer" data-href="https://aneventapart.com/">An Event Apart</a>. And The Yard’s the perfect place for us to ply our trade and make our goods. (Plus we still get to rub shoulders with other creative business folk.)</p>
  553. <h3>We can’t take it with us: furnish your office with our stuff!</h3>
  554. <p class="graf graf--p">Running a co-working studio space meant buying a lot of furniture and equipment. Beautiful stuff, still in great condition. Elegant stuff, because we’re designers. Stuff we won’t need any more, now that we’re moving to new digs where somebody else does landlord duty. So we’re selling it, for a lot less than we paid. And that’s where (maybe) you come in.</p>
  555. <p class="graf graf--p">Most everything must go, including our famous <a class="markup--anchor markup--p-anchor" href="https://eeroaarnio.com/products/chairs/ball-chair/" target="_blank" rel="noopener noreferrer" data-href="https://eeroaarnio.com/products/chairs/ball-chair/">Eero Aarnio (style) ball chair</a> (if its red cushions could talk!), custom Bo Concept shelving, <a class="markup--anchor markup--p-anchor" href="http://www.dwr.com/workspace-desks-tables/eames-desk-unit-edu/1366.html?lang=en_US" target="_blank" rel="noopener noreferrer" data-href="http://www.dwr.com/workspace-desks-tables/eames-desk-unit-edu/1366.html?lang=en_US">Eames Desk Units</a> from Design Within Reach, Herman Miller Aeron chairs (ditto), midcentury tulip table and side chairs, black glass desks, Nespresso espresso maker, file cabinets, icemaker, microwave oven, see-through glass mini-fridge, and more. These are beautiful things that inspire good design, and they deserve good homes.</p>
  556. <p class="graf graf--p"><span style="font-weight: 400;">View all our goods and prices—and even order the ones you want!—via this lovely </span><a href="https://vr.zeldman.com/"><span style="font-weight: 400;">WebVR Walk-through</span></a><span style="font-weight: 400;"> prepared by our own </span><a href="https://studio.zeldman.com/about/roland-dubois/"><span style="font-weight: 400;">Roland Dubois</span></a><span style="font-weight: 400;">. (If you&#8217;re not into the whole WebVR thing, you can also just </span><a href="https://marketplace.apartmenttherapy.com/studiozeldman"><span style="font-weight: 400;">browse our store at Apartment Therapy</span></a><span style="font-weight: 400;">. The VR experience also links directly to the store items, so you&#8217;re good either way.)</span></p>
  557. <p class="graf graf--p"><span style="font-weight: 400;">We leave May 31, and these goods are first-come, first-served, so don’t wait too long. Grab your piece of web and interaction design history today.</span></p>
  558. <p class="graf graf--p">
  559. <p class="graf graf--p">☛  <a href="https://medium.com/@zeldman/buy-a-piece-of-studio-zeldman-96b5cf5d1cd1"><em>Also published at Medium</em></a></p>
  560. <p class="graf graf--p">
  561. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/05/12/buy-piece-studio-zeldman/">Buy a piece of studio.zeldman</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  562. ]]></content:encoded>
  563. <post-id xmlns="com-wordpress:feed-additions:1">14540</post-id> </item>
  564. </channel>
  565. </rss>
  566.  

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

  1. Download the "valid RSS" banner.

  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

  3. Add this HTML to your page (change the image src attribute if necessary):

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//www.zeldman.com/rss/

Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda