<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>code · Website Optimisation Measures</title>
<link rel="stylesheet" type="text/css" href="/design/design.css" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/code/rss" title="Just code" />
<link rel="canonical" href="/code/website_optimisation_measures" />
<!-- =================================================================================================================== -->
<header>
	<h1><a href="/" rel="index">
		Camen Design
	</a></h1>
	<nav><ul>
		<li><a href="/">all</a></li>
		<li><a href="/projects">projects</a></li>
		<li><a href="http://forum.camendesign.com">forum</a></li>
	</ul><ul>
		<li><a href="/quote/">quote</a></li>
		<li><a href="/writing/">writing</a></li>
		<li><a href="/blog/">blog</a></li>
		<li><a href="/photo/">photo</a></li>
		<li><a href="/code/" rel="tag">code</a></li>
		<li><a href="/art/">art</a></li>
		<li><a href="/link/">link</a></li>
		<li><a href="/poem/">poem</a></li>
		<li><a href="/audio/">audio</a></li>
	</ul><ul>
		<li><a href="/web-dev/">web-dev</a></li>
		<li><a href="/annoyances/">annoyances</a></li>
		<li><a href="/eve/">eve</a></li>
		<li><a href="/code-is-art/">code-is-art</a></li>
		<li><a href="/inspiration/">inspiration</a></li>
		<li><a href="/windows/">windows</a></li>
		<li><a href="/gift/">gift</a></li>
		<li><a href="/gaming/">gaming</a></li>
		<li><a href="/mac/">mac</a></li>
		<li><a href="/osnews/">osnews</a></li>
		<li><a href="/c64/">c64</a></li>
		<li><a href="/linux/">linux</a></li>
	</ul>
	<a rel="previous" href="/code/developpeurs_sans_frontieres">
		older article →
	</a><a rel="next" href="/code/abbr_redux">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2010-06-26T15:08:00+01:00">
		<sup>3:08<abbr>pm</abbr> • 2010</sup>
		<abbr title="June">Jun</abbr> 26
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/code/website_optimisation_measures" rel="bookmark tag">code</a></li>
		<li><a href="/web-dev/website_optimisation_measures">web-dev</a></li>
		<li><a href="/code-is-art/website_optimisation_measures">code-is-art</a></li>
	</ul>
	<!-- licence -->
	<small>
		<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_GB">c</a>
		share + remix
	</small>
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<section>
<h1>Website Optimisation Measures</h1>
<ol>
	<li>
		<a href="#move_scripts">Move Scripts to the Bottom of the Body</a>
		<ol>
			<li><a href="#async-defer">Use <code>async</code> and <code>defer</code> Script
			Attributes</a></li>
		</ol>
	</li>
	<li><a href="#js_disabled">Ensure the Site Works With JavaScript Off</a></li>
	<li><a href="#flash_fallback">Provide Proper Fallbacks for Flash Content</a></li>
	<li><a href="#clean_head">Clean Up the Head</a></li>
	<li><a href="#css_first">Styleheets First</a></li>
	<li><a href="#img-size">Add Height &amp; Width on <abbr title="image"><code>&lt;img&gt;</code></abbr>
	Tags</a></li>
	<li><a href="#images">Optimise Images</a></li>
	<li>
		<a href="#http_requests">Reduce HTTP-Requests</a>
		<ol>
			<li><a href="#print">Combine Print Stylesheet With Main Stylesheet:</a></li>
			<li><a href="#combine-js">Combine Javascript Files:</a></li>
			<li><a href="#sprites">Use CSS Sprite Sheets:</a></li>
			<li><a href="#base64">Use Base-64 Encoded Images:</a></li>
		</ol>
	</li>
	<li><a href="#gzip">GZip What You Can</a></li>
	<li><a href="#bg_colours">Imitate Background Images With Colours</a></li>
	<li><a href="#clean_html">Write / Output Cleanly Indented HTML</a></li>
	<li><a href="#drop_ie">Drop Internet Explorer 6 Support</a></li>
	<li><a href="#dont_block">Do Not Block Browsers for ‘Compatibility’</a></li>
