Journal

Way Too Good Converts To LESS

Sat, 28 Apr 2012 10:44:49 -0700

I finally read enough about how great LESS is - I was having some trouble justifying converting my site to experiment and learn it but then some free time opened up the other day. So I decided to dive in: and I loved it!

The learning curve (if you even want to call it that) was super mellow and once you start rolling you really get an idea of the potential power it affords you. I mean, it might not be saving me too much in file size (though with compression I did reduce my file size a few KB’s) but in the future if I want to make adjustments to my site it’s going to be dead easy with minimal code changes. I really liked the variables and mixins - soooo convenient. I used the free LESS App to compile the code - I didn’t see much use in compiling on the fly, figured it’d only slow down my page load. I’m sure there are some spots that can still use improvement or utilize LESS to a greater degree but for now I’m very happy with the results.

Here is the LESS coded CSS stylesheet un-processed (you can see this in your browser here):

And here’s the LESS CSS compressed (you can see this in your browser here):

Compare that with my old stylesheet and you can see how going forward my CSS is much more manageable now that I’m using LESS (you can see the old stylesheet here).

Way Too Good Goes Responsive

Fri, 30 Mar 2012 11:39:44 -0700

It took me a while to get on board with it but I’ve recently redeveloped my site to be responsive rather than have it’s own mobile version. Even though I’ve garnered some very positive feedback on the old mobile version of my site built with Sencha Touch it was becoming annoying having 2 codebases to adjust whenever I wanted to make changes.

Rethinking my site was enjoyable with limited challenges. I approached the project with a “mobile first” mindset which I think really powers the benefits of responsive design. The first issue I needed to solve was how to make the main text area more manageable on a smaller mobile browser. I decided to break it up and embrace the ability for the User to swipe through the content. I incorporated a timed auto slide to make it more intuitive that there’s more content. Next the navigation needed to be condensed and simplified when viewing on a smaller browser - this was quite easy using CSS media queries and javascript that was triggered only when the browser size was less than 677px wide. After that everything started really falling into place and with very limited specific styles being applied via CSS media queries my site now uses one codebase, is faster loading on mobile browsers, and is much easier to update.

I also made my custom Tumblr theme responsive with very little trouble - you can resize your browser and observe the CSS changes taking place, visit http://waytoogood.ca on your mobile phone & tablet or check out this handy little service: http://responsive.is/waytoogood.ca

EZRANGER

Thu, 29 Mar 2012 16:31:00 -0700

EZRANGER is a webapp I built as a personal project. I hate making time estimates for projects and really can’t believe that we haven’t just accepted and started calling them guesses, because that’s really all we’re doing - guessing. Even though we’re just guessing I’ve set a goal for myself to try and come up with the most accurate estimations I can. I’d become interested in the concept or “range estimation” that I read about on Atomic Spin’s blog. I hated telling clients or accounts people a low estimate that I know they want to hear but I know I can’t deliver on. Consequently I also don’t think it’s fair to quote too high because more often than not the project won’t get approval due to the cost. Range estimation takes this into consideration using a formula based on estimating 2 numbers: a number that could happen if everything goes right and a number that you feel very comfortable with.

I built this app purely with HTML5, CSS3, and javascript. My personal goal was to keep everything on the front end. I enabled it to be web app capable for mobile devices and stored data using local storage with cookies as a fallback. I also used the Bootstrap framework provided by the people at Twitter for styling which made for a quick iteration process.

EZRANGER is fully functional, can be used on your browser or mobile devices and can even be saved to your home-screen and run as a stand alone app. When I have time for iteration 2 I plan on adding a feature to email yourself your final estimate … all in due time.

Check out EZRANGER here: http://ezranger.com

Are we ready?

Mon, 27 Feb 2012 23:15:00 -0800

Did we get bored with MySpace because we’d added all our friends and uploaded all our pictures? Was Facebook really better? Did Twitter reach its tipping point because enough people had heard about it, or were we just bored and ready for something new? Everyone gets bored (especially these days). And when they do, that can often set the stage for the acceptance of a new idea.

It doesn’t matter if it’s a great idea, an amazing app or a useful tool – sometimes we’re just ready for something new. And most of the time what we’re ready for is randomly and unconsciously agreed upon. Success as defined as mass appeal is out of our control. Our only option, as creators, is to make what we want and have fun.

Timing is everything.

