Engage Interactive Blog

It’s been a while since we’ve posted anything over in the labs as we’ve just been so busy making new websites and winning awards that we haven’t had time to don our trusty white coats and googles and start messing about!

All that changes today with a quick look into Websockets with Javascript in Google Chrome (Sorry to all you designers out there – this one’s for the techy guys!)

Websockets are a part of the HTML 5 specification but have only so far been included in the latest version of Chrome (and more recently the nightly build of Firefox). To whet your appetite into what we think will be a significant new addition to a web developers toolbox – we’ve built a simple visualisation tool using Google maps.

In essence our little demo geocodes an address / town/ postcode and pushes the resulting longitude and latitude via a logfile and web socket to a Google map page, where we lay a marker in real time. We’ve also managed to use Node.js in our demo to which is also worth having a look at.

To learn more go ahead and have a look at the post and let us know what you think in the comments section below.

Some of you may have noticed that we launched the brand new site for Giraffe last week, but it’s never ‘truly’ launched until it’s been blogged about! So consider it official and stuff from this point onwards. Whoop whoop etc.

What they said…

“I can honestly say I have not enjoyed working with an agency as much as I have with Engage Interactive. Their approach, strategy and development of our new website has been fantastic. We all absolutely love the new website and are proud to have received so many compliments both from customers and other business leaders who are all really impressed with it.”

Juliette Joffe, Founder & Director, Giraffe

Now we’re pretty proud of this one as it’s the result of a lot of researching, thinking, planning and re-thinking to make sure we got it spot on (who said web design was easy?!) and early signs would indicate it’s paid off, with the launch having created a fair bit of internet buzz already.

Aside from the usual lovingly crafted code and graphics – the site’s also got some neat little touches in there if you take the time to explore a bit – with even more planned in the coming months. Behind the scenes, everything is ticking along nicely on our very own Engage CMS allowing the Giraffe team to completely control pretty much every aspect of the site from menu items though to new openings.

I’ll leave you to explore the site yourselves, though if you’re short on time (which is pretty much everyone at this time of year) when not let me point you in the direction of some of our favourite bits…

Hybrid search drop down

Finding your nearest restaurant has never been so easy (or accurate!) with our completely bespoke location finder. Built using jQuery and a lot of clever stuff, it allows visitors to simply choose a restaurant from a dropdown OR should you not have a clue where you are you can type in any street address, place name or even a landmark such as ‘Harrods’ or ‘Big Ben’ to find your closest location. This is especially useful in London  where many Giraffe visitors are tourists or day trippers who navigate simply via attractions rather than postcodes or areas.

Fully interactive menus

Strangely, many restaurant websites don’t really make a feature of the actual food and it’s hard enough for even the most technical of us to start salivating over PDF menu downloads.  So, determined to  give your taste buds a little treat we developed fully interactive menus which are completely browsable and come complete with an array of beautifully shot food images and featured dishes. You can see them for yourself by clicking here – but be warned – you’re going to get hungry!

…and then there’s still the shop, contact form, hug club and the homepage social media to mention!

We really hope you like browsing the site as much as we enjoyed building it. If you have any thoughts, comments, ridiculous Giraffe related puns or just suggestions – why not share them with us in the comments below? Thanks!

The site we lovingly built for STRADA was recently short-listed in the Annual Caterersearch awards. We proceeded to cross our fingers, toes and eyes in the hope that it might be fortunate enough to win – and we’ve just heard that it bloomin’ went and did! Not only winning it’s category, but more awesomely the overall ‘website of the year’ award, where it was up against all 30 other entries!

Italian restaurant chain STRADA has become the big winner in this year’s Caterersearch.com Web Awards, picking up the title of Website of the Year.

Judges praised Strada’s website for its “slick and professional look”. “It delivers all the information I would be looking for when trying to decide where to eat,” one judge said.

It obviously great to be on the receiving end of something like this, and it’s testament to the hard work the team have put into both this project -  and all our others over the past 12 months. I’d also like to say thanks to everyone who voted for us too – much appreciated!

Time to go and celebrate with Bacon sarnies all round now I think (we’re easily pleased over here!) I’m also in the middle of writing another blog post, so you may even get treated to two in one day – think of it as an early Christmas present!

