Useful stuff #2

I had intended these to be far more regular than this, must try harder. A mixture of tips/tools/reviews/articles that you’ll hopefully find useful, I did.

Contracts, admin and all that jazz

I’ve recently been looking at all of the admin side of things, a boring but necessary task.

We have all had those jobs that have started to spiral out of control with new and completely ridiculous demands being placed on you left, right and centre or clients who have taken months and months to pay for work completed.

Good admin makes the fun parts of your job (designing and coding) far more straightforward and effective.

I’ve found a number of great articles that outline things far better than me:

I hope you found those of use, feel free to post your own suggestions.

Does your site take too long to load? Probably. So, how to speed it up?

“There is more to life than simply increasing its speed” (Gandhi)

Last week I was doing some speed tests on what I was expecting to be a relatively slow-load site that I’m working on, the results, whilst not completely shocking, were still surprising. The site was taking up to 8 seconds to load fully over a decent speed connection (and would’ve been much much longer over dial-up). This had been an issue that had been nagging away at me more generally for a while now so I thought it was probably time to look into how to address it.

“Delays under half a second impact business metrics”

I have been reading up on the tests that Google had conducted to see how long the average user would wait for a site to load before giving up and moving on (Bing also conducted similar tests). Their findings? Simple, if your site takes too long to load then you will lose traffic and damage the user experience. And by ‘too long’ we are talking in terms of milliseconds. When Bing and Google increased a server-side delay from 1000ms to 2000ms there was a 2.2% drop in user satisfaction (not too bad you’d say) but the ‘time to click’ increased from 1900ms to 3100ms. This second stat is probably the most pertinent as it would indicate that a 1000ms slow down in server-response times results in the user becoming disproportionately unengaged with the site.

I think something else to bear in mind is that if the user does decide to stick with your site, and this level of site-reponse is repeated page after page (or even more slowly) then it would not be too much of a leap to assume that the user satisfaction would start to drop even faster as their frustratingly slow experience exacerbates things.

You’ve lost their attention, how do you get it back?

So, we’ve decided that a slow-loading site is a bad thing? Cool. There seems to be a consensus that the quickest way to get your site to load quicker is to get the file size of the site’s assets down, which may seem obvious but it would seem that not enough people do it, and even those that do (of which I thought I was one) probably aren’t getting things as compressed as they could be.

Efficient (and small) CSS

I’ve never been a huge fan of massively compressing my CSS files. I find the process of stripping out all the white space (line breaks etc) irritating as, in my opinion, it renders my CSS almost unreadable if I ever want to go back and edit it.

To assuage my guilt about never really super-compressing my CSS I read several articles about making my CSS more efficient. It made interesting reading and has changed my coding practices. Perhaps the two most useful things that I learnt about making CSS render efficiently were:

  • CSS reads right-to-left. e.g. with #nav li a – a is the “key selector” i.e. the element being selected, then li, then the id #nav
  • “There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.”
    • #main-navigation {   }      /* ID (Fastest) */
    • body.home #page-wrap {   }  /* ID */
    • .main-navigation {   }      /* Class */
    • ul li a.current {   }       /* Class *
    • ul {   }                    /* Tag */
    • ul li a {  }                /* Tag */
    • * {   }                     /* Universal (Slowest) */
    • #content [title=’home’]     /* Universal */

There is more on this subject in this excellent article However I would say that the two points I’ve highlighted above are the basis to making your CSS render as efficiently as possible.

An important point to remember, as the article states, is “So we know that ID’s are the most efficient selectors. If you wanted to make the most efficiently rendering page possible, you would literally give every single element on the page a unique ID, then apply styling with single ID selectors. That would be super fast, and also super ridiculous. It would probably be extremely non-semantic and extremely difficult to maintain. You don’t see this approach even on hardcore performance based sites. I think the lesson here is not to sacrifice semantics or maintainability for efficient CSS.As with every ‘best practise’ you also have to use a modicom of common sense, there is no point in taking a good way of working and applying it in a ridiculous way (sorry if this seems like stating the obvious but I think it is an important point to remember).

