A new years' treat for all you lucky readers! Another designed blog post, this time as informative as good-looking! Check it out: http://greg-wood.co.uk/blog/design/surviving-the-inevitable-z-apocalypse

Read the rest of this post in all it's custom-designed glory

Felton Perry. Robert Conrad. SUDDEN DEATH!!

Soldiers of fortune who shoot for loot, slay for pay, and slash for cash!

Two masters with a thousand ways to kill, a pair of panthers in a rolling rampage of revenge. Back to back, they face SUDDEN DEATH!!

Molten madness erupting in a vicious vortex of violence! SUDDEN DEATH comes screaming out of the sky!

The savage struggle for survival. SUDDEN DEATH!!

Unleashed, unchained, uncontrollable, nothing can stop them - not bombs, bullets or bulldozers! Automatic executioners triggering a massacre-marathon, each man a devil-driven death-machine in a human demolition derby! The damned versus the doomed, from the first burst to the last blast, they're a two man disaster area!!

Skin of brawns, muscles of iron, fists of steel; the ultimate gladiators in the final area. Clashing fists of fury strike like vipers of vengeance!

Fifty eight caliber killers spitting death as they crawl their way through hell! Rapid fire frenzy erupting in a 45 caliber climax. SUDDEN DEATH!!

Robert Conrad. Felton Perry. Don Stroud. John Ashley. Nancy Conrad. SUDDEN DEATH!!

Here's the trailer from YouTube

CSR360 Global Partner Network and Engage

• http://csr360gpn.org
• http://www.engageyouremployees.org

A pair of very ambitious projects these ones, both are Corporate Social Responsibility (CSR)-based, and needed to appeal and cater for varied audiences. Jamie and Phil (with a little programming help from Chronos and Swinfield) blazed these over a number of months and I think they're great. I know they were probably both sick of looking at them during the final stages, but I love the apparent lack of client interference/compromise on the design side of things; proof that if you nail the right design for the intended audience there's no need for any of that "pesky client" stuff people are always moaning about. Also if you're after a site that displays mostly "out of the box" features of ExpressionEngine, check this out.

WallSwaps

• http://wallswaps.com

This is an experiment Collison came up with after we received a shit-load of Erskine badges from the lovely people at Pure Buttons. Basically, the concept is if you want a badge (button) with one of our cool Erskine Birdies on, send us some stuff! A chance for us to get our brand in all sorts of nooks and crannies, and a chance for the dirty public to get some personalised linkage on a site with traffic. I did the colouring in and Phil helped me out with the ideas for navigation and sourced the javascript gubbins from his endless list of bookmarks.

Frith Street Gallery

http://frithstreetgallery.com

This was a long project, but a good one. DouchebagSuperDeveloperOfTheUniverse and I worked mostly on this, and I'm proud of it - some nice artistic things on there too. It's pretty minimal with some decent use of white space and some lovely large images. A really impressive physical space to check out as well if you live in the big smoke that is London.

Coming shortly to a screen near your face..

The brand spanking, shiny new Erskine Design site, which is shaping up to take a healthy dose of inspiration from all the nicest things, not to mention a coolness all of it's own. Also a nice little magazine site, another massive employer-focused site and a whole load of other stuff. Hopefully, maybe, possibly even an idea for a website that cool people may want to use (douchebags call these things web-apps) might stick it's dirty little currently-undesigned face out of the ground before 2009; who knows.

Read the rest of this post in all it's custom-designed glory (FeedReaders are so 2007)

This weekend I received my eagerly awaited copy of The Ride Journal, which a fixie “in-crowd” mate recommended to me. If you’re a cyclist, check this out. If you’re not, put the money toward a bicycle instead.

I've always thought the saying "you get what you pay for" is a pretty decent one, and one I'd apply even to magazines. Generally in this country, for around 4-6 quid, you can get yourself a half-good, half-relevant, half-full-of-adverts mag, and spend about one hour reading it, cover to cover. Cycling mags I find are worse; usually around 60-70% advertising and cover to cover in 30 minutes.

If, however, you were willing to part with 8 of your hard-earned pounds, you could get yourself a lovely copy of The Ride Journal, a magazine/journal full of cycling stories from shitloads of people, all from different disciplines of cycling. The pages smell of that lovely recycled paper smell and it's nicely designed (as is the website). It is, at last, a cycling publication that makes me excited about hopping on my bike the next morning when I'm reading it in the evening. More glossy, adtastic mags just make me want to buy stuff and reaffirm my hatred of lycra.

“We know that most people who share our obsession with bikes don’t want to be pigeon-holed as roadies, freeriders, track racers, BMXers, XC riders or even commuters. They are just riders. So we wanted to create something for them, and also for us.”

What is the ride?

There are a loads of instances where this little technique could be employed, but I've used a list as an example because it's one of the most common. Here we have a basic unordered list (<ul>), with floated-left images where the text doesn't wrap under the images. Told you it was simple.

Ignore the extraneous styling I've used in this example (I can't help it!), I'll be dealing with just the layout of the list in the CSS. Also the example images aren't accurate in terms of dimensions, they're shown here merely to assist.

Now I've seen loads of people use two divisions in this situation, one for the image and one containing everything else, floated left and right respectively. It's really not necessary and can be a pain in the arse dealing with all those pesky floats. The HTML for this method is as follows:

