<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:admin="http://webns.net/mvcb/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">

    <channel>
    
    <title>For a Beautiful Web&apos;s Blog</title>
    <link>http://forabeautifulweb.com/blog/</link>
    <description></description>
    <dc:language>en</dc:language>
    <dc:creator>malarkey@malarkey.co.uk</dc:creator>
    <dc:rights>Copyright 2009</dc:rights>
    <dc:date>2009-01-05T17:16:13+00:00</dc:date>
    <admin:generatorAgent rdf:resource="http://expressionengine.com/" />
    

<item>
<title>Effective browser support</title>
<link>http://forabeautifulweb.com/blog/about/effective_browser_support/</link>
<guid>http://forabeautifulweb.com/blog/about/effective_browser_support/#When:16:16:13Z</guid>
<description><![CDATA[Paul Boag on how progressive enrichment <q>improves accessibility, reduces costs and ensures every user gets the best experience possible within the limitation of their choice of browser.</q>]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2009-01-05T16:16:13+00:00</dc:date>
</item>

<item>
<title>A client&#45;focussed copy style guide</title>
<link>http://forabeautifulweb.com/blog/about/a_client_focussed_copy_style_guide/</link>
<guid>http://forabeautifulweb.com/blog/about/a_client_focussed_copy_style_guide/#When:22:12:20Z</guid>
<description><![CDATA[Let's be fair, few customers are professional writers and few hire one when making a web site. That is why I now include professional copywriting into every estimate as a non-removable item. When customers are adding their own copy to a site, I give them ten simple tips to follow.<blockquote>
<p>Avoid using abbreviated ‘and’ (‘&amp;’) (an ampersand as it is properly known), as if you do your pages will not validate. Although breaking validation will not make the world fall apart, being valid is a mark of a professional web site. So you should strive for it as hard as possible. Ampersands are more acceptable in headings. If you really, really must use an ampersand, you must write it as <code>&amp;amp;</code>.</p>

<p>Do not type words in all uppercase letters. Just don’t. All uppercase words are bad for accessibility (a screen-reader reads each letter separately, not as a word) and are harder to read. They look, well, just plain unprofessional too.</p>

<p>Do not use exclamation marks (!) except, if absolutely necessary, in headings or for branding purposes. Exclamation points cheapen your content rather than enhance it and you should make your point effective by what you write. You should not need to use an exclamation point.</p>

<p>Choose your capitalization case carefully and stick to it. This is particularly important in headings. So choose to use sentence-case or title-case and then stick to your decision. I find that sentence-case is easier to read and easier on the eye. It is also less formal and friendlier in tone.</p>

<p>Avoid using numerals in your sentences as they make text harder and slower to read on screen. Instead of writing <q>Our course lasts for 3 days…</q> use the word ‘three’ instead. Reserve numerals for dates and prices and other numeric <em>data</em>.</p>

<p>Avoid referring to yourself in the third-person. So don’t say things like <q>[Stuff and Nonsense] are leaders in…</q>. Instead refer to yourself and your company as ‘we’. <q>We provide…</q>, <q>we love…</q> etc. This makes you sound more personal and approachable.</p>

<p>Avoid referring to your customers as <q>our customers</q>, instead refer to <q>you</q>. For example instead of writing <q>[Stuff and Nonsense] provide their customers with the best experience…</q>, say instead <q>We provide you with the best experience…</q> or possibly <q>At [Stuff and Nonsense] we provide you with the best experience…</q>.</p>

<p>While SEO is important to get visitors to your site through search-engines, it is also important to give them the best reading experience when they arrive. Keep your copy short and focussed. Keep repetition to a minimum, particularly of your company name. Above all, keep your copy short, content-rich and free from hard-sell or marketing speak.</p>

<p>Avoid confusing the issue. Try not to put too much or too varied information on a single page. If you do have a large amount of copy, break up that content into easily scannable sections through the use of headings and lists.</p>

<p>Keep your use of links focussed on the important calls to action. For example, if your page contains ten links and only one goes to the booking page, the visual importance of that booking link will be reduced. Try to avoid diluting your calls to action.</p>
</blockquote><p>I would love to expand and clarify these tips and publish it as a simple, one-page tip sheet someday soon so that web designers and developers can point customers to as a reference.</p>]]></description>
<dc:subject>Design</dc:subject>
<dc:date>2008-12-30T22:12:20+00:00</dc:date>
</item>

<item>
<title>Has Barack Obama exhausted Gotham?</title>
<link>http://forabeautifulweb.com/blog/about/has_barack_obama_exhausted_gotham/</link>
<guid>http://forabeautifulweb.com/blog/about/has_barack_obama_exhausted_gotham/#When:22:15:59Z</guid>
<description><![CDATA[The United States' soon to President Barack Obama's choice of Tobias Frere-Jones' <a href="http://www.typography.com/fonts/font_overview.php?productLineID=100008">Gotham</a> typeface has been <a href="http://www.helveticafilm.com/newblog/2008/02/19/a-font-we-can-believe-in/" title="Helvetica Film">well</a> <a href="http://campaignstops.blogs.nytimes.com/tag/gotham-typeface/" title="New York Times">documented</a>.<p>According to <a href="http://www.typography.com/home/index.php">Hoefler &amp; Frere-Jones</a>, Gotham is <q>a font with many voices</q>.</p>

<blockquote cite="http://www.typography.com/fonts/font_overview.php?productLineID=100008">
<p>Friendly without being folksy, confident without being aloof, Gotham's many moods run from hip to nostalgic to brash to eloquent.</p>
</blockquote>

<p>Gotham was originally commissioned by GQ Magazine who <q>had a dual agenda of wanting something that would look very fresh, yet very established, to have a credible voice to it. It also needed to look very masculine and of-the-moment.</q> (<a href="http://www.helveticafilm.com/newblog/2008/02/19/a-font-we-can-believe-in/">source</a>). It isn't hard to see how Gotham met Barack Obama's similar criteria.</p>

<p>Although Gotham's letterform designs were inspired by architectural signage, particularly around New York City, Barack Obama's use of it to create his own iconography has changed the very meaning of its design to me.</p>

<p>Now it seems that no matter what type I set in Gotham, everything reads <q>Change we can believe in</q>. Instead of being a font with many voices, everything that I type in Gotham has Barack Obama's voice. </p>

<p>I suppose that if we are to pin any typeface on what we hope a leader will achieve, Barack Obama is the worthiest of candidates. Somehow I still wish this hadn't happened. Somehow I still selfishly wish that he had not taken Gotham for himself and had exhausted another typeface instead.</p>

<p><img src="/siteimages/blog/2009-01-01.png" alt="Change we can believe in (Comic Sans)" /></p>]]></description>
<dc:subject>Design</dc:subject>
<dc:date>2008-12-27T22:15:59+00:00</dc:date>
</item>

<item>
<title>CSS SuperScrub</title>
<link>http://forabeautifulweb.com/blog/about/css_superscrub/</link>
<guid>http://forabeautifulweb.com/blog/about/css_superscrub/#When:21:13:24Z</guid>
<description><![CDATA[Reduces the size and complexity of your CSS by <q>programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names</q>.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-24T21:13:24+00:00</dc:date>
</item>

<item>
<title>Ten</title>
<link>http://forabeautifulweb.com/blog/about/ten/</link>
<guid>http://forabeautifulweb.com/blog/about/ten/#When:23:58:56Z</guid>
<description><![CDATA[Stuff and Nonsense is ten years old today.<p>It's actually a little hard to believe. In August 1998, my wife and I quit our jobs in the South, sold our house the same day and took our son, Alex, out of school. Within a month we swapped our hectic lifestyles in the South of England for the unknown in a rural part of North Wales. I know that sounds like a hasty decision. We had our reasons and ten years on and with plenty of experience under our belts I know that it was the best decision we ever made.</p>

<p>At the time we were living what many people would think was a good life. I was working for a small advertising agency in Kent, developing their digital pre-press and emerging internet business. I was well paid and we owned a nice house that we had paid very little for. We had renovated it and it was worth more than we had paid for it. But that came at a cost.</p> 

<p>I worked long days and commuted between two and three hours each way every day. Every morning I left home before it was light, before Alex was awake and every evening I arrived home after dark when Alex was already asleep. At weekends it was my turn to do the sleeping and I spent so little time with my family that one day Alex mistakenly followed the wrong man in the supermarket. He saw me so rarely, he didn't know what I really looked like. </p>

<p>When Alex contracted near-fatal pneumonia he spent several months in hospital. While my wife spent every day nursing him and every night sleeping on the floor under his hospital bed, I mostly worked. Alex's condition had been mis-diagnosed, his pneumonia compounded by a collapsed lung. As his illness worsened, unresponsive to treatment, the little boy we love so much was fading away. When finally, the doctors at our local hospital decided that they could do nothing more for him, they transferred him by ambulance to another hospital over a hundred miles to the north. While my wife travelled with him, I was a hundred miles south, at work.</p>

<p>After chest surgery and several more months in hospital, Alex made a full recovery and if you've met him, or have seen my photos, you probably wouldn't guess that this strapping sixteen year old had been so very poorly. His illness and my distance taught me a valuable lesson. When the opportunity to move away and start a different life appeared, the decision wasn't difficult.</p>

<p>We moved to semi-derilict cottage in Wales, with no heating, no school for Alex and no job for me. I had imagined that I would find work at an agency locally and visited a few for preliminary discussions. At my old job we had been dabbling with the web and when several business owning friends of friends asked if I could make web sites for them, I said <q>Yes, sure!</q> I am very, very lucky, because ten years later people have not stopped asking me the same question.</p>

<p>When I was working for the agency in Kent, I worked with a client manager who was infamous for the vagueness of his briefs to the studio. He would say <q>They want a bit of this, a bit of that. All that malarkey — Clarkey</q> and the name Malarkey stuck, even though until that point I had never had a nickname. I registered <a href="http://www.malarkey.co.uk">malarkey.co.uk</a> before I knew what to use it for and when it became clear that this internet business might take off, I needed a name for our new company. Looking in the dictionary for a definition of <em>malarkey</em> I found <em>stuff and nonsense</em>. We registered as a company today, ten years ago, on the 23rd December 1998.</p>

<p>Despite a short, miserable gap, we have always worked from the studio at our cottage. Working at home isn't for everyone and sometimes it does feel like we live at work, rather than work from home. But I wouldn't have it any other way. Stuff and Nonsense has given me the opportunity that I wanted, to stop commuting, work for myself and spend more time at home.</p>

<p>In the last ten years I have learned a lot of valuable lessons, not only about business and about the web and my work, but also about myself. Like most people, I imagine, at the age of forty-three I've done some things right, but I've also made mistakes along the way. Successes and setbacks combined, Stuff and Nonsense has taught me that working for yourself is the most satisfying thing that I could have ever done. It has taught me to be reliant on my own abilities and never to put my destiny in other people's hands. Stuff and Nonsense has taught me that it is not only possible to work at a job that I love but that job can take me around the world to places I would never have imagined visiting to meet people that I could never have met. I know that I have been very lucky.</p> 

<p>Lucky to have met, worked for and with some amazing people through Stuff and Nonsense. I have been lucky to have a family and friends that have supported me, even when things took turns for the worst or I didn't much deserve their support. I have been lucky to find myself in Stuff and Nonsense, but also for the way that it has helped me to find what matters most of all.</p>

<p>Happy birthday.</p>]]></description>
<dc:subject>News</dc:subject>
<dc:date>2008-12-22T23:58:56+00:00</dc:date>
</item>

<item>
<title>(How to be a) Contract Killer</title>
<link>http://forabeautifulweb.com/blog/about/how_to_be_a_contract_killer/</link>
<guid>http://forabeautifulweb.com/blog/about/how_to_be_a_contract_killer/#When:23:00:05Z</guid>
<description><![CDATA[<a href="http://www.24ways.org">24ways</a> goes from strength to strength each year and I was so pleased when <a href="http://twitter.com/drewm">Drew McLellan</a> asked me back to contribute again.<p>The site has seen some of the best writing and discussions this year. Some personal favourites include Jason Santa Maria&#8217;s <a href="http://24ways.org/2008/making-modular-layout-systems">Making Modular Layout Systems</a>, Richard Rutter&#8217;s <a href="http://24ways.org/2008/easier-page-states-for-wireframes">Easier Page States for Wireframes</a> and Mark Boulton&#8217;s <a href="http://24ways.org/2008/art-directing-with-looking-room">Art Directing With Looking Room</a>.</p>

<p>My latest article, (How to be a) <a href="http://24ways.org/2008/contract-killer">Contract Killer</a> is published today. It deals with the importance of contracts and how you can use them as as an opportunity to be creative, back-up your brand values and reinforce your way of doing business. Contract Killer is based on my experiences at <a href="http://stuffandnonsense.co.uk">Stuff and Nonsense</a> (ten years old today, by-the-way) and the contract that I wrote after getting frustrated with the ones that I was being asked to sign.</p>

<blockquote>
<br />
<p><q>You owe it to yourself to stay on top. You owe it to yourself to ensure that no matter how bad things get, you’ll come away clean. You owe it yourself and your business not to be the guy lying bleeding in an alley with a slug in your gut.</q></p>
<br />
</blockquote>
<p>
<p>Comments are off here but open at <a href="http://24ways.org/2008/contract-killer">24ways</a>.
</p>]]></description>
<dc:subject>News</dc:subject>
<dc:date>2008-12-22T23:00:05+00:00</dc:date>
</item>

<item>
<title>The 11 Coolest Mugs for a Hot Cup o’ Joe</title>
<link>http://forabeautifulweb.com/blog/about/the_11_coolest_mugs_for_a_hot_cup_o_joe/</link>
<guid>http://forabeautifulweb.com/blog/about/the_11_coolest_mugs_for_a_hot_cup_o_joe/#When:10:20:08Z</guid>
<description><![CDATA[Collection of fab mug designs. I picked up the Alcatraz inmate tin mug when I went to the island this summer.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-20T10:20:08+00:00</dc:date>
</item>

<item>
<title>Art of the Title</title>
<link>http://forabeautifulweb.com/blog/about/art_of_the_title/</link>
<guid>http://forabeautifulweb.com/blog/about/art_of_the_title/#When:10:12:12Z</guid>
<description><![CDATA[Title sequences. I particularly love <a href="http://www.artofthetitle.com/2008/11/25/soylent-green/">Soylent Green</a>.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-20T10:12:12+00:00</dc:date>
</item>

<item>
<title>Shiny Happy Buttons</title>
<link>http://forabeautifulweb.com/blog/about/shiny_happy_buttons/</link>
<guid>http://forabeautifulweb.com/blog/about/shiny_happy_buttons/#When:07:47:50Z</guid>
<description><![CDATA[John Allsopp on taking a plain old boring HTML button, and 2.0 it up the wazoo over at 24ways.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-18T07:47:50+00:00</dc:date>
</item>

<item>
<title>Progressive enhancement with CSS3</title>
<link>http://forabeautifulweb.com/blog/about/progressive_enhancement_with_css3/</link>
<guid>http://forabeautifulweb.com/blog/about/progressive_enhancement_with_css3/#When:07:45:46Z</guid>
<description><![CDATA[Nick Cowie on how to make funky Web 2.0 buttons from text just using CSS that does not break in older browsers.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-18T07:45:46+00:00</dc:date>
</item>

<item>
<title>Typography is poetry (More on Typesetting The Waste Land)</title>
<link>http://forabeautifulweb.com/blog/about/typography_is_poetry_more_on_typesetting_the_waste_land/</link>
<guid>http://forabeautifulweb.com/blog/about/typography_is_poetry_more_on_typesetting_the_waste_land/#When:23:03:21Z</guid>
<description><![CDATA[<p>Judging from the response from the people who attended, our first Visual Web Design Masterclass in London this month was a huge success. As a large part of the day was spent learning about typography, both relating to type and to layouts devised from typographic principles, I chose to illustrate the lessons by typesetting The Waste Land, a poem by TS. Eliot. If you weren't able to attend, now is your chance to take a look at the results of my experiments.</p><p>My self-set challenges were:</p>

<ul>
<li>To base each layout on a different typographical or layout principle</li>
<li>To use the same structural XHTML markup for every part</li>
<li>To design all but the grid in the browser, not Fireworks or Photoshop</li>
</ul>
<p>Start by learning <a href="/demo/2008/12/17/index.html">about the poem</a> or jump straight to each part below.
</p><h3>The Burial of the Dead</h3><p>
<p class="entry-caption">
<a href="/demo/2008/12/17/the-burial-of-the-dead.html"><img src="/siteimages/blog/2008-12-17-01.jpg" alt="The Burial of the Dead" /> 
<br />
<span>The Burial of the Dead</span></a></p>
<p>A two-column layout based an archetypal, classical double-page spread. This design also demonstrates RGBa colour and opacity and the background image is from one of Eliot&#8217;s hand-written drafts of the poem.</p>

<h3>A Game of Chess</h3><p>
<p class="entry-caption">
<a href="/demo/2008/12/17/a-game-of-chess.html"><img src="/siteimages/blog/2008-12-17-02.jpg" alt="A Game of Chess" /> 
<br />
<span>A Game of Chess</span></a></p>
<p>This layout created from a Fibonacci squares based grid. I will be writing soon about my thoughts on why experimenting with different sources of inspiration for designing grids can produce distinctive designs. In the meantime, I intended A Game of Chess to be dark and mysterious. After-all, it is <q>Where the dead men lost their bones.</q>.</p>

<h3>The Fire Sermon</h3><p>
<p class="entry-caption">
<a href="/demo/2008/12/17/the-fire-sermon.html"><img src="/siteimages/blog/2008-12-17-03.jpg" alt="The Fire Sermon" /> 
<br />
<span> The Fire Sermon</span></a></p>
<p>A newspaper inspired approach where the column width was based on the measure and the number of columns was dictated by the measure and the layout width. For this design I intentionally chose to break from the author&#8217;s layout of the type and allow the pre-formatted verse to wrap. Note how the various different sizes of text relate to the baseline.</p>

<h3>Death by Water</h3><p>
<p class="entry-caption">
<a href="/demo/2008/12/17/death-by-water.html"><img src="/siteimages/blog/2008-12-17-04.jpg" alt="Death by Water" /> 
<br />
<span>Death by Water</span></a></p>
<p>A simple, striking, elastic layout based on the measure. If you look closely at the left edge of the title you will see how I used negative text-indenting to draw the text to the left to deal with the typographical optical illusion created by the lowercase letter &#8216;d&#8217;.</p>

<h3>What the Thunder Said</h3><p>
<p class="entry-caption">
<a href="/demo/2008/12/17/what-the-thunder-said.html"><img src="/siteimages/blog/2008-12-17-05.jpg" alt="What the Thunder Said" /> 
<br />
<span>What the Thunder Said</span></a></p>
<p>An unusual combination of two grids with perspective and scale, inspired by an architectural photograph. Who said that you can&#8217;t use more than one grid on the same page?</p>

<h3>Set yourself a creative challenge over the Christmas break?</h3>
<p>I hope that you enjoy looking at these designs as much as I did making them. If you are short of inspiration, or you would like to set yourself a creative challenge over the Christmas break, why not typeset your own version of The Waste Land? Or if you prefer, a different poem? I would love to see the results.
</p>]]></description>
<dc:subject>Design</dc:subject>
<dc:date>2008-12-17T23:03:21+00:00</dc:date>
</item>

<item>
<title>Not quite what I had in mind.</title>
<link>http://forabeautifulweb.com/blog/about/not_quite_what_i_had_in_mind/</link>
<guid>http://forabeautifulweb.com/blog/about/not_quite_what_i_had_in_mind/#When:21:26:47Z</guid>
<description><![CDATA[George Oates on being <q>affected by the layoffs</q> at Yahoo. How companies, how people deal with tough times says a lot about them. Yahoo told the world not to trust them.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-16T21:26:47+00:00</dc:date>
</item>

<item>
<title>gridr buildrrr</title>
<link>http://forabeautifulweb.com/blog/about/gridr_buildrrr/</link>
<guid>http://forabeautifulweb.com/blog/about/gridr_buildrrr/#When:09:30:08Z</guid>
<description><![CDATA[Too many 'rrr's in this handy dynamic grid builder, but useful nonetheless. I do worry though that this 960 width grid approach is too quickly making people lazy about grids.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-16T09:30:08+00:00</dc:date>
</item>

<item>
<title>Everything You Know About CSS Is Wrong (book review)</title>
<link>http://forabeautifulweb.com/blog/about/everything_you_know_about_css_is_wrong_book_review/</link>
<guid>http://forabeautifulweb.com/blog/about/everything_you_know_about_css_is_wrong_book_review/#When:22:30:15Z</guid>
<description><![CDATA[<p>One of the questions that I get asked quite frequently is <q>until CSS3 moves forward, is there anything new we can say, or write, about CSS?</q>. That's a good question. Not as good perhaps as <q>Why does Gordon Brown do that funny thing with his mouth?</q> or <q>Would Eddie Izzard make a good Doctor Who?</q>, but quite a good question none-the-less.</p> 
<p>Over the last year or so there seems to be have been a shift in interest away from CSS in favour of scripting and other technical stuff, in usability and other web design <em>sciences</em>. But there <strong>are</strong> still areas of CSS left to talk and learn about. Only last month, two new books, both on related aspects of CSS landed on my desk: <a href="http://www.amazon.co.uk/exec/obidos/ASIN/0980455227/stuffandnonse-21">Everything You Know About CSS Is Wrong</a> by Rachel Andrew and Kevin Yank and <a href="http://www.amazon.co.uk/exec/obidos/ASIN/0321553845/stuffandnonse-21">Flexible Web Design: Creating Liquid and Elastic Layouts With CSS</a> by Zoe Gillenwater.</p>

<h3>Do you need another book about CSS?</h3>

<p>You might well be thinking <q>Do I need another book about CSS?</q> After-all, there is a crunch on credit. So is either worthy of your hard-earned cash?</p>

<p>Unlike so many books about CSS, neither of these are for beginners. Neither are CSS primers. (If you are looking for the best introduction to CSS, I still recommend <a href="http://twitter.com/collylogic">Simon Collison</a>'s <a href="http://www.amazon.co.uk/exec/obidos/ASIN/1590596897/stuffandnonse-21">Beginning CSS Web Development</a> above all other other beginner titles.) Rachel, Zoe and Kevin (somehow referring to them by their surnames seems too formal) have taken a different approach and they focus on narrower CSS topics; flexible layouts and the <code>display:table;</code> property. I like this approach. It's refreshing and I hope that other authors will follow suit as it encourages a deeper understanding of CSS as a mature technology.</p> 

<p>I will write about both books over the next couple of days, starting with Everything You Know About CSS Is Wrong. After-all a title like that just begs me to prove it wrong.</p>

<h3>Everything You Know About CSS Is Wrong</h3>

<p>The kind folks at Sitepoint sent me a preview copy of Rachel Andrew and Kevin Yank's Everything You Know About CSS Is Wrong a few weeks before it appeared in print, as along with <a href="http://twitter.com/themaninblue">Cameron Adams</a>, <a href="http://twitter.com/snookca">Jonathan Snook</a> and <a href="http://twitter.com/feather">Derek Featherstone</a> I contributed a short panel piece on why I am pleased as punch that the makers of Internet Explorer 8 have implemented support for CSS tables.<p>

<p>Everything You Know About CSS Is Wrong is a slim book. So slim that you could easily read in just a few hours, or if you're a bloke, in a few trips to the loo. Although its title implies that it covers <em>several</em> aspects of CSS and that Rachel and Kevin will attempt to re-educate you on <strong>everything</strong> you know about CSS, instead they focus on CSS tables for 94 of the 111 pages. Deftly they take the reader through the reasons why layout with CSS has always been possible only with compromises and why, in their opinion, CSS tables are now ready as a prime time layout solution. Thanks largely to support for them in the up-and-coming release of Microsoft Internet Explorer 8.</p>

<p>Rachel and Kevin open by explaining what they see are the <em>problems</em> with the CSS layout techniques we use everyday. Now I couldn't agree more that floats and positioning lack the flexibility to create today's rich, intricate page layouts. After all these types of layouts were not envisioned at the time that CSS boffins at the W3C invented these properties. I was really looking forward to learning about CSS tables but most of all to being convinced that they were a way to move web page layout forward. I was a little bit disappointed.</p>

<p>The examples of where floating and positioning techniques fail if you are making standard column layouts are very clearly explained, but Rachel and Kevin could have done so much more to demonstrate precisely when and why these commonly used techniques fail. After-all, floats have become the de-facto standard for creating column layouts and they are used on possibly hundreds of thousands of sites.</p>

<p>Where I see floats fail is when designers and developers (over)use them to create grid-based interface elements. Designers so often pile float on top of float, until their layouts remind me of a game of Kerplunk. These over-floated constructs are fragile, often inflexible and tied too closely to a specific visual layout. In such a slim book, I wish that Rachel and Kevin had devoted several more pages to this key part of supporting their argument that CSS tables are the solution to these layout problems. I would have liked to have seen them make a stronger case for why we need a different solution, perhaps by highlighting examples from well-known sites and demonstrating where their using floats or positioning causes problems.</p>

<p>Asking that you largely take them at their word that using floats and positioning is <em>wrong</em>, Rachel and Kevin move quickly into explaining why CSS tables are a more robust and reliable solution for today's elaborate page layouts. Rachel and Kevin are fantastic technical writers and they do a great job of explaining CSS table properties that many designers, including me, might be less familiar with. I learned a lot about CSS tables, their syntax and their behavior in browsers that have implemented them. You will also discover how using CSS tables will help to solve common layout problems such as equal height columns. Of course there are downsides too, particularly in relation to absolutely positioned elements inside container elements that have both <code>display:table;</code> and <code>position:relative;</code> applied to them. And just when things seemed to be going so well.</p>

<p>Of course you'll probably know that versions of Internet Explorer prior to version 8 ignore CSS tables completely, so after explaining their benefits, Rachel and Kevin cover several approaches for how you can  handle Internet Explorer &lt; 8's lack of implementation. As they freely admit, their first option, to ignore older browsers, will not be feasible as particularly Internet Explorer 7 will laughing at us for some years to come. But their suggestion of providing <em>simplified</em> layouts to Internet Explorer &lt; 8 might be an option you could consider. That is as long as you don't buy the outdated notion that all browsers must see the same visual design.</p>

<p>Rachel and Kevin's final suggestion, forking your CSS to supply CSS tables to browsers that understand them and reproducing your layouts using floats and positioning for Internet Explorer &lt; 8 is logical, if probably impractical in most cases. It also begs the question, <q>Why not stick to tried-and-tested floating and positioning techniques?</q></p>

<p>On first read, Rachel's and Kevin's answers were music to my ears as they echo many of the reasons why I advocate that designers and developers embrace the full range of CSS selectors, pseudo-elements and other currently implemented CSS3 properties.</p>

<blockquote>
<p>If we don't start using these features now, <em>then</em> who's holding back the web? The users who haven't upgraded their browsers? Until we build sites that take advantage of the new features added to the latest browsers, how can we expect those users to upgrade?</p>
</blockquote>

<p>But I still have nagging doubts. I'm a designer who loves to test what is and isn't acceptable in progressive enrichment but I'm not sure that I'm ready to take the step of promoting regressive page layouts. Browser differences for rounded corners, transparency and other small details? I can live with those. But wholesale differences in layout? I'm not ready to go that far. Of course I could do as Rachel and Kevin suggest and reproduce CSS table layouts using floats to help Internet Explorer along and in doing so <q>take advantage of the new features added to the latest browsers</q>.</p>

<p>But if I develop layouts using CSS tables, and then develop the same layouts using floats for people using Internet Explorer &lt; 8, how will they see a difference? What reasons are there for them to upgrade? To me it seems that this approach makes the user upgrade argument self-defeating.</p>

<p>Leaving aside questions about whether its title is misleading, I really wanted to love Everything You Know About CSS. I'm a sucker for books with a strong message, particularly ones that challenge conventional wisdoms. Rachel and Kevin are great technical writers and they do a wonderful job of explaining how CSS tables work and how they will help you to solve common layout problems. But in their mission to convince me that CSS tables are ready for prime time I felt that <a href="http://www.amazon.co.uk/exec/obidos/ASIN/0980455227/stuffandnonse-21">Everything You Know About CSS Is Wrong</a> falls short of being the inspirational manifesto that it tries so hard to be.</p>
]]></description>
<dc:subject>Reviews</dc:subject>
<dc:date>2008-12-14T22:30:15+00:00</dc:date>
</item>

<item>
<title>HTML&#45;ipsum</title>
<link>http://forabeautifulweb.com/blog/about/html_ipsum/</link>
<guid>http://forabeautifulweb.com/blog/about/html_ipsum/#When:14:52:26Z</guid>
<description><![CDATA[<a href="http://www.lipsum.com">Lipsum.com</a> has been in my bookmarks bar for just about as long as I can remember, but this is far handier. Great job by the guys from <a href="http://css-tricks.com/">CSS Tricks</a> ]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-12T14:52:26+00:00</dc:date>
</item>

<item>
<title>Video interview with Andy Clarke</title>
<link>http://forabeautifulweb.com/blog/about/video_interview_with_andy_clarke/</link>
<guid>http://forabeautifulweb.com/blog/about/video_interview_with_andy_clarke/#When:01:04:37Z</guid>
<description><![CDATA[I was interviewed during the Fronteers Conference in Amsterdam earlier this year after my talk on CSS positioning, Waiting For The Great Leap Forwards]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-12T01:04:37+00:00</dc:date>
</item>

<item>
<title>Equal Height Columns with jQuery</title>
<link>http://forabeautifulweb.com/blog/about/equal_height_columns_with_jquery/</link>
<guid>http://forabeautifulweb.com/blog/about/equal_height_columns_with_jquery/#When:08:31:15Z</guid>
<description><![CDATA[If you are not ready to fix equal heights by using <code>display:table;</code>, this jQuery plugin might be just what you're looking for.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-11T08:31:15+00:00</dc:date>
</item>

<item>
<title>Widon’t</title>
<link>http://forabeautifulweb.com/blog/about/widont/</link>
<guid>http://forabeautifulweb.com/blog/about/widont/#When:11:20:20Z</guid>
<description><![CDATA[Love ExpressionEngine and typography, but hate widows? Eliminate widows in entry titles with the Widon't plugin.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-03T11:20:20+00:00</dc:date>
</item>

<item>
<title>Syncotype Your Baselines</title>
<link>http://forabeautifulweb.com/blog/about/syncotype_your_baselines/</link>
<guid>http://forabeautifulweb.com/blog/about/syncotype_your_baselines/#When:20:25:27Z</guid>
<description><![CDATA[From 2007, Rob Goodlatte and a useful typographic tool for working with baseline grids.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-02T20:25:27+00:00</dc:date>
</item>

<item>
<title>The Grid System</title>
<link>http://forabeautifulweb.com/blog/about/the_grid_system/</link>
<guid>http://forabeautifulweb.com/blog/about/the_grid_system/#When:20:19:13Z</guid>
<description><![CDATA[A spooky coincidence considering the topic of my workshop yesterday.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-12-02T20:19:13+00:00</dc:date>
</item>

<item>
<title>Guerilla venue switching</title>
<link>http://forabeautifulweb.com/blog/about/guerilla_venue_switching/</link>
<guid>http://forabeautifulweb.com/blog/about/guerilla_venue_switching/#When:23:00:05Z</guid>
<description><![CDATA[What would you do if with only minutes until your guests arrive for your first workshop event, your venue suddenly becomes unavailable? Would you panic?<p>If, like us, you were packing to travel half way across the country to host your first creative workshop event, what would you make sure was in your bag?</p>

<ul>
<li>Presenter remote? &#10003;</li>
<li>Laptop monitor adapter? &#10003;</li>
<li>Spare batteries? &#10003;</li>
<li>Backup presentation files? &#10003;</li>
<li>Print-outs of all important information? &#10003;</li>
</ul>

<p>Backup venue? No, surely not.</p>

<p>We had chosen Central St. Martins School Of Art and Design as our venue for our first Visual Web Design Masterclass event in London because we wanted a setting that fitted with giving our events a more <em>creative</em> atmosphere.</p>

<p>Monday morning, just before 8:00am, we took a short walk to the venue. Time was always going to be tight. Their doors were due to open at 8:00am, then we had thirty minutes to set up our registration desk and AV equipment. Our guests were due to arrive at 8:30am, to register and have breakfast ready for a 9:00am start. We were a few minutes early arriving and Central St. Martins' shutters were down and all the lights inside were dark. 

<p>8:00am came and went. I watched the minutes slip by and was starting to feel very nervous at the lack of life-signs inside.<p> 

<p>8:05am: Still, closed, still dark and still no sign of our hosts. I walked to the back of the building and was told by a disconnected intercom voice that there had been a power failure to the college. No-one, including staff would be allowed access until it had been restored.</p>

<p>8:10am: Our contacts at Central St. Martins were still no-where to be found. To make matters worse there was not one soul from the college on hand to advise us what was happening or our options. We were left standing on the street with our guests due to arrive in twenty minutes, some from as far away as Switzerland, and with an ever increasing chance that we would have no venue.</p>

<p>8:15am: Always calm and collected under pressure, Sue noticed a sign offering conference venue hire outside a building across the street. Now I know what happened next sounds implausible, but honestly, I could not make this stuff up.</p>

<p>8:20am: I walked into Lion Court Conference Centre.</p>

<h3>The conversation went like this</h3>

<p><q>Good morning</q> said the helpful-looking lady behind the desk. <q>How can I help you?</q></p>

<p><q>Would it be possible to host a web design workshop for thirty people here?</q> I asked (with probably a whiff of panic about my person). <q>We will need AV equipment, wireless internet access and full catering.</q></p>

<p><q>Yes. When are you planning to hold your event?</q></p>

<p><q>In ten minutes.</q></p>

<h3>And ten minutes later, we did.</h3>

<p>It could, so easily, have turned into a disaster. But thanks to Sue's unflappable clear thinking, Owen's help in directing our guests to the new venue and the slick professionalism of Clare and her team at Lion Court, we were ready to go.</p> 

<p>AV equipment was connected, breakfast tea and coffee was served and without too much fuss our arriving guests were given their badges, branded Moleskine notebooks and were being seated in the theatre. Our timetable slipped by only fifteen minutes.</p>

<h3>Guerilla venue switching</h3>

<p>Even a small event like ours takes months of planning and we took care to think about everything that might go wrong. We took out insurance to cover certain aspects including what might happen if our guest speaker Brendan Dawes was somehow unable to attend. But never in our wildest dreams did we imagine that our venue would become unavailable with only minutes to go. Packing a spare laptop charger was a no-brainer, packing a spare, last minute backup venue? How can you plan for that?</p>

<p>How did Central St, Martins handle the situation? I have to say that I am very disappointed in their lack of communication and their lack of help and support when they knew of our plight. Because of this I doubt that I will consider using them again. I know that a building-wide power failure is no one individual's fault. I know that sometimes, even with the best plans, things happen to scupper them. What matters is not that things go wrong but how you handle them, and people, when they do.</p>

<p>Central St, Martins could so easily have kept us as future customers. They could so easily have liaised with their neighbors at Lion Court Centre to provide us with an alternative venue. They could have made the arrangements, completed paperwork and been our ally in this stressful time. Instead they left us adrift and so lost their opportunity to be our heroes at a difficult time and make us admiring customers for our future events in London.</p>

<p>In contrast, I could not have greater admiration for the way that Sue, Owen and the staff at Lion Court Centre handled our seamless switch of venue. They were superb in everything they did.</p>

<p>Holding our first event was a fantastic, if a little stressful, experience and I hope that our guests enjoyed it as much as we did. I learned a huge amount about how  and not to handle a difficult situation under pressure to keep a customer happy.</p>

<p>Thank-you so much to all our guests for supporting us by attending. We'll be back in the new year with more events and I hope you'll be there with us.</p>
]]></description>
<dc:subject>News</dc:subject>
<dc:date>2008-12-01T23:00:05+00:00</dc:date>
</item>

<item>
<title>Your (physical) music needs you!</title>
<link>http://forabeautifulweb.com/blog/about/your_physical_music_needs_you/</link>
<guid>http://forabeautifulweb.com/blog/about/your_physical_music_needs_you/#When:15:23:10Z</guid>
<description><![CDATA[Some people think that he was born on horseback. Others that he has no understanding of the word <em>fluffy</em>. All we know is that Gregory Wood designs a damn good blog post.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-11-26T15:23:10+00:00</dc:date>
</item>

<item>
<title>The Proof Is In the Pudding</title>
<link>http://forabeautifulweb.com/blog/about/the_proof_is_in_the_pudding/</link>
<guid>http://forabeautifulweb.com/blog/about/the_proof_is_in_the_pudding/#When:22:27:08Z</guid>
<description><![CDATA[Kyle Weens on his results with presenting designs to clients with XHTML/CSS prototypes, rather than static proofs. Good man.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-11-24T22:27:08+00:00</dc:date>
</item>

<item>
<title>Typesetting The Waste Land</title>
<link>http://forabeautifulweb.com/blog/about/typesetting_the_waste_land/</link>
<guid>http://forabeautifulweb.com/blog/about/typesetting_the_waste_land/#When:13:35:21Z</guid>
<description><![CDATA[With only a week to go until our first <a href="http://forabeautifulweb.com/announcing/visualdesign_08/">Visual Web Design Master Class</a> in London, I've been taking time away from client work to focus on writing all new content that I hope people attending will really love.<p>It is really important to me that I stretch my own limits when I make content for a new workshop. I hope that if I get excited and passionate about my content, then people attending will do the same.</p>

<p>This time I chose to do something a bit different. I chose to typeset each of the five parts of <a href="http://en.wikipedia.org/wiki/The_Waste_Land">The Waste Land</a> by <a href="http://en.wikipedia.org/wiki/T._S._Eliot">T.S. Eliot</a>. My self-set challenges were:</p>

<ul>
<li>To base each layout on a different typographical or layout principle</li>
<li>To use the same structural XHTML markup for every part</li>
<li>Not to use images</li>
<li>To design all but the grid in the browser, not Fireworks or Photoshop</li>
</ul>

<p>I will write a detailed article about my The Waste Land layouts after next week's workshop, but in the meantime here are screen-captures of each of them.</p>
<h3>The Burial of the Dead</h3>
<p class="entry-caption">
<a href="/siteimages/blog/2008-11-24-01.jpg"><img src="/siteimages/blog/2008-11-24-01-tbn.jpg" alt="The Burial of the Dead" /> 
<span>The Burial of the Dead</span></a></p>
<p>A layout based an archetypal classical double-page spread.</p>

<h3>A Game of Chess</h3>
<p class="entry-caption">
<a href="/siteimages/blog/2008-11-24-02.jpg"><img src="/siteimages/blog/2008-11-24-02-tbn.jpg" alt="A Game of Chess" /> 
<span>A Game of Chess</span></a></p>
<p>Layout created from a Fibonacci squares based grid.</p>

<h3>The Fire Sermon</h3>
<p class="entry-caption">
<a href="/siteimages/blog/2008-11-24-03.jpg"><img src="/siteimages/blog/2008-11-24-03-tbn.jpg" alt="The Fire Sermon" /> 
<span> The Fire Sermon</span></a></p>
<p>A newspaper inspired approach where the column width was based on the measure and the number of columns was dictated by the measure and the layout width.</p>

<h3>Death by Water</h3>
<p class="entry-caption">
<a href="/siteimages/blog/2008-11-24-04.jpg"><img src="/siteimages/blog/2008-11-24-04-tbn.jpg" alt="Death by Water" /> 
<span>Death by Water</span></a></p>
<p>A simple, striking, elastic layout based on the measure.</p>

<h3>What the Thunder Said</h3>
<p class="entry-caption">
<a href="/siteimages/blog/2008-11-24-05.jpg"><img src="/siteimages/blog/2008-11-24-05-tbn.jpg" alt="What the Thunder Said" /> 
<span>What the Thunder Said</span></a></p>
<p>An unusual combination of two grids with perspective and scale, inspired by an architectural photograph.</p>

<h3>O O O O that Shakespeherian Rag</h3>
<p>I found working with poetry as subject matter fascinating and if you need an injection of inspiration in your design work, step away from your client work and spend a few hours typesetting a piece of verse.</p>

<div class="notes"><p>This event is now sold out</p></div>]]></description>
<dc:subject>Design</dc:subject>
<dc:date>2008-11-24T13:35:21+00:00</dc:date>
</item>

<item>
<title>Twitaway: The Art &amp;amp; Science of CSS — Free download</title>
<link>http://forabeautifulweb.com/blog/about/twitaway_the_art_science_of_css_free_download/</link>
<guid>http://forabeautifulweb.com/blog/about/twitaway_the_art_science_of_css_free_download/#When:21:10:33Z</guid>
<description><![CDATA[Follow <a href="http://twitter.com/sitepointdotcom">@sitepointdotcom</a> on Twitter and get The Art &amp; Science of CSS by Jina Bolton and others for free. That's a bargain if you ask me.]]></description>
<dc:subject>External links</dc:subject>
<dc:date>2008-11-19T21:10:33+00:00</dc:date>
</item>

    
</channel>
</rss>