Beacon Print is another WordPress website completed recently for an Isle of Wight based company. I seem to be working my way around the Isle of Wight lately, so if you are a small company based on the island, drop me an email! :)

The website uses WordPress as I mentioned, and allows the client to update the pages whenever they need, and they can swap images around and even set them to work in a gallery of fading images if they want more than one per page.

The project went without a hitch, and its looking good!

Thanks to Mandy Sherliker for the design too!

View the site

An updated post to show the new site launched now, its just a quick one with a nice little rotating gallery on the background of the landing page, and a WordPress CMS driving it.

It allows the client to update the content quickly, and with the Portfolio and Current Work utilising the blog functionality of WordPress, so they can quickly add a project, and push it through to the Current Work page to make sure its seen.

Theres iPad and iPhone fiddling gone into this one too using Responsive Design, to allow the pages to resize depending on the size of the screen its being viewed on. You can view this yourself by resizing your desktop window. It was tricky, and not perfect for use on every website, but for this site it works great!

View the holding page

Not a lot of time to talk about this one! I completed this project back in August, but I’ve been so busy with some new HTML5 canvas projects that I havent had a chance to actually get this in the portfolio!

CoStar careers was a fairly lengthy project, working with Casual Films in London, and Wirebox helping out with the back end work, together we pulled a LOT of video, and a lot of javascript together to make a website to showcase the stories of members of staff at CoStar up and down the east coast of America.

View Project

I’m writing this quick blog post (after an all nighter, so forgive the poor writing), to hopefully help out some other poor unsuspecting developer who might be sat there at 5am trying to work in a fix for Internet Explorer, and overflows that wont overflow. There are plenty of bugs for IE, and plenty of posts about them, but I couldn’t find a single one for this issue, so here goes…

I had a shopping cart button in an e-commerce site I am working on, and the button uses the nice little kick up to one side/wrap around effect, like this:

Which, as we can ALL agree, looks flipping great. Now, I have used CSS3 for the drop shadow on the box there, as its the latter part of 2011, and I’m not using gradient images to cater to old cruddy browsers!

The problem is, people still use old cruddy browsers, and IE 8- doesnt support the “box-shadow” property, so, you have to add the following bit of code to get IE7 and 8 (6 too, but who cares) to display a shadow:

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,
	Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,
	Direction=135, Color='#000000');

Thats great, if all you want to do is show a shadow, then you’re laughing, and can call it a night. On the other hand, if your site needs any kind of “overflow: visible” for an element using this shadow filter, then you will see something like the following:

So, I spent hours, applying z-index’s, zooms, position relatives, position absolute, floats, margins, overflows and just about every other trick in the book. And then it hit me. You cant use overflow on any element using the shadow filter!!! (and potentially any other filter for IE too, I am not about to test it to find out…).

So, if you are trying to add a shadow AND overflow to an element, I urge you to give up, and do something like the following work around I implemented:

First, get rid of the filters on the class, and just leave the css for everything else:

.product {
	width: 100px;
	height: 100px;
	overflow: visible;
	position: relative;
	-moz-box-shadow: 0px 0px 4px #000;
	-webkit-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}

and then add an alternative for the IE browsers:

/* for IE7 and below (if you care) */
*+html .product {
	border: 2px solid #ccc;
	border-left: none;
	border-top: none;
}

/* for IE8 */
@media \0screen {
	.product {
		border: 2px solid #ccc;
		border-left: none;
		border-top: none;
	}
}

And you will get something that looks like this:

- a fair alternative I think you’ll agree.

So I am sorry I couldn’t solve this one for you, but its a decent work around to cater for outdated, and frankly sh*t browsers, and I have loaded this article with as many of the (“overflow IE not visible”) keywords as I could think of to search for myself, and I hope it will crop up in some results and perhaps save one of you a few hours of struggling!

I thought I had posted this one a long time ago, but apparently not!

This is a portfolio for Mandy Sherliker and her design work. I’ve been working with Mandy for about a year now, and we’ve completed several web projects together, with Mandy’s design, and my development skills.