</ol>
<aside>
	<strong>Update:</strong><br />
	Added script <a href="#async-defer"><code>async</code> and <code>defer</code></a> attributes, with thanks to Cezary Tomczyk for the suggestion.
</aside>
<p>
	<strong>Jens Mieret</strong> publishes
	<a href="http://meiert.com/en/blog/20090310/optimization-measures-6/" rel="external">a list of general tips on
	optimising websites</a> for <ins>in his opinion</ins> speed, simplicity, accessibility and user friendliness.
</p><p>
	This presents a lot of valuable information in a very simple way, and therefore as a good idea, it should be
	<del>stolen</del> <ins>borrowed</ins>.
	<br /><br />
	Here are, in my opinion, a number of key optimisation tips for your website:
</p>


<h2 id="move_scripts">Move Scripts to the Bottom of the Body</h2>
<p>
	When the page loading hits a script tag—everything stops. Scripts have the right of way. A script can’t change
	the <abbr>DOM</abbr> until the HTML has loaded, so more important things like stylesheets are held up loading a
	script file that’s no actual use until the HTML has finished loading! Get your HTML structure and CSS to the user
	<em>as quick as you can</em>. The browser will be able to render the page much quicker and <em>then</em> scripts can
	be loaded, rather than leaving a blank page for the user to stare at whilst they wait for scripts to download.
</p>

<pre><code>	⋮
	&lt;script src="js/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre>

<p>
	Moving the script tags to just before the <abbr title="closing body"><code>&lt;/body&gt;</code></abbr> tag alone
	will make your website noticeably snappier! However, doing this brings added responsibility. Because the page will
	render before scripts have initialised, particularly quick clickers will be able to interact with your site before
	your JavaScript is ready! This brings us on to the next tip:
</p>


<h3 id="async-defer">Use <code>async</code> and <code>defer</code> Script Attributes</h3>
<p>
	HTML5 provides <a href="http://www.whatwg.org/specs/web-apps/current-work/#attr-script-async" rel="external">two
	new attributes</a> for <code>&lt;script&gt;</code> tags.
</p><p>
	The <code>async</code> attributes causes the script to be executed without the browser waiting for execution to
	complete before continuing. This means that multiple scripts elements won’t block the browser from downloading
	other resources and rendering.
</p>

<pre><code>&lt;script async src="js/main.js"&gt;&lt;/script&gt;
&lt;img src="test.png" alt="HTML5 script async means that this image will be downloaded in parallel" /&gt;</code></pre>

<p>
	(though, as noted earlier, your scripts should be at the bottom of the body anyway)
</p><p>
	<code>async</code> can be used when you need to load JavaScript libraries which do not modify the DOM
	(<code>async</code> scripts are run before the DOM is ready) and keep the rest of the page loading.
</p><p>
	<code>defer</code> causes the script to wait until the DOM is ready before executing. Use this for scripts that
	intend to modify the document.
</p><p>
	Browser support is weak at the moment, IE supports <code>defer</code> (since v5.5!) and Firefox 3.5 supports
	<code>async</code> and <code>defer</code> but it doesn’t hurt to add these to your script tags to future proof
	as new browsers pick up support. Until then, there’s a whole
	<a href="http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/" rel="external">variety of
	ways</a> you can asynchronously load scripts to gain performance.
</p>


<h2 id="js_disabled">Ensure the Site Works With JavaScript Off</h2>
<p>
	I cannot stress this enough, and how much it makes a positive difference—even when JavaScript is enabled! Firstly,
	more and more people are now browsing with JavaScript switched off by default thanks to the security benefits and
	flexibility provided by <a href="https://addons.mozilla.org/en-US/firefox/addon/722" rel="external">NoScript</a>.
	It increases browsing speed, frees up bandwidth, increases privacy by blocking all sorts of third party scripts, and
	helps mitigate <abbr title="cross-site scripting">XSS</abbr> attacks.
</p><p>
	Just as your HTML and CSS should be separate, so should your JavaScript. If you
	<a href="http://remysharp.com/2008/12/12/stop-treating-ajax-as-something-special/" rel="external">code your site to
	work without <abbr>AJAX</abbr> first</a> all your server-side events are done, you can just veneer the site with
	event-bound JavaScript to replace <abbr>REST</abbr> events with <abbr>AJAX</abbr> ones based on the URLs already in
	the HTML. Google doesn’t run JavaScript, so it still needs to get around!
