<?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>MHunt Design &#187; performance</title>
	<atom:link href="http://mhuntdesign.com/blog/articles/performance/feed/" rel="self" type="application/rss+xml" />
	<link>http://mhuntdesign.com/blog</link>
	<description>Web Design Resources and Recommended Reading</description>
	<lastBuildDate>Sat, 04 Feb 2012 09:03:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Using the General Sibling Selector (CSS)</title>
		<link>http://mhuntdesign.com/blog/css/using-the-general-sibling-selector-css/</link>
		<comments>http://mhuntdesign.com/blog/css/using-the-general-sibling-selector-css/#comments</comments>
		<pubDate>Sun, 22 Aug 2010 19:50:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[performance]]></category>

		<guid isPermaLink="false">http://mhuntdesign.com/blog/?p=719</guid>
		<description><![CDATA[The general sibling selector can be very useful in reducing css code in your style sheets and in your html. Example: You have a thumbnail image to the left of a few paragraphs and you don&#8217;t want them to wrap below the image. Instead of using a wrapper div for your paragraphs, you can simple [...]


Related posts:<ol><li><a href='http://mhuntdesign.com/blog/css/adjacent-sibling-selector/' rel='bookmark' title='Adjacent Sibling Selector'>Adjacent Sibling Selector</a> <small>I recently needed to style some Drupal blocks so that...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fmhuntdesign.com%2Fblog%2Fcss%2Fusing-the-general-sibling-selector-css%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fmhuntdesign.com%2Fblog%2Fcss%2Fusing-the-general-sibling-selector-css%2F&amp;source=mhuntdesign&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>The general sibling selector can be very useful in reducing css code in your style sheets and in your html.</p>
<h3>Example:</h3>
<p>You have a thumbnail image to the left of a few paragraphs and you don&#8217;t want them to wrap below the image.</p>
<p><img class="aligncenter size-full wp-image-720" title="General Sibling Selector Example" src="http://mhuntdesign.com/blog/wp-content/uploads/2010/08/general-sibling-selector.png" alt="" width="431" height="360" /></p>
<p>Instead of using a wrapper div for your paragraphs, you can simple use one declaration:<br />
<code><br />
img ~ p {padding-left:122px;}</code></p>
<p>This means that all general siblings of an img element will have a left padding value of 122px.</p>
<h3>What about older Browsers?</h3>
<p>See: <a href="http://reference.sitepoint.com/css/generalsiblingselector">http://reference.sitepoint.com/css/generalsiblingselector</a></p>
<p><img class="size-full wp-image-722 alignnone" title="general-sibling-selector-compatibility" src="http://mhuntdesign.com/blog/wp-content/uploads/2010/08/general-sibling-selector-compatibility.png" alt="" width="584" height="266" /></p>
<p>In my case, I was not planning on having more than 298 elements, seems excessive. In that case you would want to use a wrapper div for those paragraphs.  As for IE6, I say let the text wrap!</p>


<p>Related posts:<ol><li><a href='http://mhuntdesign.com/blog/css/adjacent-sibling-selector/' rel='bookmark' title='Adjacent Sibling Selector'>Adjacent Sibling Selector</a> <small>I recently needed to style some Drupal blocks so that...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://mhuntdesign.com/blog/css/using-the-general-sibling-selector-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>5 ways to optimize the performance and speed of your website</title>
		<link>http://mhuntdesign.com/blog/css/5-ways-improve-performance-speed-website/</link>
		<comments>http://mhuntdesign.com/blog/css/5-ways-improve-performance-speed-website/#comments</comments>
		<pubDate>Fri, 21 Aug 2009 04:52:37 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[developer]]></category>
		<category><![CDATA[optimization]]></category>
		<category><![CDATA[yahoo]]></category>

		<guid isPermaLink="false">http://mhuntdesign.com/blog/?p=231</guid>
		<description><![CDATA[1. Improve your performance with YSlow http://developer.yahoo.com/yslow/ Yslow grades the performance of your site based on 3 rulesets. The criteria includes http requests, gzip compression, javascript placement at bottom, css expressions, dns lookups, minifying css and javascript, url redirects, 404 errors and more. With Yslow you can figure out what is holding up the page [...]


Related posts:<ol><li><a href='http://mhuntdesign.com/blog/apple/how-to-create-a-custom-apple-ipadiphone-home-screen-icon-for-your-website/' rel='bookmark' title='How to create a custom Apple iPad/iPhone Home screen icon for your Website'>How to create a custom Apple iPad/iPhone Home screen icon for your Website</a> <small>When you bookmark a site on the iPad or iPhone,...</small></li>
<li><a href='http://mhuntdesign.com/blog/bookmarks/freelance-web-design-drupal-development-wordpress-seo-jquery-css-08-21-10-from-2225-to-2333/' rel='bookmark' title='Freelance Web Design: Drupal Development, WordPress, SEO, jQuery, CSS 08-21-10 from 22:25 to 23:33'>Freelance Web Design: Drupal Development, WordPress, SEO, jQuery, CSS 08-21-10 from 22:25 to 23:33</a> <small>Below are my latest resources related to web design, development,...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fmhuntdesign.com%2Fblog%2Fcss%2F5-ways-improve-performance-speed-website%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fmhuntdesign.com%2Fblog%2Fcss%2F5-ways-improve-performance-speed-website%2F&amp;source=mhuntdesign&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<h3><a href="http://mhuntdesign.com/blog/wp-content/uploads/2009/08/yslow-website-performance.png"><img class="alignright size-medium wp-image-233" title="yslow-website-performance" src="http://mhuntdesign.com/blog/wp-content/uploads/2009/08/yslow-website-performance-300x148.png" alt="" width="300" height="148" /></a>1. Improve your performance with YSlow</h3>
<p><a title="Yslow Website Performace Tool" href="http://developer.yahoo.com/yslow/" target="_blank">http://developer.yahoo.com/yslow/</a></p>
<p>Yslow grades the performance of your site based on 3 rulesets. The criteria includes http requests, gzip compression, javascript placement at bottom, css expressions, dns lookups, minifying css and javascript, url redirects, 404 errors and more.<br />
With Yslow you can figure out what is holding up the page from loading up fast. I typically check under components to see if there are any 404s for files called.</p>
<h3>2. Compress Images with Smushit</h3>
<p><a href="http://developer.yahoo.com/yslow/smushit/">http://developer.yahoo.com/yslow/smushit/</a></p>
<p>Compress images even further than saving for web in photoshop with Smushit.</p>
<h3>3. Place Javascript at the bottom of your html document</h3>
<p>Javascript calls at the bottom allow the page to load without having to wait until the javascript is loaded.</p>
<h3>4. Compress CSS and JS Files</h3>
<p><a href="http://www.cssoptimiser.com/">http://www.cssoptimiser.com/</a></p>
<p><a href="http://www.cleancss.com/">http://www.cleancss.com/</a></p>
<p><a href="http://javascriptcompressor.com/">http://javascriptcompressor.com/</a></p>
<h3>5. Use CSS Sprites</h3>
<p>The concept of css sprites is to combine multiple images into one and using background-position in your css to display only certain images.</p>
<p>See How to use CSS Sprites: <a href="http://css-tricks.com/css-sprites/">http://css-tricks.com/css-sprites/</a></p>
<p>Video: Exactly How to use CSS Sprites:<a href="http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/"> http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/</a></p>
<p>Dave Shea explains CSS Sprites: <a href="http://www.mezzoblue.com/archives/2009/01/27/sprite_optim/">http://www.mezzoblue.com/archives/2009/01/27/sprite_optim/</a></p>


<p>Related posts:<ol><li><a href='http://mhuntdesign.com/blog/apple/how-to-create-a-custom-apple-ipadiphone-home-screen-icon-for-your-website/' rel='bookmark' title='How to create a custom Apple iPad/iPhone Home screen icon for your Website'>How to create a custom Apple iPad/iPhone Home screen icon for your Website</a> <small>When you bookmark a site on the iPad or iPhone,...</small></li>
<li><a href='http://mhuntdesign.com/blog/bookmarks/freelance-web-design-drupal-development-wordpress-seo-jquery-css-08-21-10-from-2225-to-2333/' rel='bookmark' title='Freelance Web Design: Drupal Development, WordPress, SEO, jQuery, CSS 08-21-10 from 22:25 to 23:33'>Freelance Web Design: Drupal Development, WordPress, SEO, jQuery, CSS 08-21-10 from 22:25 to 23:33</a> <small>Below are my latest resources related to web design, development,...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://mhuntdesign.com/blog/css/5-ways-improve-performance-speed-website/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

