<?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>Produxion &#187; Web</title>
	<atom:link href="http://www.produxion.net/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.produxion.net</link>
	<description>The personal weblog of Phil Powell</description>
	<lastBuildDate>Wed, 01 Feb 2012 10:08:49 +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>Web economy in G20 set to double by 2016</title>
		<link>http://www.produxion.net/2012/01/31/web-economy-in-g20-set-to-double-by-2016/</link>
		<comments>http://www.produxion.net/2012/01/31/web-economy-in-g20-set-to-double-by-2016/#comments</comments>
		<pubDate>Tue, 31 Jan 2012 11:06:13 +0000</pubDate>
		<dc:creator>Phil Powell</dc:creator>
				<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Economy]]></category>
		<category><![CDATA[G20]]></category>

		<guid isPermaLink="false">http://www.produxion.net/?p=541</guid>
		<description><![CDATA[The value of the web economy in G20 countries will nearly double by 2016, according to Boston Consulting Group.]]></description>
			<content:encoded><![CDATA[<p>The value of the web economy in G20 countries will nearly double by 2016, according to Boston Consulting Group.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.produxion.net/2012/01/31/web-economy-in-g20-set-to-double-by-2016/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Publishers aren&#8217;t learning from the web</title>
		<link>http://www.produxion.net/2011/01/26/publishers-arent-learning-from-the-web/</link>
		<comments>http://www.produxion.net/2011/01/26/publishers-arent-learning-from-the-web/#comments</comments>
		<pubDate>Wed, 26 Jan 2011 12:04:22 +0000</pubDate>
		<dc:creator>Phil Powell</dc:creator>
				<category><![CDATA[Applications]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Publishing]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[apps]]></category>
		<category><![CDATA[publishing]]></category>
		<category><![CDATA[tablets]]></category>

		<guid isPermaLink="false">http://www.produxion.net/?p=503</guid>
		<description><![CDATA[Oliver Bothwell ponders the current state of publication apps on tablets, concluding that publishers just aren&#8217;t learning lessons from the web: And now it is quite easy to see why the media apps are failing. They are all difficult to navigate requiring too many swipes, flicks and scrolls to find things. Eureka has a lovely [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.oliverbothwell.co.uk/blog/2011/01/08/is-this-the-end-for-the-media-industry/">Oliver Bothwell ponders the current state of publication apps</a> on tablets, concluding that publishers just aren&#8217;t learning lessons from the web:</p>
<blockquote><p>And now it is quite easy to see why the media apps are failing. They are all difficult to navigate requiring too many swipes, flicks and scrolls to find things. Eureka has a lovely opening navigation and the magazines have contents pages but where are the search bars? Have they learnt nothing from the web? Where are the related articles, tags and comments. They are not taking advantage of the fundamental tools available to them. Instead they are creating gimmicky apps without any real substance. Media companies are changing but without realising what is their best asset, their quality journalism and ability to edit, which they sacrifice to fads and pointless interactive content. Newspaper and magazine sales are down because the internet allows easy consumption and access to lots of information; the only way to start making money is by championing this in their apps and combining with excellent user-interface and editorial design. At the moment there isn’t an app which is better to use than the newspaper or website equivalent and this should be worrying to an ailing industry. The approach is entirely wrong; it is not the content that is the problem, it’s the way it’s being presented.</p></blockquote>
<p>I&#8217;ve, personally, yet to find a media app which feels &#8220;right&#8221; — even the very popular and innovative Flipboard doesn&#8217;t fit the bill, for the may of the reasons that Oliver flags up: too many swipes, no way to effectively filter and search.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.produxion.net/2011/01/26/publishers-arent-learning-from-the-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>So long, Facebook</title>
		<link>http://www.produxion.net/2011/01/21/so-long-facebook/</link>
		<comments>http://www.produxion.net/2011/01/21/so-long-facebook/#comments</comments>
		<pubDate>Fri, 21 Jan 2011 10:08:06 +0000</pubDate>
		<dc:creator>Phil Powell</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[facebook]]></category>

		<guid isPermaLink="false">http://www.produxion.net/?p=495</guid>
		<description><![CDATA[For a little while now I&#8217;ve been thinking about leaving Facebook. It&#8217;s been fun and everything, but when I start to take an objective look at the contents of my &#8220;News&#8221; feed I started to notice some really unpleasant trends in the kinds of conversations which were going on there. There were a lot of [...]]]></description>
			<content:encoded><![CDATA[<p>For a little while now I&#8217;ve been thinking about leaving Facebook. It&#8217;s been fun and everything, but when I start to take an objective look at the contents of my &#8220;News&#8221; feed I started to notice some really unpleasant trends in the kinds of conversations which were going on there. There were a lot of things I didn&#8217;t really want to be reading; a lot of diatribes which made me wonder &#8220;do you not all realise that your comments are going public, for everyone to see?&#8221; It has really started to unnerve me that the &#8220;social&#8221; element of this &#8220;social network&#8221; was becoming a warts-and-all, competitive hive of everybody&#8217;s subconscious — and, quite frankly, I don&#8217;t know if I want to be exposed to that.</p>
<p>But, of course, like most people who threaten to leave and become clean: I realised I was addicted.</p>
<p>And of course, I&#8217;ve been clinging on by rationalising my Facebook addiction by using that age-old excuse: it&#8217;s an easy way to keep in touch with people. Bu really? A lot of the people I&#8217;m &#8220;friends&#8221; with on Facebook I haven&#8217;t spoken to in years — nor do I really want to speak to them. That&#8217;s not a judgement on them, it&#8217;s just that people move on; friends come and go; some keep in touch, others float away. Why do we feel the need to cling on to <em>everybody</em>, all of the time? I don&#8217;t need Facebook to keep me in touch with the people I care about: I have telephone numbers, email, skype, postal addresses for all of those people anyway.</p>
<p>What really swung me though, what really snapped me into cold realisation was reading <a href="http://www.nybooks.com/articles/archives/2010/nov/25/generation-why/?pagination=false">this essay by Zadie Smith</a>. It&#8217;s a fascinating, lengthy read. There&#8217;s some really insightful, philosophical thinking contained in there, but this particular passage really got me thinking:</p>
<blockquote><p>When a human being becomes a set of data on a website like Facebook, he or she is reduced. Everything shrinks. Individual character. Friendships. Language. Sensibility. In a way it’s a transcendent experience: we lose our bodies, our messy feelings, our desires, our fears. It reminds me that those of us who turn in disgust from what we consider an overinflated liberal-bourgeois sense of self should be careful what we wish for: our denuded networked selves don’t look more free, they just look more owned.</p>
<p>With Facebook, Zuckerberg seems to be trying to create something like a Noosphere, an Internet with one mind, a uniform environment in which it genuinely doesn’t matter who you are, as long as you make “choices” (which means, finally, purchases). If the aim is to be liked by more and more people, whatever is unusual about a person gets flattened out. One nation under a format. To ourselves, we are special people, documented in wonderful photos, and it also happens that we sometimes buy things. This latter fact is an incidental matter, to us. However, the advertising money that will rain down on Facebook—if and when Zuckerberg succeeds in encouraging 500 million people to take their Facebook identities onto the Internet at large—this money thinks of us the other way around. To the advertisers, we are our capacity to buy, attached to a few personal, irrelevant photos.</p></blockquote>
<p>I&#8217;ve realised that when it comes down to it, it&#8217;s not the content of my Facebook feed which I have a gripe with — after all: I choose who my friends are, and I choose to read or not read what&#8217;s going on in my social network. No, it&#8217;s the idea of my virtual personality being diluted down to a prescribed format; having my online activities influenced by omnipotent software; essentially, having my online self <em>owned</em>. Facebook has been created as a vision of an idealistic future dictated by one man: Mark Zuckerberg. I find that really quite scary, because history teaches us that one-man dictatorships can have a huge influence over societies, and the authority they wield can make people do horrible things.</p>
<p>So, I&#8217;m going to be exporting my data, updating my address book and then I&#8217;ll be leaving the hive mind. Don&#8217;t worry, I&#8217;ll still be able to keep tabs on you all if I like; I can always take one more hit by just running a search for you in Google. It&#8217;s likely that Facebook&#8217;s default privacy settings are broadcasting your every activity to the wider world, right now.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.produxion.net/2011/01/21/so-long-facebook/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>HTML is the new HTML5</title>
		<link>http://www.produxion.net/2011/01/20/html-is-the-new-html5/</link>
		<comments>http://www.produxion.net/2011/01/20/html-is-the-new-html5/#comments</comments>
		<pubDate>Thu, 20 Jan 2011 17:42:53 +0000</pubDate>
		<dc:creator>Phil Powell</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[WHATWG]]></category>

		<guid isPermaLink="false">http://www.produxion.net/?p=491</guid>
		<description><![CDATA[The W3C have released a new logo for HTML5 in a fanfare of hyperbole: It stands strong and true, resilient and universal as the markup you write. It shines as bright and as bold as the forward-thinking, dedicated web developers you are. It&#8217;s the standard&#8217;s standard, a pennant for progress. And it certainly doesn&#8217;t use [...]]]></description>
			<content:encoded><![CDATA[<p>The W3C have <a href="http://www.w3.org/html/logo/">released a new logo</a> for HTML5 in a fanfare of hyperbole:</p>
<blockquote><p>It stands strong and true, resilient and universal as the markup you write. It shines as bright and as bold as the forward-thinking, dedicated web developers you are. It&#8217;s the standard&#8217;s standard, a pennant for progress. And it certainly doesn&#8217;t use tables for layout.</p></blockquote>
<p>Seems like an admirable initiative on the surface of it, but you only have to pass a <a href="http://www.w3.org/html/logo/faq.html">cursory glance over the FAQ</a> to see why this logo has got so many people wound up:</p>
<blockquote><p>The logo is a general-purpose visual identity for a broad set of open web technologies, including HTML5, CSS, SVG, WOFF, and others.</p></blockquote>
<p>The problem is that HTML5 shouldn&#8217;t be used as an umbrella term for a group of associated technologies. HTML5 is a markup language, and using the term to describe a group of other technologies is just wrong. <a href="http://adactio.com/journal/4289/">Jeremy Keith summarises</a> the gripes with this misappropriation:</p>
<blockquote><p>What we have here is a deliberate attempt to further blur the lines between separate technologies that have already become intertwingled in media reports.</p>
<p>Don’t get me wrong; I don’t mind if marketers and journalists use HTML5 to mean everything under the sun, but I expect working web developers to be able to keep specs separate in their mind. If Apple or Google were pushing this kind of fuzziness, I wouldn’t mind …but this is coming straight from the horse’s mouth (or, in this case, straight from the horse’s ass).</p></blockquote>
<p>This logo branding nonsense is a real clanger by the W3C. Rather of quietly than facilitating the wider adoption and standardisation of web technologies, instead they&#8217;re trying to evangelise and influence the web ecosystem at the expense of muddying already murky waters.</p>
<p>The W3C strayed way off the path of web innovation when it set about specifying XHTML, and it took the strong-arming of WHATWG to get HTML5 back on the agenda at W3C. WHATWG has always been more responsive to what browser vendors and web developers are demanding by &#8220;paving the cowpaths&#8221;. Looks like this little branding exercise might just have been the catalyst for another shift in their approach.</p>
<p>While the W3C are making pretty pictures, <a href="http://blog.whatwg.org/html-is-the-new-html5">WHATWG have announced</a>:</p>
<ol>
<blockquote>
<li><a href="http://whatwg.org/html">The HTML specification</a> will henceforth just be known as &#8220;HTML&#8221;, with the URL <code>http://whatwg.org/html</code>. (We will also continue to maintain the <a href="http://whatwg.org/C">Web Applications 1.0</a> specification that contains HTML and a number of related APIs like Web Storage, Web Workers, and Server-Sent Events.)</li>
<li>The WHATWG HTML spec can now be considered a &#8220;living standard&#8221;. It&#8217;s more mature than any version of the HTML specification to date, so it made no sense for us to keep referring to it as merely a draft. We will no longer be following the &#8220;snapshot&#8221; model of spec development, with the occasional &#8220;call for comments&#8221;, &#8220;call for implementations&#8221;, and so forth.</li>
</blockquote>
</ol>
<p>What this means is that the version numbering of HTML will be dropped: HTML5 will now just be referred to as HTML. It also means that as of now, WHATWG are considering their specification to be a standard — it will change, mature and evolve over time, but what they&#8217;re essentially is: the new version of HTML is production-ready.</p>
<p>This is a significant shift and it makes a lot of sense: most switched-on web developers have been using the new standard for quite some time.</p>
<p><strong>UPDATE: </strong>Appears that the W3C have listened to the cacophony of noise surrounding their definition of what the HTML5 logo represents, and they&#8217;ve changed the FAQ to define it as:</p>
<blockquote><p>This logo represents HTML5, the cornerstone for modern Web applications.</p></blockquote>
<p>This is a good thing. But has the damage already been done? Has the W3C already tarred their reputation by showing themselves to be out of touch with opinion in the web development world (which can be vociferous at best)?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.produxion.net/2011/01/20/html-is-the-new-html5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A hint at Facebook&#8217;s plans for tablets</title>
		<link>http://www.produxion.net/2010/11/03/a-hint-at-facebooks-plans-for-tablets/</link>
		<comments>http://www.produxion.net/2010/11/03/a-hint-at-facebooks-plans-for-tablets/#comments</comments>
		<pubDate>Wed, 03 Nov 2010 22:20:26 +0000</pubDate>
		<dc:creator>Phil Powell</dc:creator>
				<category><![CDATA[Applications]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[mobile]]></category>

		<guid isPermaLink="false">http://www.produxion.net/?p=424</guid>
		<description><![CDATA[Ben Parr summarises his opportunity to quiz Facebook CEO Mark Zuckerberg and Mobile VP Erik Tseng on Facebook&#8217;s plans for the iPad: After a bit more back-and-forth between Zuckerberg and me, Tseng stepped in to explain that Facebook is still trying to figure out its approach and strategy for tablet devices. Because tablets are a [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://mashable.com/2010/11/03/mark-zuckerberg-the-ipad-isnt-mobile/">Ben Parr summarises</a> his opportunity to quiz Facebook CEO Mark Zuckerberg and Mobile VP Erik Tseng on Facebook&#8217;s plans for the iPad:</p>
<blockquote><p>After a bit more back-and-forth between Zuckerberg and me, Tseng stepped in to explain that Facebook is still trying to figure out its approach and strategy for tablet devices. Because tablets are a new form factor, it requires a new approach.</p>
<p>The real hint to Facebook’s iPad plans, though, is that Tseng focused on the form factor and not iOS. This could mean that Facebook’s looking to build an HTML5 version of its website optimized for tablets. At the very least, Facebook seems intent on keeping a consistent experience across all tablet devices.</p></blockquote>
<p>What&#8217;s most telling though, is Zuckerberg&#8217;s response when asked about the iPad at a mobile press event:</p>
<blockquote><p>iPad&#8217;s not mobile. Next question.</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.produxion.net/2010/11/03/a-hint-at-facebooks-plans-for-tablets/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adobe shows off Flash-to-HTML5 conversion tool</title>
		<link>http://www.produxion.net/2010/11/01/adobe-shows-off-flash-to-html5-conversion-tool/</link>
		<comments>http://www.produxion.net/2010/11/01/adobe-shows-off-flash-to-html5-conversion-tool/#comments</comments>
		<pubDate>Mon, 01 Nov 2010 22:06:48 +0000</pubDate>
		<dc:creator>Phil Powell</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[demo]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[video]]></category>

		<guid isPermaLink="false">http://www.produxion.net/?p=408</guid>
		<description><![CDATA[Ars Technica report about the recent demo of an Adobe tool for converting Flash to HTML5: Even though its Flash technology is used as a punching bag by Web standards fans, Adobe has been building tools that embrace HTML5. The company recently released its own HTML5 video player, and Adobe Illustrator and Dreamweaver CS5 now contain a number of [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://arstechnica.com/web/news/2010/10/adobe-shows-off-flash-to-html5-conversion-tool.ars">Ars Technica report about the recent demo</a> of an Adobe tool for converting Flash to HTML5:</p>
<blockquote><p>Even though its Flash technology is used as a punching bag by Web standards fans, Adobe has been building tools that embrace HTML5. The company recently released its own HTML5 video player, and Adobe Illustrator and Dreamweaver CS5 now contain a number of new HTML5 export tools.</p>
<p>Now it seems Flash might be joining the party. At Adobe’s MAX conference this week, Adobe engineer Rik Cabanier showed of a demo of tool that converts Flash animations to HTML5 (well, technically it looks like a combination of HTML5, CSS and images).</p></blockquote>
<p>Yes, it&#8217;s great that Adobe are slowly shifting towards the HTML5 camp, but they&#8217;re really late to the party. The demo of this tool, although technically quite clever, really is a horrible semantic butchery job. And again, this is Adobe pitching HTML5 as an umbrella term for a mish-mash of modern technologies &#8211; even John Nack, <a href="http://blogs.adobe.com/jnack/2010/10/adobe-demos-flash-to-html5-conversion-tool.html">the Adobe employee who originally posted the video</a> of this demo, is flagrantly open about this mis-appropriation:</p>
<blockquote><p>Someone will probably start quibbling with the use of “HTML5″ as a stand-in for SVG, CSS3, Canvas, etc. I know, I know. I use the umbrella term in the loose, commonly understood sense: “Flash stuff without Flash.</p></blockquote>
<p>Sigh. Is that really how they think about next-generation standards at Adobe? &#8220;Flash stuff without Flash&#8221;?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.produxion.net/2010/11/01/adobe-shows-off-flash-to-html5-conversion-tool/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>North: website design process</title>
		<link>http://www.produxion.net/2009/10/20/north-website-design-process/</link>
		<comments>http://www.produxion.net/2009/10/20/north-website-design-process/#comments</comments>
		<pubDate>Tue, 20 Oct 2009 19:40:01 +0000</pubDate>
		<dc:creator>Phil Powell</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[video]]></category>
		<category><![CDATA[Workflow]]></category>

		<guid isPermaLink="false">http://www.produxion.net/?p=123</guid>
		<description><![CDATA[I made this a while ago, but due to my slackness in updating the old blog for quite some time, it&#8217;s never made it on here. As part of the North project we&#8217;re developing in partnership with folly I needed to produce a new web presence. It was quite a quick job, as time and [...]]]></description>
			<content:encoded><![CDATA[<p>I made this a while ago, but due to my slackness in updating the old blog for quite some time, it&#8217;s never made it on here.</p>
<p>As part of the <a href="http://www.meetnorth.com">North</a> project we&#8217;re developing in partnership with <a href="http://www.folly.co.uk">folly</a> I needed to produce a new web presence. It was quite a quick job, as time and resource were at a premium, but I thought it would be fun to do a screen capture of the design process. I&#8217;ve condensed the entire process, which was about 5 hours spread over 3 days, into just under three minutes.</p>
<p>You can watch it below, or <a href="http://vimeo.com/5580891">head over to Vimeo to see it in glorious HD</a>.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="281" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=5580891&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="500" height="281" src="http://vimeo.com/moogaloop.swf?clip_id=5580891&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>This was a really quick job, implementing a design which is flexible and which can be developed over time. The foundation is a fairly rigid grid system with a strong emphasis on typographic style. I went through three different iterations before arriving at the final blue/green version. Most of the work was done in Photoshop, with some of the graphical elements sketched in Illustrator.</p>
<p>I really liked the second iteration, with the paper plane sketches, but it just wasn&#8217;t cutting it with the rest of the team. I&#8217;ll shelve that idea for a future project though, as I really like the aesthetic.</p>
<p>I hope this is an interesting little insight into the way I develop concepts when working on a new design. Feel free to let me know what you think, and whether you found it useful/interesting.</p>
<p>If you want to see the finished design in all it&#8217;s HTML markup glory, or just want to know more about North, then <a href="http://www.meetnorth.com">head over to the website</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.produxion.net/2009/10/20/north-website-design-process/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Announcement &#8211; Gridlet V0.1</title>
		<link>http://www.produxion.net/2009/01/15/announcement-gridlet-v01/</link>
		<comments>http://www.produxion.net/2009/01/15/announcement-gridlet-v01/#comments</comments>
		<pubDate>Thu, 15 Jan 2009 09:27:47 +0000</pubDate>
		<dc:creator>Phil Powell</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.produxion.net/?p=36</guid>
		<description><![CDATA[I've been using grids in my CSS designs for quite a while now, inspired by frameworks like <a href="http://www.blueprintcss.org/">Blueprint CSS</a>.  Although I don't use Blueprint for production work (using a CSS framework starts to get a bit restrictive, and I prefer to build from scratch, rather than trying to override someone else's default), I do use the methodology in my own CSS to create structured, grid-based layouts, and consistent typography.

One of the clever things that Blueprint introduced was the idea of displaying the grid while you're working - this proves to be an invaluable aid as you try to refine CSS rules.  But I've found that - as good as the theory is - it has a few drawbacks.]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been using grids in my CSS designs for quite a while now, inspired by frameworks like <a href="http://www.blueprintcss.org/">Blueprint CSS</a>.  Although I don&#8217;t use Blueprint for production work (using a CSS framework starts to get a bit restrictive, and I prefer to build from scratch, rather than trying to override someone else&#8217;s default), I do use the methodology in my own CSS to create structured, grid-based layouts, and consistent typography.</p>
<p>One of the clever things that Blueprint introduced was the idea of displaying the grid while you&#8217;re working &#8211; this proves to be an invaluable aid as you try to refine CSS rules.  But I&#8217;ve found that &#8211; as good as the theory is &#8211; it has a few drawbacks:</p>
<ol>
<li>Because it uses a background-image CSS property, it overrides any beautiful background design you might have implemented.</li>
<li>Because it uses images, if you change your grid size, you have to generate a new custom image &#8211; a bit of a faff.</li>
<li>You have to tweak your CSS every time you want to turn the grid on or off.</li>
</ol>
<p>Since I work with grids more and more often, I decided to have a stab at coming up with a solution which refines the Blueprint idea, adds a dash of <a href="http://www.jquery.com">jQuery</a> to produce something which is a little more flexible and user-friendly.</p>
<p>What I&#8217;ve come up with is a jQuery plugin called Gridlet.  Instead of using pure CSS, the plugin generates a grid on-the-fly, and it&#8217;s an improvement in the following ways:</p>
<ol>
<li>It doesn&#8217;t use images &#8211; instead it dynamically generates a grid on top of your page, so your design remains intact.</li>
<li>Changing your grid size is as simple as changing a setting &#8211; no need to generate images.</li>
<li>You, er, have to tweak your JS to turn it on or off (this is something I&#8217;m going to work on improving &#8211; it&#8217;s early days).</li>
</ol>
<p>It&#8217;s also worth noting that this first version only produces horizontal grids &#8211; that&#8217;s all I need at the moment  No doubt I&#8217;lla dd vertical grid spacing as and when it&#8217;s needed.  Any comments or suggestions are appreciated.</p>
<p><a href="http://www.produxion.net/wp-content/uploads/2009/01/jquerygridlet-01.js">You can download version 0.1 of Gridlet here</a>.  I&#8217;ve only tested in Safari 3 and Firefox 3 so far.</p>
<p>Implementing it is really easy &#8211; you just do something like this:</p>
<pre>$(document).ready(function() {
  $("body").gridlet();
});</pre>
<p>If you want to override the default grid height or colour, just pass in the settings like this:</p>
<pre>$(document).ready(function() {
  $("body").gridlet({
    height: 18,
    background: "#fcc"
  });
});</pre>
<p>And finally, for your curiosity, here&#8217;s the source code:</p>
<pre>(function($) {
  jQuery.fn.gridlet = function(options) {

    var opts = $.extend({}, $.fn.gridlet.defaults, options);
    var line_position = 0;
    $("&lt;div/&gt;").attr("id", "grid_container").appendTo("body").css({
      position: "absolute",
      top: 0,
      left: 0,
      height: "100px",
      width: "100%",
    })

    while(line_position &lt; $("body").height())
    {
      line_position += opts.height;
      $("&lt;div/&gt;").css({
        position: "absolute",
        top: line_position,
        left: 0,
        height: 1,
        width: "100%",
        background: opts.background
      }).appendTo("div#grid_container")
    }

    return this;

  };

  jQuery.fn.gridlet.defaults = {
    height: 24,
    width: 24,
    background: "#ddf"
  };

})(jQuery);</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.produxion.net/2009/01/15/announcement-gridlet-v01/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cadence</title>
		<link>http://www.produxion.net/2008/12/23/29/</link>
		<comments>http://www.produxion.net/2008/12/23/29/#comments</comments>
		<pubDate>Tue, 23 Dec 2008 11:18:31 +0000</pubDate>
		<dc:creator>Phil Powell</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Language]]></category>

		<guid isPermaLink="false">http://www.produxion.net/?p=29</guid>
		<description><![CDATA[<a href="http://www.randsinrepose.com/">Rands</a> has written a <a href="http://www.randsinrepose.com/archives/2008/12/21/a_signature_cadence.html">really interesting post all about cadence</a>, and more specifically how the tone of language used on the Web has a direct impact on our trust.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.randsinrepose.com/">Rands</a> has written a <a href="http://www.randsinrepose.com/archives/2008/12/21/a_signature_cadence.html">really interesting post all about cadence</a>, and more specifically how the tone of language used on the Web has a direct impact on our trust.</p>
<blockquote><p>What does a lie sound like? How do we decide to trust? There’s a reason why you can figure out in an instant whether a mail is spam or not. It’s not a single, measurable thing, but a whole set of small, invisible variables with which you can instantly make a judgment — I do not trust this mail.</p>
<p>You have a complex set of analytical mental muscles that help you make critical snap emotional judgments. Whether it’s a mail, a website, or a person, your brain can instantly look at 12 imperceptible aspects of a thing to determine how you should feel.</p>
<p>Truth, love, or lies, human has a signature cadence.</p></blockquote>
<p>I always place a lot of emphasis on spending time developing the language of a website &#8211; the words used aren&#8217;t incidental: the language and tone should be an integral part of the design.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.produxion.net/2008/12/23/29/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