Site launches are about to start coming thick and fast over the next couple of weeks, so I thought I’d just take a few minutes out to tell you about the latest one for the guys over at Soundzones.

Soundzones.com specialises in selling Sonos products – high end multi room sound systems.  They came to us with a brief to create the best Sonos reseller site out there, including all the standard eCommerce functionality you’d expect but wrapped around a very clean and contemporary design. A long spec list and a tight deadline meant our usual approach of a bespoke solution didn’t really fit and whilst we’ve never been especially keen on using ‘off the shelf’ packages before (as they tend to restrict creativity and functionality, and force the business to work around the system rather than with it)  there’s a relatively new kid on the block, in the form of Magento, an open source eCommerce platform which we’ve been keen to get to grips with for a while now.

Magento offers a huge amount of flexibility and expandability compared to every other platform we have seen.  It does have a few specific requirements of its own, especially in terms of hosting speed, but it has a lot of the built in eCommerce functionality such as cross selling products, user reviews, discount coupons etc, so you can get up and running quickly and concentrate more of the available budget on design rather than reinventing the wheel.

That’s not to say the system suits everyone though.  By definition, the platform has to appeal to the widest possible audience, and the back end administration reflects this.  There’s a lot of learning to be done by the client to use an admin area that is very much ‘designed by developers’.  This is an area we pride ourselves on here, putting the same level of care and thought into the Content Management System so its as intuitive to use for the client as the front end of the site is for the customer.

It also starts to lose its speed of development as soon as any form of customising needs to take place.  As a developer you’re effectively learning a whole new platform, and the level of abstraction means there’s quite a steep learning curve, so what might be a couple of hours work on your own bespoke system turns into a few days of hair pulling and googling to find out how to make it work in Magento.

So in summary, we’re very impressed with what the system can do, and it definitely warrants consideration for clients that want a standard eCommerce site with a lot of advanced functionality, and are happy to get to grips with a technical administration area. The further the clients requirements fall outside of the built in functionality then a bespoke solution starts to become the favoured choice, which does mean its important to not only consider the launch requirements, but also look further down the line so there are no big shocks 6 months later when the clients wants something that the system just cant really cope with without a huge amount of development work.

Back to the launch, the Soundzones site has already started taking sales and the client is delighted with the results. We’d include a testimonial, but they’ve gone on holiday to Barbados so business must be good!

Creating sites which survive the test of time can be a tricky affair. Firstly, you need to avoid the temptation to jump on the current design trend bandwagon, as despite pink graffiti looking ‘real dope’ today, it’s going to look ‘real crappy’ a year down the line. Then you have all your CSS, JS, and (x)HTML amongst others to consider  – Web technologies can move at a frightening pace and there’s always something on the horizon to do the same job better, and use less code doing it.

I’d imagine most of you reading this have client sites that they’d love to be able to re-visit, ripping out box model hacks, adding a few bits of nice CSS3, replacing  sIFR with Cufon (any thoughts?) or maybe even moving the whole site onto a development framework such as Codeigniter? The hurdle that you’ll inevitably face though is that if you’re not changing the design itself (which to your credit may have stood the test of time and still look great) it’s hard to convince the client that investing in everything bar the ‘tip of the iceberg’ is just as important as the design itself.

So what are the benefits to the client? Well, the big one is  reduced time (and cost) for ongoing maintenance and development work. Some people will argue that reduced development time is a bad thing, as it means less hours invoiced and less money in the bank for iPods and Threadless tees. We’d then ask would you rather spend twice as long doing some pretty mundane updates to a site, or get them done nice and quickly (impressing the client with your responsiveness!) and then spend the time saved pitching some fantastic new ideas to them and working on those? We think it’s a no brainer, and our experience has indeed shown that exploring new ideas can often result in acquiring larger budgets down the line anyway.

Also, if you’re like me, then just knowing that a site isn`t using the latest jQuery point release or that your Google Analytics code is being repeated on every page rather than in a nice a global include will niggle you like you have mild OCD!

Thankfully, we’re fortunate to have clients who listen to our advice, and when we pitched a refresh of the Cafe Rouge site, which is close to celebrating it’s 4th Birthday, they were completely on board. The result is a site which runs faster, uses less bandwidth and is more usable and thus easier to navigate – vastly improving the visitor experience . Their ongoing development work has reduced and we’ve got some exciting new projects underway for them as a result.  Now if that wasn`t a worthwhile investment I don’t know what is!