We started out developing small sites statically, but more and more we moved into using WordPress, for ease of updating for the clients in the future. So it was a logical choice to use WordPress for Mandy’s site too, with a few tweaks and JQuery niceness to adapt the way the archive works in WordPress, showing only the most recent few, and show/hiding the others.

It was a quick and simple site to put together, and to be honest, it would have been infinitely easier with the new 3.2 release of WordPress, which covers a lot of the elements we needed to work around originally, but we achieved our goal anyway, so happy days!

Check out her site now!

Kings Place in Kings Cross is a performance orginaisation, specialising in Spoken Word, Music, and the Arts.

They approached me late 2010 with an idea to create a micro site to advertise and run along side their 2011 campaign “Mozart Unwrapped” – you may have even see banners advertising this on the underground, with its striking red and black illustration.

This website needed to be somewhere to advertise a bit about what was going on with the project, and to display entries from the public to create their own sounds and music inspired by Mozart.

We decided to build this site in WordPress given the limited budget for the project, and the sound clips are simply sent through tot he team who upload them manually into WordPress, not as integrated as I would have liked, but possible within their budget.

We also worked in galleries and calendars of events, though I think the calendar has been put on the back burner for a while.

The site finally went live this week, a little behind schedule (they are busy guys over at Kings Place!) but it looks great, and is a nice example of a simple design, along with a bit of JQuery, and some social media plugins to create a fun little site!

Check out the site for yourself!

The “Wedding Flash” was the name this project went by, it was hard to give it anything more accurate, as I received a few slides at a time, and it wasn’t until the project was complete that I even knew the whole story!

It was a little hair raising when I was left with just the 9th slide for a week or so (they break up in that slide) and I was a little worried the happy day was never going to come, but then the last few arrived, and the wedding was saved…

View the WHOLE site

Daniel and Cinthia, as the project was really called, was a great little piece to work on in the middle of an annual report season, a jaunty animation of the back story for this couple of newly weds (who aren’t actually married yet I don’t think!).

Using flash and photoshop, I was able to split everything up, and stick with a consistent animation type, a 1 second delayed “bop” basically, so everything moved at the same time, and in the same way throughout all 12 or so slides.
This was mostly because there were often 3 or 4 things moving on a slide, and I really didn’t want 4 different types of motion going on, or it would heave been too messy to focus on!

Anyway, check out the site, view the into, and enjoy the parachuting dogs, and laptops being thrown from windows – and I will get a standalone version of the animation playing on here soon!

View the WHOLE site

This website was designed by Daniel I believe, and I just sliced it all up and animated it!

It’s my pleasure to announce that the new adidas sustainability report has launched!
Working with Salterbaxter, I was the lead developer on this project.

Adidas has been my favourite report of the season, not only because they are a cool brand, but the design and flexibility of the development, along with the great client contact all made the project as a whole fun and easy to work with.

I say easy… it was a LONG process, and there was a wopping 82 pages to populate, with about 6 or 7 different templates to build, including 3 different accordion styles, a carousel (featuring the code of David Moore in that bit), footer scrolling panels for downloads and info, and a pretty fun home page full of animated panels.

It was all done with JQuery, and theres loads of other little bits like custom lightboxes and text enlargement, not to mention Cufon…

UPDATE! (19th July 2011)

The German side to the website launched today! Finally, have a look, you can link to it from the header of the English version, or via this very text.

View the site!

Daniels Accountancy is another WordPress website built in collaboration with designer Mandy Sherliker. It actually went live AGES ago, but I’ve only just got round to updating my portfolio now the annual report season has quietened down a bit.

This is a fairly straight forward wordpress blog, with additional pages for company information, and contact details.

We’ve added some social media links to the template, and as you can see its very clean and minimalist, so its easy to maintain, and should look fresh for a number of years to come.

Theres a few little touches I’ve added to keep it interesting, using the body tag to swap out the profile image in the header on each page, nice and easy, and it introduces everyone to the team. Mandy also came up with Portia the Pig (see below), who lives in the bottom left of the screen and will display a different tip on each page, built using WordPresses Custom Fields, so again, nice and simple to update and maintain for the client.