</p><p>
	Detecting if an incoming HTTP request is coming from AJAX instead of REST is easy too, you don’t have to send any
	special tokens or headers from your JavaScript code.
</p>

<pre><code>if (@$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
	//code to deal with AJAX response
};</code></pre>

<p>
	Having the site work without JavaScript increases user trust, increases the platforms you support without any extra
	work, increases <q><dfn title="Search Engine Optimisation">SEO</dfn></q>, reduces maintenance and best of all,
	allows people to click through your site at super speed when they know where they want to go.
</p>


<h2 id="flash_fallback">Provide Proper Fallbacks for Flash Content</h2>
<p>
	Assuming everybody has Flash doesn’t cut the mustard any more, there are more diverse platforms in use—that
	don’t support Flash—than there were years ago; iPhone for one. People are blocking Flash with AdBlock, NoScript
	and FlashBlock.
</p><p>
	If people can’t see your content then you lose out. There are almost always better ways of presenting content to
	users without using Flash, and if you have to use Flash then don’t provide a lame cop-out excuse like “Install
	Flash” as the only fallback message. Describe what the actual content is, why you can’t view it and provide it
	in an alternative format (such as an image).
</p><p>
	This especially applies to videos. I don’t have Flash installed, telling me to install Flash is just annoying,
	when there’s plenty of other ways you can give me the content. Why don’t you provide a download link for the
	video file, huh? Even better than that, modern browsers support HTML5 <code>&lt;video&gt;</code> that requires no
	plugin at all—use that instead!
</p><p>
	If you are embedding video you should be using <a href="/code/video_for_everybody">Video for Everybody</a>—a
	comprehensive solution that uses native HTML5 <code>&lt;video&gt;</code> in browsers that support it, then falls
	back to Flash for other browsers.
	<br /><br />
	There is no reason anybody should be staring at a broken plugin icon anymore.
</p>


<h2 id="clean_head">Clean Up the Head</h2>
<p>
	You can <em>really</em> fill the head element with junk if you want to.
</p>
<dl>
	<dt>Don’t use a favicon link:</dt>
	<dd>
		
		<pre><code>&lt;link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /&gt;</code></pre>
		
		<p>
			<q><samp>/favicon.ico</samp></q> is assumed by default, putting this in the head is just
			extraneous bytes. If you need to store your favicon somewhere else (why? No why? No really, why?)
			then just mod_rewrite it to <q><samp>/favicon.ico</samp></q> to avoid 404s and wasted
			HTTP-requests from browsers / aggregators assuming the default.
		</p>
	</dd>
	<dt>Don’t use keywords / description:</dt>
	<dd>
		<p>
			All <q>SEO</q> is bunk. Paying for SEO ‘specialists’ to wave their magic wand over your site
			is no more material than a pair of emperor’s clothes. If you have clean, tidy, semantic markup,
			have avoided text in images and have a sensible and clear system of navigation that doesn’t
			depend on Javascript, then Google will have no problem understanding your site.
		</p><p>
			To that end, I have found that filling the head full of keywords is a
			<a href="http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html" rel="external">waste
			of time</a>. Camen Design appears on Google without
			<a href="http://google.com/search?q=video+for+everybody" rel="external">any issue</a>.
			Seriously, drop the voodoo and witch doctors, it’s not the ’90s anymore.
		</p>
	</dd>
</dl>


<h2 id="css_first">Styleheets First</h2>
<p>
	To give a feel of snappiness, you want to get the structure rendered as soon as possible, ideally before any images
	have even loaded. It’s critical therefore to get the stylesheet to the user as soon as possible. Any HTTP-requests
	before the CSS sheet are wasting valuable time!
</p><p>
	Therefore, don’t place any <abbr title="link"><code>&lt;link&gt;</code></abbr> or script elements above the
	stylesheet in the HTML head. If you really want to save a few milliseconds more for dial-up users, put the
	stylesheet above the <code>&lt;title&gt;</code>!
