We have had the pleasure of launching the Paperbird Productions website. Paperbird is a film company, set up in 2009 by Rachel Carter and writer, director and production designer Anna Louise Shelton. We designed a beautifully simple website which lets the work speak for itself. 

This project was the first time we properly implemented WordPress custom post types to give the client a very easy and useable way to add and manage projects on the site. We also included lots of subtle CSS3 elements and gave lots of love to the small details.

View the site at paperbirdproductions.co.uk

Substrakt have recently released a fair few new websites which boast active blogs. For example the Brightspace run blogs Project Platform and Creative Careers, which has just launched, which will have plenty of regular posts. While it is great that sites are getting some love from regular updates, over time the quality of the blog might slip as more and more things are added to it. 

Embedding stuff ¶

Most sites now allow you to embed some sort of media or another, but unfortunately most of this embedded content is not so elegantly styled. For example if you embed a YouTube video onto your blog by default it will be sized at 480 pixels wide. This is fine but it looks pretty ugly to have a box of this size embedded on your site if the rest of your blog content is a different width. Joined with Flickr galleries which default at 500 pixels wide and 600 pixels high. This is pretty big and if your blog layout isn't that wide then its going to break something. 

Freshen Up ¶

So how do we make sure our blogs stay beautiful and look fresh as time goes by? Don't let your standards slip. When you get a brand new website you want to fill it with awesome content and make sure it looks as slick as possible. Just because your site matures a bit and has a lot more content than when it was launched, doesn't mean you need to let it get into a state of disrepair. Get into the habit of resizing your images to fit. Obviously sometimes some media just wont be the same width as your blog and theres nothing you can do about it, but more often than not you can customise embedded content to fit.

If you are embedding content from YouTube, Vimeo or Flickr, look out for something like this: 

<object width="480" height="385">

It is usually in the first line of the embed code. WordPress 3 now has an auto embed function, for security reasons, and to make things easier for the end user. When you paste a YouTube link into your post content, it is automatically converted into a video player on the site. If you look in the media settings tab you can change the size of any media which is auto generated. 

Details are important ¶

Paying attention to these small details makes a huge amount of difference, and can be the difference between a tight professional looking website and casual blog, so give your blog some love and don't neglect it after a couple months. 

My favourite way of keeping things challenging is by making everything into a game and competing with myself. As I get better at what I am doing, I have to make these challenges more difficult, which only makes succeeding all the more satisfying. In short I sometimes set myself seemingly impossible goals. Then I split these down into smaller tasks to make them more manageable, but try not to loose sight of the big picture. I set a bunch of tasks in the awesome iPhone app Epic Win and set about ticking them off. 

Read more books ¶

On the 1st January this year I decided I wanted to read more. I guess this is a resolution plenty of people make. I want to read more, I want to go to the gym more, I want to eat healthier. These are perfectly acceptable goals, but they are too broad. Its hard to challenge yourself and motivate yourself to do complete a vague goal. What is "more"? If you never go to the gym at all, more could only be once a week. This is fine, but its hardly pushing yourself to achieve something impressive. So I took my vague, wishy-washy resolution and refined it, deciding that I would read 52 books this year. To refine that some more thats one book a week. 

This was a far cry from the 6 or 7 books I read last year, and it seemed pretty daunting, but as soon as I got into a routine of reading every day I found that I was easily reading a book a week. I have now read 41 books this year, so I am close to finishing this challenge. I have trained myself to never miss a deadline and I never do.

Efficient markup ¶

This has also crossed into my work life. I am constantly trying to build sites faster and better than I did previously. Each site I build I try to employ some new techniques that I haven't used before and finish the work quicker than before without losing any of the quality of the work. The feeling of achievement I get every time I complete one of my goals is awesome and it really keeps my moral up. 

Quick wins ¶

My point is, set yourself big scary unlikely goals. Its a big cliche to say so, but aim high. Punch above your weight. Set a challenge then break it down into smaller ones. The 'quick wins' of completing these smaller tasks will keep you motivated and without even noticing it you might have achieved something epic!

Several of the sites we have built and maintain have Flash maps embedded within them, and occasionally these maps need updating. The Willowbrook Shopping Centre map in particular is frequently updated as businesses join or leave the centre. The trouble is, opening an old Flash file and spending half an hour remembering how to edit the thing is not the most efficient way of updating something as small a link or removing a store from the map.