If you like the look of it, and would like a similar style of site thats quick to build, and easy to maintain, then drop me a line!

Visit the Daniels Accountancy site here!

Annual report season again! I’ve been quiet for the past couple of months, due to the massive workload involved in getting a bunch of annual reports ready in just a couple of months.

This year, as I’ve mentioned, I am working with Salterbaxter, and at the start of the new year, we launched the first website of the season, DMGT.

It was already well under way when I began working on it, as a secondary developer, but I made a decent contribution to the code and content, Javascript and validation, so I thought I would include it here anyway.

3 more websites went to the client for approval this week, so I will (fingers crossed) be able to show them by the end of next week! I played a much bigger role in those, acting as lead developer on all, including some pretty hardcore JQuery!

Check out the DMGT site here

This year I have taken on a role at Salterbaxter in Notting Hill for the Annual Report season. They have loads of great clients, like adidas and Hammerson that I will get to work on for the first time, as well as a few I have worked on before like Anglo American and De Beers, the diamond guys.

I’ve been working along side their team for the past 6 weeks or so, but it is fairly manic with loads of new JQuery functionality I haven’t worked on before, and the introduction of asp.net to my life, so this is the earliest I have been able to get a post together! Come back soon and check out the work as it goes live, theres a project for DMGT thats in the pile to be added this week.

I’ve also, as ever, got several freelance projects that have gone live in the last few months still waiting to hit the site. From Flash desktop learning apps, to websites for Mozart unwrapped, the new Mozart series at Kings Place, all will be here for you to check out really soon!

Check out Salterbaxter’s website!

Super quick post, another hopefully helpful one to fix a bug I have found with SVN (while using Smart SVN on the mac to be specific, but I think the issue is with the repository or the file itself and NOT the software).

While trying to commit, I got the error “SVN EOL* Error” or words to that effect. It basically wont let you commit the file at all.

At first I deleted the file, removed it form the repository, and then pasted the content back in to a totally new HTML file of the same name and uploaded it, which worked fine.

The problem was that the error returned this afternoon, so I had a hunt about for a more permanent (hopefully) solution, and came up with this page:

http://lookfirst.com/2008/11/subversion-inconsistent-line-ending.html

which was mostly b*llocks, but somewhere near the end is a comment from maria with the following helpful advise:

“open your file in notepad ++
go to Edit –> EOL converstion–> UNIX FORMAT or Mac FORMAt
this should solve such problems ”

I actually found that Windows Format was the option I needed, but this essentially saved me pulling my hair out all afternoon. Such a simple tool, why don’t all HTML editors have this option?

After that it committed fine and I’m happy :)

* EOL = End of Line

Hello everyone, this is a little precursor to a future post for some Facebook fan pages I have been working on with Digital Jigsaw.

I ran into some bugs with the FBML (facebook markup language) used to edit the fan pages, and the app thats used to edit the custom tabs you might add, so I thought I would sum up here, and hopefully make it easier for others if you run into the same problems.

Firstly, main problem, iframes! I was asked to insert an iframe to the page that would grab some html from the server, containing a flash file for the users to enter a competition. Theres a lot of info around on various forums which tell you that you can or can’t use iframes, and the FBML version of an iframe, the <fb:iframe> tag… They just don’t work. Save your time, and find another way to get the content in there!

We opted for embedding the swf file directly into the FBML page. It was an immediate improvement, but still had some issues of its own. Here is an example of the code used below:

<fb:swf allowscriptaccess="all" swfbgcolor="ffffff"
swfsrc='http://YOUR_URL'
imgsrc='http://YOUR_IMAGE_URL'
width='510' height='1022'  wmode="window" />

Right, as you can see, there is a mixture of stuff going on up there. Theres single or double quotes, it doesn’t matter which you use, as long as you close with the same type you open with!

