Limewheel Creative

Making Limewheel Responsive

Thu, 02 Aug 2012 00:00:00 GMT

It has been 3 months working here and I am really enjoying it so far. On my second week working for Limewheel, Danny told me that I would be revamping the front-end code of the LW site to make it responsive. I was very excited when he told me that. I knew it was going to be a challenging project, but I have already created a few responsive websites, and I thoroughly enjoyed it.

The process

The first step was to prepare the layouts. I got the PSD files for the old site (based on 960 grid) and used them to create new responsive layouts for each page. I set grids at 320px, 480xpx, 768px, 1024px, and min 1200 px in Photoshop. I created layouts for each blocks at all grids.

I used the Twitter Bootstrap framework to build the responsive LW site. Why did I choose Twitter Bootstrap out of all frameworks? It's very flexible, easy to use, and makes for rapid development. There's great documentation on it. It supports a fluid grid system. A fluid grid is more flexible, and allows the user to resize the site on a desktop computer, but it requires a lot of CSS fine tuning to make sure that the layout doesn’t get messed up.

Bootstrap has a great foundation that saved me a lot of time. Also, there are good media queries in Bootstrap. I will definitely use it again for my next RWD (responsive web design) project (hint… flavour of Lemon).

There were some challenges while building the responsive LW site. The main challenge was that some of the jQuery plugins were not responsive friendly. I spent a fair amount of time trying to make these plugins responsive friendly, but after a couple of hours I found it was a waste of time and energy. So I found a sweet responsive slider plug in to replace it.

I used Refineslide for the main slider, and it has awesome CSS3 transitions with 3D transform, and of course it supports RWD. The only thing is that the plug in doesn't support the swipe function for mobile, so I had to add the swipe function to make it work.

To make the RWD LW site look nice on retina devices, I had to add Retina.js which provides high resolution retina images for retina screens such as the New iPad and iPhone 4. It really makes images look better on these devices. It's easy to use. Only need to add the script, then create 2 images, one normal res and high res (double size). Then for double size add '@2x' at the end of the file name of the image. Retina.js will find if there is '@2x' image available, and use for retina screens.

I also used Font Awesome to replace images to iconic font so the icons are sharper on any screen. Previously, LW used images for icons, so I tried to cut out images as much as possible and replace it with equivalents from this icon font.

… Internet Explorer

Then finally, of course it has to be cross browser compatible. Internet Explorer was a total pain in the ass to figure out. I had to add stylesheets and scripts for only IE to fix many issues. I started with IE9, then down to IE8, then IE7. Luckily, there are 2 awesome scripts that I used: respond.js and selectivizr.js , respond.js support media queries for IE 8 and below. And Selectivzr supports CSS3 pseudo classes for IE 8 and below that I used for layout. Finally, I created a fixed layout at 960 px for IE7 and below.

Wrapping up

Of course the new RWD LW site is built on awesome CMS (and eCommerce platform), LemonStand. And CSS was written in LESS.

Lastly, this project was built using an awesome app, CodeKit, that does all the LESS compiling, live browser reloads, optimizes images and compresses CSS files (and more!).

In my own personal opinion, you should use the RWD approach for any projects in the future, and don't even think about a separate mobile website approach. :)

Posted in: Development

Welcoming Cole to the team!

Mon, 30 Apr 2012 00:00:00 GMT

We're excited to introduce Cole Sanderson to the Limewheel team as a Web Developer.

The job applicants were coming in a little slow at first, but then a few solid candidates applied for the position. Amongst those was Cole.

We scheduled an interview with him and found his enthusiasm and positive attitude refreshing. He's genuinely passionate about building quality websites, and demonstrates a hunger to continue learning and refining his skills.

He recently completed the New Media Design & Web Developmen program from BCIT. Before that, Cole earned a diploma in Sports Science from Douglas College, and a Certifictate in Small Business from VCC.

Cole's still involved in sports. He continues to compete in provincial and national championships in beach volleyball. Recreational roller hockey is a hobby of his as well.

He's a passionate guy, and we're very excited to have him join the team. We're all looking forward to building some great things with him.

Posted in: News

Moving to Vancouver

Wed, 11 Apr 2012 00:00:00 GMT

We started out in the humble town of Mission, which is about an hour drive from Vancouver. It's fairly quiet and rent was more affordable. Or so we thought.

As our bootstrapped eCommerce startup, LemonStand, grew steadily, it demanded 2 additional employees. We started feeling the pinch of being away from where all the local action is in Vancouver as we continued to grow and needed to bring on even more people.

Building a team

Finding the right team members for a startup is a challenge as it is. They need to comfortable with some growing pains. They need to be OK with, or even enjoy, helping out in various areas and not sitting in a cubicle doing a very narrowly defined job for exactly 8 hours. They need to see the potential and truly want to contribute to the company's success.

The pool of people like this is growing in Vancouver as the startup scene there expands.

Surprises

For a while, one justification we made for staying in Mission was the cost of leasing office space. It seemed more affordable, in comparison to what we saw in realtor's flyers with commercial space.

But Josh Owen had some lucky timing and contacted us right when we started feeling the pain of being in Mission. He helped us find several suitable spaces that not only fit our budget, but fit our culture and style. They were in restored heritage buildings in downtown Vancouver, had a lot of character and were home to other tech companies. Perfect.

We were surprised to find the spaces we did. All the listings we saw were for stuffy, clone-like office towers with absolutely no character. Oddly enough, these were normally the most expensive, probably because of the traditional business types they attract like law firms and accountants.

Making the leap

In March, we decided to go to where the people were and make the city our new home. We'll be in the heart of the startup scene, have access to meetups and other industry events and be able to invite like-minded folks over for coffee.

We're now in the final stages of negotiation on a 1000 sq. ft. office lease just outside Gastown. It's 2 blocks away from waterfront station, so getting their from Mission by train works out perfectly.

Posted in: News

Hiring Web Developer

Tue, 10 Apr 2012 00:00:00 GMT

We're hiring a web developer to join us in our new Vancouver offices that we'll be moving into June 1.

The job

This position involves turning PSDs into functional websites. It includes writing semantic, clean, modern HTML5 and CSS3. Making use of jQuery plugins, with the ability to modify them when needed and make different plugins work togeher. Implementing new themes for LemonStand, working with PHP as well. Occasionally building LemonStand modules.

Career path

There are several paths you could take. While we're looking to hire someone with a range of skills covering back-end and front-end, we expect you to grow into a master of either front-end or back-end development.

Front-end developer (HTML5/CSS3/JavaScript wiz, responsive mobile sites)
Back-end developer (modern PHP web applications, advanced LemonStand modules)
Software engineer (LemonStand)

Development process

We're looking to define some standard sets of tools that we'll use for all projects moving forward. This provides an opportunity to master a tool set and broaden your capailities.

Some of the tools we're looking to make use of: LemonStand, Pyro CMS, FuelPHP, Skeleton and jQuery.

Want to apply?

Read our job listing on Techvibes for more information. You can then send an email to jobs@limewheel.com with your resume, code samples and some info about yourself.

Posted in: News

Softly Launching

Tue, 10 Apr 2012 00:00:00 GMT

Well, it's been a very... very long time coming. We've had a "temporary" site up for a couple years now.

Our new site is mostly up. We still have some holes to patch, and areas to polish, but "done is better than perfect."

What's left

Blog sidebar
More browser testing
Mobile theme
More content
Misc. styles here and there

Moving forward

We'll be releasing updates to the site iteratively over the next several weeks, and continue on progressively. We'll try not to let the cobwebs grow on this one, even if we get really busy.

Posted in: News