There are many reasons why ideas don’t succeed but when society decides to move forward with something it’s hard for one person to inhibit change. Take electricity for example. I’m fairly certain we’re all in agreement that electricity was a useful innovation. Can you picture people listening to Nikola Tesla or Benjamin Franklin and thinking: “Well, that’s great but I’m doing just fine with burning candles and oils.”? I can imagine those people, and that’s my point! Electricity is great, the Internet is great, space travel is great, Facebook is great, Twitter is great, and the list goes on. But for all of these things there are at least 10 times as many amazing ideas that society as a whole hasn’t been ready for (and that number is probably a gross understatement – have you even heard of Freeman Dyson?).

It’s impossible to even speculate what these unappreciated ideas could have been or might still be, but we can be certain that someone, somewhere, is creating something right now that could change the way we view the world. Unfortunately for them, if their timing is off and people aren’t ready to pay attention, their idea will go unnoticed and unrealized.

Who cares if the world isn’t ready?!

It doesn’t matter what your field is, who your clients are, how creative you are or how advanced your concept is. Timing isn’t a limitation, it’s a reality. I’m not saying to forget your ideas, to not execute your creations, or chase your dreams. I’m just saying: spend your time wisely, use your best judgment, and observe those around you.

Whether you work for a company, have a client or work for yourself, you have to realize that while your idea may be great, it’s not up to you whether it succeeds. Once you’ve accepted that you can’t force acceptance you can go one of two ways:

1) Sink into a crushing depression, questioning everything in the world, and stop coming up with ideas, creating and building things.

2) Feel a huge sense of relief that if you believe in your idea, concept or product, then it probably is good. You can continue creating, feel less stress, and then give everyone else a chance to catch up. Refine your idea, manufacture your concept and, most importantly, stay positive. Continue applying yourself to what fulfills you.

The definition of success is different for everyone, but mass appeal is mass appeal. If it happens it happens, if it doesn’t … make the masses understand your concept, or revise it until it’s exactly what society is waiting for.

People may or may not be ready. It’s up to you to continue creating. It’s about making shit. It’s not about waiting until you have the best idea. Or the coolest idea. It’s about experimenting, learning, and then making something new and different. So don’t just sit there – create something whether society is ready for it or not. Then make something else, and something else, and something else.

Blast Radius

Sun, 26 Feb 2012 23:15:00 -0800

Lately I’ve been doing contract Interface Development work for Blast Radius. It’s been very rewarding working with so many talented people and with a company that has processes in place that ensure the success of each project. Simple things like version control, continuous integration servers, daily scrum meetings, weekly iteration plans, weekly code reviews, and knowledgeable people with fresh takes on problems when you’re stuck.

Specifically I was doing coding: HTML5, CSS3 and Javascript (mostly using jQuery). This included both responsive sites as well as specifically formatted and coded mobile versions of promotional sites. I also contributed to solving User Experience and User Interaction problems.

I can’t post or talk too much about the work I’ve done for Blast Radius other than I’d be happy to speak more in depth in person, say - over a coffee?

Summary of Involvement:

Interface Development
Mobile Development
Responsive Development
HTML5
CSS3
jQuery
Interaction and User Experience consultation

TELUS

Fri, 24 Feb 2012 23:15:00 -0800

While working at TAXI I worked on a lot of TELUS’ interactive properties. TELUS sells technology so it creates unique opportunities to use the digital space in fun and original ways.

One specific project I’m proud of was building an Aggregator for an annual national community involvement event. TELUS Day of Giving encourages all TELUS staff (and affiliates) to go into their communities and give back. The goal was to highlight how many people were taking part and how much good they were doing. We came up with the idea to use the hashtag #TDOG (TELUS Day of Giving) and instructed the volunteers to tag their Tweets, Instagram photos, and Flickr pictures with the hashtag.

I built an app using WordPress that pulled in the User generated content sourced using the hashtag #TDOG, stored them in a database (so we could manage and filter when needed) and displayed them chronologically within TELUS’ Facebook page. Each piece of content could be “liked” through Facebook - which would then post the content to the Users Facebook wall, thus spreading the word about what was going on. I also created a custom Google Map showing every event taking place that day to help User find where they could go to take part. We also added a Facebook Commenting module to allow people unable to take part to engage in the conversation.

There were many challenges but after thinking through the concept, User interaction, and design the production went smoothly. On the day of the event TELUS placed a full page ad on the back of The Globe and Mail as well as featured it on their websites and through IAB’s which ensured community engagement.

The final result was extremely successful resulting in over 3500 unique pieces of content being shared, an increase in thousands of likes on TELUS’s Facebook page, and lots of Facebook comments.

Check out the TELUS Day of Giving Aggregator:

Here are a few other things I made for TELUS while working at TAXI:

TELUS Digital Calendar
Miscellaneous TELUS Work