With this in mind and an update due to the website I decided it was time to recreate the Flash map in HTML and CSS. Of course, armed with HTML5 and CSS3 this would be quite a pain free task, but supporting IE6 and 7, I was not so fortunate. The main bulk of the map was easy enough to build up as the elements were square and easily placed using absolute position, but a section of diagonally placed elements, and some strange corner shapes meant that I couldn't set anchors without overlapping other links.

Desperate to not have to resort to Dreamweaver's useless image mapping tool, I found a really useful (albeit ugly) website for image mapping, image-maps.com. While this website is totally stripped back in terms of design, it does exactly what it says it does; maps links to images. And it does it well, and really easily. Just upload your image, plot the points by clicking on the image, and save out the code.

This solution saved me a shedload of time trying to manually plot the image maps, and also meant that I could create a tidy pure HTML and CSS interactive map that is fully functional on the dreaded Internet Explorer browsers!

The moral of the story is, sometimes the old tricks are still a perfectly valid way of solving a problem. If it wasn't for the dated image mapping method I wouldn't have been able to fix this problem. Oh also, don't judge a book by its cover. Really ugly website, but saved my skin!

Last week I got the chance to be involved in a new and really exciting Substrakt project. After seeing some awesome designs by Ryan I started to write some template code. This will later be used by our developers to implement some very tidy tech wizardry.

The process of translating a design into code is the norm to me as I spend most of my working day realising the brilliant work that our design team does, but much of my work is in WordPress, which means building on existing themes and frameworks. It really felt great to be able to build flat HTML templates from scratch on this new project, and I'm really enjoying writing each and every line of code myself.

Being a fan of super clean and elegant code (I'm somewhat obsessive over indentation and the general condition of code; if someone else cant jump onto one of my projects and find their way around the code easily, its not good enough), it is refreshing to have total control from the start and write everything in my own style. It has also been nice to work with the 960 grid during this project. On WordPress jobs I use a Substrakt modified version of the Blueprint grid system called Redprint, but am now considering refactoring our default WordPress theme to use the 960 Grid.

Hopefully we'll get more chances to work on completely bespoke projects so that we can write more really awesome code from scratch, because I love it!

I have recently been working on a project which relies heavily on news feeds from other websites to provide much of its content. I set about visiting each of the sites on an extensive resource list to gather the required RSS feeds and was surprised at the vast amount of websites which have no trace of a feed at all. This may be forgiven if the website was a small personal project or very light on frequently updated content, but many of these sites were official government funded websites, very frequently updated.

It would appear that instead of producing usable tidy websites, a different approach is taken towards the government website. Huge amounts of content are put online just because "they should be online". No thought is put into how the content is written or displayed upon the page, it is just dumped online and left. As far as the government are concerned the content is on the web and they have kept up their end of the freedom of information act. The content is there, but I dare you to try and find it.

Yesterday an article was posted on the cabinet office website (It has an RSS feed!) stating that The Minister for the Cabinet Office, Francis Maude, has pledged to axe hundreds of the unnecessary expensive government websites and tighten up the way the remaining websites are run and managed. This is definately a step in the right direction but lets hope they use the money they will save to repair some of the broken websites that so desperately need some attention.

A report published today by the Central Office for Information (COI) found that across government £94 million has been spent on the construction and set up and running costs of just 46 websites and £32 million on staff costs for those sites in 2009-10.

It seems odd that many of these websites are promoting social networking features, linking to Facebook and Twitter accounts to try and keep things fresh, but falling short when it comes to allowing people to actually consume this content in any way. It is frustrating that the user experience on most of these sites does not seem to have been considered at all during the design stages. Please, give us an RSS feed! Let us read the content we want to read, quickly and easily without having to navigate the labyrinth of a government website.

While we wait for this, why not subscribe to our RSS feed!

We uploaded a website for The Social Investment Business on Wednesday. This project was led by Futurebuilders, a great client whose website redesign was completed by us a few weeks ago. The Social Investment Business website needed turning around in less than a month, including design, content development, site build and testing ready for the launch event yesterday.

This site has more features to come including the expansion of a blog / resource section and the integration of social media including image feeds from Flickr and video feeds from Vimeo.