Second, the width and height refer to the flash file, NOT the image file. To set the dimensions of the image, add "imgclass='className'" and set the width and height in an external stylesheet.

The background colour is best to set to white I think (as a hex value, without the # sign), as white is the background of the facebook page anyway. You can set your own colour, but you will see a big fat block of colour until your swf loads.

You must also define an image, I’ve read that if you don’t, it puts in a spacer by default, this might be true, but it basically doesn’t work if you don’t define your own image in there (mine was just blank, with no click-through to the swf), so I took a screen shot of the swf, and put that in as a place holder.

The holding image worked fine in Safari and Chrome, but not in Firefox. I wont bore you with the hour of my life spent working out why it doesn’t work in firefox, I’ll just let you know that you need to swap over the imgsrc and the swfsrc, so that the image is defined first. This means the image can load before it has to think about the swf, which makes it actually work in firefox, and it improved performance in Chrome and Safari too, so its alllll good.

Here’s how the final code looked:

<fb:swf allowscriptaccess="all" swfbgcolor="ffffff"
imgsrc='http://YOUR_IMAGE_URL'
swfsrc='http://YOUR_URL'
width='510' height='1022'  wmode="window" />

You can find more information out about FBML setup for embedded flash, in a much more coherent write up on hyperarts.com, but they hadn’t mentioned this bug, so rather than comment on their post, I thought I would write my own!

This tutorial is also pretty handy if you need help setting up the FBML app in the first place.

Hopefully it has helped some of you, please post comments if you have any questions, or even if you just liked reading about FBML… weirdo.

Today I lent a hand to the guys at Birds Eye View, with a few blog alterations, quick fixes and such.

Restricted server access meant we had to use JQuery to solve a few of the issues that would have been simpler if they had full FTP access, but it was a fun lunch break spent coding up some little fixes!

Go over to their site and check out what they are up to, theres loads going on!

My sister Sarah, who goes by the name Star Girl Designs, for some reason, probably to justify all her star tattoos, has recently launched her first online store!

At the moment she’s selling Christmas plush decorations, but with a host of paintings, custom toys and rubber duckies coming soon!

Place your orders now, and if you are a North/Central Londoner, don’t worry about the postage cost, she can deliver for free!

I designed the branding for this, and built the site using the BigCartel.com e-commerce program to power it, quick and easy to use, so if you are looking for a really simple online shop to sell some of your handy crafts, music, tee’s, or anything else, give me a shout and you can be online selling within 24 hours!

You can even incorporate this software into your existing web domain, for seamless website/store integration.

Go buy some stuff!

This week saw the start of a short contract with Digital Jigsaw in Waterloo. I’ll mostly be helping out with sites for clients like Vodafone and others, on existing websites and stuff thats urgently waiting to go live.

I’m still taking freelance roles and jobs so don’t worry, get in touch about those, but I can only work off site for the next few weeks.

If I get to work on anything at Jigsaw that looks good, I’ll add another post to show you :)

Last week I attended the Full Frontal Conference in Brighton, a meeting of Javascript experts, novices, and down right genius’.

It was great to see what is going on in the world of confusing code, and it was the ideal opportunity to catch up with some fellow geeks and meet some new ones.

The highlight for me was Brian Leroux‘s talk on Phone Gap, and native vs. web apps.

I’d already experimented with Phone Gap a little myself for iPhone app development in HTML, but it was good to hear more and see it in action.

I highly recommend it for next year, I might actually make it to the pub afterwards as well next time for the free drinks on Mozilla!

Evie is a documentary director and film maker from Ireland, whos worked with some of the biggest news networks in the world, as well as filming and editing many of her own projects, such as the AltArtist project. She has some great video and photography work, I recommend a look!

Studio Evie is a site I actually built a couple of years ago when I first became a freelancer, it used a Prototype content “slider”, which was really a carousel, that generated a list of links based on title tags on the divs, it wasn’t great, but at the time my JavaScript and JQuery knowledge was such that this is what I could do.