</p>


<h2 id="img-size">Add Height &amp; Width on <abbr title="image"><code>&lt;img&gt;</code></abbr> Tags</h2>
<p>
	One thing that <em>really</em> annoys me is when you view a site with a lot of images and as you’re reading, the
	page is jumping all over the place as the images load. If you define the correct height and width attributes on
	image tags, then the page will render faster (less reflows) as well as allowing your users to get on with reading
	without disturbance whilst the images load.
</p><p>
	If your HTML is outputted by a <dfn title="content management system">CMS</dfn> and the height and width attributes
	are not added, then either modify the code to look up the image size
	(<a href="http://uk3.php.net/manual/en/function.getimagesize.php" rel="external"><code>getimagesize</code></a> in
	PHP), or hound the developers until they do.
</p>


<h2 id="images">Optimise Images</h2>
<p>
	All imaging software—and <em>especially</em> Adobe Photoshop—output inefficient JPEG and PNG files that waste
	sometimes even hundreds of kilobytes in needless information. There are a number of tools out there that can
	<strong>losslessly</strong> reduce the file size. I’ve seen as much as <abbr title="a meg">1 MB</abbr> or more
	saved from a gallery of thumbnails.
</p>


<h3>ImageOptim</h3>
<p>
	<a href="http://imageoptim.pornel.net/" rel="external">ImageOptim</a> combines multiple PNG (and JPEG)
	optimisation tools into a simple drag-and-drop interface. Everything it does is lossless, based on optimising the
	PNG compression parameters and removing excess hidden data (such as EXIF in JPEGs).
</p>
<img src="/code/website_optimisation_measures/imageoptim.png" alt="Screenshot of ImageOptim" width="640" height="300" />
<p>
	43% bandwidth savings and all you had to do was drag-and-drop!
</p>


<h3>PNGNQ</h3>
<p>
	<a href="http://pngnq.sourceforge.net/" rel="external">pngnq</a> is a command line tool that quantises 24/32-bit
	PNG files into near-perfect 8-bit PNGs. The
	<a href="http://pngnq.sourceforge.net/pngnqsamples.html" rel="external">results</a> are stunning. It also
	maintains full alpha transparency, perfect for website graphics! (yes, it is quite surreal having a 256-colour
	image, with full 256-level alpha, but it works!). Website graphics are not usually going to be using as many colours
	as a photograph so pngnq is perfect for being extra brutal with saving bytes.
</p>


<h2 id="http_requests">Reduce HTTP-Requests</h2>
<p>
	Bandwidth is not the problem when it comes to speed, even on dial-up. The browser can only do a limited number of
	simultaneous HTTP requests (usually between 2 and 6). That is the bottleneck that you are fighting against.
</p><p>
	By whittling the number of HTTP-requests down to an absolute minimum, you will make the time between one page and
	the next almost instantaneous.
</p><p>
	Think of it this way: in a worst case scenario, a single HTTP-request could take up to a second alone if the server
	is under heavy load or if the bandwidth is already saturated.
</p>


<h3 id="print">Combine Print Stylesheet With Main Stylesheet:</h3>
<p>
	Even if a stylesheet in the head uses <code>media="print"</code> the browser will still download it regardless.
	When printing or in print-preview, nothing new can be downloaded, it has to already be in cache. Therefore having a
	print stylesheet in the HTML head is wasting an HTTP-request!
</p><p>
	If you include the CSS print declarations in an <code>@media</code> block in the main stylesheet then the same
	amount of data is being downloaded, but the number of HTTP-requests is reduced, allowing the browser to be busy
	downloading something else. If your CSS sheet is gzipped then the size of the combined stylesheet will be less than
	two separate sheets.
</p>


<h3 id="combine-js">Combine Javascript Files:</h3>
<p>
	Again, being brutal with HTTP-requests, merge JavaScript files into one when publishing.