<ul>
    <li>
        <img src="image1.jpg" alt="" />
        <h3>A heading</h3>
        <p>A nice little paragraph, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </li>
    <li>
        <img src="image2.jpg" alt="" />
        <h3>Another heading</h3>
        <p>A nice little paragraph, Lorem ipsum dolor sit amet.</p>
    </li>
    <li>
        <img src="image3.jpg" alt="" />
        <h3>Final heading</h3>
        <p>A nice little paragraph, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue ante et sem. Cras consequat magna nec elit. Maecenas imperdiet augue nec libero mattis faucibus.</p>
    </li>
</ul>

Well simple. Next, we'll use some classic CSS that I'm sure you all use everyday (as I mentioned earlier, I'm ignoring all the extraneous styling that would have to happen to realise the examples; the green, the type, spacing, etc):

ul li { padding-left:70px; overflow:hidden; }
ul li img { float:left; }

This will leave you with a nice floated image and some padding where the image will sit. The overflow: hidden; clears the contents of the list-item, meaning you don't have to worry about clearing floats.

Next we need to get that image where it belongs:

ul li img { float:left; position:relative; left:-70px; }

This will give us something like this. Because we're using position: relative;, the image is still in it's place in the flow of the HTML document, hence the gap, but our positioning has simply pulled it over to the left.

Now to closed up that gap:

ul li img { float:left; position:relative; left:-70px; margin-right:-60px; }

Job done. I know that this can be done using absolute positioning on the image, and min-height on the list-item (to make sure the list-item doesn't cut off the bottom off the absolutely positioned image), but this method caters for images of varying heights, and plays nicer with IE6.

Apologies if this insulted everyone's intelligence; blame the Swan.

This article originally appeared in issue 178 of .net magazine, but I’m republishing it here because I’d like to use the Seacliffe site for a series of articles about CMSes and creativity. Or something like that. Any ideas?

I should note that the design, whilst doing it's best to address the issues raised in the article, was constrained by the magazine format; it had to have a certain width and height and had to be clear when printed at 15cm square. I'm currently realigning the design which a more considered approach for use in those future articles.

When you visit your local council's website, you're more than likely using it for one of three things: paying your council tax, complaining that your rubbish hasn't been collected, or find out what's happening in your area. The fact is, if you look at most council websites, they fail to address even two of these criteria.

The website of ficticious council of Seacliffe works where others fail. By adhering to these three primary user needs, the homepage can be effective at dealing with enquiring, confused or irate residents. The online services are presented prominently with the help of a block background colour and the Polaroid-style image, in the hope that when visitors arrive, they'll see what they need to do and exactly how to do it.

In terms of visual design, many other council websites look cluttered, old-school and boring. The Seacliffe Council site however, uses some nice images that break out of their moulds, making the page interesting and leading the eye from one section to another. It also makes use of a horizontal typographic grid and a subsequently simple layout - a must for laying out pages containing a significant amount of information. Colour is used quite liberally yet in a subtle way, giving the site a feel of both respect and approachability - qualities that any borough council would be keen to embrace.

The content on the homepage is kept to a minimum to avoid overwhelming visitors, although anyone wanting to delve deeper into the site can do so using the clear navigation.

1. Grid Using a grid to layout pages containing lots of information will always be beneficial to the usability and design of the site. Grids are also fun to break out of and experiment with.
2. Navigation The departmental-based navigation breaks up the inevitably large amount of content nicely, doesn't confuse or disorientate visitors, and highlights the most commonly used sections.
3. Online Services Visitors can pay bills, find jobs or apply for planning permission directly from the homepage. They can also browse an A-Z of of online services if they can't find what they're looking for.
4. Colour You wouldn't trust a council with a garish website, and you couldn't relate to a overly authoritative one. This council uses warm yellows and muted blues to portray approachability and respect.
5. News People are generally nosey; everyone likes to know what's happening in their area, despite how mundane the news stories may be. A featured news story works well to liven this section up a bit.
6. Contact and newsletter Visitors can easily contact their local council from the homepage and - in this age of green living - replace their monthly council newspaper with a digital version.

I feel like a zombie. My last holiday wasn’t even that long ago, but for the last few weeks I’ve been dreaming of websites, which I don’t like in the slightest, taking at least 2 hours to wake up every morning, and abandoning Shirley in favour of the bus every day. Shocking.

Which is why I'm spending the next few days as close to the heart of the Lake District as I can. I'm leaving my phone at home (if it was an iPhone I'd take it with me and throw it into a lake), taking Ellie and a tent and some bacon and a map into one of the most beautiful parts of the world, and becoming a hippy for nearly a week.

As you may have noticed, the blog section of this site now looks a little fetching as opposed to the generic layout it sported before. [Observant visitors may have also noticed changes to other sections of the site, which means that now only the work section needs updating. Down with poo brown!] This means when I return from my battery-recharging-break, I'll be posting loads of stuff. New post types mean I don't have to write long articles anymore; I can write slightly pointless shite like this (notes), post up stuff that looks good (images), do some more actual-designing (designs), tell you all about things you may like (recommendations), and if I'm feeling particularly waffly, I can still write articles. EE is very, very nice to me.

See you all in a week! Until then I think that for pure comedy value, you should all check out this trailer for what must be the worst bad-bad film ever made: Zombie Strippers. If you watch more than the trailer I'll consider you an idiot. Ta ta.