<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tiffany B. Brown &#187; Web design</title>
	<atom:link href="http://tiffanybbrown.com/tag/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://tiffanybbrown.com</link>
	<description>A web log about web development and internet culture with frequent detours into other stuff.</description>
	<lastBuildDate>Fri, 10 Feb 2012 23:35:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Big Boston Warmup: Interactive Infographics done well</title>
		<link>http://tiffanybbrown.com/2009/11/13/big-boston-warmup-interactive-infographics-done-well/</link>
		<comments>http://tiffanybbrown.com/2009/11/13/big-boston-warmup-interactive-infographics-done-well/#comments</comments>
		<pubDate>Fri, 13 Nov 2009 15:23:48 +0000</pubDate>
		<dc:creator>tiffany</dc:creator>
				<category><![CDATA[Internet life]]></category>
		<category><![CDATA[Web Development & Programming]]></category>
		<category><![CDATA[Web design]]></category>
		<category><![CDATA[charity]]></category>
		<category><![CDATA[firstborn]]></category>
		<category><![CDATA[infographics]]></category>
		<category><![CDATA[information design]]></category>

		<guid isPermaLink="false">http://tiffanybbrown.com/?p=2450</guid>
		<description><![CDATA[Via @gsetser: The Big Boston Warm Up, an infographic presentation whose goal is to get you to donate a coat and help keep homeless people and families a little warmer this winter. The experience begins on the home page with a series of graphics that show the circumstances of Boston&#8217;s homeless. It&#8217;s a broad demographic [...]]]></description>
			<content:encoded><![CDATA[<p>Via <a href="http://twitter.com/gsetser/status/5679063615" class="ext">@gsetser</a>: The <a href="http://www.bigwarmup.com/" class="ext">Big Boston Warm Up</a>, an infographic presentation whose goal is to get you to donate a coat and help keep homeless people and families a little warmer this winter.</p>
<p><img src="http://tiffanybbrown.com/images/uploads/2009/11/bigbostonwarmup1.jpg" alt="big boston warm up screen shot" width="600" height="419" class="alignnone size-full wp-image-2451" /></p>
<p><img src="http://tiffanybbrown.com/images/uploads/2009/11/bigbostonwarmup.jpg" alt="another big boston warm up screen shot" width="600" height="419" class="alignnone size-full wp-image-2452" /></p>
<p>The experience begins on the home page with a series of graphics that show the circumstances of Boston&#8217;s homeless. It&#8217;s a broad demographic profile, which is far less effective, in my opinion, than homeless people in their own words. But I can understand the logistical and ethical concerns of featuring videos of homeless people.</p>
<p>In addition to data about Boston&#8217;s homeless, the site includes donation locations both in Boston and nationwide. To further spur you to donate, <a href="http://www.landsend.com/" class="ext">Land&#8217;s End</a> (the company behind this coat drive) points out that coats go to local homeless people. If you donate a coat in Alabama, it goes to a person in Alabama.</p>
<p>But I think the best piece &#8212; the part that lets you really feel like you and your donation have made a difference is the &#8220;Find Your Coat&#8221; feature.</p>
<p><img src="http://tiffanybbrown.com/images/uploads/2009/11/bigbostonwarmup2.jpg" alt="big boston warmup: find your coat" title="bigbostonwarmup2" width="600" height="419" class="alignnone size-full wp-image-2455" /></p>
<p>Yup! Donate a coat, get a number and find out where your coat has gone. I don&#8217;t have a code, so I can&#8217;t tell you what it looks like on the other side. But I am curious to find out. It&#8217;s this tangible tie-in &#8212; one that piques curiosity and interest if you haven&#8217;t donated, and rewards you with warm fuzzies if you have &#8212; that makes this campaign (potentially) very effective.</p>
<p>Site by: <a href="http://www.firstbornmultimedia.com/#/our-portfolio/1064/" class="ext">Firstborn</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://tiffanybbrown.com/2009/11/13/big-boston-warmup-interactive-infographics-done-well/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>E-mail is not embed</title>
		<link>http://tiffanybbrown.com/2009/11/06/e-mail-is-not-embed/</link>
		<comments>http://tiffanybbrown.com/2009/11/06/e-mail-is-not-embed/#comments</comments>
		<pubDate>Fri, 06 Nov 2009 11:00:31 +0000</pubDate>
		<dc:creator>tiffany</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Web design]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[yahoo]]></category>

		<guid isPermaLink="false">http://tiffanybbrown.com/?p=2352</guid>
		<description><![CDATA[I was stymied for several seconds by the interface of this Yahoo! player. I was looking for a share or an embed icon so I could add this video to my blog. I saw an information icon. I saw full screen and volume icons. And I saw an e-mail icon. Let me repeat: I saw [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://tiffanybbrown.com/images/uploads/2009/11/emailisnotembed.png" alt="emailisnotembed" title="emailisnotembed" width="600" height="341" class="alignnone size-full wp-image-2353" /></p>
<p>I was stymied for several seconds by the interface of this Yahoo! player. I was looking for a share or an embed icon so I could add this video to my blog. I saw an information icon. I saw full screen and volume icons. And I saw an e-mail icon. Let me repeat: <strong>I saw an e-mail icon</strong>.</p>
<p>So I clicked the e-mail icon &#8230;</p>
<p><img src="http://tiffanybbrown.com/images/uploads/2009/11/share.png" alt="share" title="share" width="600" height="344" class="alignnone size-full wp-image-2364" /></p>
<p>&#8230; and found the embed code.</p>
<p>To be fair, the e-mail icon does reveal that it&#8217;s an all-purpose &#8220;Share&#8221; link if you hover for a second or so. The problem, however, is that the icon Yahoo! is using is a long-established icon for sending e-mail. What&#8217;s more, Yahoo! is the only major video site that seems to use an e-mail icon as a synonym for a <a href="http://shareicons.com/" class="ext" title="Share icons web site">share icon</a>. </p>
<p>How YouTube does it:</p>
<p><img src="http://tiffanybbrown.com/images/uploads/2009/11/shareyoutube.jpg" alt="shareyoutube" title="shareyoutube" width="567" height="348" class="alignnone size-full wp-image-2367" /></p>
<p>Note the arrow that reveals an iconic representation of their video sharing screen.</p>
<p>How Vimeo does it:</p>
<p><img src="http://tiffanybbrown.com/images/uploads/2009/11/sharevimeo.jpg" alt="sharevimeo" title="sharevimeo" width="570" height="325" class="alignnone size-full wp-image-2369" /></p>
<p>Imagine that! Separate links for sharing and embedding the video.</p>
<p>How DailyMotion does it:</p>
<p><img src="http://tiffanybbrown.com/images/uploads/2009/11/sharedailymotion1.jpg" alt="sharedailymotion" title="sharedailymotion" width="623" height="485" class="alignnone size-full wp-image-2370" /></p>
<p>DailyMotion uses a text menu with a &#8220;URL &#038; Embed code&#8221; link.</p>
<p>I think it&#8217;s safe to say that users expect embed features to be labeled &#8216;Embed&#8217; or &#8216;Share.&#8217; I think it&#8217;s even safer to say that users <strong>don&#8217;t expect</strong> an envelope to mean anything other than e-mail. <strong>E-mail is not embed,</strong> and Yahoo! should redesign their player interface to distinguish between the two functions. </p>
]]></content:encoded>
			<wfw:commentRss>http://tiffanybbrown.com/2009/11/06/e-mail-is-not-embed/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Links for 2009-09-01: PNG optimization, HTML 5 and web typography</title>
		<link>http://tiffanybbrown.com/2009/09/01/links-for-2009-09-01-png-optimization-html-5-and-web-typography/</link>
		<comments>http://tiffanybbrown.com/2009/09/01/links-for-2009-09-01-png-optimization-html-5-and-web-typography/#comments</comments>
		<pubDate>Tue, 01 Sep 2009 15:37:42 +0000</pubDate>
		<dc:creator>tiffany</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Web design]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://tiffanybbrown.com/2009/09/01/links-for-2009-09-01-png-optimization-html-5-and-web-typography/</guid>
		<description><![CDATA[ImageOptim Mac OS X: A fantastic GUI for optimizing PNG images. Drag images to the list and let ImageOptim work its magic. Open source. Baseline A typography-driven CSS grid framework. Includes styles for HTML forms and HTML 5 elements. Typedia Typedia is a resource to classify, categorize, and connect typefaces. Get Ready for HTML 5 [...]]]></description>
			<content:encoded><![CDATA[<dl>
<dt><a href="http://pornel.net/imageoptim/en">ImageOptim</a></dt>
<dd><b>Mac OS X</b>: A fantastic GUI for optimizing PNG images. Drag images to the list and let ImageOptim work its magic. Open source.</dd>
<dt><a href="http://baselinecss.com/">Baseline</a></dt>
<dd>A typography-driven CSS grid framework. Includes styles for HTML forms and HTML 5 elements.</dd>
<dt><a href="http://typedia.com/">Typedia</a></dt>
<dd><q>Typedia is a resource to classify, categorize, and connect typefaces.</q></dd>
<dt><a href="http://www.alistapart.com/articles/get-ready-for-html-5/">Get Ready for HTML 5</a></dt>
<dd>An overview of HTML 5 and some of its niftier features (A pattern attribute? Wha?)</dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://tiffanybbrown.com/2009/09/01/links-for-2009-09-01-png-optimization-html-5-and-web-typography/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Recommended: Bill Scott&#8217;s &#8220;Designing the Rich Web Experience&#8221;</title>
		<link>http://tiffanybbrown.com/2008/07/16/recommended-bill-scotts-designing-the-rich-web-experience/</link>
		<comments>http://tiffanybbrown.com/2008/07/16/recommended-bill-scotts-designing-the-rich-web-experience/#comments</comments>
		<pubDate>Wed, 16 Jul 2008 09:00:50 +0000</pubDate>
		<dc:creator>tiffany</dc:creator>
				<category><![CDATA[Web design]]></category>
		<category><![CDATA[design patterns]]></category>
		<category><![CDATA[user interface]]></category>

		<guid isPermaLink="false">http://tiffanybbrown.com/?p=1329</guid>
		<description><![CDATA[A look at different types of user interface patterns supported by the YUI library.]]></description>
			<content:encoded><![CDATA[<p><object width="512" height="323"><param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.7.1" /><param name="allowFullScreen" value="true" /><param name="bgcolor" value="#000000" /><param name="flashVars" value="id=4515808&#038;vid=1285664&#038;lang=en-us&#038;intl=us&#038;thumbUrl=http%3A//us.i1.yimg.com/us.yimg.com/i/us/sch/cn/v/v3/w694/1285664_320_240.jpeg&#038;embed=1" /><embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.7.1" type="application/x-shockwave-flash" width="512" height="323" allowFullScreen="true" bgcolor="#000000" flashVars="id=4515808&#038;vid=1285664&#038;lang=en-us&#038;intl=us&#038;thumbUrl=http%3A//us.i1.yimg.com/us.yimg.com/i/us/sch/cn/v/v3/w694/1285664_320_240.jpeg&#038;embed=1" ></embed></object><br />
A look at different types of user interface patterns supported by the YUI library.</p>
]]></content:encoded>
			<wfw:commentRss>http://tiffanybbrown.com/2008/07/16/recommended-bill-scotts-designing-the-rich-web-experience/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

