<?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>Bloggink &#187; css</title>
	<atom:link href="http://blog.joggink.com/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.joggink.com</link>
	<description>Blog of Joggink, home of Jochen Vandendriessche</description>
	<lastBuildDate>Mon, 16 Aug 2010 12:48:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Mobile development</title>
		<link>http://blog.joggink.com/2010/06/mobile-development/</link>
		<comments>http://blog.joggink.com/2010/06/mobile-development/#comments</comments>
		<pubDate>Thu, 17 Jun 2010 12:24:41 +0000</pubDate>
		<dc:creator>Jochen Vandendriessche</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[frontend development]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[blackberry]]></category>
		<category><![CDATA[ipad]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[mobile development]]></category>
		<category><![CDATA[palm]]></category>
		<category><![CDATA[webkit]]></category>

		<guid isPermaLink="false">http://blog.joggink.com/?p=304</guid>
		<description><![CDATA[As the mobile market continues to grow, it is essential for us, web developers, to make sure our stuff works on all platforms. As I was previously wondering how most of you are testing cross browser experience, I&#8217;m now curious to know if you test for mobile devices, and if so, what tools do you [...]]]></description>
			<content:encoded><![CDATA[<p>As the mobile market continues to grow, it is essential for us, web developers, to make sure our stuff works on all platforms. As<a href="http://blog.joggink.com/2010/05/cross-browser-testing/"> I was previously wondering how most of you are testing cross browser experience</a>, I&#8217;m now curious to know if you test for mobile devices, and if so, what tools do you use?</p>
<p><a href="http://trac.webkit.org/wiki/Applications%20using%20WebKit">Most of the mobile browsers use webkit</a> as render engine, there are however some exceptions. Besides the render engine, the viewport is another bottleneck. So how do you deal with that? My first thought was to focus solely on the iphone. Using the <a href="https://daw.apple.com/cgi-bin/WebObjects/DSAuthWeb.woa/wa/login?appIdKey=D635F5C417E087A3B9864DAC5D25920C4E9442C9339FA9277951628F0291F620&amp;path=%2F%2Fiphone%2Findex.action">iPhone SDK</a> and the iPhone emulator that comes with it, I could easily test sites on my mac. The latest iPhone SDK even has an iPad emulator! So making sure everything works on those 2 devices was sometimes a pain in the ass&#8230; So after optimizing for iphone and ipad came the actual testing, not on-screen, but on my iPhone / iPad using my fingers to flick, tap, scroll, zoom and pinch my way around. A good help for making sure everything was usable were the <a href="http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/index.html">iPhone human interface guidelines</a>.</p>
<p>So now I had my projects working on only 2 mobile devices, whereof one not sold (yet) in Belgium. Hooray&#8230; Therefore I tried installing the <a href="http://developer.android.com/sdk/index.html">Android SDK</a> so I could mess around with their emulator. And then what? Install another SDK for nokia, blackberry (<a href="http://devblog.blackberry.com/2010/02/blackberry-webkit-browser-preview-at-mobile-world-congress/">nowadays they use webkit</a>),&#8230; Some time ago, someone on the <a href="http://fronteers.be">fronteers</a> irc channel mentioned  Adobe Device Central. They offer a lot of platforms to test, but it seems a bit too flash minded and doesn&#8217;t always work the way I want.</p>
<p>Another great tip came in from <a href="http://hicksdesign.co.uk/journal/liveview-for-iphone-and-ipad">Jon Hicks</a>: <a href="http://zambetti.com/projects/liveview/">Liveview</a>, for Mobile Application Design &amp; Prototyping Tool.</p>
<p>The point is: I&#8217;m kind of stuck with mobile testing, I can test on iPod touch, iPhone and iPad which seems ok for an apple fanboy like me, but off course, there is the harsh truth that not everybody is using one of those mobile devices&#8230; So what&#8217;s your secret setup for mobile testing?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.joggink.com/2010/06/mobile-development/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Saving a HTTP request by combining screen and print styles</title>
		<link>http://blog.joggink.com/2009/12/saving-a-http-request-by-combining-screen-and-print-styles/</link>
		<comments>http://blog.joggink.com/2009/12/saving-a-http-request-by-combining-screen-and-print-styles/#comments</comments>
		<pubDate>Tue, 15 Dec 2009 15:59:33 +0000</pubDate>
		<dc:creator>Jochen Vandendriessche</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[frontend development]]></category>
		<category><![CDATA[media]]></category>
		<category><![CDATA[print]]></category>
		<category><![CDATA[screen]]></category>

		<guid isPermaLink="false">http://blog.joggink.com/?p=284</guid>
		<description><![CDATA[Instead of defining two stylesheet links in your head tag, you can define one and for screen &#38; print styles and divide the different styles in the one stylesheet.


@media screen {
	body { font-size:14px; }
}

@media print {
	body { font-size:10pt; }
	h1, h2, h3 { page-break-after:avoid; }
}


Read the full article at the blog of Geert De Deckere

]]></description>
			<content:encoded><![CDATA[<p>Instead of defining two stylesheet links in your head tag, you can define one and for screen &amp; print styles and divide the different styles in the one stylesheet.</p>
<div>
<div>
<pre style="font-family: monospace;"><span style="color: #a1a100;">@media screen {</span>
	body <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00aa00;">:</span><span style="color: #993333;">14px</span><span style="color: #00aa00;">;</span> <span style="color: #00aa00;">}</span>
<span style="color: #00aa00;">}</span>

<span style="color: #a1a100;">@media print {</span>
	body <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00aa00;">:</span><span style="color: #993333;">10pt</span><span style="color: #00aa00;">;</span> <span style="color: #00aa00;">}</span>
	h1<span style="color: #00aa00;">,</span> h2<span style="color: #00aa00;">,</span> h3 <span style="color: #00aa00;">{</span> <span style="color: #000000; font-weight: bold;">page-break-after</span><span style="color: #00aa00;">:</span><span style="color: #993333;">avoid</span><span style="color: #00aa00;">;</span> <span style="color: #00aa00;">}</span>
<span style="color: #00aa00;">}

</span></pre>
<p>Read the full article at <a href="http://www.geertdedeckere.be/article/saving-a-http-request-by-combining-screen-and-print-styles" target="_blank">the blog of Geert De Deckere</a></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.joggink.com/2009/12/saving-a-http-request-by-combining-screen-and-print-styles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
