So. Congrats to the team! A job well jobbed!

I came across this cool program IOGraph last week that turns your mouse movements into a work of art. I let the program run for most of the day on Monday and it came out with this visual representation of my day in front of the screen. There are a few too many large blobs where my mouse was left idle but I blame that making the tea and coffee.

Based in Maidstone, in a Manor House overlooking the river Medway, we strive to put the love back into the creative process – developing ideas that work through the line for a varied mix of clients and getting shortlisted for and winning recognition awards for our efforts.

Clients include Vichy, L’Oreal, On Demand Group, InPlace, Sony Ericsson among others… ah look around the blog…

We are looking for talented individuals who are top of their game, who want the ownership of a project, who want to prove what they are capable of…

So if you are bored of being over managed, bored of banging out a million banners for a single client, bored of being told what to do by an excel sheet each day and have something to prove in this industry of ours then apply to:

work@welove72.com.

Snr Developer:

Developer superstar geek wanted with a few years agency experience under their belt. Has seen dotCOM or Campaigns from start to finish and loves the challenge. Can AS3 the ass off Kylie, HTML like a loon and AJAX it with the best of them. ASP.NET is a bonus and PHP, Python are bonuses. A love of code… A talent who understand the importance of pixel perfectness in a build, Who can suggest, direct and manage a build, making it his own. Someone who is proud of creating beautiful code. Manage a team if need be or work solo. Someone who can communicate up and down the line.

Must be a visionary while being able to actually DO the job! If you are the one and are looking to step it up then apply now.

Snr Digital Designer:

Snr Digital Designer with agency experience with a good spread of work (dotCOM and Campaigns). Someone who can understand a brief, with good business acumen, concept and generate ideas which push the boundaries. An individual who knows when a design is perfectly balanced and right for the market, understand the interaction, see the animation and speak about everything with authority. And can own a project right start to finish and manage a team. Be accountable and responsible for the growth and expertise of themselves, the agency and others.

Super skills apply! Do you have the minerals… apply now.

Niki comes with 6 years project management background. Working both client and agency side. So she has a good understanding of the pressures and politics that both environments.

And she wears funny slippers around the office!!

Working with On Demand Group and Du we have created a multi-lingual flash site which outlines the service offered through an engaging interface illustrating the true virtues of VoD.

We Love developed a front end which integrates into On Demand Group’s powerful content management service to deliver and promote an ever changing content portfolio.

Enjoy >>

The Media Hub incorporates a drag and drop dashboard of predefined and customisable RSS and Twitter feeds; an Article repository where ‘white papers’ and academic publications are available for upload and download by all members; and an Advice column that all users are able to participate in.

The Media Hub dynamically feeds back into the Facebook page, allowing instant updates on all articles uploaded – keeping the ‘tribe’ up to the minute with the latest industry breakthroughs and reports.

And all of it completely free. The aim of the hub is to empower the user base, to give something back rather than to force information upon them.

The hub will be developed as the tribe expands, reacting to needs and to user feedback. It’s going to be an exciting journey, and it all starts here.

Elastic thumbnail navigation

CSS3 Analogue Clock

Auto Scrolling Starfield

OK so a little bit of fun. What about some real practical site usage? Image gallery? Navigation?
Polaroid Image Gallery

Ultra cool gallery

You don’t have to rely on Flash or another RIA to produce some cool features to your site. Some of these examples still require JavaScript.

Currently sites using CSS3 can only be viewed correctly in a webkit browser (Chrome or Safari). Here at We Love, we are keeping our eyes on this exciting alternative to RIA being available on other browsers. Until then, here are a couple of the examples that really have the awe factor

Space (Graphics intensive, but really cool)

3D Classic picture

It has been super busy here at We Love… what with the Sony Ericsson 3GSM site going live and a few others to launch oh so very soon… (not forgetting to catch up on the PR of other work that has already launched / been delivered… but that is for another time…)

What this little digital gossip / heads up is all about is that we are now on the hunt for some new talent to join us at the manor… specifically a digital Snr Designer and a Snr Developer with the skillz to blow us away.

You must have agency experience and a few years under your belt, and know how it all works… You must illustrate creativity (no matter how ‘dull’ the project was)… Have sweet business acumen and most excellent people and management skills. Worked for some sweet brands, be at award winning level – top of your game – and have the energy and get up and go to really drive We Love forward.

Got what it takes? Then email CV, URLs to work@welove72.com

ta ta for now pips!

So you’ve designed a fantastic site that everyone loves, don’t make people wait to see it. We’ve come up with this quick fire checklist, which is the first of what will be a series of posts on optimization for the web, to make sure you’re doing all you can to improve your users browsing experience.

1. Check your performance
2. Enable Gzip
3. Reduce HTTP Requests
4. Use Image Sprites
5. Consider AJAX
6. Clean-up Your Code
7. Image compression, what’s best?
8. Google is your friend
9. Nginx – the smart choice
10. Content Delivery Networks

