<?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>Södra Esplanaden &#187; @font-face</title>
	<atom:link href="http://www.sodraesplanaden.se/etikett/font-face/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sodraesplanaden.se</link>
	<description>Kreativ studio och galleri</description>
	<lastBuildDate>Mon, 06 Feb 2012 14:21: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>Lunds humorfestival</title>
		<link>http://www.sodraesplanaden.se/digital/lunds-humorfestival/</link>
		<comments>http://www.sodraesplanaden.se/digital/lunds-humorfestival/#comments</comments>
		<pubDate>Fri, 02 Jul 2010 07:00:19 +0000</pubDate>
		<dc:creator>Simon Fransson</dc:creator>
				<category><![CDATA[Digital]]></category>
		<category><![CDATA[@font-face]]></category>
		<category><![CDATA[Anagram]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Lunds humorfestival]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.sodraesplanaden.se/?p=3555</guid>
		<description><![CDATA[Vi har hjälpt Lönegård &#38; Co att ta fram en webbsida för Lunds humorfestival som går av stapeln i slutet av augusti. Sajten är byggd i nya WordPress 3.0, där funktionerna för menyhantering och egna innehållstyper kom väl till pass.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sodraesplanaden.se/wp-content/uploads/2010/06/Lunds-humorfestival.jpg"><img class="alignleft size-medium wp-image-3556" title="Lunds humorfestival" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/06/Lunds-humorfestival-300x186.jpg" alt="" width="300" height="186" /></a><a href="http://www.sodraesplanaden.se/wp-content/uploads/2010/06/Lunds-humorfestival-2.jpg"><img class="alignnone size-medium wp-image-3557" title="Lunds humorfestival 2" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/06/Lunds-humorfestival-2-300x186.jpg" alt="" width="300" height="186" /></a></p>
<p>Vi har hjälpt <a href="http://www.lonegard.se/">Lönegård &amp; Co </a>att ta fram en webbsida för <a href="http://lundshumorfestival.se/">Lunds humorfestival </a>som går av stapeln i slutet av augusti. Sajten är byggd i nya WordPress 3.0, där funktionerna för menyhantering och egna innehållstyper kom väl till pass.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sodraesplanaden.se/digital/lunds-humorfestival/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Sydform</title>
		<link>http://www.sodraesplanaden.se/digital/sydform/</link>
		<comments>http://www.sodraesplanaden.se/digital/sydform/#comments</comments>
		<pubDate>Mon, 08 Mar 2010 10:34:47 +0000</pubDate>
		<dc:creator>Simon Fransson</dc:creator>
				<category><![CDATA[Digital]]></category>
		<category><![CDATA[@font-face]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Fancybox]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Sydform]]></category>

		<guid isPermaLink="false">http://www.sodraesplanaden.se/?p=2999</guid>
		<description><![CDATA[Martin och jag har tagit fram en liten kampanjsajt för möbeldesigntävlingen Sydform. Martins specialtillverkade typsnitt som vi använder i rubriker har även legat till grund för &#8221;tejpremsan&#8221; som sitter snett över hela sajten. Från början byggdes sajten i HTML5 och utnyttjade de nya elementen header, nav, section, element och footer. För att dessa skall fungera [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sodraesplanaden.se/wp-content/uploads/2010/03/Sydform.jpg"><img class="alignnone size-medium wp-image-3003" title="Sydform" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/03/Sydform-300x225.jpg" alt="" width="300" height="225" /></a></p>
<p>Martin och jag har tagit fram en liten kampanjsajt för möbeldesigntävlingen <a href="http://www.sydform.nu/">Sydform</a>. Martins <a href="http://www.sodraesplanaden.se/grafisk-form/profil-till-sydform/">specialtillverkade typsnitt</a> som vi använder i rubriker har även legat till grund för &#8221;tejpremsan&#8221; som sitter snett över hela sajten. Från början byggdes sajten i HTML5 och utnyttjade de nya elementen header, nav, section, element och footer. För att dessa skall fungera med Internet Explorer krävs dock någon form av speciallösning, som t.ex. finfina javascriptbiblioteket <a href="http://www.modernizr.com/">Modernizr</a>. Denna idé skrotades dock, men den djärve kan se det in action på <a href="http://www.sydform.nu/?html5">http://www.sydform.nu/?html5</a>. Det ska se ut precis som vanligt, if all goes well.</p>
<p><a href="http://www.sodraesplanaden.se/wp-content/uploads/2010/03/Sydform-Tejp.jpg"><img class="alignnone size-large wp-image-3002" title="Sydform - Tejp" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/03/Sydform-Tejp-674x69.jpg" alt="" width="674" height="69" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sodraesplanaden.se/digital/sydform/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Maya Robert</title>
		<link>http://www.sodraesplanaden.se/digital/maya-robert/</link>
		<comments>http://www.sodraesplanaden.se/digital/maya-robert/#comments</comments>
		<pubDate>Fri, 19 Feb 2010 11:10:29 +0000</pubDate>
		<dc:creator>Simon Fransson</dc:creator>
				<category><![CDATA[Digital]]></category>
		<category><![CDATA[@font-face]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Maya Robert]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://www.sodraesplanaden.se/?p=2927</guid>
		<description><![CDATA[Vi har tagit fram en sajt åt produktdesignern Maya Robert. Martin står bakom designen som Simon har implementerat. Fokus ligger på att presentera hennes produkter, vilka vi valt att visa som ett flöde av bilder på förstasidan. För att undvika en massa navigation fram och tillbaka har vi valt att hämta sidorna med produktinformation med [...]]]></description>
			<content:encoded><![CDATA[<p>Vi har tagit fram en sajt åt produktdesignern <a href="http://www.mayarobert.com">Maya Robert</a>. <a href="http://www.sodraesplanaden.se/author/martin/">Martin</a> står bakom designen som <a href="http://www.sodraesplanaden.se/author/simon/">Simon</a> har implementerat. Fokus ligger på att presentera hennes produkter, vilka vi valt att visa som ett flöde av bilder på förstasidan. För att undvika en massa navigation fram och tillbaka har vi valt att hämta sidorna med produktinformation med jQuery för att sedan visa dem direkt på förtsidan. Naturligtvis finns de även tillgängliga via traditionella länkar för t.ex. Google-robotar och besökare utan javascript.</p>
<p>När det gäller sajtens typografi har vi använt Graublau för brödtext och League Gothic för rubriker, inkluderat med <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">@font-face</a> vilket innebär att webbläsaren själv laddar ner typsnittsfilerna. En riktigt schyst möjlighet som börjar komma mer och mer nu. En annat knep som vi jobbat med är att lägga till WordPress &#8221;Redigera&#8221;-länkar överallt där det är möjligt, vilket minimerar behovet av att leta efter inlägg i administationsgränssnittet.</p>

<a href='http://www.sodraesplanaden.se/digital/maya-robert/attachment/maya-robert-2/' title='Maya Robert'><img width="150" height="150" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/02/Maya-Robert-150x150.jpg" class="attachment-thumbnail" alt="Maya Robert" title="Maya Robert" /></a>
<a href='http://www.sodraesplanaden.se/digital/maya-robert/attachment/maya-robert-shelf/' title='Maya Robert - Shelf'><img width="150" height="150" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/02/Maya-Robert-Shelf-150x150.jpg" class="attachment-thumbnail" alt="Maya Robert - Shelf" title="Maya Robert - Shelf" /></a>
<a href='http://www.sodraesplanaden.se/digital/maya-robert/attachment/maya-robert-redigera/' title='Maya Robert - Redigera'><img width="150" height="150" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/02/Maya-Robert-Redigera-150x150.jpg" class="attachment-thumbnail" alt="Maya Robert - Redigera" title="Maya Robert - Redigera" /></a>

<p>Gå till <a href="http://www.mayarobert.com">mayarobert.com</a> och ta en titt!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sodraesplanaden.se/digital/maya-robert/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>THE LARS &#8211; webb</title>
		<link>http://www.sodraesplanaden.se/digital/the-lars-webb/</link>
		<comments>http://www.sodraesplanaden.se/digital/the-lars-webb/#comments</comments>
		<pubDate>Wed, 30 Dec 2009 14:32:31 +0000</pubDate>
		<dc:creator>Simon Fransson</dc:creator>
				<category><![CDATA[Digital]]></category>
		<category><![CDATA[@font-face]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Cufon]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[THE LARS]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://www.sodraesplanaden.se/?p=2707</guid>
		<description><![CDATA[Vi har byggt en produktsajt för Engström &#38; Engströms lyxförstärkare THE LARS. Det första man möts av när man besöker sajten är så klart de stora produktbilderna på de två två modellerna type 1 och XLS, och kan man även se hur förstärkarna ser ut i 5 olika träslag. På produktbilderna har vi placerat ut ett antal [...]]]></description>
			<content:encoded><![CDATA[<p>Vi har byggt en produktsajt för <a href="http://www.engstromengstrom.com">Engström &amp; Engströms</a> lyxförstärkare <a href="http://www.thelars.se">THE LARS</a>. Det första man möts av när man besöker sajten är så klart de stora produktbilderna på de två två modellerna type 1 och XLS, och kan man även se hur förstärkarna ser ut i 5 olika träslag. På produktbilderna har vi placerat ut ett antal &#8221;noder&#8221;, som poppar upp detaljinformation om förstärkarens olika delar. Interaktivitet som denna implementeras ofta med Flash, men för att göra webbsidan mer sökmotorvänlig och dessutom få den att fungera i enheter utan Flash (som t.ex. mobiltelefoner) har vi istället valt att använda javascript-ramverket <a href="http://jquery.com/">jQuery</a>.</p>
<p>Utöver jQuery har vi använt CSS3-instruktionen @font-face, som tilllåter oss att använda typsnittet Graublau. Med @font-face behöver besökaren nämligen inte ha typsnittet installerat i sin dator, utan det laddas ner när webbläsaren behöver det. När det gäller rubriktypsnittet Futura Condensed har vi istället valt att använda javascript-biblioteket <a href="http://cufon.shoqolate.com/">Cufón</a>, som ritar ut varje ord i ett canvas-element. Detta då Cufón gör det möjligt att begränsa användandet av typsnittet till en enda domän, vilket är önskvärt i det här fallet.</p>
<p>Läs mer om hur vi <a href="http://www.sodraesplanaden.se/reklam/the-lars-branding/">utvecklade varumärket</a>.</p>
<p><a href="http://www.sodraesplanaden.se/wp-content/uploads/2010/01/The-Lars.jpg"><img class="alignleft size-thumbnail wp-image-2712" title="The Lars" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/01/The-Lars-150x150.jpg" alt="" width="150" height="150" /></a><a href="http://www.sodraesplanaden.se/wp-content/uploads/2010/01/The-Lars-XLS-The-Mantle.jpg"><img class="alignleft size-thumbnail wp-image-2711" title="The Lars XLS - The Mantle" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/01/The-Lars-XLS-The-Mantle-150x150.jpg" alt="" width="150" height="150" /></a><a href="http://www.sodraesplanaden.se/wp-content/uploads/2010/01/The-Lars-The-Story-Behind.jpg"><img class="alignleft size-thumbnail wp-image-2710" title="The Lars - The Story Behind" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/01/The-Lars-The-Story-Behind-150x150.jpg" alt="" width="150" height="150" /></a><a href="http://www.sodraesplanaden.se/wp-content/uploads/2010/01/The-Lars-Materials.jpg"><img class="alignleft size-thumbnail wp-image-2709" title="The Lars - Materials" src="http://www.sodraesplanaden.se/wp-content/uploads/2010/01/The-Lars-Materials-150x150.jpg" alt="" width="150" height="150" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sodraesplanaden.se/digital/the-lars-webb/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

