Web Design & Development Projects

Primus Camping

Catching up on some projects that I haven’t talked about yet…

Primus was the first ecommerce site I built from the ground up on Shopify. It was a good learning experience. Overall, I like Shopify’s platform. It turned out to be easier than I thought it would be to customize the main and collection page menus. This was also the first site that I built a slider that auto-crops the image based on both browser height and width. This sounds easy, and it is easier with CSS3, but all our sites have to be compatible back to IE8 so we have to use Javascript.

Another highlight on this project is the video on the product page. Shopify doesn’t allow you to give the site admin an easy way to add images and data to a product/page/etc. This made it a little tricky to allow the user to embed a video as Shopify doesn’t have that functionality outside of the WYSIWYG (which we don’t like to use because it requires the admin to know HTML). I solved this problem by using the product image functionality and parsing the ALT tag data for a string. If the string is there, I grab the url that comes after it and use that data to embed the video.

Big Chill Rebuild

A couple weeks ago, the team came to me and asked me to rebuild the Big Chill site from the ground up. There were two major challenges, (1) I had never built a eCommerce site with WooCommerce, and (2) their old site is a pain to navigate the admin (super slow and riddled with 500 errors). The project took me a little longer than I hopped, but in the end, the results (see image below) speak for themselves. The new site is an order of magnitude faster! It is also more intuitive to update (for both the admin and developer).

Syncing Inventory

I almost forgot to write about this project.

One of the hardest things to do in eCommerce is keep your product inventory synced with the warehouse, particularly if you have both eCommerce and physical stores. Fjallraven.us wanted to take their ability to the next level, so they asked us to build sync functionality between their master inventory database and Shopify. The tough part wasn’t syncing, Shopify’s API made that pretty easy (although their throttling makes it painfully slow), it was matching the products on the web with products in the database. Some products had incorrect names, colors, sizes, and even SKUs! To solve this problem I made a quick Excel file that cleaned up the majority of products (thousands) leaving only a couple hundred that had to be done manually. Once we matched the products, we updated the bar codes on Shopify (note to self, never upload products somewhere without bar-codes). Using the bar-codes we can do a nightly sync of inventory numbers. A real-time sync would have been better, but that is not what the client paid for. Maybe next time!

Hint Creative

I’m super stoked about the recent launch of HintCreative.com. We had a lot of fun getting it pixel perfect for their team. As you can see, it has some pretty cool features including the menu animation using isotope and the mobile menu (visible on smaller browser windows). This WordPress theme uses a lot of advanced features like custom post types and taxonomies to allow the admin greater control the content site-wide. This theme also uses the build-in WordPress cropping to automatically serve retina and mobile images.

Be warned of some of their homepage images if you visit the link below.

Reebok Last & Limited Calendar

It’s taken me a while to post this project because I like to wait till they go live; however, it looks like this project was put on the back burner after I pretty much completed it.

I had a lot of fun building this app. It had to be totally responsive and the hover state of each day could cover 4 days. This was a fun challenge to work through. I had to check the position of the hovered box and open the hover state inside the month. I also had to build this app so that they could populate the days using JavaScript. I ended up creating a JavaScript calendar object with years, months and days. Each day has a default state which could be altered if desired. This calendar object was essentially the back-end for the app. It ended up being a super clean way to organize the code.

Fjallraven Live Instagram Feed

I love it when a client asks for something that you don’t see every day. Fjallraven recently launched their flagship stores in Boulder and New York and they wanted to integrate their Instagram account with the event. They asked us to create a live feed where guests could tag their photos with #fjallravenUSA and have them show instantly on their huge screens.

When we heard this project, we didn’t even know if it was possible, but luckily Instagram already had this functionality built into their API. We built the app to listen to the live feed and show a new image if there was one, or loop through the images we already had.

Although we only had a day or so to make this happen, we launched the app in time for the grand opening, making their event much more social.

Polar

The best thing about this project was learning to pull an image stream from Instagram using a hashtag. This turned out to be easier than I thought it would. The only snag was getting the new Instagram videos to load and play correctly.

Dirty Girl Run Redesign

I love projects that take me longer than a week, and this was one of them. This responsive site has three breakpoints (mobile, tablet, desktop) which significantly increased the front-end design time. I had a ton of fun adding in some unusual functionality like loading different images for each breakpoint, and making the homepage slider responsive.