Compress that CSS

Now it is an unanswerable argument that compressed CSS is smaller. I outlined above why I’m not a huge fan of this method but it is unavoidable if you want to seriously address your site’s load time. There are, as always, a huge amount of ways you can go about compressing your CSS.

There are a number of online tools that’ll do it for you:

You can look into gzipping your CSS file:

There is an article here about using gzipping on the whole site to speed things up:

Last but not least there seem to be a few ways to compress your CSS file using PHP:

Images, beautiful but deadly

Images make your site look better right? They allow you to use cool fonts as headers (although there are better ways of doing this, here’s one, they often form the basis of swanky looking navigation and layout elements and more and more often large imagery is used to provide a visual impact that wouldn’t be achieveable with another type of element (

The trouble is, images take up space and they take up even more, unnecessary space if you’re using the wrong file format.

Image file formats. What? Where? When? Why?

The three most commonly used, and widely supported, image file formats on the web are .jpg, .png and .gif. You should be using all 3 of these file formats in your designs, they each have a reason for being there. If you use the right format for the correct purpose then you will have a more efficient site.

  • GIF – 8-bit, lossless but limited to 256 colours so are bad for photos. However they do allow single-bit transparency so you can make 1 of the 256 colours that it does render transparent. GIFs are great for block-colour elements such as logos and navigational elements.
  • JPG – 16-bit, capable of millions of colours and designed specifically for photos. However lacks some of the capabilities of GIFs such as transparency and animation. Can be compressed but the compression is lossy and once over about 50% results in noticeably reduced image quality. Should really only ever be used for photos.
  • PNG – comes in 8-, 24- and 32-bit formats designed with the web in mind. The 8-bit format is very similar to GIF in that it supports 256 colours and 1-bit transparency, in addition file sizes are likely to be slightly smaller than GIF equivalents as PNG saves it’s colour data more efficiently. The 32-bit version (named, unsurprisingly PNG-32) allows a similar range of colours to JPG but also offers alpha-channel transparency. Rather than only being able to specify one colour as transparent or not PNG-32 allows you to specify the transparency of every pixel on a sliding scale (from 0-255)…the only drawback being…IE6 doesn’t support alpha transparency (surprise, surprise). I wouldn’t recommend using PNG for photos as the file size is likely to be fairly huge in comparison with a JPG equaivalent (due to the PNG being 32-bit and being a lossless format).

So, to summarise, what should you be using and when?
JPG – to be used for photos, be aware that if you try to reduce the file size by upping the compression then anything beyond 50% compression results in noticeable reduced image quality.
GIF – can be used for simple elements, logos and navigation – although remember that PNG-8 could be an alternative.
PNG – comes in 8, 24 and 32 bit formats (and the file sizes increase with each). 8-bit could be used as an alternative to GIF. 32-bit offers alpha channel transparency which could be useful for design or navigational elements where more sophisticated transparency is required. However always bear in mind that the 32-bit version is the largest file format mentioned here and consider whether or not a GIF or 8-bit PNG could be used if less sophisticated (e.g. one-colour) transparency is required.

As I mentioned previously these guidelines should be considered as just that, guidelines. Don’t take them as hard and fast rules that should be applied as rote to every situation. However I do think that being aware of what each file format was designed for allows you to make more informed choices.

Image optimisation

My final word on images, if you are using an editing package such as Photoshop or Fireworks, make sure that you always export your images (whatever format they’re in) as optimised for the web. This process strips out all of the completely unnecessary meta-data that these programs include as standard and noticeably reduces your image file size.

HTTP requests, and how to reduce them

Every time you include an element that isn’t hard-coded into your page file (e.g. by linking to include an external file) you are introducing a new http request to your server. Whether this is linking to a css or js file or including an image.

If you are including 5 js files in your file then this is 5 http requests, add into this however many images your file includes, at least 1 css file and you’ve probably got at least 10 http requests per page. Unsurprisingly the more http requests you have, the slower your page will load. So, how do you reduce them? Simple, combine elements. Whether this is combining your multiple css or js files into one master file (and then ensuring that is written efficiently and compressed) or combining your images by using sprites (info on sprites here and here

And finally

I hope the methods I’ve outlined above prove to be useful to you, if anyone else has any other thoughts on how to optimise your website for faster loading then please comment!

I think that all of the methods outlined here are relatively straight-forward and could be easily incorporated into your processes. Things like writing efficient CSS and javascript and then optimising those files, using the appropriate image formats and reducing http requests are all quite easy things to do and will have a noticeable impact on the file size and speed of your sites.

I am aware there are even more methods that you can utilise to optimise your site, and would be interested to hear if anyone thinks they should’ve been mentioned here. I aimed to provide a good and manageable starting point and I hope I’ve done that.

Thanks to the following articles (all of which are worth a read)

Back, if not in black then at least with tanlines

I have returned from my little driving trip across Europe following some cyclists (

And I’m straight back into things, working towards getting the final signoff on Will Soden and Pickles and Potter’s sites.

I’m also in the final phase of populating the new site for Run For All. The new site will see a complete redesign and markedly increased functionality, I’m very excited.

So, back to work, a more useful blog will follow in the next week or so.

I may be some time…

Next Wednesday I set off in a van on a 5,000 mile round trip to Istanbul to support the Istanbul to Leeds cycle challenge which aims to raise funds for the Jane Tomlinson Appeal. As a result I will be more-or-less out of action from 21st July through until 31st August – I will have some access to emails but will only be able to check and respond on an irregular basis.

Hopefully before then I will finish off sites for Will Soden (plumber), Pickles and Potter (Deli/Cafe) and the Northern Dales Farmers Markets (farmers markets) as well as getting on as much as possible with the new site for Run For All (mass-participation runs). Diverse to say the least!

Oh and as a slight aside I also found something else that results in WordPress’ wonderful white screen of death – messing around too much with the chmod settings of the wp-content folder.

Sharing is caring

CSS – speeding things up

A bit of house-keeping (for wont of a better word) first, I’ll be moving this blog in the next couple of weeks to integrate with my website When I first set this blog up I wasn’t entirely sure what form it was going to take but I’ve managed to keep it quite web-relevant (thus far) so it seems silly to keep two separate identities running when really they are parts of the same thing….

Now, boring stuff over, on with the blog.

This isn’t a hugely technical blog this time but covers a few CSS-related things that I have found make a big difference to workflow and just generally making things a bit easier to organise and manage.

I came across the notion of CSS ‘global resets’ a few years ago, to me they make a great deal of sense, especially with regards to white space ( – I find it far easier to start from nothing and completely build up my styling in the knowledge that I’ve specified every element rather than let some odd default browser setting trip things up. The notion here is that all browsers have default margin/padding/font-face/etc settings for elements that will be applied if you don’t specify an alternative, the annoying thing being that all of these browser defaults are slightly different. With a global reset you, as the name suggests, reset all instances of the specified attribute (whether its padding, margin, font-face, whatever) to zero, or Arial, or black depending on the attribute in question. This then gives you a specific base point to work from – which I find very useful.

Some good examples of CSS resets can be found here and a good one here

A further use of resets is detailed here, Smashing Magazine takes CSS resets as an element of their suite of recommendations for developing a CSS framework – on reading this article I realised that I already used my own framework to some extent (I just didn’t refer to it as such) as there were certain stylesheet practices and scripts that I use as a matter of course – the acknowledged disadvantages of frameworks – such as the time taken to familiarise yourself with them and the possibility of inheriting bad code if you use someone else’s – didn’t really come into play as all the code I use is hand-written by me, I’m not saying I’m perfect though!

I’d be interested to hear about people’s experiences using some of the external CSS frameworks out there – there is a handy list of some of them here – have they streamlined your workflow or do they cause more problems than they solve?

There are also a couple of great articles at Smashing Magazine (who I rate highly – as you can probably tell) regarding good CSS practice and tips for better coding here and here

So, you think you want a website?

A while ago, on my personal blog, I mused about things you should consider when you have that epiphany…”we need a website”, worth a read I’d say (but then I wrote it, so I would say that wouldn’t I…)

WordPress theme development and the white screen of death

I’m currently working on a new site for a client who requires a CMS. After a fair amount of research and based on my own experiences they decided that WordPress fitted the bill. So I needed to develop a bespoke theme for them.

Now I’ve messed around with tweaking wordpress themes before and it is pretty intuative. Unfortunately last night the whole thing came crashing down and I had to battle with the (apparently infamous) ‘white screen of death’ – which usually seems to be caused by a php bug. These bugs can be as simple and innocuous as an additional line break in your code (WordPress doesn’t like space it would seem). I’ve not yet tracked down the source of my ‘white screen’ issues (EDIT – I have since found the source of my bugs, it was caused by such an innocuous thing i still can’t quite get my head around it! basically i needed to remove and all space between each function in my functions.php file – i.e. so there was no space between each closing ?> tag and the following opening <?php for the next function. it’s ridiculous that such a small thing brought everything crashing down, but there you have it…) but if you’re suffering from something similar then there are numerous lists that should help troubleshoot the problem. Here are just a few that I’ve found helpful:

I’d also add that if you’re considering WordPress theme development then it’s a good idea to have a good read of the documentation first (there are lots of dependancies that it’s useful to be aware of so the whole thing doesn’t come crashing down)

And there are also a number of very good tutorials around WordPress theme development. Again, here are a few I’ve found helpful:

Hope that helps!

Something useful

Righty, I’ve started blogging more specifically about web-related stuff over at

In fact, I just put up the first (possibly) useful article, on Flickr’s API,

So, if you’re interested in that sort of thing, why not check it out.

Flickr API – what I’ve learnt

I’ve never really paid a huge amount of attention to Flickr, and even less to the Flickr API. I’ve had to rectify this recently as a site I’m working on needs to have an easily updatable slideshow as a fairly prominent element.

Flickr was the platform that we decided to go with to upload the photos to due to the fact it’s pretty nice and easy to use and there are a huge range of pre-existing apps etc that you can exploit to do pretty much anything you can imagine.

Flickr provides a standard way of embedding photos/photostreams, although it is via an i-frame, is fairly clunky and not very customisable – it also looks pretty crap if you want to make it sit with the rest of the site’s design. I explored various methods of calling the relevant photostream to the site via php and the Flickr API but really it was all becoming far more complicated than I suspected it needed to be. If you are a php-lover then the very clever Dan Coulter has written the phpFlickr class to act as a wrapper for the Flickr API and make interacting with it via PHP relatively easy – check it out here there is also a very useful-looking tutorial over at Nettuts+ which details how to create a very nice photo gallery using phpFlickr – you can check that out here

As I’ve already mentioned all this was looking to be slightly too cumbersome for what I was needing – all I really needed was to be able to call the photostream (perhaps with the option to display photos within that stream with a specific tag) and for the embedded call to be style-able. If there were some nice, sexy transitions etc than that’d be a bonus.

I thought that there would probably be a jQuery-related solution out there, and unsurprisingly there was, loads of them. Once again I came up against solutions that did far more singing and dancing than I would ever need or want. I just wanted a lightweight, simple solution goddamnit – why does everything need to be so bloody complicated!?

Then I stumbled upon flickrshow, “a simple, lightweight javascript slideshow for Flickr”. Only slight problem was that it was still in public beta testing mode so there wasn’t any documentation available. However the demos that they’ve provided give you more than enough of an idea how to use the script and which variables do what. You can check it out here – it’s absolutely perfect for what I need you can call photos from a particular user, using a particular tag or from a particular photo set and it’s all lightweight, easily customisable and ace. Excellent.

I must stress that there are numerous other Flickr solutions out there, flickrshow just suited my needs and spec – hence me highlighting it. There seems to be a vast range of possibilities using things such as phpFlickr – however I haven’t spent the time looking more closely at these yet as they weren’t required for this project.

But my interest has been piqued so I think that the Flickr API is something I’m going to properly re-visit soon.

Anyways, hope that this was in some way useful – feedback and comments would be very welcome – I’m still trying to work out what people would find interesting.


So, you think you want a website? 4 things to consider

So, you’ve decided that your company should probably invest in a website. You’ve heard that they can be good for business and ‘everything seems to be online these days’ but you’re not really sure exactly how a website could help you and aren’t really sure what you want.

Unfortunately this situation could now go quickly downhill, you could get some bad advice, become completely confused and annoyed by the amount of jargon and ‘technical nonsense’ involved in the whole process and end up paying someone too much money to come up with something that doesn’t do what you want, doesn’t look how you want and is basically a complete waste of everyone’s time.

Or, you could read the rest of this post and hopefully pick up some useful information. This is by no means an exhaustive list but should hopefully start to get you thinking along the right lines when it comes to working with a designer on a new website.

Things to consider with a new website
Before you even contact any web design agencies for quotes I would strongly recommend that you have a think about some, or ideally all, of the following points. It will make the whole process far easier and more productive.

1. What does your business do?
It’s frightening how many people, when asked this question, can’t give a clear answer. If you don’t know what you do, how is a designer supposed to develop a site that accurately reflects what the business does!?
Have a proper analysis of what your business does, what its primary aims are and how you go about achieving those. e.g. we are a fantastic deli who provide delicious, locally-sourced, organic food at our shop in Leeds. We also provide a delivery service and we cater for events such as parties and weddings.
Now this is just a bit of an example but I hope it’s clear that if you can clearly define what your business does then it is far easier for the designer (i.e. me) to come up with a site that properly represents these strengths and communicates them effectively. A confusing web presence is, in my opinion, almost more damaging than having no web presence at all.

2. what do you want your website to achieve?
give some thought to how you will measure if the website is successful. just having a website is no good if it doesn’t have a clear goal (or goals) and purpose. e.g. i want to use the website as part of a co-ordinated campaign to increase telephone sales by 10% or i want to grow the number of contacts on my mailing list by 20%. Again, these are simplistic examples but they link in to the first point i made, being able to identify what your business does and what you want the website to achieve will result in a far clearer, more focussed, more useful website and will result in a better return on your investment.
NOTE!!! – don’t draw up a list of hundreds of goals you want your website to achieve, this is worse than having no clear defined goal at all.

3. what are your competitors doing?
take a look at the websites/online activity of your competitors. if you don’t know who your competitors are then, as a matter of urgency, carry out a SWOT analysis of your business!
have a look at what they are doing, how the are interacting with their customers and make a note of what you like/don’t like about their website, pay particular attention to how the site is structured, is it easy to find everything you want? etc.

4. what do you like the look of?
now this may be an obvious point but it’s one i feel i need to make anyway, work out what you like. make a note of sites that you like the look of but more importantly try to think about why you like what you like. e.g. i like the large header image, it grabs my attention and is a good way of using their logo in a high-impact way. or i like their navigation, it’s easy to use and it looks cool!
equally i would say don’t necessarily restrict your design opinions to website but do think about how they can translate to the web e.g. i really like the look of old, red BT phoneboxes, i love the color or i love the layout of the windows or whatever it is you like and think about how that can be applied in the context of a website.

i’m going to continue this list later this week…

Nimes, Markets, stuff

Had a fairly productive Sunday that involved getting the earliest train to Skipton to take photos at the Skipton Farmers Market. Unfortunately despite the glorious weather it was bloody freezing, the train was late and I had a bit of trouble finding the market so ended up wandering around the entireity of Skipton town centre. Skipton is a bit of an odd place, part- nice, Dales, market town, part- horrible, scummy, crap-shopping-centre-filled- hole.

Anyways, I managed to get a few decent shots, the light was an absolute nightmare to work with – a really low, really bright, winter sun that had everyone squinting.

On Wednesday I’m off on m’holidays, we’re going to Nimes (which is in the South of France), have just tested my schoolboy French to the absolute limit trying to work out if and how we could get trains from Nimes to Avignon and Arles, which are both supposed to be nice. I just want to see the Pont du Gard in all it’s giant, double-aquaduct glory ( To be honest it’ll just be nice to have a bit of a break away from things, work on all fronts has been absolutely manic lately. I’ve not been to that part of France either so it should be interesting on all fronts.

One thing that won’t stop is the marathon training, although it’s annoying (so I’m told) how much space a pair of size 12 running shoes takes up in a suitcase. It’ll be fun to run around somewhere new, although I need to try not to a)get lost or b)forget that traffic is all…on the opposite sides of the road and stuff.

Am currently doing work for; Aisling Swindells (e-portfolio), Ben Cotton (e-portfolio/life stream), Nothern Dales Farmers Markets (complete site redesign and content development), Pickles & Potter (site development), Run For All (site redesign and digital marketing campaign) and have a couple more things in the pipeline.

Oo, also, i made a cheesecake yesterday, was really easy, has about a billion calories in and enough saturated fat to take out an elephant but tastes amazing, will pop up the recipe when i get a chance.

Design for design’s sake?

I went home last week to visit the folks, while I was there I was having a chat with my lovely Mum about web design. It was interesting to hear her views on the subject as she is very much a (self-admitted) technophobe who has to use the internet for various parts of her job. She showed me a few sites which she described as ‘annoyingly busy’, it was interesting to see what she thought of as busy I wouldn’t have described as anywhere near.
That brought me back to an almost constant issue I have, at what point does the designer pleasing themselves and the client leave out the most important group – the user. In all the work I do I incorporate extensive user-testing and feedback, I always try to create appropriate websites. Appropriate in so much as every piece of web-design has to be relative to it’s market, there is no point in creating a busy, exciting, colourful, over-the-top, entirely flash-based site for…say…a hospice, it would be inappropriate and not fit for purpose. I have stumbled upon a few sites lately that, in their own right, are nice pieces of design, but in context are cringeworthily inappropriate.
It sometimes strikes me when reading various web design blogs that target audience often seems to be missed when assessing important factors leading to a design. I completely understand the desire to produce designs that are bold and new and exciting, and this may be stating the obvious, but at the start of everything, something that should never be ignored or forgotten is who you are making the site for.

Mid-season stumble

Righty dokie doke, an update, in diary form. I hope to post something of worth later in the week.

Marathon-training has been going especially badly this year, I’ll blame it partly on the snow but I’ve not been getting out and about on a regular enough basis. Although the runs I have been doing have all been 8+ miles I really need to get back into the swing of things, haven’t cycled to work since December…lazy bastard.

I had a brilliantly productive week last week, took time off from work (at Leeds Met) and did my very best to get my house ship-shape again. Luckily my limited flirting with DIY was a resounding success and not a disaster-causing catastrophy.

I also managed to put some serious hours into web work (with my ‘big things and little things’ hat on and as a result have pretty much finished the redesign of the Jane Tomlinson Appeal site (hopefully it will go live this week or next), finished the site for the brilliant Sunshine Bakery (, wrote a preposal for the redesign and development of the Northern Dales Farmers Markets website and have also been working with Run For All on their digital marketing campaign.

If you are, or know anyone, who needs some web work doing then I am undertaking work at reduced rates until the summer to build my personal portfolio. Hopefully I’ll also be doing some work with/for the fab people at Oxygen (

I plan to write a bit of a post on my bread-making experiments (vastly improved thanks to a paving slab) and my plans for foraging. I bet you can’t wait…

Words and Pictures and Work

So as you may or may not I do an occasional podcast ( with a chap called Cameron who also happens to be an exceptionally good illustrator/designer/drawer of ace things (

As you also may or may not know I also do web design outside of the 9-5 (under the title of ‘big things and little things’) and am currently doing Cam a website, I’m also working on a new site for the Jane Tomlinson Appeal (you may remember a mention from an earlier post, but probably not so here it is and a site for my brother who does things like talk about sport (

If anyone else wants a web site doing then drop me a line, i’m an (x)html/css/php chap really.

Oh I am also going to try to keep up my music recommending, today it’s mirador by efterklang from their album ‘parades’ which is bloody lovely, it’s joyful, orchestral, beautiful and generally ace.