I decided to clean mine up and make it available on Github in two flavours. First, there’s website bootstrap, containing the files and folders I tend to use for every project. This is just flat HTML, CSS and JavaScript.

Second there’s Perch bootstrap which is similar except that it is designed to be used in a PHP environment and is what I use when I’m building a site with Perch.

It’s called Perch bootstrap because that’s what I use it for, but there’s no reason it couldn’t be adapted for use with any PHP application.

There’s no kind of license on either so feel free to download, fork, redistribute or do whatever else makes you happy!

The proper thing to do would be to move the old site to a subdomain and set up 301 redirects. This would mean that the (few) links to the old site would not die and the three people who ever cared would still be able to get to the content.

Static Content

The old site ran on WordPress, but there is really no need for a CMS when the site is never going to be updated again. It is also a good idea to archive information in the simplest file format available — who knows if PHP & MySQL will be available in 50 years and if they will be able to run a 50 year old weblog? The simplest format here would be plain HTML and CSS files. This also offers the benefit of reduced server load and improved page load times because we aren’t waiting for PHP and SQL queries to execute.

A Plan

So the idea seems simple:

1. Create a static HTML & CSS version of the old site.
2. Set it up on a subdomain
3. Configure 301 redirects to all of the old content

And it turns out is was simple. Here’s how:

Staticification

I played around with wget for a while and learned that I am not really suited to command line tools. Then I found the Really Static plugin for WordPress which will scrape the entire site and produce a static version all nicely arranged into files and folders. This static version will directly mimic the URL structure of the dynamic site and is exactly what I was after.

I added a big old red banner to the top of the dynamic site (to let people know they’re looking at out of date content) and then set the plugin scraping. One thing to remember here is that all links will now be hard coded into the site — that means that you need to tell Really Static what subdomain you will be using (in my case old.appleton.me) before you start the process.

Now I have a plain HTML version of the site which I can configure on a subdomain. The second step is to redirect incoming links to the new (old) subdomain.

.htaccess and 301 redirects

I’m on an Apache web server so I need to configure a set of rewrite rules for all the old pages. Since the new site is only one page I can create a rule which says “Redirect everything at http://appleton.me/* to http://old.appleton.me/* except for the site root”.

If only .htaccess files we as easy as that. I needed a bit of help with this part, but fortunately Stack Overflow is awesome.

Here is the rewrite rule which got the job done:

<IfModule mod_rewrite.c>
  RewriteEngine On
</IfModule>

RewriteCond %{HTTP_HOST} ^appleton[.]me$ [NC]
RewriteCond %{REQUEST_URI} !^(/(index[.](html|php))?)?$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://old.appleton.me/%1$1 [R=301,QSA,L]

Let’s step through it.

The first block tells Apache to enable URL rewriting:

<IfModule mod_rewrite.c>
  RewriteEngine On
</IfModule>

Next we tell it to rewrite all URLs unless they are the site root (or /index.html or /index.php):

RewriteCond %{HTTP_HOST} ^appleton[.]me$ [NC]
RewriteCond %{REQUEST_URI} !^(/(index[.](html|php))?)?$

Tell it to also ignore direct requests for files (so that the CSS and JavaScript requests for the new index.html don’t get rewritten):

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

And finally tell it to return a 301 header and redirect to http://old.appleton.me/

RewriteRule ^(.*)$ http://old.appleton.me/%1$1 [R=301,QSA,L]

That just about covers it. I now have a new single page on appleton.me and the old site archived at old.appleton.me. There’s one last thing to consider though…

404 Errors

It is good practice to serve a 404 page when someone requests a page which doesn’t exist. The redirect rules we have set up will send any URL (real or non-existent) to the old.appleton.me subdomain. What I really want is for these 404 errors to be sent to my nice custom 404 page at appleton.me/404.html.

To do this I set up another redirect, this time in the old.appleton.me domain root:

<IfModule mod_rewrite.c>
  RewriteEngine On
</IfModule>

ErrorDocument 404 http://appleton.me/404.html

This little rule just tells Apache to enable the rewrite engine and send all 404 errors to appleton.me/404.html.

So there it is, a fully static archive of my old WordPress site complete with 301 redirects to all old content — no link rot and no reliance on databases and PHP.

To say I am excited would be an understatement. I am delighted that I will be making a living from something which I really love doing and am looking forward to learning a million new things.

