A long time coming to the portfolio this one – SimplySonos.co.uk was a big part of 2011 for me, designing, building, redesigning (they updated their product range and style!) and re-building the site using HTML5  and CSS3 techniques.

This project was very involved, and we had to optimise everything for the iPad, as well as making sure it was usable in IE7, and totally compatible in IE8 – not such a hard task, until you try rounding corners without images or CSS3 – quite a lot of javascript and a few plugins later, we achieved our goal! I also used a lot of JQuery to add carousels and tweak content for different screen sizes and devices, something I would probably rely on media queries for in the future, but it allowed us to target specific iPad issues and apply a fix there and then.

We employed a mixture of WordPress for the information pages of this website, and Actinic for the shopping cart functionality. With my familiarity of WordPress this allowed me to quickly build up a set of pages for the client to start playing with, and the once templated and styled, the bulk of the work on this project focused on the build and upgrade of an Actinic store. For this we joined forces with Greenberry Media, Actinic experts just north of London, without whom we could never have finished the project. Legends.

At this stage, my design role was complete, so I began front end development and project management on the Actinic environment, with Simon at GreenBerry handling the back end code.

We were upgrading the original store from Actinic7 to Actinic10 with this website, which brought with it a host of compatibility errors and things you would never think of, like IE specific issues, the likes of which I had never seen in 8 years of front end development – Actinic certainly brings its own issues to the party.

Just to cap off the nightmare of compatibility issues, we then had to upgrade from v10 to v11 in the final weeks of development, but with a few late nights, we got there, and the site looks amazing I think.

We learnt a lot on this project, certainly enough to quote realistically on the next one, and with our vast list of solved compatibility issues, we will be in a position to work through and develop our next store in half the time I’m sure.

I hadn’t project managed a website build for a while until I started work on this, as a go between from client to back end developer, budget, content migration and managing my own design and front end work, it was actually quite fun – you never know, maybe my next contract will be a front end one!

Go buy a Sonos System!

Allen & Overy. This site was a straightforward upgrade of the previous years, with a twist! This time round we had to make sure it worked on not only the iPhone, iPad and Android, but also the dreaded Blackberry!

Blackberry’s are tough to code for. Understatement of the century. Give me IE6 bugs ANY day of the week. Given the vast array of OS versions around and screen sizes available, thrown in to that were touch screens and “nipple” controls (are they called that? they should be!) so there is an awful lot to consider. We were able to target several types of Blackberry with Javascript device detection, and from there were were able to get a nice happy medium of what would work – did you know that OS v4.* won’t even load images??? not easy to get around I can assure you!

A couple of weeks later, and several cans of Redbull, we were able to launch and its a nice looking site! There are things I would change if I were able to, breaking the page into more than just a single index page for example (we were able to achieve a much cleaner look with Hammerson by just adding features to the home page and then linking away to view the rest, this could have worked well here), but its nice! and works really well on the iPad which is great.

This project was carried out during my time at Salterbaxter in summer 2011.

Launch the project

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