<?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>MikePadgett.com &#187; Technical</title>
	<atom:link href="http://www.mikepadgett.com/content/technology/technical/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.mikepadgett.com</link>
	<description>Articles, reviews, travel, design, literature and more written by Mike Padgett, an Information Designer in Brussels</description>
	<lastBuildDate>Thu, 02 Feb 2012 09:02:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Google Translate strips meta tags</title>
		<link>http://www.mikepadgett.com/technology/technical/google-translate-strips-meta-tags/</link>
		<comments>http://www.mikepadgett.com/technology/technical/google-translate-strips-meta-tags/#comments</comments>
		<pubDate>Thu, 25 Aug 2011 15:12:27 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[language]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=3516</guid>
		<description><![CDATA[Google Translate is pretty zealous with the head section of web pages when translating full URLs]]></description>
			<content:encoded><![CDATA[<p>Google&#8217;s excellent <a title="Links to an external website" href="http://translate.google.com/">Translate service</a> has been handling full URLs for a long time already.</p>
<p>I had never needed to know what actually happened when the translation crawls through a whole page until this morning, when I discovered that all of my custom <tt>meta</tt> elements were being stripped out.</p>
<div class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2011/08/trans.jpg" alt="Google Translate in Yiddish" width="612" height="291" /></div>
<p>The values of these <tt>meta</tt> elements were important to me because I was using them to determine on a page by page basis the parameters in a querystring for a JSONP service.</p>
<p>For those for whom it&#8217;s necessary to store data in <tt>meta</tt> elements in oft-translated web pages, consider yourselves well warned!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/google-translate-strips-meta-tags/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Highcharts and HTML5: IE&#8217;s innerHTML unknown runtime error</title>
		<link>http://www.mikepadgett.com/technology/technical/highcharts-and-html5-ies-innerhtml-unknown-runtime-error/</link>
		<comments>http://www.mikepadgett.com/technology/technical/highcharts-and-html5-ies-innerhtml-unknown-runtime-error/#comments</comments>
		<pubDate>Fri, 22 Jul 2011 10:10:01 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[browser wars]]></category>
		<category><![CDATA[ie7]]></category>
		<category><![CDATA[internet explorer]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=3464</guid>
		<description><![CDATA[Internet Explorer's hoary old unknown runtime error comes back to haunt me in HTML5]]></description>
			<content:encoded><![CDATA[<p>I recently ran into the classic &#8220;<a href="http://stackoverflow.com/questions/555965/javascript-replace-innerhtml-throwing-unknown-runtime-error" title="Links to an external website">unknown runtime error</a>&#8221; while testing some of my work with <a href="http://www.highcharts.com/" title="Links to an external website">Highcharts</a> in Internet Explorer 8.</p>
<p>The &#8220;unknown runtime error&#8221; was at one time a common problem when working with <tt>innerHTML</tt> in Internet Explorer as for some elements it&#8217;s a read-only property. Needless to say, I was a bit surprised to see it this time, especially since I couldn&#8217;t spot anything out of the ordinary.</p>
<div class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2011/07/error-innerhtml.gif" alt="error innerhtml" width="556" height="373" /></div>
<p>Then I suddenly realised that the source of the problem was probably the dynamically-created HTML5 <tt>figure</tt> element into which I was asking Highcharts to insert my chart. Rather than mess about with the Highcharts library and a homegrown workaround <em>du jour</em>, I decided to go with a simple <tt>div</tt>.</p>
<p>As with everything Microsoft, given time things will work out. <a href="http://msdn.microsoft.com/en-us/library/gg593038%28v=VS.85%29.aspx" title="Links to an external website">Updated <tt>figure</tt> documentation from Microsoft</a> and <a href="http://caniuse.com/#feat=html5semantic" title="Links to an external website">Caniuse.com</a> confirm that support for HTML5 semantic elements (and therefore read/write <tt>innerHTML</tt>) should be available in IE9.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/highcharts-and-html5-ies-innerhtml-unknown-runtime-error/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Can Google Mini help you find intranet content easily? Search me&#8230;</title>
		<link>http://www.mikepadgett.com/technology/technical/can-google-mini-help-you-find-intranet-content-easily/</link>
		<comments>http://www.mikepadgett.com/technology/technical/can-google-mini-help-you-find-intranet-content-easily/#comments</comments>
		<pubDate>Wed, 13 Oct 2010 20:16:02 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[Information design]]></category>
		<category><![CDATA[intranet]]></category>
		<category><![CDATA[search]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=3045</guid>
		<description><![CDATA[Problems aplenty getting to grips with the search facilities provided by Google's Mini appliance.]]></description>
			<content:encoded><![CDATA[<div class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2010/10/mini.jpg" alt="Mini" width="600" height="210" /></div>
<p>I&#8217;ve spent much of this week struggling with a <a href="http://www.google.com/enterprise/search/mini.html" title="Links to an external website">Google Mini</a>, a server that plugs into a network, crawls what it&#8217;s told to crawl and then returns search results using the vendor&#8217;s famous technology.</p>
<p>The Mini had been sitting there in perfect anonymity &#8211; as far as being bright yellow allows &#8211; on the server rack, looking like a slab of emmental. It&#8217;s a cheaper and therefore more limited version of the Enterprise search which I first came across over five years ago while <a href="/editorial/new-job/">working for Research Machines</a>.</p>
<p>One fine day, someone vaguely remembers the Mini&#8217;s existence and I&#8217;m asked to &#8220;look into it&#8221;. Good things rarely come of these three words.</p>
<h3>Getting started</h3>
<p>I&#8217;ve never been keen on Google&#8217;s documentation and the bumph that ships with the box is no exception.</p>
<p>The information is properly formatted but it just never seems to get inside my thick skull. In my experience as an information designer, this tends to happen when the writer fails to provide a context. It helps to know the purposes, reasons and consequences of one&#8217;s interactions.</p>
<p>I&#8217;m not a sys-admin, but I&#8217;m not exactly a technology virgin either. Even so, getting to grips with the new vocabulary (&#8220;OneBox&#8221;, &#8220;Host Load Schedule&#8221;, &#8220;Freshness Tuning&#8221;) is a difficult experience.</p>
<h3>Background activity</h3>
<p>According to the log file, I learn that the Mini has been happily crawling away for the last almost three years already. Perhaps the <a href="http://code.google.com/apis/searchappliance/documentation/50/admin_crawl/Introduction.html#GoogleMiniLicLimit" title="Links to an external website">licence limit</a> has been met.</p>
<p>Could this go some way to explaining the steampowered search speeds I&#8217;ve been getting? With 50,000 items of content in the index and me the only user querying them, an enormous recordset of 269 results is rendered in a dizzying 34 seconds!</p>
<div class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2010/10/results.gif" alt="Search results" width="350" height="34" /></div>
<h3>Front-ends</h3>
<p>One of the better aspects of the box admin is the ability to alter the search/results UI. There&#8217;s so much bad code in the factory XSLT that this comes as a big relief.</p>
<h3>Customised search results</h3>
<p>As this autumnal week of long shadows draws to a weary close, I&#8217;m left plugging away at what originally promised to be the most interesting aspect of the Mini for me.</p>
<p>OneBox modules are self-written keys to leverage information from other datasources when returning Mini search results. In theory, you can poll another server when users &#8216;trigger&#8217; the functionality in their search terms. Here&#8217;s an example:</p>
<ol>
<li>User submits a search query for <tt>who: mike padgett</tt></li>
<li>Google Mini checks the query for <em>triggers</em> &#8211; keywords or phrases that trigger a OneBox</li>
<li>Google Mini runs the search for <tt>mike padgett</tt> normally and polls the location defined in the OneBox, say, <tt>http://myserver/?q=mike+padgett</tt></li>
<li>Google Mini processes the results and returns custom-formatted content above the ordinary search results</li>
</ol>
<p>This offers fantastic opportunities for the &#8220;joined-up&#8221; organisation. Rather than simply go ahead and dump the output of the crawl matches, we can first offer customised boxes of information. Google already uses many examples of OneBox modules in its own online searches, including geographically aware <a href="http://www.google.com/#q=weather+in+brussels">weather summaries</a> and <a href="http://www.google.com/#q=convert+1+inch+to+mm" title="Links to an external website">unit conversion</a>.</p>
<p>I decided to adapt an &#8220;internal organisation&#8221; example outlined by Google by developing a little box for staff member contact details, triggered by a <tt>who</tt> keyword similar to that mentioned above.</p>
<p>So far, however, I&#8217;ve been unable to get anything working. What I&#8217;ve been left with are: a blank search log, no error logging and a mild headache. Watch this (vacant) space&#8230;</p>
<h3>Epilogue</h3>
<p>It&#8217;s not easy to say whether the Mini &#8211; or indeed big brother Enterprise &#8211; has been a success. Of course, the Gartners of this world probably told you that it was the best thing since Sharepoint. </p>
<p>As for the people who actually have to work with the stuff on which management bursts the budget, there are some pretty jaded reviews out there. </p>
<p><a href="http://michaelcottam.blogspot.com/2009/07/google-mini-disposable-search-engine-in.html" title="Links to an external website">Michael Cottam talks of hardware failure</a>, while <a href="http://www.justindeltener.com/google-mini-appliance-review-and-integration-tutorial/" title="Links to an external website">Justin Deltener&#8217;s problems</a> were all software-related.</p>
<p>Finally, I think that <a href="http://hackerboss.com/the-silver-bullet-that-wasnt/" title="Links to an external website">Ville Laurikari sums up</a> many of my own frustrations when he says: &#8220;It’s like shining a bright light on a big pile of crap. It’s still a pile of crap, but you can see it more clearly.&#8221;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/can-google-mini-help-you-find-intranet-content-easily/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>IE7 only: float bug on elements with italic, background properties</title>
		<link>http://www.mikepadgett.com/technology/technical/ie7-only-float-bug-on-elements-with-italics-and-background-properties/</link>
		<comments>http://www.mikepadgett.com/technology/technical/ie7-only-float-bug-on-elements-with-italics-and-background-properties/#comments</comments>
		<pubDate>Mon, 13 Jul 2009 20:28:42 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[browser wars]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[web standards]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=1248</guid>
		<description><![CDATA[What do you get if you cross a float and an italic in Internet Explorer?]]></description>
			<content:encoded><![CDATA[<p>Setting <tt>font-style:italic</tt> in your CSS for elements in the vicinity of a floated element can actually trigger a float bug in Internet Explorer 7.</p>
<p>This is only a problem, so far as I can see,  when you&#8217;re using backgrounds on the unfloated element(s), because thr background image or colour will overrun your floated element.</p>
<p>Want to try it? The situation is as follows:</p>
<ol>
<li>Float an element containing either an image or text</li>
<li>Continue with unfloated elements so that under normal circumstances they wrap around the floated element</li>
<li>Give the wrapped text a background property, such as a background colour or image</li>
</ol>
<p>The code so far:</p>
<p><code>/* CSS */<br />
.floated {float: right;}<br />
p {background: #fc0;}<br />
...<br />
&lt;!-- HTML --&gt;<br />
&lt;div class="floated"&gt;&lt;img src="/images/tmp.jpg" /&gt;&lt;/div&gt;<br />
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/p&gt;<br />
&lt;p&gt;Class aptent taciti sociosqu ad litora torquent per conubia nostra per inceptos himenaeos&lt;/p&gt;<br />
</code><br />
Up to this point everything&#8217;s normal:</p>
<div class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/07/no-bug.gif" alt="No bug" /></div>
<p>So far so good. Now add <tt>font-style:italic;</tt> to the rule for <tt>p</tt>.</p>
<p>Here&#8217;s Firefox, with no surprises:</p>
<div class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/07/ff-italic-bug.gif" alt="Firefox italic float: no bug" /></div>
<p>But here&#8217;s Internet Explorer 7:</p>
<div class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/07/ie-italic-bug.gif" alt="IE italic float bug" /></div>
<p>The only (il)logical answer seems to be the addition of <tt>overflow: auto</tt> to the rule with the background.</p>
<p>I was clued in by a <a href="http://muffinresearch.co.uk/archives/2006/12/28/bug-ie7-absolutely-positioned-italics/">slightly different issue with the same fix</a> already discovered long ago. Just to remind you once more, <em>this is IE7 only</em>, folks!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/ie7-only-float-bug-on-elements-with-italics-and-background-properties/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Testing CSS for print media: we need a Print Preview for developers!</title>
		<link>http://www.mikepadgett.com/technology/technical/testing-css-print-media-we-need-a-print-preview-for-developers/</link>
		<comments>http://www.mikepadgett.com/technology/technical/testing-css-print-media-we-need-a-print-preview-for-developers/#comments</comments>
		<pubDate>Mon, 15 Jun 2009 19:15:42 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[browser wars]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[web standards]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=1190</guid>
		<description><![CDATA[How I wish there was an easier way to test CSS intended for the printed page.]]></description>
			<content:encoded><![CDATA[<div class="imgright"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/06/press.gif" alt="Engraving of a printing press c. 1568" /></p>
<p class="caption">Source: <a title="Links to an external website" href="http://en.wikipedia.org/wiki/File:Printer_in_1568-ce.png">Wikimedia Commons</a></p>
</div>
<p>The virtues of <tt>@media print</tt> have been explained elsewhere, best of all by Eric Meyer in his seminal A List Apart article <a title="Links to an external website" href="http://www.alistapart.com/articles/goingtoprint/"><em>Going to Print</em></a>, whose original publish date (May 2002) makes me feel a bit old!</p>
<p>Yet one of the most annoying aspects of developing CSS for print is testing it.</p>
<p>Now I know that testing print CSS doesn&#8217;t take a huge slice of our lives, but it annoys the heck out of me. So if you&#8217;re a tolerant sort of person who&#8217;s happy to rub along with naff workflows, you might find this article and indeed the fact that there&#8217;s a whole article on the subject, just a bit finicky.</p>
<p>Thing is, I <em>hate</em> testing print CSS.</p>
<p>Sure, simple markup and layouts only need buffing to a shine to be ready for print, but an increase in complexity or a requirement for absolute fidelity in printed material can lead to ugly scenes round my way.</p>
<h3>Print CSS: browser testing !== <em>Print Preview</em> testing</h3>
<div class="imgleft"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/06/print.jpg" alt="Print styles in Firefox and Internet Explorer" /></div>
<p>Developers tend temporarily to substitute their screen CSS for their print CSS, run it in the ordinary browser environment, <em>et voilà</em>. Rinse and repeat.</p>
<p>Yet the actual conversion to the printed page can sometimes lead to unexpected results, as can be seen in the image: different browsers, different <em>Print Preview</em> results &#8211; even though in the browser there was nothing obviously objectionable.</p>
<h3>Print Preview !== a tool for development</h3>
<p>Finding fiddly print CSS issues would be a lot easier if testing tweaks was a smoother process. Every change cycle equates to:</p>
<ol>
<li>Refresh the page</li>
<li>Invoke Print Preview</li>
<li>Review the change</li>
<li>Close Print Preview</li>
</ol>
<p>Testing print CSS as opposed screen CSS appends two additional steps 2 and 4 &#8211; invoke Print Preview (<tt>Alt + F + V</tt> in Windows for both IE and Firefox) and close Print Preview (correspondingly <tt>Alt + F4</tt>) . Those two simple steps make the business <em>very</em> laborious, <em>even</em> if you can remember those shortcuts.</p>
<h3>Slight workflow improvement: an IE-only trick</h3>
<p>A dirty little script <em>in IE only</em> takes care of the task of invoking Print Preview, which slightly shortens the workflow. Yes, it&#8217;s IE only, but given that it&#8217;s usually IE giving me print CSS grief, every little helps:</p>
<p><code>&lt;script type="text/javascript"&gt;<br />
function printpr()<br />
{<br />
var OLECMDID = 7;<br />
var PROMPT = 1;<br />
var WebBrowser = '&lt;OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"&gt;&lt;/OBJECT&gt;';<br />
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);<br />
WebBrowser1.ExecWB(OLECMDID, PROMPT);<br />
WebBrowser1.outerHTML = "";<br />
}<br />
printpr();<br />
&lt;/script&gt;</code></p>
<p>This script automatically invokes IE&#8217;s Print Preview. Dump it just before the <tt>&lt;/body&gt;</tt> and save yourself a shortcut! You could also call <tt>printpr()</tt> from anywhere else, of course. And <a title="Links to an external website" href="http://www.jguru.com/faq/view.jsp?EID=490852">here&#8217;s the source of the original code snippet</a>, which also shows a few other unrelated options such as <tt>Save As</tt>.</p>
<h3>Why can&#8217;t we refresh the Print Preview?</h3>
<p>All of which finally begs the question, why can&#8217;t we simply refresh the Print Preview with an <tt>F5</tt> shortcut, just like we have in the browser itself?</p>
<p>Probably because I&#8217;m the only person in the world who gets genuinely annoyed by testing print CSS in Print Preview. More fool me, I guess.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/testing-css-print-media-we-need-a-print-preview-for-developers/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Typekit: when will web fonts flow freely?</title>
		<link>http://www.mikepadgett.com/technology/technical/typekit-when-will-web-fonts-flow-freely/</link>
		<comments>http://www.mikepadgett.com/technology/technical/typekit-when-will-web-fonts-flow-freely/#comments</comments>
		<pubDate>Mon, 01 Jun 2009 16:10:17 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[browser wars]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=1149</guid>
		<description><![CDATA[Better CSS3 implementation in some browsers brings many more typographic choices. But we're not quite there yet.]]></description>
			<content:encoded><![CDATA[<div class="imgright"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/06/aaa.gif" alt="Embedded web fonts: is it now finally happening?" /></div>
<p>Proper font embedding in a browser is long overdue. We&#8217;ve had to put up with the same old Arial, Verdana, Georgia, Helvetica, Times New Roman for years.</p>
<p>Now that browsers have to some extent caught up with the rest of us, thanks in no small part to a bit of healthy competition, <a title="Links to an external website" href="http://blog.typekit.com/2009/05/27/introducing-typekit/">Typekit</a> has finally answered the call: you&#8217;ll soon be able to choose what fonts drive your website.</p>
<h3>Everyone&#8217;s favourite glue</h3>
<p>We&#8217;ve had <a title="Links to an external website" href="http://www.mikeindustries.com/sifr"><abbr title="Scalable Inman Flash Replacement">sIFR</abbr></a>, we&#8217;ve had <a title="Links to an external website" href="http://www.stuffandnonsense.co.uk/archives/mir_image_replacement.html"><abbr title="Malarkey Image Replacement">MIR</abbr</a> and we&#8217;ve had <a title="Links to an external website" href="http://www.mezzoblue.com/tests/revised-image-replacement/"><abbr title="Revised Image Replacement">RIR</abbr></a>. We&#8217;ve probably had enough.</p>
<p>None of these solutions proved to be ideal, but how often is <em>anything</em> ever ideal on the client side?</p>
<p>Well, let&#8217;s take a look at Typekit. At the time of writing, there isn&#8217;t too much to go on, but what we <em>do</em> know is this:</p>
<ol>
<li>Typekit&#8217;s solution uses (quite a lot of) Javascript</li>
<li>The solution &#8216;downloads&#8217; a font feed from a predetermined location</li>
<li>A &#8216;modern&#8217; browser will interpret <abbr title="Cascading Style Sheets">CSS</abbr> <tt>@font-face</tt> correctly and render the desired fonts</li>
</ol>
<p>So Typekit is merely following in the footsteps of jQuery, Prototype and other <abbr title="Javascript">JS</abbr> libraries. It&#8217;s about using Javascript as a sort of web glue to make things fit together. However, this time around it&#8217;s not being used to cover up for browser naffness.</p>
<p>Typekit will count on consistent support of modern browsers for the <a title="Links to an external website" href="https://developer.mozilla.org/en/CSS/@font-face">@font-face</a> at-rule. This at-rule has actually been around since the <abbr title="Cascading Style Sheets">CSS</abbr> 2.0 specification, though <a title="Links to an external website" href="http://www.w3.org/TR/css3-webfonts/#font-descriptions">a better, verbose description appears in <abbr title="Cascading Style Sheets">CSS</abbr> 3.0</a>. An orthodox implementation of the at-rule looks like this:</p>
<p><code>@font-face {<br />
font-family: "Mike Old Face";<br />
src: url("http://www.mikepadgett.com/fonts/mikefont.otf")<br />
}<br />
/* The .TTF (true type format) will also be supported, as would *any* URL */<br />
</code></p>
<p>Once the font is &#8220;instantiated&#8221;, it can then be utilised (in Hemingway&#8217;s <em>Fiesta</em> sense of the word) normally:</p>
<p><code>h3 {<br />
font: normal 120% "Mike Old Face", "Times New Roman", Times, serif;<br />
}</code></p>
<p><a title="Links to an external website" href="http://webfonts.info/wiki/index.php?title=%40font-face_browser_support">Browser support for <tt>@font-face</tt></a> is still a bit patchy but things are picking up fast and now the browser people have discovered the joy of automatic updating, we can expect a fairly rapid uptake.</p>
<p>On the bright side, it&#8217;ll mean that designers can make more beautiful websites. The dark side is that many other websites are going to get a lot uglier!</p>
<div class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/06/ip.gif" alt="Intellectual property issues with web fonts" /></div>
<h3>But glue can get sticky</h3>
<p>Microsoft tried and failed to get their <a title="Links to an external website" href="http://en.wikipedia.org/wiki/Embedded_OpenType">Embedded Open Type</a> solution accepted by the world at large (there wasn&#8217;t much of anything &#8216;open&#8217; about it, of course). Redmond ended up handing it over the <abbr title="World Wide Web Consortium">W3C</abbr> as a feeble proposal for <abbr title="Cascading Style Sheets">CSS</abbr> 3.0.</p>
<p>One of the itchier reasons for all the fumbling was the issue of <a title="Links to an external website" href="http://lists.w3.org/Archives/Public/www-style/2008Apr/0227.html">proprietary rights to the fonts themselves</a>. This same issue may well cause problems for Typekit, though this time in the reverse sense.</p>
<p>You see, whilst the Typekit solution is likely to appease and perhaps even create uncharacteristic interest from type foundries (it appears to properly respect intellectual property rights), it might not sit well with many designers and even less with developers.</p>
<p>Here&#8217;s why:</p>
<p>The story goes that the Typekit script is going to be pretty hefty. It needs to be to do all the processing it would need to do and how long is that going to take? In addition, the font pattern will then <em>also</em> need to be downloaded (some fonts are marvellously chunky themselves).</p>
<p>Next, the matter of the rights. One of the first things I learned about business is that the real value is in contracts rather than sales, especially when you&#8217;re selling other people&#8217;s products. So it goes without saying that Typekit needs to be a subscription service.</p>
<p>On the one hand, some orgs would sell their chairman to properly and faithfully reproduce their branding online. How on the other, as <a title="Links to an external website" href="http://blog.typekit.com/2009/05/27/introducing-typekit/#comment-274">one commenter suggested</a>, do you now square it with your client that your <em>design</em> will actually attract an ongoing cost? Could this be another opportunity for Open Source or are the foundries on the edge of the precipice into which the music industry has already fallen?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/typekit-when-will-web-fonts-flow-freely/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>RUP for user experience professionals</title>
		<link>http://www.mikepadgett.com/technology/technical/rup-for-user-experience-professionals/</link>
		<comments>http://www.mikepadgett.com/technology/technical/rup-for-user-experience-professionals/#comments</comments>
		<pubDate>Mon, 13 Apr 2009 08:34:44 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[business processes]]></category>
		<category><![CDATA[ibm]]></category>
		<category><![CDATA[information architecture]]></category>
		<category><![CDATA[information technology]]></category>
		<category><![CDATA[methodology]]></category>
		<category><![CDATA[project management]]></category>
		<category><![CDATA[rup]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=981</guid>
		<description><![CDATA[RUP may answer a lot of organisational issues but what's in it for User Experience professionals?]]></description>
			<content:encoded><![CDATA[<div class="imgright"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/04/rup-2.jpg" alt="" /></div>
<p>Here&#8217;s a quick introduction to the Rational Unified Process (RUP) &#8211; IBM&#8217;s software development process framework &#8211; and what&#8217;s in it for user experience professionals. Comments are welcome and encouraged.</p>
<p>An overview of the RUP is essential reading and you&#8217;ll find that elsewhere. Assuming that&#8217;s covered, let&#8217;s say that the RUP consists of three basic elements:</p>
<ul>
<li> Project lifecycle phases [<a id="ref-1" href="#note-1">1</a>]</li>
<li>Software development best practices [<a id="ref-2" href="#note-2">2</a>]</li>
<li>Definition of disciplines [<a id="ref-3" href="#note-3">3</a>]</li>
</ul>
<h3>RUP basics</h3>
<p>Crudely put, the RUP is simply common sense distilled into a set of principles and practices that form a business process. This common sense is the product of lessons learned over the course of many years&#8217; software development experience, together with a healthy dose of theoretical steering.[<a id="ref-4" href="#note-4">4</a>]</p>
<p>Rather than being a prescriptive, fixed software development process, RUP is object-oriented, customisable and modular. Thus to be <em>implemented</em> by an organisation, the RUP must first be <em>designed</em>.</p>
<p>A designed process consists of roles, the tasks these roles do (called &#8220;Artifacts&#8221;) and how the tasks should be done. These artifacts are informed by disciplines described in the RUP documentation.</p>
<h3>RUP concepts familiar to UX professionals</h3>
<p>Like many aspects of the most if not all of the <em>disciplines</em> identified by the RUP will already be familiar to most user experience professionals depending on their exposure to the whole development process. </p>
<p>What may be less evident is how their individual roles and highly specialised tasks fit in the scheme of a RUP business.</p>
<div class="imgleft"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/04/rup-1.jpg" alt="" /></div>
<p>Of the <em>best practices</em> in the RUP, user experience professionals will recognise iterative development and probably already work iteratively. For example, prototyping and prototype testing are usually iterative processes as is visual design.</p>
<p>Component-based architecture is also analogous to pattern-based design and the Cooper methodology. Like user experience activities, the language of RUP is all about workflow and outcomes.</p>
<p>Finally, most RUP processes are described visually, having been modelled with UML. UX professionals will appreciate this and may find themselves very capable of getting involved with the design of the RUP itself.</p>
<h3>How RUP addresses user experience design</h3>
<p>User experience is <em>expressly</em> included in the <em>Analysis and Design</em> discipline and embodied in the role of the <em>User Interface Designer</em>, whose tasks are to design and prototype the user interface and whose outcomes are a Navigation Map (something like a taxonomy) and a User Interface Prototype.</p>
<p>Ostensibly however, the User Interface Designer has no prescribed involvement in the development of use cases, software design or testing. His/her role is limited simply to the prototype and design of the user interface.</p>
<p>This role, with its default set of inputs and outputs, might work well enough for simple software that perhaps relies heavily on established patterns (traditional desktop client interfaces, for example) but it seems rather archaic and inflexible among  today&#8217;s technologies.</p>
<h3>Perceived friction between the RUP and user experience design</h3>
<p>In my opinion, the &#8220;classic&#8221; RUP leaves an absurd amount of risk at the door of just a few individuals: the burden lies particularly heavily on software architects and system analysts.</p>
<p>In practice, the idea of a User Interface Designer à la RUP probably won&#8217;t fit so neatly into your organisation. You might for example separate such activities between visual or experience designers and information architects, or prescribe others not mentioned above.</p>
<p>Furthermore the user experience professional&#8217;s role has very little connectivity with the wider development process, whilst carte blanche is given to more &#8220;senior&#8221; figures to totally limit or ignore the influence of user experience on the finished product. There&#8217;s a risk therefore that the positive benefits of UX and user-centred design on requirements gathering, architecture and testing tend to go unrecognised.</p>
<p>In this way, the RUP apparently leaves very little room for innovation, not least because it strongly favours predictability over agility. And while much work has been done on this aspect &#8211; agile processes are now the subject of a high-profile plugin &#8211; newer, evolving UX disciplines such as information architecture do not fit comfortably in the RUP sphere.</p>
<p>At best, this seems uncompetitive, at worst and to acknowledge the horror stories of many user experience professionals, it is unwise.</p>
<div class="imgright"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/04/rup-3.jpg" alt="" /></div>
<p>So just as the RUP demands considerable (and uncommon) breadth and maturity from its architects and analysts, the same is also required from organisations as a whole.</p>
<p>Maturity means among other things not taking the RUP specifications too literally. There <em>is</em> a difference between RUP roles and real jobs. Just because a user experience professional does this or that task in the RUP, it does not follow that the organisation&#8217;s expectations of him/her should stop there.</p>
<p>From another angle, if UX professionals have other work to do that requires different skills and experience, it might be difficult to justify these in a narrow RUP implementation. Hence the requirement for maturity in the organisation.</p>
<p>There is an appreciable risk of commoditising and compartmentalising job roles, particularly if the organisation doesn&#8217;t already consider UX among the highest priorities. Indeed I have seen something similar done with <abbr title="Information Technology Infrastructure Library">ITIL</abbr> transformations: one day the goalkeeper turns up for the match only to discover he&#8217;s been moved to centre forward.</p>
<h3>Summary: shake well before use</h3>
<ul>
<li>The RUP is a process library for software development and the technology function at large.</li>
<li>A sensitive implementation of the RUP has the potential to considerably improve technology projects, functions and processes, as well as the lot of those who work on them.</li>
<li>User experience professionals are given an expressly defined role and the benefits of their work is recognised and embodied by the RUP.</li>
<li>The RUP does not however put user-centred design at the heart of its approach to software development and UX professionals should consider carefully how their contribution can be properly recognised in a typical RUP environment.</li>
</ul>
<h3>Notes</h3>
<ol>
<li id="note-1">Consisting of Inception, Elaboration, Construction and Transition. <a href="#ref-1">↑</a></li>
<li id="note-2">Consisting of Iterative development, Requirements management, Component-based architecture, Visual modelling, Ongoing quality assurance, Change management <a href="#ref-2">↑</a></li>
<li id="note-3">Consisting of Business modelling, Requirements, Analysis and design, Implementation, Testing, Deployment, Configuration and Change Management, Project management, Environment <a href="#ref-3">↑</a></li>
<li id="note-4">For more on the history of RUP, see <a title="Links to an external website" href="http://en.wikipedia.org/wiki/Rational_Software">the Wikipedia article on the original, pre-IBM Rational</a> software <a href="#ref-4">↑</a></li>
</ol>
<p>The images in this article are all of artworks by <a href="http://en.wikipedia.org/wiki/Mc_escher" title="Links to an external website">M C Escher</a>.</p>
<h3>Further reading</h3>
<ul>
<li>UIDesign.net Editorial (2001) <a title="Links to an external website" href="http://www.uidesign.net/2000/opinion/UIRupture.html">UI RUPture: can Rational Unified Process really facilitate a better experience?</a></li>
<li>Phillips and Kemp (2002) <a title="Links to an external website" href="http://portal.acm.org/citation.cfm?id=563985.563989">In support of user interface design in the rational unified process</a></li>
<li>Lif and Göransson (2008) <a title="Links to an external website" href="http://www.springerlink.com/content/33845541l2656416/">Usability Design: A New Rational Unified Process Discipline</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/rup-for-user-experience-professionals/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Progressive enhancement and Flash: no longer a pact with the Devil</title>
		<link>http://www.mikepadgett.com/technology/technical/progressive-enhancement-flash-no-longer-a-pact-with-the-devil/</link>
		<comments>http://www.mikepadgett.com/technology/technical/progressive-enhancement-flash-no-longer-a-pact-with-the-devil/#comments</comments>
		<pubDate>Tue, 17 Feb 2009 17:07:39 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[web standards]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=757</guid>
		<description><![CDATA[Using xHTML as an accessible data source for Flash objects just got a bit easier thanks to Faust.]]></description>
			<content:encoded><![CDATA[<div class="imgright"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/02/flash.gif" alt="Flash" /></div>
<p>For me, Flash development pretty much dropped off the radar in 2004. <a title="Links to an external website" href="http://www.useit.com/alertbox/20001029.html">Jakob Nielsen famously killed the idea</a> of Flash as the be-all and end-all of websites and suddenly, like the stock market interest in the dotcoms, the buzz had gone.</p>
<p>I wrote about Flash again in 2006 on the occasion of the <a href="http://www.mikepadgett.com/technology/flash-is-10/">technology&#8217;s tenth birthday</a>, noting at the time that it was thanks to Flash that the online video boom had happened.</p>
<h3>Flash design 1.0</h3>
<p>Why did everyone stop doing Flash sites?</p>
<ol>
<li>Good design goes to heaven, it is often said, and bad design goes everywhere. Accessibility and usability suffered while the keyframes fizzed by. If you allowed your website to become a puzzle, as Nielsen concluded, users would just go elsewhere.</li>
<li>The Internet has always been a fickle sort of business, particularly once the marketers got into it. Flash as a key differentiator eventually and inevitably reached saturation point. There was no longer a wow factor to be had in whizzing keyframes: like the bodykitted <a title="Links to an external website" href="http://en.wikipedia.org/wiki/Vauxhall_Nova#Opel_Corsa_A">Vauxhall Nova</a>, every idiot had one.</li>
<li>The future of the Internet was predicated on &#8216;social&#8217; (and therefore interactive), user-generated content and relationships yet 99.9% of Flash sites were 99.9% read-only.</li>
<li>Javascript libraries reignited, then accelerated, the capabilities of the &#8216;traditional&#8217; XHTML-CSS interface.</li>
</ol>
<h3>A place in the sun</h3>
<p>The environment in which Flash finds itself today is rather different. Accessibility, usability and web standards are essential factors. Browsers are generally much improved. Business efficiency and profitability are paramount.</p>
<p>And within that environment Flash still has a place that, when implemented correctly, continues to be unchallenged in terms of relevance and effectiveness. It&#8217;s the format of choice for online video and music delivery, it&#8217;s still interoperable with excellent XML support and it continues to gain traction in the ever-growing mobile market.</p>
<h3>Progressive enhancement and visualisations</h3>
<p>Though much maligned as a user experience killer in the bad old days, most developers recognise the benefits of Flash <em>in small doses</em>. Flash was and is incredibly useful for visualisations. The last time I used it heavily, for example, was in the development of a floorplanning tool. I use it more often, however, for graphing numbers and geographical mapping (though GoogleMaps has increasing advantages).</p>
<p>When the metaphor is necessarily visual and the data is dynamic, there isn&#8217;t much out there that can match Flash for quick, effective results.</p>
<p>Now with &#8216;modern&#8217; methods, we can also provide an accessible experience. Any HTML table of data, or an ordered list of countries and their attributes, is a candidate for visualisation and pre-formatted data source. The original data will still be there on the page but a bit of simple DOM work can convert it into something Flash can use.</p>
<h3>Faust and the DOM</h3>
<div class="imgright"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/02/ie-jquery-strange.jpg" alt="Crap Internet Explorer strikes again" width="300" height="202" /></div>
<p>As with many of these &#8216;development trends&#8217;, we&#8217;ve been doing it for years but some smart folks had to put a name to it. In this case, it&#8217;s the agency <a title="Links to an external website" href="http://www.space150.com">Space150</a> and they&#8217;ve named it after <a title="Links to an external website" href="http://www.space150.com/news/faust-flash-augmenting-standards">everyone&#8217;s favourite devil-dealer Faust</a>.</p>
<p>The idea is to provide content <em>on the page</em> and have Flash use that content via its support for XML. The visualisation is displayed and, typically though not always, the original content is hidden by recourse to Javascript.</p>
<p>So it follows that the content exists without Flash requesting it, which means that it&#8217;s accessible and search-engine friendly.</p>
<p>What&#8217;s interesting though, is how the developers got around DOM limitations caused by Internet Explorer&#8217;s serialisation of HTML rather than XML. Consider the following example:</p>
<p><code>&lt;ol id="countries"&gt;<br />
&lt;li id="cty-1"&gt;&lt;a href="#"&gt;Algeria&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-2"&gt;&lt;a href="#"&gt;Argentina&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-3"&gt;&lt;a href="#"&gt;Australia&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-4"&gt;&lt;a href="#"&gt;Belarus&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-5"&gt;&lt;a href="#"&gt;Brazil&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-6"&gt;&lt;a href="#"&gt;Canada&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-7"&gt;&lt;a href="#"&gt;Chile&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ol&gt;<br />
</code></p>
<p>In Javascript, we ask:</p>
<p><code>alert(document.getElementById('countries').innerHTML);</code></p>
<p>or with JQuery if you prefer:</p>
<p><code>alert($('#countries').html());</code></p>
<p>Here&#8217;s the DOM excerpt from Firefox:</p>
<p class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/02/ff-jquery-html.gif" alt="Firefox DOM excerpt" width="326" height="196" /></p>
<p>Now note the equivalent excerpt from Internet Explorer:</p>
<p class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/02/ie-dom-html.gif" alt="Internet Explorer DOM excerpt" width="296" height="185" /></p>
<p>See how the nodes get capitalised and the @id is stripped of quotes? This isn&#8217;t &#8220;illegal&#8221; behaviour, but it <em>is</em> exceptionally irritating. Passing that IE excerpt as a string to Flash via flashvars is a recipe for trouble.</p>
<p>The developers &#8220;sanitise&#8221; this DOM output by converting it to XHTML (and therefore well-formed XML) using a (relatively) simple function contained in their innerxhtml.js:</p>
<pre><code>// innerXHTML
// -------------------------------------------------------
// Copyright (c) 2006 space150, LLC and released under the CPL license:
// http://opensource.org/licenses/cpl1.0.php
// -------------------------------------------------------
function innerXHTML(obj, encode) {
   // It is an option to pass innerXHTML() a string indicating an id attribute
   if (typeof obj == "string") {
      obj = document.getElementById(obj)
   }
   var open = '';
   var content = '';
   var close = '';
   var tagname = obj.nodeName.toLowerCase();
   var emptytag = (obj.nodeName.match(/area|base|basefont|br|col|frame|hr|img|input|
      isindex|link|meta|param/i)) ? true : false;

   // Write open tag
   open = '&lt;'+tagname;

   for (var i=0; i&lt;obj.attributes.length; i++) {
      if (obj.attributes[i].specified &amp;&amp; obj.attributes[i].value != "null") {
         open += ' '+obj.attributes[i].name.toLowerCase()+'="'
            +obj.attributes[i].value+'"';
      }
   } open += (emptytag) ? ' /&gt;' : '&gt;';

   if (!emptytag) {
      // Write tag content
      for (var i=0; i&lt;obj.childNodes.length; i++) {
         var node = obj.childNodes[i];
         if (node.nodeType==3) {
            content += node.data;
         else if (node.nodeType==1) {
            content += innerXHTML(obj.childNodes[i], false);
         else {
            content += " ";
         }
      } // Write closing tag
    close = '&lt;/'+tagname+'&gt;';
    }
    // URI encode the content if desired
    return (typeof(encode)=="undefined" || encode==true) ? encodeURIComponent(open+
      content+close) : open+content+close;
}</code></pre>
<p>Et voilà! Beautifully done.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/progressive-enhancement-flash-no-longer-a-pact-with-the-devil/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>jQuery .html() returns strange results in IE after other bindings</title>
		<link>http://www.mikepadgett.com/technology/technical/jquery-html-strange-results-ie-events/</link>
		<comments>http://www.mikepadgett.com/technology/technical/jquery-html-strange-results-ie-events/#comments</comments>
		<pubDate>Tue, 17 Feb 2009 13:40:56 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[internet explorer]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[web standards]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=746</guid>
		<description><![CDATA[Sometimes we're stuck with junk attributes in jQuery.html() for Internet Explorer.]]></description>
			<content:encoded><![CDATA[<p class="note">This article originally addressed jQuery 1.3.1. See below for results in jQuery 1.4 (18 January 2010)</p>
<div class="imgright"><img title="Internet Explorer: where it belongs?" src="http://www.mikepadgett.com/wp-content/uploads/2009/02/ie-jquery-strange.jpg" alt="Internet Explorer: where it belongs?" width="300" height="202" /></div>
<p>When I&#8217;m testing work done with jQuery in Internet Explorer, I&#8217;m normally a karmic cow. I wonder if <a title="Links to an external website" href="http://ejohn.org/">Mr Resig</a> and friends ever thought about their specific contribution to world peace.</p>
<p>Indeed with jQuery, you can almost forget about the bad old days. At least until something comes along like it did this morning, when I hit a situation using <tt>.html()</tt>.</p>
<h3>Using <tt>.html()</tt> to return elements with bound events</h3>
<p>If we use jQuery to bind events to an element and then take a look at the DOM, Internet Explorer may well return unexpected results. Here&#8217;s the code:</p>
<p><code>&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;<br />
&lt;script type="text/javascript"&gt;<br />
//&lt;![CDATA[<br />
$(document).ready(function(){<br />
$('#countries li a').click(function(){alert('clicked!');})<br />
alert($('#countries').html());<br />
});<br />
//]]&gt;<br />
&lt;/script&gt;<br />
...<br />
&lt;ol id="countries"&gt;<br />
&lt;li id="cty-1"&gt;&lt;a href="#"&gt;Algeria&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-2"&gt;&lt;a href="#"&gt;Argentina&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-3"&gt;&lt;a href="#"&gt;Australia&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-4"&gt;&lt;a href="#"&gt;Belarus&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-5"&gt;&lt;a href="#"&gt;Brazil&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-6"&gt;&lt;a href="#"&gt;Canada&lt;/a&gt;&lt;/li&gt;<br />
&lt;li id="cty-7"&gt;&lt;a href="#"&gt;Chile&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ol&gt;<br />
</code></p>
<p>Consider the result from Firefox below. Predictable isn&#8217;t it?</p>
<p class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/02/ff-jquery-html.gif" alt="Well-formed results in Firefox" width="326" height="196" /></p>
<p>Now look at Internet Explorer 7 and notice the junk that&#8217;s found its way in there:</p>
<p class="centeralign"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/02/ie-jquery-html.gif" alt="Unexpected results in Internet Explorer" width="488" height="185" /></p>
<div class="centeralign note"><img src="http://www.mikepadgett.com/wp-content/uploads/2009/02/ie-jquery-14.gif" alt="Results in jQuery 1.4" width="477" height="224" />
<p class="centeralign">Results for IE7 + jQuery 1.4</p>
</div>
<p>It&#8217;s like Sizzle just ate a bag of shell-on peanuts in your taxicab. The behaviour has been <a title="Links to an external website" href="http://v3.thewatchmakerproject.com/journal/464/odd-jquery-gotcha-ie-and-html">described briefly by Matthew Pennell</a>.</p>
<p>It&#8217;s only a problem if for some reason you need clean, well-formed XHTML.</p>
<h3>Don&#8217;t depend on <tt>.html()</tt> for well-formed XML snippets</h3>
<p>For example if &#8211; like me &#8211; you were using XHTML from the page as a dataset for use in a dynamic Flash object (via <a href="/technology/technical/progressive-enhancement-flash-no-longer-a-pact-with-the-devil/">progressive enhancement</a>) then that could be a problem: Flash balks at this stuff in IE.</p>
<h3>Moral of the story: check your code</h3>
<p>My quick fix was to change the order of business. I simply did my jQuery event binding <em>after</em> the data had been sent. A hard lesson learned, then, in view of the amount of time I spent tearing my hair out, but an important one nonetheless.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/jquery-html-strange-results-ie-events/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Belgium Usability Day</title>
		<link>http://www.mikepadgett.com/technology/technical/belgium-usability-day/</link>
		<comments>http://www.mikepadgett.com/technology/technical/belgium-usability-day/#comments</comments>
		<pubDate>Fri, 14 Nov 2008 06:36:32 +0000</pubDate>
		<dc:creator>Mike Padgett</dc:creator>
				<category><![CDATA[Technical]]></category>
		<category><![CDATA[belgium]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[web 2.0]]></category>

		<guid isPermaLink="false">http://www.mikepadgett.com/?p=616</guid>
		<description><![CDATA[I attended an event marking the Belgian contribution to World Usability Day 2008.]]></description>
			<content:encoded><![CDATA[<div class="imgright"><img src="http://www.mikepadgett.com/wp-content/uploads/2008/11/world-usability-day.gif" alt="World Usability Day" width="320" height="314" /></div>
<p>I attended a seminar last night that represented the <a title="Links to an external website" href="http://usabilityday.be/">Belgian contribution</a> to <a title="Links to an external website" href="http://www.worldusabilityday.org/">World Usability Day</a>.</p>
<p>The conference was hosted by interactive agency <a title="Links to an external website" href="http://www.emakina.com/">Emakina</a> and the theme set by the global organisers <a title="Links to an external website" href="http://www.upassoc.org">Usability Professionals Association</a> was Transportation.</p>
<p>The agenda consisted of presentations on traffic congestion, user experience in online airline booking and social networking.</p>
<h3>Usability and traffic congestion</h3>
<p>The opening <a title="Links to an external website" href="http://www.namahn.com/news-jobs/index.htm#131108">presentation from Joannes Vandermeulen</a>, concerning how usability could contribute to the resolution of traffic congestion, was both curious and interesting.</p>
<p>Vandermeulen compared the current, systemic approach to traffic management with the possibilities of adapting <a title="Links to an external website" href="http://en.wikipedia.org/wiki/Swarm_intelligence">Swarm</a> theory, wondering aloud how direct communication between car drivers might resolve jam situations.</p>
<h3>The online airline</h3>
<p>So far, so good. Next we heard about an Emakina case study in which the latter had presented client <a title="Links to an external website" href="http://www.brusselsairlines.com">Brussels Airlines</a> with what it called a &#8220;user experience mission&#8221;.</p>
<p>The idea is to method act the process of booking and taking the flight, from website to take-off, so that the user experience can be considered not as an isolated online transaction but rather in the context of a larger process in which users engage with the brand. Hence the trip to Lisbon.</p>
<p>Of course I appreciate the sincerity of the thinking here, yet it does sound nevertheless like a marvellous <a title="Links to an external website" href="http://en.wiktionary.org/wiki/jolly#Noun">jolly</a> too &#8211; pity I&#8217;ve never had an airline industry client (though some orgs would be more preferable than others: could you imagine doing a user experience mission for <a title="Links to an external website" href="http://www.lsgskychefs.com/">SkyChefs</a>?).</p>
<h3>Feeling unsociable about the social web</h3>
<p>After the break, there followed two presentations on the subject of social networking. Unlike <a title="Links to an external website" href="http://www.gwix.net">Laurent Goffin</a>, who was riffing enthusiastically about the &#8220;social web&#8221;, I&#8217;ve been unable to retain quite the same level of enthusiasm lately.</p>
<p>And here&#8217;s why. As far as social networking&#8217;s concerned, I&#8217;m right in the middle of yet another perennial cycle in which:</p>
<ul>
<li>I have embraced change;</li>
<li>I have seen opportunities;</li>
<li>I have accepted that it will have implications for my work;</li>
<li>I have begun to implement it;</li>
</ul>
<p>All good. But now, two or three years later, the cycle has predictably evolved:</p>
<ul>
<li>My clients have now heard a few acronyms and buzzwords;</li>
<li>My clients can talk of nothing else;</li>
<li>My clients call me in and tell me that I must embrace this new and exciting change, discover its opportunities, accept that it will have implications for my work and start to implement it;</li>
<li>My clients insist on a [insert the social network <em>du jour</em> that's <em>très à la mode</em>] presence</li>
</ul>
<p>Don&#8217;t misunderstand me, I <em>love</em> my clients: they do their thing, they pay my bills and they fill my day with endless amusement. But sometimes they behave like kids. This is the result of having baby boomers in senior management.</p>
<p>In a way, you could visualise this cycle in the same way as Joannes Vandermeulen described wave theory in traffic jams. <a title="Links to an external website" href="http://auto.howstuffworks.com/traffic1.htm">Think of me as the blue car</a> and it makes perfect sense.</p>
<p>Rant over, but what does <em>social networking</em> have to do with <em>transportation</em>?</p>
<h3>And finally</h3>
<p>There&#8217;s always a risk that this type of event, managed by a company, can end up being a glorified advertising campaign for the host. Whilst Emakina made reasonable efforts to avoid this situation, I did find myself wondering about what other contributors &#8211; myself included &#8211; might have offered, especially since we were told there had been numerous submissions.</p>
<p>Perhaps with a wider range of contributors there might have been more focus on the theme of transportation, in which I was particularly interested after the <a title="Links to an external website" href="http://www.upassoc.org/upa_publications/user_experience/past_issues/2008-4.html">recent issue of <acronym title="User Experience magazine: a publication of the Usability Professionals Association">UX</acronym></a>. There might also have been some discussion of media other than the Internet.</p>
<p>Fundamentally, what&#8217;s most important is that this event &#8211; the Belgian edition of the global initiative &#8211; continues to grow. This year&#8217;s audience was quite impressive and very encouraging. If I&#8217;m around next year, the <acronym title="Usability Professionals Association">UPA</acronym>&#8216;s designated theme matches my competences and I hear about it soon enough, then I&#8217;ll certainly consider making a submission!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mikepadgett.com/technology/technical/belgium-usability-day/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