</p><p>
	I once wrote a
	<a href="http://code.google.com/p/jaxgames/source/browse/trunk/_build/build_mac.command" rel="external">build-system</a>
	that ‘compiled’ a web-app by searching through Javascript files and finding instances of a function called
	<a href="http://code.google.com/p/jaxgames/source/browse/trunk/js/boot.js" rel="external" type="application/javascript"><code>$import</code></a>
	(which just loaded in the named Javascript file), and 
	<a href="http://code.google.com/p/jaxgames/source/browse/trunk/_build/libs/rhino_import.js" rel="external" type="application/javascript">replaced
	the function call</a> with the contents of that file. I used this same method to also combine <code>@import</code>
	statements in CSS sheets with the imported sheet to combine multiple sheets into one.
</p><p>
	Use the <a href="http://developer.yahoo.com/yui/compressor/" rel="external">YUI Compressor</a> to compress
	JavaScript files by removing extraneous whitespace and comments <abbr title="et cetera">&amp;c</abbr>. Google’s
	<a href="http://code.google.com/closure/" rel="external">Closure Compiler</a> is a more powerful tool that
	rewrites the JavaScript file to be as small as possible.
</p><p>
	If you’re writing swathes of code that have to be spread across many files, it’s well worth investing time in
	scripting a decent build system to ‘compile’ the site before uploading to a live environment, or using a
	server-side language like PHP to do this and then cache the result.
</p>


<h3 id="sprites">Use CSS Sprite Sheets:</h3>
<p>
	Use <a href="http://alistapart.com/articles/sprites/" rel="external">sprite sheets</a> to combine various icons
	and imagery into a single image file. This works wonders in most cases but has a few drawbacks. It’s harder to
	update your graphics afterwards, and it has some issues with browser zooming if you haven’t left sufficient space
	around elements. Use this method with the image optimisation methods earlier for solid speed gains.
</p>


<h3 id="base64">Use Base-64 Encoded Images:</h3>
<p>
	Most browsers support base-64 encoding (IE8+), and
	<a href="http://betalon.com/blog/html_css/data-uri-in-css-crossbrowser.htm" rel="external">IE6 and 7 can be
	tricked</a> into supporting it (but this would ideally require a script to automate).
</p><p>
	Base-64 encoded images can be placed inline in the HTML or in the CSS:
</p>

<pre><code>&lt;style&gt;
	/* notice that in CSS, “\” is used to break lines, though in reality you would probably not use line-breaks */
	img	{background: url("data:image/png;base64,\
		 iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAALVBMVEUAAAD////+/v6ezPpbjrIyicIAadYAZukAZu\
		 4AZvUAZvsAZs0AZswAZcsAZcmXfdS2AAAAAXRSTlMAQObYZgAAAElJREFUeF4VxKENgDAQQNFvUK25BEXOMUHrimUB\
		 EgRbsAeSERpQN8uNwDDkzMPMgC7jFh6E7fzo+3wr71UXZUjPqpCnEoqE7v4Dv7MOC059M/cAAAAASUVORK5CYII=")
		 no-repeat center center;}
&lt;/style&gt;

&lt;!-- in HTML “\” is not used because of normal HTML white-space collapsing --&gt;
&lt;img src="data:image/png;base64,
	  iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAALVBMVEUAAAD////+/v6ezPpbjrIyicIAadYAZukAZu
	  4AZvUAZvsAZs0AZswAZcsAZcmXfdS2AAAAAXRSTlMAQObYZgAAAElJREFUeF4VxKENgDAQQNFvUK25BEXOMUHrimUB
	  EgRbsAeSERpQN8uNwDDkzMPMgC7jFh6E7fzo+3wr71UXZUjPqpCnEoqE7v4Dv7MOC059M/cAAAAASUVORK5CYII=" /&gt;</code></pre>

<p>
	There are <a href="http://www.motobit.com/util/base64-decoder-encoder.asp" rel="external">online converters</a> to
	get the base-64 string for an image, but I use
	<a href="http://www.shauninman.com/archive/2008/05/08/image_to_data_droplet_for_os_x" rel="external">Image to
	Data</a>, a nifty droplet that copies the base-64 string of any file you drop on it to the clipboard.
</p><p>
	Base-64 encoded images are larger than the original file (by a third), but if you have multiple base-64 images in a
	stylesheet and then GZip the sheet, the overall gains of less HTTP-requests and GZip acting over multiple files
	combined will <em>far</em> outweigh the size gain converting to base-64. On this site, it’s the difference between
	80 KB of CSS+images, and 22.8 KB for one CSS file with the images inside.
