YouLoveUs

How to stop pirate sites affecting your Analytics

Spencer Lavery — Tue, 23 Jun 2009 11:01:53 +0000

We recently discovered that not only had someone copied our entire site design and code, they hadn’t even bothered to change the tracking code, so their hits were being counted in our Google Analytics account, which was making a mess of our reports.

The workaround was fairly simple, all we had to do is add a custom ‘include’ filter on the profile settings page within Analytics.

The code you need

Simply add a ‘Custom filter’ with the following settings:

Filter Type	include
Filter Field	hostname
Filter Pattern	yourdomain.com
Case Sensitive	no

Don’t forget to escape the dots in your domain name with a backslash, as this string will be parsed as a Regular Expression by Google, and an un-escaped . character will match any character.

Our scrolling background effect

Spencer Lavery — Tue, 16 Jun 2009 17:40:12 +0000

We’ve had a lot of questions regarding the background effect on our new site – so I thought I’d explain how it works, to save you the trouble of picking through the source code. Feel free to base your own designs on this technique, but don’t just straight up copy our code and images – we’ve spent a good amount of time on this.

If you’re feeling nice give us a mention on your web site/blog/twitter/facebook/bebo/myspace or to your mates down the pub.

How it works

The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.

The images

We’re using four images for the whole effect, but you could make it worth with just the background and header if you wanted.

The CSS

To keep the search engines, screen readers and pre-historic browsers happy we’ve also overlaid all content and headings on the top of the images, and hidden them via CSS.

The JavaScript

The JavaScript is where the real magic happens. We’ve made use of the jQuery library and Alexander Farkas backgroundposition.js script and CSS to help make the background move.

The code below makes the whole thing work. The comments should explain what each section does.