I have recently given the whole site an overhaul, removing about 75% of the JS code and 40% of the HTML, integrating my own JQuery slider of 4 divs, with permanent navigation, and much simpler, cleaner and efficient scripting to control the whole thing.

This new slider code has allowed the page to function in IE6, which was previously not possible with the Prototype system, and IE7 and 8 are looking great as well (shame they don’t work well with the “animate” effect in JQuery though.

It was nice to revisit an old site, see the way my code has changed over time, and how something that confused the heck out of me before is now something I can create from scratch with ease.

As well as completing all the development work, I also designed the site, which was looking good at the time, but I hope that I get the chance to redesign and redevelop this site in the future, I already have several ideas bubbling away for this one!

Check out Studio Evie

I am really happy to be able to display my latest big project carried out with Tag: in London, for Intel Digital, as a HTML5 project using JQuery to essentially produce a micro-site, that was then dropped into the German newspaper Der Spiegel’s iPad app as an ad.

This really was a great opportunity for me, as I have worked on a few smaller iPad projects before, typically taking an existing website and optimising it for the iPad, but this gave me the chance to start from scratch and produce something specifically for the device.

The main advantages of this is that I only had to worry about mobile safari (though I used Firefox for initial development) – as any web developer knows, only having to take into account one browser is a great plus for a project, disregarding the Internet Explorer’s alone can save days worth of development.

I would ordinarily build a site with orientation in mind from the beginning of the project, including that in the stylesheet, so as you turn the device, the page resizes/reworks its layout as appropriate.
In this project however we were specifically asked to deliver 2 separate HTML pages, one for portrait, one for landscape. This is due it seems to the limited nature of the app, its not as technical as say, the Wired magazine app, it is basically a collection of pdf’s that can be swiped through (maybe I can get a video of this in action on here), so they needed the 2 pages, depending on which way round the device is held when you scroll to the ad, it doesn’t re-orientate once you are looking at the ad, which is a real shame I think.

As I assume you don’t have the app, or maybe even an iPad, I’ve mocked up a little fake one for you, so you can have a look for yourself (requires a big monitor for full effect!). Also, please note that its safari optimised, it will work in chrome and Firefox as well, but the video is Safari only, as its in HTML5, and I have just used the:

type="video/mp4"

video type, with no alternatives, luckily we didn’t need them for the app as its Safari only, this was a blessing as we had a 5mb limit for the whole ad (it came in at 4.9mb, 1.3mb of which was the web page, the rest video).

If you’ve had a look at the app with the link above, or at the bottom, and clicked the video, you will see (in Safari) that I originally built an overlay, with the video playing in the middle, which worked like a charm in the dev stage, unfortunately we were essentially coding blind, using mobile Safari as a guide, but with no real way of testing how it would work in the actual app. This meant once it was delivered, and their app didn’t like the HTML5 autoplay (which doesn’t work when a video is loaded, only when its present at page load – which we knew, but there you go) and so last minute the video was reworked in house after I had gone.

This was a slight compromise for me, as I had built in several cool controls, to unload the video on close, reload on launch etc, all of which you can see in the mock up, and so now in the live app, if you navigate away from the video, it keeps playing in the background which I’m not happy about, but I know my original code was spot on so not too disappointed.

Also, another lesson well and truly learned here was that JQuery is basically too heavy for the iPad. Its not as smooth as I would have liked, we didn’t realise they would literally serve a web page in their app, we were under the impression it would be exported and merged into the magazine, as such its a little too jerky for my liking, so in future, pure Javascript is the way forward!

Have a go for yourself!

As well as it being Creative Freestyle’s second birthday, I’m happy to officially declare the brand new portfolio and blog live!

*snips ribbon*

So, the new website has been a very long time coming, for 9 months now I have designed, coded, redesigned, recoded and finally decided on a look and feel for the site – with many variations and studio floored designs along the way, some of which you can see at the bottom of this post.

I am very proud of how it has come along, and although its still in Beta phase (still ironing out those Chrome line height issues Derek!), and has been live for a couple of weeks now, I am happy to call it home for my work and thoughts on design, technology and the web.

There are also many more pieces of previous work being added all the time as I transfer and case study my older work into this site, but its a long process, so please bare with me!

I just want to give a short rundown of the processes behind the site, and the future laid out for it over the next few months.

Firstly, as you can see, this site has introduced a LOT more JQuery and Javascript than my previous attempts, this is mostly due to my increased knowledge of these languages over the past year, with much more of my work leading into these areas, from simple website functionality, such as sliders to hide footers, accordions for content, and the hidden information revealed on hover of the blog posts on the home page of this very site (unless you are on the iPad that is, where hovers aren’t exactly the best idea) all the way up to full blown iPad and iPhone apps, build in HTML5 and JQuery.

I have also tried, where possible to make sure the code I use degrades gracefully – for example, nothing on this website is lost to the user if they don’t have javascript activated. Though a recent survey has found that the UK has on average only 1.3% of users surfing the web with Javascript disabled (thanks @tobestobs for the article), which is reassuring to know!

I have also decided not to support IE6 in any way what so ever with this website, I was considering putting in a lightbox to alert them of their terrible mistake, and that they should update to a newer browser, but I would much rather spend that time making this website better. Its time we took a stand people! :)

