Chan's Personal Blog

This year, I was back in Victoria for three weeks for my annual Christmas vacation. I thought it was going to be quiet time, but I came across a project that amounted to three weeks of raw execution. My task, to modernize and relaunch vanessajeweller.com website in three weeks.

I rarely do private commercial websites these days but this project piqued my interest. I did a quick market analysis and found about a dozen jewellery stores in the Greater Victoria website. Many of the stores that are ranked high on search engines weren't really great websites to begin with. Besides the major jewellery store chains, a lot of competitor websites looked like something out of early 2000s. I felt there was an opportunity to crush the competition with everything that I know about the web now.

Web Development in 2005

The vanessajeweller.com website was first put up in 2005. Here's a screenshot of the old website we were working with:



Some of the primary problems:

• Low quality photos.
• Not a lot of content.
• No content management system.
• No search engine optimization.
• No data analytics.

Looking back at 2005, it's pretty incredible to think about how much technology and the internet has changed since then. As a web developer, a lot of the modern conveniences we take for granted simply weren't in place back then.

Here's a taste of what the web was like in 2005:

• Social media wasn't a big deal. Facebook for businesses wasn't around. Twitter didn't even exist.
• Digital photography wasn't on-par with traditional film cameras yet. DSLR cameras were insanely expensive. Remember when you had to scan photos into the computer?
• Open source content management systems were still very complicated to use and setup.
• The mobile web as we know it today simply did not exist. There were no android or ios devices.
• Web developer tools such as FireBug didn't exist. Debugging CSS/HTML/Javascript was a pain.
• Internet Explorer 6 controlled 89% of the market. Firefox 1.5 had just come out, and controlled 6% of the market.
• Tableless CSS-based websites were starting to gain traction. XHTML 1.0 was apparently the next hot thing.

Hack Day

I only had finite time to work on this project, and the whole thing needed to be shipped before I left Victoria. In the spirit of hack day, I started brainstorming on how I could rapidly bootstrap a professional looking site with a little cash and a little time.

Photography

Priority one was sexy photos for the website. I needed professional looking jewellery photos to maximize the wow factor of the site. I spent a night on the internet scouring for tutorials on jewellery photography. After I was done, I felt like Neo out of the Matrix saying, "woah, I know jewellery photography." A critical piece that I needed was a macroscopic lens; unfortunately they cost at least $400, and I wasn't going to drop that kind of cash for a one-time project. I ended up finding a place in town that rented them for $20/day.

Next, I needed a good digital camera to take photos with. My brother had a DSLR camera available, and he had taken quite a number of courses in photography, so I recruited him to the project. You can take a look at his side of the story on his blog.

Step three was lighting for the photography. A lot of the professionals were using white LED lighting to light up their jewellery. Normal lights give off a yellow-ish light which doesn't look good. I serendipitously found a solution for this while attending a games night at Patrick and Rebecca's. They were outfitting their cabinets with LED strips; they were completely self-contained, very inexpensive, and required very little soldering. I used to have to design circuits and solder together wire, resisters, and LEDs which was a lot of work. My friend Chad happened to have the LED strips with the exact colour temperature I needed, and Patrick gave me a couple power supplies. We bootstrapped together a LED light source, and we were on our way.

Finally, I figured out that we needed a couple plastic backgrounds to stage jewellery on. I needed a white plastic to give off a soft-reflection, and a piece of black acrylic for a dramatic reflection on a black background. I was able to source my materials from a local plastic vendor, and that set me back $60.

The Day Of The Photoshoot

With all our materials in hand, we did a day of photography on site.

My brother and I at the photoshoot, using LED lighting, white plastic background, DSLR with macro lens, and a light box.

Staging jewellery on a black acrylic background.

Final product shot of engagement ring.

It took us about a day to finish photographing everything. My brother produced about two hundred photos. We went through the shots, and made a shortlist of thirty shots that would make it to the website.

The Web In 2012

With the photos in place, it was my turn to throw in my expertise. When I was scoping out the project, I knew I wanted to focus on the following areas:

• Content Management System.
• Search Engine Optimization.
• Social Media Integration.
• Site Speed Performance.
• Data Analytics.

Each of these site features were areas that I could comfortably beat the competition in. Each of the features actually all support search engine optimization as well (which affects your Google/Yahoo/Bing rankings), so it was crucial to have a coherent strategy.

Content management systems have become commoditized and the open source versions of this software are very full featured, so I went with Joomla. There was no sense in reinventing the wheel. In addition, one of the non-profits committees that I sit on recently made a motion to move their site to Joomla, so I figured it was in my interest to learn Joomla. I spent about eight hours reading documentation, reviewing tutorials, playing around with its code, and was ready to build a site on Joomla. Cue Neo saying, "Woah, I know Joomla."

Having the content management system taken care of meant I could focus on writing content for the website. In addition, it gave me the infrastructure to host a blog on the site which is quite important because Google favours sites with fresh content.

Performance is another critical aspect of web development these days. Google has said site speed matters in search engine ranking these days, so it's very important to get it right. I spent a couple days optimizing the website code, and managed to shave off 500 milliseconds from the site so far. More optimizations to come as I collect more live traffic data.

The social media aspect of the website is still relatively new to me, and I will learn this as I go. Preliminary data is quite impressive, and I'm seeing more social referrals than organic web search referrals. That being said, a couple data points doesn't mean much, so we'll have to see the long-term trend on this.

The Finished Product

After three weeks of writing content, coding, and optimizing, I finally relaunched vanessajeweller.com.



I was quite happy at the speed of the project. We went from idea to finished product in three weeks. It was a nice change of pace. The websites that I typically work on these days are used by tens of millions of users, and you need to setup a ton of infrastructure to support that kind of traffic. When you operate on that kind scale, it's hard to launch things fast.

The other takeaway is just how much more a web developer can do today in 2012. If you asked me to build such a site back in 2005 in three weeks, I would have told you that it was impossible. As a programmer, we live in exciting times because we have so many tools, platforms, and infrastructure to build on top of.

Anyway, let me know what you think about the new site. I'm always look for feedback.

Yesterday, Chan Productions participated in the internet blackout in an effort to protest the SOPA/PIPA bill which is being debated in the U.S. Government. Other large websites such as Wikipedia, BoingBoing, Reddit, etc. blacked out their websites in protest. This is what our website looked like yesterday:



For accessibility, this is the blackout message I had on the site:


The dust has settled from the online protest, and Digital Trends has compiled statistics about the blackout:


We'll see if this was enough to kill the bills. Learn more about SOPA/PIPA.

Ladies and gentlemen, it is my pleasure to present to you, the annual 'Best Of Chan' photo collection. This is a collection of my favourite moments from last year which have been curated from my Flickr photo archive. It brings back a lot of memories of all that had come in 2011, both the challenges and victories. I've also put together a sound track to complement your viewing experience, so please hit play on the Grooveshark Music Player below and lets start the slideshow.



Soundtrack:

1. 'Venice Rooftops' From The Assassin's Creed Soundtrack - Jesper Kyd
2. 'Set Fire To The Rain' - Adele

Enjoy!

P.S. I've got other 'Best Of Chan' albums from previous years as well. Here's the 2010 edition, and the 2009 edition.