<?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>Philly Design Blog &#187; websites</title>
	<atom:link href="http://www.phillydesignblog.com/cat/websites/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.phillydesignblog.com</link>
	<description></description>
	<lastBuildDate>Sun, 11 Sep 2011 16:40:16 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Want To Change Your TypePad Domain Mapping?</title>
		<link>http://www.phillydesignblog.com/2009/08/typepad-domain-mapping/</link>
		<comments>http://www.phillydesignblog.com/2009/08/typepad-domain-mapping/#comments</comments>
		<pubDate>Sun, 23 Aug 2009 10:58:24 +0000</pubDate>
		<dc:creator>phillydesign</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[Imagic Digital]]></category>
		<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http://www.phillydesignblog.com/?p=503</guid>
		<description><![CDATA[(Note: This post somewhat of a story, but also has some useful code design info.) Domain mapping is a handy and common way to set up a custom URL for your hosted blog, such as one on TypePad.com, WordPress.com or Blogger.com. This allows you to use MyExample.com to reference your blog, instead of something like [...]]]></description>
			<content:encoded><![CDATA[<p>(Note: This post somewhat of a story, but also has some useful code design info.)</p>
<p>Domain mapping is a handy and common way to set up a custom URL for your hosted blog, such as one on <a href="http://www.typepad.com">TypePad.com</a>, <a href="http://www.wordpress.com">WordPress.com</a> or <a href="http://www.blogger.com">Blogger.com</a>.</p>
<p>This allows you to use <span style="color: #808000;">MyExample.com</span> to reference your blog, instead of something like <span style="color: #808000;">myexample.typepad.com</span>.</p>
<p><a href="http://www.phillydesignblog.com/wp-content/uploads/2009/08/typepad-better1.jpg"><img class="alignright size-medium wp-image-535" title="Better?" src="http://www.phillydesignblog.com/wp-content/uploads/2009/08/typepad-better1-300x242.jpg" alt="Better?" width="300" height="242" /></a>But what if you want to <em>change </em>the name you originally set-up to something else? In the case of TypePad (and likely other platforms), this can cause serious issues.</p>
<p>All of your posts and images use the original name, such as in search engine listings, on trackbacks and more. So if you change the name, <strong>all </strong>of your old links will break. You might loose a bunch of RSS feeds that used the old links. And also, <strong>all </strong>of the images in your posts will be missing!</p>
<p>I ran into this issue for a client last week. A popular blog, with an average of 1,500 unique visitor per day, and over 2,100 posts, was essentially broken. Not acceptable.</p>
<p>Because of TypePad&#8217;s inept support I was forced to find a solution, which can likely be adapted for use on other hosted blogging systems as well. The answer lies in some simple <strong>.htaccess</strong> code. Read on to find out more.<span id="more-503"></span></p>
<p><a href="http://www.phillydesignblog.com/wp-content/uploads/2009/08/support-not3.jpg"><img class="aligncenter size-full wp-image-545" title="Not Support" src="http://www.phillydesignblog.com/wp-content/uploads/2009/08/support-not3.jpg" alt="Not Support" width="500" height="109" /></a></p>
<p>First, a rant against TypePad. TypePad doesn&#8217;t have live <a href="http://support.sixapart.com/cgi-bin/sixapart.cfg/php/enduser/ask.php?p=tp">support</a>. <strong>At all</strong>. Six Apart, the parent company, doesn&#8217;t even maintain their own <a href="http://getsatisfaction.com/sixapart/topics/typepad_community_forum">support forums</a>. With no other recourse to solve the issue, I opened an online help ticket.</p>
<p>We were told that the issue was a tough one, and would be looked at by technical support. After a week of back and forth, asking if there was any progress, TypePad finally responded that there was nothing at all they could do.</p>
<p><a href="http://twitter.com/phillydesign/statuses/3363263048"><img class="alignright size-medium wp-image-552" title="Asking for help" src="http://www.phillydesignblog.com/wp-content/uploads/2009/08/sixapart-tweet-299x143.jpg" alt="Asking for help" width="299" height="143" /></a>Sorry, they said, but even though you have been customers for over 5 years, tough luck.</p>
<p>I tried asking <a href="http://twitter.com/sixapart">@sixapart</a> on Twitter for help. No response <strong>whatsoever</strong>.</p>
<p>Ouch! I called <a href="http://www.godaddy.com">GoDaddy.com</a>, where the domain name is registered, to see if their live support team had any ideas. While they were helpful and friendly as ever, they didn&#8217;t see how to fix the problem. But that&#8217;s when I myself realized how to do it.</p>
<p>An .htaccess file is a text-only file that web servers read first, before any other pages on a site. Turns out it&#8217;s a common way to fix issues that might occur when you switch your domain name!</p>
<p>In TypePad, all blog posts live in a sub-folder of your main domain, like &#8220;my_example&#8221;. In this case, the original links, now broken, were <span style="color: #808000;">www.myexample.com/my_example/my-post.html</span>, and the new links, after changing domain mapping, were <span style="color: #808000;">blog.myexample.com/my_example/my-post.html</span>.</p>
<p>Very similar links, and a simple replacement: just find anything with the /my_example/ in its address and send it to blog. instead of www.</p>
<p>To create an .htaccess file, all you need is a simple text editor. Open the file, type in your code, and save with the extension .htaccess. You might have to give the file a name, like a.htaccess, but just make sure to remove the preceeding &#8220;a&#8221; before uploading to your webserver. [More on .htaccess files <a href="http://www.tamingthebeast.net/articles3/spiders-301-redirect.htm">here</a> and <a href="http://www.javascriptkit.com/howto/htaccess.shtml">here</a>.]</p>
<p>For this specific redirect, the code in the .htaccess file is the following:</p>
<pre>Redirect 301 /my_example/ http://blog.myexample.com/my_example/</pre>
<pre>.</pre>
<p>It worked to fix all the old, cached, search-engine-indexed, mentioned-by-others posts&#8217; links. However, images are a separate line of code.</p>
<p>In TypePad, all images you upload to their severs are stored not in your /my_example/ folder, but in a directory called /.a/</p>
<p>Why? Who knows. But all that means is we need another line in the .htacess file:</p>
<pre>Redirect 301 /.a/ http://blog.myexample.com/.a/</pre>
<pre>.</pre>
<p>Upload the file to the root level of your site, and done. Phew. SixApart, please take note, and save other customers some anguish.</p>
<div class="none"><div class="g-plusone" data-href="http://www.phillydesignblog.com/2009/08/typepad-domain-mapping/" size="medium" count="true"></div></div>]]></content:encoded>
			<wfw:commentRss>http://www.phillydesignblog.com/2009/08/typepad-domain-mapping/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>All It&#8217;s Cracked Up To Be</title>
		<link>http://www.phillydesignblog.com/2009/08/all-its-cracked-up-to-be/</link>
		<comments>http://www.phillydesignblog.com/2009/08/all-its-cracked-up-to-be/#comments</comments>
		<pubDate>Fri, 21 Aug 2009 15:55:46 +0000</pubDate>
		<dc:creator>phillydesign</dc:creator>
				<category><![CDATA[Imagic Digital]]></category>
		<category><![CDATA[restaurants]]></category>
		<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http://www.phillydesignblog.com/?p=496</guid>
		<description><![CDATA[I like to be inspired by my clients. One of the best things about running your own business is the relative luxury of choosing with whom you work. While sometimes time constraints force compromises in design and code, the best case scenario is when there is opportunity to address details. Aki and Alex have strong [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.ideasinfood.com"><img class="aligncenter size-full wp-image-500" title="Ideas in Food" src="http://www.phillydesignblog.com/wp-content/uploads/2009/08/ideasinfood_screensho_smt.jpg" alt="Ideas in Food" width="500" height="355" /></a></p>
<p>I like to be inspired by my clients.</p>
<p>One of the best things about running your own business is the relative luxury of choosing with whom you work.</p>
<p>While sometimes time constraints force compromises in design and code, the best case scenario is when there is opportunity to address details.</p>
<p>Aki and Alex have strong convictions and are extremely particular. Yet they are also avid explorers and open to new ideas.</p>
<p>This comes across in their food. Hopefully also in their new website.</p>
<p><a href="http://www.ideasinfood.com">www.ideasinfood.com</a></p>
<div class="none"><div class="g-plusone" data-href="http://www.phillydesignblog.com/2009/08/all-its-cracked-up-to-be/" size="medium" count="true"></div></div>]]></content:encoded>
			<wfw:commentRss>http://www.phillydesignblog.com/2009/08/all-its-cracked-up-to-be/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ben</title>
		<link>http://www.phillydesignblog.com/2009/04/ben/</link>
		<comments>http://www.phillydesignblog.com/2009/04/ben/#comments</comments>
		<pubDate>Tue, 21 Apr 2009 22:05:42 +0000</pubDate>
		<dc:creator>phillydesign</dc:creator>
				<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http://www.phillydesignblog.com/?p=232</guid>
		<description><![CDATA[A wonderful example of great web design, both visually and interactively. Great look, and great feel. I even submitted a word-color-story of my own. This is what I am aiming towards in my work. Created by AKQA. Thanks to Evolve for posting this inspiration.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.paintwithben.com" target="_blank"><img class="alignright size-full wp-image-233" title="paint with ben" src="http://www.phillydesignblog.com/wp-content/uploads/2009/04/paintwithben.jpg" alt="paint with ben" width="350" height="250" /></a>A <a href="http://www.paintwithben.com/" target="_blank">wonderful example </a>of great web design, both visually and interactively.</p>
<p>Great look, and great feel.</p>
<p>I even submitted a word-color-story of my own.</p>
<p>This is what I am aiming towards in my work.</p>
<p>Created by <a href="http://www.akqa.com/" target="_blank">AKQA</a>.</p>
<p>Thanks to <a href="http://evolve.reintroducing.com/2009/04/21/inspiration/inspiration-benjamin-moore-ben/" target="_blank">Evolve</a> for posting this inspiration.</p>
<div class="none"><div class="g-plusone" data-href="http://www.phillydesignblog.com/2009/04/ben/" size="medium" count="true"></div></div>]]></content:encoded>
			<wfw:commentRss>http://www.phillydesignblog.com/2009/04/ben/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Semantics vs Aesthetics</title>
		<link>http://www.phillydesignblog.com/2009/04/semantics-vs-aesthetics/</link>
		<comments>http://www.phillydesignblog.com/2009/04/semantics-vs-aesthetics/#comments</comments>
		<pubDate>Thu, 09 Apr 2009 17:34:28 +0000</pubDate>
		<dc:creator>phillydesign</dc:creator>
				<category><![CDATA[Imagic Digital]]></category>
		<category><![CDATA[philosophy]]></category>
		<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http://www.phillydesignblog.com/?p=146</guid>
		<description><![CDATA[The separation of content and style is a philosophy that is strongly encouraged in design, and especially web design these days.  The main idea is that this allows great flexibility. Colors and styles can be changed without affecting actual content &#8212; text or photos.  Different styles can be applied depending on how a visitor is [...]]]></description>
			<content:encoded><![CDATA[<p>The separation of content and style is a philosophy that is strongly encouraged in design, and especially web design these days.  The main idea is that this allows great flexibility. Colors and styles can be changed without affecting actual content &#8212; text or photos.  Different styles can be applied depending on how a visitor is viewing, such as via computer, mobile phone, or as a printed out version of a page.</p>
<p>It&#8217;s tricky to fully put into actual use, though, and most web designs I&#8217;ve seen or created mix style with content at least a small amount. </p>
<p>The one exception is blogs &#8212; especially template-based blogs hosted on providers like typepad.com and wordpress.com.  In this case, the content must be separate from the style, because the front-end content is constantly changing, being updated and rearranged by the blogger.</p>
<p>Additionally, in order to maintain full functionality offered by these services, the back-end, behind the scenes content also has to stay the same (for the most part), and can&#8217;t be changed or accessed by a designer at all.</p>
<p>This was the challenge I faced in redesigning the <a href="http://studiokitchen.typepad.com" target="_blank">blog</a> from my <a href="http://www.phillydesignblog.com/2009/04/before-and-after/" target="_self">previous post</a> to match the rest of my client&#8217;s (totally custom built) <a href="http://www.phillydesignblog.com/2009/03/minimalist-design/" target="_self">website</a>.  I learned quite a bit more than I knew before about CSS styling during this project.  Perhaps I will post some tips on what I discovered. In general, a success.</p>
<div class="none"><div class="g-plusone" data-href="http://www.phillydesignblog.com/2009/04/semantics-vs-aesthetics/" size="medium" count="true"></div></div>]]></content:encoded>
			<wfw:commentRss>http://www.phillydesignblog.com/2009/04/semantics-vs-aesthetics/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Before and After</title>
		<link>http://www.phillydesignblog.com/2009/04/before-and-after/</link>
		<comments>http://www.phillydesignblog.com/2009/04/before-and-after/#comments</comments>
		<pubDate>Thu, 09 Apr 2009 14:28:43 +0000</pubDate>
		<dc:creator>phillydesign</dc:creator>
				<category><![CDATA[Imagic Digital]]></category>
		<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http://www.phillydesignblog.com/?p=141</guid>
		<description><![CDATA[Before After]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;">Before</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-142" title="studiokitchen blog before" src="http://www.phillydesignblog.com/wp-content/uploads/2009/04/shola_blog_before.jpg" alt="studiokitchen blog before" width="500" height="385" /></p>
<p style="text-align: center;">After</p>
<p style="text-align: center;"><a href="http://studiokitchen.typepad.com"><img class="size-full wp-image-143 aligncenter" title="studiokitchen blog after" src="http://www.phillydesignblog.com/wp-content/uploads/2009/04/shola_blog_after.jpg" alt="studiokitchen blog after" width="500" height="384" /></a></p>
<div class="none"><div class="g-plusone" data-href="http://www.phillydesignblog.com/2009/04/before-and-after/" size="medium" count="true"></div></div>]]></content:encoded>
			<wfw:commentRss>http://www.phillydesignblog.com/2009/04/before-and-after/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Minimalist Design</title>
		<link>http://www.phillydesignblog.com/2009/03/minimalist-design/</link>
		<comments>http://www.phillydesignblog.com/2009/03/minimalist-design/#comments</comments>
		<pubDate>Fri, 27 Mar 2009 12:33:55 +0000</pubDate>
		<dc:creator>phillydesign</dc:creator>
				<category><![CDATA[Imagic Digital]]></category>
		<category><![CDATA[philosophy]]></category>
		<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http:/?p=1</guid>
		<description><![CDATA[Sometimes I question my attraction to minimalism. When I work it&#8217;s usually a battle between my personal appreciation for minimalist design and the reality of a world filled with loud, noisy, look-at-me layouts. In advertising and marketing, you must get noticed. Get attention. A Call to Action! should shout from the moment a visitor first [...]]]></description>
			<content:encoded><![CDATA[<div>
<p>Sometimes I question my attraction to minimalism. When I work it&#8217;s usually a battle between my personal appreciation for minimalist design and the reality of a world filled with loud, noisy, look-at-me layouts. <a href="http://www.sholaolunloyo.com"><img class="alignright size-full wp-image-7" title="Shola Olunloyo" src="http://phillydesignblog.com/wp-content/uploads/2009/03/shola_site.jpg" alt="Shola Olunloyo" width="300" height="200" /></a></p>
<p>In advertising and marketing, you must get noticed. Get attention. A <strong>Call to Action!</strong> should shout from the moment a visitor first views the design, or else that visitor will quickly skip on to others. But what grabs the visitor doesn&#8217;t need to be a lot. It can be clean simplicity instead.</p>
<p>Most customers want attention-grabbing layouts. Usually I compromise my desired look by adding elements and colors.</p>
<p>In the case of my most recent website design, there was no such compromise, and I&#8217;m pleased with the results; the synchronicity of my and my client&#8217;s aesthetic.</p>
<p><a title="Shola Olunloyo" href="http://www.sholaolunloyo.com" target="_blank">www.sholaolunloyo.com</a></div>
<div class="none"><div class="g-plusone" data-href="http://www.phillydesignblog.com/2009/03/minimalist-design/" size="medium" count="true"></div></div>]]></content:encoded>
			<wfw:commentRss>http://www.phillydesignblog.com/2009/03/minimalist-design/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