</p><p>
	Because of the increase in data size with base-64, it is vital that you <a href="#images">optimise the images</a>
	you are converting as much as possible—every single byte counts. Combine ImageOptim, PNGNQ, base-64 encoding and
	GZip and you will defy the very Gods with your insane levels of compression.
</p>


<h2 id="gzip">GZip What You Can</h2>
<p>
	Save bandwidth for both you and the user by compressing text-based content such as HTML, CSS and JavaScript files.
</p><p>
	Ideally you should compress the HTML/CSS &amp; JS as part of your build / publishing or caching system (can be done
	using PHP’s
	<a href="http://uk.php.net/manual/en/function.gzencode.php" rel="external"><code>gzencode</code></a> function).
	You can then tell Apache to inform browsers that the the content is compressed in your .htaccess file:
</p>

<pre><code>AddEncoding gzip .html .css .js</code></pre>

<p>
	You can alternatively use
	<a href="http://php.net/manual/en/function.ob-gzhandler.php" rel="external"><code>ob_gzhandler</code></a> to
	automatically compress the output when your PHP code has finished running and is sending the results to the browser.
</p><p>
	If you don’t want to have to compress your files every time you publish, or force your CSS/JS through PHP every
	request, you can get the server to compress files during output. Bear in mind though that this will increase CPU
	usage on the server and might not be ideal under heavy traffic; it’s always better to pre-compress your files.
</p>

<pre><code>SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/javascript text/plain</code></pre>


<h2 id="bg_colours">Imitate Background Images With Colours</h2>
<p>
	An effect that adds to the perception of speed is to use the CSS to closely represent the page’s design without
	images. If you view the page without images, is the page layout still communicated via the same colours?
</p><p>
	For everything with a background image, set a matching background-colour to act as a ‘placeholder’ for the
	image, and where possible, design your HTML structure such that background colours can be used to represent the
	layout of the site when images are not present.
</p><p>
	On <a href="http://tripology.com" rel="external">Tripology</a>, without images, everything just turns a light
	shade of blue, and no structure is communicated.
</p>
<img src="/code/website_optimisation_measures/tripology-background-colours.png" alt="Screenshot of tripology.com without images" width="640" height="445" />
<p>
	Simply put—the website should look almost as good without images, as it should with them.
</p>
<img src="/code/website_optimisation_measures/camen-design-background-colours.png" alt="Screenshot of camendesign.com without images" width="640" height="445" />


<h2 id="clean_html">Write / Output Cleanly Indented HTML</h2>
<p>
	The HTML on this site, in fact, every site I’ve written—CMS or not—has had clean HTML, nicely indented and
	human-readable. Whilst not necessary for all kinds of site, this particular site is very much designed to encourage
	reading of the source.
</p><p>
	There are other benefits though of outputting clean HTML. It greatly helps with debugging HTML / CSS issues, but
	really the benefits are not the result, it’s the fact that it takes a keen eye, patience and a lot of love to get
	a big, heavy 10’000+ line CMS to output perfect HTML and that careful consideration whilst achieving that will
	ensure that you’ve gone over your codebase with a fine-toothed comb and probably end up fixing and improving tons
	more than just HTML.
	<br /><br />
	Clean HTML makes for a clean codebase too.
</p>


<h2 id="drop_ie">Drop Internet Explorer 6 Support</h2>
<p>
	A number of websites, including Apple’s <a href="http://me.com" rel="external">Mobile Me</a> have already taken
	the lead in dropping support for Internet Explorer 6. The trend is
	<a href="http://weblogs.mozillazine.org/asa/archives/2009/03/firefox_3_in_se.html" rel="external">unavoidable</a>.
</p><p>
	Think of it this way:—given that there are more people using Firefox 3 (which passes Acid 2 and supports
	<code>&lt;canvas&gt;</code>) than IE6, the only users of IE6 who can’t upgrade to a newer version or a better
	browser entirely are Win9X users and frozen corporate desktops. Anybody at home using IE6 is doing so out of a lack
	of knowledge that they should install updates, or simply use a <em>better</em> browser.
