http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_3/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Five simple steps to designing grid systems - Part 3 : Journal : Mark Boulton</title>

<!-- 
markboulton.co.uk
version: 6
launched: May 2006
Please look and learn, but don't steal. Thank you.
-->

<!-- Meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Mark Boulton is a designer based in Cardiff, UK. Specialising in usable, functional and elegant design acquired through rigorous problem solving." />
<meta name="keywords" content="mark, boulton, mark boulton, cardiff, uk, design, web design, print design, logo design, information design, information architecture, web standards, css, xhtml, one 2 one, british airways, bbc, consultant" />
<meta name="author" content="Mark Boulton" />
<meta name="copyright" content="Mark Boulton" />
<meta name="revisit-after" content="7 days" />

<!-- ICO -->
<link rel="shortcut icon" type="image/ico" href="http://www.markboulton.co.uk/favicon.ico" />

<!-- RSS -->
<!-- Journal -->
<link rel="alternate" type="application/rss+xml" title="markboulton.co.uk | RSS 1 | Journal" href="http://www.markboulton.co.uk/journal/rss_1.0/" />
<link rel="alternate" type="application/rss+xml" title="markboulton.co.uk | RSS 2 | Journal" href="http://www.markboulton.co.uk/journal/rss_2.0/" />
<link rel="alternate" type="application/atom+xml" title="markboulton.co.uk | ATOM | Journal" href="http://www.markboulton.co.uk/journal/rss_atom/" />

<!-- Delicious Feeds -->
<link rel="alternate" type="application/rss+xml" title="markboulton.co.uk | delicious interesting links" href="http://del.icio.us/rss/markboulton/" />

<!-- JS -->
<script type="text/javascript" src="http://www.markboulton.co.uk/global/inc/global.js"></script>
<script type="text/javascript" src="http://www.markboulton.co.uk/global/inc/livesearch.js"></script>
<script src="http://www.markboulton.co.uk/mint/?js" type="text/javascript"></script> 

<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.markboulton.co.uk/global/css/screen.css" title="default"/><link rel="stylesheet" type="text/css" media="print" href="http://www.markboulton.co.uk/global/css/print.css" />

<!--[if gte IE 6]>
<link href="http://www.markboulton.co.uk/global/css/ie.css" type="text/css" rel="stylesheet" media="screen" />
<![endif]-->

</head>

<body id="journal" class="c1-c2">

<div id="container">

<!-- BEGIN header -->
<div id="header">
<div id="masthead">

<h1 id="logotype"><a href="http://www.markboulton.co.uk/index.php">Mark Boulton Design</a></h1>
<p><span>Design thinking. Web delivery.</span></p>

<ul id="skiplinks">
<li><a href="http://www.markboulton.co.uk/search"><span>Search</span></a></li>
<li><a href="#content"><span>Skip to content</span></a></li>
</ul>

<ol id="topnav">
<li id="about_tab"><a href="http://www.markboulton.co.uk/about">About</a></li>
<li id="portfolio_tab"><a href="http://www.markboulton.co.uk/portfolio">Work</a></li>
<li id="article_tab"><a href="http://www.markboulton.co.uk/articles">Articles &amp; Examples</a></li>
<li id="journal_tab"><a href="http://www.markboulton.co.uk/journal">Journal</a></li>
<li id="contact_tab"><a href="http://www.markboulton.co.uk/contact">Contact</a></li>
</ol>

</div>


<!-- END #header -->
<hr class="hide" />
</div>

<!-- BEGIN content -->
<div id="content">

<h1 id="sectiontitle"><a href="http://www.markboulton.co.uk/journal">Journal</a></h1>

<!-- BEGIN #c1 -->
<div id="c1">



<div id="entrycontent">

<h2 class="title">Five simple steps to designing grid systems - Part 3</h2>

