<?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>The Pink Crow&#187; canonical URLs &#8211; page  at The Pink Crow</title> <atom:link href="http://thepinkcrow.com/tag/canonical-urls/feed/" rel="self" type="application/rss+xml" /><link>http://thepinkcrow.com</link> <description>Front-end design that stands out.</description> <lastBuildDate>Sun, 09 May 2010 20:58:53 +0000</lastBuildDate> <generator>http://wordpress.org/?v=abc</generator> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <item><title>RacheltheGreat.com, a portal page designed to reinforce my personal brand</title><link>http://thepinkcrow.com/portfolio/rachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand/</link> <comments>http://thepinkcrow.com/portfolio/rachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand/#comments</comments> <pubDate>Mon, 06 Jul 2009 00:19:29 +0000</pubDate> <dc:creator>Rachel Nabors</dc:creator> <category><![CDATA[Portfolio]]></category> <category><![CDATA[border radius]]></category> <category><![CDATA[canonical URLs]]></category> <category><![CDATA[css sprites]]></category> <category><![CDATA[rounded corners]]></category> <category><![CDATA[Twitter]]></category> <category><![CDATA[twitter background]]></category><guid
isPermaLink="false">http://thepinkcrow.com/?p=178</guid> <description><![CDATA[I had to design a site that matched my Twitter page and new business cards. Using CSS sprites, canonical URLs and the little-used border-radius property of CSS, I designed and launched this personal portal in one day.]]></description> <content:encoded><![CDATA[<p>I&#8217;m a big believer in the personal brand. So when <a
href="/articles/twitter-for-fun-but-not-so-much-for-profit/">I redesigned my Twitter page&#8217;s background</a> a few weeks ago, I was very careful to combine both my Pink Crow web site&#8217;s style with <a
href="http://subcultureofone.com">my web comic&#8217;s</a> art.</p><p>But when I began to design <a
href="http://www.flickr.com/photos/crowchick/3691248063">my matching ultra tiny Moo cards</a>, I wasn&#8217;t sure which website to put on the card, my web design business here at ThePinkCrow.com, or my <a
href="http://subcultureofone.com">award-winning web comics at SubcultureofOne.com</a>?</p><p>The answer was simple. Make a <em>portal page</em>. A portal page serves as a point of entry to the Magical Land of You for people you&#8217;ve just met. It should have links to all your sites, professional and personal, with one or the other taking precedence based on the sort of people you give your cards to most frequently. It is important to keep your social networking sites on there. Many people you meet under professional circumstances will likely want to keep in touch with you via shared social networking sites like <a
href="http://twitter.com">Twitter</a> or <a
href="http://linkedin.com">LinkedIn</a>.</p><p>Lastly, I designed the site to match my new business cards and my Twitter page so I would present a homogeonously branded image of myself. Whether visitors to RacheltheGreat.com want to learn about my comics, my web design, or my flickr pictures is up to them, but I&#8217;ve laid everything out in neat little rows, just in case.</p><div
id="attachment_179" class="wp-caption aligncenter" style="width: 560px"><a
href="http://thepinkcrow.com/wp-content/uploads/2009/07/rachel-the-great-screenshot.png"><img
class="size-full wp-image-179" title="rachel-the-great-screenshot" src="http://thepinkcrow.com/wp-content/uploads/2009/07/rachel-the-great-screenshot.png" alt="A screenshot of RacheltheGreat.com, my personal portal page that I designed and built." width="550" height="424" /></a><p
class="wp-caption-text">A screenshot of RacheltheGreat.com, my personal portal page that I designed and built.</p></div><h2>Now for the tech dirt.</h2><p>I was very impatient with this project. Impatient with browsers for not supporting things I wanted, impatient for images to load, impatient with search engines for being slow to figure out what to make of canonical URLs.</p><p>I was so impatient that I did not even bother to check it in IE6 because, let&#8217;s face it, most if not all of my traffic will come from my handing out business cards. The people I give them to use Firefox and Safari. So I&#8217;ll go back and check IE6 when google&#8217;s analytics show that I&#8217;m getting traffic from search engines, where one or two IE6 users might slip through.</p><h3>Featured techniques</h3><ol><li><strong>CSS Sprites</strong> The hand-drawn icons for the social network links are all contained in a single PNG image, called a &#8220;sprite&#8221;. Using CSS, I can use different sections of that image over and over, making it look as though I have many small icons, while in reality there is only one image. Having to only download one image saves visitors time and cuts down on the resources my server uses in serving the page.</li><li><strong>Rounded Corners with CSS</strong> Since I wasn&#8217;t expecting much Internet Explorer Traffic, I didn&#8217;t feel like slogging through Photoshop to make the rounded corners on the social links&#8217; black box, either. Instead, I chose to use the (not to spec) <a
href="http://www.css3.info/preview/rounded-border/">CSS property </a><em><a
href="http://www.css3.info/preview/rounded-border/">border-radius</a>.</em> IE folks see just square corners. I don&#8217;t think they&#8217;ll notice.</li><li><strong>Canonical URLs</strong> Search Engines <em>hate </em>repeat content. Some unscrupulous people like to copy other&#8217;s articles onto their own site to try to burst search engine rankings. So search engines now look out for pages they&#8217;ve seen before appearing with different URLs and penalize them for looking suspicious. But what if you&#8217;re twittering about you site using TinyURL? Or someone doesn&#8217;t put the &#8220;www&#8221; in a linking URL? Search engines might get confused and think you&#8217;re trying to pull a fast one. But! There&#8217;s a way around this, although still very fresh, and many major search engines are gearing up to support it better. <em><a
href="http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonical.html">Canonical URLs</a> </em>specify what the <em>real</em> URL of the page is supposed to be.</li></ol><cite>This article and more by Rachel Nabors at <a
href="http://thepinkcrow.com">The Pink Crow</a>.</cite>Share and Enjoy:<a
rel="nofollow"  href="mailto:?subject=RacheltheGreat.com%2C%20a%20portal%20page%20designed%20to%20reinforce%20my%20personal%20brand&amp;body=http%3A%2F%2Fthepinkcrow.com%2Fportfolio%2Frachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand%2F" title="email"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="RacheltheGreat.com, a portal page designed to reinforce my personal brand email link" class="sociable-hovers" /></a> <a
rel="nofollow"  href="http://www.designfloat.com/submit.php?url=http%3A%2F%2Fthepinkcrow.com%2Fportfolio%2Frachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand%2F&amp;title=RacheltheGreat.com%2C%20a%20portal%20page%20designed%20to%20reinforce%20my%20personal%20brand" title="Design Float"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/designfloat.png" title="Design Float" alt="Design Float" class="sociable-hovers" /></a> <a
rel="nofollow"  href="" title="TwitThis"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/" title="TwitThis" alt="TwitThis" class="sociable-hovers" /></a> <a
rel="nofollow"  href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fthepinkcrow.com%2Fportfolio%2Frachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand%2F&amp;title=RacheltheGreat.com%2C%20a%20portal%20page%20designed%20to%20reinforce%20my%20personal%20brand" title="StumbleUpon"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a> <a
rel="nofollow"  href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fthepinkcrow.com%2Fportfolio%2Frachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand%2F&amp;title=RacheltheGreat.com%2C%20a%20portal%20page%20designed%20to%20reinforce%20my%20personal%20brand&amp;bodytext=I%20had%20to%20design%20a%20site%20that%20matched%20my%20Twitter%20page%20and%20new%20business%20cards.%20Using%20CSS%20sprites%2C%20canonical%20URLs%20and%20the%20little-used%20border-radius%20property%20of%20CSS%2C%20I%20designed%20and%20launched%20this%20personal%20portal%20in%20one%20day." title="Digg"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a> <a
rel="nofollow"  href="http://delicious.com/post?url=http%3A%2F%2Fthepinkcrow.com%2Fportfolio%2Frachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand%2F&amp;title=RacheltheGreat.com%2C%20a%20portal%20page%20designed%20to%20reinforce%20my%20personal%20brand&amp;notes=I%20had%20to%20design%20a%20site%20that%20matched%20my%20Twitter%20page%20and%20new%20business%20cards.%20Using%20CSS%20sprites%2C%20canonical%20URLs%20and%20the%20little-used%20border-radius%20property%20of%20CSS%2C%20I%20designed%20and%20launched%20this%20personal%20portal%20in%20one%20day." title="del.icio.us"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a> <a
rel="nofollow"  href="" title="Ma.gnolia"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a> <a
rel="nofollow"  href="http://www.facebook.com/share.php?u=http%3A%2F%2Fthepinkcrow.com%2Fportfolio%2Frachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand%2F&amp;t=RacheltheGreat.com%2C%20a%20portal%20page%20designed%20to%20reinforce%20my%20personal%20brand" title="Facebook"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a> <a
rel="nofollow"  href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fthepinkcrow.com%2Fportfolio%2Frachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand%2F&amp;title=RacheltheGreat.com%2C%20a%20portal%20page%20designed%20to%20reinforce%20my%20personal%20brand&amp;source=The+Pink+Crow+Front-end+design+that+stands+out.&amp;summary=I%20had%20to%20design%20a%20site%20that%20matched%20my%20Twitter%20page%20and%20new%20business%20cards.%20Using%20CSS%20sprites%2C%20canonical%20URLs%20and%20the%20little-used%20border-radius%20property%20of%20CSS%2C%20I%20designed%20and%20launched%20this%20personal%20portal%20in%20one%20day." title="LinkedIn"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/linkedin.png" title="LinkedIn" alt="LinkedIn" class="sociable-hovers" /></a> <a
rel="nofollow"  href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fthepinkcrow.com%2Fportfolio%2Frachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand%2F&amp;title=RacheltheGreat.com%2C%20a%20portal%20page%20designed%20to%20reinforce%20my%20personal%20brand&amp;annotation=I%20had%20to%20design%20a%20site%20that%20matched%20my%20Twitter%20page%20and%20new%20business%20cards.%20Using%20CSS%20sprites%2C%20canonical%20URLs%20and%20the%20little-used%20border-radius%20property%20of%20CSS%2C%20I%20designed%20and%20launched%20this%20personal%20portal%20in%20one%20day." title="Google Bookmarks"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/googlebookmark.png" title="Google Bookmarks" alt="Google Bookmarks" class="sociable-hovers" /></a> <a
rel="nofollow"  href="http://technorati.com/faves?add=http%3A%2F%2Fthepinkcrow.com%2Fportfolio%2Frachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand%2F" title="Technorati"><img
src="http://thepinkcrow.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a><br/><br/>]]></content:encoded> <wfw:commentRss>http://thepinkcrow.com/portfolio/rachelthegreat-com-a-portal-page-designed-to-reinforce-my-personal-brand/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (user agent is rejected)
Database Caching 17/31 queries in 0.065 seconds using disk

Served from: thepinkcrow.com @ 2010-09-10 19:23:33 -->