A little lesson in thinking differently.

You should probably download the Sweet Talk app now! It will have co-workers saying "you're such a weirdo".

 

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.

The future?
Project Glass

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/

I proudly present to you, D.A.R.Y.L., 1985's crowning achievement. A gargantuan $7,800,000 at the box office and a low-budget masterpiece. Did I mention Data-Analyzing Robot Youth Lifeform? Best acronym ever. Google it, I dare you.

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 came across this article a few weeks ago and I am still in wonderment at the accuracy and relevancy of it over 100 years later. Inventor and electrical engineer Nikola Tesla made the following predictions in 1909 about the invention of mobile devices (see: iPhone, Blackberry). If this astounds you – and you're into the ideas of tomorrow – then perhaps you should read about the World Expo currently taking place in Shanghai, or poke around at PopSci for awhile and see what news you can find. Our industry is forever evolving, and the achievements in technology which are happening all around us are opening up new opportunities (as well as creating many new challenges) for graphic design everyday.

With the recent release of Adobe Creative Suite 5, I'm sure there are many designers who may be sharing Tyler's sentiment. (Just to clarify for those of you who are new to our blog, or unfamiliar with our sense of humour, when we're not being sarcastic we're seriously exaggerating the truth.)

For the nerds in all of us; The Wand Company has released a remote control wand. Yes, that's right, you can now magically control your TV with a flick (or swoosh) of the wrist. Once purchased, your wand will arrive to you in a (faux) dragon hide box for you to display proudly on your coffee table/mantle/stack of Harry Potter books. Awesome!