</p><p>
	You are working your arse off, wasting large amounts of time banging your head against IE6 bugs, for a group of
	people who only need to be shown how to install a better browser. It’s like spending tons of money and effort in
	healthcare dealing with the effects of a disease, when all the time you have the cure in your hand and just need to
	give it to the people, or tell them where to get it.
</p><p>
	The lack of <abbr title="sibling"><code>+</code></abbr> and <abbr title="descendant"><code>&gt;</code></abbr>
	selectors mean that IE6 won’t go near an element without a class or ID in sight. This is insane to be writing code
	this way. This website has no IDs, no classes and no DIVs to show that crazy tag-soup is not necessary.
</p><p>
	You will be able to produce far greater things if you throw away the millstone around your neck that is IE6 and
	start learning everything that’s been possible for the last <em>five</em> years.
</p>


<h2 id="dont_block">Do Not Block Browsers for ‘Compatibility’</h2>
<p>
	This is going to be quite controversial coming from me when I’ve just said to you above to drop IE6 support and
	even my own site does not display correctly with Internet Explorer, but <strong>don’t</strong> bring up a splash
	screen that outright blocks Internet Explorer (any version), or <em>any</em> browser for that matter from accessing
	the content of your site—no matter how
	<a href="http://flickr.com/photos/robotjohnny/3629069606/sizes/l/" rel="external">pretty</a> said screen looks.
</p>
<img src="/code/website_optimisation_measures/cute_but_wrong.jpg" alt="Screenshot of IE6 denial message for momentile.com, cc-by robotjohnny.com" title="Ain’t that cute? … But it’s WRONG!—image cc-by robotjohnny.com" width="600" height="413" />
<p>
	If you don’t like IE6, don’t waste your time writing messages (or drawing pictures) for it (you haven’t got
	Stockholm syndrome have you?). Would you outright block Lynx users, or Dillo users or any user of an alternative
	browser that isn’t ‘compatible’ with your site? Why attack only IE6 when the list of browsers that will be
	compatible with your site is smaller than the list that are not?
</p><p>
	The fact your site looks wrong is besides the point, somebody’s life could depend on being able to access the
	content on your site when all they’ve got is IE6 because of whatever reason. I’ve had to access stuff on my site
	using IE when on other people’s computers or at a public library. You yourself should know that all that matters
	is the raw text in those kinds of desperate situations, not how it looks.
</p><p>
	Completely blocking any browser—IE6 included—goes against the very nature of HTML and CSS, formats that are
	designed to be universally accessible and still be readable with even the littlest of support.
</p><p>
	If you are really concerned about how your website looks on an eight year old browser (would you honestly still use
	and support Netscape 6?), then place a message at the top of the page telling the user to upgrade their browser, but
	don’t hide the content, the text still matters to the user.
</p><p>
	If the layout and content is totally broken by IE6’s partial CSS support, then consider using
	“<a href="http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/" rel="external"><cite>Universal
	Internet Explorer CSS</cite></a>”, a stylesheet that provides a back to basics design for IE6 that can
	communicate the text clearly and forego your complex layout completely, allowing you to focus support on better
	browsers.
</p>

<hr />

<p>
	<strong>Any suggestions or comments</strong>, send them my way;<br />
	hit the e-mail link below.
</p>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
	<nav><a href="http://forum.camendesign.com">‹ Discuss this in the Forum ›</a></nav>
		
	<a href="mailto:kroc@camendesign.com">kroc@camendesign.com</a>
	<nav>view-source:
		<a href="/code/website_optimisation_measures.rem">Rem</a> •
		<a href="/code/website_optimisation_measures.html">HTML</a> •
		<a href="/design/">CSS</a> •
		<a href="/.system/">PHP</a> •
		<a href="/.htaccess">.htaccess</a>
	</nav>
	<form method="get" action="https://duckduckgo.com">
		<input type="hidden" name="sites" value="camendesign.com" />
		<input type="search" name="q" placeholder="search…" />
		<input type="submit" value="Go" />
	</form>
</footer>
<!-- =================================================================================================== code is art === -->