<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/rss2full.xsl" type="text/xsl" media="screen"?><?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/itemcontent.css" type="text/css" media="screen"?><rss 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:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Ikiru Design</title>
	
	<link>http://www.ikirudesign.com</link>
	<description>Fooling Around with WordPress</description>
	<pubDate>Wed, 17 Sep 2008 18:47:37 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7-beta2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.feedburner.com/ikiru" type="application/rss+xml" /><item>
		<title>Fieldnotes on a WordPress 2.7 Development Build</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/395450105/</link>
		<comments>http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/#comments</comments>
		<pubDate>Wed, 17 Sep 2008 16:14:47 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Ruminations]]></category>

		<category><![CDATA[2.7]]></category>

		<category><![CDATA[fieldnotes]]></category>

		<category><![CDATA[horizontal space]]></category>

		<category><![CDATA[navigation]]></category>

		<category><![CDATA[plugins]]></category>

		<category><![CDATA[screenshots]]></category>

		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/?p=192</guid>
		<description><![CDATA[Over the weekend, I decided to finally install a copy of the WordPress trunk&#8201;&#8212;&#8201;that&#8217;s the currently-being-worked-on version for those not familiar with the term. For need of something to write on that new installation, I noted my first impressions of it. It seems relevant to share as the WordPress team is now soliciting advice about [...]]]></description>
			<content:encoded><![CDATA[<p>Over the weekend, I decided to finally install a copy of the WordPress trunk&thinsp;&#8212;&thinsp;that&#8217;s the currently-being-worked-on version for those not familiar with the term. For need of something to write on that new installation, I noted my first impressions of it. It seems relevant to share as the WordPress team is now <a href="http://www.polldaddy.com/s/A02A1308A9F8D944">soliciting advice about its menu structures</a>.</p>
<p>It worth noting that I did this Saturday. Things have changed since. If you&#8217;re interested, popularly relevant information about development is at <a href="http://wordpress.org/development/">the WordPress Blog</a>. More abbreviated notes, and up-to-the-day changes are tracked <a href="http://wpdevel.wordpress.com/">here</a>.</p>
<p>Because some of my impressions make little sense without visuals, I&#8217;ve included a gallery of the most notable changes that have so far been made in the progress toward 2.7. (Sidenote: first time I&#8217;ve used the gallery in WordPress.)</p>

<a href='http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/fieldtest1/' title='The Dashboard'><img src="http://www.ikirudesign.com/wp-content/uploads/2008/09/fieldtest1-150x150.png" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
<a href='http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/fieldtest2/' title='The Write Page'><img src="http://www.ikirudesign.com/wp-content/uploads/2008/09/fieldtest2-150x150.png" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
<a href='http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/fieldtest3/' title='The Inbox'><img src="http://www.ikirudesign.com/wp-content/uploads/2008/09/fieldtest3-150x150.png" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
<a href='http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/fieldtest4/' title='Install Plugin Page'><img src="http://www.ikirudesign.com/wp-content/uploads/2008/09/fieldtest4-150x150.png" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
<a href='http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/fieldtest5/' title='Choosing among CSS Plugins'><img src="http://www.ikirudesign.com/wp-content/uploads/2008/09/fieldtest5-150x150.png" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
<a href='http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/fieldtest6/' title='Plugin Description'><img src="http://www.ikirudesign.com/wp-content/uploads/2008/09/fieldtest6-150x150.png" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
<a href='http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/fieldtest7/' title='Plugin Installed'><img src="http://www.ikirudesign.com/wp-content/uploads/2008/09/fieldtest7-150x150.png" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
<a href='http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/fieldtest8/' title='The Upgrade Page'><img src="http://www.ikirudesign.com/wp-content/uploads/2008/09/fieldtest8-150x150.png" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
<a href='http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/fieldtest9/' title='The Upgaded Page'><img src="http://www.ikirudesign.com/wp-content/uploads/2008/09/fieldtest9-150x150.png" width="150" height="150" class="attachment-thumbnail" alt="" /></a>

<p>And now my impressions, as originally noted:</p>
<blockquote><p>I don&#8217;t really like how the new version smashes out the horizontal space. Though I doubt the change is nearly as big as it currently seems to me, it&#8217;s undeniable that the compose area fits fewer words per line than did previous (2.6-) versions.</p>
<p>The left side navigation has its pluses and minuses. I like that you can get to any page at all from it, but it&#8217;s also there even when you aren&#8217;t wanting to go to any page.</p>
<p>I think the term Utilities in the sidebar is misguided. &#8220;Manage&#8221; seemed to make more sense, and still does.</p>
<p>The built-in browse and install feature for plugins is pretty unquestionably cool.</p>
<p>The built-in upgrade to WordPress itself seemed to have failed on my one and only attempt. (It has since worked for me, the failure may have been a fluke.)</p>
<p>I think the ability to drag anything on the write page the sidebar is good, but it&#8217;s not as much customizability as I&#8217;d like. Will I ever be able to put a custom field on a post, without having to name that field every time? And be able to put that field right under the title field if I so choose? Until then any changes or not to the Write page will seem rather superficial to me.</p>
<p>There appears to have been few or no changes made to the Themes area thus far.</p>
<p>The dashboard has changed, but right now the utility of the &#8220;Inbox&#8221; and Quick Post sections, both sitting above the news boxes of 2.5+, are open questions.</p></blockquote>
<p>Clearly there&#8217;s no small amount of work left before 2.7 &#8220;ships&#8221; in November (by current plans). That said, I&#8217;m amazed by all the great features slated for inclusion, and I feel so lucky to blog on such a constantly-improving platform.</p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/395450105" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/09/17/fieldnotes-wordpress-27-dev/</feedburner:origLink></item>
		<item>
		<title>Debugging: Random Redirect and WP Super Cache</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/391993477/</link>
		<comments>http://www.ikirudesign.com/2008/09/13/debugging-random-redirect-and-wp-super-cache/#comments</comments>
		<pubDate>Sun, 14 Sep 2008 02:41:37 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Development]]></category>

		<category><![CDATA[design choices]]></category>

		<category><![CDATA[incompatibility]]></category>

		<category><![CDATA[kaleidoscope]]></category>

		<category><![CDATA[plugins]]></category>

		<category><![CDATA[wp super cache]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/?p=133</guid>
		<description><![CDATA[I think the quip, which I most often see attributed to Thomas Fuller, that &#8220;All things are difficult before they are easy&#8221; is so clearly borne out by debugging that the truth of it cannot be doubted. You can easily spend minutes, hours, even days bashing your head against a metaphorical wall only to notice [...]]]></description>
			<content:encoded><![CDATA[<p>I think the quip, which I most often see attributed to Thomas Fuller, that &#8220;All things are difficult before they are easy&#8221; is so clearly borne out by debugging that the truth of it cannot be doubted. You can easily spend minutes, hours, even days bashing your head against a metaphorical wall only to notice that a misplaced colon&thinsp;&#8212;&thinsp;which you of course, didn&#8217;t realize was misplaced&thinsp;&#8212;&thinsp;was the cause of reams of unnecessary pain.</p>
<h3>The Problem: Incompatible Rules</h3>
<p>During my work on Kaleidoscope, that&#8217;s the theme this site is running, I decided that a random post link in the footer would be nice. A quick search yeilded <a href="http://wordpress.org/extend/plugins/random-redirect/">Matt&#8217;s Random Redirect Plugin</a>, which was more than up to the job. Without a need to reinvent the wheel, I just borrowed the core functionality of Matt&#8217;s plugin function and dropped it into my theme&#8217;s functions.php file.</p>
<p>And on my personal test server, it worked well. And when I put it on the Ikiru Demo Blog, there too it worked fine. But I found problems on Ikiru Design. More frustratingly, those problems would sometimes seem to suddenly disappear. (It was only later that I realized that it was whether or not I&#8217;d logged in that was the cause of that disparity.)</p>
<p>As you may suspect from what I&#8217;ve said so far, Ikiru Design has the <a href="http://ocaoimh.ie/wp-super-cache/">WP Super Cache</a> plugin running (though it has rarely needed it). Looking desperately to figure out why my redirect link in the footer worked on the demo blog but not on the main one, I decided to look through their directories.</p>
<h3>Solution One: Changing .htaccess</h3>
<p>Mercifully, I noticed that the .htaccess files were drastically different sizes. And I remembered that SuperCache depends on your making changes to that file. And indeed, comparing the two showed these lines added to Ikiru&#8217;s .htaccess file:</p>
<pre><code># BEGIN WPSuperCache

&lt;IfModule mod_rewrite.c&gt;
RewriteEngine On
RewriteBase /
RewriteCond %{QUERY_STRING} !.*s=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz [L]

RewriteCond %{QUERY_STRING} !.*s=.*
RewriteCond %{HTTP_COOKIE} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html [L]
&lt;/IfModule&gt;

# END WPSuperCache</code></pre>
<p>I now understand what this does, but at first I didn&#8217;t. It looked like a mash of random characters. But I know enough about programming conventions to guess that an &#8220;!&#8221; means not. And I also know enough about this modern world to know to Google things I don&#8217;t understand. &#8220;RewriteRule&#8221; seemed a reasonable phrase to start with.</p>
<p>I&#8217;ll spare you the full narrative of the search, but I&#8217;ll explain what I learned. <code>RewriteCond</code> provides the conditions that determine whether or not a <code>RewriteRule</code> is used by the server. Essentially, if a user trying to access a given file on the server gets through all the conditions in the <code>RewriteCond</code> stack, they&#8217;ll be made to follow the <code>RewriteRule</code>.</p>
<p>In this case, that means that if their query string&thinsp;&#8212;&thinsp;that&#8217;s the <code>?s</code> or <code>?p=187</code> or <code>?random</code> that tells the server what dynamic features are wanted&thinsp;&#8212;&thinsp;doesn&#8217;t start with <code>?s</code>, and if the user doesn&#8217;t have a cookie specifying that they&#8217;ve either logged in or commented, and if the proper static file has been generated, send them that static file. (You see essentially the same rules there twice, the top one is for if you&#8217;re using compression, the other for if you&#8217;re not.) This is exactly how Super Cache is advertised to work.</p>
<p>But it means that the server will ignore the query string <code>?random</code> that Matt&#8217;s Random Redirect function relies on. So the user will get, as I was, the cached version of the index page. And they&#8217;ll get it before Matt&#8217;s plugin has had a chance to well, redirect them.</p>
<p>Having figured that this was what was probably happening, I felt reasonably hopeful that I could finally fix this week-old problem. After all, the random link was working when I was logged in&thinsp;&#8212;&thinsp;thus not making me follow the <code>RewriteRule</code>&thinsp;&#8212;&thinsp;but it was failing when I wasn&#8217;t.</p>
<p>So I added was this line to the <code>RewriteCond</code> stacks:</p>
<pre><code>RewriteCond %{QUERY_STRING} !.*random*</code></pre>
<p>This adds an exclusion, which says that if the url looks something like &#8220;http://www.ikirudesign.com/?random&#8221;, exclude the user from the <code>RewriteRule</code>. Uploading the modified file and opening the link from every conceivable page I could find showed that it was finally working.</p>
<h3>Solution Two: Changing the Function</h3>
<p>But this can&#8217;t be packaged into a theme. Fortunately, a usable but imperfect solution can be. The basic problem is that redirects break with WP Super Cache. The solution is to do this same thing without a redirect.</p>
<p>Essentially, all this take is simplifying Matt&#8217;s Random Redirect Plugin even further. The result was this function:</p>
<pre><code>function sc_safe_random() {
	global $wpdb;
	$query = "SELECT ID FROM $wpdb-&gt;posts WHERE post_type = 'post' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
	$random_id = $wpdb-&gt;get_var( $query );
	return get_permalink($random_id);
}</code></pre>
<p>This is essentially the first three lines of Matt&#8217;s function&thinsp;&#8212;&thinsp;which picks a random post from among those eligible on your blog&thinsp;&#8212;&thinsp;and adds a line that just tells it to pass the permalink for that post to the place where the function is called. Then you simply call the function for your random link, like:</p>
<pre><code>&lt;a href="&lt;?php echo sc_safe_random() ?&gt;"&gt;a random post&lt;/a&gt;
</code></pre>
<p>This solution works, but it&#8217;s got a problem. If I were to click the redirect version into five new tabs from a single page, I&#8217;d receive five tabs each with a different random post in it. If I do the same with this version, I get the same post each time.</p>
<p>The likelihood of someone doing this is obviously questionable, but it&#8217;s a feature that I&#8217;d rather not lose. For that reason, I&#8217;m planning on making sure that I allow a user who doesn&#8217;t have WP Super Cache enabled, or who have implemented Solution One, to use the redirect version. Those who have Super Cache enabled, or who don&#8217;t mind the limitations of this second solution, would be able to continue to use it.</p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/391993477" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/09/13/debugging-random-redirect-and-wp-super-cache/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/09/13/debugging-random-redirect-and-wp-super-cache/</feedburner:origLink></item>
		<item>
		<title>Kaleidoscope 0.7.7</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/382523505/</link>
		<comments>http://www.ikirudesign.com/2008/09/03/kaleidoscope-077/#comments</comments>
		<pubDate>Wed, 03 Sep 2008 17:48:42 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Themes]]></category>

		<category><![CDATA[kaleidoscope]]></category>

		<category><![CDATA[options page]]></category>

		<category><![CDATA[quilts]]></category>

		<category><![CDATA[search]]></category>

		<category><![CDATA[theme updates]]></category>

		<category><![CDATA[wp super cache]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/?p=167</guid>
		<description><![CDATA[I have mixed feelings about posting whenever a single theme is updated, but this is a pretty big one. And it&#8217;s also worth noting that the WordPress Themes Directory got it up less than 24 hours after I uploaded it. Given the large lead time that was needed for 0.7.6, I was pleasantly surprised to [...]]]></description>
			<content:encoded><![CDATA[<p>I have mixed feelings about posting whenever a single theme is updated, but this is a pretty big one. And it&#8217;s also worth noting that the WordPress Themes Directory got it up less than 24 hours after I uploaded it. Given the large lead time that was needed for 0.7.6, I was pleasantly surprised to see that. So anyway, the most important changes are, in a particular order:</p>
<ol class="verboselist">
<li><strong>The theme now has an options page.</strong> Controllable are the accent color&thinsp;&#8212;&thinsp;at Ikiru Design that&#8217;s set to &#8220;orange&#8221;&thinsp;&#8212;&thinsp;which is used one the description in the header and the links in the footer, the display of default gravatars, the display of The Mini Quilt (see #2), and switching to Southern Hemisphere colors.</li>
<li><strong>The Mini Quilt.</strong> The Mini Quilt is a smaller version of the Quilt that appears on Kaleidoscope archives pages. To fit, it sacrifices displaying the Post Titles&thinsp;&#8212;&thinsp;though you&#8217;ll see them on hover&thinsp;&#8212;&thinsp;in favor of offering many more posts than a basic Recent Posts widget would. (And if you want to display both, or have even more control of your sidebar, the quilt will also appear as a potential sidebar widget.)</li>
<li>The <strong>random post link in the footer is now compatible with WP Super Cache.</strong> Because the popular plugin changes a blog&#8217;s redirect rules, the old method&thinsp;&#8212;&thinsp;which required a redirect&thinsp;&#8212;&thinsp;would break when you ran the plugin. The new method, which gets rid of the need for a redirect, will help keep your server load down, and will let readers use the link whether you&#8217;re caching or note. (Also, I&#8217;m working on a post explaining two different workarounds for the problem.)</li>
<li><strong>Fixed a number of visual &#8220;bugs&#8221;.</strong> Two different problems caused the layout of certain pages to break in 0.7.6, with the help of <a href="http://babspace.com/">Babs</a>, those are fixed. A number of little problems have been tackled.</li>
<li>Finally, and this may have been unnoticed by everyone but me, in previous version of Kaleidoscope (and every theme I&#8217;ve made for that matter) the search bar has been outside of the area in the sidebar that is replaced by widget. That is because I didn&#8217;t like the styling of the widget. But now I&#8217;ve overridden the styling of the widget, and am satisfied with it. Essentially, <strong>you finally have the freedom to put the search box where ever you want it in the sidebar.</strong></li>
</ol>
<p>These are some of things I&#8217;d been planning to do on Kaleidoscope and I&#8217;m glad to have finally gotten them out. I&#8217;m sure there are still problems lurking under the surface, and I&#8217;m sure a quick-eyed user will find them quicker than I. If you&#8217;re such a user, please <a href="http://www.ikirudesign.com/contact/">drop me a line</a>.</p>
<p>Oh, <a href="http://wordpress.org/extend/themes/download/kaleidoscope.0.7.7.zip">the download link</a>! And here&#8217;s a link to <a href="http://wordpress.org/extend/themes/kaleidoscope">Kaleidoscope&#8217;s listing in the WordPress Themes Directory</a>.</p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/382523505" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/09/03/kaleidoscope-077/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/09/03/kaleidoscope-077/</feedburner:origLink></item>
		<item>
		<title>My Latest: Kaleidoscope</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/380500848/</link>
		<comments>http://www.ikirudesign.com/2008/09/01/kaleidoscope/#comments</comments>
		<pubDate>Mon, 01 Sep 2008 14:09:59 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Themes]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/?p=88</guid>
		<description><![CDATA[I&#8217;ve been working, on and off for a while, on a theme that translates the date of a post&#8201;&#8212;&#8201;or in the case of multiple, the topmost&#8201;&#8212;&#8201;into a color and uses that to determine the color of the page. This was inspired in no small part by the now-retired look that Shaun Inman used to use.
I [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been working, on and off for a while, on a theme that translates the date of a post&thinsp;&#8212;&thinsp;or in the case of multiple, the topmost&thinsp;&#8212;&thinsp;into a color and uses that to determine the color of the page. This was inspired in no small part by the <a href="http://si10.shauninman.com/">now-retired look</a> that <a href="http://www.shauninman.com/">Shaun Inman</a> used to use.</p>
<p>I honestly don&#8217;t remember when I started working on it, but I wouldn&#8217;t be surprised to find out it began in January. That isn&#8217;t to say that development of this theme has been terribly difficult&thinsp;&#8212;&thinsp;though there were certainly parts I&#8217;ve struggled with&thinsp;&#8212;&thinsp;but also that I&#8217;ve simply been short on time I&#8217;ve been able to devote to the project.</p>
<p>It wasn&#8217;t until Friday, after what felt like a too-long wait, that I  finally saw the then-current version, 0.7.6 in the newly opened WordPress Theme Directory. This release, as signified by it&#8217;s less than 1.0 status, is less than I intend to do with the theme. But I&#8217;m hoping that finally making the project public will force me to spend more time to add the last features that I&#8217;ve been waiting so long to build.</p>
<p>Enough about how my development process works however, let&#8217;s cover the highlights of the theme itself. The primary feature, the one for which it is named, is the algorithm that translates dates into colors. This is done with a few PHP functions which take advantage of cosine curves to generate colors that are generally suited to the time of year. Essentially, the three colors of the red-green-blue system commonly used in HTML, all peak at different times. The blue is at it&#8217;s height around January first, green peaks around April 1, and red peaks around September 1. All of these are estimates, as I&#8217;ve fudged a bit with the peaks and valleys of these curves to give me colors closer to what I want.</p>
<p>Taking advantage of this date-to-color algorithm, I&#8217;ve made my favorite feature, the quilt. The quilt is, as you may guess, a collection of differently colored squares to create a blanket to keep you warm&#8230; err, display your posts. Rather than use the month-divided list-style archives I&#8217;ve built for my themes in the past, I&#8217;ve made a single collection of all posts, with colors serving to give you a rough idea of the date. You can easily tell posts from January from those from August, and you can also tell posts from 2008 are different from those from 2005. Of course, this feature is also made even easier to understand by the fact that the post are themselves shown chronologically in the quilt. The real result of the quilt, however, is that you get a beautiful rendering of your archives.</p>
<p>There are many more little features in this theme. I&#8217;ve added a rather novel system to hide the default gravatars when a user hasn&#8217;t set them. Trackback are seperated from comments so they don&#8217;t break the flow of conversation. The whole archives page is prettier than any I&#8217;ve made. Heck, the theme itself is just prettier than any I&#8217;ve made. And page titles have a novel organization I&#8217;m rather fond of.</p>
<p>Mostly though, I&#8217;m glad to have finally put this out into the world. It&#8217;s still not done, but I simply can&#8217;t continue to sit on it. I&#8217;ll keep you updated about changes I make to it in the future, and I hope to write a few tutorials explaining the most interesting features of Kaleidoscope to anyone interesting in using them in a different context.</p>
<p>You can, of course, see a demo of the theme at the <a href="http://www.ikirudesign.com/demo/index.php?wptheme=Kaleidoscope">Ikiru Demo Blog</a>. Be sure to look at <a href="http://www.ikirudesign.com/demo/index.php?wptheme=Kaleidoscope&amp;urladd=archives">the archives page</a>. (Or you can just look around here, as it   is the theme Ikiru Design is currently using.) There is also <a href="http://wp-themes.com/kaleidoscope">a demo, lacking an archives page</a>, at the WordPress Theme Directory. And you can <a href="http://wordpress.org/extend/themes/download/kaleidoscope.0.7.6.zip">download the theme</a> from there. You can find even more rambling about it at <a href="http://www.ikirudesign.com/themes/kaleidoscope/">the theme&#8217;s page</a>. And if you have anything to tell me about it&thinsp;&#8212;&thinsp;be it bug reports, complaints, or compliments&thinsp;&#8212;&thinsp;feel free to <a href="http://www.ikirudesign.com/contact/">contact me</a>.</p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/380500848" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/09/01/kaleidoscope/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/09/01/kaleidoscope/</feedburner:origLink></item>
		<item>
		<title>The Problem with Mailto:</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/295336846/</link>
		<comments>http://www.ikirudesign.com/2008/05/21/the-problem-with-mailto/#comments</comments>
		<pubDate>Wed, 21 May 2008 21:23:43 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Rantings]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/?p=82</guid>
		<description><![CDATA[uzards (ASA)
As anyone who&#8217;s spent much time surfing the internet can probably tell you, a mailto: link is the kind that usually launches a user&#8217;s email client and has some information&#8201;&#8212;&#8201;at minimum an address, but subjects aren&#8217;t uncommon&#8201;&#8212;&#8201;already filled in.
It sounds benign enough, but I don&#8217;t like it. There are three essential problems with using [...]]]></description>
			<content:encoded><![CDATA[<p class="rightcite"><span><a href="http://www.flickr.com/photos/uzvards/2481348414/">uzards</a> (<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">ASA</a>)</span><img title="muchmail" src="http://www.ikirudesign.com/wp-content/uploads/2008/05/muchmail.jpg" alt="A very large stack of mail." width="240" height="180" /></p>
<p>As anyone who&#8217;s spent much time surfing the internet can probably tell you, a mailto: link is the kind that usually launches a user&#8217;s email client and has some information&thinsp;&#8212;&thinsp;at minimum an address, but subjects aren&#8217;t uncommon&thinsp;&#8212;&thinsp;already filled in.</p>
<p>It sounds benign enough, but I don&#8217;t like it. There are three essential problems with using mailto: links on today&#8217;s internet. The first is a problems for the publisher, the second is a problem for users like me, and the third is a problem for all users. Add those all up, and I&#8217;m rather certain that mailto: links should be used as little as possible.</p>
<p>The most obvious and well known problem is the one posed to the publisher. That is: for nearly as long as there have been spammers on the internet, they&#8217;ve built bots those go around and scrape information from mailto: links. With this information, they do what any sensible spammer will, send you offers to enlarge your penis, get rich quick, win the lottery, and&thinsp;&#8212;&thinsp;if you&#8217;re really lucky&thinsp;&#8212;&thinsp;sign up for totally disgusting forms of pornography.</p>
<p>No one wants this stuff, and so schemes have been imagined to combat the problem. Some are rather low-tech, like creating a broken mailto: link like &#8220;mailto:me[at]me[dot]com.&#8221; This can work, <em>if</em> the sender recognizes that you&#8217;ve broken the link and they need to fix it. A myriad of other, more complex, options exist and yet none of them offer much compelling reason for not abandoning the format altogether.</p>
<p>But honestly, I don&#8217;t really care about the problems a publisher has when they use mailto: links, I have a problem with the inconveniences they cause me.</p>
<p>The first of which, and admittedly a not completely common one, is that I use Gmail as my primary email client. As such, when I (inadvertently) click a mailto: link the computer launches the default email client which I&#8217;ve never used nor configured. This means that I get a useless program launch that lets me compose an unsendable email.</p>
<p>There are work around for this, of course. One of the more elegant is offered for the forthcoming&thinsp;&#8212;&thinsp;but already widely used&thinsp;&#8212;&thinsp;Firefox 3. <a href="http://lifehacker.com/392287/set-firefox-3-to-launch-gmail-for-mailto-links">Gina Trapani explains</a> how a few mildly technical steps can make the browser launch Gmail for mailto: link. But this isn&#8217;t something that the average user of a web-based email client is likely to know about or do, so it hardly solves this problem for those who want to use the mailto: link.</p>
<p>The last gripe was already touched on, but has broader implications than I earlier suggested. I can think of few things worse than navigating around a site and inadvertently launching another program&thinsp;&#8212;&thinsp;whether or not I regularly use that program.</p>
<p>This is usually a result of poor design, but not always. To my mind, the greatest sin is when a site puts a mailto: link in main navigation controls. This wasn&#8217;t too abnormal a decade ago, but mercifully convention now say that such a link should never launch an external program without warning. Some have yet to get that memo about conventions, however.</p>
<p>Though I personally dislike curmudgeonly exhortation from anyone, including myself, sometimes it just feels necessary. Mailto: links are a poor invention when they work perfectly, and a hideous invention when they don&#8217;t work properly.</p>
<p>Personally I&#8217;m a fan of contact forms&thinsp;&#8212;&thinsp;like <a href="http://www.ikirudesign.com/contact/">the one I use</a>. There are a lot of plugins that make it easy to build one for WordPress, the most noted of which is <a href="http://www.deliciousdays.com/cforms-plugin">cforms II</a>. If that&#8217;s too much, you can also simply create a separate page that says Contact, and offers an email address there. Or you could simply make explicitly clear that your email address is behind a mailto: link. I&#8217;d certainly prefer seeing the inelegant &#8220;Contact Me (<a href="mailto:dummyaddress@dummydomain.com">mailto:</a>)&#8221; to the deceptive &#8220;<a href="mailto:dummyaddress@dummydomain.com">Contact Me</a>.&#8221;</p>
<p>Of course as just a random internet crumudgeon, there&#8217;s little reason for you to follow my advice. I accept that. But don&#8217;t tell me I didn&#8217;t warn you when you receive an angry email from a crumudgeon like me.</p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/295336846" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/05/21/the-problem-with-mailto/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/05/21/the-problem-with-mailto/</feedburner:origLink></item>
		<item>
		<title>A Few Weeks with WordPress 2.5</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/276473134/</link>
		<comments>http://www.ikirudesign.com/2008/04/23/a-few-weeks-with-wordpress-25/#comments</comments>
		<pubDate>Wed, 23 Apr 2008 22:40:29 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Ruminations]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/?p=79</guid>
		<description><![CDATA[When WordPress 2.5 came out, I was thinking I&#8217;d offer a narrative of &#8220;how I stopped worrying and learned to love WordPress 2.5.&#8221; That ended up being a little dull. Instead, because we&#8217;re always told that the internet loves lists&#8201;&#8212;&#8201;and at this late date it seems unreasonable to offer something more comprehensive&#8201;&#8212;&#8201;I&#8217;ve got a short [...]]]></description>
			<content:encoded><![CDATA[<p>When WordPress 2.5 came out, I was thinking I&#8217;d offer a narrative of &#8220;how I stopped worrying and learned to love WordPress 2.5.&#8221; That ended up being a little dull. Instead, because we&#8217;re always told that the internet loves lists&thinsp;&#8212;&thinsp;and at this late date it seems unreasonable to offer something more comprehensive&thinsp;&#8212;&thinsp;I&#8217;ve got a short enumerations of the good and bad.</p>
<h3>Good</h3>
<ul>
<li><strong>A New Look</strong>&thinsp;&#8212;&thinsp;Though I wouldn&#8217;t say that all aesthetic changes made to WordPress redound to the good, I&#8217;m satisfied. The new colors are nice, the dashboard&#8217;s been improved, and everything feels better.</li>
<li><strong>Much Better Tag Integration</strong>&thinsp;&#8212;&thinsp;This is a direct descendant of the above point. Now a list of entries shows the tags. Now we get tag suggestions. And the ability to edit tags as a group. All of these are big improvements over the piecemeal support for tags that felt tagged on to 2.3.</li>
<li><strong>Better Media Integration</strong>&thinsp;&#8212;&thinsp;Though I&#8217;ve heard&thinsp;&#8212;&thinsp;and share&thinsp;&#8212;&thinsp;some discontent with the new Flash uploader, it&#8217;s nice that it was rethought. The ability to easily upload many pictures, and to easily create galleries are nice changes.</li>
<li><strong><em>Crucial or Trivial Bonus:</em> Plays nice with Safari/WebKit</strong>&thinsp;&#8212;&thinsp;Anyone who tried using Safari with WordPress before will understand what a nice change this is. Anyone who hasn&#8217;t tried will think this is a silly point.</li>
</ul>
<h3>Bad</h3>
<ul>
<li><strong>The Bugs</strong>&thinsp;&#8212;&thinsp;This may be based solely on the fact that I use custom fields, but I&#8217;ve been having terrible trouble with both scheduling posts and the unnecessary creation of extraneous drafts. These sins can be forgiven, but I am getting rather impatient waiting for a fix.</li>
<li><strong>The New Look</strong>&thinsp;&#8212;&thinsp;A lot of changes to the Write page are for the better, but the dearth of white space on the right side confounds me. Catergories were there previously, and I think there was a number of good reasons for that. Tags, I think, should go there as well. But neither&#8217;s there. As I sidenote: I&#8217;m not really a fan of this Lucidia Grande business in the editor either.</li>
<li><strong>Change is Hard </strong>&thinsp;&#8212;&thinsp;This is more a personal problem, but a lot of people (myself included) have been and slow to accept 2.5. This innate resistance to change is both irrational, and a waste of time.</li>
</ul>
<p>I&#8217;m certainly not going back, and am even less likely to change blogging platforms, so all of this is essentially trivial. But now you know.</p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/276473134" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/04/23/a-few-weeks-with-wordpress-25/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/04/23/a-few-weeks-with-wordpress-25/</feedburner:origLink></item>
		<item>
		<title>The Movement Toward Zoom</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/258543074/</link>
		<comments>http://www.ikirudesign.com/2008/03/26/the-movement-toward-zoom/#comments</comments>
		<pubDate>Wed, 26 Mar 2008 20:43:37 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/2008/03/26/the-movement-toward-zoom/</guid>
		<description><![CDATA[lindseywb (ASA)
Perhaps I&#8217;m the only one who has noticed. Perhaps others have noticed but decided to remain silent. Perhaps others who noticed weren&#8217;t silent, but spoke while I wasn&#8217;t paying attention. (To be fair, a few noticed and spoke up.)
Whatever the case may be, I have an announcement: &#8220;Zoom&#8221; is replacing &#8220;Increase Text Size&#8221; in [...]]]></description>
			<content:encoded><![CDATA[<p class="rightcite"><span><a href="http://www.flickr.com/photos/lindseywb/183408845/">lindseywb</a> (<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">ASA</a>)</span><img src="http://www.ikirudesign.com/wp-content/uploads/2008/03/zoom.jpg" alt="Zoom" /></p>
<p>Perhaps I&#8217;m the only one who has noticed. Perhaps others have noticed but decided to remain silent. Perhaps others who noticed weren&#8217;t silent, but spoke while I wasn&#8217;t paying attention. (To be fair, a <a href="http://alastairc.ac/2006/11/browser-zoom-comparison/">few</a> noticed and spoke up.)</p>
<p>Whatever the case may be, I have an announcement: &#8220;Zoom&#8221; is replacing &#8220;Increase Text Size&#8221; in most browsers. And though I confess to initial ambivalence, I&#8217;m increasingly certain this is a good thing.</p>
<p>If you&#8217;re not sure what I&#8217;m talking about, click on View and look for &#8220;Increase Text Size.&#8221; Can&#8217;t find it: congratulations you&#8217;re using IE7, Opera 9.5, or Firefox 3. (Safari still seems tied to text size.) If you can find it (or a similar), you&#8217;re looking at old technology.</p>
<p>Now, this will all be largely irrelevant to those who don&#8217;t spend hours tinkering with CSS, but this does has some important implications for us that do. Many web designers&thinsp;&#8212;&thinsp;I count myself among them&thinsp;&#8212;&thinsp;have gotten into the habit of sizing as many things as they can with ems.</p>
<p>Sizing with ems allows people who need bigger text to get it, without breaking your design. If your browser still has &#8220;Increase text size,&#8221; you can play with it on this page. You&#8217;ll notice that everything scales. (Well, almost everything. The divider won&#8217;t, more on that choice can be found <a href="http://www.ikirudesign.com/themes/bwo/">here</a>.) With the design I&#8217;m using, this is a relatively unimpressive feat, but it does demonstrate the point.</p>
<p>There are problem with designing with ems, primarily that images&thinsp;&#8212;&thinsp;barring some fancy footwork&thinsp;&#8212;&thinsp;won&#8217;t change like other elements. This is why zoom is much more useful than &#8220;Increase text size:&#8221; it scales images as wells. Further, this means that designers using ems are becoming, essentially, outdated. Using pxs or even pts will now (well really, when &#8220;Zoom&#8221; browsers completely replace &#8220;Increase Text Size&#8221; browsers) have the exact same efficacy as styling with ems.</p>
<p>And now, if your cared, you definitely know. And if you didn&#8217;t, you still know. Congratulations on learning something. <img src='http://www.ikirudesign.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/258543074" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/03/26/the-movement-toward-zoom/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/03/26/the-movement-toward-zoom/</feedburner:origLink></item>
		<item>
		<title>How to Paginate on the Web</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/255126499/</link>
		<comments>http://www.ikirudesign.com/2008/03/20/how-to-paginate-on-the-web/#comments</comments>
		<pubDate>Thu, 20 Mar 2008 20:37:34 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Rantings]]></category>

		<category><![CDATA[nytimes]]></category>

		<category><![CDATA[pages]]></category>

		<category><![CDATA[pagination]]></category>

		<category><![CDATA[slate]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/2008/03/20/how-to-paginate-on-the-web/</guid>
		<description><![CDATA[It&#8217;s a problem that all internet users face from time to time. I, seemingly incapable of reading anything but a computer screen, face this problem all the time.
The problem is essentially this: page views are what determines advertising rates on the internet. The more page views a website has, the more they can charge advertisers. [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s a problem that all internet users face from time to time. I, seemingly incapable of reading anything but a computer screen, face this problem all the time.</p>
<p>The problem is essentially this: page views are what determines advertising rates on the internet. The more page views a website has, the more they can charge advertisers. Thus they have a perverse incentive to stretch even the smallest article over many pages.</p>
<p>I loathe this practice, and as a consequence I&#8217;ve thought about it quite a lot, and so I&#8217;m here to offer the internet some salient advice on the topic.</p>
<ul>
<li><strong>Paginate responsibly.</strong> I offer for you consideration, a list of the <a href="http://www.spinner.com/2008/02/15/best-band-logos-no-25/">top 25 band logos of all time</a>. As the rather famous Jason Kottke prefaced <a href="http://www.kottke.org/remainder/08/03/15235.html">his link to the site</a>, only offering one image per page is absurd. Surely it&#8217;ll give you a massive number of page views for those who are willing to click all the way through, but you also risk a massive number of people quiting after three clicks.</li>
<li><strong>Make a single page view available.</strong> This strike me as a reader as absolutely required, but I&#8217;m appalled by the hordes of respectable sites that refrain from doing so.</li>
<li><strong>If I must, I&#8217;ll use &#8220;Print View.&#8221;</strong> This is a double loss for most publisher, who (thankfully) refrain from putting an ads on their printable page. Unfortunately, these views are also ugly and unoptimized for screen reading (that is, if they were optimized for reading at all).</li>
<li><strong>I&#8217;ll leave if it&#8217;s too hard</strong>. If you offer a single page view, you&#8217;re only half way there. You also need to make it easy to find. Putting it at the top of the page is probably best, putting it at the bottom of the page makes sense. Whatever you do, don&#8217;t hide it or I&#8217;m apt to give up on reading your content entirely.</li>
</ul>
<h3>Practical Examples</h3>
<p><img src="http://www.ikirudesign.com/wp-content/uploads/2008/03/nytimestools.PNG" alt="NYTimes Tools" class="right" />If someone understands how to paginate on the web, it&#8217;s the <a href="http://www.nytimes.com/"><em>New York Times</em></a>. Not only do they offer a single-page view, and not only is there a good amount of line-spacing, but they&#8217;ve made the button easy to find. Right at the top of every single paginated article (and right to the right of this text) they have a convenient &#8220;Single Page&#8221; link for me to click before I even start reading.</p>
<p>Another, but different, style is offered by <a href="http://www.theweeklystandard.com/"><em>The Weekly Standard</em></a>. The conservative weekly&#8217;s website could perhaps use a face lift, but their pagination policy&#8217;s sensible. Though the don&#8217;t offer a simple single page view, they never extend an article past page two. The effect of this is that though a reader must &#8220;turn&#8221; the page, even for long articles you don&#8217;t have to &#8220;turn the page&#8221; 24 times.</p>
<p>Also of note is an online &#8220;magazine&#8221; I love, <a href="http://www.slate.com/"><em>Slate</em></a>. Because I&#8217;ve confessed to being a fan, I can and will now browbeat them a bit. You should know that the average <em>Slate </em>article is one or two pages long. Now consider this: after the first page, right by the pagination links they offer a &#8220;single page view&#8221; that snaps to after the end of page one. <img src="http://www.ikirudesign.com/wp-content/uploads/2008/03/slatepagination.PNG" alt="Slate Pagination" class="left" />This policy is more sensible than the one in use at <a href="http://www.newyorker.com/"><em>The New Yorker</em></a> (where the &#8220;single page&#8221; link in the same position takes you to the top of the single page view), but it&#8217;s flawed. After all, for a two page article&thinsp;&#8212;&thinsp;again, <em>Slate</em>&#8217;s average length&thinsp;&#8212;&thinsp;this has essentially the same effect as click onto page two. If articles were routinely three or more pages long, this would make sense. But as an avid reader I feel confident in saying that this is rarely the case.</p>
<p>Surely it&#8217;s hard to get it right, this choice between pageviews and reader satisfaction. Most websites do an admirable job. But that doesn&#8217;t mean I won&#8217;t still be a little bitter that they aren&#8217;t putting my desires first.</p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/255126499" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/03/20/how-to-paginate-on-the-web/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/03/20/how-to-paginate-on-the-web/</feedburner:origLink></item>
		<item>
		<title>Using Images in your Blog Posts</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/250365025/</link>
		<comments>http://www.ikirudesign.com/2008/03/12/using-images-in-your-blog-posts/#comments</comments>
		<pubDate>Wed, 12 Mar 2008 21:30:15 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/2008/03/12/using-images-in-your-blog-posts/</guid>
		<description><![CDATA[jquiz
I&#8201;&#8212;&#8201;and many other people who sometimes opine on blog design issues&#8201;&#8212;&#8201;think its rather useful to have images on posts. They&#8217;re a quick introduction to your topic, a way to jazz up your text, and a great way stand out at least a little bit.
And if you&#8217;re like me, you&#8217;re not exactly a prolific photographer with [...]]]></description>
			<content:encoded><![CDATA[<p class="rightcite"><span><a href="http://www.flickr.com/photos/jquiz/543625766/">jquiz</a></span><img src="http://www.frozentoothpaste.com/wp-content/uploads/2008/02/optimusprime.jpg" alt="Optimus Prime" /></p>
<p>I&thinsp;&#8212;&thinsp;and many other people who sometimes opine on blog design issues&thinsp;&#8212;&thinsp;think its rather useful to have images on posts. They&#8217;re a quick introduction to your topic, a way to jazz up your text, and a great way stand out at least a little bit.</p>
<p>And if you&#8217;re like me, you&#8217;re not exactly a prolific photographer with thousands of images that you can use for all kinds of topic you might write about. Also, you probably don&#8217;t want to go about buying photos to use. In such a case you have two choices, one legal and one not. (I&#8217;m actually ignoring the existence of free stock photos, because I&#8217;ve never found them terribly useful.)</p>
<p>The illegal&thinsp;&#8212;&thinsp;or at least problematic&thinsp;&#8212;&thinsp;way is to take them from other website. One thing I used to do, was hotlink directly to Yahoo!&#8217;s images. And I&#8217;ve also used Google Image Search, without regard for who owned the image or what have you.  If it looks roughly like I wanted I&#8217;d upload it to my own server and use it.</p>
<p>And so now, assuming we&#8217;re not pirates, we have a problem in need of a solution. And there is a very easy solution: Creative Commons images. As you very well may know, Creative Commons is a license in which the creator give away some&thinsp;&#8212;&thinsp;but crucially not all&thinsp;&#8212;&thinsp;rights to what they&#8217;ve produced.</p>
<p>The easiest and best ways to find Creative Commons licensed images is with a <a href="http://www.flickr.com/search/advanced/">Flickr Advanced Search</a>.  Down on the bottom of that page, you&#8217;ll find an option for Creative Commons licensed images. For myself, I always choose &#8220;Find content to use commercially&#8221; simply because I want the least stringent and problematic license. What you find there doesn&#8217;t exactly leave you home free. Almost all&thinsp;&#8212;&thinsp;perhaps all, I don&#8217;t know&thinsp;&#8212;&thinsp;CC images require a citation. Some also require other things, but this is the most important requirement from a design perspective.</p>
<h3>Designing Images with Citations</h3>
<p class="centercite"><span><a href="http://www.flickr.com/photos/definingdavid/497914730/">DWQ</a></span><img src="http://www.frozentoothpaste.com/wp-content/uploads/2008/03/canadiangeese.JPG" alt="Canadian Geese" /></p>
<p>We&#8217;ve established the need for citations on images you might use on your blog. And there are indeed a number of ways to cite. Many conscientious people lacking some know-how simply add a &#8220;The image on this post is from Mr. Flickr&#8221; at the end their posts. But for myself, I wanted something at least a bit more elegant than that.</p>
<p>For inspiration, I&#8217;d always liked the way that <em>The Economist</em>&#8217;s website displays the citations on its images (see <a href="http://www.economist.com/daily/news/displaystory.cfm?story_id=10837381">random example</a>), and decided to mirror it. There were mild changes I made beyond that&thinsp;&#8212;&thinsp;for my own aesthetic preferences, but that was the layout&thinsp;&#8212;&thinsp;and CSS code&thinsp;&#8212;&thinsp;to which I referred while devising this solution&thinsp;&#8212;&thinsp;which you may notice in the out-of-place-photos of Optimus Prime and Canadian geese, each lazily stolen from Frozen Toothpaste entries (<a href="http://www.frozentoothpaste.com/2008/02/19/be-your-own-protagonist/">here</a> and <a href="http://www.frozentoothpaste.com/2008/03/04/foolishness/">here</a>).</p>
<p>I have two basic ways, both of which work essentially like this in WordPress&#8217;s &#8220;code&#8221; editor for a given post:</p>
<pre><code>&lt;p class="rightcite"&gt;
&lt;span&gt;&lt;a href="http://www.dummyurl.com/"&gt;Dummy Photographer&lt;/a&gt;&lt;/span&gt;
&lt;img src="http://www.myadress.com/images/dummy.jpg" /&gt;
&lt;/p&gt;</code></pre>
<p>As you may be able to tell from this rather simple (X)HTML, this simple creates a paragraph while will carry the styling from the CSS class &#8220;rightcite&#8221;&thinsp;&#8212;&thinsp;more on what that means later. The next line is the photographers name, with a link to the URL that they want used for citation. For our purposes, it doesn&#8217;t really matter what&#8217;s on that line so long as it&#8217;s wrapped with the &#8220;span&#8221; tag, again used for styling. The third line is simply the image, preferably hosted on your servers, though there&#8217;s no reason it must be.</p>
<p>A note: The use of the paragraph (&#8220;p&#8221;) division rather than the more traditional &#8220;div&#8221; simply because WordPress seems to choke on anything but the paragraph division. If you&#8217;re using a different content management system, feel free to see if it can handle the use of a &#8220;div&#8221; rather than a &#8220;p.&#8221;</p>
<p>Now, we must style this stuff so that it looks good on our site:</p>
<pre><code>p.rightcite {
display: block;
float: right;
margin: .1em 0 .1em .5em;
background: #f1f1f1;
padding: .2em;
border: 1px solid black;
}
p.rightcite span {
display: block;
text-align: right;
font-size: .8em;
color: #555;
margin: -.5em 0 -.4em 0;
}</code></pre>
<p>As you may be able to tell, the first set of styles is for every part of the &#8220;rightcite&#8221; paragraph. The crucial things to note are the &#8220;display&#8221; and &#8220;float&#8221; properties. The rest just makes it look the way I want, but those two make the paragraph float to the right.</p>
<p>The second set of styles is for our citation, again the most important part here is the &#8220;display&#8221; attribute, which prevents the citation from floating all over the map. The rest is again mostly for aesthetic concerns.</p>
<p>Now, you may be interested to see a similar thing for a centered image, which is just a bit more complicated.</p>
<pre><code>p.centercite {
display: block;
text-align: center;
margin: .8em auto;
width: 468px;
}</code></pre>
<p>The crucial thing here is the width declaration, which is needed to keep our &#8220;span&#8221; text from floating away. Obviously, by declaring a width for this paragraph you&#8217;ll have to keep your images to that width for proper functioning. You can change that width in an implementation on your own blog, but I wouldn&#8217;t recommend changing it once you&#8217;ve decided what width you&#8217;ll use.</p>
<p>There are some other notable ways to do a similar thing as all this with different methods. The most interesting and prominent in my mind is <a href="http://5thirtyone.com/">Derek Punsalan</a>&#8217;s, which uses custom fields. I&#8217;ll leave <a href="http://5thirtyone.com/archives/875">the explanation of that technique</a> to him.</p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/250365025" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/03/12/using-images-in-your-blog-posts/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/03/12/using-images-in-your-blog-posts/</feedburner:origLink></item>
		<item>
		<title>Tell Me When You Wrote This</title>
		<link>http://feeds.feedburner.com/~r/ikiru/~3/246397024/</link>
		<comments>http://www.ikirudesign.com/2008/03/05/tell-me-when-you-wrote-this/#comments</comments>
		<pubDate>Wed, 05 Mar 2008 22:46:34 +0000</pubDate>
		<dc:creator>david</dc:creator>
		
		<category><![CDATA[Rantings]]></category>

		<guid isPermaLink="false">http://www.ikirudesign.com/2008/03/05/tell-me-when-you-wrote-this/</guid>
		<description><![CDATA[fdecomite
If there&#8217;s one problem in this ever-growing blogosphere, it&#8217;s that sites are so easy to create that no one worries too much when they die. So they continue to sit out here with the living, quickly becoming useless piles of bones that get in the way of the rest of us.
This is a problem in [...]]]></description>
			<content:encoded><![CDATA[<p class="rightcite"><span><a href="http://www.flickr.com/photos/fdecomite/406635986/">fdecomite</a></span><img src="http://www.ikirudesign.com/wp-content/uploads/2008/02/tunneltime.jpg" alt="Tunnels of Time" /></p>
<p>If there&#8217;s one problem in this ever-growing blogosphere, it&#8217;s that sites are so easy to create that no one worries too much when they die. So they continue to sit out here with the living, quickly becoming useless piles of bones that get in the way of the rest of us.</p>
<p>This is a problem in itself, but it&#8217;s one with which we can cope. We can cope so long as these bones aren&#8217;t intentionally made to look more alive than they are. So long as bones show themselves to clearly be bones, we living members are pretty able to avoid those we don&#8217;t really want to look at.</p>
<p>But a problem arises when you hide that your website is a skeleton. When you decide that you&#8217;ll get rid of post times or&thinsp;&#8212;&thinsp;and this is far, far worse&thinsp;&#8212;&thinsp;dates. Then when I come upon your site a quick glance around doesn&#8217;t tell me if I&#8217;m dealing with a skeleton or a living, breathing, changing blog</p>
<p>And if there&#8217;s one thing I less like than a dead blog, it&#8217;s a blog that doesn&#8217;t quickly fess to its deadness. Some otherwise great blogs and themes have this problem. I really like a lot about Brian Gardener&#8217;s <a href="http://www.revolutiontheme.com/">Revolution theme</a>, but I hate that no version puts publication times or dates on all the articles shown on the front page. Perhaps this was intentional or a simple oversight, but I don&#8217;t like it.</p>
<p>This is the internet age when lifespan of content is measured is hours, or&thinsp;&#8212;&thinsp;if we&#8217;re to be very generous&thinsp;&#8212;&thinsp;days. In such an atmosphere not telling me when your content was published is like admitting that you&#8217;re not a part of these exciting and rapidly changing times.</p>
<p>In some situations you could get away without times. <a href="http://www.yahoo.com/">Yahoo!</a>, for example, doesn&#8217;t offer them on it&#8217;s homepage. And the <a href="http://www.washingtonpost.com/">Washington Post</a> and <a href="http://www.latimes.com/">LA Times</a> are both lax about the times their stories were written. But they&#8217;ve got a great deal of built-in trust as well-known sources of information, and arguably important ones. A visitor can easily guess that, at most, the content is a day old.</p>
<p>But visitors to MyRandomSite don&#8217;t know who you are or what you do. They don&#8217;t know that they can trust that you&#8217;re not a pile of bones. So you need to tell them. Not much is needed; seeing &#8220;March 5, 2008&#8221; on a post is enough in most situations. That way I can tell that if nothing else, your site&#8217;s not a pile of bones. Maybe you&#8217;ve not updated in a few days or hours, but I know when you were last seen breathing. In a place where content&#8217;s cheap and credibility costs a great deal, that little bit matters a lot.</p>
<p>So please, bloggers, webmasters, web designer, and spectators, put a time stamp on your content. On your front page. Tell me that you&#8217;re not expired and I&#8217;m more likely to stick around and give what you&#8217;re doing some consideration. Thank you.</p>
<img src="http://feeds.feedburner.com/~r/ikiru/~4/246397024" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.ikirudesign.com/2008/03/05/tell-me-when-you-wrote-this/feed/</wfw:commentRss>
		<feedburner:origLink>http://www.ikirudesign.com/2008/03/05/tell-me-when-you-wrote-this/</feedburner:origLink></item>
	</channel>
</rss><!-- Dynamic Page Served (once) in 2.129 seconds --><!-- Cached page served by WP-Super-Cache -->
