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>Fri, 17 Mar 2017 20:24:36 +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>A Saint Patrick’s Day to remember</title>
  29. <link>http://www.zeldman.com/2017/03/17/saint-patricks-day-remember/</link>
  30. <pubDate>Fri, 17 Mar 2017 16:09:56 +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=14506</guid>
  35. <description><![CDATA[<p>WHEN my daughter Ava was much younger—about seven—I took her to Toys R Us in Times Square one Saturday that was also Saint Patrick’s Day. You couldn’t ask for a more chaotic location and crowd. After stocking up on a sufficient number of Barbie accessories (Ava was in a girly phase at the time), we [&#8230;]</p>
  36. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/03/17/saint-patricks-day-remember/">A Saint Patrick’s Day to remember</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[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>WHEN my daughter Ava was much younger—about seven—I took her to Toys R Us in Times Square one Saturday that was also Saint Patrick’s Day. You couldn’t ask for a more chaotic location and crowd. After stocking up on a sufficient number of Barbie accessories (Ava was in a girly phase at the time), we headed out of the store and toward home. </p>
  39. <p>It was a hot March that year. Unseasonably sweltering. The streets were unwalkable—thickly thronged with drunks and tourists—and there were no cabs to be seen. So we ended up hiring a bike rickshaw to take us home. I’d recently done the same thing in Austin, where the ride cost $10. The sign on the New York rickshaw also said $10. Unfortunately, it meant $10 per city block—as I discovered to my cost, and horror, upon trying to exit when we finally reached our destination.</p>
  40. <p>But the ludicrous overcharge was worth it, because the trip created a memory.</p>
  41. <p>Ava is half Irish Catholic and Bohemian on her mother’s side, half Ukranian and Russian Jewish on my side. At the time, she identified Irishness with her mother’s qualities, such as intelligence, warmth, and elegance. She did not know that Saint Patrick’s Day in major U.S. cities is mainly an excuse for high school and college students from out of town to come fall down drunk in the street.</p>
  42. <p>As our rickshaw driver pedaled his way to the bank, we passed wave after wave of staggering, shouting, woohooing greenclad coeds, accompanied by slightly less inebriated predator dates. The women shrilled “hey” at us. They stumbled into the crosswalk. They vomited between parked cars and then made out with their companions.</p>
  43. <p>Hammering down 38th Street in the shuddering rickshaw, Ava got up on her hind legs. “You’re a disgrace to the Irish!” she shouted.</p>
  44. <p>A drunken collegiate, making eye contact with the child while not necessarily understanding her words, shouted, &#8220;Woo-hoo!&#8221; and belched.</p>
  45. <p>I think of it every Saint Patrick&#8217;s Day in New York. The righteously indignant little girl, the sweating Asian immigrant bicyclist, and the sea of drunken adolescents out of Trenton and Staten.</p>
  46. <p>Mainly I think whimsically of those words. “You’re a disgrace to the Irish!” </p>
  47. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/03/17/saint-patricks-day-remember/">A Saint Patrick’s Day to remember</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  48. ]]></content:encoded>
  49. <post-id xmlns="com-wordpress:feed-additions:1">14506</post-id> </item>
  50. <item>
  51. <title>Automatic check-ins and the old, personal web</title>
  52. <link>http://www.zeldman.com/2017/02/18/automatic-check-ins-old-personal-web/</link>
  53. <pubDate>Sat, 18 Feb 2017 17:24:53 +0000</pubDate>
  54. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  55. <category><![CDATA[37signals]]></category>
  56. <category><![CDATA[A Book Apart]]></category>
  57. <category><![CDATA[A List Apart]]></category>
  58. <category><![CDATA[A Space Apart]]></category>
  59. <category><![CDATA[An Event Apart]]></category>
  60. <category><![CDATA[Applications]]></category>
  61. <category><![CDATA[business]]></category>
  62. <category><![CDATA[Design]]></category>
  63. <category><![CDATA[Products]]></category>
  64. <category><![CDATA[State of the Web]]></category>
  65. <category><![CDATA[studio.zeldman]]></category>
  66.  
  67. <guid isPermaLink="false">http://www.zeldman.com/?p=14498</guid>
  68. <description><![CDATA[<p>Basecamp 3’s automatic check-in feature can build community and help you design your career and your life. It even brings back some of the joy we once derived from the days of the personal web.</p>
  69. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/02/18/automatic-check-ins-old-personal-web/">Automatic check-ins and the old, personal web</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  70. ]]></description>
  71. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>ABOUT A YEAR ago, around the time I launched my new <a href="https://studio.zeldman.com">design studio</a>, I moved nearly all business-related communications to <a href="https://basecamp.com">Basecamp 3</a>, the latest evolution of the web-based project and communications management tool from my Chicago designer friends who used to be called <a href="https://37signals.com/manifesto">37signals</a>. </p>
  72. <p>One of Basecamp 3’s nicest features is the ability to set up <a href="https://m.signalvnoise.com/new-in-basecamp-3-flexible-automatic-check-ins-16b507d8e313#.3h6nuujt9">automatic check-ins</a>, such as asking all team members “What did you work on today?” at 5:00 pm daily. </p>
  73. <p>On the surface, it’s intended as a way of letting everyone know what their teammates are working on, thereby deleting needless meetings from everyone’s schedules. But the feature can go much deeper, as I’ve discovered to my great pleasure. A day at a time, it can build community and help you design your career and your life. It even brings back some of the joy we once derived from the days of the personal web.</p>
  74. <h3>What did you work on today?</h3>
  75. <p>Over the years, I’ve started or cofounded several web-related businesses. Rather than limit my new studio.zeldman Basecamp exclusively to the designers, developers, and UX specialists who make up my studio, I decided to include everyone from <a href="https://alistapart.com">all</a> <a href="https://abookapart.com">the</a> <a href="https://aneventapart.com">businesses</a> <a href="https://studio.zeldman.com/about/jeffrey-zeldman/">I touch</a>. </p>
  76. <p>Naturally, I’m mindful of people’s bandwidth, so anyone who doesn’t wish to participate can opt out or selectively block threads or projects that don’t interest them. I also refrained from inviting two staffers from one of my businesses who, for whatever reason, have just never hit it off with Basecamp. (Evangelizing any tool, however much one personally loves it, is like trying to convince a carnivore to go vegan. It accomplishes nothing, and leaves everyone feeling hurt.) </p>
  77. <p>Save those two folks, with whom I collaborate through other methods, everyone else I work with on a daily or weekly basis, across all my little businesses, has access to a shared Basecamp. And every day at 5:00 pm Eastern Time, Basecamp asks all of us, “What did you work on today?” </p>
  78. <h3>The evolution of open sharing</h3>
  79. <p>At first, those who chose to participate took the question literally, sharing the work-related tasks we’d accomplished that day. But, over time, we began something sharing else. We began sharing our lives.</p>
  80. <p>As if in a Unitarian church group, or an AA meeting, we share daily joys and sorrows, hopes and aspirations. One of us has a child leaving the nest; another’s child may have had a tough day at school. One of us is writing a book, another has begun physical therapy. Some of us comment on each other’s shares; others use Basecamp’s “applause” feature to indicate that we read and appreciated what was shared. Some folks write essays; others share via bulleted lists. </p>
  81. <h3>Hearkening back to the old, personal web</h3>
  82. <p>Sharing and reading other people’s posts has become a highlight of my day. Of course it helps me get my work done, but more importantly, it also lets me focus on my life and professional goals—and those of my friends. I love getting to know people this way, and I deeply appreciate how respectful and safe our sharing space feels—partly because Basecamp designed the space well, and partly because I work with people who are not only talented and bright, but also kind and empathetic.</p>
  83. <p>If we all sat together in the same office space, I doubt we would let down our guard as much as we do when responding to Basecamp’s automatic check-in. Indeed, far less personal sharing goes on with the non-remote colleagues in my NYC studio space—probably because we are all there to work. </p>
  84. <p>It reminds me of what life was once like on the old web, where people shared honestly on their personal sites without fear of being harassed. I’m not the only old-timer who misses that old web; in recent years, several of my internet friends who once blogged blithely have switched to opt-in newsletters, sharing only with subscribers. Although I mourn the personal, open-hearted web we once shared, I understand this impulse all too well. Sharing with my colleague/friends on Basecamp restores some of the joy I used to take from sharing and listening on the old open web. You might <a href="https://basecamp.com/how-it-works">try it</a>. </p>
  85. <p><em><a href="https://medium.com/let-me-repost-that-for-you-zeldman/automatic-check-ins-and-the-old-personal-web-11eab7f5588d#.5fowbc9xi">Also published at Medium</a></em></p>
  86. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/02/18/automatic-check-ins-old-personal-web/">Automatic check-ins and the old, personal web</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  87. ]]></content:encoded>
  88. <post-id xmlns="com-wordpress:feed-additions:1">14498</post-id> </item>
  89. <item>
  90. <title>Authoritative, Readable, Branded: Report from Poynter Design Challenge, Part 2</title>
  91. <link>http://www.zeldman.com/2017/02/06/readable-branded-design/</link>
  92. <pubDate>Mon, 06 Feb 2017 22:13:23 +0000</pubDate>
  93. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  94. <category><![CDATA[A List Apart]]></category>
  95. <category><![CDATA[Advertising]]></category>
  96. <category><![CDATA[art direction]]></category>
  97. <category><![CDATA[Best practices]]></category>
  98. <category><![CDATA[Brands]]></category>
  99. <category><![CDATA[conferences]]></category>
  100. <category><![CDATA[Content First]]></category>
  101. <category><![CDATA[Content-First]]></category>
  102. <category><![CDATA[Deck, the]]></category>
  103. <category><![CDATA[Fonts]]></category>
  104. <category><![CDATA[Ideas]]></category>
  105. <category><![CDATA[industry]]></category>
  106. <category><![CDATA[Medium]]></category>
  107. <category><![CDATA[Platforms]]></category>
  108. <category><![CDATA[Publications]]></category>
  109. <category><![CDATA[Publishing]]></category>
  110. <category><![CDATA[reportage]]></category>
  111. <category><![CDATA[Standards]]></category>
  112. <category><![CDATA[State of the Web]]></category>
  113. <category><![CDATA[studio.zeldman]]></category>
  114. <category><![CDATA[The Essentials]]></category>
  115. <category><![CDATA[The Profession]]></category>
  116. <category><![CDATA[Themes and Templates]]></category>
  117. <category><![CDATA[Usability]]></category>
  118. <category><![CDATA[User Experience]]></category>
  119. <category><![CDATA[UX]]></category>
  120. <category><![CDATA[Web Design]]></category>
  121. <category><![CDATA[Zeldman]]></category>
  122.  
  123. <guid isPermaLink="false">http://www.zeldman.com/?p=14478</guid>
  124. <description><![CDATA[<p>THIS year’s Poynter Digital Newspaper Design Challenge was an attempt by several designers and pundits, working and thinking in parallel, to save real news via design. In Part 1 of my report from Poynter, I discussed the questions driving the challenge, and talked about the design work done in response to it by my colleagues Kat [&#8230;]</p>
  125. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/02/06/readable-branded-design/">Authoritative, Readable, Branded: Report from Poynter Design Challenge, Part 2</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  126. ]]></description>
  127. <content:encoded><![CDATA[<p><a href="https://i2.wp.com/www.zeldman.com/wp-content/poynter-reader-3.png"><img class="lede" src="https://i2.wp.com/www.zeldman.com/wp-content/poynter-reader-3.png?w=640" alt="Poynter style guide" data-recalc-dims="1" /></a></p>
  128. <p>THIS year’s Poynter Digital Newspaper Design Challenge was an attempt by several designers and pundits, working and thinking in parallel, <a href="https://medium.com/let-me-repost-that-for-you-zeldman/to-save-real-news-89eb0ba546d9#.cgzgg715o">to save real news</a> via design. In <a href="https://trackchanges.postlight.com/digital-newspaper-design-challenge-a-report-from-poynter-part-1-eeca5b9c6fc6#.18t40vymy">Part 1 of my report from Poynter</a>, I discussed the questions driving the challenge, and talked about the design work done in response to it by my colleagues Kat Downs Mulder, Mike Swartz, Lucie Lacava, and Jared Cocken. Here in Part 2, I’ll discuss my own work and the approach we took at <a href="http://studio.zeldman.com">my studio</a>. But we begin with a quick look back at the past designs that brought us to this point:</p>
  129. <h3>Experiment № 1: The Deck</h3>
  130. <p>During the past decade and a half, as both a publication designer and a publisher, I watched in horror as our publications became reader-hostile minefields of intrusive ads, overlays, and popups. The first thing I tried to do about this (besides removing the web equivalent of chart junk from <a href="http://alistapart.com">my magazine</a>) was to offer an alternative approach to advertising via <a href="http://decknetwork.net">The Deck</a>, an ad network I cofounded with <a href="https://twitter.com/Coudal">Jim Coudal</a> of <a href="http://coudal.com">coudal.com</a> and <a href="https://twitter.com/jasonfried">Jason Fried</a> of <a href="https://basecamp.com">Basecamp</a> (formerly <a href="https://37signals.com/manifesto">37signals</a>). The Deck permitted only one appropriately targeted ad per each page of content viewed. As primary instigator Jim Coudal put it:</p>
  131. <blockquote><p><i>A buy in The Deck reaches the creative community on the web in an uncluttered, controlled environment, far more valuable than a standard banner or a single text ad among dozens of others.</i></p></blockquote>
  132. <p>Jim, Jason, and I hoped that our cost-per-influence model would replace the CPM race to the bottom, and that our quasi-religious use of whitespace would be widely imitated by the smartest publications online.</p>
  133. <p>But that didn’t happen. Advertising just got more intrusive. The Deck succeeded as a small business supporting a network of interesting small publications, but not at all as a primary influencer on the direction taken by advertising that supports web content.</p>
  134. <h3>Experiment № 2: Readability</h3>
  135. <p>Then about seven years ago, my friend <a href="https://twitter.com/richziade">Rich Ziade</a> and his engineers created <a href="https://www.readability.com">Readability</a>, an app that sat between you and the ugly site you were trying to read, the way screen readers sit between visual websites and blind web users. Readability grabbed an article page’s primary content, removed the junk, and replaced the cluttered and illegible layout with a clean, readable page inspired by the clarity of iBooks and Kindle, which were just taking off at the time.</p>
  136. <p>Rich released Readability 1.0 as open source; Apple immediately absorbed it into the Safari browser, where it continues to provide Safari’s built-in “reader” mode. (Safari’s “reader” mode was Apple’s first step in decluttering the web and returning it to the people who use it; “<a href="https://medium.com/let-me-repost-that-for-you-zeldman/ad-blocking-and-the-future-of-the-web-78e44e57edb9#.m3cwg09xo">content blocking</a>” would be the second step.)</p>
  137. <p>Moreover, Readability 2.0, released by Rich’s then-company Arc90 the following year, <a href="http://www.zeldman.com/2011/02/11/readability-2-0-is-disruptive-two-ways/">added automatic payment for content creators slash publishers</a>, as I explained at the time to anyone who would listen. Had Readability been allowed to continue the experiment, content monetization might have been less of a problem than it is today, and publication brands (the notion that it matters who publishes what we read) would be in exactly the same pickle they’re in anyway—except that readers would get their news in Readability’s attractive and customizable format, instead of from Apple News, Facebook, and the like.</p>
  138. <p>I used to go around the world on lecture tours, warning my fellow designers that if we didn’t figure out how to declutter and compellingly brand sites, apps like Readability would do it for us. I still go around on lecture tours, but I’ve moved on to other issues. As for Readability, it was killed by a digital lynch mob after one powerful blogger, misunderstanding the motivation behind it, issued the digerati equivalent of a fatwā. But that’s another story.</p>
  139. <h3>Experiment № 3: Big Type Revolution</h3>
  140. <p>In 2012, inspired by Readability and frustrated by the industry’s determination to make ever less legible, ever more cluttered sites full of tracking and popups and everything except what readers need, <a href="http://www.zeldman.com/2012/04/18/redesigning-in-public-again/">I bet big</a> on <a href="http://www.zeldman.com/2012/05/18/web-design-manifesto-2012/">large type</a>:</p>
  141. <blockquote><p><i>This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like </i><a href="https://www.instapaper.com/"><i>Instapaper</i></a><i> and </i><a href="http://www.readability.com/"><i>Readability</i></a><i> that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)</i></p></blockquote>
  142. <p>Writing in <a href="http://www.forbes.com/sites/anthonykosner/2012/05/20/large-type-one-web-designer-puts-content-first-in-a-big-way/#696c4b5e5114">Forbes</a>, Anthony Wing Kosner saw the future in my initially crude experiment:</p>
  143. <blockquote><p><i>If you want to know where the web is going, one clue is to look at the personal sites of top-tier web designers. And one trend that just bubbled to the surface is large body type—the kind you don&#8217;t have to command-plus to read.</i></p>
  144. <p><i>Jeffrey Zeldman&#8230;made a particularly strong point about it in his &#8220;</i><a href="http://www.zeldman.com/2012/05/18/web-design-manifesto-2012/"><i>Web Design Manifesto 2012</i></a><i>,&#8221; that he published yesterday.</i></p>
  145. <p>—<a href="http://www.forbes.com/sites/anthonykosner/2012/05/20/large-type-one-web-designer-puts-content-first-in-a-big-way/#696c4b5e5114">Large Type: One Web Designer Puts Content First in a Big Way</a></p></blockquote>
  146. <p>Not to brag (okay, too late), but he wasn’t wrong. It <em>was</em> the future.</p>
  147. <p>(Also, I’m fairly sure I wasn’t the only designer at the time who reacted against tiny type and cluttered anti-user layouts by stripping pages down to only their most necessary elements, and boosting the type size to enforce a more relaxed reading posture. The idea was in the air.)</p>
  148. <h3>The experiment becomes the norm</h3>
  149. <p>In any case, soon enough, readable (big type and plenty of whitespace) layouts starting popping up everywhere. At <a href="http://medium.com">medium.com</a>. In Mike Pick’s redesign of <em><a href="http://alistapart.com/article/gaming-the-system-and-winning">A List Apart</a></em>. In article pages for <em><a href="https://www.nytimes.com/2017/02/06/opinion/why-melissa-mccarthy-had-to-play-sean-spicer.html?action=click&amp;pgtype=Homepage&amp;clickSource=story-heading&amp;module=opinion-c-col-right-region&amp;region=opinion-c-col-right-region&amp;WT.nav=opinion-c-col-right-region">The New York Times</a>, <a href="https://www.washingtonpost.com/world/national-security/opposition-to-trump-travel-ban-grows-as-key-court-decision-looms/2017/02/06/d766ec7c-ec74-11e6-9662-6eedf1627882_story.html?hpid=hp_hp-top-table-main_trumpban-1120am%3Ahomepage%2Fstory">Washington Post</a>, <a href="http://www.vox.com/world/2017/2/6/14213740/taliban-afghanistan-american-hostage-coleman-trump-military-children-isis-terrorism-haqqani-obama">Vox</a>, <a href="http://www.newsweek.com/michael-dorf-pentagon-papers-muslim-ban-553083">Newsweek</a>, <a href="http://www.newyorker.com/news/amy-davidson/what-trump-wants-bill-oreilly-and-all-of-us-to-forget">The New Yorker</a>,</em> and, eventually, many other publications.</p>
  150. <p>An uncluttered page focused on the reading experience (reminder: big type and plenty of whitespace) is now the default at several leading news publications. But many smaller publications, struggling just to survive, have not kept up. And so we have a perfect crisis:</p>
  151. <p><em>Publications that do not encourage reading, loyalty, or repeat visits are struggling to survive at the very moment real news is under attack from an authoritarian president.</em> What to do?</p>
  152. <p>&nbsp;</p>
  153. <p><a href="https://i2.wp.com/www.zeldman.com/wp-content/SafariScreenSnapz001-copy.png"><img src="https://i2.wp.com/www.zeldman.com/wp-content/SafariScreenSnapz001-copy.png?w=640" alt="A two-up from the Poynter challenge" data-recalc-dims="1" /></a></p>
  154. <h3>My response to the Poynter Design Challenge</h3>
  155. <p>There are many ways to respond to an existential crisis like the one facing most news publications. You can rethink the relationship between reader and publication. Rethink the job of the publication. Make news work more like a lifestyle app. Make it more immersive. My colleagues followed those paths out brilliantly (<a href="https://trackchanges.postlight.com/digital-newspaper-design-challenge-a-report-from-poynter-part-1-eeca5b9c6fc6#.18t40vymy">as described in Part 1</a>).</p>
  156. <p>But I went for the low-hanging fruit. The thing any publisher, no matter how cash-strapped, could do. The thing I had seen working since I started yelling about big type in 2012. I went for a clean, uncluttered, authoritative, branded page. Authoritative because this isn’t fake news. Branded because the source matters.</p>
  157. <p><em>The easiest, fastest, most readily attainable path to clean, uncluttered, authoritative, branded design is through typography.</em></p>
  158. <p>&nbsp;</p>
  159. <p><a href="https://i1.wp.com/www.zeldman.com/wp-content/asdfasdfSafarisnaps003.png"><img src="https://i1.wp.com/www.zeldman.com/wp-content/asdfasdfSafarisnaps003.png?w=640" alt="Sample reader layout from the Poynter challenge" data-recalc-dims="1" /></a></p>
  160. <h3>Any publication can be readable</h3>
  161. <p>Any newspaper, however poor, can afford better typography. Any newspaper with a designer on staff can attain it, if the paper stops treating design as a lackey of marketing or editorial or advertising, and sets designers free to create great reading experiences.</p>
  162. <p>In my work, which is still underway (and will continue for some time), I focused on creating what I call “reader” layouts (and probably other designers call them that too; but I just don’t know). Layouts that are branded, authoritative, clean, uncluttered, and easy to read.</p>
  163. <p>I played with type hierarchies and created simple style guides. Most of my little pages began as Typecast templates that I customized. And then Noël Jackson from my studio cleaned up the HTML and CSS to make it more portable. We put the stuff up on GitHub for whoever wants to play with it.</p>
  164. <ul>
  165. <li><a href="https://studiozeldman.github.io/poynter-reader-2017/">Reader layout</a> &amp; <a href="https://github.com/studiozeldman/poynter-reader-2017/blob/master/README.md">readme</a></li>
  166. <li><a href="https://studiozeldman.github.io/poynter-style-guide-2017/">Style guide</a> (from a template by John Martins) &amp; <a href="https://github.com/studiozeldman/poynter-style-guide-2017/blob/master/README.md">readme</a></li>
  167. </ul>
  168. <p>These are only starting points. Any designer can create these kinds of layouts. There’s nothing special about what I did. You can do the same for your paper. (And if you can’t, you can <a href="http://studio.zeldman.com">hire us</a>.)</p>
  169. <p>The work I share here is the start of a project that will continue at our studio for a long time. #realnews for the win!</p>
  170. <h3>Additional reading</h3>
  171. <ul>
  172. <li><a href="https://medium.com/let-me-repost-that-for-you-zeldman/to-save-real-news-89eb0ba546d9#.cgzgg715o">To Save Real News</a></li>
  173. <li><a href="https://medium.com/let-me-repost-that-for-you-zeldman/the-year-in-design-9c06acf55b88#.ey8x00e8i">The Year in Design</a></li>
  174. <li><a href="https://trackchanges.postlight.com/digital-newspaper-design-challenge-a-report-from-poynter-part-1-eeca5b9c6fc6#.18t40vymy">Digital Newspaper Design Challenge: A Report from Poynter – Part 1</a></li>
  175. <li><a href="https://medium.com/let-me-repost-that-for-you-zeldman/ad-blocking-and-the-future-of-the-web-78e44e57edb9#.m3cwg09xo">Ad Blocking and the Future of the Web</a></li>
  176. <li><a href="https://medium.com/alistapart/in-defense-of-font-size-widgets-d9828f9fea92#.xgfuuybvz">In Defense of Font Size Widgets</a></li>
  177. <li><a href="https:[email protected][email protected]eb-ee951bb76e1c#.gpdn36f0w">Publishing Versus Performance: Our Struggle for the Soul of the Web</a></li>
  178. <li><a href="https:[email protected][email protected]sive-large-type-redesign-b08f6f9b16a1#.xj93nwpgg">The Nation, America’s oldest weekly news magazine, launches responsive, large-type redesign</a></li>
  179. <li><a href="https://medium.com/let-me-repost-that-for-you-zeldman/design-doesnt-matter-a3303cbc703#.u0fwqyoll">“Design doesn’t matter”</a></li>
  180. <li><a href="http://alistapart.com/article/understandingwebdesign">Understanding Web Design</a></li>
  181. <li><a href="http://alistapart.com/article/ala40">A List Apart 4.0</a></li>
  182. </ul>
  183. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/02/06/readable-branded-design/">Authoritative, Readable, Branded: Report from Poynter Design Challenge, Part 2</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  184. ]]></content:encoded>
  185. <post-id xmlns="com-wordpress:feed-additions:1">14478</post-id> </item>
  186. <item>
  187. <title>Digital newspaper design challenge: a report from Poynter, part 1</title>
  188. <link>http://www.zeldman.com/2017/01/28/digital-newspaper-design-challenge-report-poynter-part-1/</link>
  189. <pubDate>Sat, 28 Jan 2017 21:32:29 +0000</pubDate>
  190. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  191. <category><![CDATA[Acclaim]]></category>
  192. <category><![CDATA[Advocacy]]></category>
  193. <category><![CDATA[Appearances]]></category>
  194. <category><![CDATA[art direction]]></category>
  195. <category><![CDATA[Best practices]]></category>
  196. <category><![CDATA[Brands]]></category>
  197. <category><![CDATA[conferences]]></category>
  198. <category><![CDATA[Damned Fine Journalism]]></category>
  199. <category><![CDATA[democracy]]></category>
  200. <category><![CDATA[Design]]></category>
  201. <category><![CDATA[Designers]]></category>
  202. <category><![CDATA[ForHire]]></category>
  203. <category><![CDATA[Ideas]]></category>
  204. <category><![CDATA[industry]]></category>
  205. <category><![CDATA[interface]]></category>
  206. <category><![CDATA[Layout]]></category>
  207. <category><![CDATA[Press]]></category>
  208. <category><![CDATA[Publications]]></category>
  209. <category><![CDATA[Publishing]]></category>
  210. <category><![CDATA[Redesigns]]></category>
  211. <category><![CDATA[reportage]]></category>
  212. <category><![CDATA[State of the Web]]></category>
  213. <category><![CDATA[Usability]]></category>
  214. <category><![CDATA[User Experience]]></category>
  215. <category><![CDATA[Web Design]]></category>
  216.  
  217. <guid isPermaLink="false">http://www.zeldman.com/?p=14446</guid>
  218. <description><![CDATA[<p>CAN design create a better user experience that engages readers and drives revenue? Can it fight fake news and help save real journalism at a time when news organizations large and small are underfinanced and under attack? These questions drove the Poynter Design Challenge, “a project to create new visual models for digital news publications” [&#8230;]</p>
  219. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/01/28/digital-newspaper-design-challenge-report-poynter-part-1/">Digital newspaper design challenge: a report from Poynter, part 1</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  220. ]]></description>
  221. <content:encoded><![CDATA[<p>CAN design create a better user experience that engages readers and drives revenue? Can it fight fake news and help save real journalism at a time when news organizations large and small are underfinanced and under attack?</p>
  222. <p>These questions drove the <a href="https://www.poynterdesign.org">Poynter Design Challenge</a>, “a project to create new visual models for digital news publications” sponsored by William R. Hearst III, hosted by the <a href="https://www.poynterdesign.org">Poynter Institute</a>, and directed by publication designer <a href="https://twitter.com/rogerblack">Roger Black</a>.</p>
  223. <p>The challenge began October 17–18 in New York, with five pundits and five designers, of whom I was honored to be one, workshopping a project brief during a two-day conference event at the Columbia Journalism School. (You can <a href="https://library.fora.tv/conference/poynter_digital_design_challenge">watch videos of all these sessions</a> courtesy of Fora.tv.)</p>
  224. <p>The next phase took place <em>yesterday</em> in St. Petersburg, Florida, as the four other designers and I presented our work to a live audience. In this short piece, I&#8217;ll talk about the designs my colleagues presented; in the next, I&#8217;ll discuss my own.</p>
  225. <h3>Reconnecting with the people: the challenge for digital news</h3>
  226. <p>Roger Black <a href="https://www.poynterdesign.org/blogs/2017/1/20/five-design-answers-that-add-up">described</a> the difficulties facing digital news publications:</p>
  227. <blockquote><p>The challenge is serious. Fake news crowds real news. Numbers no longer add up for publishers. Readers jump from site to site without knowing where they are, or staying for long. You can see the brief for this project <a href="https://www.poynterdesign.org/presentations/">here</a>.</p>
  228. <p>Can design help? Well, as a I designer, I think it can. I mean, the design of most news pages is not what you’d call attractive. But the solutions proposed at Poynter will be much more strategic than cosmetic. And they’re strategies that can be combined.<br />
  229. —<a href="https://www.poynterdesign.org/blogs/2017/1/20/five-design-answers-that-add-up">Five design answers that add up</a>, Roger Black, January 20, 2017</p></blockquote>
  230. <h3>“A news publication might think a bit more like Fitbit”</h3>
  231. <p><a href="https://i2.wp.com/www.zeldman.com/wp-content/PreviewScreenSnapz002.png"><img src="https://i2.wp.com/www.zeldman.com/wp-content/PreviewScreenSnapz002.png?w=640" alt="News prototype by Kat Downs Mulder, Graphics director at The Washington Post." data-recalc-dims="1" /></a></p>
  232. <p>Between us, we designers had about a century of experience designing digital publications—internally, as consultants, or both. This means that, even though an open &#8220;design challenge&#8221; brief necessarily omits an unknown number of the specific requirements any actual publication design assignment would include, all of us were aware of, and to some degree addressed, typical news publication requirements not included in our brief.</p>
  233. <p>Kat Downs Mulder, Graphics Director at <cite>The Washington Post</cite>, shared a prototype for a big-brand news site. Kat had just given birth to a healthy baby boy (congratulations!), so her work was presented by two of her colleagues from The Post. Kat did not design with the avid, committed news reader in mind (since those folks are not the problem for most publications). Instead, she pondered how to engage the typically fragmented attention of today’s distracted and passive news reader:</p>
  234. <p>“A big-brand news site [should be] aware that people have a lot more to do in their lives than read the news,” Kat posited. Thus, “A news publication might think a bit more like Fitbit. That is, it should make you feel like it’s working for you. A reader should say, ‘I’m reading everything I need to know.’”</p>
  235. <h4>Keep that dopamine pumping</h4>
  236. <p>Kat presented a multi-paned prototype. The wider pane on the right contained news content; the narrower pane at left was navigation. As I&#8217;ve just described it, this isn&#8217;t much different from the current Post website, but Kat&#8217;s prototype was very different, because it prized reader control over editorial director control; kept track of what you read; encouraged extra reading the way Fitbit encourages extra steps, and rewarded it the same way Fitbit does, with an accumulation of points that give the reader dopamine hits and create the perception that the &#8220;news app&#8221; is working for her—as a rewarding part of her busy lifestyle.</p>
  237. <h3>An Operating System for your city</h3>
  238. <p>Mike Swartz, Partner at <a href="https://www.upstatement.com/" target="_blank">Upstatement</a>, a design and engineering studio in Boston, took on the challenge to smaller publications (such as his original hometown paper, the <cite>Pittsburgh Post-Gazette</cite>) which lack the resources of a <cite>Washington Post</cite> or <cite>New York Times</cite>.</p>
  239. <p>Mike’s presentation, “information OS for a city: redefining the opportunity for local media,” turned the journalistic prowess of a good local paper into a superpower, connecting readers to their city the way the &#8220;<a href="http://www.steelers.com/history/terrible-towel.html">terrible towel</a>&#8221; stunt concocted in desperation by radio announcer Myron Cope in 1975 reconnected Pittsburghers to their hometown football team, and helped the Steelers win Super Bowl X over the Dallas Cowboys.</p>
  240. <blockquote><p>There&#8217;s a potential for an operation like the [Post Gazette] to rebrand itself as more of an “informational operating system” for its city. With different types of products that are focused and useful and not necessarily bundled into a traditional news format, we can create more enjoyable experiences and more useful products readers will love.</p></blockquote>
  241. <h3>Building reader interest and finding a way to pay for it all</h3>
  242. <p><img src="https://i1.wp.com/www.zeldman.com/wp-content/PreviewScreenSnapz001-1.png?w=640" alt="Lucie Lacava designed an app targeted at millennials." data-recalc-dims="1" /></p>
  243. <p>Where the rest of us avoided the elephant in the room, in her design Lucie Lacava, president of <a href="http://www.lacavadesign.ca/">Lacava Design Inc.</a>, boldly confronted the challenges of advertising and monetization. Algorithm-driven advertising frustrates users, who, in desperation, block it. Choked for income as a result, publications and advertisers create more and more intrusive forms of unwanted advertising. Nobody wins.</p>
  244. <p>And while subscription models have worked, at least partly, for some of the very top news publications, such models are not likely to help most news publications in the near term.</p>
  245. <h4>Digital publication as digital application</h4>
  246. <p>Lucie’s design addressed these challenges by recasting the news as a hyper-customized application targeted at younger users, who get to choose news streams and ads that are relevant to them. “The elusive millennial” was Lucie’s target. I cannot do her idea justice with a couple of paragraphs and a single screen shot.</p>
  247. <h3>Affordable, immersive VR is here</h3>
  248. <p><a href="https://twitter.com/engers">Jared Cocken</a>, brand and product designer <a href="http://www.jaredcocken.com/design">for hire</a> and co-founder of STYLSH.co., approached the “attention war” by showing how <em>any</em> size publication could create “video or VR driven stories that enrich a user’s understanding of the world around them.”</p>
  249. <p>Because VR video is immersive, it holds viewer attention. Because it is reality-based, it fights fake news. (It&#8217;s hard to call bullshit on a scene you can explore from any angle.) VR also, potentially, builds compassion. It’s one thing to read about conditions in a Syrian refugee camp, another to visually experience them in VR.</p>
  250. <p>Until now VR and video have been cost-prohibitive, but, working (and co-presenting) with VR startup founder <a href="https://twitter.com/AnnaRRose">Anna Rose</a> and Hollywood producer/actor <a href="https://twitter.com/BanksBoutte">Banks Boutté</a>, Jared showed how even woefully under-financed newsrooms can use newly designed, super-affordable tools to create “video or VR-driven stories that enrich a user’s understanding of the world around them.”</p>
  251. <p>(For more on VR and the web, see <a href="https://webvr.info">webvr.info</a> and <a href="https:[email protected]/vr-gets-real-174fdafcad4f#.kb4b4usp2">VR Gets Real with WebVR</a> by studio.zeldman’s <a href="https://twitter.com/rolanddubois">Roland Dubois</a>.)</p>
  252. <h3>Parting thought for now</h3>
  253. <p>Blogging about a conference is like tweeting about a sexual experience. You had to be there. I wanted to record and share the outlines of what my fellow designers presented, but these few paragraphs should in no way be considered authentically representative of the deep thinking and work that went into every presentation.</p>
  254. <p>You may see holes in some of the arguments presented here. In some cases, I might agree with you—some ideas, while dazzlingly creative, did not seem to me like the right way to save news. But in most cases, if an idea seems wrong, blame my telling. If you had been there and heard and seen everything, the value of the proposal would have far more apparent than it can be here.</p>
  255. <p>I love that each of us took on a quite different aspect of the problem, and addressed it using very different tools. I&#8217;ll be back soon with a short write-up of the design approach <em>I</em> took. Meanwhile, I want to thank all the pundits, designers, and attendees in New York and St. Petersburg—and the Poynter Institute, Roger Black, and William R. Hearst III for making it all possible.</p>
  256. <p>&nbsp;</p>
  257. <p><em><a href="https://trackchanges.postlight.com/digital-newspaper-design-challenge-a-report-from-poynter-part-1-eeca5b9c6fc6#.rmn9ufuk6">Also published in Track Changes</a>.</em></p>
  258. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/01/28/digital-newspaper-design-challenge-report-poynter-part-1/">Digital newspaper design challenge: a report from Poynter, part 1</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  259. ]]></content:encoded>
  260. <post-id xmlns="com-wordpress:feed-additions:1">14446</post-id> </item>
  261. <item>
  262. <title>Lara Hogan at Postlight</title>
  263. <link>http://www.zeldman.com/2017/01/19/lara-hogan-postlight/</link>
  264. <pubDate>Thu, 19 Jan 2017 14:12:30 +0000</pubDate>
  265. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  266. <category><![CDATA[A Book Apart]]></category>
  267. <category><![CDATA[Acclaim]]></category>
  268. <category><![CDATA[Advocacy]]></category>
  269. <category><![CDATA[Appearances]]></category>
  270. <category><![CDATA[Design]]></category>
  271. <category><![CDATA[Publications]]></category>
  272. <category><![CDATA[Publisher's Note]]></category>
  273. <category><![CDATA[Publishing]]></category>
  274.  
  275. <guid isPermaLink="false">http://www.zeldman.com/?p=14432</guid>
  276. <description><![CDATA[<p>LARA HOGAN kicked ass at the Lara Hogan Demystifies Public Speaking event sponsored by Postlight and A Book Apart, and held last night in Postlight’s big beautiful public space on Fifth Avenue, around the corner from NYC’s famous Union Square Park. Speaking coach Bill Smartt led the smartly paced Q&#38;A session. Postlight co-founder and event [&#8230;]</p>
  277. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/01/19/lara-hogan-postlight/">Lara Hogan at Postlight</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  278. ]]></description>
  279. <content:encoded><![CDATA[<p><img src="https://i1.wp.com/www.zeldman.com/wp-content/IMG_0194.jpg?w=640" alt="Lara Hogan, Rich Smartt, and Rich Ziade at Postlight." class="lead" data-recalc-dims="1" /></p>
  280. <p>LARA HOGAN kicked ass at the <a href="https://www.meetup.com/Postlight/events/236090789/">Lara Hogan Demystifies Public Speaking</a> event sponsored by <a href="https://postlight.com">Postlight</a> and <a href="https://abookapart.com">A Book Apart</a>, and held last night in Postlight’s big beautiful public space on Fifth Avenue, around the corner from NYC’s famous <a href="https://www.flickr.com/search/?text=Union%20Square%20Park&#038;view_all=1">Union Square Park</a>. Speaking coach <a href="https://twitter.com/billsmartt">Bill Smartt</a> led the smartly paced Q&amp;A session. Postlight co-founder and event host <a href="https://twitter.com/richziade">Rich Ziade</a> introduced the event, and, as publisher of <a href="https://abookapart.com/products/demystifying-public-speaking">her new book</a>, I had the honor and pleasure of introducing Lara.</p>
  281. <p><img src="https://i1.wp.com/www.zeldman.com/wp-content/IMG_0196-2-e1484835055779.jpg?w=640" alt="Lara Hogan and Rich Smartt at Postlight." class="softinset" data-recalc-dims="1" /></p>
  282. <p>When I first met Lara, she was touring behind her excellent O’Reilly book <cite><a href="https://www.amazon.com/Designing-Performance-Weighing-Aesthetics-Speed/dp/1491902515">Designing For Performance</a></cite>, a topic she brought to life at <a href="https://aneventapart.com">An Event Apart</a> in 2016. But, as important as performance is, I was even more excited to publish her new A Book Apart book, <a href="https://abookapart.com/products/demystifying-public-speaking"><em>Demystifying Public Speaking</em></a>, because, for nearly 20 years, I’ve impressed on my design/development colleagues and students the vital importance of public speaking to the success of their projects and careers—and now there’s finally a book that tells them how to do it.</p>
  283. <p>I believe in public speaking (and writing) because a person who is comfortable sharing ideas and communicating to groups can evangelize designs, principles, and best practices. This in turn helps build consensus, support collaboration, and keep everyone’s eyes focused on what’s best for users—instead of, say, which colors a powerful committee member dislikes, or how much bigger we could make a button or logo.</p>
  284. <p>Those who communicate comfortably, even when opinions vary and the subject is contentious, spread reassurance, which means the project not only focuses on the right things, but does so in a positive and supportive environment. Effective communicators inspire their groups to dig deeper and try more things—to work, and ponder, harder. This generally leads to more successful iterations (and, ultimately, projects), spreading good work in the community and leading as well to greater career success and longevity. Whew!</p>
  285. <p>That’s why I speak. And why I strongly encourage <a href="http://interactiondesign.sva.edu/people">my students</a> and work mates to speak. Thanks to Postlight and to everyone who attended last night’s event.</p>
  286. <hr />
  287. <p><em><a href="https://medium.com/let-me-repost-that-for-you-zeldman/lara-hogan-at-postlight-e2997989ce7a#.n2lw1zaus">Also published on Medium</a>.</em></p>
  288. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/01/19/lara-hogan-postlight/">Lara Hogan at Postlight</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  289. ]]></content:encoded>
  290. <post-id xmlns="com-wordpress:feed-additions:1">14432</post-id> </item>
  291. <item>
  292. <title>Streaming suicide and other design decisions</title>
  293. <link>http://www.zeldman.com/2017/01/16/streaming-suicide-design-decisions/</link>
  294. <pubDate>Mon, 16 Jan 2017 15:15:13 +0000</pubDate>
  295. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  296. <category><![CDATA[Best practices]]></category>
  297. <category><![CDATA[Design]]></category>
  298. <category><![CDATA[eric meyer]]></category>
  299. <category><![CDATA[ethics]]></category>
  300. <category><![CDATA[Publisher's Note]]></category>
  301. <category><![CDATA[reportage]]></category>
  302. <category><![CDATA[Responsibility]]></category>
  303.  
  304. <guid isPermaLink="false">http://www.zeldman.com/?p=14419</guid>
  305. <description><![CDATA[<p>We who create websites and applications must remain mindful, honest, and vigilant. We must strive to work in diverse teams that are better than homogenous groups at glimpsing and preparing for the unforeseen. More than ever, we must develop design practices that anticipate the horrible and tragic—not to mention the illegal and authoritarian. And in life, as well as design, we must do a better job of asking ourselves what we are not seeing—what  struggles the people we meet may be hiding from us, and how we can help them before it is too late.</p>
  306. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/01/16/streaming-suicide-design-decisions/">Streaming suicide and other design decisions</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  307. ]]></description>
  308. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p class="intro">“<a href="https://www.washingtonpost.com/news/the-intersect/wp/2017/01/15/a-12-year-old-girl-live-streamed-her-suicide-it-took-two-weeks-for-facebook-to-take-the-video-down/?tid=pm_lifestyle_pop">A 12-year-old girl live-streamed her suicide. It took two weeks for Facebook to take the video down</a>.”</p>
  309. <p>So reads the headline of a January 15 news story in The Washington Post. Saying that she’d been sexually abused by a family member, 12-year-old Katelyn Nicole Davis, of Polk County, Georgia, hanged herself, broadcasting the suicide via a 40-minute live stream seen worldwide.</p>
  310. <p>While YouTube immediately removed the video, it “lingered on Facebook for nearly two weeks,” according to the Post’s reporting of Buzzfeed and other unspecified “media reports.”</p>
  311. <h3>First, it just hurts</h3>
  312. <p>I keep rereading the short article and its headline as if it will make sense or stop hurting on the next scan-through. As a human being, I can’t fully process the horror and sadness of this tragedy.</p>
  313. <p>I was initially going to write “as a human being and the father of a 12-year-old girl,” but that last part shouldn’t matter. You don’t need to be the parent of a child Katelyn’s age and sex to feel the feelings.</p>
  314. <p>Nor does there need to be someone in your life who was raped or molested—although, whether they’ve told you about it or not, there almost surely is. Statistically there are likely multiple someones in your life who have suffered unspeakably, too frequently at the hands of people whose main job in life was to protect them. I’m sorry to have to write these words, and I hope reading them doesn’t rip open wounds.</p>
  315. <p>But the point is, even if you and everyone in your circle has lived a magical life untouched by too-common crimes and horrors, it is still unbearable to contemplate too closely what Katelyn must have felt, and what she did about it, and what watching what she did must have done to those who watched the video—both the empathetic majority, and the hopefully small minority of viewers who, because of their own damage, may have gotten off on it, edging just that much closer to some future sociopathic acting-out.</p>
  316. <h3>A designer’s job</h3>
  317. <p>On a personal level, I’m good citing horror and sadness as a reaction to this ugly story. But as a web and product designer, I can’t help but see it as another instance of what Eric Meyer and Sara Wachter-Boettcher warn about in their book, <em>Design For Real Life</em>. Namely:</p>
  318. <p>For every wonderfully fresh use of the internet’s social power we conceive, we must always ask ourselves, how might this be used to make our world more hurtful, less loving, less kind? What unforeseen dangers might our well intentioned innovation unleash?</p>
  319. <p>I published <em><a href="https://abookapart.com/products/design-for-real-life">Design For Real Life</a></em>, but I don’t cite Katelyn’s story or repeat Sara and Eric’s moral here to sell copies. I do it to remind us all that what we make matters. <a href="https://aneventapart.com/news/post/how-designers-destroyed-the-world-by-mike-monteiro-an-aea-video">Our design decisions matter</a>. The little qualms that might float through our minds while working on a project need to be examined, not suppressed in the interest of continued employment. And the <a href="http://alistapart.com/article/dao-of-product-design">diversity of our workforce</a> matters, because it takes many different minds to foresee potential abuses of our products.</p>
  320. <h3>Streaming suicide, monitoring content</h3>
  321. <p>Live.me isn’t the first live streaming app, and, as a category, live streaming likely does more good than harm. The existence of a live streaming app didn’t drive a girl to kill herself, although, in despair at not being listened to, she might have found solace and an appeal in the idea that her suicide, witnessed globally, could lead to an investigation and eventual justice.</p>
  322. <p>Similarly, when Facebook began allowing its customers to perform live streaming (or, in Nicole’s case) to post video streams from third parties, use cases like pre-teen suicide or the torture of a mentally disabled teenager most likely did not factor into those business decisions. But here we are.</p>
  323. <p>And, as much content as Facebook produces in a day, you can’t really fault them for not always being johnny-on-the-spot when some of that content violates their guidelines. But surely they can do better.&nbsp;</p>
  324. <h3>Invention is a mother</h3>
  325. <p>There’s no closing Pandora’s box, nor would we wish to. But we who create websites and applications must remain mindful, honest, and vigilant. We must strive to work in diverse teams that are better than homogenous groups at <a href="http://alistapart.com/article/dao-of-product-design">glimpsing and preparing for the unforeseen</a>. More than ever, we must <a href="http://alistapart.com/article/design-for-real-life-interview-with-sara-wachter-boettcher">develop design practices</a> that anticipate the horrible and tragic—not to mention the illegal and authoritarian.</p>
  326. <p>And in life, as well as design, we must do a better job of asking ourselves what we are not seeing—what  struggles the people we meet may be hiding from us, and how we can help them before it is too late.</p>
  327. <hr>
  328. <p><em><a href="https://medium.com/let-me-repost-that-for-you-zeldman/streaming-suicide-other-design-decisions-70bf3ebff100#.e47epxgom">Also published on Medium</a></em></p>
  329. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/01/16/streaming-suicide-design-decisions/">Streaming suicide and other design decisions</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  330. ]]></content:encoded>
  331. <post-id xmlns="com-wordpress:feed-additions:1">14419</post-id> </item>
  332. <item>
  333. <title>Kiss My Classname</title>
  334. <link>http://www.zeldman.com/2017/01/03/kiss-my-classname/</link>
  335. <pubDate>Tue, 03 Jan 2017 17:55:57 +0000</pubDate>
  336. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  337. <category><![CDATA[Best practices]]></category>
  338. <category><![CDATA[CSS]]></category>
  339. <category><![CDATA[HTML]]></category>
  340. <category><![CDATA[industry]]></category>
  341. <category><![CDATA[Markup]]></category>
  342. <category><![CDATA[Off My Lawn!]]></category>
  343. <category><![CDATA[Responsibility]]></category>
  344. <category><![CDATA[Standards]]></category>
  345. <category><![CDATA[State of the Web]]></category>
  346. <category><![CDATA[The Essentials]]></category>
  347. <category><![CDATA[The Profession]]></category>
  348.  
  349. <guid isPermaLink="false">http://www.zeldman.com/?p=14413</guid>
  350. <description><![CDATA[<p>SORRY. I disagree. Nonsemantic classnames that refer to visual styles will always be a bad idea. I’m sure you’re a good coder. Probably much better than I am these days. I know most of you weren’t around for the standards wars and don’t know how much damage non-semantic HTML and CSS did to the web. [&#8230;]</p>
  351. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/01/03/kiss-my-classname/">Kiss My Classname</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  352. ]]></description>
  353. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>SORRY. <a href="http://mrmrs.io/writing/2016/03/24/scalable-css/">I disagree</a>. Nonsemantic classnames that refer to visual styles will always be a bad idea. </p>
  354. <p>I’m sure you’re a good coder. Probably much better than I am these days. I know most of you weren’t around for the standards wars and don’t know how much damage non-semantic HTML and CSS did to the web. </p>
  355. <p>I’ve worked on big sites and I understand how bloated and non-reusable code can get when a dozen people who don’t talk to each other work on it over a period of years. I don’t believe the problem is the principle of semantic markup or the cascade in CSS. I believe the problem is a dozen people working on something without talking to each other. </p>
  356. <p>Slapping a visually named class on every item in your markup may indeed make your HTML easier to understand for a future developer who takes over without talking to you, especially if you don’t document your work and create a style guide. But making things easier for yourself and other developers is not your job. And if you want to make things easier for yourself and other developers, talk to them, and create a style guide or pattern library.</p>
  357. <p>The codebase on big sites isn’t impenetrable because developers slavishly followed arbitrary best practices. The codebase is broken because developers don’t talk to each other and don’t make style guides or pattern libraries. And they don’t do those things because the people who hire them force them to work faster instead of better. It starts at the top.</p>
  358. <p>Employers who value quality in CSS and markup will insist that their employees communicate, think through long-term implications, and document their work. Employers who see developers and designers as interchangable commodities will hurry their workers along, resulting in bloated codebases that lead intelligent people to blame best practices instead of work processes. </p>
  359. <p>The present is always compromised, always rushed. We muddle through with half the information we need, praised for our speed and faulted when we stop to contemplate or even breathe. Frameworks built on newish worst practices seem like the way out, but they end up teaching and permanently ingraining bad habits in a generation of web makers. Semantics, accessibility, and clarity matter. Reusability is not out of reach. All it takes is clarity and communication. </p>
  360. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2017/01/03/kiss-my-classname/">Kiss My Classname</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  361. ]]></content:encoded>
  362. <post-id xmlns="com-wordpress:feed-additions:1">14413</post-id> </item>
  363. <item>
  364. <title>To Save Real News</title>
  365. <link>http://www.zeldman.com/2016/12/19/save-real-news/</link>
  366. <pubDate>Mon, 19 Dec 2016 17:44:00 +0000</pubDate>
  367. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  368. <category><![CDATA[Advocacy]]></category>
  369. <category><![CDATA[Announcements]]></category>
  370. <category><![CDATA[art direction]]></category>
  371. <category><![CDATA[content]]></category>
  372. <category><![CDATA[Design]]></category>
  373. <category><![CDATA[Ideas]]></category>
  374. <category><![CDATA[interface]]></category>
  375. <category><![CDATA[Layout]]></category>
  376. <category><![CDATA[nytimes]]></category>
  377. <category><![CDATA[Platforms]]></category>
  378. <category><![CDATA[Publications]]></category>
  379. <category><![CDATA[Publishing]]></category>
  380. <category><![CDATA[Redesigns]]></category>
  381. <category><![CDATA[reportage]]></category>
  382. <category><![CDATA[State of the Web]]></category>
  383. <category><![CDATA[studio.zeldman]]></category>
  384. <category><![CDATA[The Essentials]]></category>
  385. <category><![CDATA[Usability]]></category>
  386. <category><![CDATA[User Experience]]></category>
  387. <category><![CDATA[UX]]></category>
  388. <category><![CDATA[Web Design]]></category>
  389.  
  390. <guid isPermaLink="false">http://www.zeldman.com/?p=14404</guid>
  391. <description><![CDATA[<p>IN a world where newspapers are dying and half the public believes fake news, what online news experiences need is design that is branded, authoritative, and above all, readable: Branded, because we need to convert the current hummingbird model (where readers flit from flower to flower) back to the idea that your news source matters—and [&#8230;]</p>
  392. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/12/19/save-real-news/">To Save Real News</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  393. ]]></description>
  394. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>IN a world where newspapers are dying and <a href="http://nymag.com/daily/intelligencer/2016/12/poll-half-of-republicans-believe-trump-won-popular-vote.html">half the public believes fake news</a>, what online news experiences need is design that is <strong>branded</strong>, <strong>authoritative</strong>, and above all, <strong>readable</strong>:</p>
  395. <p><strong>Branded</strong>, because we need to convert the current hummingbird model (where readers flit from flower to flower) back to the idea that your news source matters—and that it is worth your time to <em>return</em> to a source you <em>trust</em>.</p>
  396. <p>Brand helps the social-media-driven seeker notice that they’re returning time and again to a certain resource, facilitating a mental model shift back toward destination web browsing. When every site looks the same, it’s easy to see all content as equal—all spun from the same amorphous mass. A strong brand, which is individual to the given newspaper, can cut through that amorphousness, which is the first step in building (or rebuilding) loyalty.</p>
  397. <p><strong>Authoritative</strong>, because combating fake news means visually cueing the reliability of a particular source—one staffed by real journalists and editors, with real sources in real countries. In the coming years this will be more important than ever.</p>
  398. <p><strong>Readable</strong>, because an informed public needs to grasp stories that can’t always be reduced to headlines or sound bytes. Readability means even longer articles actually get read, sometimes even all the way through. Readability requires a combination of typeface, type size, leading, measure, hierarchy, contrast, etc.—as well as the introduction of visual information, both to break up the flow of text, and to further illuminate what is being said.</p>
  399. <h3>Related news keeps readers reading</h3>
  400. <p>Additionally, this branded, authoritative, readable content needs to become (to use an ancient word) <em>sticky</em>: through a combination of editing and algorithms, related content must be presented at the appropriate time in the reading experience, to engage the visitor in continued reading.</p>
  401. <p>Currently two publications—<a href="http://www.nytimes.com/2016/12/18/us/politics/the-electoral-college-meets-monday-heres-what-to-expect.html">nytimes.com</a> and <a href="https://medium.com/alistapart/in-defense-of-font-size-widgets-d9828f9fea92#.fewenngyv">medium.com</a>—achieve all these goals better than any other publications on the web. One is the newspaper of record; the other is a vehicle for anyone’s content. Yet both really do the job all newspapers will need to do to survive—and to help the Republic survive these next years. I particularly admire the way both publications surface related content in a way that practically <em>demands</em> additional reading.</p>
  402. <p>Design won’t solve all the problems facing newspapers, but it will help. And unlike more “immersive” approaches such as WebVR, original full-screen imagery, and original embedded video, the basics of solid, readable design should not be out of budgetary reach for even the most cash-strapped news publisher—budget being a problem for any business at any time, but especially for newspapers now.</p>
  403. <p>In <a href="http://studio.zeldman.com">my studio</a>, we’ve been pondering these problems for content sites of all types (not only newspapers). At the <a href="http://about.poynter.org/about-us/events/poynter-digital-design-challenge-2017">Poynter Digital Design Challenge</a> next month, I hope to share designs that nudge the conversation along just a bit further.</p>
  404. <p>&nbsp;</p>
  405. <p><em><a href="https://medium.com/let-me-repost-that-for-you-zeldman/to-save-real-news-89eb0ba546d9#.i76phfxxx">Simultaneously published in Medium</a>.</em></p>
  406. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/12/19/save-real-news/">To Save Real News</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  407. ]]></content:encoded>
  408. <post-id xmlns="com-wordpress:feed-additions:1">14404</post-id> </item>
  409. <item>
  410. <title>In Defense of Font Size Widgets</title>
  411. <link>http://www.zeldman.com/2016/12/14/font-size-widgets/</link>
  412. <pubDate>Wed, 14 Dec 2016 15:23:38 +0000</pubDate>
  413. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  414. <category><![CDATA[Accessibility]]></category>
  415. <category><![CDATA[Design]]></category>
  416. <category><![CDATA[Usability]]></category>
  417. <category><![CDATA[UX]]></category>
  418. <category><![CDATA[Web Design History]]></category>
  419.  
  420. <guid isPermaLink="false">http://www.zeldman.com/?p=14392</guid>
  421. <description><![CDATA[<p>Most of the sites we’ve designed in the past few years have not had a text size widget, but I believe this was due to our privileged assumptions and biases, and not to the reality of the needs of those we serve.</p>
  422. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/12/14/font-size-widgets/">In Defense of Font Size Widgets</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[<p><img class="softinset" src="https://i2.wp.com/www.zeldman.com/wp-content/IMG_9631.png?w=640" alt="A discussion on Twitter" data-recalc-dims="1" />“You don’t get to decide which platform or device your customers use to access your content: they do.”—<a href="https://abookapart.com/products/content-strategy-for-mobile">Karen McGrane</a>, <i>Content Strategy for Mobile</i></p>
  425. <p>“When a person tells you that you hurt them, you don’t get to decide that you didn’t.”—<a href="http://www.azquotes.com/author/3544-Louis_C_K">Louis C.K.</a></p>
  426. <p>“Discomfort with others’ burdens has no place in good design.”—<a href="http://alistapart.com/article/design-for-real-life-interview-with-sara-wachter-boettcher">Mica McPheeters</a></p>
  427. <p>“Historically, teams simply have not been trained to imagine their users as different from themselves—not really, not in any sort of deep and empathetic way.”—<a href="http://alistapart.com/article/design-for-real-life-interview-with-sara-wachter-boettcher">Sara Wachter-Boettcher</a></p>
  428. <p>&nbsp;</p>
  429. <p class="intro">“USER CUSTOMIZATION” on the web hearkens back to the deluded old days of <a href="https://www.zeldman.com/15/derekf.html">portals</a>, when companies imagined you’d start your daily “net browsing” session by “logging on” to their website’s homepage. Customization was among the chief (largely imaginary) inducements for you to return to their “start” page and not others.</p>
  430. <p>The thought was that changing the fonts and color scheme would make their page feel more like your home. After all, <a href="http://www.wikiwand.com/en/Windows_3.1x">Windows 3.1</a> users seemed to enjoy switching their home computers to “Black Leather Jacket” or other personalized settings—if only as an escape from the computer environment at work, where their bosses enforced a rigid conformist look and feel, and dictated which software and fonts were allowed on your workstation. Surely, the thinking went, pioneering web explorers would demand custom accommodations as plush as those found in the best-selling operating system.</p>
  431. <h3>MySpace … and beyond!</h3>
  432. <p><img class="softinset" src="https://i1.wp.com/www.zeldman.com/wp-content/Safarisnaps002.png?w=640" alt="Dropdown style switcher from adactio.com – a memory of the way we were." data-recalc-dims="1" />This fetish for pointless customization—customization for its own sake—persisted through the MySpace era, where it actually made sense as an early mass offering of page owner personal branding. Its descendants are the WordPress, Tumblr, and Squarespace themes that create a professional appearance for the websites of individuals and small businesses. This is a positive (and inevitable) evolution, and a perfect denouement for the impulse that began life as “user customization.”</p>
  433. <p>But, except on a few quirky personal sites like <a href="https://adactio.com">Jeremy Keith’s adactio.com</a>, where sidebar customization widgets live on as a winking look back to the early days of personal content on the web, user customization for its own sake has long been out of favor—because experience, referrer logs, and testing have long shown that visitors don’t bother with it.</p>
  434. <p>Perhaps that’s because people don’t really <i>visit</i> websites any more. They drop in quickly on a page found by search or referred by social media, scan quickly and incompletely, and leave, mostly never to return.</p>
  435. <p>When you use Google, Bing, or Duck Duck Go to find out what a knocking sound in your radiator or a pang in your gulliver might mean, you scan for the information you sought, find it (if you’re lucky), and leave. The notion that most sites could get you to come back by offering you the ability to change fonts or colors is self-evidently absurd. Why bother?</p>
  436. <h3>Readability and font customization</h3>
  437. <p>Ah, but there’s another kind of user customization that I’m hoping and betting will make a comeback: a subtle, inclusive sort of customization that doesn’t exist for its own sake, but rather to serve.</p>
  438. <p>Our glowing, high-density screens are great for watching Westworld, but a bit too bright and backlit for prolonged reading compared to the paper they’re intended to replace. But screens have one advantage over printed books (besides storage and portability): namely, they offer accessibility features a printed book never could.</p>
  439. <p>I once received an architecture book written by an important scholar, but I was never able to read it, because the layout was terrible: the type was too small, the leading too tight, and (most of all) the measure far too wide to be readable. If an ebook version had been available, I’d have purchased it; but this was before the mass market availability of ebooks, and the tome is now out of print. I own it, but I shall never be able to read it.</p>
  440. <p>It wouldn’t be a problem with an ebook, because all ebooks offer readers the ability to alter the contrast and the basic theme (white text on black, black text on white, dark text on a light background); all ebooks offer the ability to adjust font size; and most include the ability to change fonts. Why do Kindle and iBooks offer this flexibility? Because it helps readers who might otherwise not be able to read the text comfortably—or at all. This isn’t customization for its own sake. It’s customization for the sake of inclusion.</p>
  441. <h3>The grey lady and user customization</h3>
  442. <p><img class="softinset" src="https://i0.wp.com/www.zeldman.com/wp-content/SafariScreenSnapz002.png?w=640" alt="The font size widget at nytimes.com" data-recalc-dims="1" />Now notice who else provides some of this same inclusive customization function: the mighty New York Times.</p>
  443. <p>People in our industry tend to repeat things they’ve heard as if they are eternal verities—when the real truth is that each digital experience is different, each person who engages with it is different, and each device used to access each experience brings its own strengths and limitations.</p>
  444. <p>A font size widget may smell like the pointless old-fashioned “user customization” to be found on half the unvisited sites in the Wayback Machine, but it is the very opposite of such stuff. Even mighty responsive design benefits from offering a choice of font sizes—because there are just too many complications between too many screen sizes and device features and too many pairs of eyes to ensure that even the best designer can provide a readable experience for everyone without adding a simple text size widget.</p>
  445. <p>Most of the sites we’ve designed in the past few years have not had a text size widget, but I believe this was due to our privileged assumptions and biases, and not to the reality of the needs of those we serve. Going forward on client projects at <a href="http://studio.zeldman.com">studio.zeldman</a>, and in my publications like <cite><a href="http://alistapart.com/">A List Apart</a></cite>, I hope to correct this—and I hope you will think about it, too.</p>
  446. <p>&nbsp;</p>
  447. <p><em><a href="https://medium.com/alistapart/in-defense-of-font-size-widgets-d9828f9fea92#.uzodri4ai">Also published to A List Apart: Medium</a>. </em></p>
  448. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/12/14/font-size-widgets/">In Defense of Font Size Widgets</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  449. ]]></content:encoded>
  450. <post-id xmlns="com-wordpress:feed-additions:1">14392</post-id> </item>
  451. <item>
  452. <title>Big Web Show № 150: Giant Paradigm Shifts and Other Delights With Brad Frost</title>
  453. <link>http://www.zeldman.com/2016/12/12/brad-frost-atomic-design-big-web-show-150/</link>
  454. <pubDate>Mon, 12 Dec 2016 19:17:10 +0000</pubDate>
  455. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  456. <category><![CDATA[Best practices]]></category>
  457. <category><![CDATA[better-know-a-speaker]]></category>
  458. <category><![CDATA[client services]]></category>
  459. <category><![CDATA[Content First]]></category>
  460. <category><![CDATA[Design]]></category>
  461. <category><![CDATA[Designers]]></category>
  462. <category><![CDATA[development]]></category>
  463. <category><![CDATA[industry]]></category>
  464. <category><![CDATA[Interviews]]></category>
  465. <category><![CDATA[Publications]]></category>
  466. <category><![CDATA[Publishing]]></category>
  467. <category><![CDATA[State of the Web]]></category>
  468. <category><![CDATA[The Big Web Show]]></category>
  469. <category><![CDATA[The Profession]]></category>
  470. <category><![CDATA[Web Design]]></category>
  471. <category><![CDATA[Web Design History]]></category>
  472. <category><![CDATA[Web Standards]]></category>
  473. <category><![CDATA[writing]]></category>
  474.  
  475. <guid isPermaLink="false">http://www.zeldman.com/?p=14375</guid>
  476. <description><![CDATA[<p>BOY, was this show overdue. For the first time ever on The Big Web Show, I chat with my friend, front-end developer extraordinaire Brad Frost, author of the spanking new book, Atomic Design. We have fun. We go way over time. We kept talking after the show stopped. There was just so much to discuss—including [&#8230;]</p>
  477. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/12/12/brad-frost-atomic-design-big-web-show-150/">Big Web Show № 150: Giant Paradigm Shifts and Other Delights With Brad Frost</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  478. ]]></description>
  479. <content:encoded><![CDATA[<p><a href="http://5by5.tv/bigwebshow/150"><img src="https://i0.wp.com/www.zeldman.com/wp-content/brad-frost.jpg?w=640" alt="Brad Frost, photographed at An Event Apart by Jeffrey Zeldman." class="lede" data-recalc-dims="1" /></a></p>
  480. <p class="intro">BOY, was <a href="http://5by5.tv/bigwebshow/150">this show</a> overdue. For the first time ever on The Big Web Show, I chat with my friend, front-end developer extraordinaire Brad Frost, author of the spanking new book, <cite><a href="http://atomicdesign.bradfrost.com">Atomic Design</a></cite>.</p>
  481. <p>We have fun. We go way over time. We kept talking after the show stopped. There was just so much to discuss—including Pattern Lab and style guides, being there for the iPad launch, working with big brands, how to say no and make the client happy you said it, avoiding antipatterns, mobile versus “the real web” (or the way we saw things in 2009), dressing for success, contributing to open source projects, building a community, the early days of Brad’s career, and that new book of his.</p>
  482. <p>Listen to <a href="http://5by5.tv/bigwebshow/150">Episode № 150</a> on the 5by5 network, or <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=370445683&#038;partnerId=30&#038;siteID=GfpxbBXXpXE-y3gfJGyOQcSr2tOpkzD12A">subscribe via iTunes</a>. And <a href="http://atomicdesign.bradfrost.com">pick up Brad’s book</a> before they sell out!</p>
  483. <p><em>Sponsored by Braintree and Incapsula.</em></p>
  484. <h4>Brad Frost URLS</h4>
  485. <p><a href="https://twitter.com/brad_frost">@brad_frost</a><br />
  486. <a href="http://bradfrost.com">http://bradfrost.com</a><br />
  487. <a href="http://patternlab.io/">http://patternlab.io/</a><br />
  488. <a href="http://bradfrost.com/blog/">http://bradfrost.com/blog/</a><br />
  489. <a href="http://bradfrost.github.com/this-is-responsive/">http://bradfrost.github.com/this-is-responsive/</a><br />
  490. <a href="http://wtfmobileweb.com/">http://wtfmobileweb.com/</a><br />
  491. <a href="http://deathtobullshit.com/">http://deathtobullshit.com/</a><br />
  492. <a href="http://wtfqrcodes.com/">http://wtfqrcodes.com/</a><br />
  493. <a href="http://bradfrost.com/music">http://bradfrost.com/music</a><br />
  494. <a href="http://bradfrost.com/art">http://bradfrost.com/art</a></p>
  495. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/12/12/brad-frost-atomic-design-big-web-show-150/">Big Web Show № 150: Giant Paradigm Shifts and Other Delights With Brad Frost</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">14375</post-id> </item>
  498. <item>
  499. <title>Accessibility Whack-a-Mole</title>
  500. <link>http://www.zeldman.com/2016/12/06/a11y-whack-a-mole/</link>
  501. <pubDate>Tue, 06 Dec 2016 15:35:33 +0000</pubDate>
  502. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  503. <category><![CDATA[A List Apart]]></category>
  504. <category><![CDATA[Accessibility]]></category>
  505.  
  506. <guid isPermaLink="false">http://www.zeldman.com/?p=14365</guid>
  507. <description><![CDATA[<p>WHAT do you do when an accessibility solution you’ve devised for one group creates a fresh accessibility dilemma for another group? Through the prism of typeface choice, Eleanor Ratliff relates how she and her team tackled the problem of accessibility whack-a-mole for a rebranding project.</p>
  508. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/12/06/a11y-whack-a-mole/">Accessibility Whack-a-Mole</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  509. ]]></description>
  510. <content:encoded><![CDATA[<p><a href="http://alistapart.com/article/accessibility-whack-a-mole"><img src="https://i2.wp.com/www.zeldman.com/wp-content/cat-whackamole-eleanor-ratliff_960_466_81.jpg?w=640" alt="Accessibility Whack-a-Mole. Article and illustrations by Eleanor Ratliff. In A List Apart, for people who make websites." class="lede" data-recalc-dims="1" /></a></p>
  511. <p class="intro">DESIGN is a balancing act—and never more so than when it comes to accessibility (AKA #a11y). So what can you do when an a11y solution you’ve devised for <em>one</em> group creates a fresh a11y dilemma for <em>another?</em></p>
  512. <p>Through the prism of typeface choice, Eleanor Ratliff relates how she and her team tackled the problem of <a href="http://alistapart.com/article/accessibility-whack-a-mole">accessibility whack-a-mole</a> for a rebranding project. In today&#8217;s edition of <em>A List Apart</em>, for people who make websites.</p>
  513. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/12/06/a11y-whack-a-mole/">Accessibility Whack-a-Mole</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  514. ]]></content:encoded>
  515. <post-id xmlns="com-wordpress:feed-additions:1">14365</post-id> </item>
  516. <item>
  517. <title>This year more than ever, Blue Beanie Day matters</title>
  518. <link>http://www.zeldman.com/2016/11/22/year-ever-blue-beanie-day-matters/</link>
  519. <pubDate>Tue, 22 Nov 2016 14:47:52 +0000</pubDate>
  520. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  521. <category><![CDATA[Accessibility]]></category>
  522. <category><![CDATA[Blue Beanie Day]]></category>
  523. <category><![CDATA[Design]]></category>
  524. <category><![CDATA[Web Design]]></category>
  525. <category><![CDATA[Web Design History]]></category>
  526. <category><![CDATA[Web Standards]]></category>
  527.  
  528. <guid isPermaLink="false">http://www.zeldman.com/?p=14348</guid>
  529. <description><![CDATA[<p>AT FIRST GLANCE, November 2016 has bigger fish to fry than a small, cult holiday celebrated by web developers and designers. Each day since November 8, 2016 has brought new, and, to some of us, unimaginable challenges to the surface. Half of America is angry and terrified. The other half is angry and celebrating. At [&#8230;]</p>
  530. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/11/22/year-ever-blue-beanie-day-matters/">This year more than ever, Blue Beanie Day matters</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  531. ]]></description>
  532. <content:encoded><![CDATA[<p><img class="lead" src="https://i2.wp.com/www.zeldman.com/wp-content/donald-trump-800.jpg?w=640" alt="Donald Trump mocks reporter with disability. Photo: CNN." data-recalc-dims="1" /></p>
  533. <p class="intro">AT FIRST GLANCE, November 2016 has bigger fish to fry than a <a href="http://www.cute-calendar.com/event/blue-beanie-day/23613.html">small, cult holiday</a> celebrated by web developers and designers.</p>
  534. <p>Each day since November 8, 2016 has brought new, and, to some of us, unimaginable challenges to the surface. Half of America is angry and terrified. The other half is angry and celebrating. At a time like now, of what possible use is an annual <a href="http://bluebeanieday.tumblr.com">holiday</a> celebrated mainly on social media by a tiny posse of standards- and accessibility-oriented web developers and designers?</p>
  535. <h3>From Blue Beanies to Black Hats</h3>
  536. <p>Many web developers have “<a href="http://www.wikiwand.com/en/Comparison_of_JavaScript_frameworks">moved on</a>” from a <a href="http://alistapart.com/article/understandingprogressiveenhancement">progressive-enhancement</a>-focused practice that designs web content and web experiences in such a way as to ensure that they are available to all people, regardless of personal ability or the browser or device they use.</p>
  537. <p>Indeed, with more and <a href="http://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm">more new developers</a> entering the profession each day, it’s safe to say that many have never even heard of progressive enhancement and accessible, standards-based design.</p>
  538. <p>For many developers—newcomer and seasoned pro alike—web development is about <a href="https://adactio.com/journal/9195">chasing the edge</a>. The <a href="https://developers.google.com/web/progressive-web-apps/">exciting stuff</a> is mainly being done on <a href="http://www.codediesel.com/javascript/6-essential-javascript-frameworks-for-building-web-apps/">frameworks</a> that not only use, but in many cases actually <i>require</i> <a href="https://bitworking.org/news/2014/05/zero_framework_manifesto">JavaScript</a>.</p>
  539. <p>The trouble with this top-down approach is threefold:</p>
  540. <p>Firstly, many new developers will build powerful portfolios by mastering tools whose functioning and implications they may not fully understand. Their work may be inaccessible to people and devices, and they may not know it—or know how to go under the hood and fix it. (It may also be slow and bloated, and they may not know how to fix that either.) The impressive portfolios of these builders of inaccessible sites will get them hired and promoted to positions of power, where they train other developers to use frameworks to build impressive but inaccessible sites.</p>
  541. <p>Only developers who understand and value accessibility, and can write their own code, will bother learning the equally exciting, equally edgy, equally new standards (like <a href="http://www.zeldman.com/2016/03/17/css-grid-layout-and-flexbox-city/">CSS Grid Layout</a>) that enable us to design lean, accessible, forward-compatible, future-friendly web experiences. Fewer and fewer will do so.</p>
  542. <p>Secondly, since companies rely on their senior developers to tell them what kinds of digital experiences to create, as the web-standards-based approach fades from memory, and frameworks eat the universe, more and more organizations will be advised by framework- and Javascript-oriented developers.</p>
  543. <p>Thirdly, and as a result of the first and second points, more and more web experiences every day are being created that are simply not accessible to people with disabilities (or with the “wrong” phone or browser or device), and this will increase as  standards-focused professionals retire or are phased out of the work force, superseded by <i>frameworkistas</i>.</p>
  544. <h3>#a11y is Code for “Love Your Neighbor”</h3>
  545. <p>This third point is important because people with disabilities are already under attack, <a href="https://www.theguardian.com/us-news/video/2015/nov/26/donald-trump-appears-to-mock-disabled-reporter-video">by example of the U.S. president-elect</a>, and as part of of a recent rise in hate crimes perpetrated by a small but vocal fringe. This fringe group of haters has always been with us, but now they are out of the shadows. They are organized and motivated, and to an unmeasured degree, they helped Donald Trump win the White House. Now that he’s there, people of good will ardently hope that he will condemn the worst bigots among his supporters, and fulfill his executive duties on behalf of all the people. I’m not saying I expect him to do this today. I’m saying I <i>hope</i> he does—and meantime it behooves us to find ways to do more than just hope. Ways to make change.</p>
  546. <p>One small thing designers and developers can do is to make accessibility and usability Job 1 on every project. And to take a <a href="http://alistapart.com/article/design-for-real-life-excerpt">broad view</a> of what that means. It means taking people’s <a href="http://alistapart.com/article/design-for-real-life-interview-with-sara-wachter-boettcher">messy humanity</a> into account and designing for <a href="http://www.zeldman.com/2016/11/05/solve-right-problem-derek-featherstone-designing-extremes/">extreme ends</a> of the bell curve, not just following <a href="https://www.w3.org/TR/WCAG20/">accessibility authoring guidelines</a>. (But it also means following them.)</p>
  547. <p>In doing those things, we can love our neighbors through action. That—and not simply making sure your HTML validates—is what designing with web standards was always about.</p>
  548. <p>On November 30, I will put on my blue hat and renew my commitment to that cause. <a href="http://bluebeanieday.tumblr.com/submit">Please join me</a>.</p>
  549. <p>&nbsp;</p>
  550. <p><em><a href="https://medium.com/let-me-repost-that-for-you-zeldman/this-year-more-than-ever-blue-beanie-day-matters-34aa55aee4ad#.jaxtwjof8">Also published on Medium</a>.</em></p>
  551. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/11/22/year-ever-blue-beanie-day-matters/">This year more than ever, Blue Beanie Day matters</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  552. ]]></content:encoded>
  553. <post-id xmlns="com-wordpress:feed-additions:1">14348</post-id> </item>
  554. <item>
  555. <title>Do Not Go Gentle into that iTunes Store</title>
  556. <link>http://www.zeldman.com/2016/11/16/not-go-gentle-itunes-store/</link>
  557. <pubDate>Wed, 16 Nov 2016 22:11:25 +0000</pubDate>
  558. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  559. <category><![CDATA[Apple]]></category>
  560. <category><![CDATA[Design]]></category>
  561. <category><![CDATA[glamorous]]></category>
  562. <category><![CDATA[Usability]]></category>
  563. <category><![CDATA[User Experience]]></category>
  564. <category><![CDATA[UX]]></category>
  565.  
  566. <guid isPermaLink="false">http://www.zeldman.com/?p=14339</guid>
  567. <description><![CDATA[<p>AT HOME, sick with a cold and bored, my daughter buys a single packet of “My School Dance” in a freemium iTunes game. The manufacturer charges her (well, charges me) for ten packets. This same “accidental” 10x overcharge happens across three different games by the same manufacturer in the span of about an hour. American [&#8230;]</p>
  568. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/11/16/not-go-gentle-itunes-store/">Do Not Go Gentle into that iTunes Store</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  569. ]]></description>
  570. <content:encoded><![CDATA[<img src="http://www.zeldman.com/wp-content/themes/zeldman/images/default.svg" class="lede" alt="" /><p>AT HOME, sick with a cold and bored, my daughter buys a single packet of “My School Dance” in a freemium iTunes game. The manufacturer charges her (well, charges me) for <em>ten</em> packets. This same “accidental” 10x overcharge happens across three different games by the same manufacturer in the span of about an hour.</p>
  571. <p>American Express notifies me of the spurious charges, but won’t let me dispute them until they are “posted.” I spend half an hour on the phone with a very nice gentleman at Amex learning this. Why would Amex notify customers about a charge days before they can do anything to resolve it? I don’t know. And I don’t ask the gentleman on the phone. His job is hard enough.</p>
  572. <p>A few days pass. Amex “posts” the false charges and emails me with a link to resolve the problem on Amex’s “dispute a charge” web service.</p>
  573. <p>Amex’s “dispute a charge” web service “encounters an error” when I try to use it to resolve the problem.</p>
  574. <p>This happens every time I try. I try for three days.</p>
  575. <p>So I call Amex, but I can’t resolve the problem because I don’t have the card in my wallet.</p>
  576. <p>So I head to iTunes, where I should have gone in the first place, and click through two or three generations of iTunes “Report a Problem” interfaces: visually different generations of iTunes software, with different user paths, all still being served by Apple. Generations of iTunes software that, when they fail, link to other generations of iTunes software, which also fail.</p>
  577. <p>I click and click my way through five years of iTunes interfaces.</p>
  578. <p>Finally I find an iTunes page where I can manually “Report a problem” for each of the 27 false charges. (Three of the charges, remember, were legitimate. I’m willing to pay for the three items my daughter intended to buy. But not 30.)</p>
  579. <p>If one software product overcharges your kid by a multiple of 10, that could be a software bug. When three products from the same manufacturer all do it, that’s not a bug, it’s a deliberate attempt to defraud families, by overcharging on purpose and hiding behind the opacity of iTunes’s purchase reporting. Simply put, the manufacturer is dishonest, and figures iTunes’s support section is impenetrable enough that you’ll eventually give up trying to get a refund.</p>
  580. <p>But they didn’t count on my tenacity. I’m the Indiana Jones of this motherfucker. I have studied maps and bribed natives and found my way to the hidden iTunes refund page that actually, sometimes, works.</p>
  581. <p>On this page, I inform Apple of the fraud 27 times, in 27 different boxes. Each time, after reporting, I click a blue button, which generally returns an error message that iTunes was unable to process my request. So I enter the data and click the button again. It’s only 27 boxes of shit. I’ve got all the time in the world.</p>
  582. <p>The page tells me that only two refunds went through. Every other request ends with an error message saying iTunes could not process my request, and encouraging me to try again later.</p>
  583. <p>Instead, I leave the page open, and, about ten minutes later, I manually reload it. When I do so, the display updates—I guess this generation of iTunes software preceded “Ajax”—and I learn that most of my refunds have gone through.</p>
  584. <p>So the software actually works about 33% of the time, even though it indicates that it only works 5% of the time. Remember that wait-ten-minutes-then-randomly-reload-to-see-if-anything-changed trick. It’s the sign of excellently designed consumer software.</p>
  585. <p>I’ve put over two hours of my time into this. Going on billable hours, I’ve probably lost money, even if I get all my overcharges refunded. But there’s a principle here. Several principles, actually. Tricking kids is wrong. Stealing is wrong. Building a beautiful front-end but neglecting customer service is wrong. Mainly, I’ve just had enough of 2016’s bullshit.</p>
  586. <p>Fuck you, 2016.</p>
  587. <hr />
  588. <p><em><a href="https://medium.com/let-me-repost-that-for-you-zeldman/do-not-go-gentle-into-that-itunes-store-c563f316ecae#.5ppsmciyr">Also published in Medium</a>.</em></p>
  589. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/11/16/not-go-gentle-itunes-store/">Do Not Go Gentle into that iTunes Store</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  590. ]]></content:encoded>
  591. <post-id xmlns="com-wordpress:feed-additions:1">14339</post-id> </item>
  592. <item>
  593. <title>State of the Web: Evaluating Technology &#124; Jeremy Keith</title>
  594. <link>http://www.zeldman.com/2016/11/14/state-web-evaluating-technology-jeremy-keith/</link>
  595. <pubDate>Mon, 14 Nov 2016 15:23:56 +0000</pubDate>
  596. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  597. <category><![CDATA[An Event Apart]]></category>
  598. <category><![CDATA[Jeremy Keith]]></category>
  599. <category><![CDATA[Standards]]></category>
  600. <category><![CDATA[State of the Web]]></category>
  601.  
  602. <guid isPermaLink="false">http://www.zeldman.com/?p=14328</guid>
  603. <description><![CDATA[<p>We work with technology every day. And every day it seems like there's more and more technology to understand: graphic design tools, build tools, frameworks and libraries, not to mention new HTML, CSS, and JavaScript features landing in browsers. How should we best choose which technologies to invest our time in? When we decide to weigh up the technology choices that confront us, what are the best criteria for doing that?</p>
  604. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/11/14/state-web-evaluating-technology-jeremy-keith/">State of the Web: Evaluating Technology | Jeremy Keith</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  605. ]]></description>
  606. <content:encoded><![CDATA[<p><img class="lead" src="https://i1.wp.com/www.zeldman.com/wp-content/jeremy.jpg?w=640" alt="Jeremy Keith at An Event Apart." data-recalc-dims="1" /></p>
  607. <p><b>12 LESSONS from An Event Apart San Francisco – № 6</b>: We work with technology every day. And every day it seems like there&#8217;s more and more technology to understand: graphic design tools, build tools, frameworks and libraries, not to mention new HTML, CSS, and JavaScript features landing in browsers. How should we best choose which technologies to invest our time in? When we decide to weigh up the technology choices that confront us, what are the best criteria for doing that?</p>
  608. <p><a href="https://aneventapart.com/speakers/jeremy-keith">Jeremy Keith</a> was the seventh speaker at An Event Apart San Francisco this month. His presentation, <a href="https://aneventapart.com/event/san-francisco-2016#s891">Evaluating Technology</a>, set out to help us evaluate tools and technologies in a way that best benefits the people who use the websites we design and develop. We looked at some of the hottest new web technologies, like service workers and web components, and dug deep beneath the hype to find out whether they will really change life on the web for the better.</p>
  609. <h4>Days of future past</h4>
  610. <p>Its easy to be overwhelmed by all the change happening in web design and development. Things make more sense when we apply an appropriate perspective. Although his presentation often dealt with “bleeding-edge” technologies (i.e. technologies that are still being figured out and just beginning to be supported in some browsers and devices), Jeremy’s framing perspective was that of the history of computer science—a field, pioneered by women, that evolved rationally.</p>
  611. <p>Extracting the unchanging <a href="https://principles.adactio.com/">design principles</a> that gave rise to the advances in computer science, Jeremy showed how the web evolved from these same principles, and how the seemingly dizzying barrage of changes taking place in web design and development today could be understood through these principles as well—providing a healthy means to decide which technologies benefit human beings, and which may be discarded or at least de-prioritized by busy designer/developers working to stay ahead of the curve.</p>
  612. <h4>Resistance to change</h4>
  613. <p>“Humans are allergic to change,” computer science pioneer <a href="http://www.wikiwand.com/en/Grace_Hopper">Grace Hopper</a> famously said. Jeremy showed how that very fear of change manifested itself in the changes human beings accept: we have 60 seconds in a minute and 24 hours in a day because of counting systems first developed five thousand years ago. Likewise, we have widespread acceptance of HTML in large part because its creator, <a href="https://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a>, based it on a subset of elements familiar from an already accepted markup language, SGML.</p>
  614. <h4>How well does it fail?</h4>
  615. <p>In our evaluating process, Jeremy argued, we should not only concern ourselves with how well a technology works, but also how well it fails. When XHTML 2.0 pages contained an error, the browser was instructed not to skip that error but to shut down completely. Thus, XHTML 2.0 was impractical and did not catch on. In contrast, when an HTML page contains an error or new element, the browser skips what it does not understand and renders the page. This allows us to add new elements to HTML over time, with no fear that browsers will choke on what they don’t understand. This fact alone helps account for the extraordinary success of HTML over the past 25 years.</p>
  616. <p>Likewise, <a href="https://adactio.com/journal/9775">service workers</a>, a powerful new technology that extends our work even when devices are offline, fails well, because it is progressively enhanced by design. If a device or browser does not support service workers, the content still renders.</p>
  617. <p>Jeremy argued that pages built on fragile technologies—technologies which are powerful when they work, but which fail poorly—are a dangerous platform for web content. Frameworks that require JavaScript, for example, offer developers extraordinary power, but at a price: the failure of even a small script can result in no content at all. Service workers technology also offers tremendous power, but it fails well, so is safe to use in the creation of responsive sites and web applications.</p>
  618. <h4>On progressive web apps</h4>
  619. <p>Likewise, <a href="https://developers.google.com/web/progressive-web-apps/">progressive web apps</a>, when designed responsively <i>and with progressive enhancement,</i> are a tremendously exciting web development. But when they are designed the wrong way, they fail poorly, <a href="https://adactio.com/journal/10708">making them a step backward for the web</a>.</p>
  620. <p>Jeremy used the example of The Washington Post’s Progressive Web App, which has been much touted by Google, who are a driving force behind the movement for progressive web apps. A true progressive web app works for everyone. But The Washington Post’s progressive web app demands that you open it in your phone. This kind of retrograde door-slam is like the days when we told people they must use Flash, or must use a certain browser or platform, to view our work. This makes it the antithesis of progressive.</p>
  621. <h4>Dancing about architecture</h4>
  622. <p>There was much, much more to Jeremy’s talk—one of the shortest hours I’ve ever lived through, as 100 years of wisdom was applied to a dizzying array of technologies. Summarizing it here is like trying to describe the birth of your child in five words or less. Fortunately, you can see Jeremy give this presentation for yourself at several upcoming An Event Apart conference shows in 2017.</p>
  623. <p>The next AEA event, <a href="https://aneventapart.com/event/st-louis-2017">An Event Apart St. Louis</a>, takes place January 30-February 1, 2017. Tomorrow I’ll be back with more takeaways from another AEA San Francisco 2016 speaker.</p>
  624. <hr />
  625. <p><em><a href="https://medium.com/let-me-repost-that-for-you-zeldman/state-of-the-web-evaluating-technology-with-jeremy-keith-d72b69ca3858#.58wio2b3x">Also published in Medium</a>.</em></p>
  626. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/11/14/state-web-evaluating-technology-jeremy-keith/">State of the Web: Evaluating Technology | Jeremy Keith</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  627. ]]></content:encoded>
  628. <post-id xmlns="com-wordpress:feed-additions:1">14328</post-id> </item>
  629. <item>
  630. <title>Val Head: Web Animation in the Design Process</title>
  631. <link>http://www.zeldman.com/2016/11/08/val-head-animation-style-guides-design-process/</link>
  632. <pubDate>Tue, 08 Nov 2016 20:25:40 +0000</pubDate>
  633. <dc:creator><![CDATA[Jeffrey Zeldman]]></dc:creator>
  634. <category><![CDATA[An Event Apart]]></category>
  635. <category><![CDATA[animation]]></category>
  636. <category><![CDATA[Design]]></category>
  637.  
  638. <guid isPermaLink="false">http://www.zeldman.com/?p=14315</guid>
  639. <description><![CDATA[<p>Val Head spoke at An Event Apart San Francisco last week. Her session, Motion In Design Systems: Animation, Style Guides, and the Design Process, led us through everything designers and developers need to make web animation work for the whole team. </p>
  640. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/11/08/val-head-animation-style-guides-design-process/">Val Head: Web Animation in the Design Process</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  641. ]]></description>
  642. <content:encoded><![CDATA[<p><img class="softinset" src="https://i0.wp.com/www.zeldman.com/wp-content/val-1.jpg?w=640" alt="Val Head" data-recalc-dims="1" /><strong>12 LESSONS from An Event Apart San Francisco – № 5</strong>: <a href="https://aneventapart.com/speakers/val-head">Val Head</a> was the 9th speaker at <a href="https://aneventapart.com/event/san-francisco-2016">An Event Apart San Francisco</a> last week. Her session, <a href="https://aneventapart.com/event/san-francisco-2016#s839">Motion In Design Systems: Animation, Style Guides, and the Design Process</a>, led us through everything designers and developers need to make web animation work for our whole team.</p>
  643. <p>Val covered guidelines for designing animation that fits your brand, making animation part of your design process, and documenting your animation decisions in your style guide for future use.</p>
  644. <h4>It takes a village</h4>
  645. <p>Animation works best when the whole team plans for it. If it’s simply a wish—say on the part of the designer—everyone in the chain will be too busy with higher priority tasks, and the animation won&#8217;t get made.</p>
  646. <p>Which is a pity, because well-considered animations (such as Val showed) can make interactions much easier to understand. Additionally, if choreographed by the entire team as part of a bigger picture, animations can reinforce your brand. (Done without consideration, and without the support of the entire team, they’re more likely to contradict important brand attributes.)</p>
  647. <p>Better animation requires good communication, comprised of…</p>
  648. <ul>
  649. <li>Shared vocabulary</li>
  650. <li>Established animation values</li>
  651. <li>Documentation and repeatability</li>
  652. </ul>
  653. <h4>Deliverables – the things that start conversations</h4>
  654. <p>The first deliverables for animation are conversation starters: storyboards and sketches that help the team envision where there is potential for animation in their user flow, see how an animation could make the screen easier for users to understand, and begin to plan how to animate between screens. Best of all, anyone can create a sketch or storyboard: artistic talent is not required (these are not Pixar animations but simple conveyors of ideas).</p>
  655. <p>In every storyboard, we should draw or describe a trigger (what starts the action?), an action (what takes place?), and a quality (how does it happen?).</p>
  656. <h4>Motion comps and interactive prototypes</h4>
  657. <p>Motion comps answer questions about how the animations should look, move, and behave, and allow for quick iteration. When handing them off to the development team, it’s important to include the duration and delay values; details of the easing used; repeat values, and iteration counts.</p>
  658. <p>Interactive prototypes come next. They allow the team to explore what the interaction will be like to use, decide if it feels right in context, and determine how animations interact with input or real data. Val took us through a number of tools that can be used for prototyping, from apps like Atomic to good old HTML, CSS, and JavaScript.</p>
  659. <h4>Define and document – save future you time and effort</h4>
  660. <p>Interface animations are most effective when they work in concert as part of the bigger picture. Designing and choreographing your web animation efforts from the top down leads to more effective animations that integrate into your design system. And, defining a motion language for your brand can help your team to develop a shared vision from which to work.</p>
  661. <p>Don’t just create animations—define and document them. Define your brand in motion with the same care you take for your logo, style guide, and pattern libraries. Use design principles to inform motion decisions. Study Brand Pillars, Voice &amp; Tone, and Experience Pillars, and build your animation guidelines from there. Animations are best when they’re brand-appropriate and repeatable.</p>
  662. <h4>Get input from everyone</h4>
  663. <p>Having brought us through the rationale for animations and a variety of potential workflows, Val took us deeply into the details that make for effective animations, and ended with a game plan enabling everyone on the team to become an undercover animation superhero.</p>
  664. <p>Tomorrow I’ll be back with more top takeaways from another AEA San Francisco 2016 speaker. The next AEA event, <a href="https://aneventapart.com/event/st-louis-2017">An Event Apart St. Louis</a>, takes place January 30-February 1, 2017</p>
  665. <p>&nbsp;</p>
  666. <p><em><a href="https://medium.com/let-me-repost-that-for-you-zeldman/val-head-web-animation-style-guides-and-the-design-process-7a48fa167294#.cylc3r6kb">Also published in Medium</a>. </em></p>
  667. <p>See also: <a href="http://motionographer.com/2016/10/31/4-tools-for-designing-better-ui-animation-and-when-to-use-them/">4 tools for designing better UI animation</a> by Val Head.</p>
  668. <p>The post <a rel="nofollow" href="http://www.zeldman.com/2016/11/08/val-head-animation-style-guides-design-process/">Val Head: Web Animation in the Design Process</a> appeared first on <a rel="nofollow" href="http://www.zeldman.com">Zeldman on Web &amp; Interaction Design</a>.</p>
  669. ]]></content:encoded>
  670. <post-id xmlns="com-wordpress:feed-additions:1">14315</post-id> </item>
  671. </channel>
  672. </rss>
  673.  

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