$(function() {// *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through the day we are as a percentage - e.g. 6pm = 75% var hourpercent = hour / 24 * 100; var minutepercent = minute / 60 / 24 * 100; var percentofday = Math.round(hourpercent + minutepercent); // calculate which pixel row to start graphic from based // on how far through the day we are var offset = backgroundheight / 100 * percentofday; // graphic starts at approx 6am, so adjust offset by 1/4 var offset = offset - (backgroundheight / 4); function scrollbackground() {// decrease the offset by 1, or if its less than 1 increase it by // the background height minus 1offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1; // apply the background position $('body').css("background-position", "50% " + offset + "px"); // call self to continue animation setTimeout(function() {scrollbackground(); }, 100 ); }// Start the animation scrollbackground(); }

The really clever bit…

You may have noticed from reading the code above, but if you come and visit us later in the day you’ll see the background position start from a different place. If you visit us at night, you’ll see a night sky, and if you visit us in the morning you’ll see a sunrise!

If you have any comments, questions or improvements to the script – drop us an email or leave a comment here.

Updated 2009-07-30

After a few comments regarding the processor usage under FireFox 3.5 i’ve updated the script to no longer use backgroundposition.js or jQuery’s animate() method – it now simply changes the body’s CSS background-position value by 1 pixel on each loop iteration. CPU usage on an older machine running FireFox 3.5 went from around 65% to 30%. All other browsers still appear not to struggle with it. Feedback welcome!

The new YouLoveUs site launches

Spencer Lavery — Mon, 01 Jun 2009 22:51:02 +0000

After weeks of late nights, Tetley tea, cans of Monster blue and the most phenomenal BLTs this side of New York; we’re overwhelmingly pleased to announce the launch of the new youlove.us web site.

With the previous version garnering so much interest and appreciation we were keen to retain as much of the creativity and quirkiness as possible but for plain and simple business reasons we needed to find a way to incorporate many, many more pages and a much more web-friendly way of navigating the web site.

Just in case you miss it – keep your eye on the headings on the homepage ;) Tutorial for how we built this site is in the pipeline.

For anyone that misses the old version, we’ve put it up at http://youlove.us/one just for you!

Let us know your thoughts in the comments, and do let us know if you notice any bugs (unless they’re IE6-related, as we have decided not to support that 8 year old browser for obvious PNG-related reasons).

Looking after your clients

Spencer Lavery — Tue, 28 Apr 2009 15:25:34 +0000

On Valentine’s Day one of our main print suppliers (rwp) send us this adorable card and the simple brilliance of it struck a chord with me.

Not only did the personal touch pique my interest but in a reasonably subtle way, the card was also advertising their services: On the back of the card they took the opportunity to illustrate just how easily and relatively-cheaply I could have sent similar cards to my own clients by using them to print them for me.

The card went on to explain how they are also able to handle the packaging and distribution of said cards but didn’t at any point feel as though they were only interested in my business. Obviously with a purely business-to-business relationship that is the only concern, but it wasn’t nearly as in-your-face as it can be.

So, not only did this make me feel terrible for not having sent something similar to my own clients, it also got me thinking how I might be able to utilise a double-barreled approach to our own seasonal greetings. Personalised e-cards? Branded t-shirts? Obviously there’s little room for originality when it comes to occasions such as Christmas and Easter but the point is that it got me thinking.

If only I hadn’t received the card too late to order some of my own in time.

The great office move of 2009

Spencer Lavery — Wed, 11 Feb 2009 15:40:25 +0000

We are delighted to announce that we have now taken up residence in our new office in Chichester – the move took place halfway through January, and went off without a hitch!

At the end of 2008, it was becoming evident that where we were, while lovely, was being rapidly outgrown (especially given some of our plans for a “measured” expansion). As luck would have it, the opportunity presented itself for a good few more square feet to become available in the building, and we were only too happy to embrace it.

There’s still a few things to do, such as getting some carefully selected pieces of artwork on the walls, and installing the dreaded (but actually rather useful) whiteboards, but we’re very nearly there now and are hugely grateful for the additional space we now have to work in. We will also be commissioning the production of some “special” finishing touches that we have devised, and can’t wait to see the ideas we have in our minds come to life!

We absolutely adore the bright, airy feel of the main room (there’s also a meeting area that joins on to it), and reckon we’ll be very happy here; it’s almost as if you can tell when something instinctively feels …right!

If you happen to be passing through the area, why not stop by? We can at the very least offer a half-decent coffee – or tea, if that happens to be your poison

Web design internships

Spencer Lavery — Tue, 09 Sep 2008 12:08:38 +0000

We are currently looking into setting up an internship programme early next year, which would take place at our expanding studio in Chichester, West Sussex, UK.

At present, we are conducting a feasibility study on this subject, and would therefore love to hear from anyone who’d be interested in working with a vibrant, dynamic team of Web specialists as an intern. If you think this might be a direction you’d like to explore, then do get in touch and we’ll talk things through!

At this stage, we’d be very happy to hear from those with an interest in front-end design, LAMP development, Flash animation and 3D modelling. We really do feel this might provide successful applicants with experience of working with like-minded, established practitioners, and the opportunity to get an appreciation of life in a busy agency.

Processes and PageRank

Spencer Lavery — Wed, 06 Aug 2008 13:36:19 +0000

When we were developing the youlove.us web site, our decision making was guided by some simple tenets; we wanted to create a presence that would showcase our business in the best possible light, and become a talking point within the wider design community.

As the medium has grown in stature in recent times, the bar has been consistently raised for the graphical presentation of information online by some seriously talented people, and we were looking to become a part of that happy band of individuals (and of course, agencies!).

We figured that if we could hit on that elusive “X-factor” with the front-end, then the rest would follow as regards inbound traffic and the potential clients that might bring.

So we set to it, working around some of the initial ideas we had, in anticipation that the mythical lightbulb would (hopefully) burst into life, and inspiration would take hold and lead us on our merry way.

At the time, we considered methods of getting some movement into the design, though weren’t 100% convinced about going down the Flash route, and thought it might be nice to really have some fun with JavaScript libraries instead. We had seen some great examples of horizontal parallax effects using CSS; Brighton-based ClearLeft’s silverbackapp.com springs to mind here immediately – but thought it might be good to experiment with a vertical approach as a counterpoint.

Simultaneously, we had had been playing about with concepts for our business’ identity, and once we had fleshed out the logo design, we started to cogitate on how it could best be deployed. Spencer had a fantastic cityscape image (of Seattle, WA – we’ve had a fair few enquiries about this since!), acquired from a stock library, that he thought might fit the bill in some way.

Shortly thereafter, we had a meeting with our accountants, to discuss some of the finer points arising from the company formation, and it was here that Spencer announced to us that he’d had a truly Pythagorean “Eureka” moment – couldn’t we use the cityscape in conjunction with a transition between day and night, with a side order of parallax thrown in for good measure? We were pretty excited by this revelation; the lightbulb was now burning bright, and we were ready for the challenges ahead.

As Spencer has already mentioned on this blog, the skies were entirely generated from scratch in our weapon-of-choice, Photoshop, with no third-party source material involved other than the Moon, which was the result of some fiddling with the excellent Lunarcell from those original doyens of the plug-in, Flaming Pear.

The other major decision we made, was to employ JQuery as the architecture that would sit behind the design and make the magic happen.

A by-product of the whole process was the realisation that things weren’t going to pan out in IE6 to our satisfaction, so we made a conscious decision to reduce the site’s level of support for that browser. This is something that has subsequently gained us a fair bit of exposure in the realms of the Blogosphere, and ultimately, there’s no such thing as bad publicity, right?

To cut a long story short, the site went live on the 11th June, 2008 – and almost immediately was picked up by some of the bigger design/CSS showcases, and we started to receive some very favourable feedback from other designers, which of course pleased us no end – thanks guys and gals, we really do appreciate it!

To date, we have had over 30 features, and these have helped start the ball rolling on the traffic front. For the statistics lovers amongst you, we have pushed over 40GB of bandwidth since going live, and served over 75000 page views (not bad for what is essentially a one-page site!).

Perhaps one of the achievements we are most proud of is the fact that we went Google PageRank 6 within 6 weeks of the initial live date – this has knocked our socks off, and should hopefully serve as a salutary example that a considered approach to design can really pay SEO dividends in the long run.

So, where do we go from here? The answer is simple – we will try our hardest to adhere to our Mission Statement; “We will make the Web awesome!” – We’re excited by what we do and by the direction online design is taking, and wouldn’t do this if we weren’t! We hope you’ll tag along for ride …watch this space.

The new YouLoveUs site launches!

Spencer Lavery — Wed, 11 Jun 2008 17:14:53 +0000

We’ve been working ourselves into the ground recently (on top of huge amounts of client work) in order to get this site live, so I haven’t much time left today to write the full write-up I was hoping with regard to this design. I will however elaborate on it tomorrow.

As we’re a new company we wanted a site that will garner attention by itself, so the high-res, full-screen brochures site typical to Flash were the sort of look we were going for, but keen to keep it standards-based we decided not to go the Flash route and do everything we could with CSS and JavaScript.

I’m happy to say that we weren’t particularly limited by either of those technologies. The most limiting factor has been the browsers themselves. IE6 was a conscious write-off. If we ever find a way to get transparent PNGs working properly, completely properly, we’ll revisit it. But for now, choosing not to support a 7 year old, poor excuse for a browser, regardless of its usage, is something of stand for us, and for standards.

There are a few key elements to the design that I will break down further soon, with a full tutorial for each technique:

The background; entirely original, painted in Photoshop. Not one photo used.
The vertical parallax; inspired by ClearLeft’s horizontal parallax, we wanted to take it one step further, and although not CSS-only (which was absolutely impossible) it uses a minimal amount of JS. Check it out when scrolling – the clouds move at a different rate to the sky.
The one-page website; aside from the blog the whole site fits on one page. Not ideal for SEO, but for now, SEO isn’t a deal-breaker for us on this web site.
Completely valid code; advanced CSS3 techniques, clean JS and conditional comments have been used to create an entirely HTML and CSS valid web site.

As I said, I will write up full breakdowns and tutorials soon, but for now, please have a good look around and let us know if you like what you see.

We love Smashing Magazine and all of you!

Spencer Lavery — Sun, 10 Feb 2008 17:09:53 +0000

We each of us have had sites that we’ve created in the past become the subject of a handful of showcase web sites, but none of us have ever experienced, or even witnessed a response as phenomenal as the youlove.us web site has received.

As Alex mentioned earlier, the site made a huge leap from PR0 to PR6 within 6 weeks of launching, and I’m happy to announce that mere months after launching the web site from dust, we have achieved a position in the top 250,000 web sites on Alexa. This is simply unheard of, and we couldn’t have done it without your help, thank you all very much.

The design here at youlove.us has received an incredible amount of accolades and mentions in the last few months, from write-ups on big magazine sites such as Smashing Magazine and Web Designer Wall, to small tweets and tumbles, and we genuinely couldn’t be happier. It seems that each day that we check our referrers we find another few links and showcase features and if ever we needed any encouragement to continue our design mission, this would be all the encouragement we would need.

For me, the mentions on Smashing Magazine and Web Designer Wall were particular high points. Not simply because of the size and popularity of both sites, moreso because they are both web sites that I read and check religiously, relying on as sources of both excellent inspiration and invaluable resources.

As I type this, we are lucky enough to have over 220 people bookmarking our web site on Delicious, a number that is growing by the day. As long as we continue to inspire and encourage fellow members of the design community we can sure that we’re doing something right.

Next to the mentions we have received on various web sites, a particular source of excitement for me came in the form of emails sent to us from visitors to the web site. Some of those emails were so fantastic I feel that I need to share them with you, such as this one from Mikey:

“It is not often, in fact never that I look at a site and feel the need to actually mention how beautiful the site and the experience is, but I had to this time.
I really love what you guys have done here. it is truly a work of art.
nice one.”

And also this great one from James Ball:

“I found your site and it blew me away. It’s simplicity and style are mezmerizing. I had to get in touch and say well done, I hope one day I could produce this level of creativity. Your copy is spot on too.
Keep up the great work lads, well done”

Obviously we can’t publish all of the emails that we’ve received, but those two are a good indication of the general loveliness we’ve experienced. To be receiving emails such as these from other designers has absolutely blown me away, as my typical experience of the web design community has been tarnished with competitiveness and a desire to pick holes. It’s truly refreshing to receive such selfless praise.

As a result I am feeling extremely guilty about having not released anything in the Goodies section as yet, so will be putting some time aside next week to address that. In all honesty – and I’m not complaining – we have simply been too busy with client work thus far, and that is why it has taken me so long to write this entry. Typically you would see a blog entry written about getting one showcase feature, instead, I’m going to list below the (in excess of 70) features/mentions the site has received thus far. Full list of links after the cut!

In no particular order:

So this is just a big, big thank you from all of us here at youlove.us for all of your support throughout what has been a very exciting first season of business.