<div id="posted">
<ul>
<li>Posted on: August 09, 2005 </li>
<li>In: <a href="http://www.markboulton.co.uk/journal/C84/">Design</a>, <a href="http://www.markboulton.co.uk/journal/C85/">Articles</a>, <a href="http://www.markboulton.co.uk/journal/C107/">Simple Steps</a>, <a href="http://www.markboulton.co.uk/journal/C106/">Typography</a></li>
<li><span class="commentoff">Comments closed</span></li>
</ul>
</div>

<p>The third installment to this series is going to be a little different. The previous installments have been talking through some of the basics of grid construction using ratios as the primary device. They've also dealt with grid construction for print media. Unfortunately, as designers for web media, we don't have some of the luxuries as our print designer collegues.</p>

<p>Rather than go through tutorials (I'll be covering these in the last two installments), I'll be using this installment as a platform to discuss some of the challenges and rewards of designing grid systems for the web.</p>



<h3>A whole load of considerations</h3>
<p>Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off,in print, the designer has a <em>fixed</em> media size - the paper size (or packaging, poster, whatever). Let's say a print designer has designed a magazine. The reader of this magazine can't suddenly increase the font size if they find it difficult to read - well they just move it closer to their eyes I guess. This is just one consideration, there are more but I'm sure you get the point.</p>

<p>So, that's media size. On the web you have other considerations such as the browser, the OS platform, the screen size and the actual devices that web sites can be viewed on, from PDA's and Mobile's to assistive technologies such as screen readers. How do you design a grid for all of this? It's a really good question and I'm not claiming I have the answer.</p>

<h3>In an ideal world</h3>
<p>We all know about the problems with websites rendering differently across different browsers, platforms, devices etc. But, just for a moment, let's forget about that.</p>

<p>Designing a grid for the web should not be difficult, in fact, it shouldn't be any different from designing a grid for an media. As discussed in the previous parts of the series, you can construct a grid in the same manner for screen as you do for print. Base it on ratios, experiment with form and white space etc. Use pixels as your base measurement and go from there in the knowledge that your design will look exactly the same in every browser. After all, you, the designer, knows best for your reader right? You <em>know</em> they want light grey, 10px verdana with a measure of 600 pixels.</p>

<h3>In the real world</h3>
<p>Good designers for the web <em>know</em> that the users who use their sites may want different, and know, with the web, they have the power to change things. The designer has lost, to a degree, the ability to <em>control</em>. For a lot of designers (including me), this has been a tough transition. We're taught for years to create the delicate balances of white space, the manicured typography and delicate colour palettes, all designed to create harmonious designs which do their job very well. </p>

<p>Then some short sighted user comes along and increases the text size... and... and... totally breaks <em>your</em> design.</p>

<p>I think you get the idea. We can't be upset when the user wants to change something like the text size. What we can do is design grid systems to <em>adapt</em> to those changes.</p>

<h3>Not just columns</h3>
<p>Over the past couple of years, coupled with the increase in CSS based sites, we've seen a rise in certain grid configurations which are all based on the amount of columns. 2, 3, 4 column layouts - float this, position that etc. Why, even this site falls into the '750 px, 3 column' category. These grids have quickly become a convention, and for good reason too. They are quick to create, fairly stable across many platforms and don't degrade to the same degree as table based layouts. This is all good. What isn't so good though is the general lack of understanding of grid systems when perhaps the question on most designers lips when they sit down to begin a design is, 'how many columns should I have'. This is not grid system design.</p>

<h3>Grid systems for the web</h3>
<p>The next two installments of this series will go through details of creating considered grid systems for the web and the implementation using CSS. I thought it would be useful to just go through some of the considerations before hand.</p>

<h3>The series</h3>

<p>This is the third installment of this "Simple Steps..." series.</p>

<ol>
<li><a href="http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/">Subdividing ratios</a></li>
<li><a href="http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_21/">Ratios and complex grid systems</a></li>
<li>Grid systems for web design: Part 1</li>
<li><a href="http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_4/">Grid systems for web design: Part 2 Fixed</a></li>
<li><a href="http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_5/">Grid systems for web design: Part 3 Fluid</a></li>
</ol>

</div>



<div id="comments">

<h3>Comments</h3>



<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>Mark, I&#8217;m looking forward to it.... Great article indeed.
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=6ffc81f9775cd64d2f7c2b1b4b29e31f&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Jolo's Gravatar" title="Jolo's Gravatar" />
<p><a href="http://www.avlack.com/blog/">Jolo</a><br /><span>Tue 9th Aug 2005 <br />at 8:07 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>Yup, me too. 
</p>
<p>
That print nonsense means nothing to me&#8212;I can barely print an invoice let alone do anything creative on paper but this, this is looking very interesting! :)
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=29402a43afdde10b863aa779bfefe496&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="John Oxton's Gravatar" title="John Oxton's Gravatar" />
<p><a href="http://joshuaink.com">John Oxton</a><br /><span>Tue 9th Aug 2005 <br />at 11:19 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>Great articles. 
</p>
<p>
I would suggest though that you toss in links to your previous articles. I just found this today and part 1 is going to fall off your list of recent articles soon. Maybe a little summary &#8220;In <a href="http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/">Part 1</a> we talked about...&#8221; This way I don&#8217;t have to go hunting for the previous pieces when they fall off the list of recent articles. It may also be a good idea to create a &#8220;Series&#8221; category to make it easier to follow series of posts&#8230; assuming you plan to do more (and I hope you do).
</p>
<p>
Keep up the good work!!
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=77fc3e4b91c1ab0440604f5dd795c442&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Adam van den Hoven's Gravatar" title="Adam van den Hoven's Gravatar" />
<p><a href="">Adam van den Hoven</a><br /><span>Tue 9th Aug 2005 <br />at 11:24 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment-me">

<!-- comment -->
<div class="commentcontent">
<p><strong>Adam</strong> - Tis done. Thanks for the heads up. I did do this for the previous &#8216;Simple Steps&#8217; series but it slipped my mind on this one. Like you suggested I&#8217;ve also now got a category for all these articles.
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=1e26fd486cb8a2d843e0085bd1382f2b&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Mark Boulton's Gravatar" title="Mark Boulton's Gravatar" />
<p><a href="">Mark Boulton</a><br /><span>Wed 10th Aug 2005 <br />at 1:52 am</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>Thank you very much for your efforts, this is very good reading.
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=a6aee66554098fe7af3d6200f294b7a9&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="gBsigz's Gravatar" title="gBsigz's Gravatar" />
<p><a href="http://www.spliffrichards.com">gBsigz</a><br /><span>Wed 10th Aug 2005 <br />at 2:45 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>Like the rest of the readership here, I too hang on your every word.&nbsp; I&#8217;m looking forward to the upcoming CSS grid tutorials!
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=3e101126b514c65ee531e47bd6281ba3&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Nathan Smith's Gravatar" title="Nathan Smith's Gravatar" />
<p><a href="http://www.sonspring.com/">Nathan Smith</a><br /><span>Wed 10th Aug 2005 <br />at 2:51 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment-me">

<!-- comment -->
<div class="commentcontent">
<p>Thanks Nathan. Pressure&#8217;s on for these next two articles eh? I&#8217;d better get my facts straight!
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=1e26fd486cb8a2d843e0085bd1382f2b&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Mark Boulton's Gravatar" title="Mark Boulton's Gravatar" />
<p><a href="">Mark Boulton</a><br /><span>Wed 10th Aug 2005 <br />at 2:53 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>Far too much praise here for my liking.
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=9db47c40aed8401803271613d0ca645a&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Graham Sanders's Gravatar" title="Graham Sanders's Gravatar" />
<p><a href="http://www.gsanders.co.uk">Graham Sanders</a><br /><span>Wed 10th Aug 2005 <br />at 6:53 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>Not much content here to say much about; hardly an article. But a few thoughtful points were raised: the web is not only the ultimate democratizer for information, but it&#8217;s starting to be that for visual design (with RSS, databases holding info, google caches, etc).
</p>
<p>
This lack of control seems to be OK with many, but the designer&#8217;s task is to shape information; we are the facilitators between content experts and the layperson, people rely on our experience to be able to control the flow of information so that people will better understand it. Releasing this control is harmful to the information and the reader as some things will be lost in translation. After all, we&#8217;re now familiar with the content and can make sound decisions about placement, size, color, pace, tone, flow, etc. How can someone uninitiated to the content make reasonable decisions about this? I just don&#8217;t buy the &#8216;designers should let go of control because we&#8217;re on the web now&#8217; argument; it&#8217;s not based on any sound footing from the content&#8217;s perspective.
</p>
<p>
Also, the learning curve to publish on the web is very low compared to print; this has created a very large population of designers that have no foundation in size &amp; scale, pace and position. Enter template and copy/paste xhtml code design.
</p>
<p>
Thankfully there&#8217;s a core of people interested in pushing the bounds of the *visual* (not simply xhtml/css code).
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=a1c1ae4185e957a15f070727e0ece639&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="dmr's Gravatar" title="dmr's Gravatar" />
<p><a href="">dmr</a><br /><span>Wed 10th Aug 2005 <br />at 11:37 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment-me">

<!-- comment -->
<div class="commentcontent">
<p><strong>dmr</strong> - My point with this post was to raise the questions, not to answer any really. 
</p>
<p>
I think you misunderstand my points though. You said:
</p>
<blockquote><p>How can someone uninitiated to the content make reasonable decisions about this? I just don?t buy the ?designers should let go of control because we?re on the web now? argument; it?s not based on any sound footing from the content?s perspective.</p></blockquote>
<p>
Let me answer the first question. Why should the user <em>care</em> how the content is arranged as long as they can access/read it? Maybe that&#8217;s the reason we have so much &#8216;undesigned&#8217; content on the web. It&#8217;s because people generally don&#8217;t care as long as they can fulfil a task or read some content. <strong>They <em>do not</em> have to be &#8216;initiated&#8217; to read what they want to read.</strong>
</p>
<p>
The second point. If you read the post again, my point was more about scalability, not control. I&#8217;m not sure I understand your point about content in this context.
</p>
<p>
Also, I disagree with your point about web/print learning curve. After doing both for many years I&#8217;m still very much on the curve for producing good design for the web. This, I guess, is due to it&#8217;s fluidity as a medium - you don&#8217;t really get that with print. Also, the majority of print work isn&#8217;t <em>used</em> in the same way web sites and applications are. And that&#8217;s the point really. I&#8217;m not just talking about text based websites here, I&#8217;m talking about applications too.
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=1e26fd486cb8a2d843e0085bd1382f2b&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Mark Boulton's Gravatar" title="Mark Boulton's Gravatar" />
<p><a href="">Mark Boulton</a><br /><span>Thu 11th Aug 2005 <br />at 12:08 am</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>Content is key. As designers we should ensure that the content is available to as many people as possible. Surely, it the role of the designer to adapt their skills to allow for this level of flexibilty. A default design may still be created, but if this design crashes simply because a user wants the text size a bit bigger, then the design is flawed. The beauty of designing with standards allows for flexibilty: alternate style sheets, high contrast views, zoom layouts etc. Therefore, the designer should not just let go of the control, but actively hand control to the user. Thus a good web designer, you may come.
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=827fb6a745a506e3e2df4e33bfff0d80&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="?listner?'s Gravatar" title="?listner?'s Gravatar" />
<p><a href="">?listner?</a><br /><span>Fri 12th Aug 2005 <br />at 8:20 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>^^
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=a0ff40b949139bdf83174f89f04407a3&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Danillo's Gravatar" title="Danillo's Gravatar" />
<p><a href="http://64.124.231.223/avatar.php?gravatar_id=29402a43afdde10b863aa779bfefe4">Danillo</a><br /><span>Sat 13th Aug 2005 <br />at 10:21 am</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>I stumbled upon your article while looking for info on grid systems (I&#8217;m redesigning my webpage). I can&#8217;t wait to read the end! You&#8217;ve posed lots of wonderful questions in a very coherent, readable fashion.
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=3bd588f6d727e7b9c803584cd3a404b4&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Mary's Gravatar" title="Mary's Gravatar" />
<p><a href="">Mary</a><br /><span>Mon 15th Aug 2005 <br />at 9:18 pm</span></p>
</div>

<!-- end comment container -->
</div>


<!-- comment container -->
<div class="comment">

<!-- comment -->
<div class="commentcontent">
<p>This is fantastic.&nbsp; I have only recently become aware of grid systems but I always knew there was a methodology behind layout.
</p>
<p>
I primarily deal with the web so Im looking forward to your next two articles.
</p>
</div>

<!-- author information -->
<div class="authorinfo">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=3002d7b8ce4d0b42cafe9e8cd39a8507&amp;size=32&amp;default=http://www.markboulton.co.uk/global/img/no-gravatar.gif" alt="Peter's Gravatar" title="Peter's Gravatar" />
<p><a href="http://www.hotmustard.co.nz">Peter</a><br /><span>Tue 16th Aug 2005 <br />at 12:41 pm</span></p>
</div>

<!-- end comment container -->
</div>





</div>

<!-- BEGIN #commentform -->
<div id="commentform">

Commenting is not available in this section entry.

<!-- END #commentform -->
</div>


<div class="postnavigation">


<p>Next entry: <a href="http://www.markboulton.co.uk/journal/comments/green_n_blue_an_ee_control_panel_theme/">Green n Blue - An EE control panel theme</a></p>



<p>Previous entry: <a href="http://www.markboulton.co.uk/journal/comments/professional_css_a_first_look1/">Professional CSS: A first look</a></p>


</div>







<!-- END #c1 -->
<hr class="hide" />
</div>




<!-- BEGIN #c3 -->
<div id="c2">

<h3 class="first">Most recent entries</h3>
<ul>

<li><a href="http://www.markboulton.co.uk/journal/comments/confessions_of_a_slack_blogger/">Confessions of a slack blogger</a></li>

<li><a href="http://www.markboulton.co.uk/journal/comments/annual_jaunt_across_the_pond/">Annual Jaunt Across the Pond</a></li>

<li><a href="http://www.markboulton.co.uk/journal/comments/one_principle_to_design_by1/">One Principle to Design By</a></li>

<li><a href="http://www.markboulton.co.uk/journal/comments/sxsw_third_times_a_charm/">SXSW: Third time&#8217;s a charm</a></li>

<li><a href="http://www.markboulton.co.uk/journal/comments/what_is_up_with_flow/">What is up with Flow?</a></li>

<li><a href="http://www.markboulton.co.uk/journal/comments/and_the_winner_is_2/">And the winner is&#8230;</a></li>

<li><a href="http://www.markboulton.co.uk/journal/comments/a_naming_competition/">A naming competition</a></li>

<li><a href="http://www.markboulton.co.uk/journal/comments/a_couple_of_books/">A couple of books</a></li>

<li><a href="http://www.markboulton.co.uk/journal/comments/whympers_mountain/">Whymper&#8217;s Mountain</a></li>

<li><a href="http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_with_colour_part_3_colour_combinations/">Five Simple Steps to designing with colour part 3: Colour combinations</a></li>

</ul>

<h3>flickr</h3>
<div id="flickr">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&display=latest&size=s&layout=v&source=user&user=42759010%40N00"></script>
</div>

<h3 class="cl">Categories</h3>
<ul id="nav_categories" class="nav_categories">
	<li>
<a href="http://www.markboulton.co.uk/journal/C82/">Apple</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C84/">Design</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C85/">Articles</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C111/">Business</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C81/">Information Architecture</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C77/">News</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C92/">Expression Engine</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C112/">Flow</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C80/">CSS</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C79/">markboulton.co.uk</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C78/">BBC</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C83/">Personal</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C107/">Simple Steps</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C110/">Site launch</a>
</li>
	<li>
<a href="http://www.markboulton.co.uk/journal/C106/">Typography</a>
</li>
</ul>


<h3>Search</h3>
<div id="search">
<form method="post" action="http://www.markboulton.co.uk/"  >
<div>
<input type="hidden" name="ACT" value="15" />
<input type="hidden" name="XID" value="c02300b2f9cedc6d02e25da41db72cace57abe74" />
<input type="hidden" name="RP" value="search/results" />
<input type="hidden" name="NRP" value="search/noresults" />
<input type="hidden" name="RES" value="20" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="weblog" value="" />
<input type="hidden" name="search_in" value="everywhere" />
<input type="hidden" name="where" value="all" />
</div>


<form id="searchform" action="/index.php">
<div>
      <input type="text" name="keywords" value="" class="input" size="15" maxlength="100" />
      <input type="image" src="http://www.markboulton.co.uk/global/img/search_button.gif" alt="Go" name="go" value="submit" class="submit"/>
</div>
</form>
</form>
</div>

<h3>Journal feeds</h3>
<ul class="feeds">
<li><a href="http://www.markboulton.co.uk/journal/rss_1.0/">RSS 1.0</a></li>
<li><a href="http://www.markboulton.co.uk/journal/rss_2.0/">RSS 2.0</a></li>
<li><a href="http://www.markboulton.co.uk/journal/rss_atom/">Atom</a></li>
</ul>

<a href="http://fivesimplesteps.markboulton.co.uk"><img src="http://www.markboulton.co.uk/global/img/fss_promo.gif" alt="Buy Five Simple Steps: Designing for the Web" /></a>

<h3>Stuff I like</h3>

<p><a href="http://www.britpack.org/"><img src="/global/img/proud_horiz.gif" width="140" height="109" alt="" /></a></p>

<p><a href="http://www.istd.org.uk"><img src="http://www.markboulton.co.uk/images/uploads/istd_logo.gif" /></a></p>

<p><a href="http://www.mediatemple.net"><img src="http://www.markboulton.co.uk/global/img/mt.png" /></p>

<p>Powered by <a href="http://www.pmachine.com/index.php?affiliate=markboulton">Expression Engine</a></p>

<p><a href="http://backpackit.com/?referrer=BPZB6"><img border="0" title="Backpack: Get Organized and Collaborate" alt="Backpack: Get Organized and Collaborate" src="http://123.backpackit.com/images/backpack11230.gif" width="112" height="30" /></a></p>

<!-- END #c2 -->
<hr class="hide" />
</div>

<div class="clear"></div>

<!-- BEGIN #aboutfooter -->
<div id="aboutfooter">
<div id="aboutmark">
<p><img src="http://www.markboulton.co.uk/images/uploads/mark_boulton.jpg" class="thumb" alt="A picture of Mark Boulton">I'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for <a href="http://www.agency.com">Agency.com</a> in London as an Art Director before working as a Senior Designer for the <a href="http://www.bbc.co.uk">BBC</a> in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, <a href="http://www.markboultondesign.com">Mark Boulton Design Ltd.</a></p>

<p>I've got a thing about grids and typography and occasionally <a href="http://www.sxsw.com/interactive">ramble on</a> <a href="http://www.vivabit.com/atmedia2007/europe/">about them</a> to anyone who will listen.</p>
</div>

<div id="aboutworkwithme">
<h4 id="markboultondesignlogo"><a href="http://www.markboultondesign.com">Mark Boulton Design</a></h4>
<p>If you're after simple, clean and effective web design; <a href="http://www.markboultondesign.com">let me know</a>.</p>
</div>
<!-- END #aboutfooter -->
</div>

<!-- BEGIN #footer -->
<div id="footer">
<p class="copyright">Copyright &copy; 1998-2007 Mark Boulton. All rights reserved.<br />Certain projects, images, and products are trademarks of and/or copyrighted by their respective owners.</p><p class="clientlogin"><a href="http://www.markboulton.co.uk/client/" title="Client login">Client login</a></p>
<!-- END #footer -->
</div>

<div class="clear"></div>

<!-- END #content -->
</div>

<!-- END #container -->
</div>

</body>
</html>