Monday, January 21, 2013

2006 to 2013, the re-launch of the Fleur Hong Kong website

We hope this article would serve as a simple guide to developers or other people who are interested to build a revenue generating website.

It has been 6 years since we launched the Fleur Hong Kong website on December 2006.

Things are much different back then:
  1. Mobile Internet was a joke back then. Your may have a 5KB/second GPRS connection with a Nokia candy bar phone, running Opera Mini. Nokia was quite popular back then with models with funny numbers like 6230 and 8810.
  2. Screens were very small on desktops. You expect everybody have the same 1024x768 pixels screens. So everything has to fit within 1024 pixels width including the scroll bar.
  3. The most popular browser is Internet Explorer 6. And Macromedia Flash is touted as the future. Dark ages...
  4. Our main development machine is an Apple Powerbook G4 12", running PowerPC.
  5. We made the website using the WebObjects framework from Apple. (Apple didn't just make iPhones and great laptops. They did many great and not so great things from Digital Camera to Laser printers. Steve Jobs was quoted The Next Insanely Great Thing about WebObjects. )
  6. And in 2006, you can still buy a decent place near the fragrant harbour for less than HK$2M.
Enough with these nostalgias. After running our online operations on the old website for 6 years, we have decided that a change has to be made. The new website should take advantage a few things:
  1. Better bandwidth available to desktops and mobile devices
  2. Bigger screens with higher resolutions
  3. More mature open source web frameworks, on client and server sides
  4. Internet Explorer is no longer that popular. Our lion share of users come from iOS and Chrome based desktops. Interestingly, iOS vs. Android viewership is 10:1. Maybe people don't like to buy flowers on Android?
  5. Single-Sign-On capabilities of Facebook
  6. And ideally, provide hooks to a complementary iOS and future Android apps?
So we set out to revamp the website with the following steps:
  1. Re-design the flow of the website, with better user authentications with Facebook Connect and other OAuth2 gateways from Google, Yahoo to Live Microsoft ID.
  2. Add new Paypal payment option to complement the fast credit card checkout
  3. Pick a mature server-side web framework to develop the site with. We end up picking a Python based web framework to which our developers feel comfortable.
  4. Then, pick a good client side web framework. We have short listed with Blueprint CSS, Foundation and Twitter Bootstrap. We end up using Twitter Bootstrap as it seemed to work better on Internet Explorer compared with Foundation. Blueprint CSS would have been the best as you can make pages work even on IE 6, but, you will lose many useful components available for free from Bootstrap, especially the Forms.
In 2006, our developers were able to finish the website in 3 months. This time, the development process was shrinked to 3 weeks. Here is why the development process can be 4 times faster:
  1. Switching from a compiled language (Java) to a scripting language. It was a pain trying to compile a website with Java, start the server, and checked the result. The new scripting based frameworks means changes were reflected in real time.
  2. Tools were definitely better. A decent MacBook Pro with 27" screen raises developers productivity.
  3. The availability of Github means coding is no longer a solo thing. You can always learn from someone by checking out Github.

I hope this short piece can give you a glimpse on how to build a great solid website that does solid business on the Internet. We will start covering what Fleur Hong Kong has been doing with web and mobile technolgoies from time to time.

Stay tuned.