If you’re in a similar position, what are your experiences? Are refreshes something you actively pitch, or something which you’d like to address but haven`t quite worked out the best way to do it? I’d be interested to hear your thoughts. In the meatime, I’m off to refresh myself with a pint. Good day to you all.

What makes a great ‘find my nearest’ feature on a website? We all use them but they’re often inaccurate, clunky and very unintuitive. We wanted to make something that was quick, robust and above all very usable. So after much pontificating and scouring of the web we think we’ve come up with a pretty good one for the 70 strong restaurant group STRADA.

So how does it work? Well for those technically minded amongst you we use Ajax and geocode the user input. Once we have the geocode information we get a list of all the STRADA restaurants and compare them, creating an ordered list of locations each complete with precise distance from the location entered. All this is done with Javascript for speed end efficiency.

“So what, there are loads of these” we hear you cry! Well that is perhaps true but ours also include searching by place name, postcode or even landmark which means all of the following work just fine.

• Leeds
• York
• The Metro Center
• HG2 8ER
• London Bridge
• Riverside Stadium

So go ahead and give it a try. We’d love to hear your feedback and why not post links to your favourite ‘find my nearest’ features below?

We’ve been a little light on blog posts over the last few weeks, not because we’ve been sat here lazing around and playing Xbox – in fact quite the opposite, we’ve been crazily busy with all kinds of interesting work. Rather than blog about everything separately, I thought I’d use this momentary lull in proceedings to provide a quick digest of the last few weeks…

We popped along to FOWD Leeds

The future? Perhaps not

For those not familiar with the acronym, FOWD stands for ‘The Future Of Web Design’ and the Leeds leg formed part of a UK wide tour of conferences run by the guys over at Carsonified. The day was a good chance to mix with a whole range of people from the industry and listen to presentations on various aspects of the web. We weren’t necessarily sure that it dealt with the Future of web design particularly, but it was a good day out nonetheless and gave us a chance to catch up with a few familiar faces. If anyone’s reading this and also went – what did you think? Let us know in the comments.

Work started on an exciting new project

We were chuffed to hear we’d been appointed as the new digital agency for the restaurant chain Giraffe after impressing them with the work we had been doing for STRADA. Since winning the account we’ve been busy working on some great new designs and features that we’ll be rolling out as part of a brand new online and marketing strategy.

We can’t give too much more away at this stage, but keep an eye on the RSS or Twitter for updates over the next few weeks.

Our Arc Karaoke microsite launched

Livin' on a prayer!

As if students didn`t have enough fun already, our friends over at Arc Inspirations have just installed some brand spanking new karaoke booths for people to murder practically every popular song ever written.

They asked us to create them an engaging little microsite to promote the new offering, which is exactly what we did for them and we even threw in a nice bit of Javascript goodness for good measure too.

You can see the finished site right here.

We did some spring cleaning

As many of you will know, updating your own site can often get overlooked in favour of client work and going to the pub.

Even so, we thought it was about time to add Will and Neil to the team page, update a few pieces of work and amend the homepage layout slightly.

Under the hood everything’s been given a good spray of WD40 so it all slides and scrolls that little bit smoother. We hope you like the changes, despite them being small. I guess we’ll be due a redesign soon, but I’m blocking that out of my mind at the moment!

Dave got swine flu

Squeal Piggy!

Quick, call in the paramedics and order the Tami Flu! Yes, Dave managed to get Swine Flu. He says he picked it up from the kids – but we think he spent too much time worrying piglets down at the local farm. Either way, he’s off work at the moment recovering so if you want to send him presents and chocolates just address them to me and I’ll make sure he gets them…promise!

“Another labs post, only a week after the last one?” we hear you cry! We just have so many useless awesome ideas that we want to share with you, that’s all!

When we build websites, we like to make them load as quick as possible. To this end, we use something called navigation matrix’s. Simply put; this is when use one image with all the buttons and shift that image around for the different states. It works a treat, but it does take a while to set up. Calculating background positions, widths and heights isn’t a quick process and when the client wants to change Home to Homepage after you’re all finished it just makes us love them even more.