I will still be available for some freelance work, but will need to reduce my workload and be careful not to conflict with anything I’m doing at Mint.

I’m excited for this new adventure in my life and can’t wait to get started!

A Story

Last year we moved house and for the first time had fireplace. I brought logs and kindling and I tried to light a fire. It didn’t go too well because the logs were too big. They needed to be chopped and I didn’t have an axe so I used a saw. It went badly and I cut a large chunk out of my thumb.

I thought this was about a CMS?

I’m getting to that. The story has a moral. Ready?

Something, something, right tool for the job.

Deep.

I have tended to use WordPress to build client sites and if I am honest it is because it is the tool I know best. But it is just a tool and just because it will do the job does not necessarily mean it is appropriate.

I have just launched a small site for Daniel Stock, a freelance translator (check him out, he’s good). The requirements were simple – he needed a site where he could show his skills and qualifications and keep a testimonial section up to date.

I could have built this in good ol’ WordPress — pages for pages (well duh) and custom post type or two for repeating information, in this case a history timeline and testimonials. This approach would have worked just fine, but it would also have ignored a lot of unneeded WordPress functionality. What would happen when the client tried to add a blog post or a link or a comment from the CMS? None of these would be used, but they would all accept content on the back end.

Get to the Point

Oh, right. So I looked around and found Perch. Perch is a tiny CMS which is designed for small sites. It does not try to be everything to everyone and that’s perfect. It lets you define editable regions within a page and then update them from the admin interface. That’s all.

Well it’s not quite all — in fact you can get pretty advanced if you want to, but the point is that you don’t have to. The admin interface shows a list of pages, and nested beneath each page are lists of the editable regions on those pages. This is great because whilst we designers and developers might think of a site as repeating sets of data, the person updating the site likely thinks in terms of pages. After all that’s how the information is presented on a website.

What is even better is that I did not need to tell Daniel anything more than the admin interface URL, his username and his password. He was able to log in and enter all of the content with literally no instruction — that’s absolutely priceless.

Well, not quite priceless

Perch costs £35 for a license. That is £35 more than WordPress and £35 more than Drupal. If that bothers you then consider these two points:

1. You will probably spend more than £35 worth of your time training your client on another CMS
2. Perch is clearly the product of an enormous amount of time and effort. You get paid for your work right? Well so do other people. Just add £35 to your estimates and forget about it.

But what about building the site?

The admin interface is dead simple and so is developing a site. Build a static site as you usually would and then replace areas which you need to be editable with a simple tag:

<?php perch_content('Tag Name Here'); ?>

Refresh the page and then hit the admin section. Pick the content type (text, text block, image etc) and you’re away. You can build your own content templates if the included set does not meet your needs.

This workflow highlights another nice thing about Perch. It does not seek to control every aspect of the site. It lives in its folder and outputs chunks of HTML into your pages whenever you ask it to. It doesn’t add anything unwanted to the markup and it is super easy to retrofit to a static site.

In Summary…

I hope this has encouraged you to give Perch a try. It is not right for every project, but it is appropriate for a lot of the simple functionality required by small sites. It has excellent documentation and is maintained and developed by super smart people who update it regularly.

It has a plugin architecture which allows for extended functionality (think blogs, events and pages) and costs very little compared to some CMSs. More than anything though it is often exactly the right tool for the job. I won’t be using it for every site I build, but I will be using it whenever it is appropriate to do so.

(Did I mention that I designed and built the site you see when you sign up for a demo? No? Well I did.)

I have recently built a new site for Matizmo using Wordpres as the CMS. The blog section of the site includes sidebar links to monthly archives with a post count, arranged by year — much like a table of contents.

This was remarkably easy to mock up in Photoshop but remarkably tricky to achieve with the wp_get_archives() function. You might have noticed that I did manage it — this is how:

