Blog

Resurva Joins PBA

Look what we got in the mail today :)

It’s official! We’re a member of the Professional Beauty Association (PBA). We’re very excited to bring Resurva to an abundance of beauty professionals. Looking forward to connecting with you all at conferences and online.

 

VegConnect.com + PunkConnect.com Move to Offshoot

It’s official, starting somewhere in early 2012, Offshoot will be taking the development reins of both the VegConnect and PunkConnect systems.

Both systems have been connecting like minded people for almost a decade and are now ready to move to a more stable, frequently updated system.

We’re really excited about this and all the new functionality we will bringing to both communities so stay tuned for updates on progress.

- Neil

Getting Column Height 100% with CSS

height:100% … Why won’t it work?

The CSS height property is a tricky one. height:100% should, by definition, make a box 100% the height of its parent. This works, yes, but only when the parent has a fixed height. So, if the parent has a defined height of 100px, its child, at height:100%, will also have a height of 100px.

The issue comes when we are dealing with dynamic content, where the height is dependent on the amount of content loaded.

Sub Content
Justin is the Main Content
Sub Content

When dealing with multiple column layouts, there is usually one column that defines the height of the parent container. The traditional approach to making both sub content columns stretch to be the height of the main content column would be the Faux Columns method. Using tables (as table cells automatically take full height of the table row) is also an option, but that throws any developments in Web Standards out the window.

I have stumbled upon a better way, using the CSS property: position.

Using absolute / relative positioning has many hidden and useful secrets. Most of the position power lies in the idea that you are decoupling content from the natural flow.

By default, setting an element to position:absolute and then defining its top, bottom, left or right values will position said element to the pixel value from the top, bottom, left or right, relative to the top left corner of the body element. When you set a parent container to position:relative, however, absolutely positioned elements will be positioned relatively (appropriately named) to the parent container’s top left corner.

Now, it makes sense to position something top:30px, right:30px or bottom:30px, left:30px. But what happens if you add bottom and top values?

Sub Content
Justin is still the Main Content
Sub Content

And there you have it. When you use both the top and bottom values together, the top of the child element is positioned to the top of the parent element and the bottom of the child gets linked to the bottom of the parent, giving not only the appearance but the functionality of full column heights.

There are a few things you have to remember though. Do not set the main content column (the parent height “definer”) to absolute positioning. This will collapse the parent container. We need this element as our anchor, so to speak. You will also notice that once you set both sub content columns to absolute positioning, the main content column will lie snug against the left side of the parent container. To solve this, give the main content column a left margin that will be the same value of your left column width (or the sum of the widths of any columns that precede the main content column). Finally, this may not be the best solution if you have a layout with three columns of changing, scrolling content, as the heights are all dependent on the one column. It’s pretty much optimized for a situation like a blog, where one column usually dominates in height.

The good stuff:

.main {
position:relative;
margin-left:20%;
}

.sub {
position:absolute;
top:0;
bottom:0;
width:20%;
}

.sub.left {
left:0;
}

.sub.right {
right:0;
}

Browser Check

I haven’t tested this extensively but it works fine in: Mozilla, Webkit and IE 7+. It doesn’t work in IE6, but do we really care? If you do, the Faux Columns technique is a good fall back for any old, out of date browsers. Please let me know your results in Opera or any other obscure browser.

Editor’s Note: No Justins were harmed in the creation of this post.

We’ll miss you Steve.

<\3

CFS Ontario Take It Over Game

Well done, takes me back to my youth, music and all – check it out here

F/A-18 Pilot’s Highlight Reel makes me want to change Careers

Planes to me are like bacon to dogs. If I hear one in the sky it’s impossible for me not to look up. My favourite day of the year at the office is the day that the performers at the Canadian International Air Show practice over Lake Ontario. The first plane I hear on the Friday morning pass over and I’m on my way to the lake (usually half running while looking into the air).

The video above has the most amazing in cockpit footage I’ve ever seen. Tip: watching in full screen really gives you a sensation of flying.

Bonus: Watch his friend turn on the after burners at 1:40 and try to not to drop your jaw.

F/A-18 Highlight Reel

Hat tip: Jalopnik

Cities are beautiful in Time Lapse (especially LA)

Watch this beautiful video by Colin Rich, open it in full screen and bask in the amazingness that is Los Angeles at night.

Rockin the Empire Strikes Back T

If you know James then you know his die hard love for all things Star Wars and F1 & Indy racing. So it was no surprise he was caught by Macleans Magazine representing both at Toronto’s Honda Indy this past weekend.

To check out the rest of the photos on the Macleans site click here

 

Family Bonding

When I tell people I work with my two older brothers I usually get a “Are you serious?” followed by a “I could never work with my siblings.”

When you think of family businesses you think of Chapman’s Ice Cream or Carlo’s Bake Shop – companies that have been in business for generations NOT companies that only started within the last decade.