1. Check your performance

There are some great tools available to help monitor the performance of your web pages/sites:

• YSlow! Add-on for Firefox
• Safari 4.0 built in resource pane

The above tools (just two of many) provide information relating to page, image, DOM, Javascript and CSS loading times, as well as info on HTTP header requests. My preference is with YSlow! purely because it goes that little bit further in to highlighting performance issues and giving you great tips and advice on how to resolve problems, it delves far deeper into the world of optimization than this overview checklist

2. Enable Gzip

Enabling gzip compression reduces the file size of content being served to the browser by up to 70%, which makes downloading websites much, much quicker.
Check out betterxplained.com for more information on how to enable gzip on your web server.

3. Reduce HTTP Requests

In short, an HTTP request is your browser requesting content from the web server. Only so many requests can be made simultaneously and each request takes time.

For each individual item being requested e.g. an image, CSS or Javascript file, a new HTTP request must be made. Reducing the number of HTTP requests can dramatically increase the performance of your site. You can easily reduce the number of requests made by consolidating all of your external Javascript documents in to a single Javascript file, and likewise the same with your style sheets, merging them in to a single external CSS file.

4. Use Image Sprites

Following on a similar note from the last point, a great way to reduce HTTP requests is to use image sprites.

An image sprite is a grouping of multiple images in a single file.

Google provide a great example of this, combining all of their global dot com navigational elements in a single image file. Doing this ensures that all users who have internet caching enabled on their browsers will only need to download the file once. Using image sprites will also ensure there is no delay when using image swapping methods for rollover states of links and image drivers.

There are a whole host of websites that offer a service to make sprite generation easier, but the best one that I’ve come across is the Spritegen over at Website-performance.org.

For a more detailed explanation of how you can use image sprites, visit this neat tutorial at css-tricks.com.

5. Consider AJAX

Using AJAX negates the need for users to load entire new pages when submitting forms or loading new content.

For more info and some great tutorials on using AJAX on your sites, check out posts tagged with Javascript on Smashing Magazine.

6. Clean-up Your Code

Make sure you use standards compliant XHTML and CSS for your design and build. Remove all unnecessary mark up – including comment tags and any white space. Make sure that your Javascript files are developed sensibly – with reusable functions & classes and that your code has been minified.

Condense your CSS files, by using shorthand and don’t be afraid to use multiple selectors where applicable to reduce duplication of rules.

7. Image compression, what’s best?

Image compression is something that is often overlooked when producing web sites; there are so many different compression options and file types that it can be a bit perplexing. For photos it is best to use JPEG format, saved out between 60-80% quality from Photoshop, Gimp or other photo editing package. For logos, navigational items and other small decorative elements, save as PNG24.

If you are really keen to reduce file size, for example you are designing a mobile specific site, saving as a GIF and hand selecting the colours included when the file is saved can be beneficial.

Finally, make sure you output the images at the size you wish for them to be displayed on your page. Simply changing the dimensions in HTML will not reduce file size, and generally when this is done, the image tends to look awful. Read up on image compression at webreference.com

8. Google is your friend

Let Google host jQuery for you. Why? Simple – if you dive in to your cache folder, you will most likely notice multiple copies of the same jQuery version that have been stored from visiting numerous different sites that all require it to function. While you can’t even begin to start guessing the sites that may have already stored jQuery on a person’s computer, you can almost guarantee that they have visited Google.

By using the following code to reference jQuery on Google’s server, you will more than likely negate the need for the user to download yet another copy of jQuery as it will have already been cached from the Google domain.

Read up on Google’s AJAX Libraries API

For a further explanation of why you should let Google host jQuery for you visit encosia.com

9. Nginx – the smart choice

Nginx is a high performance web server specifically designed with speed in mind.

If you experience high volumes of traffic and have full control of your hosting solutions, then it may well be worth your while switching from Apache to Nginx.

“Apache is like Microsoft Word, it has a million options but you only need six. Nginx does those six things, and it does five of them 50 times faster than Apache.” – Chris Lea

For a technical comparison of Nginx vs Apache check out this article by Joe, at Joe’s Blog.

10. Content Delivery Networks

Last but not least, if you are experiencing high volumes of international traffic, Content Delivery Networks are the way forward. CDNs are used to distribute content from numerous different servers at once, based on the connecting clients geographic location and server load. CDNs are typically implemented to reduce connection ‘bottle necking’ on any one specific server. Thus providing optimal conditions for file serving and content delivery.

Check out Wikipedia’s page on content delivery networks for more information and links to free and commercial CDN services.

This isn’t an exhaustive list, and if you have any tips of your own, then we would love to hear them. Check back soon for my next post on how to optimize your Flash files.