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

<channel>
	<title>Tal Leming &#187; Graphic Design</title>
	<atom:link href="http://talleming.com/category/graphic-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://talleming.com</link>
	<description>Tal's Blog</description>
	<lastBuildDate>Tue, 08 Mar 2011 20:39:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>Type Supply Website (The Making of)</title>
		<link>http://talleming.com/2007/09/10/type-supply-website-the-making-of/</link>
		<comments>http://talleming.com/2007/09/10/type-supply-website-the-making-of/#comments</comments>
		<pubDate>Tue, 11 Sep 2007 03:36:44 +0000</pubDate>
		<dc:creator>tal</dc:creator>
				<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://talleming.com/2007/09/10/type-supply-website-the-making-of/</guid>
		<description><![CDATA[I recently launched a new site for my company. I put a lot of thought and work into it, and a few people have asked me questions about the tools I used, why I did some things the way that I did and stuff like that. I love behind-the-scenes, making-of stories, especially about nerdy stuff, [...]]]></description>
			<content:encoded><![CDATA[<p>I recently launched a <a href="http://typesupply.com">new site</a> for my company. I put a lot of thought and work into it, and a few people have asked me questions about the tools I used, why I did some things the way that I did and stuff like that. I love behind-the-scenes, making-of stories, especially about nerdy stuff, so I present to you: <strong>The Making of the Type Supply Website (2007 Edition).</strong></p>

<h3>Design</h3>

<p>My background is in print, but I&#8217;ve designed several websites over the years so designing for the web is not a big change for me. That said, designing for the web has always been a source of minor frustration. I&#8217;ve never been able to express why until recently. <a href="http://subtraction.com">Khoi Vinh</a> articulated it perfectly <a href="http://www.subtraction.com/archives/2007/0816_this_way_to_.php">a few weeks ago</a>:</p>

<blockquote>
  <p>on the Web, design is not a method for implementing narrative</p>
</blockquote>

<p>Exactly! I don&#8217;t have any problem dealing with the new interaction behaviors that the web has brought forth. I struggle with the fact that <em>telling stories</em> is very difficult on the web. I wanted my site to express my personality and get across the passion that I have for what I do. In other words, I wanted to tell the story of my work. I could have just put it all in a paragraph, made a simple image portfolio and been done with it, but that&#8217;s not how I do things. After a ton of experimentation, I settled on a fairly informal design with bright colors, lots of images and a casual tone of voice. Each typeface family has it&#8217;s own subsection where I can expound on the intricacies of ink swells and still have plenty of room to show big images of the typefaces doing what they do best. I don&#8217;t think what I settled on is groundbreaking, but I think it gets across who I am. I hope it does anyway. Please don&#8217;t tell me if it doesn&#8217;t.</p>

<h3>Django</h3>

<p>The earlier versions of my site consisted of static HTML that was either written by hand or generated with <a href="http://corbon.sourceforge.net">Corbon</a>. That sucked. Several years ago I handled the design side of a big PHP/PostgreSQL based website. I know it&#8217;s a cliché at this point, but working with a dynamic system was an eye opener. When I decided that I wanted to do a big Type Supply site, I knew that it had to be database driven.</p>

<p>I&#8217;m fluent in Python. That means that I am legally required to hate PHP. (Kidding!) Thus, I had no interest in dealing with PHP again. I&#8217;ve been monitoring a few Python based web frameworks over the last couple of years. <a href="http://djangoproject.com">Django</a>, <a href="http://turbogears.org">TurboGears</a>, <a href="http://webpy.org">web.py</a>, etc. I decided to go with Django. It is a mature framework with an active development community, excellent documentation, a nice Python API and a clean template syntax. I couldn&#8217;t be happier with it. I had a working version of my site up and running within a few days. Sure, I rewrote it two times after that, but I&#8217;m a little bit of a perfectionist that way.</p>

<p>One of the great things about Django is its template system. Granted, some people argue for other template systems, but I think they are really starting to split hairs on this. It&#8217;s like arguing which ice cream flavor is better: vanilla or chocolate? I don&#8217;t care. I&#8217;m just happy that I have ice cream. Anyway, what was I saying? Oh yeah, the template system. One of the nice things about it is that it is possible to filter data. I&#8217;m using a handful of filters to process all of my text. My text is stored in the database in <a href="http://daringfireball.net/projects/markdown">Markdown</a> syntax. The text is pushed through the Markdown filter and then through the excellent <a href="http://code.google.com/p/typogrify">Typogrify</a>. Thus, my text is stored as plain text, <strong>not</strong> HTML, but I get nicely formatted HTML without doing any hard work.</p>

<p>On and on and on. You get the idea. I &hearts; Django!</p>

<h3>MochiKit</h3>

<p>Up to this point I had never written any JavaScript. Not even a single <code>alert("Hello World!")</code> line. I always thought that I would hate it, but I was pleasantly surprised to learn that I don&#8217;t. It&#8217;s not Python, which I adore, but it isn&#8217;t bad. I wanted some simple effects on my site, fades between images, an <a href="http://typesupply.com/portfolio/typefaces/burbank/lettersetter">interactive LetterSetter interface</a>, etc. I wrote all of these from scratch. Then I wrote them from scratch again. Then I ditched all the code in favor of <a href="http://mochikit.org">MochiKit</a>. Yay MochiKit!</p>

<h3>Coda</h3>

<p>One of the things that has kept me away from web development has been my frustration with the tools used to develop sites. It has been a cobbled together mess. Then, along came <a href="http://panic.com/coda">Coda</a>. Coda made me <strong>want</strong> to work on a new website. In fact, I had designed my new site a few months before Coda was released. It sat stagnant because the thought of jumping back into the web development whirlwind made me ill. I downloaded Coda the day it was released, licensed it a day or so later and started writing the code for my site. <a href="http://daringfireball.net">John Gruber</a> wrote a <a href="http://daringfireball.net/2007/04/coda">thorough review</a> of Coda that explains why it is so good. I do have one minor gripe: compiled Python files show up the file browser. <em>Argh! My eyes!</em> I reported this to Panic. Other than that, I&#8217;m really happy with the application.</p>

<h3>HTML &amp; CSS</h3>

<p>All together now: <em>typography on the web sucks!</em> I&#8217;d write more on this, but I think the dead horse has been flogged enough.</p>

<p>One thing: Safari 3 users get a slightly different design than everyone else. Buttons have rounded corners and main elements have subtle drop shadows. I did all this stuff with the proposed CSS3 attributes that are supported by <a href="http://webkit.org">WebKit</a>. I tried the rounded corner support in Firefox and Camino, but images inside the rounded elements were not properly clipped. Sorry Firefox.</p>

<h3>The End</h3>

<p>I think that&#8217;s it. I don&#8217;t develop websites very often, and it in the past it was torturous, but this was fun. I hope people like the result.</p>
]]></content:encoded>
			<wfw:commentRss>http://talleming.com/2007/09/10/type-supply-website-the-making-of/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