This is where the Nav-o-Matic comes in! Using some clever Javascript (and a bit of flash) you can now upload your image, lay down some guides (just like in Photoshop), click ‘Apply’ and you’re done! The Nav-o-Matic will supply you with all the code you’ll need. Just stick it in your page and you’re done.

There are a few things to remember though before you dive in. Firstly, this is not for the rubbish browsers. If you use Firefox, Safari or Chrome you’ll be fine, but anything else (Internet Explorer) and you’ll struggle. There is a simple solution to that though…

Second, this is version 1. There is a lot more functionality planned, but for now, there is only support for 2 states: Normal and hover (hover also acts as the active/on state). As long as your image looks something like this though you’ll do fine. Support for more states is coming soon however there is no harm in uploading your navigation anyway. It will still work out all the widths and horizontal background positions for you which is the main bit.

And lastly, no vertical navigation (yet) I’m afraid. You’ll just have to do it the long way for now.

Anyway, enough reading, head over to the labs page and give it a go yourself. We’d really appreciate any feedback you have so leave us a message on the blog or Tweet about it!

For a little challenge the other day we decided to see how closely we could re-create the iPhone’s toggle switches on the web. Into the labs we went, and the result was a brand new plugin!

Using just one image, some simple CSS, almost no HTML and a compact bit of Javascript (3kb) we’ve forged this little plugin to replace those boring checkboxes and radio buttons with something far more fancy looking!

With the help of jQuery this plugin will replace any checkbox or radio element you want with this sliding alternative.

Head over to the labs page for an in depth explanation and links to download the files, including a PSD template. Questions or examples of iToggle in action? let us know below!

For the third time this year we’re featured in .NET magazine. This time we’ve been talking about our experiences with APIs. If you’re interested in reading the full article it starts on page 40 of the August edition of .NET magazine.

Web based APIs open up the functionality and data of other applications for anyone to use. Leveraging this functionality from established sources around the web presents the opportunity to enrich the functionality of a website and being able to offer feature X or feature Y from within your app, without having to reinvent the wheel and do it yourself. A simple yet powerful example is the Google maps API. Used all over the world to convey everything from simple ‘how to find us’ and ‘directions’ to complex route planning and real time geocoded data display, this API is a great example of how your application can really benefit from tapping into an API. The maps API gives access to what is a complex tool (it utilises satellites, hundreds of cameras, a massive index of places and names and complex maths/algorithms) which if it didn’t exist – would mean most current users would not have a solution like they do now and would have to consider writing their own. Which lets face it is not a possibility for most people.

However APIs are increasingly aiding in more than just adding bits of functionality to a site and are being used to provide the very infrastructure that that sites are running on. The Amazon Web Services suite is a great example. Not only can you store all your sites assets (S3) and data (SimpleDB) you can through the use of an API, add more computing power (EC2) to your application that might be struggling under a load of traffic.

The most enjoyable APIs to use are the ones that let you get the most done with the smallest amount of effort! Its nice to have a lot of the work already done for you with some of the common functionality wrapped up in an API call rather than have to make 10 calls to get out what you need. A well designed API is one that knows what the developer will want and puts it right there in front of them and also be accompanied by good documentation.

Most sites normally will offer some type of API these days. Recently we’ve been working with Mailchimp (emarketing suite) and Google Analytics (web traffic stats) to provide some in depth reporting tools from right inside our CMS product dashboard which means its all there in one place. We can also pick and choose what and how we display it which is a major benefit. You can get some highly customised and useful data from both of these two.

There are obviously problems and drawbacks with API’s with one difficulty being that they are all different and therefore each that you work with requires some learning. There are basically three types of API architecture: RESTful, XML based and RESTful/XML hybrids – but there are no rules how each of these are implemented and APIs of the same architectures are often implemented differently. From a design point of view – once you give you cant take away. For example you might think its a good idea in V1 of your API to include access to all user data. But by the time you get to V1.3 you really don’t want them to have it anymore. Tough !

Being heavily reliant on someone else’s software can have its downsides and sometimes the services we are accessing are down. There are basically two things we can do. The first is to display an error page explaining the service is currently down (it should never just be broken) and the second (if its just data you are relying on and not some clever functionality like Google maps) is to copy the data locally so in the event of a problem you can just switch your data source from API to local database until the API comes back.

Please leave us a comment if you have anything to add.