Vancity Bank

Wed, 15 Feb 2012 16:14:00 -0800

I had the pleasure of working with Wasserman + Partners recently, building a calculator app for Vancity Bank. It was a simple little project that I felt extremely comfortable with since I’d just finished making my EZRANGER app.

I especially enjoy building things that will be used by people and thought it was pretty cool to make something for the bank I use. I used jQuery UI for the custom sliders and it was a snap. The calculator is currently being integrated into Vancity’s site. I’ll add some pictures once it’s live.

Summary of Involvement:

Technical Consultation
Interface Development
HTML5
CSS3
jQuery & jQuery UI

TELUS Digital Calendar

Mon, 05 Dec 2011 13:05:00 -0800

This was one of the last projects I worked on while I was at TAXI. TELUS wanted their digital calendar updated to something more modern and looked to us to let them know what that was. We suggested building it in more modern code (the previous one was an AIR app) so that we could observe how Users interacted with it and build on features after learning where to focus our efforts. The end product is a nice simple interface that allows the User to view the calendar, learn a bit about what TELUS is doing in the community, share and like on Facebook, download a desktop wallpaper, and see the weather. The next steps will become clear now that TELUS/TAXI can view the analytics and make informed decisions based on solid data.

My role in the project was digital strategy, digital ideation, technical leadership, UX design, and client presentation meetings.

Expedia Cruise Ship Centers

Sun, 04 Dec 2011 13:05:00 -0800

Expedia Cruise Ship Centers came to TAXI to get their site focused, redesigned, and re-developed. I was part of the team who met with the client to defined requirements, and create estimates for development. I played a lead role on interaction decisions and communicating design decisions to the client. Once the design was signed off I kicked of front end development.

The new design is currently being implemented and should be live early summer 2012. I’m really looking forward to getting some pictures up featuring the great work we did.

Summary of Involvement:

Technical Consultation
Interaction Design
Client Presentations
HTML5/CSS3/jQuery

TAXI

Thu, 17 Nov 2011 13:10:00 -0800

I started at TAXI as a Production Designer but quickly was tasked with more Development and Digital work. TAXI was my first experience at a national advertising agency - it was quite different from the start-ups and small businesses that I had worked at prior. It’s awesome that the advertising industry creates new ways to use technology to solve problems for the agencies clients.

Here are some links to the work I did there:

TELUS Day of Giving
Anti-Bullying Flashmob
Live Tweet The Vancouver Opera
TAXI Office Tour
TELUS Digital Calendar
Kraft Dinner Smart
TAXI Office Locator
Is It Great App
Miscellaneous TELUS Work

For more information about my time at TAXI check out my resume.

intermission*

Thu, 17 Nov 2011 13:09:00 -0800

intermission* design was a digitally focused company I ran for a year with a business partner. It was extremely challenging and equally rewarding. I’ve always thrived in scenarios where I had to push myself past my comfort zone. At intermission* we never said “no” and once decisions had been made it was up to us to execute and produce.

Our company website embodied our philosophy - we built this site in 2009, which in internet years is AGES ago! I’m still proud of the work, it was meant to feel like a web app and this was before the App Store existed. At the time of building the first iPhone was being embraced and I was thrilled to build a mobile version that focused on the device. The entire site is a single WordPress codebase that recognizes mobile browsers and serves up a unique experience with orientation based navigation and tactile interactions.

intermission* is no longer operating but you can check out the video:

And the site is here: http://intermissiondesign.com for more information on my role and duties at intermission* check out my resume

Summary of Involvement:

Business Development
Client Relations
Creating Quotes & Estimates
Creating Requirements, Creative Brief, Information Architecture, and Wireframe documents
Concepts, Creative, Ideas
Design & Development
Mobile Development
Billing and Resource Management

Pacwebco

Thu, 17 Nov 2011 13:04:00 -0800

I worked at Pacwebco as a hybrid Creative/Technical Director. One of the the things I quickly learned while running my own digital shop was that getting the jobs in the door and doing the work took 2 different kinds of people. Tommy Humphreys did a great job of getting the work in the door and I took it from there.

The website we built for the company was meant to embody our desire for legibility, boldness, and simplicity. Christy Nyiri designed it and did an awesome job. We built the site using WordPress and I implemented swipe navigation for mobile devices.

For more information about my role at Pacwebco check out my resume.

Summary of Involvement:

Met with clients to understand needs.
Create unique solutions that solved needs of our clients.
Oversee creative and communication with Art Director
Established version control systems.
High-level development primarily using WordPress
Mobile Development
Quality control

