To get in the habit of blogging more, I'm going to share some tips I use to develop better performing websites. This might be a little technical for the average person but anyone who has dabbled in HTML and CSS recently should be able to follow along just fine. Today I am going to cover CSS sprites—a simple way to consolidate template images to reduce requests to the server. They are used by the biggest websites and I first learned about them 2 years ago by studying Facebook's HTML code with Firebug. I tend to take frequently used images such as the logo, icons, ribbons and shapes, and I lay them out in Photoshop in one image using a grid. My grid is usually made up of 5px squares with 25 or 50px divisions. I have a CSS class, usually titled .main_sprite, that contains my sprite as a background image and other classes for each image on the sprite such as .logo. My logo class would contain my normal rules, such as the width and height of the element and also the position of the logo image on the sprite. I simultaneously write the CSS code as I create the sprite so that I can lock down the co-ordinates. Here is an example:

.main_sprite{background-image:url('sprite.png');background-repeat:no-repeat;}
.logo{width:200px;height:100px;display:block;background-position:-100px -50px;}

In the HTML, I would create my logo like this:
<a href="index.php" class="main_sprite logo"></a>

That's all there is to it! You now have one large image that you might be using in place of 20 different images, but the server isn't opening and processing 20 different connections. You also have the benefit of more effective browser image caching as the image was loaded via CSS which leads to all around gains.

I'm sure everyone, or most of you have heard about the ridiculously expensive bar tab the Boston Bruins racked up after they won the Stanley Cup this year. But, if you didn't, well, here's a little infographic for you to help you get a better idea of just how $156,000 could be spent on drinks in a single night. All I'm saying is, I wish I was the server that night because, good god that tip would have been amazing. I also can't resist pointing out the very disappointing amount of Bud Lights drank that night. Bud light guys, really? Come on.

By the end of this decade, the core technologies that make-up the internet as we know it today will be radically improved. The changes are already occurring. With the Chrome, Safari, and Firefox 4 (due Q1 2011) browsers, you can already check out some of the newest features, such as web media (audio/video) that doesn't require buggy plug-ins like Flash, the canvas tag that can draw pictures dynamically, web sockets that allow the site to communicate with the server in real time, and browser-side databases that act like cookies on steroids. These are only a few of the upcoming changes to the HTML specification, and the main result will be a rich-internet of websites that operate like desktop software. CSS, the language that styles websites today, will also be getting a major revamp with the release of CSS3. These improvements will also bring about snappier, faster websites with techniques such as the ability to draw gradients on load (with a couple lines of text), weening web developers off using images to accomplish the task. Any graphics will also be able to tap your computer's graphics card, further improving the performance and function of websites. For those who insist on hanging onto Internet Explorer (IE), version 9 will also support many HTML5 and CSS3 features, although it will only run on Windows Vista and 7. IE9 is due this fall. If you want to check out some of these awesome features (in a compatible browser–and keep in mind the HTML5 spec is still a working draft), check out http://html5demos.com/

Heeeeere's Johnny! Well, Jon Hendricks to be more exact. CTV News was in the haus earlier today talking QR Codes with yours truly. "QR what now?" you ask? QR codes are those little computery looking pictures you see on some ads and packaging that, when scanned by your smart phone, reveal all sorts of magical digitized surprises in the form of special offers, videos, and whatever other nuggets some marketing superstar comes up with. "Wait Callum, I still don't get it. Tell me more." Well, for example, in Sheps Hair Transplant Clinic's most recent promotion, clients can get instant gratification by scanning the QR code found on ads around town which will lead them to a mobile site. The mobile site offers a $500 coupon and a 2011 digital desktop calendar featuring more of the pin-up girls we've all grown to know and love. If you're a little prudish, you may want to stay away from the calendar as there are some slightly more racy ads included that we couldn't put in advertisements. However, if you're one of those guys who wishes they could have Sheps pin-up girls to look at all year round, then wish granted. Just scan the code at the bottom of this post with your smartphone/iphone/blackberry etc. You won't be disappointed.



As an aside, if you STILL don't know what the H-E-double hockey sticks I'm talking about, go to the app store on your iPhone and search for ScanLife. Then use it to scan the code above. Blackberry guys, well, there should be a scanner on your phone already. If not, you should be able to do the same thing as the iPhone. Good luck.

I'm not sure how I haven't heard of this project before (it started 5 years ago), but it's blowing my mind. I'm a big fan of Joseph Gordon-Levitt and his project hitRECord.org has to be his coolest so far. HitRECord is a professional open collaborative production company where anyone can create and develop art and media via the HitRECord site–videos, writing, photography, music, anything goes. Check out the demo reel below, I think you'll be inspired.

While perusing the aisle at the local liquor store this past weekend I stopped dead in my tracks at this excellently packaged Dark Rum. This bottle literally had my name all over it. I am a Dark Rum drinker and a fan/collector of unique glass bottles and jars. The label uses a pen and ink style illustration and a varied type palette prominently featuring Neutraface, which combine to form an elegant tongue-in-cheek design. In a rare instance of getting completely sold by a product's packaging, I marched immediately to the till, pulled out my plastic gold and sealed the fate of my night to come. Suffice to say, I was not disappointed. Upon further research I now realize this particular brand of rum has a highly imaginative story, featured on it's one-of-a-kind website. Full of motion graphics and witty dialogue you have to see it to appreciate it. Furthermore, it has been featured on Lovely Package and is but one of many bottle and label designs from a company called Stranger & Stranger. Now, if this studio doesn't have one of the greatest client bases I could ever imagine, then call me Kraken.

We first rebranded cityplace around 8 or 9 years ago. Since then, we've produced untold numbers of campaigns, promotions, ads, and even a jingle (which we should actually post here sometime, as it is a sweet little ditty.)  The latest and greatest project we've done for cityplace has been the re-launch of their new site cityplacewinnipeg.com. It's a simple, straightforward look at what cityplace has to offer. Click on over and give your eyeballs a treat.

Wonderwall Inc. is an interior design firm established by Masamichi Katayama. They have a diverse portfolio including retail spaces, restaurants and bars. Their website functionality is completely new to my eyes, and their smooth functionality is more than impressive. Take a test drive and see for yourself.

While surfing Uniqlo's amazing site I couldn't help but notice that if there were ever a live-action movie made about 7up, and if in said movie they needed to cast Fido Dido, that I've found their man. I'm pretty sure Fido agrees.