<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	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/"
		>
<channel>
	<title>Comments on: Technorati Redesigns</title>
	<atom:link href="http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/feed/" rel="self" type="application/rss+xml" />
	<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/</link>
	<description>Things that Eric A. Meyer, CSS expert, writes about on his personal Web site; it&#039;s largely Web standards and Web technology, but also various bits of culture, politics, personal observations, and other miscellaneous stuff</description>
	<lastBuildDate>Fri, 19 Mar 2010 00:27:46 -0400</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: justaddwater.dk &#124; Rounded Corners the Technorati Way</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-92351</link>
		<dc:creator>justaddwater.dk &#124; Rounded Corners the Technorati Way</dc:creator>
		<pubDate>Thu, 15 Feb 2007 11:01:20 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-92351</guid>
		<description>[...] info Eric Meyer: Technorati Redesigns (June 2005) Smileycat: CSS Rounded Corners [...]</description>
		<content:encoded><![CDATA[<p>[...] info Eric Meyer: Technorati Redesigns (June 2005) Smileycat: CSS Rounded Corners [...]</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Nicholas Shanks</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-12494</link>
		<dc:creator>Nicholas Shanks</dc:creator>
		<pubDate>Mon, 16 Jan 2006 12:16:13 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-12494</guid>
		<description>The best line in the new design is this one:
&lt;code&gt;&lt;body id=&quot;technorati&quot;&gt;&lt;/code&gt;
Since it allows me to restyle anything I like without the fear of other websites being affected. I really believe everybody should do this, or alternativly that CSS should have a hostname selector, perhaps something like:
&lt;code&gt;.box[@technorati.com] { background-image: none; corner-radius: 8px; box-shadow: 0.2em 0.2em #DDD; }&lt;/code&gt;</description>
		<content:encoded><![CDATA[<p>The best line in the new design is this one:<br />
<code>&lt;body id="technorati"&gt;</code><br />
Since it allows me to restyle anything I like without the fear of other websites being affected. I really believe everybody should do this, or alternativly that CSS should have a hostname selector, perhaps something like:<br />
<code>.box[@technorati.com] { background-image: none; corner-radius: 8px; box-shadow: 0.2em 0.2em #DDD; }</code></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Take My Advice - I&#8217;m Not Using It! &#187; Welcome New Students!</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-8491</link>
		<dc:creator>Take My Advice - I&#8217;m Not Using It! &#187; Welcome New Students!</dc:creator>
		<pubDate>Thu, 10 Nov 2005 23:27:39 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-8491</guid>
		<description>[...] icks of the Trade - Professional secrets from those in the know. 	Eric Meyer discusses the Technorati Redesigns that he and Derek Powazek recently completed.  Technorati [...]</description>
		<content:encoded><![CDATA[<p>[...] icks of the Trade &#8211; Professional secrets from those in the know. 	Eric Meyer discusses the Technorati Redesigns that he and Derek Powazek recently completed.  Technorati [...]</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: High Context Consulting  &#187; Blog Archive   &#187; Technorati Redesign</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-7123</link>
		<dc:creator>High Context Consulting  &#187; Blog Archive   &#187; Technorati Redesign</dc:creator>
		<pubDate>Wed, 05 Oct 2005 12:10:45 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-7123</guid>
		<description>[...] ogging Policies &#187; 		 	 		 			Technorati Redesign 	 			 					Eric Meyer discusses his role in the recent redesign of Technorati. 	I was pleased to have Eric work on [...]</description>
		<content:encoded><![CDATA[<p>[...] ogging Policies &raquo; 		 	 		 			Technorati Redesign 	 			 					Eric Meyer discusses his role in the recent redesign of Technorati. 	I was pleased to have Eric work on [...]</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: T. R. Valentine</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5840</link>
		<dc:creator>T. R. Valentine</dc:creator>
		<pubDate>Sat, 02 Jul 2005 13:48:47 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5840</guid>
		<description>RE: link on &#039;Redesign Watch&#039;, not Technorati

On the home page, in the &#039;Redesign Watch&#039; section is a link to Huntington Banks. I tried to look at it with Opera 8.01 and received &lt;a href=&quot;http://www.huntington.com/home/browserUpgrade.htm&quot; rel=&quot;nofollow&quot;&gt;Recommended Browser Software notice&lt;/a&gt; advising me to &#039;upgrade&#039; to IE6+ or Navigator 7+. Stupid page didn&#039;t even have a charset and couldn&#039;t be analysed by W3C validator because it used an ASCII character.

Good grief.</description>
		<content:encoded><![CDATA[<p>RE: link on &#8216;Redesign Watch&#8217;, not Technorati</p>
<p>On the home page, in the &#8216;Redesign Watch&#8217; section is a link to Huntington Banks. I tried to look at it with Opera 8.01 and received <a href="http://www.huntington.com/home/browserUpgrade.htm" rel="nofollow">Recommended Browser Software notice</a> advising me to &#8216;upgrade&#8217; to IE6+ or Navigator 7+. Stupid page didn&#8217;t even have a charset and couldn&#8217;t be analysed by W3C validator because it used an ASCII character.</p>
<p>Good grief.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: mary</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5839</link>
		<dc:creator>mary</dc:creator>
		<pubDate>Fri, 01 Jul 2005 18:36:55 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5839</guid>
		<description>Wow! Very impressive! Keep up the good work.</description>
		<content:encoded><![CDATA[<p>Wow! Very impressive! Keep up the good work.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Mike S</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5820</link>
		<dc:creator>Mike S</dc:creator>
		<pubDate>Tue, 28 Jun 2005 04:09:24 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5820</guid>
		<description>Thanks for such a quick response! In my efforts to attack the code without getting lost in a sea of CSS, I dove right to the corners by using the Firefox DOM Inspector to examine those areas. In Firefox 1.0.4, the DOM Inspector&#039;s CSS Style Rules view seems to rename the &lt;code&gt;background-position&lt;/code&gt; attribute to the &lt;code&gt;-x-background&lt;/code&gt; attribute I mentioned. When I switch to the Computed Style of the object, though, the background positioning seems to disappear.</description>
		<content:encoded><![CDATA[<p>Thanks for such a quick response! In my efforts to attack the code without getting lost in a sea of CSS, I dove right to the corners by using the Firefox DOM Inspector to examine those areas. In Firefox 1.0.4, the DOM Inspector&#8217;s CSS Style Rules view seems to rename the <code>background-position</code> attribute to the <code>-x-background</code> attribute I mentioned. When I switch to the Computed Style of the object, though, the background positioning seems to disappear.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Matt Robin</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5810</link>
		<dc:creator>Matt Robin</dc:creator>
		<pubDate>Mon, 27 Jun 2005 19:31:16 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5810</guid>
		<description>Hmmmmmmmm *bites lip*

The site is obviously well built throughout and beacon of superb CSS coding. Well done Eric et Al.</description>
		<content:encoded><![CDATA[<p>Hmmmmmmmm *bites lip*</p>
<p>The site is obviously well built throughout and beacon of superb CSS coding. Well done Eric et Al.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Eric Meyer</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5809</link>
		<dc:creator>Eric Meyer</dc:creator>
		<pubDate>Mon, 27 Jun 2005 19:15:19 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5809</guid>
		<description>Richard and Westi: yes, it&#039;s the same technique I demonstrated in the workshop, and included sanitized versions of the markup and CSS on the Survival Kit CD.

Various others: there may be rounding bugs in browsers that cause some odd effects.  We grappled with those and decided that minor presentational oddities were a price worth paying for the benefits.

Riddle: your image didn&#039;t provide any context, so I don&#039;t know what you&#039;re complaining about, let alone how it might be fixed.  Sorry.

Steve: that&#039;s a bug Opera needs to fix.  I think you raise a good question about the accessibility and general advisiability of &quot;bigger means more important&quot;, but that&#039;s independent of Opera&#039;s messing up relative font sizing.

Tobias: that appears to be an encoding problem, with some browsers doing strange things with an unusual character.  There isn&#039;t much I can do about it.  The Technorati gang is going to have to either filter out problematic characters, or else just live with the weirdness.  I did report it to them, so hopefully they&#039;ll come up with a fix.

Mike: I didn&#039;t use any &lt;code&gt;-x-background-{x,y}-position&lt;/code&gt; properties; I simply used &lt;code&gt;background-position&lt;/code&gt; when I needed to alter the position of a background&#039;s origin image.  A quick search of the CSS imported into the Technorati home page confirmed this for me.  If you can point to a Technorati-based CSS file online that contains what you&#039;re talking about, with a complete rule containing the properties in question, that would help a whole lot in providing an answer.
</description>
		<content:encoded><![CDATA[<p>Richard and Westi: yes, it&#8217;s the same technique I demonstrated in the workshop, and included sanitized versions of the markup and CSS on the Survival Kit CD.</p>
<p>Various others: there may be rounding bugs in browsers that cause some odd effects.  We grappled with those and decided that minor presentational oddities were a price worth paying for the benefits.</p>
<p>Riddle: your image didn&#8217;t provide any context, so I don&#8217;t know what you&#8217;re complaining about, let alone how it might be fixed.  Sorry.</p>
<p>Steve: that&#8217;s a bug Opera needs to fix.  I think you raise a good question about the accessibility and general advisiability of &#8220;bigger means more important&#8221;, but that&#8217;s independent of Opera&#8217;s messing up relative font sizing.</p>
<p>Tobias: that appears to be an encoding problem, with some browsers doing strange things with an unusual character.  There isn&#8217;t much I can do about it.  The Technorati gang is going to have to either filter out problematic characters, or else just live with the weirdness.  I did report it to them, so hopefully they&#8217;ll come up with a fix.</p>
<p>Mike: I didn&#8217;t use any <code>-x-background-{x,y}-position</code> properties; I simply used <code>background-position</code> when I needed to alter the position of a background&#8217;s origin image.  A quick search of the CSS imported into the Technorati home page confirmed this for me.  If you can point to a Technorati-based CSS file online that contains what you&#8217;re talking about, with a complete rule containing the properties in question, that would help a whole lot in providing an answer.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Mike S</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5808</link>
		<dc:creator>Mike S</dc:creator>
		<pubDate>Mon, 27 Jun 2005 19:00:25 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5808</guid>
		<description>As a person not lucky enough to have attended the London workshop, I can&#039;t compare these corners to a previous technique. I &lt;em&gt;did&lt;/em&gt; want to ask about the use of &lt;code&gt;-x-background-{x,y}-position&lt;/code&gt; as opposed to &lt;code&gt;background-position&lt;/code&gt;. If I understand correctly, the &lt;code&gt;-x&lt;/code&gt; prefix indicates an experimental CSS attribute, so in what circumstances should one use this sort of experimental attribute instead of an official one? I&#039;d be interested to hear the reasoning behind it; thanks.</description>
		<content:encoded><![CDATA[<p>As a person not lucky enough to have attended the London workshop, I can&#8217;t compare these corners to a previous technique. I <em>did</em> want to ask about the use of <code>-x-background-{x,y}-position</code> as opposed to <code>background-position</code>. If I understand correctly, the <code>-x</code> prefix indicates an experimental CSS attribute, so in what circumstances should one use this sort of experimental attribute instead of an official one? I&#8217;d be interested to hear the reasoning behind it; thanks.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Noah</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5798</link>
		<dc:creator>Noah</dc:creator>
		<pubDate>Fri, 24 Jun 2005 22:23:23 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5798</guid>
		<description>The lines as mentioned in #1 do not extend on the light gray boxes in Safari.</description>
		<content:encoded><![CDATA[<p>The lines as mentioned in #1 do not extend on the light gray boxes in Safari.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Steve Pugh</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5795</link>
		<dc:creator>Steve Pugh</dc:creator>
		<pubDate>Wed, 22 Jun 2005 09:18:21 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5795</guid>
		<description>The tags page http://technorati.com/tags/ demonstrates an Opera bug. Opera has several rounding error bugs and the font-size: 1.03em that&#039;s used for the tag sizing triggers one of them. All the tags appear the same size as the text size is rounded down. 

This also leads to the realisation that &quot;The bigger the text, the more active it is.&quot; isn&#039;t very good accessibility. As the semantics of nested &lt;em&gt; elements is a bit vague (does &lt;em&gt;&lt;em&gt; = &lt;strong&gt;? and similar navel gazing) it&#039;s not certain how a user who doesn&#039;t see the font sizing can gain the same information as one who can. </description>
		<content:encoded><![CDATA[<p>The tags page <a href="http://technorati.com/tags/" rel="nofollow">http://technorati.com/tags/</a> demonstrates an Opera bug. Opera has several rounding error bugs and the font-size: 1.03em that&#8217;s used for the tag sizing triggers one of them. All the tags appear the same size as the text size is rounded down. </p>
<p>This also leads to the realisation that &#8220;The bigger the text, the more active it is.&#8221; isn&#8217;t very good accessibility. As the semantics of nested &lt;em&gt; elements is a bit vague (does &lt;em&gt;&lt;em&gt; = &lt;strong&gt;? and similar navel gazing) it&#8217;s not certain how a user who doesn&#8217;t see the font sizing can gain the same information as one who can.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Riddle</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5794</link>
		<dc:creator>Riddle</dc:creator>
		<pubDate>Wed, 22 Jun 2005 08:10:39 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5794</guid>
		<description>I &lt;strong&gt;don&#039;t like&lt;/strong&gt; new presentation on my site.. I used to have normal &quot;Technocrat&quot; link with img, turned off by CSS... and now ugly .. thing. Look at this please:

http://img279.echo.cx/img279/2848/technorati9iw.png</description>
		<content:encoded><![CDATA[<p>I <strong>don&#8217;t like</strong> new presentation on my site.. I used to have normal &#8220;Technocrat&#8221; link with img, turned off by CSS&#8230; and now ugly .. thing. Look at this please:</p>
<p><a href="http://img279.echo.cx/img279/2848/technorati9iw.png" rel="nofollow">http://img279.echo.cx/img279/2848/technorati9iw.png</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Tobias Parent</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5793</link>
		<dc:creator>Tobias Parent</dc:creator>
		<pubDate>Wed, 22 Jun 2005 05:02:26 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5793</guid>
		<description>Very impressive. Elegant in its simplicity, and complex under the hood. I like it. However, (there&#039;s always a however...) I did notice a glitchy thing happening in one of the news articles. Not sure what was happening, but here&#039;s the HTML from it:

&lt;h4&gt;&lt;a href=&quot;http://www.cnn.com/2005/LAW/06/21/mississippi.killings/index.html&quot; title=&quot;Read this news story&quot;&gt;CNN.com - Former Klansman�found guilty of manslaughter - Jun 21, 2005&lt;/a&gt;&lt;/h4&gt;

For some odd reason, in Firefox v1.0.4, the word &#039;found&#039; is hanging way off the right side of the enclosing box. In Safari, it&#039;s all OK, except that the question mark seems to be some unrecognized code - it&#039;s displayed inline as a question mark in a diamond character. Odd, but thought you&#039;d like to know.

I realise that the articles/news/links aren&#039;t a key part of the design, but if they break the design, there&#039;s (obviously) a problem.

Regards!</description>
		<content:encoded><![CDATA[<p>Very impressive. Elegant in its simplicity, and complex under the hood. I like it. However, (there&#8217;s always a however&#8230;) I did notice a glitchy thing happening in one of the news articles. Not sure what was happening, but here&#8217;s the HTML from it:</p>
<p>&lt;h4&gt;&lt;a href=&quot;http://www.cnn.com/2005/LAW/06/21/mississippi.killings/index.html&#8221; title=&#8221;Read this news story&quot;&gt;CNN.com &#8211; Former Klansman�found guilty of manslaughter &#8211; Jun 21, 2005&lt;/a&gt;&lt;/h4&gt;</p>
<p>For some odd reason, in Firefox v1.0.4, the word &#8216;found&#8217; is hanging way off the right side of the enclosing box. In Safari, it&#8217;s all OK, except that the question mark seems to be some unrecognized code &#8211; it&#8217;s displayed inline as a question mark in a diamond character. Odd, but thought you&#8217;d like to know.</p>
<p>I realise that the articles/news/links aren&#8217;t a key part of the design, but if they break the design, there&#8217;s (obviously) a problem.</p>
<p>Regards!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Peter Foti</title>
		<link>http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5792</link>
		<dc:creator>Peter Foti</dc:creator>
		<pubDate>Tue, 21 Jun 2005 22:37:16 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comment-5792</guid>
		<description>1280 x 1024 resolution: The bottom does not extend all the way to the end of the view port.  Result: the gray box on the bottom has rounded corners on the top, and then square corners on the bottom.  Bug or feature?  You decide. :)
</description>
		<content:encoded><![CDATA[<p>1280 x 1024 resolution: The bottom does not extend all the way to the end of the view port.  Result: the gray box on the bottom has rounded corners on the top, and then square corners on the bottom.  Bug or feature?  You decide. :)</p>
]]></content:encoded>
	</item>
</channel>
</rss>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head profile="http://gmpg.org/xfn/1">
<title>meyerweb.com</title>
<link rel="openid.server" href="http://www.myopenid.com/server">
<link rel="openid.delegate" href="http://emeyer.myopenid.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="shortcut icon" href="/favicon.ico"><link rel="home" href="http://meyerweb.com/" title="Home" ><link rel="stylesheet" href="http://meyerweb.com/ui/meyerweb.css" type="text/css" media="screen, projection"><link rel="stylesheet" href="http://meyerweb.com/ui/theme.css" type="text/css" media="screen, projection" id="themeLink"><link rel="stylesheet" href="http://meyerweb.com/ui/print.css" type="text/css" media="print"><script src="http://meyerweb.com/ui/addresses.js" type="text/javascript"></script><link rel="stylesheet" href="/ui/wordpress.css" type="text/css" media="screen">
<link rel="stylesheet" href="/ui/tfe.css" type="text/css" media="screen">
<link rel="stylesheet" href="/ui/home.css" type="text/css" media="screen">
<link rel="alternate" type="application/rss+xml" title="Thoughts From Eric" href="/eric/thoughts/rss2/full" />
<link rel="alternate" type="application/rss+xml" title="Thoughts From Eric (only technical posts)" href="/eric/thoughts/category/tech/rss2/full" />
<link rel="alternate" type="application/rss+xml" title="Thoughts From Eric (only personal posts)" href="/eric/thoughts/category/personal/rss2/full" />
<link rel="alternate" type="application/rss+xml" title="Distractions" href="/eric/thoughts/recent-links/rss2" />
<link rel="alternate" type="application/rss+xml" title="Excuse of the Day" href="/feeds/excuse/rss20.xml" />
</head>
<body id="www-meyerweb-com" class="hpg">

<div id="sitemast"><h1><a href="/"><span>meyerweb</span>.com</a></h1></div><div id="search"><h4>Exploration</h4><!-- SiteSearch Google --><form method="get" action="http://www.google.com/custom" target="_top"><div><input type="hidden" name="domains" value="meyerweb.com"></input><label for="sbb" style="display: none">Submit search form</label><input type="submit" name="sa" value="Google Search" id="sbb"></input><label for="sbi" style="display: none">Enter your search terms</label><input type="text" name="q" size="31" maxlength="255" value="" id="sbi"></input><p><input type="radio" name="sitesearch" value="meyerweb.com" checked id="ss1"></input><label for="ss1" title="Search meyerweb.com">meyerweb.com</label><input type="radio" name="sitesearch" value="" id="ss0"></input><label for="ss0" title="Search the Web">Web</label></p><input type="hidden" name="client" value="pub-3772084027748653"></input><input type="hidden" name="forid" value="1"></input><input type="hidden" name="ie" value="ISO-8859-1"></input><input type="hidden" name="oe" value="ISO-8859-1"></input><input type="hidden" name="safe" value="active"></input><input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input><input type="hidden" name="hl" value="en"></input></div></form><!-- SiteSearch Google --><!-- <form method="get" action="http://www.google.com/custom"><div><input type="submit" name="sa" value="Search"><input type="text" name="q" size="20" maxlength="255" value=""><input type="hidden" name="sitesearch" value="meyerweb.com"></div></form><small><a href="http://www.google.com/search">Powered by Google</a></small> --></div><div id="main"><div class="skipper">Skip to: <a href="#extra">site navigation/presentation</a></div><div class="skipper">Skip to: <a href="#thoughts">Thoughts From Eric</a></div>
<div id="thoughts">


<div class="entry">
<h3><a href="http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/" rel="bookmark" title="Permanent Link: Technorati Redesigns">Technorati Redesigns</a></h3>
<ul class="meta">
<li class="date">Tue 21 Jun 2005</li>
<li class="time">0102</li>
<li class="cat"><a href="http://meyerweb.com/eric/thoughts/category/personal/projects/" title="View all posts in Projects" rel="category tag">Projects</a><br> <a href="http://meyerweb.com/eric/thoughts/category/tech/redesign/" title="View all posts in Redesign" rel="category tag">Redesign</a></li>
<li class="cmt"><a href="http://meyerweb.com/eric/thoughts/2005/06/21/technorati-redesigns/#comments">19 responses</a></li>
<li></li><li></li></ul>

<div class="text">
<p>
It&#8217;s the time for redesigns, I guess&#8212;<a href="http://meyerweb.com/eric/thoughts/2005/06/18/cnn-redesigns/">CNN did it</a> over the weekend, and now <a href="http://technorati.com/">Technorati</a> has taken its beta design final.  I&#8217;m proud to say I had a part in making Technorati&#8217;s new look possible.  The graphic design was done by <a href="http://powazek.com/" rel="acquaintance met">Derek Powazek</a>, and from his graphic comp files I produced the XHTML and CSS.  Then I had to run the <a href="http://tantek.com/" rel="friend colleague muse met">Tantek</a> gauntlet; the job wasn&#8217;t done until he approved of the code I&#8217;d produced.
</p>
<p>
If you dig under the hood of the new design, you&#8217;ll probably find things you&#8217;d have done differently.  I&#8217;m not going to go into a detailed post-mortem here, but suffice to say that every choice was made within the project&#8217;s defined constraints.  So when you see, for example, a bunch of <code>b</code> elements used to create the corners, that approach was the best choice for the project: it best satisfied the concerns and demands of the various people involved.
</p>
<p>
This is not to say that my choices were the best for other projects with similar design demands but different technical demands.  They aren&#8217;t.  At a certain level, there are no canonically right answers.  There may be a whole spectrum of related solutions, where one variation is better for this project and another for that one.  And people like me, despite all their experience and knowledge, don&#8217;t always hit the right answer on the first try.  My initial approach to the corners is not what you see in the final markup.
</p>
<p>
That said, I am pleased with how I combined positioning and sprite-like styling to get the corners to work.  I know each technique has been done before, but I&#8217;m not aware of previous combinations of the two.  So that&#8217;s definitely a point of pride.  I hope to find time to document the details of this particular corner solution, along with variant approaches.
</p>
<p>
I&#8217;d like to thank Derek and the rest of the Technorati team for letting me be a part of the redesign project, and for giving me a chance to flex my creative and technical muscles.
</p>
</div>

</div>

</div>
<p style="font-size: 90%; text-align: right; margin-top: 0.5em; padding-top: 0;">(If you care, there's even an <a href="/eric/thoughts/page/2/">archive of previous thoughts</a>...)</p>

</div><div id="extra"><div class="panel" id="archipelago"><h4>Identity Archipelago</h4><ul><li><a href="http://flickr.com/photos/meyerweb/" rel="me">Flickr</a></li><li><a href="http://twitter.com/meyerweb/" rel="me">Twitter</a></li><li><a href="http://dopplr.com/traveller/meyerweb">Dopplr</a></li><li><a href="http://www.linkedin.com/in/meyerweb" rel="me">LinkedIn</a></li><li><a href="http://technorati.com/profile/emeyer" rel="me">Technorati</a></li></ul></div><div class="panel" id="pointers"><h4>Projects Elsewhere</h4><ul><li><a href="http://aneventapart.com/">An Event Apart</a></li><li><a href="http://complexspiral.com/">Complex Spiral Consulting</a></li><li><a href="http://www.webassist.com/go/css/emeyer/">CSS Sculptor</a></li><li><a href="http://css-discuss.org/">css-discuss</a></li><li><a href="http://microformats.org/">Microformats</a></li><li><a href="http://s5project.org/">S5</a></li></ul></div><div class="panel" id="tour"><ul><li><a href="http://fray.com/issue3/"><img src="http://fray.com/images/i3c.gif" alt="Fray Contributor (Issue 3: Sex &amp; Death)" /></a></li><!-- <li><a href="http://www.webassist.com/go/css/emeyer/"><img src="/pix/CS_ad_180x109.jpg" alt="CSS Sculptor for Dreamweaver" style="max-width: 100%;" /></a></li> --></ul></div><div class="panel">
<h4>Recently Tweeted</h4>
<p class="more"><a href="http://twitter.com/meyerweb">see more</a></p>
<p>Now that Congress has passed health insurance reform, is there any sign they're thinking about reforming health care as well? <small>&#8211;tweeted 5 hours, 55 minutes ago</small></p>
</div><div id="sideblog" class="panel">
<h4>Distractions</h4>
<p class="more">
<a href="/eric/thoughts/recent-links/">archive</a>
</p>
<ul>
<li><a href="http://tweetagewasteland.com/2010/03/my-head-is-in-the-cloud/" title="March 18 | &#8220;I sense that my addiction to the realtime stream is only making room for the consumption of a faster stream.&#8221;">My Head is in the Cloud</a> <small>[via <a href="http://daringfireball.net/">John</a>]</small></li>
<li><a href="http://8bitnyc.com/" title="March 17 | All of a sudden I want to establish a mission in Central Park and negotiate with the natives for gold and food.">8-Bit NYC</a></li>
<li><a href="http://www.youtube.com/watch?v=nFicqklGuB0&amp;feature=player_embedded" title="March 12 | Wry comment expressing my appreciation of the creative derivativeness of this video and its uncanny accuracy in mocking common tropes.">Academy Award Winning Movie Trailer</a></li>
<li><a href="http://www.youtube.com/watch?v=414TmP12WAU" title="March 9 | &#8220;Apple juice&#8230; for half price!&#8221;  More like twice PRICELESS.  (Note: If you&#8217;re at work, don your headphones.)">Happy in Paraguay</a> <small>[via <a href="http://unstoppablerobotninja.com/">Ethan</a>]</small></li>
<li><a href="http://www.youtube.com/watch?v=9V5ubAOeOBk&amp;feature=player_embedded" title="February 10 | This is approximately the best thing ever.">U900 -Walk Don&#8217;t Run (Isogabamaware)</a></li>
<li><a href="http://www.456bereastreet.com/archive/201002/sifr_default_css_hides_content_from_at_least_one_screen_reader/?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A 456bereastreet %28456 Berea Street%29" title="February 8 | -9999px comes through again, but I really wish we were beyond that kind of thing.">sIFR default CSS hides content from at least one screen reader</a></li>
<li><a href="http://www.macosxhints.com/article.php?story=20100117064356428" title="February 8 | Storing this for future use.">Take a picture with the iSight camera when a folder is opened</a></li>
<li><a href="http://mingle2.com/blog/view/web-developer-mind" title="February 4 | Mostly valid.  (SEE WHAT I DID THERE?)">The Mind of a Web Developer: An Illustrated Diagram</a></li>
<li><a href="http://www.theonion.com/content/news/science_channel_refuses_to_dumb" title="January 28 | &#8220;Punkin Chunkin, for Christ&#8217;s sake&#8230; What more do you people want?&#8221;">Science Channel Refuses To Dumb Down Science Any Further</a></li>
<li><a href="http://www.mailchimp.com/blog/project-omnivore-declassified/" title="January 27 | Sounds like quite a feat.  But I wonder how we&#8217;d feel if Microsoft or Google announced the same kind of thing on their e-mail services.">MailChimp&#8217;s Project Omnivore: Declassified</a></li>
<li><a href="http://www.politifact.com/truth-o-meter/statements/2010/jan/25/carolyn-maloney/congresswoman-says-democratic-presidents-create-mo/" title="January 26 | &#8220;Obviously, luck matters a lot, but when there is a consistent pattern over more than 60 years, it starts to look like more than just luck.&#8221;">Congresswoman says Democratic presidents create more private-sector jobs</a></li>
<li><a href="http://www.ted.com/talks/taylor_mali_what_teachers_make.html" title="January 25 | Truth.">Taylor Mali: What teachers make</a></li>
<li><a href="http://notebook.johnmartz.com/how-websites-work?c=1" title="January 22 | At last, the truth is out and I can stop pretending:  beatific monkeys are what makes it all go.">How websites work</a></li>
</ul>
</div>
<div class="panel" id="advisory">
<div class="guarded">
<a href="http://blogadvisorysystem.com/"><img src="/pix/bas/guarded.png" alt="Blog Advisory System Alert Level: Guarded"></a>
</div>
</div>

<div class="panel" id="excuse">
<h4>The <a href="/feeds/excuse/">excuse of the day</a> is</h4>
<p>Republicans</p>
</div>

<div class="panel" id="extras">
<h4>Extras</h4>
<ul>
<li><a href="/feeds/">Feeds</a> &#8226;</li>
<li><a href="/eric/faq.html">FAQ</a> &#8226;</li>
<li><a href="/family.html">Family</a></li>
</ul>
</div>

</div>

<div id="navigate">
<h4>Navigation</h4>
<ul id="navlinks">
<li id="archLink"><a href="/eric/thoughts/">Archives</a></li>
<li id="cssLink"><a href="/eric/css/">CSS</a></li>
<li id="toolsLink"><a href="/eric/tools/">Toolbox</a></li>
<li id="writeLink"><a href="/eric/writing.html">Writing</a></li>
<li id="speakLink"><a href="/eric/talks/">Speaking</a></li>
<li id="otherLink"><a href="/other/">Leftovers</a></li>
<li id="aboutsite"><a href="/ui/about.html">About this site</a></li>
</ul>
</div>

<div id="footer">
<p class="sosumi">All contents of this site, unless otherwise noted, are &copy;1995-2008 <strong>Eric A. and Kathryn S. Meyer</strong>.  All Rights Reserved.</p>
<p>"<a href="/eric/thoughts/">Thoughts From Eric</a>" is powered by the &uuml;bercool <a href="http://wordpress.org/">WordPress</a></p>
</div>
</body>
</html>