<?php
$year_prev = null;
$months = $wpdb->get_results(	"SELECT DISTINCT MONTH( post_date ) AS month ,
								YEAR( post_date ) AS year,
								COUNT( id ) as post_count FROM $wpdb->posts
								WHERE post_status = 'publish' and post_date <= now( )
								and post_type = 'post'
								GROUP BY month , year
								ORDER BY post_date DESC");
foreach($months as $month) :
	$year_current = $month->year;
	if ($year_current != $year_prev){
		if ($year_prev != null){?>
		</ul>
		<?php } ?>
	<h3><?php echo $month->year; ?></h3>
	<ul class="archive-list">
	<?php } ?>
	<li>
		<a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>">
			<span class="archive-month"><?php echo date("F", mktime(0, 0, 0, $month->month, 1, $month->year)) ?></span>
			<span class="archive-count"><?php echo $month->post_count; ?></span>
		</a>
	</li>
<?php $year_prev = $year_current;
endforeach; ?>
</ul>

This will output HTML in the following format:

<h3>2010</h3>
<ul class="archive-list">
	<li><a href="http://www.matizmo.co.uk/2010/10"><span class="archive-month">October</span><span class="archive-count">5</span></a></li>
	<li><a href="http://www.matizmo.co.uk/2010/09"><span class="archive-month">September</span><span class="archive-count">3</span></a></li>
	<li><a href="http://www.matizmo.co.uk/2010/08"><span class="archive-month">August</span><span class="archive-count">6</span></a></li>
	<li><a href="http://www.matizmo.co.uk/2010/07"><span class="archive-month">July</span><span class="archive-count">6</span></a></li>
</ul>

A bit of CSS to get everything aligned and apply a bit of League Gothic to the year heading:

h3				{ clear:left; font:normal normal 5.14em LeagueGothicRegular; margin:0; float:left; width:100px;}
.archive-list			{ margin:2px 0 3em 0; padding:5px 0 0 0; left:0; float:right; width:100px;}
.archive-list a			{ border-bottom:1px dotted #918f8f; color:#4c4c4c; display:block; width:100px; line-height:1; height:14px;}
.archive-list li		{ height:21px; list-style:none; margin:0 0 2px 0;}
.archive-list span		{ background:#fdfdfd; padding:0 2px 1px 0;}
.archive-list .archive-month	{ float:left;}
.archive-list .archive-count	{ float:right;}

Not quite as straightforward as <?php wp_get_archives(); ?>, but it gets the job done. If you have a less offensively inelegant solution to this I’d love to hear it!

Edit: Thanks to Keith in the comments for pointing out that the PHP code above totally didn’t work… It should be fixed now!

The Web Standardistas perfectly describe my feelings about this:

Sadly, the removal of the unlimited data option creates an increased awareness of data usage as far as the average Joe is concerned, leading, in many cases, to a hesitation in using this data, as it’s counting towards a – now defined – total allowance. This, in turn, only increases the guilt and diminishes the enjoyment you might get out of using your shiny, new iDevice.

It isn’t that I expect to ever use 500MB in a month — my last month’s usage was about 70MB — I just don’t want to be worrying about it each time I open Safari or Mail.

I have been with O2 since way before the iPhone was released, but it looks like they will be losing me (and no doubt others like me) for a seemingly petty and avoidable reason.

(NB. No other carriers have announced their iPhone 4 plans in the UK, but Vodafone currently offer 1GB of data on their 18 Month, £35 plan and Orange offer 750MB.)

And I love it even more now that I have discovered that Google Reader includes a keyboard short cut to hide the feeds sidebar. Tapping ‘u’ hides the sidebar and gives a more unobstructed reading view.

Generally I will hide the sidebar and just tap ‘space’ to flick through all new feed items. The only problem with this is that Helvetireader hides the feed title at the top of the viewing pane, making it difficult to keep track of which site’s feed you are reading.

I have put together a really small modification to the script to add the feed title back in.

Applying this tweak is pretty straightforward:

1. Navigate to the Google Chrome extension folder \Documents and Settings\[user]\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\ (for Windows) and find the Helvetireader folder. For me this is called /gkkhfigkhgiogdobmgcdnankjlbhilaa/ I’m not sure if this ID is unique to my computer (and will be different for you) or to the extension (and will be the same for you).
2. Once you’re in the correct folder, open the file script.js in your favourite text editor, and add the following to the bottom:

   var cssNode = document.createElement('link');
   cssNode.type = 'text/css';
   cssNode.rel = 'stylesheet';
   cssNode.href = 'http://appleton.me/helvetireader/helvetireader_mods.css';
   cssNode.media = 'screen';
   cssNode.title = 'dynamicLoadedSheet';
   document.getElementsByTagName("head")[0].appendChild(cssNode);

3. Clear your browser cache and re-launch it and you’re done! This stylesheet is served from my own domain, appleton.me, but it is also hosted on Google Code, so you’re free to fork it and add your own edits if you feel so inclined.

But when I was implementing it, I wanted to make a small change to the font stack. So this:

span.amp {
  font-family:Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif;
  font-style:italic;
}

Became this:

span.amp {
  font-family:Baskerville,GoudyBookletter1911,'Goudy Old Style',Palatino,'Book Antiqua',serif;
  font-style:italic;
}

My plan was to include the ampersand from the free font Goudy Bookletter 1911 (by the League of Movable Type) as the first fallback for those without Baskerville installed. This font could be served using the CSS3 @font-face rule to allow pretty much all users to see my second choice ampersand. I also created a custom subset of the font containing just the ampersand, to reduce bandwidth requirements and load time.

This all worked nicely except for the fact that I was specifying the italic version be used for each, and the Goudy Bookletter 1911 ampersand belongs to the Roman letterset. This forces the browser to render the Roman glyph as an ugly slanted faux-italc.

This may not seem like too much of an issue, but if the whole point of the exercise is to present the very best ampersand available then it kind of defeats the object to serve up a distorted version.

So how can we fix this? There is no way in CSS to specify italics for one font in a font stack and roman for another, so we need something a little bit more clever…

The Solution

My solution to this little puzzler relies on JavaScript, and works like this:

1. Detect whether the user has Baskerville installed.
2. Assign a class to the <body> element (either .baskerville or .no-baskerville.
3. Detect whether the user has a @font-face compatible browser.
4. Assign a class to the <body> element (either .fontface or .no-fontface.
5. Define different CSS properties depending on which classes are set on the <body> element.

Implementation

1. To detect whether Baskerville is installed, I am using a jQuery script from Remy Sharp.

   What makes this important is that: Comic Sans, in all it’s glory, is actually unique.

   From there it’s a simple case of comparing the font in question against Comic Sans and if they match, it’s not installed.

   Implementation is as simple as including Remy’s script in the page, and running the following jQuery function:

   function fontDetect() {
   	font.setup();
   	if (font.isInstalled('Baskerville')) {
   		$('html').addClass('baskerville');
   	}
   	else {
   		$('html').addClass('no-baskerville');
   	}
   }
   
   $(document).ready(function() {
   	fontDetect();
   });

2. Now we have a class assigned to the <body> element telling us if we have Baskerville installed, we can move on to @font-face detection.

   For me, this was even easier as I was already using Modernizr to allow HTML5 elements. By including the modernizr.js script on a page, you automatically get a number of classes assigned to the <body> element telling you which CSS3 features are supported by the user’s browser — including .fontface or .no-fontface.

3. All that remains then is to craft a bit of CSS to properly take advantage of these new classes:

   span.amp { /*To take care of those with JavaScript disabled*/
   	font-family: Baskerville,GoudyBookletter1911Regular,'Goudy Old Style',Palatino,'Book Antiqua',serif;
   	font-style: italic;
   }
   
   .baskerville span.amp { /*For those with Baskerville installed*/
   	font-family: Baskerville;
   	font-style: italic;
   }
   
   .no-baskerville.fontface span.amp { /*For those without Baskerville but with @font-face support*/
   	font-family: GoudyBookletter1911Regular;
   	font-style: normal;
   }
   
   .no-baskerville.no-fontface span.amp { /*For those without Baskeriville or @font-face support*/
   	font-family: 'Goudy Old Style',Palatino,'Book Antiqua',serif;
   	font-style:italic;
   }

Summary

You may feel that this is all a bit much just to avoid a slopey ampersand, and you might be right. But isn’t it the small details which separate good design and great design? I know I love to see sites where the author has clearly sweated every single detail, and I want others to see that in my work too.

]]> http://floatleft.com/notebook/a-better-best-ampersand/feed 6 http://floatleft.com/notebook/an-introduction http://floatleft.com/notebook/an-introduction#comments Tue, 02 Mar 2010 15:43:09 +0000 Andrew Appleton http://localhost:8888/floatleft/?p=67 My name is Andrew Appleton and I spend my days working as a Mechanical Engineer. I have started this site because I am passionate about web design and want to be able to work on small scale client projects during the weekend and evenings.

I suppose you could call this a side project for me — something I am doing for the love of it rather than being driven by any sort of financial need. I hope to be able to bring that love to my designs and to produce carefully crafted work which people will be proud of.

This little project has been in the works since last August. I have been working on it when I can, and it has been through five full redesigns before it was even launched. I hope the design of this site reflects my preference for a well structured layout which relies on strong typography and information hierachy rather than loud imagery or flashy gimmicks.

I plan to update the notebook section exactly as often as I feel I need to — it will serve as an outlet for my thoughts on web design and as a record of the small tips, tricks and hints which I may pick up along the way. This is as much for my own benefit as for that of anyone reading, but obviously if anyone finds it interesting I would be delighted!

I had been running a little blog — http://appleton.me/ and I have imported a few posts from there to get the ball rolling.

I will also post links which I find useful, interesting or amusing — again this is as much as a personal record as it is for anyone to follow, but feel free to subscribe and keep up with what I’m looking at!

If all of this paints me as the kind of chap you would like to work with then please drop me a line. I am currently accepting new work and would love to help you build something wonderful!

]]> http://floatleft.com/notebook/an-introduction/feed 1 http://floatleft.com/notebook/ie6-double-margin-a-simple-jquery-fix http://floatleft.com/notebook/ie6-double-margin-a-simple-jquery-fix#comments Tue, 02 Mar 2010 15:41:54 +0000 Andrew Appleton http://localhost:8888/floatleft/?p=65 Among the many small irritations we have to contend with when developing a website for IE6 is the so called double margin bug.This bug causes floated elements to render with a double left margin. The bug is described here, and a solution here. Essentially the element must be forced to a state known as “has layout”.

The Original Solution

The solution recommended is as follows:

The work around for this bug is preposterously simple, counter-intuitive and utterly in violation of the W3C recommendations—simply change the style of the floated element to “display: inline” and the problem disappears.

So do this–

<div class="box">
   <div class="sidebar" style="display: inline">content
   </div>
   content
</div>

A slightly cleaner way to achieve this is to create a separate ie.css stylesheet, and add a declaration looking something like this:

.myclass1, .myclass2 {display:inline;}

Cleaner still would be to enclose this ie.css stylesheet in a conditional comment so that it is only served to IE6:

<!--[if lte IE 7]>
<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

We can now add all of the elements which exhibit this behaviour to the CSS declaration, safe in the knowledge that it will only be seen by IE versions 6 and below.

A Simpler Way

This solution is good, but it does leave us with the problem of having to maintain a long list of id and class names in the ie.css file. A more straightforward way to deal with the issue would be to write a rule stating that all floated elements should also have display:inline; applied. Unfortunately this is not possible in CSS, but we can use a little JavaScript and RegEx trickery to achieve the same thing.

1. This example uses the excellent and extremely easy to use jQuery JavaScript library, so the first step is to link to it in your page’s <head> element:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

   Note: I am linking to the Google hosted version of the library, you may prefer to host your own copy and link to that.

2. Next we will create a separate ie.js file, and link to that in the <head> section of the page:

   <!--[if lte IE 7]>
   <script src="ie.js" type="text/javascript"></script>
   <![endif]-->

   Be sure to place this after the link to the core jQuery library.

3. Into the ie.js file, we will add the following:

   // Initialise jQuery Regex...
   jQuery.expr[':'].regex = function(elem, index, match) {
       var matchParams = match[3].split(','),
           validLabels = /^(data|css):/,
           attr = {
               method: matchParams[0].match(validLabels) ?
                           matchParams[0].split(':')[0] : 'attr',
               property: matchParams.shift().replace(validLabels,'')
           },
           regexFlags = 'ig',
           regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
       return regex.test(jQuery(elem)[attr.method](attr.property));
   }
   
   // ...and use it to overcome the 'double margin' bug. Add display:inline to all floated elements
   function double_margin() {
   	$(':regex(css:float, left|right)').css('display', 'inline');
   }
   
   // Let's go!
   $(document).ready(function() {
   	double_margin();
   });

   What we are doing here is:

   1. Telling jQuery that we plan to use regular expressions.
   2. Defining a jQuery function (double_margin()) which will search for every element which has float:left; or float:right; applied, and add an inline style of display:inline; to each
   3. Telling this function to fire when the document loads.

There we have it. A simple way to overcome the double margin bug by assigning display:inline; to all floated elements. It should be noted that this method will only work for users who have JavaScript turned on. For this reason it is probably wise to check your web stats before implementing this on a site.

]]> http://floatleft.com/notebook/ie6-double-margin-a-simple-jquery-fix/feed 1