TAXI Locator

Wed, 16 Nov 2011 17:33:00 -0800

In my spare time at TAXI one day I created a web-based mobile app that would use the geolocation feature in your iPhone to locate where you are then give you the choice to find directions to the TAXI office of your choosing.

It was just a fun little project that you can play with on your iPhone and iPad here. (It sort of works in Google Chrome so if you’re too lazy to open it on your phone you can check it out in your browser - the formatting will be off though!)

Is It Great Checklist

Wed, 16 Nov 2011 16:48:16 -0800

This was a quick concept I came up with a while ago - I thought it’d be cool to get some general questions to help refine idea generation. Ideally it’d be a bunch of unique questions, sort of like The Gauntlet in American Gladiators … but for ideas.

I made this prototype as a web-based app that will work on an iPad, iPhone and desktop browser. The next step in the project would be adding more pertinent questions and then a result screen for when the idea is considered solid by the app … but obvs I haven’t found time for that. You can check out the progress here.

Mall of America

Wed, 16 Nov 2011 16:13:00 -0800

The Mall of America project was solely for mobile browsers - specifically focusing on iPhones. It was great working with Visualade who are based in Los Angeles. Working in the digital space is awesome because it doesn’t matter where you are - just what you can do.

I really enjoyed working on this web-based app, the design was well thought, the team was great, and the focus was on utility. I collaborated on the later stages of User interaction and did interface development.

Since we were focusing on iOS we were able to use cool modern features such as SVG for the maps feature, very exciting.

Check out an overview here:

Or go to http://mallofamerica.com on your mobile device.

Summary of Involvement:

Technical Consultation
User Experience
Mobile Development
Interface Development
HTML5/CSS3/jQuery

Kraft Dinner Smart

Wed, 16 Nov 2011 13:51:00 -0800

While working at TAXI I did the font-end development for a new section of the Kraft Dinner site that featured a new product called KD Smart. You can click the image to go check it out.

The fun part of this project was making multiple Facebook “likes” possible on a single page. The concept was for Users to vote on which type of picky eater their child is and this would be tallied via Facebook “likes”. I had it all working and but due to some complications with the frameworks being used the Facebook “liking” feature is still being ironed out.

TAXI Office Tour

Wed, 16 Nov 2011 13:37:00 -0800

We made a quick video (and I mean ultra quick, like we were briefed, came up with the concept and had the final product finished in exactly 5 days quick!) for a new business pitch.

Matt Bielby, Anne Shortall, and I worked on the concept. Matt and I planned it out and art directed/oversaw the shoot and edit which Benny from Don’t Sleep Productions took care of.

Anti-Bullying Flashmob

Wed, 16 Nov 2011 13:20:00 -0800

OK, OK, OK - I know the whole Flashmob thing was played out pretty hard and pretty fast but I still wanted to document this one I helped out on.

Anti-Bullying Day is an internationally recognized cause. Many American celebrities are advocates (Ellen Degeneres being a huge supporter).

David Lloyd George Elementary & Churchill Secondary organized a dance to perform as a flash mob at Oakridge Center Mall. The vice-principal reached out in hopes of getting help to produce it. TAXI donated time and resources and we had 5 cameras and a full team (including a Skyreach crane for the great overhead view).

These flash mob videos have a purposefully “home-made” quality yet have great editing. We used hand-held HD cameras (3 stationary and 2 roaming) to capture the event.

The video was uploaded to YouTube March 24th, 2011 and to date has received 660,778 views, 4,318 YouTube likes, 661 Comments, been featured The Ellen Degeneres show, been on Perez Hilton’s website check it out, been featured in the Vancouver Sun check it out - safe to say, it went viral.

Live Tweet Vancouver Opera

Wed, 16 Nov 2011 13:14:00 -0800

While I was working at TAXI, The Vancouver Opera asked for a volunteer to live tweet the final dress rehearsal of the opera La Traviata. Having a background in music composition and a love for unique uses for social media I obviously jumped at this opportunity!

Instagram is a unique application that has a ton of traction with iPhone Users. I created an account for the Vancouver Opera and used it to post the photos - Instagram then has an option to automatically create a tweet about the new content. A great way to maximize the reach of your social media efforts.

Miscellaneous TELUS work.

Wed, 16 Nov 2011 13:10:00 -0800

This is an example of the quarterly updates I did while at TAXI on the TELUS Facebook Page. The motion graphic work was done by Chad Jones.

This is one of the mastheads we made for the TELUS homepage. We’d also change these quarterly depending on the new messaging and creative. Chad Jones did the motion graphics on this one as well.