The time saved in supporting IE6 allowed me a whole day to delve into the iPad coding of this site – taking the existing HTML and CSS, and making some slight alterations, and with clever use of JQuery, some CSS tricks, and a big dollop of help from the guys (and possibly gals) from cubiq.org and their work on iScroll which allowed my fixed position nav and footer elements to come to life the way I wanted and tackle to viewport vs. page display issues with the iPad. If you have one available, give it a try, its very nice :)

Theres also an iPhone version of the site, though much still needs to be done, and the challenges of fitting all this info into a tiny screen are unfolding before me – I hope also to get android support some time soon, as soon as I have an android phone to test on that is.
(see my previous post for a teaser of the new iPhone app that is under construction, and hopefully launching soon! its not strictly part of the site, but will be a nice sister project to run along side it…)

The site also uses WordPress as a CMS system, this was mostly a time and energy saving exercise, as it makes the whole process of updating and maintaining my website much easier, and allowed me to quickly develop and release this site. This was crucial to me, as its taken me 9 months to get this far, I clearly don’t have the time to be faffing about!

Aside from getting this site off the ground, this last year I have also had the opportunity to work with many more top agencies, from Addison again for the annual reporting season at the beginning of 2010 for the second year running, to The Bio Agency, and Poke London, 2 of my favourite agencies to work with. (When I first set out to be a freelancer I emailed BIO in hope of some work, to no avail, so it was a great turn of events to see myself working with them on sites for Ben 10, and Travelex this year).

Even more exciting are the levels at which my freelance work has taken off, with less agency, and much more direct client work being commissioned, which is a dream come true, and I hope it continues to grow in this way…

Thanks for reading, please comment and let me know what you think of the new site, and sorry for rambling on for so long!

Here are the abandoned designs from earlier in the year, who knows, maybe some will even make it to life in some other form one day:

This one is very old, and as soon as I got this far, I realised it was going to be too much work to chop everything into cubes, and wouldn’t best display my work.

This site was an option that was closer to the structure of version9 of my site, I saw it as a quick way to “re-skin” my existing portfolio, but I had some pretty negative feedback on this one from some designer friends – too stylised was the consensus, and I see that if I followed this street/skate style design, and a client doesn’t like that style, that could have a negative effect on them hiring me!

Another blog style, and one that was in production, fully coded and built in WordPress, but I was too busy to populate it, and by the time I came to work on the site again, I had gone off the design…

A simplified site, with all content hidden, and focus on my photography, which I have since dropped as a major service, so the design was dropped along with it…

this isn’t far from the site that finally launched, with the obvious change of the dark to light theme – there was too much going on here though, so I de-cluttered, but not before this design emerged:

I liked this, but I think I really needed to get it out of my system as a design, before going back to the cleaner design above, lightening the appearance, and structuring it in a much more user friendly way – and thats how we got to where we are today!