Working as siblings is one of the key ingredients that makes Offshoot work. There’s a certain level of unspoken trust and respect between us and a similar thought that together we will succeed.

Our family mindset doesn’t just work with my 2 older brothers and I but it carries over to the other Offshoot Employees and ultimately to our clients. I’m finding more and more that when clients meet us for the first time and find out we’re a family there’s an added sense of confidence and trust that they immediately feel. Something you necessarily wouldn’t find with a company composed of suits and cubicles.

Don’t get me wrong, it isn’t always “sunshine and rainbows” with the 3 of us. There are days when we just simply disagree with each other and there are times when a family dinner at our parent’s house turns into a business meeting, but that’s what makes us unique. And that’s what makes us authentic. We’re not afraid to push each other to excel or tell it like it is with each other. To me, this dynamic helps the business as our clients are consistently getting our best each and every time.

I don’t know why family businesses appear to be a dying breed. I’ve heard some people say that they could never work with a family member as they just simply would butt heads all the time. But isn’t that the point? Don’t you want to work with people who challenge you and push you to succeed not with people who just agree with everything you say? Some of our best ideas have come from disagreements.

The proof is in the pudding…or rather our products and our success stories. Together as a family (including our non-related Offshoot peeps too) we have built Offshoot into a leading web developer. We’re not ones to gloat or showboat our accomplishments but running a company as a family is definitely something that differentiates us from our competitors – and in an over saturated web world it’s our authentic family values that contributes to us developing long lasting relationships with our clients.

10 years ago, my brother James started this company with the vision of making it a leader in the web world. I don’t know if he originally included our brother and I in his plan but I’m glad Offshoot gets to expand and conquer the web world with 3 siblings and an extended family at its helm.

Many marketing professionals encourage companies to find their authentic selves and to market what makes them unique – for us, we’re a family that gets stuff done. What’s yours?

Tweeting Tuesdays with @BlueJays

Yesterday the office went to see the Toronto Blue Jays vs the NY Yankees. Attending a Jays game has become a yearly venture for Team Offshoot and one that we thoroughly enjoy. The cheers of the crowds, the smell of popcorn and the hometown pride are all part of the thrill of the game. One new thing at the game that caught my eye was Tweeting Tuesdays (#TweetingTuesdays for all you Twitter folks.) Operating through the new Social Media Club House, Tweeting Tuesdays looked like fun, but could it actually work and be a different way of engagement than their usual forms of marketing?

I’ve always thoroughly enjoyed the Jays TV marketing and advertising. I chuckle when I think of the ad from a few years ago with Vernon Wells playing hide and seek, or the one where Lyle Overby throws a bouquet at a bride. Each year they seem to do a great job on the television and print side of connecting and engaging with the fans that love the sport but could this new venture of interacting with their audience in a different way actually help to increase Blue Jays awareness?

I have to admit, I was a little skeptical about how effective the Tweeting Tuesdays would be. I mean, what can you really tweet about during a baseball game? I checked it out on the Social Media Club House and it didn’t really give any thorough explanation except for the mentions that there was prizes for people who tweeted and used the hashtag of day. For those of you who don’t know what a hashtag is (I literally just learned about it a couple weeks ago) it’s when you see # in front of a phrase or word and that allows users to search all the tweets on that topic.

Anyways, a few hours before the game started the Blue Jays announced that the hashtag of the game was #Beastmode so I started tweeting from the Offshoot account (@teamoffshoot) and before I knew it, the office was having conversations with fellow tweeters and even the Blue Jays (@Bluejays) about the upcoming game. So far, Tweeting Tuesdays seemed to be generating some great buzz.

During the game, fans were asked questions and encouraged to tweet their answers to enter contests for prizing. These contests and questions ranged from picking songs for the DJ to play to becoming the official tweeter of the game. Even fans that were not at the game were able to get in on the action by tweeting a pic of what they’re sitting in while watching the game.

This morning @Bluejays was tweeting that they had 4,479 mentions of #beastmode and that it became the number one trending topic in Canada last night. That’s nearly 4500 times that #Beastmode and the Blue Jays were mentioned. Where else are you going to be able to get that kind of reach within a few hours?

Think about it, each of those #Beastmode messages were tweeted or retweeted to a different set of followers that were perhaps not even thinking about the game but just so happened to be checking twitter at the time of when a message featuring #Beastmode pops up. All of sudden they see it and wonder what it’s all about. Without paying a fortune for TV advertising/production costs the Toronto Blue Jays reached a platform that probably would have been missed had they not done this. They also were able to make the fans feel like they were a part of the game. It’ll be interesting to see how sales and Blue Jays awareness picks up over the rest of the season.

Kudos to you, Blue Jays. You did it, and you did it well. Now if only you could get TFC to follow suit.

Here are some of images we tweeted last night.

Whoops! Someone forgot the sticker

Now that's talent

Looking good crowd

And just for fun, because I love these, here are some classic Blue Jays TV ads.